/* 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;white-space:nowrap}
.topo h1 .ic{flex:none}
.topo-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topo-dir{display:flex;align-items:center;gap:8px;flex:none}
.usuario-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.16);border:none;border-radius:var(--raio-pill);padding:5px 10px;cursor:pointer;max-width:140px}
.chip-dot{width:8px;height:8px;border-radius:50%;flex:none}
.usuario-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usuario-chip[hidden]{display:none}
@media (hover:hover){.usuario-chip:hover{background:rgba(255,255,255,.28)}}
.login-emblema{width:62px;height:62px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center}
.senha-wrap{position:relative}
.senha-wrap input{padding-right:48px}
.olho{position:absolute;top:0;right:0;height:48px;width:46px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--txt-3);cursor:pointer;padding:0}
.olho svg{width:20px;height:20px}
.olho.olho-on{color:var(--primary)}
.olho:active{transform:none}
@media (hover:hover){.olho:hover{color:var(--primary)}}

/* ── Telas de ACESSO (login/senha/criar) — tela cheia branca, sem a barra do topo ── */
body.acesso{background:#fff}
body.acesso .topo{display:none}
.tela-acesso{max-width:400px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 46px) 26px 40px;animation:telaIn .2s ease}
.acesso-logo{width:56px;height:56px;border-radius:15px;background:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.acesso-logo svg{width:28px;height:28px;color:#fff}
.acesso-titulo{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin:0 0 6px}
.acesso-sub{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 28px}
/* Campo com ícone à esquerda */
.campo-ic{position:relative}
.ic-esq{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;color:var(--txt-3);pointer-events:none;z-index:1}
.ic-esq svg{width:20px;height:20px}
.campo-ic input,.senha-wrap.com-ic input{padding-left:44px}
/* Dica discreta na tela de login (primeiro acesso) — texto leve, sem caixa colorida */
.acesso-hint{display:flex;align-items:flex-start;gap:7px;margin:16px 2px 0;
  font-size:12.5px;color:var(--muted);line-height:1.45}
.acesso-hint svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--txt-3)}
.acesso-hint b{color:var(--ink);font-weight:600}
.nav{display:flex;gap:4px;margin-top:28px;overflow-x:auto}
.nav:empty{margin-top:0}   /* sem passos (home/sucesso): não deixa espaço morto na barra azul */
.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} }

/* Rodapé fixo: botões de navegação (Continuar/Voltar etc.) sempre visíveis, sem
   depender de rolar a tela até o fim. .tela ganha padding-bottom extra (ver
   rodape() em app.js) pra o conteúdo não ficar escondido atrás do rodapé. */
.rodape-fixo{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1.5px solid var(--line);box-shadow:0 -4px 10px rgba(0,0,0,.06);padding:12px 20px calc(12px + env(safe-area-inset-bottom));z-index:5}
.rodape-fixo>div{max-width:480px;margin:0 auto}
.rodape-pad{padding-bottom:140px}
@media (min-width:768px){ .rodape-fixo>div{max-width:600px} }

.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}
/* Home: ancorada no topo (como o resto do app), com folga maior que as demais telas
   — centralizar verticalmente deixava buraco em cima E embaixo, parecendo solta. */
.tela-home{padding-top:28px}
/* Saudação da home */
.home-saudacao{margin:4px 0 24px}
.home-ola{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin:0 0 3px}
.home-data{font-size:13px;color:var(--txt-3);margin:0}

.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)}}

.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}
.contagem-lista{font-size:12.5px;font-weight:600;color:var(--primary);margin:-8px 0 12px}
.contagem-lista:empty{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:32px;height:32px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.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);cursor:pointer;display:flex;align-items:center;justify-content:center}

.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)}}

.spin{animation:spin .8s linear infinite;display:inline-flex}
@keyframes spin{to{transform:rotate(360deg)}}

/* 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)}
}