:root{
  --bg:#ECEDE9; --surface:#FCFCFB; --surface-2:#F4F5F1; --surface-3:#E8EAE5;
  --line:#D7D9D2; --line-strong:#BDC1B8;
  --ink:#1A242B; --ink-2:#4A565E; --ink-3:#78848B;
  --accent:#14567F; --accent-ink:#FFFFFF; --accent-soft:#E2ECF3; --accent-line:#A9C6DA;
  --signal:#96660F; --signal-soft:#F6EBD5;
  --pos:#1E6E4F; --pos-soft:#DEEDE5;
  --neg:#A2392F; --neg-soft:#F5E2DF;
  --s1:#0C6FB0; --s2:#B0472B; --s1-soft:#DCEAF5; --s2-soft:#F6E3DC;
  --shadow:0 1px 2px rgba(20,34,43,.06), 0 6px 18px -8px rgba(20,34,43,.18);
  --shadow-lg:0 2px 4px rgba(20,34,43,.08), 0 24px 48px -16px rgba(20,34,43,.28);
  --r:6px; --r-lg:10px;
  --nav-w:216px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0F171D; --surface:#17222A; --surface-2:#1C2830; --surface-3:#23313A;
  --line:#2B3A44; --line-strong:#3E515D;
  --ink:#E7ECEF; --ink-2:#A8B5BD; --ink-3:#7B8A93;
  --accent:#61A8D2; --accent-ink:#0F171D; --accent-soft:#1A2E3C; --accent-line:#2F5570;
  --signal:#DCA83C; --signal-soft:#312814;
  --pos:#63AC89; --pos-soft:#16281F;
  --neg:#DC7C71; --neg-soft:#2E1B18;
  --s1:#3392C9; --s2:#D26A4E; --s1-soft:#152B3A; --s2-soft:#31201A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F171D; --surface:#17222A; --surface-2:#1C2830; --surface-3:#23313A;
  --line:#2B3A44; --line-strong:#3E515D;
  --ink:#E7ECEF; --ink-2:#A8B5BD; --ink-3:#7B8A93;
  --accent:#61A8D2; --accent-ink:#0F171D; --accent-soft:#1A2E3C; --accent-line:#2F5570;
  --signal:#DCA83C; --signal-soft:#312814;
  --pos:#63AC89; --pos-soft:#16281F;
  --neg:#DC7C71; --neg-soft:#2E1B18;
  --s1:#3392C9; --s2:#D26A4E; --s1-soft:#152B3A; --s2-soft:#31201A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.45; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .sig{color:var(--signal)}
.nowrap{white-space:nowrap}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:100vh}
.nav{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:auto;
}
.brand{padding:16px 16px 12px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center}
.brand-mark{
  width:30px; height:30px; border-radius:5px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:12px; letter-spacing:.02em; flex:none;
}
.brand-name{font-weight:700; font-size:14px; line-height:1.15}
.brand-sub{font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.navlist{padding:10px 8px; display:flex; flex-direction:column; gap:1px; flex:1}
.navbtn{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:var(--r);
  background:none; text-align:left; cursor:pointer; color:var(--ink-2); font-size:13.5px; font-weight:500;
}
.navbtn:hover{background:var(--surface-2); color:var(--ink)}
.navbtn[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.navbtn svg{width:17px; height:17px; flex:none}
.navbtn .badge{margin-left:auto}
.navfoot{padding:10px 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:10px 20px; flex-wrap:wrap;
}
.topbar h1{font-size:17px}
.topbar .spacer{flex:1}
.content{padding:18px 20px 56px; max-width:1360px; width:100%}
.section{margin-bottom:22px}
.section-head{display:flex; align-items:flex-end; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.section-head h2{font-size:14px}
.section-head .spacer{flex:1}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn svg{width:15px; height:15px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{background:var(--accent); filter:brightness(1.08)}
.btn-ghost{border-color:transparent; background:none; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-danger{color:var(--neg); border-color:var(--line-strong)}
.btn-danger:hover{background:var(--neg-soft)}
.btn-sm{padding:4px 8px; font-size:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field > label{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.input, select.input, textarea.input{
  width:100%; padding:7px 9px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); font-size:13.5px;
}
textarea.input{min-height:74px; resize:vertical; line-height:1.5}
.input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.input.num{text-align:right}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.filters{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px}
.filters .field{width:auto; min-width:130px}

/* ---------- surfaces ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.panel-head{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.panel-head h3{font-size:13px}
.panel-body{padding:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.stat{background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.stat .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:22px; font-weight:600; letter-spacing:-.02em}
.stat .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.stat .sub{font-size:11.5px; color:var(--ink-2)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
table.t{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
table.t th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 10px; border-bottom:1px solid var(--line); background:var(--surface-2);
  position:sticky; top:0; z-index:1; white-space:nowrap;
}
table.t th.num, table.t td.num{text-align:right}
table.t td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--surface-2)}
table.t tr.group td{background:var(--surface-3); font-weight:600; font-size:12px; letter-spacing:.02em}
table.t tfoot td{padding:9px 10px; border-top:2px solid var(--line-strong); font-weight:600; background:var(--surface-2)}
.rowact{display:flex; gap:4px; justify-content:flex-end}
.empty{padding:28px 16px; text-align:center; color:var(--ink-3); font-size:13px}

/* ---------- pills & bars ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap;
}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.pill.n{background:var(--surface-3); color:var(--ink-2)}
.pill.a{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.pill.g{background:var(--pos-soft); color:var(--pos)}
.pill.w{background:var(--signal-soft); color:var(--signal)}
.pill.r{background:var(--neg-soft); color:var(--neg)}
.badge{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:4px;
  background:var(--surface-3); color:var(--ink-2)}
.badge.r{background:var(--neg-soft); color:var(--neg)}
.badge.w{background:var(--signal-soft); color:var(--signal)}

.bar{display:block; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; min-width:56px; max-width:160px}
.bar > i{display:block; height:100%; border-radius:3px; background:var(--accent)}
.bar.two{height:14px; display:flex; flex-direction:column; gap:2px; background:none; overflow:visible}
.bar.two > i{height:6px; background:var(--surface-3); border-radius:3px; position:relative}
.bar.two > i > b{position:absolute; inset:0 auto 0 0; border-radius:3px; display:block}

.alertlist{display:flex; flex-direction:column; gap:1px; background:var(--line)}
.alert{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; background:var(--surface); border-left:3px solid var(--line-strong)}
.alert.r{border-left-color:var(--neg)} .alert.w{border-left-color:var(--signal)} .alert.a{border-left-color:var(--accent)}
.alert .t{font-weight:600; font-size:12.5px}
.alert .d{font-size:12px; color:var(--ink-2)}
.alert .spacer{flex:1}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto}
.tab{
  padding:8px 12px; border:0; background:none; cursor:pointer; font-size:13px; font-weight:500;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,23,29,.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:var(--bg); z-index:41;
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .2s ease;
  display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.drawer-head h2{font-size:15px}
.drawer-body{padding:18px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:14px}
.drawer-foot{padding:12px 18px; border-top:1px solid var(--line); background:var(--surface); display:flex; gap:8px; justify-content:flex-end}

/* ---------- toast ---------- */
.toasts{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:var(--r); font-size:13px; box-shadow:var(--shadow-lg); max-width:min(420px,92vw)}
.toast.err{background:var(--neg); color:#fff}

/* ---------- banner ---------- */
.banner{
  display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:var(--r-lg);
  background:var(--signal-soft); border:1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  color:var(--ink); font-size:12.5px; margin-bottom:16px; flex-wrap:wrap;
}
.banner .spacer{flex:1}
.banner strong{color:var(--signal)}

/* ---------- photos ---------- */
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px}
.photo{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.photo img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; max-width:100%}
.photo .cap{padding:4px 6px; font-size:11px; color:var(--ink-2); border-top:1px solid var(--line)}
.photo .del{position:absolute; top:4px; right:4px; border:0; border-radius:4px; background:rgba(15,23,29,.72); color:#fff;
  width:22px; height:22px; cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center}

/* ---------- chart ---------- */
.chart{width:100%; height:auto; display:block; overflow:visible}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:8px}
.legend .k{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:10px; height:10px; border-radius:2px; flex:none}
.tip{position:fixed; z-index:70; pointer-events:none; background:var(--ink); color:var(--bg); padding:7px 9px;
  border-radius:var(--r); font-size:12px; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .1s; max-width:240px}
.tip.on{opacity:1}
.tip .tk{display:flex; justify-content:space-between; gap:12px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .nav{
    position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; z-index:30;
    flex-direction:row; border-right:0; border-top:1px solid var(--line); overflow-x:auto;
  }
  .brand,.navfoot{display:none}
  .navlist{flex-direction:row; padding:4px 6px; gap:2px}
  .navbtn{flex-direction:column; gap:3px; font-size:10px; padding:6px 9px; min-width:62px; text-align:center; font-weight:600}
  .navbtn .badge{display:none}
  .content{padding:14px 14px 92px}
  .topbar{padding:10px 14px}
  .grid2,.grid3{grid-template-columns:1fr}
  .drawer{width:100vw}
}
@media print{
  .nav,.topbar,.drawer,.scrim,.rowact,.noprint{display:none!important}
  .app{grid-template-columns:1fr} body{background:#fff}
  .panel,.tablewrap{break-inside:avoid}
}

/* ---------- tela de login e instalação ---------- */
body.tela-login{
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background:var(--bg); color:var(--ink);
}
.cartao-login{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.cartao-login h1{font-size:19px; letter-spacing:-.015em}
.cartao-login form{display:flex; flex-direction:column; gap:12px}
.cartao-login .btn{justify-content:center; padding:9px 14px}
.cartao-login p{font-size:13px; line-height:1.6}
.cartao-login code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.erro{color:var(--neg); background:var(--neg-soft); border:1px solid color-mix(in srgb, var(--neg) 30%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.ok{color:var(--pos); background:var(--pos-soft); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.aviso{color:var(--ink); background:var(--signal-soft); border:1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.rodape-login{font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:4px}

/* ---------- identificação do usuário logado ---------- */
.usuario-box{display:flex; align-items:center; gap:9px}
.usuario-ini{
  width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:none;
}
.usuario-nome{font-size:12.5px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.usuario-perfil{font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase}