/* Inter embutida (variável, offline-safe — sem CDN) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

:root{
  /* Marca */
  --primary:#105CC6; --primary-deep:#0d2b6e; --primary-ink:#0d2b6e;
  --primary-soft:#f0f5ff; --realce-borda:#dbeafe;
  --grad-marca:linear-gradient(160deg,#0d2b6e 0%,#105CC6 100%);
  /* "Automático" (destaques de campo auto-preenchido) */
  --auto:#105CC6; --auto-soft:#f0f5ff;
  /* Neutros */
  --ink:#1F2024; --muted:#6b7280; --txt-3:#9ca3af;
  --line:#e5e7eb; --bg:#f9fafb; --card:#ffffff; --fundo-hover:#f8f9ff;
  /* Semânticas */
  --ok:#16a34a; --ok-bg:#dcfce7;
  --danger:#dc2626; --erro:#dc2626; --erro-bg:#fee2e2;
  --atencao:#d97706; --atencao-bg:#fffbeb; --atencao-borda:#fcd34d;
  --online:#34c759; --offline:#ff3b30;
  /* Forma / elevação */
  --radius:8px; --raio-pill:99px;
  --sombra-repouso:0 1px 3px rgba(0,0,0,0.04);
  --sombra-hover:0 4px 12px rgba(16,92,198,0.10);
  --sombra-flutuante:0 8px 32px rgba(0,0,0,0.20);
  --anel-foco:0 0 0 3px rgba(16,92,198,0.12);
  /* Tipografia */
  --fonte:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--fonte);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Feedback tátil: tudo clicável encolhe levemente ao tocar */
button{transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, filter .12s ease}
button:active{transform:scale(.98)}
button:focus-visible{outline:none;box-shadow:var(--anel-foco)}

.topo{position:sticky;top:0;background:var(--primary);color:#fff;padding:18px 16px 16px;z-index:10}
.topo h1{margin:0;font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:.2px}
.topo-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.16);border-radius:var(--raio-pill);padding:4px 10px;white-space:nowrap;flex:none}
.sync .dot{width:8px;height:8px;border-radius:50%;flex:none}
.nav{display:flex;gap:4px;margin-top:28px;overflow-x:auto}
.nav button{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:transparent;border:none;color:rgba(255,255,255,.65);font-size:11px;cursor:pointer;
  padding:2px 6px;min-width:58px;white-space:nowrap;font-weight:600}
.nav button .n{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.nav button.on{color:#fff}
.nav button.on .n{background:#fff;color:var(--primary)}
.nav button.done .n{background:rgba(255,255,255,.55);color:var(--primary-deep)}

.tela{max-width:480px;margin:0 auto;padding:20px;animation:telaIn .2s ease}
@keyframes telaIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* Tablet/desktop: container um pouco mais largo p/ aproveitar a tela */
@media (min-width:768px){ .tela{max-width:600px;padding:24px 28px} .nav{justify-content:center} }

.titulo-tela{font-size:22px;font-weight:800;color:var(--ink);margin:2px 0 18px;
  display:flex;align-items:center;gap:8px;letter-spacing:-.2px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}

input,select,textarea{width:100%;height:48px;padding:0 14px;font-size:14px;font-family:var(--fonte);
  border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;transition:border-color .12s ease, box-shadow .12s ease}
textarea{height:auto;padding:12px 14px;line-height:1.4}
input::placeholder,textarea::placeholder{color:var(--txt-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--anel-foco)}

/* Sugestões tocáveis (substitui datalist nativo — vertical, sem corte horizontal) */
.sugestoes{display:none;flex-direction:column;margin-top:6px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:#fff;max-height:230px;overflow-y:auto}
.sugestoes.show{display:flex}
.sugestoes button{all:unset;display:block;width:100%;box-sizing:border-box;padding:11px 12px;
  font-size:14px;line-height:1.3;color:var(--ink);text-align:left;cursor:pointer}
.sugestoes button:nth-child(even){background:var(--bg)}
.sugestoes button:active{background:var(--primary-soft)}
@media (hover:hover){.sugestoes button:hover{background:var(--primary-soft)}}

.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:46%;height:48px;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:var(--radius);font-size:15px;font-weight:500;cursor:pointer}
.seg button.sel{background:var(--primary-soft);color:var(--primary-ink);border-color:var(--primary);font-weight:600}

.auto{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--auto);margin-top:6px}
.dois{display:flex;gap:10px}
.dois>*{flex:1}

.btn{display:block;width:100%;height:50px;border:none;border-radius:var(--radius);font-size:16px;
  font-weight:600;cursor:pointer;margin-top:8px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(16,92,198,.18)}
.btn-primary:disabled{background:var(--txt-3);box-shadow:none;cursor:default}
.btn-primary:disabled:active{transform:none}
.btn-ghost{background:#f3f4f6;border:1.5px solid var(--line);color:var(--muted)}

.erro{color:var(--danger);font-size:13px;margin-top:6px;display:none}
.aviso{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;color:var(--muted);font-size:14px}
.dica{display:flex;gap:8px;align-items:center;background:var(--primary-soft);color:var(--primary-ink);
  font-size:12px;padding:9px 11px;border-radius:var(--radius);margin-bottom:16px;font-weight:500}
.ic{width:18px;height:18px;flex:none}

.card{border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px;margin-bottom:14px;box-shadow:var(--sombra-repouso)}
.linha{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius);margin-bottom:8px;background:#fff}
.linha .corpo{flex:1;min-width:0}
.t2{font-size:12px;color:var(--muted)}
.linha .t1{font-size:14px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx{flex:none;width:40px;height:40px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--primary);font-size:16px;cursor:pointer}
.f-sel{width:100%;height:38px;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;padding:0 8px;font-size:13px;color:var(--ink)}
.bx:disabled{opacity:.45;cursor:default}

/* ── Skeleton loading ── */
@keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.sk-bar,.sk-box{background:linear-gradient(90deg,#f0f2f5 25%,#e4e7eb 50%,#f0f2f5 75%);background-size:1200px 100%;animation:sk-shimmer 1.5s infinite linear;border-radius:4px}
.sk-box{border-radius:8px}
.linha.sk{pointer-events:none}
.sk .sk-t1{height:14px;width:58%;margin-bottom:8px}
.sk .sk-t2{height:11px;width:78%}
.brm{flex:none;width:40px;height:40px;border:none;background:none;color:var(--muted);font-size:22px;cursor:pointer}

.seccard{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:10px;cursor:pointer;text-align:left;box-shadow:var(--sombra-repouso)}
.seccard .ico{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.painel{border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:10px;overflow:hidden}
.painel-h{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;background:#fff;border:none;cursor:pointer;text-align:left}
.painel-h .ico{width:34px;height:34px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.painel-b{padding:2px 14px 14px}
.chev{display:inline-block;transition:transform .15s}
.chev.open{transform:rotate(90deg)}

/* Ícone de sucesso: bounce de recompensa */
.ok-bounce{animation:okBounce .55s cubic-bezier(0.34,1.2,0.64,1)}
@keyframes okBounce{0%{transform:scale(0)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Snackbar com "Desfazer" */
.snack{position:fixed;left:50%;bottom:18px;transform:translate(-50%,150%);
  display:flex;align-items:center;gap:12px;max-width:92%;
  background:#1F2024;color:#fff;border-radius:var(--radius);
  padding:11px 10px 11px 18px;font-size:14px;box-shadow:var(--sombra-flutuante);
  z-index:50;opacity:0;transition:transform .22s ease, opacity .22s ease;pointer-events:none}
.snack.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.snack button{background:transparent;border:none;color:#8fb8ff;font-weight:700;font-size:14px;
  cursor:pointer;padding:8px 14px;border-radius:var(--raio-pill);white-space:nowrap}

/* Hover só onde há mouse — não "gruda" no toque */
@media (hover:hover){
  .card:hover,.seccard:hover,.linha:hover{border-color:var(--primary);box-shadow:var(--sombra-hover)}
  .btn-primary:hover:not(:disabled){filter:brightness(1.06)}
  .btn-ghost:hover{background:#eceef1}
  .seg button:hover:not(.sel){border-color:var(--primary)}
}