/* ═══════════════════════════════════════════════════════════════════
   PAINEL FINANCEIRO — componentes
   Cartões, KPIs, tabelas, planilha anual, previsão, modais, avisos.
   Depende dos tokens de theme.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CARTÃO ───────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--edge);
}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.card-h h3{font-size:13.5px;font-weight:650}
.card-h .hint{margin-left:auto}
.card-b{padding:16px 18px}
.card-pad{padding:18px}
.card-flat{box-shadow:none;background:var(--surface-2)}

/* ── 2. KPIs — a primeira coisa que se lê na tela ────────────────── */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 17px 16px;box-shadow:var(--sh-2),var(--edge);
}
/* fio de cor no topo diz o papel do número antes de você ler o rótulo */
.kpi::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--line-strong);opacity:.9}
.kpi.is-pos::after{background:linear-gradient(90deg,var(--accent),transparent 85%)}
.kpi.is-neg::after{background:linear-gradient(90deg,var(--red),transparent 85%)}
.kpi.is-prev::after{background:linear-gradient(90deg,var(--c-prev),transparent 85%)}
.kpi.is-warn::after{background:linear-gradient(90deg,var(--amber),transparent 85%)}

.kpi-lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-soft);margin-bottom:7px}
.kpi-lbl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;opacity:.7}
.kpi-val{font-size:25px;font-weight:650;letter-spacing:-.03em;line-height:1.12}
.kpi-val.sm{font-size:21px}
.kpi.is-pos .kpi-val{color:var(--accent)}
.kpi.is-neg .kpi-val{color:var(--red)}
.kpi-sub{margin-top:6px;font-size:11.5px;color:var(--text-faint);line-height:1.45}
.kpi-sub b{color:var(--text-soft);font-weight:600}

/* variação com sinal — sempre com seta, nunca só cor */
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:650;font-size:11.5px}
.delta.up{color:var(--red)}      /* gastar mais é ruim */
.delta.down{color:var(--accent)}
.delta.up::before{content:"▲";font-size:8px}
.delta.down::before{content:"▼";font-size:8px}
.delta.neutro{color:var(--text-faint)}

/* barra de progresso fina dentro do KPI */
.bar{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:9px}
.bar>i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .4s var(--ease)}
.bar.over>i{background:var(--red)}
.bar.prev>i{background:var(--c-prev)}

/* ── 3. PÍLULAS E ETIQUETAS ──────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:4px;padding:1.5px 7px;border-radius:20px;
  font-size:10.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  background:var(--surface-3);color:var(--text-soft)}
.pill-ok{background:var(--accent-dim);color:var(--accent)}
.pill-warn{background:var(--amber-dim);color:var(--amber)}
.pill-bad{background:var(--red-dim);color:var(--red)}
.pill-info{background:var(--blue-dim);color:var(--blue)}
.pill-prev{background:var(--violet-dim);color:var(--violet)}

/* grau de certeza da previsão — o usuário precisa saber no que confiar */
.cert{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:650}
.cert::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.cert-certo::before{background:var(--accent)}
.cert-provavel::before{background:var(--blue)}
.cert-planejado::before{background:var(--violet)}
.cert-estimado::before{background:var(--text-faint)}
.cert-certo{color:var(--accent)} .cert-provavel{color:var(--blue)}
.cert-planejado{color:var(--violet)} .cert-estimado{color:var(--text-faint)}

.cat-dot{width:8px;height:8px;border-radius:3px;flex:none;display:inline-block}

/* ── 4. AVISOS ───────────────────────────────────────────────────── */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{
  display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface);font-size:12.5px;box-shadow:var(--sh-1)
}
.alert .ai{width:16px;height:16px;flex:none;margin-top:1px}
.alert .ai svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.alert .atxt{flex:1;min-width:0;color:var(--text-soft)}
.alert .atxt b{color:var(--text);font-weight:600}
.alert-warn{border-color:color-mix(in srgb,var(--amber) 32%,var(--line));background:var(--amber-dim)}
.alert-warn .ai{color:var(--amber)}
.alert-bad{border-color:color-mix(in srgb,var(--red) 32%,var(--line));background:var(--red-dim)}
.alert-bad .ai{color:var(--red)}
.alert-info .ai{color:var(--blue)}
.alert-ok{border-color:var(--accent-line);background:var(--accent-dim)}
.alert-ok .ai{color:var(--accent)}

/* ── 5. TABELAS ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
thead th{
  padding:9px 12px;text-align:left;font-size:10.5px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);
  border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
tbody td{padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover>td{background:var(--surface-2)}
td.num,th.num{text-align:right}
td.desc{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card>table:first-child thead th:first-child,
.card>.tbl-scroll table thead th:first-child{border-top-left-radius:var(--r-lg)}
.tbl-scroll{overflow:auto;border-radius:var(--r-lg)}

/* ── 6. PLANILHA ANUAL (12 meses × categorias) ───────────────────── */
.grid-scroll{overflow:auto;max-height:calc(100vh - 250px);border-radius:var(--r-lg)}
table.ytable{border-collapse:separate;border-spacing:0;font-size:12px;min-width:940px}
table.ytable th,table.ytable td{padding:6px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.ytable thead th{position:sticky;top:0;z-index:20;background:var(--surface-2);
  box-shadow:inset 0 -1px 0 var(--line)}
/* primeira coluna presa: sem isso você perde o nome da categoria ao rolar */
table.ytable .sticky-c{position:sticky;left:0;z-index:15;background:var(--surface);
  min-width:212px;max-width:212px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:1px 0 0 var(--line)}
table.ytable thead .sticky-c{z-index:25;background:var(--surface-2)}
table.ytable td.mcol,table.ytable th.mcol{min-width:78px}
/* mês em foco: coluna levemente destacada de cima a baixo */
table.ytable .cur{background:var(--accent-dim)}
table.ytable thead th.cur{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-2))}
table.ytable td.tot,table.ytable th.tot{background:var(--surface-2);font-weight:650;
  border-left:1px solid var(--line)}

/* linha de seção (RECEITAS / CUSTOS) */
table.ytable tr.sec-row td{background:var(--bg);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;color:var(--text-faint);padding:13px 10px 7px;border-bottom:1px solid var(--line)}
table.ytable tr.sec-row .sec-acts{float:right;display:inline-flex;gap:4px;letter-spacing:0}
.mini-add{font-size:10.5px;font-weight:600;color:var(--text-soft);padding:2px 7px;
  border-radius:var(--r-xs);border:1px solid var(--line);background:var(--surface);
  text-transform:none;letter-spacing:0}
.mini-add:hover{background:var(--surface-3);color:var(--text)}

/* cabeçalho de grupo */
table.ytable tr.grp-row>td{background:var(--surface-2);font-weight:650;cursor:pointer}
table.ytable tr.grp-row:hover>td{background:var(--surface-3)}
table.ytable tr.grp-row .sticky-c{background:var(--surface-2)}
table.ytable tr.grp-row:hover .sticky-c{background:var(--surface-3)}
.exp-arrow{display:inline-block;width:12px;color:var(--text-faint);font-size:9px}
.grp-n{font-size:10px;font-weight:600;color:var(--text-faint);background:var(--surface-3);
  padding:0 5px;border-radius:20px;margin-left:4px}

/* linha de categoria, com realce leve da cor do grupo */
table.ytable tr.grp-tint>td{background:var(--tint,transparent)}
table.ytable tr.grp-tint .sticky-c{background:var(--surface)}
table.ytable tr.grp-tint:hover>td{background:var(--surface-2)}
table.ytable .cat-name{cursor:pointer;display:flex;align-items:center;gap:7px}
table.ytable .cat-name.in-grp{padding-left:22px}
table.ytable .cat-name:hover{color:var(--accent)}
table.ytable td.cell{cursor:pointer;transition:background .1s}
table.ytable td.cell:hover{outline:1.5px solid var(--accent-line);outline-offset:-1.5px}
table.ytable td.prev-cell{color:var(--text-faint)}
table.ytable td.over2{color:var(--red);font-weight:600}
table.ytable td.pgd{font-weight:600}
table.ytable tr.tot-row>td{background:var(--surface-2);font-weight:650;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.ytable tr.saldo-row>td{background:var(--surface-3);font-weight:700;font-size:12.5px}
table.ytable tr.saldo-row .sticky-c{background:var(--surface-3)}

.mini-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:11px;
  font-size:11px;color:var(--text-faint)}
.mini-legend span{display:inline-flex;align-items:center;gap:5px}
.mini-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ── 7. GRADE DE ORÇAMENTO (mesma planilha, células editáveis) ────── */
table.ytable td.bcell{padding:0}
table.ytable td.bcell input{
  width:100%;height:30px;border:0;background:transparent;border-radius:0;
  padding:0 10px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;
  box-shadow:none;color:var(--text);
}
table.ytable td.bcell input::placeholder{color:color-mix(in srgb,var(--text-faint) 55%,transparent)}
table.ytable td.bcell input:hover{background:var(--surface-2)}
table.ytable td.bcell input:focus{
  background:var(--surface);color:var(--text);
  box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-xs);
}
table.ytable td.bcell.tem input{color:var(--text)}
table.ytable td.bcell.vazio input{color:var(--text-faint)}
/* célula copiada/preenchida em massa pisca uma vez — dá o retorno da ação */
@keyframes flashfill{from{background:var(--accent-dim)}to{background:transparent}}
table.ytable td.bcell.flash{animation:flashfill .6s var(--ease)}

.bud-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);margin-bottom:13px}
.bud-tools .sep{width:1px;height:20px;background:var(--line)}

/* ── Célula que veio de um PLANO ("10x de 480", "todo mês") ────────
   A etiqueta fica na esquerda, onde não há número: a coluna é alinhada
   à direita, então ela nunca briga com o valor. Precisa ser clicável
   (abre o plano) sem tirar a célula do caminho do Tab. */
table.ytable td.bcell{position:relative}
table.ytable td.bcell.plan input{padding-left:34px}
.pmark{position:absolute;left:5px;top:50%;transform:translateY(-50%);z-index:1;
  font-size:9.5px;font-weight:700;font-style:normal;letter-spacing:.02em;
  padding:1px 4px;border-radius:4px;cursor:pointer;
  color:var(--accent);background:var(--accent-dim);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.pmark:hover{background:var(--accent);color:#fff}
/* etiqueta órfã: o plano diz que há parcela aqui e a célula está vazia.
   Em âmbar, porque é um aviso de que algo apagou por cima — não um erro
   de digitação seu, e não uma célula que você deixou em branco de propósito. */
.pmark.orfa{color:var(--amber);background:var(--amber-dim);
  border-color:color-mix(in srgb,var(--amber) 38%,transparent)}
.pmark.orfa:hover{background:var(--amber);color:#111}
.pmark-leg{font-size:9.5px;font-weight:700;font-style:normal;padding:1px 4px;border-radius:4px;
  color:var(--accent);background:var(--accent-dim)}

/* ── Prévia do diálogo de plano ───────────────────────────────────
   Mostrar mês a mês o que vai entrar na planilha ANTES de gravar. Em
   dinheiro, ninguém deveria descobrir o resultado depois. */
.plano-frase{font-size:12px;color:var(--text-soft);margin-bottom:8px;line-height:1.5}
.plano-previa{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);padding:10px 12px;max-height:210px;overflow:auto}
table.plano-tab{width:100%;border-collapse:collapse;font-size:12px}
table.plano-tab th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-faint);font-weight:600;text-align:left;padding:2px 6px}
table.plano-tab td{padding:2px 6px;font-variant-numeric:tabular-nums}
table.plano-tab .num{text-align:right}
/* quatro formas de repetir não cabem em duas colunas confortavelmente */
.seg.seg-4{grid-template-columns:1fr 1fr}
/* crédito × débito é um par: fica lado a lado, na altura de um campo */
.seg.seg-2{grid-template-columns:1fr 1fr;gap:6px;margin:0;width:100%}
.seg.seg-2 button{padding:8px 6px;font-size:12px}

/* célula de RECEITA na grade do orçamento: o que entra tem outra cor,
   senão a grade vira um bloco só de números sem hierarquia */
table.ytable td.bcell.rec.tem input{color:var(--green)}
table.ytable td.bcell.rec input:focus{box-shadow:inset 0 0 0 2px var(--green)}

/* ── 8. COMPOSIÇÃO DA PREVISÃO (Visão geral) ──────────────────────
   Os cartões .prev-mes/.prev-grid saíram junto com a tela Previsão. O que
   sobra aqui é a barrinha que a Visão geral usa para mostrar de onde vem o
   previsto do mês que vem. */
/* barra empilhada mostrando a composição da previsão */
.stack{display:flex;height:5px;border-radius:4px;overflow:hidden;background:var(--surface-3);margin-top:10px}
.stack>i{display:block;height:100%}
.stack .s-certo{background:var(--accent)}
.stack .s-provavel{background:var(--blue)}
.stack .s-planejado{background:var(--violet)}
.stack .s-estimado{background:var(--line-strong)}

/* ── 9. LISTA DE MAIORES GASTOS ──────────────────────────────────── */
.topline{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px}
.topline .nm{min-width:118px;max-width:118px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-transform:capitalize}
.topline .tbar{flex:1;height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.topline .tbar>span{display:block;height:100%;border-radius:4px}
.topline .vl{min-width:76px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ── 10. GRÁFICO DO ANO ──────────────────────────────────────────── */
.ychart{width:100%;height:150px;display:block;overflow:visible}
.ychart .gcol{cursor:pointer}
.ychart .gcol:hover rect,.ychart .gcol:hover path{filter:brightness(1.2)}
.ychart text{font-size:9.5px;fill:var(--text-faint);font-family:var(--font)}
.ychart .zero{stroke:var(--line);stroke-width:1}
.ychart .cur-col rect{filter:brightness(1.15)}
.ylegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--text-soft);margin:2px 0 10px}
.ylegend span{display:inline-flex;align-items:center;gap:5px}
.ylegend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.yread{margin-top:9px;font-size:11.5px;color:var(--text-soft);min-height:17px}
.yread b{color:var(--text);font-weight:600;text-transform:capitalize}

/* ── 11. LAYOUTS DE DUAS COLUNAS ─────────────────────────────────── */
.two{display:grid;gap:14px;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.two-eq{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){.two,.two-eq{grid-template-columns:1fr}}

/* ── 12. VAZIO ───────────────────────────────────────────────────── */
.empty{text-align:center;padding:44px 20px;color:var(--text-faint)}
.empty .big{font-size:30px;margin-bottom:10px;opacity:.55}
.empty b{display:block;color:var(--text-soft);font-weight:600;font-size:13px;margin-bottom:4px}

/* ── 13. MODAL ───────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px;z-index:200}
.modal-bg.show{display:flex}
.modal{
  position:relative;width:100%;max-width:460px;max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--sh-3),var(--edge);
  animation:modalin .16s var(--ease);
}
.modal.wide{max-width:840px}
@keyframes modalin{from{opacity:0;transform:translateY(6px) scale(.99)}}
.modal h3{font-size:16px;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--text-faint);margin:0 0 16px}
.modal-x{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:var(--r-xs);
  color:var(--text-faint);font-size:15px;line-height:1}
.modal-x:hover{background:var(--surface-3);color:var(--text)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.pan-kpis{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));margin-bottom:15px}
.pan-kpis>div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.pan-kpis span{display:block;font-size:10.5px;font-weight:600;color:var(--text-faint);margin-bottom:3px}
.pan-kpis b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}

/* chips de mês dentro do popup */
/* subtítulo dentro de um popup: separa "os números" de "a lista" */
.pan-sec{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-faint);margin:2px 0 8px}
.pan-sec .hint{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
/* rodapé da lista de lançamentos do período: o total tem que fechar com a
   barra que foi clicada no gráfico, e ficar visível com a lista rolada */
.modal table tfoot td{position:sticky;bottom:0;background:var(--surface-2);
  border-top:1px solid var(--line);font-weight:650;font-size:12px;padding:9px 12px}
.mchips{display:flex;gap:3px;flex-wrap:wrap}
.mchip{padding:3px 9px;border-radius:var(--r-xs);font-size:11px;font-weight:600;
  color:var(--text-faint);border:1px solid transparent;text-transform:capitalize}
.mchip:hover{background:var(--surface-3);color:var(--text)}
.mchip.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}

/* ── 14. TOAST ───────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--surface-3);color:var(--text);border:1px solid var(--line-strong);
  padding:10px 16px;border-radius:var(--r-md);font-size:12.5px;font-weight:500;
  box-shadow:var(--sh-3);z-index:300;animation:toastin .18s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}}

/* ── 15. COMBOBOX ────────────────────────────────────────────────── */
.cbx-pop{position:absolute;z-index:400;max-height:260px;overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:4px}
.cbx-item{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--r-xs);
  font-size:12.5px;cursor:pointer;text-transform:capitalize}
.cbx-item:hover{background:var(--surface-3)}
.cbx-new{color:var(--accent);font-weight:600;text-transform:none}
.cbx-empty{padding:9px;font-size:11.5px;color:var(--text-faint)}

/* ── 16. BUSCA GLOBAL ────────────────────────────────────────────── */
.gs-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;display:none;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--sh-3);max-height:400px;overflow:auto;padding:4px;z-index:120}
.gs-pop.show{display:block}
.gs-sec{padding:7px 10px 3px;font-size:10px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint)}
.gs-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;
  border-radius:var(--r-xs);text-align:left;font-size:12.5px}
.gs-item:hover,.gs-item.on{background:var(--surface-3)}
.gs-item .txt{flex:1;min-width:0}
.gs-item .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item .sb{display:block;font-size:11px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item .vl{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px}
.gs-item mark{background:var(--accent-dim);color:var(--accent);border-radius:3px;padding:0 1px}
.gs-vazio{padding:14px;font-size:12.5px;color:var(--text-soft)}
.gs-mais{color:var(--accent);font-weight:600}

/* ── 17. MARCADOR DE PAGO ────────────────────────────────────────── */
.paycheck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;font-size:11px;color:transparent;transition:.13s}
.paycheck:hover{border-color:var(--accent);color:var(--accent-line)}
.paycheck.on{background:var(--accent);border-color:var(--accent);color:#04150E;font-weight:700}

/* ── 18. TELA DE LOGIN ───────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 500px at 50% -10%,rgba(52,211,153,.09),transparent 62%),var(--bg)}
.auth-card{width:100%;max-width:352px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh-3),var(--edge)}
.auth-logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  margin:0 auto 16px;font-size:20px;font-weight:800;color:#04150E;
  background:linear-gradient(145deg,var(--accent-hi),#1FA97A);
  box-shadow:0 4px 16px rgba(52,211,153,.3)}
.auth-card h1{font-size:19px;text-align:center;margin-bottom:5px}
.auth-card .sub{font-size:12.5px;color:var(--text-faint);text-align:center;margin:0 0 22px}
.auth-card .btn{width:100%;margin-top:6px;padding:9px}
.auth-switch{text-align:center;font-size:12.5px;color:var(--text-faint);margin-top:16px}
.auth-switch a{cursor:pointer;font-weight:600}
.msg{display:none;font-size:12px;padding:9px 11px;border-radius:var(--r-sm);margin-bottom:14px}
.msg.error{display:block;background:var(--red-dim);color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}

/* ── 19. IMPORTAÇÃO ──────────────────────────────────────────────── */
.drop{
  border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:38px 24px;text-align:center;background:var(--surface-2);
  transition:.15s var(--ease);cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-dim)}
.drop .big{font-size:28px;margin-bottom:10px;opacity:.7}
.drop b{display:block;font-size:14px;font-weight:600;margin-bottom:5px}

/* passos do fluxo de importação */
.steps{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-faint);font-weight:550}
.step .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;background:var(--surface-3);color:var(--text-faint)}
.step.on{color:var(--text)} .step.on .n{background:var(--accent);color:#04150E}
.step.done .n{background:var(--accent-dim);color:var(--accent)}
.steps .arw{color:var(--line-strong);font-size:11px}

/* linha marcada como duplicata na revisão */
tr.dup-linha>td{opacity:.48;text-decoration:line-through;text-decoration-color:var(--red)}
tr.dup-provavel>td{background:var(--amber-dim)}
tr.dup-provavel:hover>td{background:color-mix(in srgb,var(--amber) 18%,var(--surface))}

/* ── 19b. TELA DE GRÁFICOS ────────────────────────────────────────
   Rosca por grupo, ranking com variação, listas de corte/economia,
   mapa de calor categoria × mês e a tabela ano contra ano. */

/* rosca: a fatia é clicável e prende o ranking ao lado, então precisa
   parecer clicável e escurecer quando OUTRA fatia está presa */
.donut{display:block;width:100%;max-width:196px;margin:2px auto 14px;overflow:visible}
.donut .fatia{cursor:pointer;transition:opacity .14s var(--ease),filter .14s var(--ease)}
.donut .fatia:hover{filter:brightness(1.16)}
.donut .fatia.off{opacity:.24}
.donut .dn-v{font-size:19px;font-weight:650;fill:var(--text);font-family:var(--font)}
.donut .dn-l{font-size:9.5px;fill:var(--text-faint);font-family:var(--font)}

/* lista de grupos: nome e total em cima, % e variação embaixo — em 340px
   de cartão as cinco informações não cabem numa linha só */
.glist{display:flex;flex-direction:column;gap:1px}
.gline{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:1px 9px;
  align-items:center;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;
}
.gline:hover{background:var(--surface-2)}
.gline.on{background:var(--surface-3);box-shadow:inset 2px 0 0 var(--accent)}
.gline .cat-dot{grid-column:1;grid-row:1}
.gline .nm{grid-column:2;grid-row:1;font-size:12.5px;font-weight:550;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gline .vl{grid-column:3;grid-row:1;font-size:12.5px;font-weight:650;
  font-variant-numeric:tabular-nums;text-align:right}
.gline .pc{grid-column:2;grid-row:2;font-size:11px;color:var(--text-faint)}
.gline .dl{grid-column:3;grid-row:2;text-align:right}

/* ranking de categorias: a .topline da Visão geral com duas colunas a mais */
.topline.rk{cursor:pointer;border-bottom:1px solid var(--line-soft);padding:7px 4px}
.topline.rk:last-of-type{border-bottom:0}
.topline.rk:hover{background:var(--surface-2)}
.topline.rk .pc{min-width:34px;text-align:right;font-size:11px;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.topline.rk .dl{min-width:104px;text-align:right}

/* onde cortar / onde já economizou */
.ecoline{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:3px 9px;
  align-items:center;padding:8px 6px;border-bottom:1px solid var(--line-soft);cursor:pointer;
}
.ecoline:last-child{border-bottom:0}
.ecoline:hover{background:var(--surface-2)}
.ecoline .cat-dot{grid-column:1;grid-row:1}
.ecoline .nm{grid-column:2;grid-row:1;font-size:12.5px;font-weight:550;text-transform:capitalize;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecoline .vl{grid-column:3;grid-row:1;font-size:13px;font-weight:650;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ecoline .vl.up{color:var(--red)}
.ecoline .vl.down{color:var(--accent)}
.ecoline .vl .un{font-size:10px;font-weight:400;color:var(--text-faint);margin-left:2px}
.ecoline .hint{grid-column:2/4;grid-row:2}
/* etiqueta do grupo colada no nome da categoria */
.hg{margin-left:7px;font-size:10px;font-weight:500;color:var(--text-faint);text-transform:none}
.sub-h{margin:16px 0 4px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}

/* mapa de calor: 12 meses de uma categoria por linha, cada linha com a
   própria escala de cor */
table.hmap{border-collapse:separate;border-spacing:0;font-size:11.5px;min-width:940px}
table.hmap thead th{padding:6px 6px;font-size:10px;text-align:center}
table.hmap thead th:first-child{text-align:left;padding-left:8px}
table.hmap thead th.cur{color:var(--accent)}
table.hmap tbody th{
  position:sticky;left:0;z-index:5;background:var(--surface);
  min-width:186px;padding:4px 12px 4px 6px;text-align:left;white-space:nowrap;
  font-size:12px;font-weight:550;text-transform:capitalize;
  border-bottom:1px solid var(--line-soft);
}
table.hmap tbody td{padding:2px 3px;text-align:center;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.hmap td.hc{position:relative;min-width:58px;height:30px}
table.hmap td.hc>i{position:absolute;inset:2px;border-radius:5px}
table.hmap td.hc>span{position:relative;font-size:10.5px}
table.hmap td.hc.cur{box-shadow:inset 0 0 0 1.5px var(--accent-line)}
table.hmap td.tot{background:var(--surface-2);font-weight:650;padding-right:10px}
table.hmap td.med{color:var(--text-faint);padding-right:10px}
table.hmap tbody tr{cursor:pointer}
table.hmap tbody tr:hover th{color:var(--accent)}

/* ano contra ano */
table.cmp td{font-variant-numeric:tabular-nums}
table.cmp tfoot td{padding:11px 12px;font-size:12.5px;font-weight:650;
  background:var(--surface-2);border-top:1px solid var(--line)}
table.cmp tfoot td.num{text-align:right}

/* o empilhado é mais alto que o gráfico do ano: deixa a proporção mandar */
.ychart.tall{height:auto}

/* ── 20. RESPONSIVO (o desktop manda, mas o celular não pode quebrar) */
@media (max-width:900px){
  :root{--sidebar-w:0px}
  .app.show{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:236px;z-index:150;
    transform:translateX(-100%);transition:transform .2s var(--ease);
    background:var(--surface);box-shadow:var(--sh-3)}
  .sidebar.open{transform:none}
  .topbar{padding:0 14px;gap:9px}
  .topbar h2{display:none}
  .content{padding:16px 14px 48px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  table.hmap{min-width:700px}
  table.hmap tbody th{min-width:130px}
  .topline.rk .dl{min-width:78px}
}