/* ============ THEIA — tema claro ============ */

/* Atkinson Hyperlegible Next — desenhada pelo Braille Institute para baixa visão.
   Escolha temática (ERP de ótica) e funcional (tabela densa em corpo pequeno).
   Auto-hospedada: loja com internet ruim não pode depender de CDN pra ter texto.
   Variável 200..800 num arquivo só. */
@font-face{
  font-family:'Atkinson';
  src:url('/fonts/atkinson.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Atkinson';
  src:url('/fonts/atkinson-ext.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --fundo:#F7F3E9; --fundo-2:#EFE8D8; --cartao:#FFFFFF;
  --tinta:#26301C; --tinta-2:#6d6a5e;
  --oliva:#2E3A24; --oliva-2:#5C6B3C; --ouro:#B98A44; --ouro-2:#D8A85F;
  --ok:#3e7d4f; --erro:#a33d2f;
  --raio:14px; --sombra:0 10px 30px -14px rgba(38,48,28,.25);

  /* ESCALA TIPOGRÁFICA — 6 degraus, não 23.
     Tinha .74/.75/.76/.78rem convivendo: ninguém enxerga a diferença, mas o
     acúmulo de quase-igual é o que faz a tela parecer "não decidida". */
  --t-micro:.75rem;   /* etiqueta, TH, chip        */
  --t-mini:.82rem;    /* apoio, botão, legenda     */
  --t-base:.92rem;    /* corpo, input, célula      */
  --t-med:1rem;       /* h3, destaque              */
  --t-alto:1.22rem;   /* h2, título de tela        */
  --t-topo:1.5rem;    /* marca                     */

  /* ESCALA DE ESPAÇO — 6 degraus, não 33. Base 4. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  /* Fonte de CAMPO (input/select/textarea) — separada do resto de propósito:
     no celular ela precisa ser 16px, senão o Safari do iPhone dá zoom sozinho
     a cada toque e a tela pula. Um lugar só decide isso (ver @media no fim). */
  --t-campo:var(--t-base);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Atkinson',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--fundo);color:var(--tinta);line-height:1.5}
button{cursor:pointer;font-family:inherit}

/* ---- login ---- */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(110% 110% at 20% 0%, #fdfbf4 0%, var(--fundo) 55%, var(--fundo-2) 100%)}
.cartao-login{background:var(--cartao);border-radius:20px;box-shadow:var(--sombra);padding:var(--e6);width:min(400px,92vw)}
.marca{display:flex;align-items:center;gap:13px;margin-bottom:28px}
.marca h1{font-size:var(--t-topo);letter-spacing:.24em;color:var(--oliva)}
.marca small{display:block;font-size:.62rem;letter-spacing:.34em;color:var(--ouro);font-weight:600}
form label{display:block;font-size:var(--t-mini);font-weight:600;margin:14px 0 6px}
form input{width:100%;padding:var(--e3) var(--e4);border:1.5px solid #ddd6c4;border-radius:10px;font-size:var(--t-campo);background:#fbf9f3}
form input:focus{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(185,138,68,.18)}
form button[type=submit]{width:100%;margin-top:20px;padding:var(--e3);border:0;border-radius:100px;
  background:var(--oliva);color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-mini);transition:.25s}
form button[type=submit]:hover{background:var(--ouro)}
.erro{color:var(--erro);font-size:var(--t-mini);margin-top:12px;min-height:1.2em}
.rodape-login{text-align:center;color:var(--tinta-2);font-size:var(--t-micro);margin-top:22px}

/* ---- app ---- */
.topo{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:var(--e3) var(--e5);background:rgba(247,243,233,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(38,48,28,.08)}
.marca-mini{display:flex;align-items:center;gap:9px}
.marca-mini strong{letter-spacing:.22em;color:var(--oliva)}
.chip-empresa{margin-left:10px;font-size:var(--t-micro);background:var(--fundo-2);color:var(--oliva-2);
  padding:var(--e1) var(--e3);border-radius:100px;font-weight:600}
.topo-dir{display:flex;align-items:center;gap:14px;font-size:var(--t-base);color:var(--tinta-2)}
.botao-suave{border:1px solid rgba(38,48,28,.18);background:transparent;color:var(--tinta);
  padding:var(--e2) var(--e4);border-radius:100px;font-size:var(--t-mini);font-weight:600;transition:.25s}
.botao-suave:hover{background:var(--oliva);color:#fff;border-color:var(--oliva)}

.conteudo{max-width:1560px;margin:26px auto;padding:0 var(--e4);display:flex;flex-direction:column;gap:24px}
.painel{background:var(--cartao);border-radius:var(--raio);box-shadow:var(--sombra);padding:var(--e5)}
.painel-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.painel-cab h2{font-size:var(--t-alto);color:var(--oliva)}

.tabela-envolve{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-base)}
th{text-align:left;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);
  padding:var(--e2) var(--e3);border-bottom:2px solid var(--fundo-2)}
td{padding:var(--e3);border-bottom:1px solid #f1ecdf;vertical-align:middle}
td.vazio{text-align:center;color:var(--tinta-2);padding:var(--e5)}
select.status{padding:var(--e2) var(--e3);border-radius:100px;border:1.5px solid #ddd6c4;background:#fbf9f3;font-size:var(--t-campo)}
select.status.novo{border-color:var(--ouro);color:#8a6425}
select.status.contatado{border-color:#7d97b8;color:#33567e}
select.status.convertido{border-color:var(--ok);color:var(--ok)}
select.status.perdido{border-color:#c4b8b4;color:#8a7f7b}

.grade-unidades{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cartao-unidade{border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e4)}
.cartao-unidade b{display:block;color:var(--oliva)}
.cartao-unidade span{font-size:var(--t-mini);color:var(--tinta-2)}

/* ---- Fase 1: abas, botões, tabelas ---- */
.oculta{display:none !important}
/* 1560px = mesma largura de .conteudo: a régua PRECISA bater com o card (estava 1100 → 83px fora) */
.abas{max-width:1560px;margin:18px auto 0;padding:0 var(--e4);display:flex;gap:6px;border-bottom:1px solid rgba(38,48,28,.1);
  overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
/* nowrap + shrink:0 — uma aba quebrando em 2 linhas estica TODAS (13 abas ficaram com 65px de altura) */
.aba{border:0;background:transparent;padding:var(--e3) var(--e4);font-size:var(--t-base);font-weight:600;color:var(--tinta-2);
  white-space:nowrap;flex-shrink:0;
  border-bottom:3px solid transparent;margin-bottom:-1px;transition:.2s}
.aba:hover{color:var(--oliva)}
.aba.ativa{color:var(--oliva);border-bottom-color:var(--ouro)}
.cab-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.campo-busca{padding:var(--e2) var(--e4);border:1.5px solid #ddd6c4;border-radius:100px;background:#fbf9f3;font-size:var(--t-campo);min-width:230px}
.campo-busca:focus{outline:none;border-color:var(--ouro)}
.check-inline{display:flex;align-items:center;gap:6px;font-size:var(--t-mini);color:var(--tinta-2)}
.botao-primario{border:0;background:var(--oliva);color:#fff;padding:var(--e2) var(--e4);border-radius:100px;
  font-weight:700;font-size:var(--t-mini);transition:.25s}
.botao-primario:hover{background:var(--ouro)}
.botao-mini{border:1px solid rgba(38,48,28,.18);background:transparent;color:var(--oliva);
  padding:var(--e1) var(--e3);border-radius:100px;font-size:var(--t-micro);font-weight:600}
.botao-mini:hover{background:var(--oliva);color:#fff}
.botao-mini:disabled{opacity:.5;cursor:default}
.tag-ok{color:var(--ok);font-size:var(--t-mini);font-weight:600}

/* ---- modal ---- */
/* ---- diálogo do sistema (substitui alert/confirm/prompt do navegador) ----
   z-index acima do modal (50): confirmar algo DENTRO de um modal aberto. */
.dlg-fundo{position:fixed;inset:0;background:rgba(38,48,28,.5);display:flex;align-items:center;
  justify-content:center;padding:var(--e4);z-index:70}
.dlg-cartao{background:var(--cartao);border-radius:14px;box-shadow:var(--sombra);width:min(420px,100%);
  padding:var(--e5);animation:dlg-entra .14s ease-out}
@keyframes dlg-entra{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.dlg-cartao h4{color:var(--oliva);font-size:var(--t-med);margin-bottom:var(--e2)}
.dlg-cartao p{color:var(--tinta-2);font-size:var(--t-mini);line-height:1.5;white-space:pre-line}
#dlgCampo{width:100%;margin-top:var(--e3);padding:var(--e2) var(--e3);border:1.5px solid #ddd6c4;
  border-radius:9px;background:#fbf9f3;font-size:var(--t-campo)}
#dlgCampo:focus{outline:none;border-color:var(--ouro)}
.dlg-acoes{display:flex;justify-content:flex-end;gap:var(--e2);margin-top:var(--e4)}
@media(max-width:640px){.dlg-acoes{flex-direction:column-reverse;align-items:stretch}.dlg-acoes button{width:100%}}

.modal-fundo{position:fixed;inset:0;background:rgba(38,48,28,.42);display:flex;align-items:flex-start;
  justify-content:center;padding:var(--e6) var(--e4);z-index:50;overflow-y:auto}
.modal-cartao{background:var(--cartao);border-radius:16px;box-shadow:var(--sombra);width:min(880px,96vw);padding:var(--e5)}
.modal-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-cab h3{color:var(--oliva);font-size:var(--t-alto)}

/* ---- formulários ---- */
.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo>span{font-size:var(--t-micro);font-weight:600;color:var(--tinta-2)}
.campo input,.campo textarea,.campo select{padding:var(--e3) var(--e3);border:1.5px solid #ddd6c4;border-radius:9px;
  background:#fbf9f3;font-size:var(--t-base);font-family:inherit;width:100%}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--ouro)}
.campo-largo{grid-column:1/-1}
.form-acoes{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:6px}
.form-receita{display:flex;flex-direction:column;gap:14px}
.linha-olho{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;align-items:end}
.linha-olho h5{grid-column:1/-1;font-size:var(--t-mini);color:var(--oliva);text-transform:uppercase;letter-spacing:.05em}
.ficha-tec summary{cursor:pointer;font-size:var(--t-mini);font-weight:600;color:var(--oliva-2);padding:var(--e2) 0}
.ficha-tec[open]{border:1px dashed #ddd6c4;border-radius:10px;padding:var(--e3)}

/* ---- ficha do cliente ---- */
.ficha-dados{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--t-mini);color:var(--tinta-2);margin-bottom:10px}
.ficha-notas{background:var(--fundo-2);border-radius:8px;padding:var(--e3) var(--e3);font-size:var(--t-mini);margin-bottom:12px}
.ficha-cab-rec{display:flex;justify-content:space-between;align-items:center;margin:8px 0 10px;
  border-top:1px solid var(--fundo-2);padding-top:14px}
.ficha-cab-rec h4{color:var(--oliva);font-size:var(--t-med)}
.rec-lista{display:flex;flex-direction:column;gap:8px}
.rec-item{border:1px solid var(--fundo-2);border-radius:10px;padding:var(--e3) var(--e3)}
.rec-cab{font-size:var(--t-mini);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rec-acoes{margin-left:auto;display:flex;gap:6px}
.rec-val{font-size:var(--t-micro);color:var(--ouro);font-weight:600}
.rec-olhos{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-mini);color:var(--tinta-2);margin-top:5px}

/* ---- Fase 2a: vendas ---- */
.pill{display:inline-block;padding:var(--e1) var(--e3);border-radius:100px;font-size:var(--t-micro);font-weight:600;border:1.5px solid #ddd6c4;color:var(--tinta-2)}
.pill-orcamento{border-color:var(--ouro);color:#8a6425}
.pill-aprovada{border-color:#7d97b8;color:#33567e}
.pill-em_producao{border-color:#b58a4a;color:#8a6425;background:#fbf3e3}
.pill-pronta{border-color:var(--oliva-2);color:var(--oliva)}
.pill-entregue{border-color:var(--ok);color:var(--ok);background:#eef6ef}
.pill-cancelada{border-color:#c4b8b4;color:#8a7f7b}
.linha-item{display:grid;grid-template-columns:1fr 84px 110px 130px 38px;gap:8px;margin-bottom:8px;align-items:center}
.linha-item input{padding:var(--e2) var(--e3);border:1.5px solid #ddd6c4;border-radius:9px;background:#fbf9f3;font-size:var(--t-campo);width:100%}
.linha-item input:focus{outline:none;border-color:var(--ouro)}
.venda-total{text-align:right;font-size:var(--t-med);margin:8px 0;color:var(--oliva)}
.venda-total b{color:var(--oliva)}
.tab-itens{width:100%;border-collapse:collapse;font-size:var(--t-mini);margin-top:8px}
.tab-itens th{font-size:var(--t-micro)}
.link-pub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--fundo-2);padding-top:12px;font-size:var(--t-mini)}
.link-pub input{flex:1;min-width:200px;padding:var(--e2) var(--e3);border:1.5px solid #ddd6c4;border-radius:8px;background:#fbf9f3;font-size:var(--t-campo)}
.lista-anexos{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:var(--t-mini)}
.lista-anexos a{color:var(--oliva);font-weight:600}
.lista-anexos .vazio{color:var(--tinta-2)}

/* ---- Fase 2c: financeiro ---- */
.fin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.kpi{border:1px solid var(--fundo-2);border-top:3px solid var(--ouro);border-radius:12px;padding:var(--e3) var(--e4);background:#fdfbf5}
.kpi span{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2)}
.kpi b{display:block;font-size:var(--t-alto);color:var(--oliva);margin-top:3px}
.kpi small{color:var(--erro);font-size:var(--t-micro)}
.kpi-receber{border-top-color:var(--ok)}
.kpi-pagar{border-top-color:var(--erro)}
.kpi-saldo{border-top-color:var(--oliva-2)}
.fin-asaas{font-size:var(--t-micro);color:var(--tinta-2);margin-bottom:12px;font-style:italic}
.fin-status{font-size:var(--t-micro);font-weight:600;padding:var(--e1) var(--e2);border-radius:100px;border:1.5px solid #ddd6c4;color:var(--tinta-2)}
.fin-aberto{border-color:var(--ouro);color:#8a6425}
.fin-pago{border-color:var(--ok);color:var(--ok)}
.fin-cancelado{border-color:#c4b8b4;color:#8a7f7b}

/* ---- Fase 2.5: ficha 360 + CEP ---- */
.ficha-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.lista-vinc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-mini)}
.lista-vinc li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lista-vinc a{color:var(--oliva);font-weight:600}
.lista-vinc .vazio{color:var(--tinta-2)}
.lista-vinc .rec-val{color:var(--tinta-2)}
.cep-msg{font-size:var(--t-micro);color:var(--oliva-2);margin-top:3px;display:block;min-height:1em}
.acoes-venda{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;padding-top:12px;border-top:1px solid var(--fundo-2)}
.saldo-zero{color:#b0a89a}

/* ---- typeahead ---- */
.ta{position:relative}
.ta-input{width:100%;padding:var(--e3) var(--e3);border:1.5px solid #ddd6c4;border-radius:9px;background:#fbf9f3;font-size:var(--t-campo);font-family:inherit}
.ta-input:focus{outline:none;border-color:var(--ouro)}
.ta-drop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 3px);background:#fff;border:1px solid #ddd6c4;
  border-radius:9px;box-shadow:var(--sombra);max-height:240px;overflow-y:auto}
.ta-item{padding:var(--e2) var(--e3);font-size:var(--t-mini);cursor:pointer}
.ta-item:hover{background:var(--fundo-2)}
.ta-vazio{padding:var(--e2) var(--e3);font-size:var(--t-mini);color:var(--tinta-2)}
.ta-mais{padding:var(--e2) var(--e3);font-size:var(--t-micro);color:var(--tinta-2);background:var(--fundo);border-top:1px solid #eee}
.estoque-hint{font-size:var(--t-micro);margin-top:3px}
.estoque-hint .ok{color:var(--ok)}
.estoque-hint .falta{color:var(--erro)}
.estoque-hint .outra{color:var(--oliva-2)}
@media(max-width:560px){.ficha-cols{grid-template-columns:1fr}}

/* ---- página pública de acompanhamento ---- */
.ac-ola{font-size:var(--t-base);margin-bottom:16px}
.ac-passos{display:flex;flex-direction:column;gap:2px;margin:10px 0 16px;position:relative}
.passo{display:flex;align-items:center;gap:12px;padding:var(--e2) 0;color:var(--tinta-2);font-size:var(--t-base)}
.passo.feito{color:var(--oliva);font-weight:600}
.passo .bolinha{width:26px;height:26px;border-radius:50%;border:2px solid #ddd6c4;display:flex;
  align-items:center;justify-content:center;font-size:var(--t-mini);color:#fff;flex-shrink:0}
.passo.feito .bolinha{background:var(--ok);border-color:var(--ok)}
.ac-timeline{list-style:none;margin:14px 0 0;padding:var(--e4) 0 0;border-top:1px solid var(--fundo-2);font-size:var(--t-mini);color:var(--tinta-2);display:flex;flex-direction:column;gap:6px}
.ac-timeline b{color:var(--oliva)}

@media(max-width:560px){.form-grade{grid-template-columns:1fr}.linha-item{grid-template-columns:1fr 56px 78px 1fr 30px}}

/* ---- config da ótica: logo ---- */
.logo-box{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.logo-previa{width:150px;height:76px;border:1.5px dashed #ddd6c4;border-radius:10px;background:#fbf9f3;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-previa img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- parcelas: plano de cobrança + ficha do cliente ---- */
.linha-parc{display:grid;grid-template-columns:88px 1fr 1fr 38px;gap:8px;margin-bottom:8px;align-items:center}
.linha-parc input{padding:var(--e2) var(--e3);border:1.5px solid #ddd6c4;border-radius:9px;background:#fbf9f3;font-size:var(--t-campo);width:100%}
.linha-parc input:focus{outline:none;border-color:var(--ouro)}
.parc-rot{font-size:var(--t-micro);font-weight:700;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.falta{color:var(--erro);font-weight:700}
/* auto-fit: 3 colunas quando cabem, 2 no tablet, 1 no celular — sem saltar
   de 3 direto para 1 e desperdiçar a largura do tablet */
.parc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:6px}
.parc-bloco{border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e3)}
.parc-bloco h5{font-size:var(--t-mini);color:var(--oliva);margin-bottom:8px}
.parc-li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-mini)}
.parc-li.parc-vencido b{color:var(--erro)}
.parc-li.parc-pago{opacity:.72}
tr.parc-vencido td{color:var(--erro)}
tr.parc-pago td{opacity:.7}

/* ---- pagamentos por compra: um card por venda, para os valores não se misturarem ---- */
.compra-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:var(--e4)}
.compra-card{border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e3)}
.compra-card.compra-vencida{border-color:var(--erro)}
.compra-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.compra-vals{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--t-mini);color:var(--tinta-2)}
.compra-vals b{display:block;color:var(--tinta);font-size:var(--t-base)}
.compra-vals .cv-venc b{color:var(--erro)}
.compra-barra{height:6px;border-radius:99px;background:var(--fundo-2);overflow:hidden;margin:8px 0 6px}
.compra-barra i{display:block;height:100%;background:var(--oliva-2)}
.compra-cont{font-size:var(--t-micro);color:var(--tinta-2)}
@media(max-width:640px){.compra-cards{grid-template-columns:1fr}}

/* ---- cliente pessoa jurídica: bloco que aparece ao digitar CNPJ ---- */
.pj-bloco{grid-column:1/-1;border-left:3px solid var(--ouro);padding-left:12px;margin:2px 0}
.pj-bloco.oculta{display:none}

/* ---- multi-loja ---- */
.loja-atual{display:flex;align-items:center;gap:6px;font-size:var(--t-mini);color:var(--tinta-2)}
.loja-atual select{padding:var(--e2) var(--e3);border-radius:100px;border:1.5px solid var(--ouro);background:#fbf9f3;font-size:var(--t-campo);font-weight:600;color:var(--oliva)}
.linha-item .it-origem{padding:var(--e2) var(--e2);border:1.5px solid #ddd6c4;border-radius:9px;background:#fbf9f3;font-size:var(--t-campo);width:100%}
tr.linha-total td{border-top:2px solid var(--oliva);font-weight:700;background:var(--fundo-2)}

/* ---- auditoria & segurança ---- */
/* cabeçalho da PÁGINA: título + ação na mesma linha, fora dos cards */
/* ---- por loja 360º: um cartão por unidade ---- */
.loja-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:var(--e4)}
.loja-card{background:var(--cartao);border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e4)}
.loja-card.loja-legado{border-style:dashed;border-color:var(--ouro-2)}
.loja-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:var(--e3)}
.loja-cab h4{font-size:var(--t-med);color:var(--oliva)}
.loja-destaque{display:flex;flex-direction:column;margin-bottom:var(--e3);padding-bottom:var(--e3);border-bottom:1px solid var(--fundo-2)}
.loja-destaque b{font-size:var(--t-alto);color:var(--tinta)}
.loja-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loja-grade > div{display:flex;flex-direction:column;gap:1px;font-size:var(--t-mini)}
.loja-grade b{font-size:var(--t-med);color:var(--tinta)}
.loja-vend{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--fundo-2);font-size:var(--t-mini)}
.loja-vend-li{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:3px}
.var-comp{font-size:var(--t-micro);font-weight:700}
.var-comp.var-sobe{color:var(--ok)}
.var-comp.var-desce{color:var(--erro)}
.loja-total{background:var(--fundo);border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e4)}
.loja-total h4{font-size:var(--t-med);color:var(--oliva);margin-bottom:var(--e3);display:flex;gap:8px;align-items:center}
@media(max-width:640px){.loja-cards{grid-template-columns:1fr}}

/* ---- quadro (kanban) de leads ---- */
/* 4 colunas em 375px dariam ~85px por cartão: no celular elas EMPILHAM, e o
   select do cartão move o lead (arrastar é HTML5 DnD, que não existe no toque) */
.lead-colunas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.lead-coluna{background:var(--fundo);border:1px solid var(--fundo-2);border-radius:12px;padding:var(--e3)}
.lead-col-cab{font-size:var(--t-mini);color:var(--oliva);margin-bottom:8px;display:flex;gap:6px;align-items:center}
.lead-solta{display:flex;flex-direction:column;gap:8px;min-height:60px;border-radius:9px;transition:background .15s}
.lead-solta.sobre{background:rgba(184,138,68,.14);outline:2px dashed var(--ouro-2)}
.lead-card{background:var(--cartao);border:1px solid var(--fundo-2);border-radius:10px;padding:var(--e3);cursor:grab;
  display:flex;flex-direction:column;gap:6px;font-size:var(--t-mini)}
.lead-card.arrastando{opacity:.45}
.lead-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lead-contato{display:flex;flex-direction:column;gap:2px}
.lead-contato a{color:var(--oliva);font-weight:600;word-break:break-all}
.lead-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.lead-acoes .status{flex:1;min-width:104px}
@media(max-width:900px){.lead-colunas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lead-colunas{grid-template-columns:1fr}}

/* sub-abas de Configurações: pílulas, para não competir com a barra principal
   (duas fileiras de abas iguais confundem "onde eu estou") */
.sub-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--e4)}
.sub-aba{border:1px solid var(--fundo-2);background:var(--cartao);border-radius:99px;
  padding:var(--e2) var(--e4);font-size:var(--t-mini);font-weight:600;color:var(--tinta-2);cursor:pointer}
.sub-aba:hover{border-color:var(--ouro-2)}
.sub-aba.ativa{background:var(--oliva);border-color:var(--oliva);color:#fff}

.pagina-cab{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.pagina-cab h2{font-size:var(--t-alto);color:var(--oliva)}
.aud-cartao{background:var(--cartao);border-radius:var(--raio);box-shadow:var(--sombra);padding:var(--e5)}
.aud-cartao + .aud-cartao{margin-top:24px}
.aud-cab{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.aud-cab h3{font-size:var(--t-med);color:var(--oliva)}
/* o respiro que eu tinha ajustado na mão (13px 10px) agora vem do td base (--e3) */
.aud-cartao td.quando{white-space:nowrap;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.aud-cartao td.detalhe{color:var(--tinta-2)}
.contador{background:var(--fundo-2);color:var(--oliva-2);font-size:var(--t-micro);font-weight:700;
  padding:var(--e1) var(--e2);border-radius:100px}

/* badge: falha de segurança grita, ação do dia a dia é neutra */
.selo{display:inline-block;font-size:var(--t-micro);font-weight:600;padding:var(--e1) var(--e2);border-radius:6px;
  white-space:nowrap;letter-spacing:.02em}
.selo-falha{background:#fbe9e5;color:var(--erro)}
.selo-neutro{background:var(--fundo-2);color:var(--oliva-2)}

/* ---- painel do operador (dono do SaaS) ---- */
.op-login{margin:8vh auto}
.aviso-escopo{background:#eef3ea;border-left:3px solid var(--oliva-2);color:var(--tinta-2);
  font-size:var(--t-mini);padding:var(--e3) var(--e4);border-radius:8px;margin-bottom:16px}
.selo-ok{background:#e6f0e8;color:var(--ok)}
.selo-aviso{background:#f6efe0;color:#8a6425}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
tr.linha-inativa{opacity:.55}
.divisor{border:0;border-top:1px solid var(--fundo-2);margin:18px 0}
.caixa-senha{display:flex;gap:24px;background:var(--fundo-2);border-radius:10px;padding:var(--e4);margin:12px 0}
.senha-temp{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:var(--t-med);color:var(--oliva);
  user-select:all;letter-spacing:.04em}
.aviso-senha{background:#fbe9e5;color:var(--erro);font-size:var(--t-mini);padding:var(--e3) var(--e4);border-radius:8px;margin-bottom:14px}

/* ============================================================
   MOBILE — medido num iPhone (375px), não chutado.
   O que estava quebrado:
     · 9/9 campos com fonte 14.72px  → iOS dava zoom a cada toque
     · .botao-mini 26px, .botao-primario 33px → mínimo tocável é 44px
     · "Descrição" da venda com 49.5px de largura (~6 caracteres)
   ============================================================ */
@media(max-width:640px){
  /* 1. Zoom do iPhone: campo com fonte <16px faz o Safari dar zoom sozinho.
        É por isso que --t-campo existe separado do --t-base. */
  :root{--t-campo:16px}

  /* 2. Alvo de toque: 44px é o mínimo da Apple. 26px é menor que a ponta do dedo. */
  .botao-primario,.botao-suave,.botao-mini,.aba,.sub-aba,
  form button[type=submit],input,select,textarea{min-height:44px}

  /* 0. O topo VAZAVA a tela (504px num viewport de 375): "Loja: [select]" +
        nome do usuário + Sair não cabem. Some o decorativo (chip da ótica,
        nome de quem está logado — a pessoa sabe quem ela é), fica o funcional
        (seletor de loja, que decide onde nasce a venda, e o Sair). */
  .topo{padding:var(--e2) var(--e3);gap:8px}
  .chip-empresa{display:none}
  .topo-dir #nomeUsuario{display:none}
  .topo-dir{gap:8px;min-width:0;flex:1;justify-content:flex-end}
  .loja-atual{min-width:0}
  .loja-atual > span{display:none} /* o select mostra o nome da loja; o rótulo "Loja:" é redundante */
  .loja-atual select{max-width:44vw;overflow:hidden;text-overflow:ellipsis}

  /* Modal ocupa a tela: 24px de moldura em 375px é espaço jogado fora */
  .modal-fundo{padding:var(--e3) var(--e2)}
  .modal-cartao{width:100%;border-radius:12px}

  /* Botão de formulário com a largura toda: alvo grande onde o dedo decide */
  .form-acoes{flex-direction:column;align-items:stretch;gap:var(--e2)}
  .form-acoes button{width:100%}
  .botao-mini{padding:var(--e2) var(--e3)}
  /* checkbox/radio não devem ganhar 44px de altura — só o alvo ao redor */
  input[type=checkbox],input[type=radio]{min-height:0}

  /* 3. Respiro de tela pequena: card não precisa de 24px de borda em 375px */
  .painel,.aud-cartao{padding:var(--e4)}
  .conteudo{margin:var(--e4) auto;gap:var(--e4)}
  .modal-cartao{padding:var(--e4)}

  /* 4. Cabeçalho empilha em vez de espremer título contra botão */
  .painel-cab,.pagina-cab{flex-direction:column;align-items:flex-start;gap:var(--e3)}
  .cab-acoes{width:100%}
  .campo-busca{min-width:0;flex:1}
}

/* A barra de abas tem ~1070px de conteúdo: TABLET também rola, não só o
   celular. Rola (overflow-x:auto), o app.js traz a aba ativa para a vista —
   sem isso você recarrega em "Configurações" e a barra mostra "Leads" — e a
   sombra à direita avisa que há mais. */
@media(max-width:1140px){
  .abas{-webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,var(--fundo) 30%,transparent),
               linear-gradient(90deg,transparent,var(--fundo) 70%) right,
               radial-gradient(farthest-side at 0 50%,rgba(38,48,28,.14),transparent),
               radial-gradient(farthest-side at 100% 50%,rgba(38,48,28,.14),transparent) right;
    background-repeat:no-repeat;background-size:32px 100%,32px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
}

/* Linha de item da venda: em 375px a "Descrição" caía para 49.5px — cabiam
   6 caracteres. Agora ela ocupa a linha inteira e o resto vem embaixo. */
@media(max-width:560px){
  .linha-item{grid-template-columns:68px 1fr 1fr 44px}
  .linha-item > .it-prod{grid-column:1/-1}
}

/* ---- financeiro: ações em lote ---- */
.fin-lote{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  background:var(--fundo-2);border-radius:10px;padding:var(--e3) var(--e4);margin-bottom:var(--e3)}
.fin-lote b{color:var(--oliva);font-size:var(--t-mini)}
.fin-sel{width:18px;height:18px;accent-color:var(--oliva);cursor:pointer}