:root{
  --bg:#071426; --bg2:#0a1c36; --card:#0d2342; --card2:#102a4f; --line:#1d3a66; --line2:#2a4f86;
  --txt:#e8f0fb; --mut:#8fa6c8; --acc:#38bdf8; --acc2:#f59e0b; --bad:#fb7185; --good:#34d399; --pur:#a78bfa;
  --r:12px; --grid:#1d3a6655; --cardg:#0a1d38; --topbg:#06111fcc; --glow:#0f2f5c; --onacc:var(--onacc); --hov:var(--hov); --tagtxt:#bae6fd;
}
:root[data-theme=light]{
  --bg:#eef3fa; --bg2:#e6edf8; --card:#ffffff; --card2:#f3f7fd; --line:#d3deef; --line2:#aebfdc; --txt:#0f1f3a; --mut:#5a6e8e;
  --acc:#0284c7; --acc2:#d97706; --bad:#dc2626; --good:#059669; --grid:#c9d6ea88; --cardg:#f6f9fe; --topbg:#ffffffdd; --glow:#d6e6fb; --onacc:#ffffff; --hov:#0f1f3a0d; --tagtxt:#075985;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,var(--glow) 0,var(--bg) 60%) fixed,var(--bg);color:var(--txt);
  font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
.muted{color:var(--mut)}
.loading{padding:80px;text-align:center;color:var(--mut)}

/* login */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px #0008}
.login-card h1{margin:0;font-size:24px}
.login-card p{margin:-8px 0 4px}
.login-logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#0ea5e9,#2563eb);display:grid;place-items:center;color:#fff}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.login-card input{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:15px;text-transform:none;letter-spacing:0}
.login-card input:focus{outline:2px solid var(--acc);border-color:transparent}
.login-card button{background:linear-gradient(135deg,#0ea5e9,#2563eb);border:0;border-radius:8px;padding:12px;font-weight:700;cursor:pointer}
.login-erro{background:#7f1d1d55;border:1px solid #b91c1c;color:#fecaca;padding:9px 12px;border-radius:8px;font-size:13px}

/* topo */
.top{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--topbg);backdrop-filter:blur(8px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#2563eb);display:grid;place-items:center}
.brand h1{margin:0;font-size:19px;letter-spacing:.02em;text-transform:uppercase;font-weight:800}
.brand small{display:block;color:var(--mut);font-size:12px}
.tabs{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:10px;border:1px solid var(--line)}
.tabs button{background:none;border:0;padding:8px 16px;border-radius:7px;cursor:pointer;color:var(--mut);font-weight:600}
.tabs button.on{background:var(--acc);color:var(--onacc)}
.user{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px}
.user a{color:var(--acc);text-decoration:none;font-weight:600}

/* filtros */
.filters{position:sticky;top:0;z-index:20;background:var(--topbg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 22px;display:flex;flex-direction:column;gap:10px}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700;min-width:62px}
.chip{background:var(--card);border:1px solid var(--line);color:var(--txt);padding:6px 11px;border-radius:7px;cursor:pointer;font-size:12.5px;font-weight:600;transition:.12s;white-space:nowrap}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.chip.dis{opacity:.35}
.chip small{opacity:.7;font-weight:500;margin-left:4px}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.dd{position:relative}
.dd>button{background:var(--card);border:1px solid var(--line);padding:7px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:12.5px;display:flex;gap:8px;align-items:center}
.dd>button:hover,.dd.open>button{border-color:var(--acc)}
.dd>button .n{background:var(--acc);color:var(--onacc);border-radius:10px;padding:0 7px;font-size:11px;font-weight:800}
.dd-panel{position:absolute;top:calc(100% + 6px);left:0;width:340px;max-width:92vw;background:var(--card2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 50px #000a;display:none;z-index:40}
.dd.open .dd-panel{display:block}
.dd-head{padding:8px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.dd-head input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.dd-actions{display:flex;gap:10px;font-size:12px}
.dd-actions a{color:var(--acc);cursor:pointer;font-weight:600}
.dd-list{max-height:280px;overflow:auto;padding:4px}
.dd-item{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12.5px}
.dd-item:hover{background:var(--hov)}
.dd-item input{accent-color:var(--acc)}
.dd-item .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-item .c{color:var(--mut);font-variant-numeric:tabular-nums;font-size:12px}
.dd-item.zero .t,.dd-item.zero .c{opacity:.4}
.fin{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px}
.fin:focus{outline:2px solid var(--acc);border-color:transparent}
input[type=date].fin{color-scheme:dark}
.search{min-width:220px;flex:1;max-width:340px}
.btn{background:var(--card);border:1px solid var(--line);padding:7px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:12.5px}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.active{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{background:#38bdf822;border:1px solid #38bdf866;color:var(--tagtxt);border-radius:999px;padding:3px 6px 3px 10px;font-size:12px;display:flex;gap:6px;align-items:center}
.tag b{font-weight:700;color:var(--txt)}
.tag button{background:#0003;border:0;border-radius:50%;width:18px;height:18px;line-height:16px;cursor:pointer;color:var(--txt);padding:0}
.count{margin-left:auto;color:var(--mut);font-size:12.5px}
.count b{color:var(--txt)}

/* conteúdo */
main{padding:18px 22px 40px;display:flex;flex-direction:column;gap:16px;max-width:1700px;margin:0 auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px}
.kpi{cursor:pointer;transition:.15s;position:relative;background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;align-items:center}
.kpi .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none}
.kpi>div:last-child{min-width:0}.kpi .v{font-size:clamp(17px,1.45vw,21px);white-space:nowrap;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .l{font-size:12px;color:var(--mut);font-weight:600}
.kpi .s{font-size:11.5px;color:var(--mut);margin-top:2px}
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ins{background:#f59e0b14;border:1px solid #f59e0b44;border-radius:10px;padding:10px 13px;font-size:13px;display:flex;gap:10px}
.ins svg{flex:none;color:var(--acc2);margin-top:2px}
.ins b{color:var(--txt)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:1100px){.g2,.g3,.g21{grid-template-columns:minmax(0,1fr)}}
.card{background:linear-gradient(170deg,var(--card),var(--cardg));border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.card h3{margin:0 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--txt)}
.card .sub{font-size:12px;color:var(--mut);margin-bottom:8px}
.cv{position:relative;height:300px}
.cv.tall{height:360px}
.cv.sm{height:240px}
.hint{font-size:11.5px;color:var(--mut)}
.legend{display:flex;flex-direction:column;gap:5px;font-size:12.5px;max-height:280px;overflow:auto}
.legend .li{display:flex;gap:8px;align-items:center;cursor:pointer;padding:3px 4px;border-radius:5px}
.legend .li:hover{background:var(--hov)}
.legend .li.off{opacity:.35}
.legend i{width:11px;height:11px;border-radius:3px;flex:none}
.legend .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .p{color:var(--mut);font-variant-numeric:tabular-nums}
.donut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:center}
@media(max-width:700px){.donut{grid-template-columns:1fr}}

table.t{width:100%;border-collapse:collapse;font-size:12.5px}
.t th{position:sticky;top:0;background:var(--card2);text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);cursor:pointer;white-space:nowrap;user-select:none;border-bottom:1px solid var(--line)}
.t th.r,.t td.r{text-align:right}
.t td{padding:7px 10px;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums}
.t tr:hover td{background:var(--hov)}
.t .pos{color:var(--bad)}.t .neg{color:var(--good)}
.tscroll{overflow:auto;max-height:540px;border-radius:8px}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--acc)}
.badge{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:700;background:#f59e0b22;color:#fcd34d;border:1px solid #f59e0b55}
.badge.b2{background:#38bdf822;color:#7dd3fc;border-color:#38bdf855}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding-top:10px;font-size:12.5px;color:var(--mut)}

/* heatmap */
.heat td,.heat th{padding:6px 8px;text-align:center;font-size:12px;border:1px solid var(--bg)}
.heat th{background:none;cursor:default;position:static}
.heat td.rowh{text-align:left;background:var(--card2);white-space:nowrap;cursor:pointer}
.heat td.c{cursor:pointer;font-variant-numeric:tabular-nums;border-radius:4px}

/* comparativo */
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
@media(max-width:900px){.cmp-head{grid-template-columns:1fr}}
.pbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg2)}
.pbox.A{border-color:#38bdf8aa}.pbox.B{border-color:#f59e0baa}
.pbox h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.pbox.A h4{color:var(--acc)}.pbox.B h4{color:var(--acc2)}
.vs{align-self:center;font-weight:800;color:var(--mut)}
.pbox .chips{display:flex;flex-wrap:wrap;gap:5px}
.pbox .chip{padding:4px 8px;font-size:12px}
.pbox.A .chip.on{background:var(--acc)}
.pbox.B .chip.on{background:var(--acc2);border-color:var(--acc2)}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.seg button{background:none;border:0;padding:6px 12px;border-radius:6px;cursor:pointer;color:var(--mut);font-weight:600;font-size:12.5px}
.seg button.on{background:var(--line2);color:var(--txt)}
.delta{font-weight:700}
.up{color:var(--bad)}.down{color:var(--good)}.flat{color:var(--mut)}
.empty{padding:40px;text-align:center;color:var(--mut)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}

.filters.collapsed .frow:not(.keep){display:none}
@media(max-height:760px){.filters{position:static}}

.kpi:hover{border-color:var(--acc);transform:translateY(-2px)}
.kpi .more{position:absolute;top:8px;right:11px;font-size:10.5px;color:var(--mut);font-weight:600;opacity:0;transition:.15s}
.kpi:hover .more{opacity:1;color:var(--acc)}
.kpi:focus-visible{outline:2px solid var(--acc)}
.iconbtn{background:var(--card);border:1px solid var(--line);border-radius:9px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--txt)}
.iconbtn:hover{border-color:var(--acc)}
.modal-ov{position:fixed;inset:0;background:#020a16b8;z-index:100;display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal{width:100%;max-width:1020px;max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 90px #0009}
.modal-h{position:sticky;top:0;background:var(--card);z-index:2;display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-h h2{margin:0;font-size:18px;flex:1}
.modal-h .x{background:var(--bg2);border:1px solid var(--line);border-radius:8px;width:32px;height:32px;cursor:pointer;color:var(--txt);font-size:18px;line-height:1}
.modal-b{padding:16px 20px 22px;display:flex;flex-direction:column;gap:16px}
.modal-b h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ms{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ms b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.ms span{font-size:11.5px;color:var(--mut)}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:800px){.mgrid{grid-template-columns:1fr}}
a.lk{color:var(--acc);text-decoration:none;font-weight:600}
a.lk:hover{text-decoration:underline}