/* Fluxo de Caixa EcomSmart — painel 1920x1080 (spec 7.1), layout do protótipo
   com a paleta e a fonte da identidade v2.4 (Figtree, #0A5BF0, #0B1033). */

/* Figtree self-hosted: a identidade exige Figtree e a spec (7.3) proíbe
   Google Fonts em produção. Variável 300-900, subset latin, ~20 kB. */
@font-face {
  font-family:"Figtree";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("/static/fontes/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --b900:#082E75; --b800:#073A9A; --b700:#0849C4; --b600:#0A5BF0; --b500:#2F70F5;
  --b400:#5A8CFA; --b300:#8DB0FF; --b200:#B9CEFF; --b100:#DCE7FF; --b50:#EEF4FF;
  --ink:#0B1033; --ink2:#4A5670; --ink3:#6B7790; --line:#E1E6F0;
  --bg:#FFFFFF; --panel:#F6F8FC; --chao:#EEF1F7;
  --warn:#D97706; --warn-bg:#FEF6E7; --bad:#DC2626; --bad-bg:#FDECEA; --ok-bg:#EEF4FF;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --b900:#8DB0FF; --b800:#8DB0FF; --b700:#5A8CFA; --b600:#5A8CFA; --b500:#5A8CFA;
  --b400:#5A8CFA; --b300:#3A6AD0; --b200:#2A4E9E; --b100:#1B346E; --b50:#132446;
  --ink:#EEF2FA; --ink2:#B7C1D9; --ink3:#8A97B3; --line:#1E2A44;
  --bg:#101729; --panel:#182238; --chao:#0A0F1F;
  --warn:#F0A62E; --warn-bg:#2C2312; --bad:#F26B6B; --bad-bg:#2E1717; --ok-bg:#132446;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:var(--chao);height:100%}
body{font-family:var(--font);color:var(--ink);font-size:13px;line-height:1.35;-webkit-font-smoothing:antialiased}

/* ---------------- palco fixo escalado (spec 7.1) ---------------- */
.palco-area{position:fixed;inset:0;overflow:hidden;display:grid;place-items:center}
.stage{
  width:1920px;height:1080px;background:var(--bg);
  display:grid;grid-template-columns:88px 1fr;overflow:hidden;
  transform-origin:center center;transform:scale(var(--s,1));
}

/* ---------------- rail ---------------- */
.rail{background:#0B1033;color:#fff;display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:6px;height:1080px}
.rail-logo{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;margin-bottom:22px}
.rail-logo svg{width:20px;height:22px;color:#0A5BF0}
.nav{width:66px;padding:11px 0;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#8DB0FF;cursor:pointer;font-size:10.5px;font-weight:700;border:0;background:transparent;font-family:inherit;line-height:1.25;text-align:center}
.nav svg{width:22px;height:22px}
.nav.on{background:rgba(255,255,255,.15);color:#fff}
.nav:hover{background:rgba(255,255,255,.09)}
.rail-foot{margin-top:auto;color:#8DB0FF;font-size:10px;text-align:center;line-height:1.5}

/* ---------------- grade principal ---------------- */
.main{height:1080px;padding:16px 20px;overflow:hidden;min-width:0;position:relative}
.view{height:100%;display:grid;gap:12px;min-height:0}
#view-mes{grid-template-rows:auto auto minmax(0,335px) minmax(0,1fr)}
#view-geral{grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr)}
.zone{display:grid;gap:12px;min-height:0}
.zone-mes-1{grid-template-columns:1.7fr 1fr 1fr}
.zone-mes-2{grid-template-columns:1.85fr 1fr 1fr}
.zone-geral-1{grid-template-columns:1.75fr 1fr}
.zone-geral-2{grid-template-columns:1.75fr 1fr}

.estado-carga{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink3);font-size:15px;background:var(--bg);z-index:5}
.estado-erro{color:var(--bad)}

/* ---------------- topo ---------------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top h1{font-size:23px;font-weight:700;letter-spacing:-.6px}
.top .sub{color:var(--ink2);font-size:12.5px;margin-top:2px}
.top-dir{display:flex;align-items:center}
.months{display:flex;gap:4px;background:var(--panel);padding:5px;border-radius:12px;border:1px solid var(--line)}
.months button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink2);padding:8px 13px;border-radius:9px;cursor:pointer;position:relative}
.months button.has::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--b400)}
.months button.on{background:var(--b600);color:#fff}
.months button.on::after{background:#fff}
.months button.now{outline:2px dashed var(--b200);outline-offset:-2px}
.today-chip{display:inline-flex;align-items:center;gap:8px;background:var(--b50);color:var(--b800);border-radius:999px;padding:8px 13px;font-weight:700;font-size:12.5px;margin-left:12px;white-space:nowrap}
.today-chip i{width:8px;height:8px;border-radius:50%;background:var(--b600)}

/* ---------------- cards ---------------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.card h3{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex:none}
.card h3 small{font-weight:600;color:var(--ink3);font-size:11.5px;white-space:nowrap}
.scroll{overflow-y:auto;min-height:0;flex:1;padding-right:4px}
.scroll::-webkit-scrollbar{width:7px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.scroll::-webkit-scrollbar-track{background:transparent}
.grafico-area{flex:1;min-height:0}
.bloco-titulo{font-weight:700;font-size:13px;margin-bottom:9px}

/* ---------------- KPIs ---------------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.kpi .l{font-size:12px;color:var(--ink2);font-weight:600}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-1px;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .d{font-size:11.5px;color:var(--ink3);margin-top:3px}
.kpi.hero{background:
   radial-gradient(ellipse 70% 90% at 85% 115%,rgba(90,140,250,.55),transparent 60%),
   radial-gradient(ellipse 60% 70% at 0% -10%,rgba(141,176,255,.22),transparent 55%),
   linear-gradient(135deg,#070B1E 0%,#0B1033 38%,#0A3FB0 76%,#0A5BF0 100%);
  color:#fff;border:0}
.kpi.hero .l,.kpi.hero .d{color:#B9CEFF}
.kpi.hero .v{color:#fff}
.kpi.pend{border-color:var(--warn);background:var(--warn-bg)}
.kpi.pend .v{color:var(--warn)}
.kpi .v.rec{color:var(--b600)}
.kpi .v.des{color:var(--b800)}

/* ---------------- fixas ---------------- */
.fx{display:flex;flex-direction:column;gap:6px}
.fx .row{display:grid;grid-template-columns:38px 1fr 92px 108px;align-items:center;gap:9px;padding:7px 9px;border-radius:11px;background:var(--panel)}
.fx .day{width:38px;height:38px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--b800);line-height:1}
.fx .day small{font-size:8px;font-weight:700;color:var(--ink3)}
.fx .n{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx .t{font-size:11px;color:var(--ink3)}
.fx .val{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;justify-self:end;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{background:var(--ok-bg);color:var(--b800)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.mute{background:var(--chao);color:var(--ink3)}

/* ---------------- barras ---------------- */
.bars .r{display:grid;grid-template-columns:130px 1fr 96px;align-items:center;gap:10px;margin-bottom:8px;font-size:12.5px}
.bars .r .n{color:var(--ink2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .r .b{height:12px;background:var(--b50);border-radius:6px;overflow:hidden}
.bars .r .b i{display:block;height:100%;border-radius:6px;background:var(--b600)}
.bars .r .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- donut e splits ---------------- */
.donut{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center}
.donut ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.donut li{display:flex;justify-content:space-between;gap:8px}
.donut li span:first-child{color:var(--ink2);font-weight:600}
.donut li i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px}
.donut li b{font-variant-numeric:tabular-nums}
.split{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.split .s .h{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);font-weight:600;margin-bottom:4px}
.split .s .bar{display:flex;height:11px;border-radius:6px;overflow:hidden;background:var(--b50)}
.split .s .bar i{display:block;height:100%}
.sep{height:1px;background:var(--line);margin:12px 0}

/* ---------------- insights ---------------- */
.in{border-radius:13px;padding:11px 13px;border:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.in .ic{width:30px;height:30px;border-radius:9px;background:var(--b50);display:grid;place-items:center;flex:none;color:var(--b700)}
.in .ic svg{width:17px;height:17px}
.in .tt{font-weight:700;font-size:12.5px}
.in .tx{font-size:11.8px;color:var(--ink2);margin-top:2px}
.in.atencao{border-color:var(--warn);background:var(--warn-bg)}
.in.atencao .ic{background:var(--warn-bg);color:var(--warn)}
.in.critica{border-color:var(--bad);background:var(--bad-bg)}
.in.critica .ic{background:var(--bad-bg);color:var(--bad)}

/* ---------------- tabela ---------------- */
.tbl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex:none}
.tbl-head h3{margin:0}
.tbl-acoes{display:flex;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:11.5px;color:var(--ink2);padding:6px 11px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--bg);color:var(--b800);box-shadow:0 1px 2px rgba(11,16,51,.12)}
.search{border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-family:inherit;font-size:12.5px;width:200px;background:var(--panel);color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{position:sticky;top:0;background:var(--bg);z-index:2;text-align:left;color:var(--ink3);font-weight:700;font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:7px 10px;border-bottom:1px solid var(--line)}
td.v,th.v{text-align:right}
td.v{font-weight:700;font-variant-numeric:tabular-nums}
td .cat{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--b50);color:var(--b800);font-weight:600;font-size:11.5px}
td .cat.rec{background:var(--ok-bg);color:var(--b700)}
tr.pend td{background:var(--warn-bg)}
.dim{color:var(--ink3)}
.empty{padding:22px;text-align:center;color:var(--ink2);border:1px dashed var(--b200);border-radius:12px;background:var(--panel);font-size:12.5px}
.empty b{display:block;color:var(--b800);font-size:14px;margin-bottom:4px}
.legend{display:flex;gap:13px;font-size:11.5px;color:var(--ink2);font-weight:600;flex-wrap:wrap;flex:none;margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:5px;vertical-align:-1px}
.legend .c-rec{background:var(--b400)} .legend .c-des{background:var(--b900)}
.legend .c-warn{background:var(--warn)} .legend .c-bad{background:var(--bad)}
.legend .c-ok{background:var(--b600)} .legend .c-fut{background:var(--b100)}
.legend .c-mute{background:var(--chao)} .legend .c-acc{background:var(--b200);border-radius:50%}
.legend .c-prev{background:transparent;border:1px dashed var(--b200)}
.hint{font-size:11px;color:var(--ink3);margin-top:6px;flex:none}

/* ---------------- heatmap e grid anual ---------------- */
.heat{border-collapse:separate;border-spacing:3px;font-size:11.5px;width:100%}
.heat th{position:sticky;top:0;background:var(--bg);border:0;padding:2px 4px;font-size:10.5px;text-align:center}
.heat td{border:0;padding:0;height:30px;border-radius:6px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:11px}
.heat td.n{text-align:left;padding-left:6px;color:var(--ink2);font-weight:600;background:transparent;font-size:11.5px;white-space:nowrap}
.heat td.tot{background:var(--panel);color:var(--ink)}
.year-fx{display:grid;grid-template-columns:170px repeat(12,1fr);gap:4px;font-size:11.5px;align-items:center}
.year-fx .h{color:var(--ink3);font-weight:700;font-size:10.5px;text-align:center}
.year-fx .h.now{color:var(--b600)}
.year-fx .n{color:var(--ink2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.year-fx .c{height:26px;border-radius:6px;background:var(--chao)}
.year-fx .c.p{background:var(--b600)}
.year-fx .c.o{background:var(--bad)}
.year-fx .c.w{background:var(--warn)}
.year-fx .c.f{background:var(--b100)}

/* ================= LOGIN ================= */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
@media (max-width:900px){.login{grid-template-columns:1fr}.login-lado{display:none}}
.login-lado{
  background:
    radial-gradient(ellipse 70% 90% at 85% 115%,rgba(90,140,250,.55),transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% -10%,rgba(141,176,255,.22),transparent 55%),
    linear-gradient(135deg,#070B1E 0%,#0B1033 38%,#0A3FB0 76%,#0A5BF0 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:64px 48px;
}
.login-simbolo{width:32px;height:35px;color:#fff;margin-bottom:24px}
.login-frase{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.login-frase em{font-style:normal;color:#8DB0FF}
.login-apoio{font-size:16px;color:#B9CEFF;max-width:34ch}
.login-form-area{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--bg)}
.login-form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px}
.login-form h2{font-size:28px;font-weight:600;letter-spacing:-.02em}
.login-legenda{font-size:14px;color:var(--ink3);margin-top:-8px}
.campo{display:flex;flex-direction:column;gap:4px}
.rotulo{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.input{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.input:focus-visible{outline:2px solid var(--b600);outline-offset:1px}
.btn-primario{font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;border-radius:999px;padding:11px 20px;background:var(--b600);color:#fff;border:1px solid var(--b600)}
.btn-primario:hover{background:var(--b700);border-color:var(--b700)}
.btn-largo{width:100%;margin-top:8px}
.login-erro{font-size:14px;color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad);border-radius:8px;padding:8px 12px}