/* Finanças — visual estilo "Soyuz" (claro), reaproveitado do dash de campanhas */
:root {
  --primary:#506fe4; --primary-2:#969efa; --primary-hover:#3a5de1; --primary-weak:rgba(80,111,228,.10);
  --secondary:#96a3b6; --success:#43d187; --success-weak:rgba(67,209,135,.12);
  --danger:#f9616d; --danger-weak:rgba(249,97,109,.12); --warning:#f7bb4d; --info:#3d9bfb;
  --bg:#f2f3f7; --bg-2:#eaecf3; --card:#fff; --card-2:#f7f8fb;
  --line:rgba(20,29,70,.08); --line-2:rgba(20,29,70,.05); --text:#141d46; --muted:#8a98ac;
  --axis:rgba(20,29,70,.18); --split:rgba(20,29,70,.06);
  --shadow:0 6px 22px rgba(20,29,70,.07); --shadow-hover:0 12px 30px rgba(20,29,70,.12);
  --radius:10px; --radius-sm:8px; --topbar-h:64px;
  /* cores por categoria */
  --c-alimentacao:#f9616d; --c-transporte:#3d9bfb; --c-assinatura:#43d187; --c-saude:#06b6d4;
  --c-compras:#f7bb4d; --c-beleza:#ec4899; --c-servicos:#f97316; --c-entretenimento:#a855f7;
  --c-outros:#96a3b6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font-family:"Mukta Vaani",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--primary-weak)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--secondary);background-clip:padding-box}

/* ---------- GATE ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:100}
.gate-box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:36px 40px;width:340px;box-shadow:var(--shadow);text-align:center}
.gate-box h1{font-size:20px;font-weight:600;margin:16px 0 4px}
.gate-box input{width:100%;margin:14px 0;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-size:15px}
.primary-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:11px 18px;font-weight:600;font-size:14px;width:100%;transition:.15s}
.primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px var(--primary-weak)}
.brand-mark{display:flex;align-items:center;gap:8px;justify-content:center}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}
.brand-name{font-weight:700;letter-spacing:2px}
.brand-suffix{color:var(--muted);font-weight:500}
.error{color:var(--danger);font-size:13px;margin:6px 0 0}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--topbar-h);padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.topbar-left{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:transparent;border:none;font-size:20px;color:var(--text)}
.tabs{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:4px}
.tab{background:transparent;border:none;color:var(--muted);border-radius:6px;
  padding:8px 18px;font-size:13px;font-weight:600;transition:.15s}
.tab.active{background:var(--primary);color:#fff;box-shadow:0 3px 10px var(--primary-weak)}
.tab:hover:not(.active){color:var(--text);background:var(--primary-weak)}
.topbar-right{display:flex;align-items:center;gap:10px}
.period-badge{font-size:12px;color:var(--muted);font-weight:600;background:var(--card-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.ghost-btn{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 11px;font-size:15px;line-height:1}
.ghost-btn:hover{border-color:var(--primary)}

/* ---------- LAYOUT ---------- */
.layout{display:flex;align-items:flex-start}
.sidebar{flex:0 0 248px;width:248px;position:sticky;top:var(--topbar-h);
  max-height:calc(100vh - var(--topbar-h));overflow-y:auto;background:var(--card);
  border-right:1px solid var(--line)}
.sidebar-inner{display:flex;flex-direction:column;gap:24px;padding:20px 18px 30px}
.sidebar-head{display:flex;align-items:center;justify-content:space-between}
.sidebar-title{font-weight:700;font-size:15px}
.sidebar-close{display:none;background:transparent;border:none;font-size:16px;color:var(--muted)}
.filter-group{display:flex;flex-direction:column;gap:10px}
.filter-group label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-row button{background:var(--card-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius-sm);padding:8px 14px;font-size:13px;font-weight:600;transition:.15s}
.filter-row button:hover{border-color:var(--primary);transform:translateY(-1px)}
.filter-row button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 10px var(--primary-weak)}
.filter-row.dates select{flex:1;background:var(--card-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius-sm);padding:8px;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--card-2);border:1px solid var(--line);color:var(--text);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:600;transition:.15s;display:flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--primary)}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip.off{opacity:.4}
.sidebar-backdrop{display:none}
.content{flex:1 1 auto;min-width:0}

/* ---------- KPIs ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:18px 24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.kpi .value{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:700}
.kpi .delta{font-size:12px;font-weight:700;margin-top:6px;display:inline-flex;gap:3px}
.kpi .delta.good{color:var(--success)}.kpi .delta.bad{color:var(--danger)}.kpi .delta.neu{color:var(--muted)}
.kpi .spark{position:absolute;right:10px;bottom:8px;width:84px;height:34px;opacity:.85}

/* ---------- CARDS / CHARTS ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin:18px 24px;padding:18px 20px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card h3{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.card h3::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--primary);flex:none}
.chart{width:100%;height:300px}
.chart.tall{height:380px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 24px}
.grid-2 .card{margin:0}

/* ---------- KPI STRIP ---------- */
.kstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 24px}
.kstat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow)}
.kstat .kv{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kstat .kl{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:5px;font-weight:700}
.delta{font-weight:700;font-variant-numeric:tabular-nums;display:inline-flex;gap:3px}
.delta.good{color:var(--success)}.delta.bad{color:var(--danger)}.delta.neu{color:var(--muted)}

/* ---------- CATLIST (acordeão) ---------- */
.catlist{margin-top:4px}
.crow{display:grid;grid-template-columns:18px minmax(140px,1fr) 84px 142px 130px 44px 56px;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line-2);border-radius:8px;transition:background .12s}
.crow.clickable{cursor:pointer}
.crow.clickable:hover{background:var(--card-2)}
.crow.focused{background:var(--primary-weak)}
.crow.lvl1{font-size:13px}.crow.lvl2{font-size:12.5px;color:var(--muted)}
.caret{width:18px;text-align:center;color:var(--muted);font-size:11px}
.cdot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.cname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:8px}
.crow.lvl0 .cname{font-weight:700;font-size:14.5px}
.cbarwrap{height:7px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.cbar{display:block;height:100%;border-radius:4px}
.cspark{height:30px}.cspark svg.sbars{width:100%;height:30px;display:block}
.cval{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cval i{font-style:normal;color:var(--muted);font-weight:500;font-size:11px}
.cpct{text-align:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.cdelta{text-align:right;font-size:12.5px}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--primary-weak);color:var(--primary);margin-left:6px;vertical-align:middle}

/* ---------- PREMISSAS / BLOCOS (saldo) ---------- */
.premissas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prem{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.prem input{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-2);
  color:var(--text);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.prem input:focus{outline:none;border-color:var(--primary)}
.brow{display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr 110px 44px;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line-2)}
.bname{font-weight:600}
.bbarwrap{height:9px;background:var(--bg-2);border-radius:5px;overflow:hidden}
.bbar{display:block;height:100%;border-radius:5px;background:var(--primary)}
.bval{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bpct{text-align:right;color:var(--muted);font-weight:600}
.kstat .kv.delta.good{color:var(--success)}.kstat .kv.delta.bad{color:var(--danger)}
.it-nome{width:100%;min-width:160px;border:1px solid transparent;background:transparent;color:var(--text);
  font-size:13.5px;font-weight:600;padding:6px 8px;border-radius:6px}
.it-nome:hover{border-color:var(--line)}
.it-nome:focus{outline:none;border-color:var(--primary);background:var(--card-2)}
.it-val{width:110px;text-align:right;border:1px solid var(--line);background:var(--card-2);color:var(--text);
  font-size:13.5px;font-weight:700;padding:6px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.it-val:focus{outline:none;border-color:var(--primary)}
.it-rm{background:transparent;border:none;color:var(--muted);font-size:13px;padding:4px 8px;border-radius:6px}
.it-rm:hover{background:var(--danger-weak);color:var(--danger)}
.gtag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;background:var(--primary-weak);color:var(--primary)}
.quando{display:inline-flex;align-items:center;gap:6px}
.it-de,.it-ate{border:1px solid var(--line);background:var(--card-2);color:var(--text);font-size:12.5px;
  padding:5px 7px;border-radius:6px;font-family:inherit}
.it-de:focus,.it-ate:focus{outline:none;border-color:var(--primary)}
td.good,.num.good{color:var(--success)}
td.bad,.num.bad{color:var(--danger)}
.it-cut{width:16px;height:16px;cursor:pointer;accent-color:var(--danger)}
tr.cut .it-nome{text-decoration:line-through;opacity:.5}
tr.cut .it-val,tr.cut .gtag,tr.cut .quando{opacity:.5}
.yld{width:56px;border:1px solid var(--line);background:var(--card-2);color:var(--text);border-radius:6px;
  padding:3px 6px;font-family:inherit;text-align:right;font-weight:700}
.yld:focus{outline:none;border-color:var(--primary)}

/* ---------- TABELAS ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{position:sticky;top:0;background:var(--card-2);text-align:left;font-weight:700;color:var(--muted);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--card-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:700;color:#fff}
.linkrow{cursor:pointer}
.linkrow:hover td:first-child{color:var(--primary)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--primary-weak);color:var(--primary)}

/* ---------- MATRIZ ---------- */
table.matriz{font-size:12.5px;min-width:900px}
table.matriz th,table.matriz td{padding:8px 10px;white-space:nowrap}
table.matriz td.lbl{text-align:left;font-weight:600;position:sticky;left:0;background:var(--card);z-index:1}
table.matriz td.num{text-align:right}
table.matriz tr.blk td{background:var(--text);color:#fff;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.04em;cursor:pointer}
table.matriz td.tot{font-weight:800;border-left:2px solid var(--line);background:var(--card-2)}
table.matriz tr.sumrow td{font-weight:800;border-top:2px solid var(--text);background:var(--card-2)}

/* ---------- CRUMBS ---------- */
.crumbs{margin:18px 24px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;flex-wrap:wrap}
.crumbs a{color:var(--primary);cursor:pointer}
.crumbs span.sep{color:var(--muted)}
.crumbs span.cur{color:var(--text)}

/* ocultar valores */
body.cost-hidden .value,body.cost-hidden td.num,body.cost-hidden .kpi .value{filter:blur(7px)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}
  .kstrip{grid-template-columns:repeat(2,1fr)}
  .crow{grid-template-columns:18px 1fr 110px 50px;gap:10px}
  .cbarwrap,.cspark{display:none}}
@media (max-width:900px){
  .tabs{order:3;width:100%;justify-content:center}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .menu-btn{display:block}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;transform:translateX(-100%);
    transition:transform .25s;z-index:60;border-right:1px solid var(--line)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-hover)}
  .sidebar-close{display:block}
  .sidebar.open + .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:55}
  .kpi-grid,.card,.grid-2,.crumbs{margin-left:14px;margin-right:14px}
}