/* Orbix - painel. Visual do protótipo (prototipo/orbix.html), sem nada de terceiros: fontes servidas pelo
   próprio servidor, nenhum estilo em linha (a CSP do Caddy bloqueia style="..."; larguras dinâmicas são
   aplicadas pelo JavaScript via CSSOM). */

@font-face{font-family:"Orbix Sans";src:url("fonts/orbix-sans-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:500 800;font-stretch:100% 125%;font-style:normal;font-display:swap}

:root{
  color-scheme: light;
  --bg:#F4F2F7; --surface:#FFFFFF; --surface-2:#F9F7FB; --surface-3:#EEEAF2;
  --line:#E4DEEA; --line-strong:#CFC6D9;
  --ink:#221A2E; --ink-2:#564E64; --muted:#6F6780;
  --accent:#7D2B67; --accent-ink:#7D2B67; --accent-soft:#F4E6F0; --on-accent:#FFFFFF;
  --focus:#7D2B67;
  --slab:#5E1F4F; --slab-2:#6A2A5B; --slab-ink:#FFFFFF; --slab-ink-2:#EBD3E3;
  --slab-good:#A8EBB9; --slab-crit:#FFC2BA; --slab-warn:#FFD98A;
  --sw-off:#9A5E8B; --sw-on:#F6CFEA; --sw-knob-on:#5E1F4F;
  --seg-cost:#8A4A7B; --seg-cost-ink:#FFFFFF; --seg-fixed:#C08AB3; --seg-fixed-ink:#2A0E24; --seg-res:#F6CFEA; --seg-res-ink:#3A0F30;
  --viz-1:#C3A6BD; --viz-2:#A0638F; --viz-3:#7D2B67;
  --grid:#ECE8F0; --axis:#CFC6D9; --axis-text:#6F6780; --band:#F4F0F7;
  --good:#11692B; --good-soft:#E2F1E5; --good-mark:#2E8B47;
  --warn:#8A5300; --warn-soft:#FBEFD6; --warn-mark:#D99A1E;
  --crit:#B42828; --crit-soft:#F9E2E2; --crit-mark:#C93A3A;
  --info-mark:#8E86A0;
  --tip-bg:#221A2E; --tip-ink:#FFFFFF; --tip-ink-2:#CFC6D9;
  --shadow-c:rgba(34,26,46,0.14); --scrim:rgba(18,14,22,0.45);
  --font:"Orbix Sans","IBM Plex Sans","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-display:"Archivo","Arial Black","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120E16; --surface:#1B1621; --surface-2:#211B28; --surface-3:#2A2232;
    --line:#2E2637; --line-strong:#40364B;
    --ink:#EFEAF3; --ink-2:#C2B9CD; --muted:#968CA3;
    --accent:#E08AC6; --accent-ink:#EBA2D4; --accent-soft:#3A2234; --on-accent:#2A1024;
    --focus:#EBA2D4;
    --slab:#3F1736; --slab-2:#4A1D40; --slab-ink:#F8EEF5; --slab-ink-2:#D9B9CF;
    --slab-good:#8FDDA4; --slab-crit:#FFB0A8; --slab-warn:#F2C46B;
    --sw-off:#7A4A6E; --sw-on:#EBA2D4; --sw-knob-on:#3F1736;
    --seg-cost:#6E3A62; --seg-cost-ink:#F8EEF5; --seg-fixed:#B07AA2; --seg-fixed-ink:#1E0A1A; --seg-res:#EBA2D4; --seg-res-ink:#2A1024;
    --viz-1:#5B4566; --viz-2:#9A5A88; --viz-3:#D47DBB;
    --grid:#2A2232; --axis:#40364B; --axis-text:#968CA3; --band:#241D2B;
    --good:#5FD17D; --good-soft:#15301E; --good-mark:#3FB861;
    --warn:#F2B84B; --warn-soft:#33270E; --warn-mark:#E0A33A;
    --crit:#FF8F86; --crit-soft:#3A1818; --crit-mark:#E8615A;
    --info-mark:#7D7390;
    --tip-bg:#EFEAF3; --tip-ink:#1B1621; --tip-ink-2:#564E64;
    --shadow-c:rgba(0,0,0,0.5); --scrim:rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#120E16; --surface:#1B1621; --surface-2:#211B28; --surface-3:#2A2232;
  --line:#2E2637; --line-strong:#40364B;
  --ink:#EFEAF3; --ink-2:#C2B9CD; --muted:#968CA3;
  --accent:#E08AC6; --accent-ink:#EBA2D4; --accent-soft:#3A2234; --on-accent:#2A1024;
  --focus:#EBA2D4;
  --slab:#3F1736; --slab-2:#4A1D40; --slab-ink:#F8EEF5; --slab-ink-2:#D9B9CF;
  --slab-good:#8FDDA4; --slab-crit:#FFB0A8; --slab-warn:#F2C46B;
  --sw-off:#7A4A6E; --sw-on:#EBA2D4; --sw-knob-on:#3F1736;
  --seg-cost:#6E3A62; --seg-cost-ink:#F8EEF5; --seg-fixed:#B07AA2; --seg-fixed-ink:#1E0A1A; --seg-res:#EBA2D4; --seg-res-ink:#2A1024;
  --viz-1:#5B4566; --viz-2:#9A5A88; --viz-3:#D47DBB;
  --grid:#2A2232; --axis:#40364B; --axis-text:#968CA3; --band:#241D2B;
  --good:#5FD17D; --good-soft:#15301E; --good-mark:#3FB861;
  --warn:#F2B84B; --warn-soft:#33270E; --warn-mark:#E0A33A;
  --crit:#FF8F86; --crit-soft:#3A1818; --crit-mark:#E8615A;
  --info-mark:#7D7390;
  --tip-bg:#EFEAF3; --tip-ink:#1B1621; --tip-ink-2:#564E64;
  --shadow-c:rgba(0,0,0,0.5); --scrim:rgba(0,0,0,0.6);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.code,.mono-badge{font-family:var(--font-display)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.slab :focus-visible{outline-color:var(--slab-ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- utilidades (substituem estilos em linha) ---------- */
.stack{display:grid;gap:20px;min-width:0}
.stack-sm{display:grid;gap:12px;min-width:0}
.stack-xs{display:grid;gap:6px;min-width:0}
.hflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.hflex.between{justify-content:space-between}
.hflex.end{justify-content:flex-end}
.mt-0{margin-top:0}.mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}
.mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}
.muted{color:var(--muted)}.ink-2{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.strong{font-weight:650}
.small{font-size:12.5px}
.w-auto,.input.w-auto{width:auto}
.w-max{width:max-content;max-width:100%}
.grow{flex:1 1 auto;min-width:0}
.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em}
.t-good{color:var(--good)}.t-warn{color:var(--warn)}.t-crit{color:var(--crit)}
.icon-inline{display:inline-flex;vertical-align:-2px}
.icon-inline svg{width:14px;height:14px}

/* ---------- inicialização ---------- */
.boot{min-height:100vh;display:grid;place-items:center;color:var(--muted)}
.boot .brand{font-size:22px}
.boot-msg{display:grid;justify-items:center;gap:14px}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:212px minmax(0,1fr);gap:32px;max-width:1480px;margin:0 auto;min-height:100vh;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:20px 48px}
.rail{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:22px;min-height:calc(100vh - 40px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:22px;font-weight:800;font-stretch:125%;letter-spacing:-0.02em;padding:4px 8px}
.brand svg{width:30px;height:30px;flex:none}
.brand .o-ring{fill:none;stroke:var(--ink);stroke-width:1.6}
.brand .o-core{fill:var(--ink)}
.brand .o-moon{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.menu-btn{display:none}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--surface-3);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:inset 0 0 0 1px var(--line)}
.nav .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none}
.nav a[aria-current="page"] .dot{background:var(--accent);border-color:var(--accent)}
.nav .grp{font-size:12px;color:var(--muted);padding:14px 10px 4px}
.rail-foot{margin-top:auto;padding:0 2px;display:grid;gap:10px}
.who{display:grid;gap:2px;padding:10px 10px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.who .nm{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .em{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.main{min-width:0;display:flex;flex-direction:column;gap:20px;outline:none}
.view{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ---------- cabeçalho de página e filtros ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.head>div{min-width:0}
.head h1{margin:0;font-size:30px;line-height:1.08;font-weight:760;font-stretch:125%;letter-spacing:-0.025em}
.head p{margin:6px 0 0;color:var(--muted);max-width:70ch}
.updated{font-size:12px;color:var(--muted);white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.filters .lbl{font-size:12px;color:var(--muted);margin-right:-6px}
.scroller{display:flex;gap:2px;overflow-x:auto;width:max-content;max-width:100%;padding:3px;background:var(--surface-3);border-radius:999px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.chip{appearance:none;border:0;background:transparent;color:var(--ink-2);font-size:13px;font-weight:550;padding:6px 12px;border-radius:999px;white-space:nowrap;cursor:pointer;flex:none}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:0 1px 2px var(--shadow-c),inset 0 0 0 1px var(--line)}
.chip .n{font-variant-numeric:tabular-nums;color:var(--muted);margin-left:4px;font-weight:500}
.chip[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- slab (assinatura do dashboard) ---------- */
.slab{background:var(--slab);color:var(--slab-ink);border-radius:22px;padding:26px 28px 22px;display:grid;gap:20px;min-width:0}
.slab-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px 28px;flex-wrap:wrap}
.slab-top>div{min-width:0;flex:1 1 380px}
.hero-label{font-size:15px;font-weight:600;color:var(--slab-ink-2)}
.hero-num{font-size:clamp(40px,6vw,62px);line-height:1;font-weight:600;letter-spacing:-0.03em;margin-top:8px;white-space:nowrap}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:14px;color:var(--slab-ink-2)}
.hero-meta b{color:var(--slab-ink);font-weight:650}
.hero-meta .up{color:var(--slab-good)} .hero-meta .down{color:var(--slab-crit)}
.switch{display:flex;align-items:center;gap:14px;background:var(--slab-2);border:0;border-radius:16px;padding:12px 16px;cursor:pointer;text-align:left;color:var(--slab-ink);flex:0 1 300px;min-width:0}
.switch .track{width:46px;height:28px;border-radius:999px;background:var(--sw-off);position:relative;flex:none;transition:background-color .2s}
.switch .knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--slab-ink);transition:transform .22s cubic-bezier(.3,.7,.3,1)}
.switch[aria-checked="true"] .track{background:var(--sw-on)}
.switch[aria-checked="true"] .knob{transform:translateX(18px);background:var(--sw-knob-on)}
.switch .t1{display:block;font-weight:700;font-size:15px}
.switch .t2{display:block;font-size:12.5px;color:var(--slab-ink-2);margin-top:2px}
.estimate{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--slab-ink-2);background:var(--slab-2);border-radius:10px;padding:8px 12px}
.estimate svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--slab-warn)}
.estimate b{color:var(--slab-ink);font-weight:650}
.segbar{display:flex;gap:2px;height:28px;min-width:0}
.seg{flex-basis:0;flex-grow:0;min-width:0;border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:12px;font-weight:650;white-space:nowrap;transition:flex-grow .55s cubic-bezier(.3,.7,.3,1);cursor:default;overflow:hidden}
.seg.cost{background:var(--seg-cost);color:var(--seg-cost-ink)}
.seg.fixed{background:var(--seg-fixed);color:var(--seg-fixed-ink)}
.seg.res{background:var(--seg-res);color:var(--seg-res-ink)}
.seg.empty{background:var(--slab-2)}
.seg:hover,.seg:focus-visible{filter:brightness(1.12)}
.seglegend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--slab-ink-2);margin-top:10px}
.seglegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.seglegend .cost{background:var(--seg-cost)} .seglegend .fixed{background:var(--seg-fixed)} .seglegend .res{background:var(--seg-res)}
.slab-empty{display:flex;gap:12px;align-items:flex-start;background:var(--slab-2);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--slab-ink-2)}
.slab-empty svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--slab-ink)}
.slab-empty b{color:var(--slab-ink)}

/* ---------- faixa de indicadores ---------- */
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:14px}
.strip.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:14px 16px 15px;min-width:0;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat-l{font-size:12.5px;color:var(--muted)}
.stat-v{font-size:21px;font-weight:600;letter-spacing:-0.01em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.stat-d{font-size:12px;margin-top:3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-good{color:var(--good)} .d-bad{color:var(--crit)} .d-neutral{color:var(--muted)}

/* ---------- painéis ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px;align-items:start}
.cols.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px;min-width:0}
.panel.flat{background:transparent;border-style:dashed}
.panel-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap;margin-bottom:14px}
.panel-h>div{min-width:0}
.panel-h h2{margin:0;font-size:17px;line-height:1.25;font-weight:700;font-stretch:112%;letter-spacing:-0.01em}
.panel-h .sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* demonstrativo */
.stmt{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.stmt li{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;gap:4px 12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.stmt li:last-child{border-bottom:0}
.stmt .nm{min-width:0;color:var(--ink-2)}
.stmt .op{display:inline-block;width:14px;color:var(--muted)}
.stmt .v{text-align:right;white-space:nowrap}
.stmt .p{text-align:right;color:var(--muted);font-size:12.5px}
.stmt .sum .nm,.stmt .sum .v{color:var(--ink);font-weight:700}
.stmt .sum{border-bottom-color:var(--line-strong)}
.stmt .off{opacity:.42}
.stmt .flagtxt{display:block;font-size:11.5px;color:var(--warn);margin-left:14px}

/* ---------- tabelas ---------- */
.tbl-wrap{overflow-x:auto;margin:0 -20px;padding:0 20px;min-width:0}
.tbl-wrap.scroll-y{max-height:360px;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tr.sel td{background:var(--accent-soft)}
.tbl tr.flag td{background:var(--warn-soft)}
.tbl tfoot td{font-weight:700;border-top:1px solid var(--line-strong);border-bottom:0}
.tbl .pn{font-weight:600;color:var(--ink);max-width:340px}
.tbl .ps{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tbl .rk{color:var(--muted);font-variant-numeric:tabular-nums;width:28px}
.tbl .neg{color:var(--crit)}
.tbl .sub-row td{font-size:12.5px;color:var(--ink-2)}
.tbl .sub-row td:first-child{padding-left:18px}
.tbl .grp-row td{font-weight:700;background:var(--surface-2)}
.tbl .ind td:first-child{padding-left:16px}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th[aria-sort="ascending"]::after{content:" ↑"}
.tbl th[aria-sort="descending"]::after{content:" ↓"}
.tbl.dre td:first-child,.tbl.dre th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);white-space:nowrap;padding-right:14px}
.tbl.dre tr.grp-row td:first-child{background:var(--surface-2)}
.tbl.dre .hl{background:var(--accent-soft)}
.tbl.dre tbody tr:hover td.hl{background:var(--accent-soft)}
.tbl .muted-row td{color:var(--muted);font-size:12.5px}
.tbl tfoot td.hl{background:var(--accent-soft)}
details.panel>summary{cursor:pointer;color:var(--ink-2)}
details.panel>ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}
.barcell{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.barcell .trk{width:84px;height:8px;flex:none;border-radius:0 4px 4px 0;background:var(--surface-3)}
.barcell .trk i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--viz-3)}
.linkbtn{appearance:none;border:0;background:none;padding:0;cursor:pointer;font-weight:650;color:var(--ink);text-align:left;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.linkbtn:hover{text-decoration-color:var(--accent)}
.linkbtn.small{font-size:12px;font-weight:600}

/* ---------- pílulas, botões, abas ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap;background:var(--surface-3);color:var(--ink-2)}
.pill svg{width:13px;height:13px;flex:none}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;border-radius:9px;padding:8px 14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;min-height:36px}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--crit);border-color:var(--crit-soft)}
.btn.danger:hover{background:var(--crit-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-3)}
.btn.small{padding:5px 10px;font-size:12px;border-radius:8px;min-height:30px}
.btn.block{width:100%}
.btn.lg{font-size:14.5px;padding:11px 18px;border-radius:11px;min-height:44px}
.btn svg{width:14px;height:14px;flex:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
.btn .spinner{width:14px;height:14px;border-width:2px;border-color:currentColor;border-top-color:transparent;opacity:.85}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;border:0;background:none;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;flex:none}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-soft);color:var(--ink);border-radius:12px;padding:12px 16px}
.banner>svg{width:18px;height:18px;color:var(--warn);flex:none}
.banner .tx{flex:1 1 240px;min-width:0}
.banner b{font-weight:700}
.banner.info{background:var(--surface-3)}
.banner.info>svg{color:var(--ink-2)}
.banner.good{background:var(--good-soft)}
.banner.good>svg{color:var(--good)}
.banner.crit{background:var(--crit-soft)}
.banner.crit>svg{color:var(--crit)}
.search{position:relative;flex:1 1 220px;max-width:340px;min-width:0;display:block}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}

/* ---------- KPIs e medidores ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.kpis .stat:nth-child(4n+1){border-left:0}
.kpis .stat:nth-child(n+5){border-top:1px solid var(--line)}
.meter{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;border-radius:999px;background:var(--viz-3)}
.meter.warn i{background:var(--warn-mark)} .meter.crit i{background:var(--crit-mark)} .meter.good i{background:var(--good-mark)}

/* ---------- listas, formulários ---------- */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{font-weight:650}
.row .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.row .r{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mono-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-3);color:var(--ink-2);font-weight:800;font-size:12px;font-stretch:120%;flex:none}
.row-l{display:flex;gap:12px;align-items:center;min-width:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.form-grid.wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .fl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--muted)}
.input{width:100%;min-width:0;font-size:14px;padding:8px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);min-height:38px}
.input.lg{font-size:15px;padding:10px 12px;border-radius:10px;min-height:44px}
.input.num{font-variant-numeric:tabular-nums;text-align:right}
.input[aria-invalid="true"]{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit)}
textarea.input{min-height:84px;resize:vertical;line-height:1.4}
select.input{padding-right:28px}
.suffix{position:relative}
.suffix .input{padding-right:28px}
.suffix span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
.suffix.pre .input{padding-right:10px;padding-left:34px;text-align:left}
.suffix.pre span{right:auto;left:10px}
.pw{position:relative}
.pw .input{padding-right:76px}
.pw .reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0}
.rule .t{font-weight:650}
.rule .d{font-size:13px;color:var(--ink-2);margin-top:3px;max-width:68ch}
.tog{appearance:none;width:40px;height:24px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;border:0;margin:2px 0 0;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);transition:transform .2s}
.tog[aria-checked="true"]{background:var(--accent)}
.tog[aria-checked="true"]::after{transform:translateX(16px)}
.tog[disabled]{opacity:.5;cursor:not-allowed}
.inline-num{display:inline-flex;width:72px;margin:0 4px;vertical-align:middle}
.chips-inline{display:flex;flex-wrap:wrap;gap:4px}
.code{font-size:11.5px;font-weight:700;font-stretch:115%;padding:2px 6px;border-radius:6px;background:var(--surface-3);color:var(--ink-2)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.err{font-size:12.5px;color:var(--crit);min-height:1em;margin:0}
.err:empty{display:none}
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:10px 12px;font-size:13.5px;background:var(--crit-soft);color:var(--ink)}
.alert svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--crit)}
.alert.warn{background:var(--warn-soft)}
.alert.warn svg{color:var(--warn)}
.alert.good{background:var(--good-soft)}
.alert.good svg{color:var(--good)}
.alert.info{background:var(--surface-3)}
.alert.info svg{color:var(--ink-2)}
.alert ul{margin:4px 0 0;padding-left:18px}
.kv{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:10px 18px;margin:0}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- estado vazio e carregamento ---------- */
.empty{display:grid;justify-items:start;gap:8px;padding:26px 4px;max-width:62ch}
.empty .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:4px}
.empty .ic svg{width:22px;height:22px}
.empty .t{font-weight:700;font-size:15.5px}
.empty .d{color:var(--ink-2);font-size:13.5px}
.empty .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.empty.center{justify-items:center;text-align:center;margin:0 auto}
.skel{border-radius:8px;background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 50%,var(--surface-3) 100%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;min-height:14px}
.skel.h-hero{height:220px;border-radius:22px}
.skel.h-strip{height:84px;border-radius:14px}
.skel.h-panel{height:280px;border-radius:14px}
.skel.h-row{height:44px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.load-err{display:grid;gap:10px;justify-items:start}

/* ---------- gráficos ---------- */
.chart{position:relative;width:100%;min-width:0}
.chart svg{display:block;width:100%;overflow:visible}
.chart svg text{fill:var(--axis-text);font-family:var(--font);font-size:11px;font-variant-numeric:tabular-nums}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .bl{stroke:var(--axis);stroke-width:1}
.chart .m1{fill:var(--viz-1)} .chart .m3{fill:var(--viz-3)} .chart .mneg{fill:var(--crit-mark)}
.chart .ln{fill:none;stroke:var(--viz-3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ar{fill:var(--viz-3);opacity:.1}
.chart .dt{fill:var(--viz-3);stroke:var(--surface);stroke-width:2}
.chart .hb{fill:var(--band);opacity:0}
.chart .hb.on{opacity:1}
.chart .hit{fill:transparent}
.chart .lbl-strong{fill:var(--ink);font-weight:650;font-size:12px}
.chart svg:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.legend .k1{background:var(--viz-1)} .legend .k3{background:var(--viz-3)}
.rank{display:flex;flex-direction:column;gap:10px}
.rank .r{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:13px}
.rank .r .n{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .r .trk{height:12px;background:transparent}
.rank .r .trk i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--viz-3);min-width:2px}
.rank .r .trk i.neg{background:var(--crit-mark)}
.rank .r .v{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.rank .r .v small{color:var(--muted);margin-left:6px;font-size:12px}

/* ---------- sobreposições ---------- */
.tip{position:fixed;left:0;top:0;z-index:50;pointer-events:none;background:var(--tip-bg);color:var(--tip-ink);border-radius:9px;padding:9px 11px;font-size:12.5px;box-shadow:0 8px 28px var(--shadow-c);opacity:0;transition:opacity .12s;min-width:170px;max-width:260px}
.tip.on{opacity:1}
.tip .tt{color:var(--tip-ink-2);margin-bottom:5px}
.tip .tr{display:flex;align-items:center;gap:8px;margin-top:2px}
.tip .tr .k{width:12px;height:3px;border-radius:2px;flex:none}
.tip .tr .k1{background:var(--viz-1)} .tip .tr .k3{background:var(--viz-3)}
.tip .tr strong{font-variant-numeric:tabular-nums;font-weight:700}
.tip .tr span{color:var(--tip-ink-2)}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,16px);background:var(--tip-bg);color:var(--tip-ink);padding:11px 16px;border-radius:11px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px);font-size:13.5px;box-shadow:0 8px 28px var(--shadow-c)}
.toast.on{opacity:1;transform:translate(-50%,0)}
dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);box-shadow:0 24px 70px var(--shadow-c)}
dialog.wide{width:min(720px,calc(100vw - 32px))}
dialog::backdrop{background:var(--scrim)}
.dlg{padding:22px 22px 20px;display:grid;gap:16px}
.dlg h2{margin:0;font-size:19px;font-weight:720;font-stretch:115%}
.dlg .lead{margin:-8px 0 0;color:var(--ink-2);font-size:13.5px}
.dlg .acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.dlg .hint{font-size:12.5px;color:var(--muted)}

/* ---------- login, MFA e troca de senha ---------- */
.auth{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:22px;padding:32px max(16px, env(safe-area-inset-left, 0px)) 48px}
.auth .brand{font-size:26px;padding:0}
.auth .brand svg{width:34px;height:34px}
.auth-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 26px 24px;display:grid;gap:18px;box-shadow:0 18px 50px -24px var(--shadow-c)}
.auth-card.wide{width:min(620px,100%)}
.auth-card h1{margin:0;font-size:23px;line-height:1.15;font-weight:760;font-stretch:118%;letter-spacing:-0.02em}
.auth-card .lead{margin:-8px 0 0;color:var(--ink-2);font-size:14px}
.auth-card form{display:grid;gap:16px}
.auth-foot{font-size:12px;color:var(--muted);text-align:center;max-width:44ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:st}
.steps>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;counter-increment:st}
.steps>li::before{content:counter(st);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:13px;grid-column:1;grid-row:1 / span 2}
.steps>li>*{grid-column:2;min-width:0}
.steps .st{font-weight:650}
.steps .sd{color:var(--ink-2);font-size:13.5px}
.mfa-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin-top:8px}
.qr{background:#FFFFFF;border-radius:12px;padding:8px;width:188px;height:188px;box-shadow:inset 0 0 0 1px var(--line)}
.qr svg{display:block;width:100%;height:100%}
.secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.secret .mono{font-size:13.5px;overflow-wrap:anywhere;flex:1 1 180px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0 0;list-style:none}
.codes li{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.04em}
.otp{font-family:var(--font-mono);font-size:24px;letter-spacing:.32em;text-align:center;padding:10px 12px;min-height:52px}
.pwrules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-size:12.5px;color:var(--muted)}
.pwrules li{display:flex;gap:6px;align-items:center}
.pwrules svg{width:13px;height:13px;flex:none}
.pwrules li.ok{color:var(--good)}
.countdown{font-size:12.5px;color:var(--muted)}
.countdown.late{color:var(--warn);font-weight:600}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip .stat:nth-child(4){border-left:0}
  .strip .stat:nth-child(n+4){border-top:1px solid var(--line)}
  .strip.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip.c4 .stat:nth-child(odd){border-left:0}
  .strip.c4 .stat:nth-child(4){border-left:1px solid var(--line)}
  .strip.c4 .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .cols,.cols.even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:0 40px}
  .rail{position:sticky;top:0;z-index:30;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line)}
  .brand{font-size:19px;padding:2px 0}
  .brand svg{width:26px;height:26px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;appearance:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:600;cursor:pointer;max-width:60%;overflow:hidden}
  .menu-btn .cur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-btn svg{width:16px;height:16px;flex:none}
  .drawer{display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 48px var(--shadow-c);flex-direction:column;gap:8px}
  .rail[data-open="true"] .drawer{display:flex}
  .nav .grp{display:none}
  .rail-foot{margin-top:0;border-top:1px solid var(--line);padding-top:8px}
  .who{box-shadow:none;background:var(--surface-2)}
  .head h1{font-size:25px}
  .slab{padding:20px 18px 18px;border-radius:18px}
  .switch{max-width:none;width:100%;flex-basis:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .stat:nth-child(odd){border-left:0}
  .kpis .stat:nth-child(even){border-left:1px solid var(--line)}
  .kpis .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (min-width:901px){
  .drawer{display:contents}
}
@media (max-width:600px){
  .strip,.strip.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .stat{border-left:1px solid var(--line);border-top:0}
  .strip .stat:nth-child(odd){border-left:0}
  .strip .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .panel{padding:16px 16px 18px}
  .tbl-wrap{margin:0 -16px;padding:0 16px}
  .stat-v{font-size:19px}
  .rank .r{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .rank .r .trk{grid-column:1/-1;grid-row:2}
  .barcell .trk{width:60px}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .r{justify-content:flex-start}
  .auth-card{padding:22px 18px 20px;border-radius:16px}
  .mfa-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .mfa-grid>div{justify-self:stretch}
  .codes,.pwrules{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv dd{margin-bottom:8px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (forced-colors: active){
  .seg,.chart .m1,.chart .m3{forced-color-adjust:none}
}
@media print{
  .rail,.filters,.tools,.btn,.switch{display:none!important}
  .app{display:block}
  body{background:#fff}
}