/* =====================================================================
   Águia Automóveis — telas
   ===================================================================== */

/* ---------- shell ----------
   Sem grid aqui, de propósito: o menu é `position: fixed` e o conteúdo
   ganha uma margem do mesmo tamanho. Grid + sticky + overlay brigavam
   entre si e empurravam o conteúdo para fora da viewport. Assim o menu
   nunca participa do fluxo e não desloca nada. */
.app{min-height:100vh}

.side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:30}

/* o conteúdo desvia do menu por margem, não por coluna */
.col-main{margin-left:var(--side-w);min-width:0;
  display:flex;flex-direction:column;min-height:100vh;
  transition:margin-left .2s ease}
.app.no-side .col-main{margin-left:0}

/* ---------- barra recolhida (desktop) ----------
   Vira uma faixa só de ícones e devolve ~150px ao conteúdo. A
   preferência fica salva; o rótulo aparece ao passar o mouse. */
.app.menu-min .side{width:var(--side-min)}
.app.menu-min .col-main{margin-left:var(--side-min)}
.app.menu-min .brand{padding:14px 8px;display:flex;justify-content:center}
.app.menu-min .brand img{width:40px;object-fit:contain}
.app.menu-min .nlabel{opacity:0;height:9px;padding:0;overflow:hidden}
.app.menu-min .nav-i{justify-content:center;padding:9px 0;position:relative}
.app.menu-min .nav-i .ic{width:auto;font-size:15px}
/* esconde o texto sem perder o nó (o leitor de tela continua lendo) */
.app.menu-min .nav-i{font-size:0}
.app.menu-min .nav-i .ic{font-size:15px}
.app.menu-min .nav-i .pill-n{position:absolute;top:3px;right:8px;
  margin:0;font-size:9px;padding:0 4px}
.app.menu-min .side-f{justify-content:center;padding:11px 6px}
.app.menu-min .side-f .who > div,
.app.menu-min .side-f #btn-sair{display:none}

/* rótulo flutuante ao passar o mouse */
.app.menu-min .nav-i::after{
  content:attr(data-titulo);position:absolute;left:calc(100% + 9px);
  top:50%;transform:translateY(-50%);
  background:var(--surface-3);color:var(--ink);font-size:12.5px;
  padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;
  border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .13s;z-index:40}
.app.menu-min .nav-i:hover::after{opacity:1}

/* overlay do menu no celular — fora do fluxo, nunca desloca nada */
.side-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:29;display:none}
.brand{padding:16px 14px 14px;border-bottom:1px solid var(--line)}
.brand svg,.brand img{width:180px;max-height:72px;object-fit:contain}

.side nav{padding:10px 8px;display:flex;flex-direction:column;gap:1px;
  overflow-y:auto;flex:1}
.nlabel{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 8px 5px}
.nav-i{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--ink-2);border:0;background:0;
  width:100%;text-align:left;font-size:13.5px;
  transition:background var(--t),color var(--t)}
.nav-i:hover{background:var(--surface-2);color:var(--ink)}
.nav-i[aria-current="page"]{background:var(--gold-wash);color:var(--gold);font-weight:600}
.nav-i .ic{width:15px;text-align:center;opacity:.85;font-size:13px;flex:none}
.nav-i .pill-n{margin-left:auto}

/* ---------- submenu recolhível ----------
   O pai abre e fecha; a linha-guia à esquerda amarra os filhos a ele.
   Usa grid-template-rows 0fr→1fr porque height:auto não anima. */
.nav-pai{display:flex;align-items:center;gap:9px;padding:8px 10px;width:100%;
  border:0;background:0;border-radius:var(--r-sm);color:var(--ink-2);
  text-align:left;font-size:13.5px;
  transition:background var(--t),color var(--t)}
.nav-pai:hover{background:var(--surface-2);color:var(--ink)}
.nav-pai.dentro{color:var(--ink)}
.nav-pai .ic{width:15px;text-align:center;opacity:.85;flex:none}
.nav-pai .cv{margin-left:auto;opacity:.6;display:flex;
  transition:transform .18s ease}
.nav-pai[aria-expanded="true"] .cv{transform:rotate(90deg)}

.subnav{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.subnav.on{grid-template-rows:1fr}
.subnav > div{overflow:hidden;display:flex;flex-direction:column;gap:1px}
.subnav .nav-i{font-size:12.5px;padding:6px 10px 6px 20px;margin-left:16px;
  border-left:1px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0}
.subnav .nav-i[aria-current="page"]{border-left-color:var(--gold)}

/* barra recolhida: o pai vira só ícone e o submenu some — os filhos
   ficam acessíveis clicando no pai, que reabre a barra */
.app.menu-min .nav-pai{justify-content:center;padding:9px 0;font-size:0;position:relative}
.app.menu-min .nav-pai .ic{font-size:15px}
.app.menu-min .nav-pai .cv{display:none}
.app.menu-min .subnav{display:none}
.app.menu-min .nav-pai::after{
  content:attr(data-titulo);position:absolute;left:calc(100% + 9px);
  top:50%;transform:translateY(-50%);
  background:var(--surface-3);color:var(--ink);font-size:12.5px;
  padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;
  border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .13s;z-index:40}
.app.menu-min .nav-pai:hover::after{opacity:1}

.side-f{padding:11px 12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.side-f .who{flex:1;min-width:0}
.side-f .who b,.side-f .who span{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}

/* A faixa atravessa a tela inteira (fundo e borda), mas o conteúdo dela
   respeita o mesmo limite do main — senão o título ficaria à esquerda e
   os botões colados na borda direita, longe do que comandam.
   O padding lateral automático faz o alinhamento sem media query:
   sobrou espaço, ele cresce; não sobrou, fica nos 26px. */
.top{display:flex;align-items:center;gap:14px;
  padding:13px max(26px, (100% - 1600px) / 2 + 26px);
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;flex-wrap:wrap}
.crumb{font-size:11.5px;color:var(--ink-3);margin-bottom:1px}

/* O limite de largura existe para a leitura não sofrer: numa tabela
   esticada a 2000px o olho percorre meia tela entre a descrição e o
   valor. Mas 1340px sobrava faixa vazia em monitor grande — 1600px
   aproveita o espaço sem esticar demais, e `margin auto` centraliza o
   que sobra em vez de empurrar tudo para a esquerda. */
main{padding:22px 26px 60px;max-width:1600px;width:100%;margin:0 auto;
  flex:1;min-width:0}
.page{display:none}
.page.on{display:block;animation:pagein .22s ease}
@keyframes pagein{from{opacity:0;transform:translateY(5px)}}

/* minmax(0,…) impede que uma tabela larga estoure a coluna e empurre
   o resto do painel para fora da tela */
.grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:16px;align-items:start}
.grid2-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;align-items:start}
@media(max-width:1080px){.grid2,.grid2-even{grid-template-columns:minmax(0,1fr)}}
.stack{min-width:0}
.card{min-width:0}

/* ---------- dashboard: metas ---------- */
.meta-row{padding:13px 16px;border-bottom:1px solid var(--line)}
.meta-row:last-child{border-bottom:0}
.meta-top{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.bname{font-weight:600;font-size:13.5px}
.meta-v{margin-left:auto;font-family:var(--f-mono);font-size:12.5px;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.meta-v b{color:var(--ink);font-weight:600}
.meta-f{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11.5px;color:var(--ink-3);gap:10px}

/* ---------- dashboard: evolução do caixa ----------
   SVG em vez de canvas: escala sozinho com o card, sai na impressão e o
   leitor de tela lê o aria-label. */
.linha-wrap{width:100%;overflow:hidden}
.linha{width:100%;height:auto;display:block;overflow:visible}
.linha .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.linha .gl.zero{stroke:var(--bad);stroke-dasharray:4 3;opacity:.7}
.linha .ln{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.linha .ln.real{stroke:var(--ok)}
.linha .ln.proj{stroke:var(--ink-3);stroke-dasharray:5 4}
.linha .pt{fill:var(--ok);stroke:var(--surface);stroke-width:2.5}
.linha .ax{fill:var(--ink-3);font-size:11px;font-family:var(--f-mono)}
/* valores da grade: presentes para dar escala, discretos para não
   competir com a curva */
.linha .ax.vg{font-size:9.5px;opacity:.65}

.linha-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.linha-vals .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.linha-vals .v{font-family:var(--f-mono);font-size:15px;font-weight:600;
  margin-top:3px;font-variant-numeric:tabular-nums}
.linha-vals .sub{font-size:10.5px;color:var(--ink-3);font-family:var(--f-body);
  font-weight:400}

/* ---------- dashboard: fluxo por semana ---------- */
.fluxo{display:flex;align-items:flex-end;gap:10px;height:190px;padding:0 2px}
.fx{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.fx-col{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.fx-col i{width:44%;border-radius:3px 3px 0 0;display:block;min-height:2px}
.fx-e{background:var(--ok);opacity:.85}
.fx-s{background:var(--bad);opacity:.8}
.fx-lab{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.fx-sal{font-family:var(--f-mono);font-size:11px;font-variant-numeric:tabular-nums;
  font-weight:600}
/* semana negativa: a cor sozinha não basta, o rótulo ganha peso */
.fx-alerta .fx-lab{color:var(--bad);font-weight:600}
:root:not([data-theme="dark"]) .fx-sal.up{color:#1E7A4F}
:root:not([data-theme="dark"]) .fx-sal.dn{color:#B3382D}

.leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;
  color:var(--ink-2)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:9px;height:9px;border-radius:3px;flex:none}

/* ---------- dashboard: separador de seção ---------- */
.secao{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.secao h2{font-size:14px;white-space:nowrap}
.secao .sub{font-size:11.5px;color:var(--ink-3)}
.secao-l{flex:1;height:1px;background:var(--line)}

/* ---------- dashboard: ciclo da comissão ---------- */
.funil{display:flex;flex-direction:column;gap:13px}
.fn-t{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.fn-t b{font-size:12.5px}
.fn-t .sub{font-size:11px;color:var(--ink-3)}
.fn-t .mono{font-size:12.5px;font-variant-numeric:tabular-nums}
.funil-gap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
@media(max-width:620px){.funil-gap{grid-template-columns:1fr}}
.funil-gap .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.funil-gap .v{font-family:var(--f-mono);font-size:17px;font-weight:600;
  margin-top:3px;font-variant-numeric:tabular-nums}
.funil-gap .sub{font-size:10.5px;color:var(--ink-3)}

/* barra de atraso dentro da tabela */
.minibar{width:52px;height:5px;background:var(--surface-2);border-radius:3px;
  overflow:hidden;display:inline-block;flex:none}
.minibar i{display:block;height:100%;border-radius:3px}
/* linha de despesa fora do padrão */
.fora{background:var(--warn-wash)}
.fora:hover{background:var(--warn-wash)}

/* ---------- financeiro: cards de conta ---------- */
.contas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.conta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;position:relative;overflow:hidden}
.conta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cc,var(--gold))}
.conta.inativa{opacity:.6}
.conta .cn{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.conta .cn b{font-size:12.5px;font-weight:600}
.conta .cs{font-family:var(--f-mono);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.conta .cd{font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* ---------- autocompletar (instituição do BACEN) ----------
   Campo com lista em vez de <select> com 470 opções: rolar até achar o
   banco seria pior que digitar três dígitos. */
.ac{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:10;
  max-height:260px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);padding:4px}
.ac-i{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border:0;background:0;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:12.5px;line-height:1.35}
.ac-i:hover,.ac-i.on{background:var(--gold-wash);color:var(--ink)}
.ac-i b{color:var(--ink-3);font-size:11.5px;flex:none;min-width:30px}
.ac-i.on b,.ac-i:hover b{color:var(--gold)}
/* espaço reservado para quem não tem logo: mantém os nomes alinhados */
.ac-vazio-logo{width:22px;height:22px;flex:none;border-radius:5px;
  background:var(--surface-3);opacity:.5}
.ac-i .blogo{flex:none}
.ac-vazio{padding:12px 10px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* ---------- financeiro: extrato ---------- */
.ext-neg{color:var(--bad)}
.ext-tr{background:var(--surface-2)}
/* etiqueta discreta na própria linha: transferência, lançamento futuro */
.orig{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;white-space:nowrap;margin-left:6px;
  border:1px solid var(--line);color:var(--ink-3)}
/* botão de conciliar: alvo grande o bastante para o dedo, sem moldura */
.conc{background:0;border:0;padding:4px;border-radius:var(--r-sm);
  color:var(--ink-3);display:inline-flex;transition:color var(--t)}
.conc:hover{color:var(--ink);background:var(--surface-2)}
.conc.on{color:var(--ok)}

/* ---------- financeiro: árvore de categorias ---------- */
.cat-pai{display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-weight:600;font-size:13px}
.cat-fil{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 30px;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.cat-pai:hover,.cat-fil:hover{background:var(--surface-2)}
.cat-pai.inativa,.cat-fil.inativa{opacity:.55}
/* inline-block porque também é usado como <span> solto dentro de <td>,
   fora de flex — sem isso a largura não vale e o ponto some */
.dot{width:9px;height:9px;border-radius:3px;flex:none;
  display:inline-block;vertical-align:middle;margin-right:6px}

/* ---------- indicador do ILA no topo ----------
   Discreto quando há o índice; alerta quando falta, porque aí nenhum
   contrato do mês pode ser calculado. */
.ila-chip{display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);font-size:12px;
  text-decoration:none;white-space:nowrap;transition:border-color var(--t)}
.ila-chip:hover{border-color:var(--gold-2);color:var(--gold);text-decoration:none}
.ila-chip b{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.ila-chip .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
.ila-chip.falta{border-color:var(--warn);color:var(--warn);background:var(--warn-wash)}
.ila-chip.falta:hover{border-color:var(--warn);color:var(--warn)}
@media(max-width:860px){.ila-chip{display:none}}

/* ---------- cálculo da comissão (formulário de contrato) ----------
   Espelha o extrato que o banco manda: bruto, desconto, líquido. Ver a
   conta em vez de só o resultado é o que dá confiança no número. */
.calc-box{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:13px}
.calc-l{display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;padding:2px 0;color:var(--ink-2)}
.calc-l .mono{font-variant-numeric:tabular-nums}
.calc-l.desc{color:var(--ink-3);font-size:11.5px}
.calc-l.sub-tot{color:var(--ink);border-top:1px solid var(--line);
  margin-top:5px;padding-top:6px;font-weight:600}
.calc-l.total{color:var(--gold);border-top:1px solid var(--line-2);
  margin-top:8px;padding-top:9px;font-size:15px;font-weight:700}

/* ---------- ranking ---------- */
.rk{display:flex;align-items:center;gap:11px;padding:10px 16px;
  border-bottom:1px solid var(--line)}
.rk:last-child{border-bottom:0}
.rk-p{width:19px;height:19px;border-radius:5px;background:var(--surface-2);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:10.5px;
  font-weight:700;color:var(--ink-3);flex:none}
.rk:first-child .rk-p{background:var(--gold);color:var(--on-gold)}
.rk-n{font-size:13px;font-weight:500}
.rk-s{font-size:11px;color:var(--ink-3)}
.rk-v{margin-left:auto;text-align:right}
.rk-v b{font-family:var(--f-mono);font-size:13px;display:block;
  font-variant-numeric:tabular-nums}
.rk-v span{font-size:10.5px;color:var(--ink-3)}

/* ---------- fechamento ---------- */
.fh{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:16px}
.fh > div{background:var(--surface);padding:13px 15px}
.fh .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fh .v{font-family:var(--f-mono);font-size:18px;font-weight:600;margin-top:4px;
  font-variant-numeric:tabular-nums}
.fh .v.txt{font-family:var(--f-display);font-size:15px}

.sal{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 16px}
@media(max-width:620px){.sal{grid-template-columns:1fr}}
.sal-c{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px}
.sal-c .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sal-l{display:flex;justify-content:space-between;font-size:12.5px;margin-top:7px;
  font-family:var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;gap:12px}
.sal-l.tot{color:var(--ink);font-weight:700;font-size:15px;
  border-top:1px solid var(--line);margin-top:9px;padding-top:8px}

/* assistente de apuração */
.steps{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid var(--line)}
.step{display:flex;align-items:center;gap:8px;padding:11px 16px;
  color:var(--ink-3);font-size:12.5px;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.step[data-on="true"]{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
.step[data-done="true"]{color:var(--ok)}
.step .sn{width:20px;height:20px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none;
  font-family:var(--f-mono)}
.step[data-on="true"] .sn{background:var(--gold);color:var(--on-gold)}
.step[data-done="true"] .sn{background:var(--ok);color:#fff}

/* ---------- login ---------- */
body.login-page{overflow:hidden}
.lg-bg{position:fixed;inset:0;background-size:cover;background-position:left center;
  z-index:0;animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.045)}to{transform:scale(1.10) translate3d(-1.6%,-1.1%,0)}}
.lg-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(64% 74% at 50% 50%,rgba(11,12,15,.86) 0%,rgba(11,12,15,.60) 48%,transparent 80%),
    linear-gradient(90deg,transparent 0%,rgba(11,12,15,.30) 30%,rgba(11,12,15,.30) 70%,rgba(11,12,15,.62) 100%),
    linear-gradient(180deg,rgba(11,12,15,.46) 0%,transparent 32%,rgba(11,12,15,.68) 100%)}
.lg-sweep{position:fixed;top:-40%;left:-30%;width:42%;height:190%;z-index:2;
  pointer-events:none;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(245,178,27,.055),transparent);
  animation:sweep 13s ease-in-out infinite}
@keyframes sweep{0%,100%{opacity:0;transform:rotate(14deg) translateX(-14vw)}
                 50%{opacity:1;transform:rotate(14deg) translateX(112vw)}}
canvas.lg-dust{position:fixed;inset:0;z-index:3;pointer-events:none}

.lg-wrap{position:relative;z-index:5;height:100vh;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,404px);align-items:center;
  gap:clamp(34px,6vw,104px);padding:0 clamp(24px,4vw,56px);
  max-width:1280px;margin:0 auto}
.lg-pitch{max-width:520px;justify-self:end;
  animation:rise .85s cubic-bezier(.16,.9,.24,1) both}
/* sem o título, a logo carrega sozinha o lado esquerdo e pode crescer */
.lg-pitch .lg{width:min(440px,92%);margin-bottom:26px}
.lg-pitch p{color:#9AA3AE;font-size:clamp(14.5px,1.2vw,17px);max-width:46ch;line-height:1.65}
@keyframes rise{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:none}}

.lg-card{width:100%;max-width:404px;background:rgba(23,25,30,.72);
  border:1px solid rgba(245,178,27,.16);border-radius:var(--r-lg);
  padding:32px 30px 26px;position:relative;
  backdrop-filter:blur(19px) saturate(115%);-webkit-backdrop-filter:blur(19px) saturate(115%);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.03) inset;
  animation:rise .85s .1s cubic-bezier(.16,.9,.24,1) both}
.lg-card::before{content:"";position:absolute;inset:-1px;border-radius:var(--r-lg);
  padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(245,178,27,.45),transparent 42%,
             transparent 62%,rgba(245,178,27,.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.lg-emb{width:56px;height:56px;margin:0 auto 17px;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid rgba(245,178,27,.42);
  color:var(--gold);position:relative}
.lg-emb::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(245,178,27,.20);animation:halo 3.4s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.30;transform:scale(1)}50%{opacity:.85;transform:scale(1.075)}}
.lg-card h2{font-size:19px;text-align:center;margin-bottom:5px;color:#ECEEF1}
.lg-card .sub{text-align:center;color:#6A727D;font-size:12.5px;margin-bottom:23px}
.lg-card label{color:#9AA3AE}
.lg-f{position:relative;margin-bottom:15px}
.lg-f .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:#6A727D;pointer-events:none;transition:color var(--t);
  display:grid;place-items:center}
.lg-f .ic svg{width:15px;height:15px;display:block}
.lg-f .fld{background:rgba(11,12,15,.62);border-color:rgba(255,255,255,.10);
  color:#ECEEF1;padding:11px 13px 11px 37px;border-radius:9px;font-size:14px}
.lg-f .fld:focus{background:rgba(11,12,15,.82)}
.lg-f:focus-within .ic{color:var(--gold)}
.lg-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:0;border:0;color:#6A727D;padding:7px 9px;border-radius:6px;
  display:grid;place-items:center;transition:color var(--t)}
.lg-eye svg{width:16px;height:16px;display:block}
.lg-eye:hover{color:var(--gold)}
.lg-row{display:flex;align-items:center;justify-content:space-between;
  margin:3px 0 19px;gap:10px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9AA3AE;cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}
.lg-go{width:100%;border:0;border-radius:9px;padding:12px;font-weight:700;
  font-size:14px;color:var(--on-gold);position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--gold-2),var(--gold) 42%,var(--gold-soft) 100%);
  background-size:210% 100%;box-shadow:0 7px 20px rgba(245,178,27,.24);
  transition:background-position .5s,transform .1s,box-shadow .25s}
.lg-go:hover:not(:disabled){background-position:100% 0;box-shadow:0 9px 26px rgba(245,178,27,.36)}
.lg-go:active:not(:disabled){transform:translateY(1px)}
.lg-sep{display:flex;align-items:center;gap:11px;margin:19px 0 14px;
  color:#6A727D;font-size:10.5px;letter-spacing:.14em}
.lg-sep::before,.lg-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}
.lg-foot{text-align:center;font-size:11.5px;color:#6A727D;
  display:flex;align-items:center;justify-content:center;gap:6px}
.lg-err{background:rgba(224,87,75,.13);border:1px solid rgba(224,87,75,.42);
  color:#F0A79F;border-radius:9px;padding:10px 12px;font-size:12.5px;
  margin-bottom:15px;display:none;align-items:flex-start;gap:8px;line-height:1.45}
.lg-err.on{display:flex;animation:shake .34s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
                 75%{transform:translateX(5px)}}
.lg-ver{position:fixed;bottom:15px;left:0;right:0;text-align:center;z-index:5;
  font-size:10.5px;color:rgba(154,163,174,.42);letter-spacing:.05em}

@media(max-width:940px){
  body.login-page{overflow:auto}
  .lg-wrap{grid-template-columns:1fr;padding:40px 22px 70px;height:auto;
    min-height:100vh;align-content:center;gap:34px}
  .lg-pitch{max-width:none;text-align:center;justify-self:center}
  .lg-pitch .lg{margin:0 auto 22px}
  .lg-card{justify-self:center}
  .lg-veil{background:linear-gradient(180deg,rgba(11,12,15,.68) 0%,rgba(11,12,15,.90) 62%)}
}
@media (prefers-reduced-motion:reduce){.lg-bg{transform:scale(1.045)}}

/* ---------- responsivo do shell ----------
   Em tela estreita o menu sai de cena e vira gaveta: o conteúdo perde a
   margem e o menu desliza por cima quando aberto. */
@media(max-width:860px){
  /* anima `left` em vez de `transform`: o menu já é position:fixed com
     left:0, então basta mover essa mesma propriedade. Evita a disputa de
     especificidade que travava a gaveta fechada. */
  .side{left:calc(var(--side-w) * -1);transition:left .22s ease}
  .side.open{left:0;box-shadow:var(--shadow-lg)}
  .side-scrim.on{display:block}
  .col-main{margin-left:0}
  main{padding:16px 14px 50px}
  .top{padding:11px 14px}
}
/* o botão agora vale em qualquer largura: gaveta no celular,
   recolher/expandir no desktop */
.menu-btn{display:inline-flex}

/* ---------- dashboard da Operação ---------- */

/* Três colunas: a primeira mais larga porque leva os gráficos de
   linha, e curva espremida perde a forma — que é o que ela informa.

   Duas quebras, não uma: abaixo de 1500px vira 2 colunas (a de
   tendência ocupa a linha inteira, as outras dividem), e abaixo de
   1080px empilha. Ir de 3 direto para 1 desperdiçaria o tablet. */
.grid3{display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:16px;align-items:start}
@media(max-width:1500px){
  .grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* a coluna de tendência atravessa: o gráfico precisa da largura */
  .grid3 > :first-child{grid-column:1 / -1}
}
@media(max-width:1080px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .grid3 > :first-child{grid-column:auto}
}

/* Marca de ritmo na barra de meta.

   Sem ela, 60% da meta no dia 15 e 60% no dia 28 desenham idênticos —
   e são situações opostas. O traço mostra onde a meta deveria estar
   hoje; barra à esquerda dele é meta atrasada. */
.meta-row .bar{position:relative;overflow:visible}
.meta-row .bar .ritmo{position:absolute;top:-3px;bottom:-3px;width:2px;
  background:var(--ink-2);opacity:.85;border-radius:1px;pointer-events:none}
.meta-row .bar .ritmo::after{content:"";position:absolute;top:-4px;left:-2px;
  border:3px solid transparent;border-top-color:var(--ink-2)}
/* meta batida recua para o fundo: já não pede ação */
.meta-row.meta-ok{opacity:.62}

/* KPI com comparativo contra o mesmo dia do mês anterior */
.kpi .cmp{font-size:11.5px;margin-top:3px;display:flex;align-items:center;gap:4px}
.kpi .cmp.up{color:var(--ok)}
.kpi .cmp.dn{color:var(--bad)}
.kpi .cmp span{color:var(--ink-3)}

/* Ritmo: realizado sobre decorrido, duas barras finas */
.ritmo-duo{margin-top:7px}
.ritmo-duo .l{display:flex;justify-content:space-between;font-size:10.5px;
  color:var(--ink-3);margin-bottom:3px}
.ritmo-duo .bar{height:5px}

/* Valor em destaque no alerta: "R$ 47.300 sem nota fiscal" faz clicar,
   "3 fechamentos sem nota fiscal" não. */
.al .vlr{font-family:var(--f-mono);font-weight:700;font-size:14px;
  letter-spacing:-.01em}

/* Últimos contratos, versão compacta — 3 linhas em vez do cartão
   grande que ocupava o espaço nobre da tela. */
.ult{display:flex;flex-direction:column}
.ult .li{display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-bottom:1px solid var(--line);font-size:12.5px}
.ult .li:last-child{border-bottom:0}
.ult .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ult .vl{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:12px}
.ult .dt{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  flex:none}

/* ---------- seguros do contrato ----------
   Lista com marcação no lugar do select: um financiamento leva
   prestamista, auto e mão na roda ao mesmo tempo. */
.seg-lista{display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden}
.seg-item{display:flex;align-items:center;gap:9px;padding:9px 11px;
  margin:0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background var(--t)}
.seg-item:last-child{border-bottom:0}
.seg-item:hover{background:var(--surface-2)}
.seg-nome{color:var(--ink);font-weight:500;flex:none}
.seg-regra{color:var(--ink-3);font-size:11.5px;margin-left:auto;
  font-family:var(--f-mono)}

/* O prêmio da apólice, para o seguro pago sobre prêmio.

   Recuado e preso ao item de cima: com dois seguros dessa modalidade no
   mesmo contrato, o campo solto não diria de qual deles é. O fundo
   dourado marca que ali falta algo do usuário — os outros tipos não
   pedem nada. */
.seg-premio{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;padding:9px 11px 9px 36px;border-bottom:1px solid var(--line);
  background:var(--gold-wash);border-left:3px solid var(--gold)}
.seg-premio:last-child{border-bottom:0}
.seg-premio label{margin:0;font-size:12px;color:var(--ink-2);flex:none}
.seg-premio .fld{width:150px;flex:none}
.seg-premio-i{font-size:11.5px;color:var(--ink-2)}

/* A marca "não gera comissão" no cadastro do seguro.

   Estilo próprio porque `label` no formulário é caixa-alta e pequeno —
   certo para rótulo de campo, ilegível para uma frase de duas linhas. */
.semcom-box{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  margin-bottom:13px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);
  text-transform:none;letter-spacing:normal;font-size:13px;color:var(--ink)}
.semcom-box input{width:15px;height:15px;margin-top:1px;flex:none;
  accent-color:var(--gold);cursor:pointer}
.semcom-box b{font-weight:600}
.semcom-dica{display:block;margin-top:2px;font-size:11.5px;
  color:var(--ink-3);font-weight:400}

/* Taxa Plus — o bônus usado na taxa do cliente em vez de recebido */
.tp-box{border:1px solid var(--gold-2);border-radius:var(--r-sm);
  padding:11px 13px;background:var(--gold-wash);margin-top:13px;
  transition:background var(--t),border-color var(--t)}
.tp-box.off{border-color:var(--line);background:var(--surface-2)}

/* ---------- programa de pontos ---------- */
.pt-saldo{font-family:var(--f-mono);font-weight:700;font-size:15px;
  color:var(--gold);font-variant-numeric:tabular-nums}

/* extrato: data, descrição, pontos e saldo corrente */
.ext{display:flex;flex-direction:column}
.ext .li{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.ext .li:last-child{border-bottom:0}
.ext .dt{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  flex:none;width:44px}
.ext .ds{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ext .pt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:600;flex:none}
.ext .sd{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
  width:66px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

/* classificação: o número grande e a régua de faixas */
.pt-hero{text-align:center;padding:6px 0 4px}
.pt-num{font-family:var(--f-mono);font-size:34px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1}
.pt-faixa{margin-top:9px;font-size:19px;font-weight:700;color:var(--gold)}
.faixas{display:flex;gap:2px;margin:14px 0 6px}
.faixas i{flex:1;height:7px;background:var(--surface-2);border-radius:2px;
  transition:background var(--t)}
.faixas i.on{background:var(--gold)}
.faixa-l{display:flex;justify-content:space-between;font-size:10.5px;
  color:var(--ink-3)}

/* Formulário de regra embutido na aba de pontos — sem modal, porque
   modal por cima do cadastro do banco jogava o usuário de volta na
   lista a cada regra salva. */
.regra-nova{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;background:var(--surface-2);margin-top:12px}

/* ---------- central de ajuda (js/paginas/ajuda.js) ----------
   O leitor de manuais. Tipografia mais folgada que a das telas de
   operação: manual se lê corrido, tela de operação se olha.

   O índice tem largura FIXA e o leitor fica com todo o resto — a
   divisão proporcional deixava um vão morto à direita em monitor
   largo, com o texto espremido e os prints ilegíveis. */
.aj-grid{display:grid;grid-template-columns:290px minmax(0,1fr);
  gap:16px;align-items:start}
@media(max-width:1080px){.aj-grid{grid-template-columns:minmax(0,1fr)}}

.md-doc{max-width:980px;line-height:1.65;font-size:13.5px}
.md-doc .md-h1{font-size:19px;margin:4px 0 14px}
.md-doc .md-h2{font-size:15px;margin:22px 0 8px;color:var(--gold)}
.md-doc .md-h3{font-size:13.5px;margin:16px 0 6px}
.md-doc .md-p{margin:0 0 10px;color:var(--ink-2)}
.md-doc .md-p b,.md-doc li b{color:var(--ink)}
.md-doc .md-lista{margin:0 0 12px;padding-left:22px;color:var(--ink-2)}
.md-doc .md-lista li{margin-bottom:5px}
.md-doc img{border:1px solid var(--line);border-radius:var(--r);
  margin:6px 0 14px;box-shadow:var(--shadow);cursor:zoom-in;
  transition:filter var(--t)}
.md-doc img:hover{filter:brightness(1.06)}

/* lupa: o print em tamanho de leitura, por cima de tudo.
   Clique em qualquer lugar (ou Esc) fecha. */
.aj-zoom{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:24px;
  cursor:zoom-out;animation:fade .15s}
.aj-zoom img{max-width:96vw;max-height:94vh;border-radius:var(--r);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.aj-zoom .dica{position:fixed;bottom:14px;left:0;right:0;text-align:center;
  font-size:11.5px;color:var(--ink-3)}
.md-doc .md-pre{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;font-family:var(--f-mono);
  font-size:11.5px;line-height:1.6;overflow-x:auto;margin:0 0 12px;
  white-space:pre}
.md-doc code{background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;font-family:var(--f-mono);font-size:11.5px}
.md-doc .md-tabela{margin-bottom:12px}
.md-doc .md-tabela td{white-space:normal}

/* ---------------------------------------------------------------------
   Situação da entrega — as etapas entre a venda e o carro na mão
   (js/paginas/veiculos.js, ficha do veículo)
   --------------------------------------------------------------------- */
.tl-i{display:flex;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line)}
.tl-i:last-child{border-bottom:0}
.tl-m{flex:none;width:17px;text-align:center;font-weight:700;font-size:13px}
.tl-i.ok .tl-m{color:var(--ok)}
.tl-i.wa .tl-m{color:var(--warn)}
.tl-i.ba .tl-m{color:var(--bad)}
.tl-i.na{opacity:.45}
.tl-i.na .tl-m{color:var(--ink-3)}
.tl-i b{font-size:12.5px;display:block;font-weight:600}
.tl-i .sub{font-size:11px;color:var(--ink-3);line-height:1.45}
.tl-txt{min-width:0}
.tl-i .ctl{margin-left:auto;flex:none}