:root{
  /* Mantidos só pro cabeçalho/faixa superior (.band) e pro botão mobile do
     menu, que continuam escuros — o resto da tela agora é claro. */
  --navy:#0A1628; --navy2:#0d1e38; --navy3:#112244;
  --coral:#D8415F; --coral2:#B72E49; --white:#ffffff;
  --gold:#C9A84C; --gold2:#b8963e;
  --band:#0A1628; --band-ink:#ffffff; --band-dim:rgba(255,255,255,.55);

  /* Tema claro do conteúdo (cards, tabelas, formulários) — cores/estilo
     copiados do print de referência: fundo quase branco, texto escuro,
     bordas cinza-claro, verde/vermelho de status um pouco mais saturados
     pra ter contraste legível em cima de branco (diferente do tema escuro
     antigo, que usava tons pastel pra ler bem no navy). */
  --bg:#F4F5F7; --surface:#ffffff; --ink:#182233; --ink2:#5B6472; --muted:#8B93A1;
  --hair:#E1E4E9; --grid:#EBEDF0; --wash:#F7F8FA;

  --good:#1B8A56; --bad:#D6434B; --warn:#9A7B1C;
  --good-bg:rgba(27,138,86,.09); --good-bd:rgba(27,138,86,.30);
  --bad-bg:rgba(214,67,75,.08); --bad-bd:rgba(214,67,75,.30);
  --warn-bg:rgba(201,168,76,.16); --warn-bd:rgba(201,168,76,.5);
  --yellow:rgba(201,168,76,.14);

  --sans:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:'Cormorant Garamond',serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans)}
a{color:var(--coral)}
h1,h2,h3{font-family:var(--sans)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}

.band{background:var(--band);color:var(--band-ink);padding:14px 20px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.band-in{max-width:1180px;margin:0 auto}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
h1{margin:0;font-size:21px;font-weight:700;letter-spacing:.02em;color:var(--white)}
.sub{color:var(--coral);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;font-weight:600}
.user{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--band-dim)}
.tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:rgba(216,65,95,.18);color:#ff9fb3;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:1px 8px;margin-left:6px}
.menu-toggle{display:flex;align-items:center;gap:8px;margin:12px 0;background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--band-dim);border-radius:3px;padding:8px 14px;cursor:pointer;font-family:inherit;font-weight:500;font-size:11px;letter-spacing:.10em;text-transform:uppercase}
.menu-toggle:hover{color:#fff;border-color:var(--coral)}
.menu-toggle-icon{font-size:13px;line-height:1}

/* Menu lateral (gaveta vertical): fica fora do fluxo normal, escondido fora
   da tela à esquerda, e desliza pra dentro quando ganha a classe .open.
   Agora em fundo branco (igual o print de referência), só o texto/realce
   é que mudam de cor — a faixa superior (.band) continua escura. */
body.menu-open{overflow:hidden}
.menu-overlay{position:fixed;inset:0;background:rgba(10,22,40,.45);z-index:60;opacity:0;transition:opacity .2s ease}
.menu-overlay.open{opacity:1}
.menu-overlay[hidden]{display:none}
.tabs{position:fixed;top:0;left:0;z-index:70;display:flex;flex-direction:column;gap:0;width:260px;max-width:82vw;height:100vh;background:var(--surface);border-right:1px solid var(--hair);box-shadow:4px 0 28px rgba(20,30,50,.18);transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
.tabs.open{transform:translateX(0)}
.tabs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.tabs-title{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.menu-close{background:transparent;border:0;color:var(--muted);font-size:24px;line-height:1;padding:2px 6px;cursor:pointer}
.menu-close:hover{color:var(--ink)}
.tab{color:var(--ink2);text-decoration:none;padding:12px 18px;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:0;border-left:3px solid transparent}
.tab.active{color:var(--coral);border-left-color:var(--coral);background:rgba(216,65,95,.06)}
.tab:not(.active):hover{color:var(--ink);background:var(--wash)}

main{max-width:1180px;margin:0 auto;padding:20px}

.flash{padding:10px 14px;border-radius:4px;margin-bottom:16px;font-size:13px;border:1px solid}
.flash-ok{background:var(--good-bg);color:var(--good);border-color:var(--good-bd)}
.flash-erro{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--hair);margin-bottom:24px}
.kpi{padding:14px 16px 14px 0}
.kpi+.kpi{padding-left:16px;border-left:1px solid var(--hair)}
.kpi .l{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:700;margin:4px 0 2px;font-family:var(--sans)}
.kpi .d{font-size:12px;color:var(--ink2)}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}}

.card{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:16px;margin-bottom:20px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.card h2{margin:0 0 12px;font-size:16px;color:var(--ink);font-weight:700}
.card-alert{border-color:var(--warn-bd);background:var(--warn-bg)}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 10px;border-bottom:1px solid var(--grid);text-align:right;color:var(--ink)}
th:first-child,td:first-child{text-align:left}
.tl{text-align:left}
thead th{background:var(--wash);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
tr.total td{background:var(--wash);font-weight:600;border-top:1px solid var(--hair)}
tr.previsto td{background:var(--yellow)}
tr.pendente td{background:rgba(201,168,76,.09)}
.status{display:inline-block;font-size:10px;letter-spacing:.04em;padding:2px 9px 2px 7px;border-radius:9px;border:1px solid var(--hair)}
.status-pendente{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.status-aprovado{color:var(--good);border-color:var(--good-bd);background:var(--good-bg)}
.status-rejeitado{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.status::before{content:'•';margin-right:4px;font-size:13px;line-height:0;position:relative;top:1px}
.tag-edit{display:inline-block;font-size:10px;letter-spacing:.03em;font-weight:600;padding:2px 8px;border-radius:8px;background:rgba(216,65,95,.10);color:var(--coral2);border:1px solid rgba(216,65,95,.28);margin-left:6px}
.pos{color:var(--good)}.neg{color:var(--bad)}.zero{color:var(--muted)}

.tw{overflow-x:auto;border:1px solid var(--hair);border-radius:8px;background:var(--surface)}
.tw-head{display:flex;align-items:center;background:var(--wash);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--hair)}

/* Tabela com cabeçalho travado: vira uma grade com rolagem própria (nos dois
   eixos) em vez de deixar a rolagem vertical pra página — isso é necessário
   porque overflow-x:auto sozinho já transforma overflow-y em auto por conta
   própria (regra do CSS), o que prenderia o sticky dentro desse container de
   qualquer forma; aqui a gente assume isso explicitamente e trava o cabeçalho
   nele. */
.tw-sticky{overflow:auto;max-height:min(600px,70vh)}

/* Tabela "dia a dia por categoria": cada dia vira um bloco de 4 colunas
   (Prev./Real./Dif./%) e cada categoria vira uma linha, agrupada em Entradas
   e Saídas. Só a coluna de categoria fica fixa (sticky) rolando pros lados —
   nunca opacity numa célula sticky (fundo sempre sólido, nunca rgba): isso
   faz o Chromium "vazar" o que rolou por trás dela (já vimos esse bug aqui). */
.dia-resumo{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:14px;font-size:12px}
.dia-resumo-item{display:flex;align-items:baseline;gap:8px}
table.tbl-cat-dia{table-layout:fixed}
table.tbl-cat-dia th,table.tbl-cat-dia td{box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:10.5px;text-align:right;padding:5px 6px}
table.tbl-cat-dia thead th{vertical-align:bottom;font-size:10px}
table.tbl-cat-dia tr.sub-th th{background:var(--surface);color:var(--muted);font-size:9px;font-weight:600}
table.tbl-cat-dia th.rl{text-align:left;text-transform:none;letter-spacing:0;font-size:11px;white-space:normal;line-height:1.25}
table.tbl-cat-dia th.rl-1{position:sticky;left:0;z-index:2;background:var(--surface);color:var(--ink);font-weight:700;border-right:1px solid var(--hair)}
table.tbl-cat-dia th.rl-1.rl-sub{color:var(--ink2);font-weight:500;font-size:10.5px;padding-left:20px}
table.tbl-cat-dia thead th.rl-1{z-index:3;background:var(--wash)}
table.tbl-cat-dia tr.grupo-entrada td{background:rgba(27,138,86,.06)}
table.tbl-cat-dia tr.grupo-saida td{background:rgba(214,67,75,.06)}
table.tbl-cat-dia tr.grupo-entrada th.rl-1{background:#E8F5EE;color:var(--good)}
table.tbl-cat-dia tr.grupo-saida th.rl-1{background:#FBEAEA;color:var(--bad)}
table.tbl-cat-dia tr.total th.rl-1{background:var(--wash)}
table.tbl-cat-dia tr.total td{border-top:1px solid var(--hair)}

/* Cabeçalho travado (sticky): o <thead> inteiro (as duas linhas juntas) fica
   fixo no topo conforme a página rola dentro do container .tw-sticky — sticky
   no próprio thead em vez de em cada th evita ter que calcular/ajustar via JS
   o "top" da segunda linha em relação à primeira. z-index mais alto que a
   coluna sticky da esquerda (z-index:2), e o canto (th.rl-1 dentro do thead)
   mais alto que tudo — ele é sticky nos dois eixos ao mesmo tempo (left, pela
   regra th.rl-1 mais acima, + top, herdado do thead). Fundos sempre sólidos
   (nunca opacity/rgba num elemento sticky — já vimos esse bug "fantasma" no
   Chromium aqui). */
table.tbl-cat-dia thead{position:sticky;top:0;z-index:4}
table.tbl-cat-dia thead th.rl-1{z-index:5}

/* Linha divisória entre os blocos de 4 colunas (Prev./Real./Dif./%) de cada
   dia — a última coluna do bloco (%) recebe a borda. */
table.tbl-cat-dia .dia-fim{border-right:1px solid var(--hair)}
table.tbl-cat-dia thead tr:first-child th:not(.rl-1){border-right:1px solid var(--hair);text-align:center}

/* Botão de expandir/recolher as categorias de Entradas/Saídas */
.grp-toggle{background:transparent;border:0;color:inherit;font:inherit;font-size:11px;line-height:1;cursor:pointer;padding:0;margin-right:5px;display:inline-block;vertical-align:middle;transition:transform .15s ease}
.grp-toggle[aria-expanded="false"]{transform:rotate(-90deg)}
tr.linha-cat.dia-cat-escondida{display:none}

form.form{max-width:520px}
/* display:flex + justify-content:flex-end faz a CAIXA DE ENTRADA (input/select)
   ficar sempre colada na base do campo, não importa quantas linhas o label
   ocupe — então numa linha de campos lado a lado (.field-row), como o label
   mais alto "estica" a altura de todos os .field (align-items:stretch, que já
   é o padrão do flex), as caixas de entrada de todos os campos da linha ficam
   niveladas automaticamente, mesmo se um label quebrar em 1, 2 ou 3 linhas. */
.field{margin-bottom:14px;display:flex;flex-direction:column;justify-content:flex-end}
.field label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:4px;font:inherit;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(216,65,95,.15)}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1}

/* Filtro de mês (input[type=month]) usado soltinho no topo das páginas —
   sem isso o navegador desenha a caixinha branca padrão "crua", sem borda
   nem raio, destoando do resto. color-scheme:light pede pro próprio
   navegador desenhar o ícone/calendário nativo já na paleta clara. */
input[type=month],input[type=date]{padding:9px 12px;border:1px solid var(--hair);border-radius:4px;font:inherit;font-size:13px;letter-spacing:.02em;background:var(--surface);color:var(--ink);color-scheme:light;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
input[type=month]:hover,input[type=date]:hover{border-color:rgba(216,65,95,.45)}
input[type=month]:focus,input[type=date]:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(216,65,95,.15)}
input[type=month]::-webkit-calendar-picker-indicator,input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.65;border-radius:3px;transition:opacity .15s ease}
input[type=month]::-webkit-calendar-picker-indicator:hover,input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}

.btn{display:inline-block;background:transparent;border:1px solid var(--hair);border-radius:4px;padding:8px 16px;cursor:pointer;font-size:12px;letter-spacing:.05em;text-decoration:none;color:var(--ink2)}
.btn:hover{border-color:var(--coral);color:var(--coral)}
.btn-primary{background:var(--coral);color:var(--white);font-weight:700;border-color:var(--coral)}
.btn-primary:hover{background:var(--coral2);color:var(--white);border-color:var(--coral2)}
.btn-ok{background:transparent;color:var(--good);border-color:var(--good-bd)}
.btn-ok:hover{background:var(--good);color:var(--white);border-color:var(--good)}
.btn-bad{background:transparent;color:var(--bad);border-color:var(--bad-bd)}
.btn-bad:hover{background:var(--bad);color:var(--white);border-color:var(--bad)}
.btn-sm{padding:5px 11px;font-size:11px}

/* Tela de login: fundo azul-marinho igual à faixa/tema original do site
   (mesmas cores --navy/--gold usadas na .band), em vez do fundo claro do
   resto do app — só essa tela usa esse tema escuro. */
body.login-page{background:radial-gradient(1100px 700px at 18% -8%, var(--navy3), var(--navy) 62%);min-height:100vh}
.login-wrap{max-width:380px;margin:80px auto;background:var(--navy2);border:1px solid rgba(201,168,76,.22);border-radius:8px;padding:40px 36px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login-wrap h1{color:var(--white);font-family:var(--serif);font-weight:600;font-size:24px;text-align:center;margin-bottom:4px;letter-spacing:.04em}
.login-wrap .sub{color:var(--gold);text-align:center;margin-bottom:24px;text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:600}
/* Sobrescreve, só dentro da tela de login, os acentos coral que o resto do
   app usa (rótulo do campo, foco do input, botão) por dourado — aqui é
   tudo dourado, sem vermelho/coral. */
.login-wrap .field label{color:var(--gold)}
.login-wrap .field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.20)}
.login-wrap .btn-primary{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700}
.login-wrap .btn-primary:hover{background:var(--gold2);color:var(--navy);border-color:var(--gold2)}
.login-back{display:block;text-align:center;margin-top:20px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.login-back:hover{color:var(--gold)}

.rankbar{display:flex;flex-direction:column;gap:2px}
.rankbar-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.rankbar-rank{flex:0 0 18px;font-family:var(--sans);font-size:11px;color:var(--muted);text-align:right}
.rankbar-label{flex:0 0 220px;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankbar-track{flex:1;min-width:60px;height:16px;background:var(--wash);border-radius:4px;position:relative}
.rankbar-fill{height:100%;background:var(--coral);border-radius:0 4px 4px 0;min-width:3px}
.rankbar-fill.good{background:var(--good)}
.rankbar-fill.bad{background:var(--bad)}
.rankbar-value{flex:0 0 auto;font-family:var(--sans);font-size:12px;color:var(--ink);white-space:nowrap;text-align:right}
.rankbar-pct{color:var(--muted);font-size:11px;margin-left:4px}
@media(max-width:680px){.rankbar-label{flex-basis:110px}.rankbar-rank{display:none}}

.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:var(--ink2)}
.chart-legend .lg{display:flex;align-items:center;gap:6px}
.chart-legend .sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.chart-legend .sw-line{width:14px;height:2px;border-radius:1px}
.evo-svg{width:100%;height:auto;overflow:visible}
.evo-grid{stroke:var(--grid);stroke-width:1}
.evo-baseline{stroke:var(--hair);stroke-width:1}
.evo-axis-y{font-family:var(--sans);font-size:10.5px;fill:var(--muted);text-anchor:end}
.evo-axis-x{font-family:var(--sans);font-size:11px;fill:var(--ink2);text-anchor:middle}
.evo-bar-entrada{fill:var(--good)}
.evo-bar-saida{fill:var(--bad)}
.evo-linha-saldo{fill:none;stroke:var(--coral);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.evo-ponto-saldo{fill:var(--coral);stroke:var(--surface);stroke-width:2}

.split2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.split2{grid-template-columns:1fr}}
.rankbar-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}

.insight{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--grid)}
.insight:last-child{border-bottom:none}
.insight-ic{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.insight-ic.bad{background:var(--bad)}
.insight-ic.warn{background:var(--warn)}
.insight-ic.good{background:var(--good)}
.insight-body b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.insight-body span{font-size:12px;color:var(--ink2)}

.kpi .delta{font-size:11px;margin-top:2px}

dialog.modal{border:1px solid var(--hair);border-radius:8px;background:var(--surface);color:var(--ink);padding:22px;max-width:420px;width:90vw;box-shadow:0 24px 60px rgba(20,30,50,.18)}
dialog.modal::backdrop{background:rgba(10,22,40,.45)}
dialog.modal h3{margin:0 0 10px;font-family:var(--sans);color:var(--ink);font-size:19px;font-weight:700}
.radio-opt{margin-bottom:10px}
.radio-opt label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.radio-opt input[type=radio]{accent-color:var(--coral);width:15px;height:15px}

.hint{font-size:12px;color:var(--muted);margin-top:8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.empty{padding:30px;text-align:center;color:var(--muted)}
code{color:var(--coral);background:rgba(216,65,95,.08);padding:1px 5px;border-radius:3px;font-size:12px}