/* CustoCerto — Design System v2 ("o cupom que virou inteligência").
   Fiel ao mockup docs/mockups-custocerto.html. Mobile-first.
   Organização: TOKENS · BASE · (N) componentes do mockup · (P) ganchos preservados. */

/* ===================== TOKENS ===================== */
:root{
  --tinta:#0b2e38; --navy:#014051; --navy-2:#0a5468;
  --lime:#91c21e; --lime-tinta:#5c7f0e; --lime-nevoa:#f0f7de;
  --ambar:#b26a00; --ambar-nevoa:#fdf3e2; --verm:#b3261e;
  --nevoa:#eef2f2; --papel:#ffffff; --grafite:#41545a; --linha:#dde5e6;
  --r:14px; --sombra:0 1px 2px rgba(11,46,56,.05),0 6px 18px rgba(11,46,56,.07);
  --disp:"Bricolage Grotesque",sans-serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Azeret Mono",monospace;

  /* aliases: nomes antigos usados pelo CSS legado → tokens novos (1 fonte de verdade) */
  --verde:var(--navy); --verde-escuro:var(--navy-2); --verde-claro:var(--lime-nevoa);
  --texto:var(--tinta); --cinza:var(--grafite); --fundo:var(--nevoa);
  --branco:var(--papel); --borda:var(--linha); --vermelho:var(--verm); --raio:var(--r);
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--nevoa);color:var(--tinta);font-family:var(--corpo);
  line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}

/* ============================================================
   (N) COMPONENTES DO MOCKUP
   ============================================================ */

/* Header + marca (lockup tipográfico: ícone lime ✓ + Custo/Certo) */
.topo{background:var(--navy);color:#fff;padding:16px 20px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:inline-flex;align-items:center;text-decoration:none;color:#fff;
  font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1}
.marca b{color:var(--lime);font-weight:800}
.marca-ico{display:inline-flex;width:26px;height:26px;border-radius:8px;
  background:var(--lime);color:var(--navy);align-items:center;justify-content:center;
  font-weight:800;font-size:15px;margin-right:8px;font-family:var(--disp)}

/* Conteúdo + cartão */
.conteudo{padding:18px 16px 96px;max-width:560px;margin:0 auto}
.cartao{background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra);
  padding:18px;margin-bottom:14px}

/* Tipografia de tela */
h3.titulo,.titulo{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em}
.sub{color:var(--grafite);font-size:13.5px;margin-top:4px;line-height:1.5}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grafite)}

/* Botões */
.botao{display:block;width:100%;text-align:center;background:var(--navy);color:#fff;
  font-family:var(--corpo);font-weight:700;font-size:15.5px;border:0;border-radius:12px;
  padding:14px;margin-top:14px;cursor:pointer;transition:background .15s;text-decoration:none}
.botao:hover{background:var(--navy-2)}
.botao:disabled{opacity:.6;cursor:progress}
.botao--sec{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.botao--sec:hover{background:var(--lime-nevoa)}
.botao--fantasma{background:transparent;color:var(--verm);border:0;font-weight:600;
  font-size:13px;padding:8px;margin-top:6px;text-decoration:underline;text-underline-offset:3px}

/* Campos (inputs reais no visual do mockup .inp) */
.campo{margin-top:12px;display:flex;flex-direction:column}
.campo label,.campo>span{display:block;font-size:12.5px;font-weight:600;
  color:var(--grafite);margin-bottom:6px}
.campo input,.campo textarea,.campo select{width:100%;font:inherit;font-size:15px;
  color:var(--tinta);background:#fff;border:1.5px solid var(--linha);border-radius:11px;
  padding:13px 14px}
.campo textarea{resize:vertical;min-height:74px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--navy)}

/* Dinheiro (dígitos tabulares) */
.dinheiro{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em}
.d-xl{font-size:30px;line-height:1.05}.d-lg{font-size:21px}.d-md{font-size:16.5px}
.moeda{font-size:.62em;font-weight:700;color:var(--grafite);margin-right:2px;vertical-align:8%}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge--ok{background:var(--lime-nevoa);color:var(--lime-tinta)}
.badge--atencao{background:var(--ambar-nevoa);color:var(--ambar)}

/* Medidor de CMV */
.medidor{height:8px;border-radius:999px;background:var(--nevoa);overflow:hidden;margin-top:8px}
.medidor i{display:block;height:100%;border-radius:999px;background:var(--lime)}
.medidor i.alto{background:var(--ambar)}

/* Tabbar (fixa + safe-area do app; visual do mockup: SVG + indicador lime) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--linha);box-shadow:0 -6px 18px rgba(11,46,56,.06);
  padding:6px 4px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 4px;color:var(--grafite);font-size:10.5px;font-weight:600;
  position:relative;border-radius:10px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tab--ativa{color:var(--navy)}
.tab--ativa::before{content:"";position:absolute;top:-7px;left:26%;right:26%;height:3px;
  border-radius:0 0 4px 4px;background:var(--lime)}
.tab:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
body.tem-tabbar .conteudo{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0))}

/* Cupom (assinatura visual) */
.cupom{background:#fff;border-radius:4px 4px 0 0;box-shadow:var(--sombra);font-family:var(--mono);
  font-size:12.5px;color:var(--tinta);padding:16px 14px 6px;position:relative;margin-bottom:14px}
.cupom::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:linear-gradient(-45deg,transparent 70%,#fff 72%) 0 0/12px 10px repeat-x,
             linear-gradient(45deg,transparent 70%,#fff 72%) 0 0/12px 10px repeat-x}
.cupom h4{font-family:var(--mono);font-weight:700;font-size:12px;text-align:center;letter-spacing:.06em}
.cupom .meta{text-align:center;color:var(--grafite);font-size:11px;margin:2px 0 8px}
.cupom .tracejada{border:0;border-top:1.5px dashed var(--linha);margin:8px 0}
.linha-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;align-items:baseline}
.linha-item .nome{font-weight:600}
.linha-item .det{color:var(--grafite);font-size:11px;display:block;margin-top:1px}
.linha-item .val{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.linha-item.atencao{background:var(--ambar-nevoa);margin:0 -8px;padding:6px 8px;border-radius:8px}
.linha-item.atencao .val{color:var(--ambar)}
.cupom .total{display:flex;justify-content:space-between;font-weight:700;font-size:14px;padding-top:8px}

/* Filas de gasto/prato + barrinha de proporção */
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 2px;border-bottom:1px solid var(--nevoa)}
.fila:last-child{border-bottom:0}
.fila .rot{font-weight:600;font-size:14.5px}
.fila .rot small{display:block;font-weight:500;color:var(--grafite);font-size:12px;margin-top:2px}
.barrinha{height:5px;border-radius:999px;background:var(--nevoa);margin-top:6px;width:100%}
.barrinha i{display:block;height:100%;border-radius:999px;background:var(--navy);opacity:.85}

/* Controles do relatório */
.pill-mes{display:inline-flex;gap:8px;background:#fff;border:1.5px solid var(--linha);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--tinta);align-items:center}
.acoes-rel{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.baixar{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* Landing (index.html) */
.hero{background:linear-gradient(160deg,var(--navy) 0%,#02303d 100%);color:#fff;padding:26px 20px 30px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.02em;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p{color:#bcd3d9;font-size:14px;margin-top:10px;line-height:1.55}
.hero .botao{background:var(--lime);color:var(--tinta)}
.hero .botao:hover{background:#a4d62a}
.passo{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.passo b{flex:none;width:26px;height:26px;border-radius:999px;background:var(--lime-nevoa);
  color:var(--lime-tinta);display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--disp)}
.passo div{font-size:13.5px;color:var(--grafite);line-height:1.5}
.passo div strong{color:var(--tinta)}

/* Alvo de foto (registrar) + divisor "ou" */
.foto-alvo{display:block;border:2px dashed var(--navy);border-radius:14px;background:var(--lime-nevoa);
  padding:26px 16px;text-align:center;cursor:pointer;margin-top:14px}
.foto-alvo input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.foto-alvo .ico{font-size:30px}
.foto-alvo .tit{font-family:var(--disp);font-weight:700;font-size:16px;margin-top:6px;color:var(--navy);word-break:break-word}
.foto-alvo .hint{font-size:12.5px;color:var(--grafite);margin-top:3px}
.divisor-ou{display:flex;align-items:center;gap:10px;margin:16px 0 2px;color:var(--grafite);font-size:12px;font-weight:600}
.divisor-ou::before,.divisor-ou::after{content:"";flex:1;height:1px;background:var(--linha)}

/* ============================================================
   (P) GANCHOS PRESERVADOS — nomes intactos p/ HTML e JS atuais
   (restilizados com os tokens novos; nada de comportamento muda)
   ============================================================ */

/* Marca antiga baseada em <img> (HTML atual, até a Etapa 2 trocar pelo lockup) */
.marca__icone{width:28px;height:auto;display:block;margin-right:8px}
.marca__nome{font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1}
.marca__custo{color:#fff}.marca__certo{color:var(--lime)}
.topo__sub{font-size:12px;color:#bcd3d9;font-weight:500;margin-left:auto;text-align:right}

/* Títulos/textos legados */
.cartao__titulo{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:.4rem}
.cartao__texto{color:var(--grafite);margin-top:.5rem;font-size:14px;line-height:1.5}
.subtitulo{font-family:var(--disp);font-size:17px;font-weight:700}
.divisor{border:0;border-top:1px solid var(--linha);margin:20px 0}
.legenda{font-size:12.5px;color:var(--grafite)}
.sucesso{color:var(--lime-tinta);font-weight:700}

/* Links / rodapés */
.rodape-link{margin-top:12px;font-size:13px;color:var(--grafite);text-align:center}
.link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--navy);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rodape-site{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:20px;
  font-size:13px;color:var(--grafite)}
.rodape-site a{color:var(--navy);font-weight:600;text-decoration:none}
.rodape-site a:hover{text-decoration:underline}

/* Apresentação pré-login (login.html atual; some na Etapa 2) */
.intro{margin-bottom:18px}.intro__lead{font-size:16px;color:var(--tinta)}
.passos{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.passos li{display:flex;align-items:center;gap:10px;color:var(--grafite);font-size:14px}
.passos__n{flex:none;width:26px;height:26px;border-radius:999px;background:var(--lime-nevoa);
  color:var(--lime-tinta);font-family:var(--disp);font-weight:700;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center}

/* Senha + validação */
.form{display:flex;flex-direction:column;gap:14px}
/* dentro de .form o gap já cuida do espaçamento (evita margem dobrada com .campo) */
.form>.campo,.form>.botao{margin-top:0}
.senha-campo{position:relative}
.senha-campo input{width:100%;padding-right:44px}
.olho{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;font-size:18px;line-height:1;padding:5px}
.erro-campo{display:block;margin-top:5px;color:var(--verm);font-size:12px;font-weight:600}
input.invalido{border-color:var(--verm)}
.aceite{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--grafite)}
.aceite input{margin-top:3px;flex:none}
.aceite a{color:var(--navy);font-weight:600}

/* Mensagem de erro/aviso (usada por vários JS) */
.mensagem{margin-top:12px;color:var(--verm);font-size:13.5px;font-weight:600;min-height:1.2em}

/* Conferência/edição da compra (registrar.js) */
.itens{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.item{border:1px solid var(--linha);border-radius:12px;padding:12px 14px;background:#fff}
.item--conferir{border-color:var(--ambar);background:var(--ambar-nevoa)}
.item__topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.item__nome{font-weight:600}
.item__info{color:var(--grafite);font-size:13px;margin-top:3px}
.item__obs{color:var(--ambar);font-size:12.5px;margin-top:6px}
.badge--baixa{background:var(--ambar-nevoa);color:var(--ambar)}
.tag{display:inline-block;background:var(--lime-nevoa);color:var(--lime-tinta);border-radius:999px;
  padding:1px 8px;font-size:11.5px;font-weight:600}
.revisao{display:flex;flex-direction:column;gap:14px;margin:12px 0}
.rev-produto{flex:1;min-width:0;font:inherit;font-weight:600;font-size:15px;color:var(--tinta);
  background:#fff;border:1.5px solid var(--linha);border-radius:8px;padding:8px 10px}
.rev-grade{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rev-grade label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--grafite)}
.rev-grade input{font:inherit;font-size:14px;color:var(--tinta);background:#fff;
  border:1.5px solid var(--linha);border-radius:8px;padding:9px 10px}
.rev-produto:focus,.rev-grade input:focus{outline:none;border-color:var(--navy)}
.rev-remover{margin-top:8px;color:var(--verm);text-decoration:underline;text-underline-offset:3px}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.acoes .botao{flex:1;min-width:140px;margin-top:0}

/* Relatório: filtro + categorias expansíveis (gastos.js) */
.rel-controles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rel-mes{flex:1;min-width:140px;font:inherit;background:#fff;border:1.5px solid var(--linha);
  border-radius:11px;padding:11px 12px}
.rel-controles .botao{margin-top:0}
.cat{border:1px solid var(--linha);border-radius:12px;margin-top:10px;overflow:hidden}
.cat>summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px;
  cursor:pointer;font-weight:700;list-style:none}
.cat>summary::-webkit-details-marker{display:none}
.cat[open]>summary{border-bottom:1px solid var(--linha)}
.cat .itens{padding:10px 13px}
.cat__nome::before{content:"▸ ";color:var(--grafite)}
.cat[open] .cat__nome::before{content:"▾ "}

/* Pratos / ficha técnica (pratos.js) */
.prato{border:1px solid var(--linha);border-radius:12px;margin-top:10px;overflow:hidden}
.prato>summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px;
  cursor:pointer;font-weight:700;list-style:none}
.prato>summary::-webkit-details-marker{display:none}
.prato[open]>summary{border-bottom:1px solid var(--linha)}
.prato .itens{padding:10px 13px}
.ing-linha{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.add-ing{display:flex;flex-wrap:wrap;gap:7px;padding:0 13px 10px}
.add-ing input{font:inherit;font-size:14px;background:#fff;border:1.5px solid var(--linha);
  border-radius:8px;padding:9px 10px}
.add-ing input:focus{outline:none;border-color:var(--navy)}
.ing-produto{flex:1;min-width:140px}.ing-qtd{width:80px}.ing-unid{width:70px}
.add-ing .botao{margin-top:0;flex-basis:100%}
.prato-excluir{display:inline-block;margin:0 13px 13px;color:var(--verm);text-decoration:underline;text-underline-offset:3px}

/* Pop-up de confirmação (core.js) */
.overlay{position:fixed;inset:0;background:rgba(11,46,56,.5);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:var(--r);box-shadow:var(--sombra);padding:20px;width:100%;max-width:360px}
.modal__msg{font-weight:600;margin-bottom:16px}
.modal__acoes{display:flex;gap:10px}
.modal__acoes .botao{flex:1;margin-top:0}
.botao--perigo{background:var(--verm)}
.botao--perigo:hover{background:#8f1e17}
.botao--secundario{background:transparent;color:var(--navy);border:1.5px solid var(--navy);margin-top:14px}
.botao--secundario:hover{background:var(--lime-nevoa)}

/* CMV ao vivo (cmv.js) */
.cmv-corpo{padding:11px 13px}
.cmv-corpo .item__info{margin-top:5px}
.cmv-itens{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:7px}

/* Conta (conta.js) */
.dados{margin-top:12px}
.dados__linha{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linha)}
.dados__linha:last-child{border-bottom:0}
.dados dt{color:var(--grafite);font-size:14px}
.dados dd{font-weight:600;text-align:right;word-break:break-word}