/* VALUTAX 360 — identidade extraída da logo completa (app/static/logo-360.png).
   O degradê reproduz o fio sob "VALUTAX", medido pixel a pixel; os neutros vêm do
   fundo preto, do branco de "VALUTAX" e do cinza de "REFORM". Atenção e erro são
   cores de estado, não da marca. */
:root{
  --menta:#0CF7BF; --ciano:#00D1E5; --azul:#0899FC; --indigo:#455BF7;
  --violeta:#8838FA; --magenta:#F102DD; --rosa:#F1039E;
  --grad:linear-gradient(100deg,#09F3D6 0%,#02E5F5 15%,#09A0F9 33%,#455BF7 50%,#8431F7 66%,#DD08EA 85%,#F1039E 100%);
  --grad-suave:linear-gradient(100deg,rgba(12,247,191,.14),rgba(8,153,252,.14),rgba(136,56,250,.14),rgba(241,2,221,.14));
  --void:#000000; --painel:rgba(20,20,23,.78); --solido:#0C0C0E;
  --superficie:#141417; --elevado:#1D1D21;
  --linha:rgba(255,255,255,.08); --linha-forte:rgba(255,255,255,.15);
  --texto:#FEFEFE; --texto-2:#D0CFD0; --texto-3:#8E8D90;
  --atencao:#FFC061; --erro:#FF5C73;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--texto-2);min-height:100vh;
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--texto);margin:0;font-weight:660;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:28px} h2{font-size:19px} h3{font-size:15px}
p{margin:0}
a{color:var(--azul)}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rotulo{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--texto-3)}
::selection{background:rgba(8,153,252,.32)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* moldura */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.lateral{background:var(--solido);border-right:1px solid var(--linha);display:flex;flex-direction:column;
  padding:24px 12px 18px;position:sticky;top:0;height:100vh}
.logo{padding:0 8px 26px}
.logo img{width:168px;height:auto;display:block}
.nav{display:grid;gap:2px}
.nav a{display:block;padding:9px 12px;border-radius:10px;color:var(--texto-2);text-decoration:none;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.04);color:var(--texto)}
.nav a[aria-current="page"]{background:var(--grad-suave);color:var(--texto);border:1px solid var(--linha-forte)}
.nav .grupo{padding:16px 12px 6px}
.usuario{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--linha);display:grid;gap:6px;font-size:13px}
.usuario b{color:var(--texto);font-weight:600}
.usuario small{color:var(--texto-3)}
.palco{min-width:0;display:flex;flex-direction:column}
.topo{padding:16px 32px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.corpo{padding:30px 32px 64px;max-width:1180px;width:100%;display:grid;gap:24px;align-content:start}
.cabeca{display:grid;gap:6px}
.cabeca p{max-width:70ch}

/* blocos */
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:16px;padding:22px 24px;display:grid;gap:16px;align-content:start}
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.metrica{background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:18px 20px;display:grid;gap:6px}
.metrica b{font-size:28px;color:var(--texto);font-weight:690;letter-spacing:-.03em;line-height:1.1}
.metrica span{font-size:12.5px;color:var(--texto-3)}
.metrica.alerta b{color:var(--atencao)}
.faixa{border-radius:12px;padding:13px 16px;font-size:14px;border:1px solid}
.faixa.ok{background:rgba(12,247,191,.06);border-color:rgba(12,247,191,.25);color:#B5F5E3}
.faixa.erro{background:rgba(255,92,115,.07);border-color:rgba(255,92,115,.28);color:#F2B8C1}
.faixa.atencao{background:rgba(255,192,97,.06);border-color:rgba(255,192,97,.25);color:#EBD4AC}

/* tabelas */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--linha)}
td{padding:12px;border-bottom:1px solid var(--linha);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--texto);font-weight:600}
td small{color:var(--texto-3)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;
  border-radius:999px;border:1px solid;white-space:nowrap}
.chip.ok{color:var(--menta);border-color:rgba(12,247,191,.35);background:rgba(12,247,191,.09)}
.chip.neutro{color:var(--texto-2);border-color:var(--linha-forte);background:rgba(255,255,255,.04)}
.chip.erro{color:var(--erro);border-color:rgba(255,92,115,.4);background:rgba(255,92,115,.1)}
.chip.atencao{color:var(--atencao);border-color:rgba(255,192,97,.4);background:rgba(255,192,97,.1)}
.chip.azul{color:var(--azul);border-color:rgba(8,153,252,.4);background:rgba(8,153,252,.1)}
.papeis{display:flex;flex-wrap:wrap;gap:6px}

/* formulários */
form.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;align-items:end}
.campo{display:grid;gap:7px}
label,.campo>span{font-size:10.5px;color:var(--texto-3);letter-spacing:.14em;font-weight:700;text-transform:uppercase}
input[type=text],input[type=email],input[type=password],select{font:inherit;padding:11px 13px;
  background:rgba(255,255,255,.04);border:1px solid var(--linha-forte);color:var(--texto);width:100%;border-radius:9px}
input:focus,select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(8,153,252,.16)}
select option{background:var(--solido)}
fieldset{border:1px solid var(--linha);border-radius:10px;padding:10px 12px;margin:0;display:flex;flex-wrap:wrap;gap:10px 16px}
legend{font-size:10.5px;color:var(--texto-3);letter-spacing:.14em;font-weight:700;text-transform:uppercase;padding:0 4px}
.opcao{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--texto);text-transform:none;letter-spacing:0;font-weight:400}
.opcao input{accent-color:var(--azul)}
.btn{font:inherit;font-size:14px;font-weight:650;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;
  background:var(--grad);color:#000000}
.btn:hover{filter:brightness(1.07)}
.btn.vazio{background:transparent;color:var(--texto);border:1px solid var(--linha-forte)}
.btn.pequeno{font-size:12.5px;padding:6px 11px}
.inline{display:inline}
.pilha{display:grid;gap:16px;max-width:640px}
.linha-titulo{display:flex;justify-content:space-between;align-items:end;gap:12px 16px;flex-wrap:wrap}
.acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
a.btn{text-decoration:none;display:inline-block}
a.forte{color:var(--texto);font-weight:600;text-decoration:none}
a.forte:hover{text-decoration:underline}
input[type=file]{font:inherit;font-size:14px;color:var(--texto-2);padding:14px;width:100%;
  border:1px dashed var(--linha-forte);border-radius:10px;background:rgba(255,255,255,.02)}
input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;margin-right:12px;padding:7px 12px;
  border-radius:8px;border:1px solid var(--linha-forte);background:var(--elevado);color:var(--texto);cursor:pointer}
textarea{font:inherit;font-size:14px;width:100%;min-height:170px;padding:12px 13px;resize:vertical;color:var(--texto);
  background:rgba(255,255,255,.04);border:1px solid var(--linha-forte);border-radius:9px}
progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;
  background:var(--elevado);overflow:hidden}
progress::-webkit-progress-bar{background:var(--elevado);border-radius:999px}
progress::-webkit-progress-value{background:var(--grad);border-radius:999px}
progress::-moz-progress-bar{background:var(--grad);border-radius:999px}
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 20px;margin:0}
.dados div{display:grid;gap:3px;align-content:start}
.dados .largo{grid-column:span 2}
.dados dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--texto-3)}
.dados dd{margin:0;color:var(--texto);font-size:15px}
.lista-pendencias{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lista-pendencias li{display:flex;gap:10px;align-items:baseline}
details summary{cursor:pointer;color:var(--texto-2)}
details[open]>summary{margin-bottom:10px}
.faixa.info{background:rgba(8,153,252,.07);border-color:rgba(8,153,252,.28);color:#BFDDFB}
.faixa b{color:var(--texto)}
.chip.info{color:var(--ciano);border-color:rgba(0,209,229,.38);background:rgba(0,209,229,.08)}
.n{text-align:right;white-space:nowrap}
th.n{text-align:right}
.nota{font-size:13px;color:var(--texto-3)}
ul.nota{margin:0;padding-left:18px;display:grid;gap:4px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
small.bloco{display:block;margin-top:3px}
small.alerta{color:var(--atencao)}
tr.hoje td{color:var(--texto);background:rgba(255,255,255,.025)}

/* abas da análise */
.abas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linha);margin-top:-6px}
.abas a{padding:10px 14px;color:var(--texto-3);text-decoration:none;font-size:14px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.abas a:hover{color:var(--texto)}
.abas a[aria-current="page"]{color:var(--texto);border-image:var(--grad) 1;border-bottom-width:2px;border-bottom-style:solid}
.segmento{display:inline-flex;border:1px solid var(--linha-forte);border-radius:10px;padding:3px;gap:2px}
.segmento a{padding:6px 14px;border-radius:7px;color:var(--texto-2);text-decoration:none;font-size:13.5px;font-weight:600}
.segmento a[aria-current="page"]{background:var(--elevado);color:var(--texto)}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros a{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;
  color:var(--texto-2);text-decoration:none;border:1px solid var(--linha-forte)}
.filtros a span{color:var(--texto-3);font-variant-numeric:tabular-nums}
.filtros a[aria-current="page"]{background:var(--grad-suave);color:var(--texto);border-color:rgba(255,255,255,.25)}
form.busca{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
form.busca input[type=search]{font:inherit;padding:10px 13px;flex:1 1 260px;min-width:0;max-width:420px;
  background:rgba(255,255,255,.04);border:1px solid var(--linha-forte);color:var(--texto);border-radius:9px}
.paginacao{display:flex;gap:16px;align-items:center;justify-content:center;font-size:14px}
table.produtos td.classificacao{min-width:260px;max-width:420px}
table.produtos td.classificacao .codigo{display:block;margin-top:6px;color:var(--texto)}
table.produtos details p{margin:6px 0 0;font-size:13px;line-height:1.5}
.duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px;align-items:start}
.cartao.pendente{border-style:dashed;border-color:var(--linha-forte)}

/* fila de validação */
.item-fila{border:1px solid var(--linha);border-radius:14px;padding:18px 20px;display:grid;gap:14px;background:var(--solido)}
.item-fila.divergente{border-color:rgba(255,92,115,.45)}
.item-fila header{display:flex;justify-content:space-between;gap:12px;align-items:start}
.item-fila header>div{flex:1 1 auto;min-width:0}
.item-fila header>.chip{flex-shrink:0}
.item-fila h3{font-size:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.item-fila p{margin:4px 0 0}
.item-fila details p{font-size:13.5px;line-height:1.55}
.grade-item{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 28px}
.competencias{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.competencias li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.competencias li b{color:var(--texto);font-weight:600;min-width:120px}
.competencias li small.bloco{flex-basis:100%;margin-top:0}
.acoes-item{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;border-top:1px solid var(--linha);padding-top:14px}
form.validar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;flex:1 1 auto}
form.validar .campo{flex:0 1 180px}
form.validar .campo.largo{flex:1 1 280px}
form.competencia{display:inline-flex;gap:8px;align-items:center}
.decisao{display:grid;gap:10px;flex:1 1 100%}
.decisao p{margin:0;max-width:80ch}
.decisao .acoes{align-items:start}
details.contestar{flex:1 1 420px}
details.contestar[open] form{margin-top:10px}
form.competencia select{padding:6px 10px;width:auto}
.faixa.acoes{display:flex;justify-content:space-between;gap:10px 16px;align-items:center;flex-wrap:wrap}

/* gráficos */
.grafico{display:block;width:100%;min-width:560px;height:auto}
.grafico text{font-family:inherit;font-size:11.5px}
.g-eixo{fill:var(--texto-3)}
.g-valor{fill:var(--texto-2);font-weight:600}
.g-grade{stroke:var(--linha);stroke-width:1}
.g-zero{stroke:var(--linha-forte);stroke-width:1}
.g-referencia{stroke:var(--texto-2);stroke-width:1.2;stroke-dasharray:5 5}
.g-vendas,.l-vendas{fill:var(--azul);background:var(--azul)}
.g-compras,.l-compras{fill:var(--violeta);background:var(--violeta)}
.g-pis,.l-pis{fill:#5C5B61;background:#5C5B61}
.g-cbs,.l-cbs{fill:var(--menta);background:var(--menta)}
.g-icms,.l-icms{fill:#8E8D90;background:#8E8D90}
.g-ibs,.l-ibs{fill:var(--magenta);background:var(--magenta)}
.g-hoje{fill:#5C5B61}
.g-total{fill:var(--azul)}
.legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--texto-2)}
.legenda li{display:flex;align-items:center;gap:7px}
.legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legenda i.l-referencia{height:0;border-radius:0;border-top:2px dashed var(--texto-2);background:none}

/* entrar */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(60% 50% at 18% 8%,rgba(8,153,252,.16),transparent 70%),
             radial-gradient(50% 40% at 92% 92%,rgba(241,2,221,.12),transparent 70%),var(--void)}
.entrar .caixa{width:min(100%,400px);background:var(--painel);border:1px solid var(--linha-forte);border-radius:18px;
  padding:32px 30px;display:grid;gap:20px}
.entrar .caixa img{width:220px;justify-self:center}
.entrar form{display:grid;gap:14px}
.entrar .btn{width:100%}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto}
  .corpo,.topo{padding-inline:16px}
  .metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrica b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}