@font-face{font-family:"VT323";src:url("vendor/fonts/VT323-Regular.ttf") format("truetype");font-display:swap}
/* ================================================================
   Minha$Grana — estilo neubrutalista arcade (tokens VERBATIM do
   mockup aprovado: mockups/v3_hero.html + v3_cockpit.html).
   Tema CLARO único. Zero CDN. @font-face Press Start 2P vem de vendor/font.css.
================================================================ */
:root{
  --papel:#FAF4E6;      /* creme quente: fundo */
  --tinta:#16130E;      /* quase-preto quente: bordas + texto */
  --azul:#2F6BFF;       /* INTOCÁVEL */
  --amarelo:#FFC94D;    /* NECESSÁRIO */
  --coral:#FF5D5D;      /* SUPÉRFLUO */
  --verde:#35C46A;      /* GUARDADO / positivo */
  --rosa:#FF5DA2;       /* acento/assinatura */
  --roxo:#9B5DE5;       /* extra (saúde) */
  --neutro:#94a3b8;     /* neutro / não classificado */
  --prata:#C9C4B4;      /* moeda empatou */
  --tinta-mut:#4d4636;  /* texto secundário LEGÍVEL (troca opacity — contraste ~8:1 no creme) */
  --sombra:6px 6px 0 var(--tinta);
  --sombra-sm:4px 4px 0 var(--tinta);
  --sombra-xs:2px 2px 0 var(--tinta);
  --pixel:"Press Start 2P",ui-monospace,monospace;
  --disp:"VT323",ui-monospace,monospace;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(0.25,1,0.5,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:var(--sans); line-height:1.45;
  background-image:radial-gradient(var(--tinta) 0.6px, transparent 0.6px);
  background-size:22px 22px; background-position:-11px -11px;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
button{font-family:inherit; color:inherit}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:800}
.eyebrow{font-family:var(--disp); font-size:18px; letter-spacing:1px; line-height:1.6; text-transform:uppercase}
.neg{color:var(--coral)}
.pos{color:var(--verde)}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--rosa); outline-offset:2px}

/* ================================================================ LOGIN */
.login{position:fixed; inset:0; display:grid; place-items:center; padding:20px; z-index:50}
.login-card{background:#fff; border:3px solid var(--tinta); box-shadow:var(--sombra);
  padding:26px 22px; width:min(360px,100%); display:flex; flex-direction:column; gap:16px; text-align:center}
.login-logo{font-family:var(--pixel); font-size:16px; background:var(--tinta); color:var(--papel);
  padding:14px 12px; border:3px solid var(--tinta); box-shadow:var(--sombra-sm)}
.login-logo b{color:var(--rosa)}
.login input{font:inherit; font-size:16px; padding:13px 14px; border:3px solid var(--tinta);
  background:var(--papel); text-align:center; letter-spacing:2px; box-shadow:var(--sombra-xs)}
.login-erro{color:var(--coral); font-size:13px; font-weight:700; min-height:18px; margin:0}
.btn-pixel{font-family:var(--disp); font-size:21px; cursor:pointer; background:var(--verde); color:#fff;
  border:3px solid var(--tinta); padding:15px; box-shadow:var(--sombra-sm); transition:transform .12s var(--ease), box-shadow .12s var(--ease)}
.btn-pixel:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--tinta)}
.btn-pixel:active{transform:translate(4px,4px); box-shadow:none}
.btn-pixel:disabled{opacity:.55; cursor:progress}

/* ================================================================ TOPO */
.app{max-width:1480px; margin:0 auto; padding:14px 16px 60px}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.top-left{display:flex; align-items:center; gap:10px; min-width:0}
.logo{font-family:var(--pixel); font-size:14px; background:var(--tinta); color:var(--papel);
  padding:11px 13px; border:3px solid var(--tinta); box-shadow:var(--sombra-sm); white-space:nowrap}
.logo b{color:var(--rosa)}
.top-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.month{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-size:20px;
  background:#fff; border:3px solid var(--tinta); padding:3px 8px; box-shadow:var(--sombra-sm)}
.month-label{min-width:96px; text-align:center; white-space:nowrap}
/* 44x44: controle mais usado no iPhone — alvo de toque mínimo do BUILD_SPEC */
.month-arrow{font:inherit; cursor:pointer; background:var(--amarelo); border:2px solid var(--tinta);
  width:44px; height:44px; padding:0; box-shadow:var(--sombra-xs); transition:transform .1s var(--ease)}
.month-arrow:active{transform:translate(2px,2px); box-shadow:none}
.month-arrow:disabled{opacity:.4; cursor:default}
.lentes{display:flex; gap:8px; flex-wrap:wrap}
.lente{font-family:var(--disp); font-size:20px; cursor:pointer; background:#fff; color:var(--tinta);
  border:3px solid var(--tinta); padding:9px 12px; box-shadow:var(--sombra-sm);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
  display:inline-flex; align-items:center; gap:9px}
.lente svg{display:block; flex:none}
/* modo PRIVADO: borra os números (👁 no topo). Não some com nada — só desfoca. */
body.privado :is(.num, .valor, .big, .k-val){filter:blur(8px)}
/* número-herói das linhas de extrato: negrito, maior, verde escuro (entrou) /
   vermelho escuro (saiu) — "achar fácil o número no meio de tanta informação" */
.vgrande{font-family:var(--mono); font-weight:800; font-size:1.2em; letter-spacing:.2px}
.vgrande.pos{color:#0d7a44}
.vgrande.neg{color:#b01212}
/* pontinho de grupo (despoluição: cor conta a história sem pill-caixa) */
.dot-g{display:inline-block; width:10px; height:10px; border:2px solid var(--tinta);
  margin-right:6px; vertical-align:-1px}
/* EXTRATO com cor pelos DADOS (Ronaldo 09/07: "tá muito branco"): faixa lateral na
   cor do grupo + zebra tingida + mini-barra de magnitude — o extrato vira gráfico */
.sublist .xln{border-left:6px solid color-mix(in srgb, var(--cg, var(--tinta)) 38%, #fff); padding-left:12px}
.sublist .xln:nth-child(even){background:color-mix(in srgb, var(--cg, var(--tinta)) 2.5%, transparent)}
.magbar{display:block; width:130px; max-width:100%; height:6px; background:#efe8d8;
  border:1px solid var(--tinta); margin:5px 0 0 auto}
.magbar i{display:block; height:100%; background:var(--cg, var(--coral))}
/* Transações agrupadas: cabeçalho de grupo com subtotal (correr o olho) */
.tab tr.tr-grupo td{background:color-mix(in srgb, var(--amarelo) 24%, #fff); border-top:3px solid var(--tinta);
  font-weight:800; padding-top:12px; padding-bottom:12px}
.tab tr.tr-grupo small{margin-left:8px; opacity:.65; font-weight:600}
.lente span{line-height:1}
.lente:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--tinta)}
.lente[aria-pressed="true"]{background:var(--rosa); color:#fff}
.btn-sair{font-family:var(--sans); font-weight:800; font-size:13.5px; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; background:#fff; border:3px solid var(--tinta);
  padding:12px 13px; box-shadow:var(--sombra-sm); min-height:44px}
.btn-sair:hover{background:var(--coral); color:#fff}

/* ================================================================ MODOS + NAV */
/* nav QUEBRA LINHA (não corta os botões da beirada quando lota — Ronaldo 09/07) */
.modos{display:flex; gap:12px 10px; align-items:center; margin-bottom:16px; border-bottom:3px solid var(--tinta);
  padding-bottom:12px; flex-wrap:wrap}
.toggle{display:flex; border:3px solid var(--tinta); box-shadow:var(--sombra-sm); flex:none; background:#fff}
/* REGRA DURA de fonte (bronca 3x do Ronaldo): VT323 SÓ em display grande
   (mês, lentes, títulos de modal). Botão, tag, pill e selo = SANS PRETA. */
.toggle button{font-family:var(--sans); font-weight:800; font-size:14px; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; background:#fff; border:0;
  padding:12px 14px; border-right:3px solid var(--tinta); min-height:44px; white-space:nowrap}
.toggle button:last-child{border-right:0}
.toggle button[aria-pressed="true"]{background:var(--rosa); color:#fff}
.nav{display:flex; gap:8px; flex:1 1 auto; flex-wrap:wrap; min-width:0}
.nav-btn{font-family:var(--sans); font-weight:800; font-size:14px; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; white-space:nowrap; background:#fff;
  color:var(--tinta); border:3px solid var(--tinta); padding:10px 12px; box-shadow:var(--sombra-xs);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease); flex:0 0 auto; min-height:44px}
.nav-btn:hover{transform:translate(-1px,-1px); box-shadow:var(--sombra-sm)}
.nav-btn[aria-current="true"]{background:var(--tinta); color:var(--papel)}
.nav-btn.nav-ico{display:inline-grid; place-items:center; padding:8px 14px}
.nav-btn.nav-ico svg{display:block}
/* máscara "só o meu" por card: ícone de olho no canto do cabeçalho, verde quando ligado */
.mascara-btn{margin-left:auto; flex:0 0 auto; display:inline-grid; place-items:center; cursor:pointer;
  width:36px; height:36px; padding:0; background:#fff; color:var(--tinta); border:2px solid var(--tinta);
  box-shadow:var(--sombra-xs); transition:transform .12s var(--ease), box-shadow .12s var(--ease)}
.mascara-btn svg{display:block; pointer-events:none}
.mascara-btn.on{background:var(--verde); color:#fff}
@media(hover:hover){.mascara-btn:hover{transform:translate(-1px,-1px); box-shadow:var(--sombra-sm)}}

/* ================================================================ GRID / CARDS */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start}
.card{background:#fff; border:3px solid var(--tinta); box-shadow:var(--sombra); padding:22px; min-width:0}
/* MOVIMENTO: elevação no hover das estruturas (só desktop; no toque não gruda) */
@media (hover:hover){
  .card, .vaza-hero{transition:transform .14s var(--ease), box-shadow .14s var(--ease)}
  .card:hover, .vaza-hero:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--tinta)}
  .kpi, .camada, .fx-linha, .hbar .row, .fonte-linha{transition:background .14s var(--ease); border-radius:3px}
  .kpi:hover, .camada:hover, .fx-linha:hover, .fonte-linha:hover{background:color-mix(in srgb, var(--amarelo) 15%, #fff)}
}
.card h3{margin:0 0 18px; font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.4px; font-size:17px; line-height:1.5;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card h3 .chip{width:13px; height:13px; border:2px solid var(--tinta); display:inline-block; flex:none}
.card .card-sub{font-size:15px; color:var(--tinta-mut); margin:-8px 0 14px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
/* empilha 2+ cards curtos na mesma coluna do grid (mata a zona morta do desktop) */
.coluna{display:flex; flex-direction:column; gap:24px; min-width:0}
@media(max-width:1100px){
  .c3{grid-column:span 6}.c4{grid-column:span 6}.c5{grid-column:span 6}.c7{grid-column:span 6}
  .c8{grid-column:span 12}.c9{grid-column:span 12}
}
@media(max-width:760px){
  .c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 12}
}
.card.escuro{background:var(--tinta); color:var(--papel)}
.card.escuro h3{color:var(--papel)}

/* ================================================================ HERÓI + MOEDA */
.hero{display:grid; grid-template-columns:1fr auto; gap:18px 24px; align-items:center}
.hero .valor{font-family:var(--mono); font-weight:800; font-size:clamp(38px,8.5vw,64px); line-height:1;
  margin:10px 0 8px; letter-spacing:-1px; font-variant-numeric:tabular-nums}
.hero .valor .rs{font-size:.4em; vertical-align:.4em; margin-right:5px; opacity:.6}
.hero .msg{font-size:16px; max-width:46ch}
.hero .msg b{background:var(--amarelo); padding:1px 5px; border:2px solid var(--tinta); white-space:nowrap; font-weight:700; color:var(--tinta)}
.coin{width:104px; height:104px; border-radius:50%; border:4px solid var(--tinta); display:grid; place-items:center;
  background:var(--amarelo); box-shadow:var(--sombra); position:relative; flex:none}
.coin.dourada{background:var(--amarelo)} .coin.prata{background:var(--prata)} .coin.trincada{background:var(--coral)}
.coin .face{font-family:var(--pixel); font-size:26px; color:var(--tinta)}
.coin.trincada .face{color:#fff}
.coin .cap{font-size:15px; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--disp); font-size:13px; background:var(--tinta); color:var(--papel); padding:4px 6px; border:2px solid var(--tinta)}
@media(max-width:560px){ .hero{grid-template-columns:1fr} .coin{justify-self:start; margin-bottom:10px} }

/* hero compacto (cockpit) */
.hero-mini .big{font-family:var(--mono); font-weight:800; font-size:clamp(32px,5vw,48px); line-height:1; margin:6px 0; font-variant-numeric:tabular-nums}
.hero-mini .big .rs{font-size:.42em; vertical-align:.35em; opacity:.6; margin-right:3px}
.hero-mini .sub{font-size:15px; opacity:.9}
.coinrow{display:flex; gap:12px; align-items:center; margin-top:14px}
.coinrow .coin{width:52px; height:52px; border-width:3px; box-shadow:none; border-color:var(--papel)}
.coinrow .coin .face{font-size:14px}

/* ---- mini KPIs ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px}
.kpi{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:11px 12px; background:#fff; color:var(--tinta)}
.kpi .k-lab{font-family:var(--disp); font-size:18px; text-transform:uppercase; color:var(--tinta-mut); line-height:1.5}
.kpi .k-val{font-family:var(--mono); font-weight:800; font-size:22px; margin-top:5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi .k-sub{font-size:14px; color:var(--tinta-mut); margin-top:3px}

/* ================================================================ CASCATA (linhas) */
.cascata{display:flex; flex-direction:column; gap:10px}
.camada{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:20px 20px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; text-align:left;
  cursor:pointer; transition:transform .12s var(--ease), box-shadow .12s var(--ease); font:inherit; color:var(--tinta)}
.camada:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--tinta)}
.camada:disabled{cursor:default} .camada:disabled:hover{transform:none; box-shadow:var(--sombra-sm)}
.camada .tag{display:flex; align-items:center; gap:10px; min-width:0}
.camada .dot{width:16px; height:16px; border:2px solid var(--tinta); flex:none}
.camada .nome{font-weight:700; font-size:17px}
.camada .desc{font-size:15px; color:var(--tinta-mut); display:block; font-weight:500; margin-top:3px}
.camada .v{font-family:var(--mono); font-weight:800; font-size:22px; white-space:nowrap; font-variant-numeric:tabular-nums}
.camada .v.neg::before{content:"−"}
.camada.entrou .v{color:var(--verde)}
/* respiro entre Entrou e o 1º dreno: os outros blocos ganham a linha "sobrou R$ X"
   entre si; o Entrou ficava colado no Intocável (feedback 08/07 22:35) */
.cascata:not(.mini) .camada.entrou{margin-bottom:16px}
.camada.intocavel{background:color-mix(in srgb, var(--azul) 16%, #fff)} .camada.intocavel .dot{background:var(--azul)}
.camada.necessario{background:color-mix(in srgb, var(--amarelo) 26%, #fff)} .camada.necessario .dot{background:var(--amarelo)}
.camada.superfluo{background:color-mix(in srgb, var(--coral) 20%, #fff); border-width:4px} .camada.superfluo .dot{background:var(--coral)}
.camada.guardado{background:color-mix(in srgb, var(--verde) 18%, #fff)} .camada.guardado .dot{background:var(--verde)}
.camada.repasses{background:color-mix(in srgb, var(--rosa) 14%, #fff)} .camada.repasses .dot{background:var(--rosa)}
.camada.outros{background:color-mix(in srgb, var(--neutro) 20%, #fff)} .camada.outros .dot{background:var(--neutro)}
.camada.sobra{background:var(--tinta); color:var(--papel); cursor:default}
.camada.sobra:hover{transform:none; box-shadow:var(--sombra-sm)}
.camada.sobra .v{color:var(--verde)} .camada.sobra .v.vermelho{color:var(--coral)}
.resto{font-family:var(--disp); font-size:17px; text-align:right; opacity:.8; margin:-3px 4px 0}

/* cascata compacta (cockpit) */
.cascata.mini{gap:8px}
.cascata.mini .camada{padding:9px 11px; box-shadow:var(--sombra-xs); border-width:2px}
.cascata.mini .camada.superfluo{border-width:3px}
.cascata.mini .camada .nome{font-size:14px}
.cascata.mini .camada .v{font-size:14px}
.cascata.mini .camada .dot{width:12px; height:12px}

/* ================================================================ FLUXO DE CAIXA */
.fluxo{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media(max-width:760px){.fluxo{grid-template-columns:1fr}}
.fx-bloco{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); background:#fff}
.fx-bloco.entra{background:color-mix(in srgb, var(--verde) 10%, #fff)}
.fx-bloco.sai{background:color-mix(in srgb, var(--coral) 9%, #fff)}
.fx-tit{font-family:var(--sans); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 14px; border-bottom:3px solid var(--tinta)}
.fx-linha{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:0; border-bottom:2px dashed var(--tinta); padding:12px 14px; cursor:pointer; font:inherit; color:inherit}
.fx-linha:last-child{border-bottom:0}
.fx-linha:hover:not(:disabled){background:color-mix(in srgb, var(--amarelo) 20%, transparent)}
.fx-linha:disabled{cursor:default}
.fx-lab{font-weight:700; font-size:15px}
.fx-lab small{display:block; font-weight:500; font-size:14.5px; color:var(--tinta-mut); margin-top:2px}
.fx-v{font-family:var(--mono); font-weight:800; font-size:17px; white-space:nowrap; font-variant-numeric:tabular-nums}
.fx-linha.mais .fx-v{color:var(--verde)} .fx-linha.mais .fx-v::before{content:"+"}
.fx-linha.menos .fx-v{color:var(--coral)} .fx-linha.menos .fx-v::before{content:"−"}
.fx-bloco.interno{grid-column:1 / -1; background:color-mix(in srgb, var(--neutro) 13%, #fff)}
.fx-linha.neutro .fx-v{color:var(--tinta)}
.fx-saldo{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--tinta); color:var(--papel); border:3px solid var(--tinta); box-shadow:var(--sombra-sm);
  padding:16px 18px; font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:15px}
.fx-saldo .num{font-family:var(--mono); font-size:26px; color:var(--verde)}
.fx-saldo.neg .num{color:var(--coral)}
.fluxo .card-sub{grid-column:1 / -1}

/* ================================================================ BARRAS HORIZONTAIS */
.hbar{display:flex; flex-direction:column; gap:12px}
.hbar .row{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; text-align:left;
  border:0; background:none; font:inherit; color:inherit; padding:0; width:100%}
.hbar button.row{cursor:pointer}
.hbar button.row:hover .lab{text-decoration:underline}
.hbar .lab{font-size:14px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar .track{grid-column:1 / -1; display:block; height:22px; border:2px solid var(--tinta); background:var(--papel); overflow:hidden}
.hbar .fill{display:block; height:100%; border-right:2px solid var(--tinta); transition:width .5s var(--ease)}
.hbar .v{font-family:var(--mono); font-weight:800; font-size:14.5px; white-space:nowrap; font-variant-numeric:tabular-nums}

/* legenda */
.leg{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:14px; font-weight:600}
.leg span{display:inline-flex; align-items:center; gap:6px}
.leg i{width:12px; height:12px; border:2px solid var(--tinta); display:inline-block}

/* gráfico chart.js — todo gráfico é navegável (clique abre o detalhe) */
.chart-box{position:relative; height:260px; width:100%}
.chart-box.alto{height:300px}
.chart-box.baixo{height:220px}
.chart-box canvas{cursor:pointer}

/* ================================================================ INSIGHTS */
.insights{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.insight{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:20px; background:#fff; font-size:15px; line-height:1.55}
.insight.vaza{background:var(--coral); color:#fff}
.insight.bom{background:color-mix(in srgb, var(--verde) 22%, #fff)}
.insight.aviso{background:color-mix(in srgb, var(--amarelo) 30%, #fff)}
.insight .i-tit{font-family:var(--sans); font-weight:800; font-size:16px; line-height:1.6; margin-bottom:8px}
.insight .i-txt{font-size:14.5px; line-height:1.55}
.insight .i-val{font-family:var(--mono); font-weight:800; font-size:16px; margin-top:9px; display:inline-block; font-variant-numeric:tabular-nums}
/* insight navegável: clique abre as transações relacionadas */
.insight.link{cursor:pointer; transition:transform .12s var(--ease), box-shadow .12s var(--ease)}
.insight.link:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--tinta)}
.insight .i-go{font-family:var(--sans); font-weight:800; font-size:13.5px; text-transform:uppercase;
  letter-spacing:.05em; margin-top:10px; display:inline-flex; align-items:center; gap:5px; opacity:.85}

/* faixa "onde vaza" — letra grande: branco no coral cansa se for pequeno */
.vaza-hero{background:var(--coral); color:#fff; border:3px solid var(--tinta); box-shadow:var(--sombra); padding:22px}
.vaza-hero .eyebrow{color:#fff; font-size:19px}
.vaza-hero h3{margin:8px 0 6px; font-size:23px; font-family:var(--mono); font-weight:800}
.vaza-hero p{margin:0 0 14px; font-size:16.5px; font-weight:600; max-width:56ch; line-height:1.5}
.vaza-hero .sim{display:inline-flex; align-items:center; gap:10px; background:var(--papel); color:var(--tinta);
  border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:12px 15px; font-weight:700; font-size:15.5px; flex-wrap:wrap}
.vaza-hero .sim .num{color:var(--verde); font-size:20px}
.vaza-hero .vaza-ver{display:block; margin-top:16px; background:var(--papel); color:var(--tinta);
  border:3px solid var(--tinta); box-shadow:3px 3px 0 rgba(0,0,0,.35); font-family:var(--sans);
  font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; padding:11px 16px; cursor:pointer}
.vaza-hero .vaza-ver:hover{background:#fff; transform:translateY(-2px)}
.vaza-hero p b{background:var(--papel); color:var(--tinta); padding:1px 6px; border:2px solid var(--tinta); white-space:nowrap}

/* ================================================================ ONDE VAZA 2.0 */
/* soma no fim de QUALQUER lista (pedido Ronaldo: total sempre visível no pé) */
.soma-final{display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:3px solid var(--tinta); margin-top:4px; padding:13px 0 2px}
.soma-final .lab{font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:14px}
.soma-final .lab small{font-family:var(--sans); font-weight:800; text-transform:none; letter-spacing:0;
  color:var(--coral); margin-left:8px; font-size:13px}
.soma-final .num{font-size:19px; font-variant-numeric:tabular-nums}
.card.escuro .soma-final{border-top-color:var(--papel)}
.card.escuro .card-sub{color:var(--papel); opacity:.9}

/* comparativo "vs mês anterior" (Ver Tudo) */
.cmp{display:flex; flex-direction:column; gap:9px; margin-top:2px}
.cmp-linha{display:flex; align-items:baseline; gap:12px; border-bottom:2px dashed var(--tinta); padding-bottom:9px}
.cmp-linha:last-child{border-bottom:0; padding-bottom:0}
.cmp-rot{font-family:var(--sans); font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.03em}
.cmp-mid{margin-left:auto; font-family:var(--disp); font-size:17px; font-variant-numeric:tabular-nums}
.cmp-delta{font-family:var(--sans); font-weight:800; font-size:12.5px; white-space:nowrap; min-width:104px; text-align:right}

/* VEREDITO do mês — card de destaque no TOPO (O Mês e Ver Tudo) */
.card.veredito{border-width:4px}
.ver-topo{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.ver-humor{font-family:var(--sans); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.05em;
  padding:8px 14px; border:3px solid var(--tinta); box-shadow:var(--sombra-xs); white-space:nowrap}
.ver-humor.bem{background:var(--verde); color:var(--tinta)}
.ver-humor.limite{background:var(--amarelo); color:var(--tinta)}
.ver-humor.furou{background:var(--coral); color:#fff}
.ver-frase{font-size:16.5px; line-height:1.5; font-weight:600; flex:1; min-width:220px}
.ver-frase b{font-family:var(--mono); font-weight:800}
.ver-alertas{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.ver-alerta{display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  padding:12px 14px; border:2px solid var(--tinta); background:#fff; cursor:pointer; box-shadow:var(--sombra-xs);
  font-family:var(--sans); transition:transform .08s}
.ver-alerta:hover{transform:translateY(-2px)}
.ver-alerta.vaza{background:color-mix(in srgb,var(--coral) 16%,#fff)}
.ver-alerta.aviso{background:color-mix(in srgb,var(--amarelo) 24%,#fff)}
.ver-alerta.bom{background:color-mix(in srgb,var(--verde) 16%,#fff)}
.va-tit{font-weight:800; font-size:14px; line-height:1.35}
.va-go{font-family:var(--sans); font-weight:800; font-size:12px; text-transform:uppercase; white-space:nowrap; opacity:.7}
.ver-ok{font-weight:700; color:var(--tinta-mut); padding:6px 0}

/* rodapé TOTAL na tabela (Maiores gastos) */
table.tab tfoot tr.tot td{background:var(--tinta); color:var(--papel); font-family:var(--sans); font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; border-top:3px solid var(--tinta); font-size:14px}
table.tab tfoot tr.tot td small{font-family:var(--mono); font-weight:700; text-transform:none; color:var(--prata)}
table.tab tfoot tr.tot td .val{color:var(--papel)}

/* Hall da vergonha */
.hall-card .hall-list{margin-top:4px}
.hall-item{gap:14px}
.hall-rank{flex:none; width:30px; height:30px; display:grid; place-items:center; background:var(--coral); color:#fff;
  border:2px solid var(--tinta); box-shadow:var(--sombra-xs); font-family:var(--mono); font-weight:800; font-size:15px}
.hall-item .yr .pl{display:block; font-family:var(--sans); font-weight:800; font-size:12.5px; color:var(--coral); margin-top:3px}
.hall-rank.cru{background:var(--neutro)}
.hall-cru{opacity:.9}
.hall-cru .meta small{font-style:italic}

/* Fôlego da reserva (runway) — card escuro */
.runway-big{font-family:var(--mono); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; margin:2px 0 14px}
.runway-big .num{font-size:clamp(46px,9vw,64px); color:var(--rosa)}
.runway-big .un{font-family:var(--disp); font-size:23px; color:var(--papel); margin-left:8px}
.rw-cells{display:flex; gap:5px; margin:0 0 16px}
.rw-cells i{flex:1; height:16px; border:2px solid var(--papel); background:transparent}
.rw-cells i.on{background:var(--rosa)}
.runway-card .rw-txt{margin:0}
.card.escuro .card-sub b{color:var(--amarelo)}

/* simulador — linhas extra (ganho em 12m + novo fôlego) */
.simul-extra{font-family:var(--mono); font-size:14px; font-weight:700; color:var(--papel);
  margin-top:12px; line-height:1.5; font-variant-numeric:tabular-nums; border-top:2px dashed var(--papel); padding-top:12px}
.simul-extra:first-of-type{margin-top:14px}
.simul-extra b{color:var(--amarelo)}
.h3-nota{font-weight:600; text-transform:none; letter-spacing:0; color:var(--tinta-mut); font-size:14px}

/* Operação (stack digital) */
.op-hero .big .por{font-family:var(--disp); font-size:.36em; color:var(--papel); margin-left:8px; letter-spacing:1px}
.op-hero .sub b{color:var(--amarelo)}

/* "?" explicativo por card (hover/foco mostra a explicação) */
.ajuda{flex:none; width:21px; height:21px; border:2px solid var(--tinta); background:#fff; color:var(--tinta);
  font-family:var(--sans); font-weight:800; font-size:12px; line-height:1; cursor:help; padding:0; border-radius:50%;
  display:inline-grid; place-items:center; position:relative; margin-left:6px}
.card.escuro .ajuda, .vaza-hero .ajuda{border-color:var(--papel); background:transparent; color:var(--papel)}
.ajuda:hover, .ajuda:focus-visible{background:var(--rosa); color:#fff; border-color:var(--tinta)}
.ajuda::after{content:attr(data-tip); position:absolute; top:135%; right:0; width:max-content; max-width:250px;
  background:var(--tinta); color:var(--papel); border:2px solid var(--tinta); box-shadow:var(--sombra-sm);
  padding:9px 11px; font-family:var(--sans); font-weight:500; font-size:13px; line-height:1.45; text-transform:none;
  letter-spacing:0; text-align:left; z-index:40; opacity:0; pointer-events:none; transition:opacity .12s var(--ease)}
.ajuda:hover::after, .ajuda:focus-visible::after{opacity:1}

/* ================================================================ SUBLIST (assinaturas / contratos) */
.sublist{display:flex; flex-direction:column}
.sub{display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:2px dashed var(--tinta);
  padding:12px 0; font-size:14.5px}
.sub:last-child{border-bottom:0}
.sub .ico{width:34px; height:34px; border:2px solid var(--tinta); display:grid; place-items:center; flex:none; background:#fff; color:var(--tinta)}
.sub .ico svg{width:20px; height:20px; display:block}
/* chip do ativo cripto (BTC, USDC...) no slot de ícone da lista */
.cripto-chip{flex:none; min-width:46px; height:34px; padding:0 8px; border:2px solid var(--tinta);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-family:var(--sans);
  font-weight:800; font-size:13px; letter-spacing:.02em; box-shadow:var(--sombra-xs)}
.mono-end{font-family:var(--mono); font-size:13px; color:var(--tinta-mut)}
.reserva-hero{background:color-mix(in srgb, var(--amarelo) 12%, #fff)}
.sub .meta{flex:1; min-width:0}
.sub .meta b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sub .meta small{font-size:14px; color:var(--tinta-mut); display:block; margin-top:2px}
.sub .yr{font-family:var(--mono); font-weight:800; font-size:14.5px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.sub .yr small{display:block; font-family:var(--sans); font-weight:500; font-size:13.5px; color:var(--tinta-mut); margin-top:2px}
/* botão-lápis: dar nome a um compromisso sem sair da lista */
.acao-mini{flex:none; width:34px; height:34px; border:2px solid var(--tinta); background:#fff; cursor:pointer;
  font-size:15px; box-shadow:var(--sombra-xs); line-height:1; padding:0}
.acao-mini:hover{background:var(--amarelo)}
/* linha de lista navegável (assinaturas, compromissos, maiores gastos) */
.sub.link, .fonte-linha.link{cursor:pointer}
.sub.link:hover, .fonte-linha.link:hover{background:color-mix(in srgb, var(--amarelo) 16%, #fff)}
.sub.link:hover .meta b, .fonte-linha.link:hover b{text-decoration:underline}
.selo{font-family:var(--sans); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 7px; border:2px solid var(--tinta); white-space:nowrap; vertical-align:middle; display:inline-block; color:var(--tinta)}
.selo.zumbi{background:var(--coral); color:#fff}
.selo.ativa{background:var(--verde); color:#fff}
.selo.dup{background:var(--rosa); color:#fff}
.selo.op{background:var(--roxo); color:#fff}
.selo.intocavel{background:var(--azul); color:#fff}
.selo.variavel{background:var(--amarelo); color:var(--tinta)}
.selo.superfluo{background:var(--coral); color:#fff}
.selo.guardado{background:var(--verde); color:#fff}
.selo.receita{background:var(--tinta); color:var(--papel)}
.selo.neutro{background:var(--neutro); color:#fff}
.selo.canc{background:var(--amarelo); color:var(--tinta)}

/* mini timeline de meses (assinatura) */
.mtl{display:inline-flex; gap:3px; vertical-align:middle}
.mtl i{width:9px; height:9px; border:2px solid var(--tinta); background:var(--papel)}
.mtl i.on{background:var(--verde)}

/* sparkline */
.spark{display:block}
.spark polyline{fill:none; stroke:var(--tinta); stroke-width:2}
.spark rect{fill:var(--rosa); stroke:var(--tinta); stroke-width:1.5}

/* ================================================================ TABELA */
.tabela-wrap{overflow-x:auto; border:3px solid var(--tinta); box-shadow:var(--sombra); background:#fff}
table.tab{border-collapse:collapse; width:100%; min-width:560px; font-size:14px}
table.tab th{font-family:var(--disp); font-size:17px; text-align:left; padding:11px 12px; background:var(--tinta); color:var(--papel); white-space:nowrap}
table.tab th.r, table.tab td.r{text-align:right}
table.tab td{padding:10px 12px; border-top:2px solid color-mix(in srgb,var(--tinta) 18%, #fff); vertical-align:top}
table.tab tr.linha{cursor:pointer}
table.tab tr.linha:hover td{background:color-mix(in srgb,var(--amarelo) 16%, #fff)}
table.tab td .val{font-family:var(--mono); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
table.tab td .memo{display:block; font-size:13.5px; color:var(--tinta-mut); margin-top:2px; max-width:52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill{font-family:var(--sans); font-weight:700; font-size:14px; padding:3px 8px; border:2px solid var(--tinta); display:inline-block; white-space:nowrap; color:var(--tinta); background:#fff}
/* subgrupo mastigado embaixo do pill de grupo (Energia, Moradia, Telefone...) */
.subg{display:block; font-size:14px; font-weight:700; color:var(--tinta-mut); margin-top:3px}
/* nota do Ronaldo na transação ("monitor LG") — destaque amarelo, buscável */
/* nota = nome do produto (enriquecido): neutra, tipo máquina de escrever, pra NÃO competir
   com as tags coloridas de grupo (bronca do Ronaldo: amarelo da nota brigava com a pill) */
.nota{font-family:var(--mono); font-weight:600; font-size:12.5px; padding:2px 7px;
  border:1.5px solid color-mix(in srgb, var(--tinta) 22%, transparent); border-radius:3px;
  background:color-mix(in srgb, var(--tinta) 5%, transparent); color:var(--tinta-mut);
  display:inline-block; white-space:nowrap; max-width:30ch; overflow:hidden; text-overflow:ellipsis; vertical-align:middle}
tr.detalhe td{background:color-mix(in srgb,var(--papel) 60%, #fff); padding:0}
/* BOLETA — comprovante organizado da transação (modal); dados crus dobrados */
.boleta h2{margin:4px 0 2px}
.boleta .bo-valor{font-family:var(--mono); font-weight:800; font-size:clamp(28px,5vw,36px); margin:8px 0 12px; font-variant-numeric:tabular-nums}
.boleta .bo-valor.pos{color:#0d7a44}
.boleta .bo-valor.neg{color:#b01212}
.boleta .bo-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.boleta .bo-linhas{margin:0; padding:12px 0 10px; border-top:3px solid var(--tinta); border-bottom:2px dashed var(--tinta)}
.boleta .bo-linhas > div{display:flex; justify-content:space-between; gap:14px; padding:5px 0}
.boleta .bo-linhas dt{font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-mut); flex:none; padding-top:2px}
.boleta .bo-linhas dd{margin:0; font-family:var(--mono); font-weight:700; font-size:14.5px; text-align:right; min-width:0; overflow-wrap:anywhere}
.boleta .bo-cru{margin-top:12px}
.boleta .bo-cru summary{cursor:pointer; font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-mut)}

/* .kv fora do escopo .detalhe: o modal de transação (raio-x) usa o mesmo grid */
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:14px; font-size:13.5px; margin:0}
.kv dt{font-family:var(--sans); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-mut); padding-top:3px}
.kv dd{margin:0; font-family:var(--mono); word-break:break-word}
.detalhe .acoes{display:flex; gap:10px; flex-wrap:wrap; padding:0 14px 14px; align-items:center}
.paginacao{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; font-size:12.5px}
.paginacao .info{font-family:var(--mono); font-weight:700}

/* ================================================================ CONTROLES / FORM */
.controles{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
input.txt, select.sel, input.cor{font:inherit; font-size:14px; padding:9px 11px; border:3px solid var(--tinta); background:#fff; box-shadow:var(--sombra-xs); min-height:44px}
select.sel{cursor:pointer}
input.cor{padding:4px; width:52px; cursor:pointer}
label.chk{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; cursor:pointer; min-height:44px}
label.chk input{width:19px; height:19px; accent-color:var(--rosa)}
.btn{font-family:var(--sans); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; background:#fff; color:var(--tinta); border:3px solid var(--tinta);
  padding:12px 14px; box-shadow:var(--sombra-xs); transition:transform .12s var(--ease), box-shadow .12s var(--ease); min-height:44px}
.btn:hover{transform:translate(-1px,-1px); box-shadow:var(--sombra-sm)}
.btn:active{transform:translate(2px,2px); box-shadow:none}
.btn.pri{background:var(--verde); color:#fff}
.btn.dang{background:var(--coral); color:#fff}
.btn.mini{font-size:14px; padding:9px 12px; min-height:44px} /* 44px: APAGAR colado em SALVAR no touch */
.btn:disabled{opacity:.5; cursor:default; transform:none}

/* formulário empilhado (modais) */
.form{display:flex; flex-direction:column; gap:12px}
.form label{font-family:var(--disp); font-size:17px; text-transform:uppercase; display:block; margin-bottom:6px}
.form .linha2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){.form .linha2{grid-template-columns:1fr}}
.form input.txt, .form select.sel{width:100%}

/* simulador "e se eu cortar" */
.simul{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media(max-width:760px){.simul{grid-template-columns:1fr}}
.simul-lista{display:flex; flex-direction:column; gap:12px}
.simul-item{display:grid; gap:6px; border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:12px 14px; background:#fff}
.simul-item .top-row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.simul-item .nome{font-weight:700; font-size:13.5px}
.simul-item .atual{font-family:var(--mono); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums}
.simul-item input[type=range]{width:100%; accent-color:var(--coral); height:30px; margin:0}
.simul-item .corte{font-family:var(--mono); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.simul-total{background:var(--tinta); color:var(--papel); border:3px solid var(--tinta); box-shadow:var(--sombra); padding:20px; text-align:center; position:sticky; top:12px}
.simul-total .big{font-family:var(--mono); font-weight:800; font-size:clamp(28px,6vw,42px); line-height:1; margin:10px 0; font-variant-numeric:tabular-nums}
.simul-total .eco{font-family:var(--mono); font-weight:800; color:var(--verde); font-size:17px}
/* painel direito do simulador: números + projeção ao vivo, gruda junto no scroll */
.simul-dir{display:grid; gap:16px; position:sticky; top:12px; min-width:0}
.simul-dir .simul-total{position:static}
.simul-total .real{font-family:var(--mono); font-weight:800; font-size:20px; opacity:.85; font-variant-numeric:tabular-nums}
.simul-proj{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); background:#fff; padding:16px}
.simul-proj .proj-titulo{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px}

/* linhas simples de fonte/contrato */
.fonte-linha{display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:2px dashed var(--tinta); padding:11px 0; font-size:14.5px}
.fonte-linha:last-child{border-bottom:0}
.fonte-linha .v{font-family:var(--mono); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.fonte-linha .tend{font-weight:800; font-size:14px; margin-left:6px}

/* cards de dono (família) */
.donos{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.dono-card{border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:14px; background:#fff}
.dono-card .d-nome{font-family:var(--disp); font-size:18px; margin-bottom:8px}
.dono-card .d-val{font-family:var(--mono); font-weight:800; font-size:22px; font-variant-numeric:tabular-nums}
.dono-card .d-sub{font-size:14.5px; color:var(--tinta-mut); margin-top:4px}

/* importar */
.drop{border:3px dashed var(--tinta); background:#fff; padding:34px 18px; text-align:center; cursor:pointer;
  box-shadow:var(--sombra-sm); transition:background .15s var(--ease)}
.drop.ativo{background:color-mix(in srgb, var(--verde) 14%, #fff)}
.drop .d-tit{font-family:var(--disp); font-size:18px; margin-bottom:10px}
.drop .d-sub{font-size:14px; color:var(--tinta-mut)}
.import-res{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.import-res .r{display:flex; justify-content:space-between; gap:10px; border:2px solid var(--tinta); padding:9px 11px; font-size:12.5px; background:#fff; flex-wrap:wrap}
.import-res .r.falha{background:color-mix(in srgb, var(--coral) 14%, #fff)}

/* ================================================================ MODAL / TOAST / ERRO */
.modal{position:fixed; inset:0; background:rgba(22,19,14,.5); display:grid; place-items:center; padding:16px; z-index:60}
.modal-cartao{background:var(--papel); border:3px solid var(--tinta); box-shadow:var(--sombra); padding:20px; width:min(640px,100%); max-height:88vh; overflow:auto; position:relative}
.modal-x{position:absolute; top:10px; right:10px; font-family:var(--disp); font-size:19px; cursor:pointer; background:var(--coral); color:#fff; border:3px solid var(--tinta); width:38px; height:38px; box-shadow:var(--sombra-xs); z-index:1}
.modal h2{font-family:var(--disp); font-size:21px; margin:0 34px 16px 0; line-height:1.6}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--tinta); color:var(--papel);
  border:3px solid var(--tinta); box-shadow:var(--sombra); padding:12px 16px; font-weight:700; font-size:13px; z-index:70; max-width:90vw}
/* botão VOLTAR na barra, ao lado de O MÊS/VER TUDO: desfaz o último clique
   (tela+mês+lente+filtros+scroll) — Ronaldo pediu ele lá em cima 08/07 23:20 */
.btn-voltar{flex:none; font-family:var(--sans); font-weight:800;
  font-size:14px; text-transform:uppercase; letter-spacing:.04em; background:var(--tinta); color:var(--papel);
  border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:12px 14px; cursor:pointer; min-height:44px;
  white-space:nowrap; transition:transform .12s var(--ease), background .12s var(--ease)}
.btn-voltar:hover{background:var(--rosa); transform:translate(-1px,-1px)}
@media(max-width:560px){ .sub .spark{display:none} } /* respiro nas listas do celular */
.toast.erro{background:var(--coral); color:#fff}
.tela-erro{background:var(--coral); color:#fff; border:3px solid var(--tinta); box-shadow:var(--sombra-sm); padding:14px; margin-bottom:14px; font-weight:700}
.vazio{padding:30px 16px; text-align:center; color:var(--tinta-mut); font-size:15px}
.carregando{font-family:var(--disp); font-size:18px; padding:30px; text-align:center; opacity:.6}
@keyframes pisca{0%,100%{opacity:.35}50%{opacity:.75}}
.carregando{animation:pisca 1.1s var(--ease) infinite}

.sec-titulo{font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:17px; margin:22px 0 12px; display:flex; align-items:center; gap:10px}
.sec-titulo::after{content:""; flex:1; height:3px; background:var(--tinta)}

.foot{margin-top:26px; text-align:center; font-family:var(--disp); font-size:14px; line-height:1.9; opacity:.55}

@media(prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* piso de legibilidade (pente-fino 08/07 + "aumentada final" 23:15) */
.card small{font-size:14px}
.tab td{font-size:15px}
.tab td small{font-size:13.5px}
.card .card-sub{font-size:15px}
.kpi .k-sub{font-size:14px}
.vazio{font-size:14.5px}
.toast{font-size:14.5px}
.paginacao{font-size:13.5px}
.leg{font-size:14.5px}
.simul-item .nome{font-size:14.5px}
.simul-item .corte{font-size:13.5px}
.camada .desc{font-size:14.5px}
.import-res .r{font-size:13.5px}
.drop .d-sub{font-size:14px}
.hero .msg{font-size:17px}

/* ================================================================ RELATÓRIO (folha A4) */
.rl-acoes{display:flex; gap:12px; align-items:center; margin:0 0 18px; flex-wrap:wrap}
.folha{max-width:820px; margin:0 auto; background:#FBF6EA; border:3px solid var(--tinta);
  box-shadow:var(--sombra); padding:34px 38px}
.rl-cab{display:flex; justify-content:space-between; align-items:center;
  border-bottom:4px solid var(--tinta); padding-bottom:14px}
.rl-logo{font-family:var(--disp); font-size:26px; background:var(--tinta); color:#fff; padding:6px 12px}
.rl-tit{font-size:14px; text-align:right; line-height:1.5}
.rl-tit b{font-size:18px}
.rl-h{font-size:13px; text-transform:uppercase; letter-spacing:1px;
  border-bottom:2px solid var(--tinta); padding-bottom:4px; margin:24px 0 10px; font-family:var(--sans)}
.rl-analise{font-size:15px; line-height:1.65; font-weight:600; background:#fff;
  border:3px solid var(--tinta); padding:12px 14px; margin:0}
.rl-kpis{display:flex; gap:12px; flex-wrap:wrap}
.rl-kpi{flex:1; min-width:140px; border:3px solid var(--tinta); background:#fff; padding:10px 12px}
.rl-kpi .l{font-size:11px; text-transform:uppercase; opacity:.7}
.rl-kpi .v{font-family:var(--mono); font-weight:900; font-size:20px}
.rl-linha{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:5px 0; border-bottom:1px dashed #b9b09a; font-size:14px}
.rl-nome small{display:block; opacity:.65; font-size:11.5px}
.rl-bar{height:9px; background:#efe8d8; border:1px solid var(--tinta); margin:3px 0 8px}
.rl-bar i{display:block; height:100%}
.rl-duas{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.rl-aviso{border:3px solid var(--tinta); background:#FFD9D9; padding:8px 12px;
  font-size:13.5px; font-weight:700; margin-top:8px}
.rl-rodape{margin-top:26px; font-size:11px; opacity:.6; text-align:center}
@media(max-width:700px){ .rl-duas{grid-template-columns:1fr} .folha{padding:20px 16px} }
@media print{
  header.top, #nav, .rl-acoes, .toast{display:none !important}
  body{background:#fff}
  #app{padding:0 !important; margin:0 !important}
  .folha{border:0; box-shadow:none; max-width:100%; padding:0}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .rl-duas{break-inside:avoid}
}