/* ============================================================ tokens ==== */
:root{
  --bg:#EEF1F6; --glow:rgba(180,83,9,.07);
  --panel:#FFFFFF; --panel-2:#F7F9FC; --panel-3:#EDF1F7;
  --line:#DFE5EE; --line-2:#C6D0DE;
  --ink:#0D1626; --ink-2:#48586E; --ink-3:#8394A8;
  --brand:#B45309; --brand-2:#E08A20; --brand-soft:#FDF3E3;
  --out:#D92146; --ok:#0E8A5F; --over:#C77A0A; --info:#0B6FB8;
  --out-soft:#FDE9ED; --ok-soft:#E3F5EE; --over-soft:#FBF0DC; --info-soft:#E7F1FA;
  --out-line:#F2B8C4; --ok-line:#A9DCC8; --over-line:#EDD09B;
  --sh-1:0 1px 2px rgba(13,22,38,.05);
  --sh-2:0 1px 3px rgba(13,22,38,.06), 0 8px 24px -8px rgba(13,22,38,.10);
  --sh-3:0 2px 6px rgba(13,22,38,.07), 0 24px 48px -16px rgba(13,22,38,.18);
  --r:10px; --r-sm:7px; --r-lg:16px;
  --mola:cubic-bezier(.34,1.36,.5,1);
  --suave:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --bg:#080D14; --glow:rgba(245,165,36,.06);
    --panel:#111A25; --panel-2:#16212E; --panel-3:#1C2938;
    --line:#1F2C3B; --line-2:#2C3E52;
    --ink:#E9EFF6; --ink-2:#9DB0C5; --ink-3:#61758C;
    --brand:#F5A524; --brand-2:#FFBF52; --brand-soft:#2A1F0C;
    --out:#FB6E88; --ok:#35C793; --over:#F0AE2E; --info:#48A6E8;
    --out-soft:#2A1119; --ok-soft:#0B241C; --over-soft:#271C09; --info-soft:#0C1E2E;
    --out-line:#4A1F2B; --ok-line:#15402F; --over-line:#3E2E10;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 3px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.6);
    --sh-3:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  }
}
:root[data-tema="escuro"]{
  --bg:#080D14; --glow:rgba(245,165,36,.06);
  --panel:#111A25; --panel-2:#16212E; --panel-3:#1C2938;
  --line:#1F2C3B; --line-2:#2C3E52;
  --ink:#E9EFF6; --ink-2:#9DB0C5; --ink-3:#61758C;
  --brand:#F5A524; --brand-2:#FFBF52; --brand-soft:#2A1F0C;
  --out:#FB6E88; --ok:#35C793; --over:#F0AE2E; --info:#48A6E8;
  --out-soft:#2A1119; --ok-soft:#0B241C; --over-soft:#271C09; --info-soft:#0C1E2E;
  --out-line:#4A1F2B; --ok-line:#15402F; --over-line:#3E2E10;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.6);
  --sh-3:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  background-image:radial-gradient(1200px 600px at 78% -8%, var(--glow), transparent 62%);
  background-attachment:fixed;
  font-family:Inter,-apple-system,"Segoe UI",sans-serif; font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Outfit,Inter,sans-serif; margin:0; font-weight:600; letter-spacing:-.015em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:6px; border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ============================================================ animação ==== */
@keyframes sobe{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes surge{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
@keyframes desliza{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
@keyframes tremer{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}
}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulsar{0%,100%{opacity:1} 50%{opacity:.35}}
@keyframes brilho{from{background-position:-360px 0} to{background-position:360px 0}}
@keyframes flutuar{
  0%{transform:translateY(0) translateX(0); opacity:0}
  10%{opacity:.5}
  90%{opacity:.5}
  100%{transform:translateY(-105vh) translateX(var(--dx,20px)); opacity:0}
}
@keyframes traco{to{stroke-dashoffset:0}}

.anima{animation:sobe .42s var(--mola) both}
.anima-2{animation:surge .32s var(--suave) both}
[data-atraso]{animation-delay:calc(var(--i,0) * 55ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ============================================================ login ==== */
.entrada-tela{
  min-height:100vh; display:grid; place-items:center; padding:24px; position:relative;
  overflow:hidden; background:#0A1119;
}
.entrada-tela::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(46% 42% at 22% 26%, rgba(245,165,36,.30), transparent 62%),
    radial-gradient(40% 38% at 76% 30%, rgba(180,83,9,.34), transparent 60%),
    radial-gradient(52% 46% at 54% 82%, rgba(11,111,184,.22), transparent 64%);
  filter:blur(24px); animation:respira 17s ease-in-out infinite alternate;
}
@keyframes respira{
  from{transform:scale(1) rotate(0deg)}
  to{transform:scale(1.16) rotate(7deg)}
}
.entrada-tela::after{           /* textura fina, tira o ar de degradê chapado */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.bolhas{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.bolhas i{
  position:absolute; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  animation:flutuar var(--t,17s) linear infinite; animation-delay:var(--d,0s);
}
.entrada-caixa{
  position:relative; z-index:2; width:min(410px,100%);
  animation:sobe .6s var(--mola) both;
}
.entrada-marca{text-align:center; margin-bottom:26px; animation:sobe .6s var(--mola) both;
  animation-delay:.08s}
.entrada-marca img{
  width:min(260px,72%); height:auto; display:block; margin:0 auto 14px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.entrada-marca .fallback{
  font-family:Outfit,sans-serif; color:#fff; letter-spacing:.02em; line-height:1;
  margin-bottom:14px;
}
.entrada-marca .fallback .top{font-size:11px; letter-spacing:.42em; opacity:.72;
  text-transform:uppercase}
.entrada-marca .fallback .meio{font-size:44px; font-weight:700; margin:2px 0 1px}
.entrada-marca .fallback .base{font-size:15px; letter-spacing:.28em; opacity:.86;
  text-transform:uppercase}
.entrada-marca p{color:rgba(255,255,255,.62); font-size:12.5px; margin:0}

.entrada-cartao{
  background:rgba(18,26,37,.72); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.11); border-radius:var(--r-lg);
  padding:26px 26px 22px; box-shadow:0 26px 60px -20px rgba(0,0,0,.7);
  animation:sobe .6s var(--mola) both; animation-delay:.16s;
}
.entrada-cartao.errou{animation:tremer .5s both}
.entrada-cartao h2{color:#fff; font-size:17px; margin-bottom:3px}
.entrada-cartao .sub{color:rgba(255,255,255,.55); font-size:12px; margin-bottom:20px}

.campo-flutua{position:relative; margin-bottom:14px}
.campo-flutua input{
  width:100%; padding:19px 13px 8px; font-size:14px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-sm); transition:border-color .16s, background .16s, box-shadow .16s;
}
.campo-flutua input:hover{border-color:rgba(255,255,255,.28)}
.campo-flutua input:focus{
  outline:none; border-color:var(--brand-2); background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(245,165,36,.16);
}
.campo-flutua label{
  position:absolute; left:14px; top:14px; font-size:14px; color:rgba(255,255,255,.5);
  pointer-events:none; transform-origin:left top;
  transition:transform .16s var(--suave), color .16s;
}
.campo-flutua input:focus + label,
.campo-flutua input:not(:placeholder-shown) + label{
  transform:translateY(-8px) scale(.74); color:var(--brand-2);
}
.olho{
  position:absolute; right:8px; top:9px; padding:6px; border-radius:6px;
  color:rgba(255,255,255,.5); line-height:0;
}
.olho:hover{color:#fff; background:rgba(255,255,255,.08)}
.olho svg{width:17px; height:17px}

.entrada-bt{
  width:100%; margin-top:8px; padding:12px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand-2),var(--brand)); color:#fff;
  font-weight:600; font-size:14px; position:relative; overflow:hidden;
  transition:filter .14s, transform .14s;
}
.entrada-bt:hover{filter:brightness(1.09)}
.entrada-bt:active{transform:translateY(1px)}
.entrada-bt:disabled{opacity:.66; cursor:progress}
.entrada-bt .rodinha{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; display:inline-block; vertical-align:-3px; margin-right:7px;
  animation:girar .7s linear infinite;
}
.entrada-erro{
  margin-bottom:14px; padding:10px 12px; border-radius:var(--r-sm); font-size:12.5px;
  background:rgba(217,33,70,.16); border:1px solid rgba(251,110,136,.34); color:#FFC2CE;
  display:flex; gap:9px; align-items:flex-start; animation:sobe .3s var(--suave) both;
}
.entrada-erro svg{width:16px; height:16px; flex:none; margin-top:1px}
.entrada-nota{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5); font-size:11.5px; line-height:1.6;
}
.entrada-nota code{
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--brand-2);
  background:rgba(0,0,0,.34); padding:2px 6px; border-radius:4px; display:inline-block;
  margin-top:4px;
}
.entrada-rodape{
  position:absolute; bottom:18px; left:0; right:0; text-align:center; z-index:2;
  color:rgba(255,255,255,.3); font-size:11px;
}

/* ============================================================ shell ==== */
.app{display:grid; grid-template-columns:242px minmax(0,1fr); min-height:100vh}
aside.lateral{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--line); z-index:30;
}
.marca{padding:18px 16px 15px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:11px}
.marca img{height:34px; width:auto; max-width:150px; object-fit:contain}
.marca .glifo{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--brand-2),var(--brand)); color:#fff;
  box-shadow:0 3px 10px -2px rgba(180,83,9,.5); font-weight:700;
  font-family:Outfit,sans-serif; font-size:16px;
}
.marca h1{font-size:14.5px; line-height:1.15}
.marca .sub{font-size:10px; color:var(--ink-3); margin-top:1px; letter-spacing:.04em}

nav.menu{padding:12px 10px; flex:1; overflow-y:auto}
nav.menu .secao{padding:12px 8px 6px}
nav.menu a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:13px; text-decoration:none; cursor:pointer;
  position:relative; transition:background .13s, color .13s, padding-left .16s var(--suave);
  animation:desliza .3s var(--suave) both;
}
nav.menu a:hover{background:var(--panel-3); color:var(--ink); padding-left:13px}
nav.menu a[aria-current="page"]{background:var(--brand-soft); color:var(--brand); font-weight:600}
nav.menu a[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:17px; border-radius:0 3px 3px 0; background:var(--brand);
  animation:surge .24s var(--mola) both;
}
nav.menu a[aria-current="page"] svg{color:var(--brand)}
nav.menu svg{width:16px; height:16px; flex:none; color:var(--ink-3); transition:color .13s}
nav.menu .cnt{
  margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px;
  color:var(--ink-3); background:var(--panel-3); padding:1px 6px; border-radius:20px;
}
nav.menu a[aria-current="page"] .cnt{background:var(--panel); color:var(--brand)}

.rodape-lateral{padding:11px 14px 13px; border-top:1px solid var(--line); font-size:11px}
.estado-linha{display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--ink-2)}
.estado-linha .ponto{width:7px; height:7px; border-radius:50%; flex:none}
.estado-linha .ponto.vivo{animation:pulsar 2.4s ease-in-out infinite}
.estado-linha b{font-family:"JetBrains Mono",monospace; font-weight:500; color:var(--ink); font-size:11px}
.estado-linha .rot{color:var(--ink-3); font-size:10px}
.bt-sair{
  width:100%; margin-top:9px; padding:7px; border-radius:var(--r-sm); font-size:12px;
  border:1px solid var(--line); color:var(--ink-2); display:flex; align-items:center;
  justify-content:center; gap:7px; transition:border-color .13s, color .13s, background .13s;
}
.bt-sair:hover{border-color:var(--out); color:var(--out); background:var(--out-soft)}
.bt-sair svg{width:14px; height:14px}

main.conteudo{min-width:0; display:flex; flex-direction:column}
header.topo{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:13px;
  padding:0 22px; height:60px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(12px);
}
header.topo h2{font-size:17px}
header.topo p{margin:0; font-size:11.5px; color:var(--ink-3)}
.busca{position:relative; width:248px; margin-left:auto}
.busca input{
  width:100%; padding:7px 10px 7px 31px; font-size:12.5px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  transition:border-color .14s, box-shadow .14s, width .18s var(--suave);
}
.busca input:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
.busca svg{position:absolute; left:9px; top:8px; width:14px; height:14px; color:var(--ink-3)}
.busca kbd{
  position:absolute; right:8px; top:7px; font-family:"JetBrains Mono",monospace;
  font-size:10px; color:var(--ink-3); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; background:var(--panel-2);
}
.busca input:focus ~ kbd{opacity:0}
@media (max-width:980px){.busca{width:150px} .busca kbd{display:none}}

.bt{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-size:12.5px;
  font-weight:500; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink);
  transition:border-color .13s, background .13s, transform .13s;
}
.bt:hover{border-color:var(--ink-3); background:var(--panel-2)}
.bt:active{transform:translateY(1px)}
.bt svg{width:14px; height:14px}
.bt.icone{padding:7px; border-color:var(--line)}
.bt.primaria{background:var(--brand); border-color:var(--brand); color:#fff}
.bt.primaria:hover{filter:brightness(1.09)}
.bt.mini{padding:4px 9px; font-size:11.5px}
.bt:disabled{opacity:.4; cursor:not-allowed; transform:none}

.tela{padding:22px; flex:1; min-width:0}
.tela > *{animation:sobe .34s var(--suave) both}
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  aside.lateral{position:static; height:auto; flex-direction:row; align-items:center;
    overflow-x:auto; border-right:0; border-bottom:1px solid var(--line)}
  .marca{border-bottom:0; border-right:1px solid var(--line); padding:11px 14px; flex:none}
  .marca .sub{display:none}
  nav.menu{display:flex; padding:8px; gap:4px; flex:none}
  nav.menu .secao{display:none}
  nav.menu a{white-space:nowrap}
  nav.menu a[aria-current="page"]::before{display:none}
  .rodape-lateral{display:none}
  .tela{padding:16px}
}

/* ============================================================ cartões ==== */
.aviso{
  display:flex; gap:11px; align-items:flex-start; margin-bottom:18px; padding:12px 15px;
  border-radius:var(--r); font-size:12.5px; line-height:1.5;
  border:1px solid var(--over-line); background:var(--over-soft); color:var(--over);
  animation:sobe .34s var(--suave) both;
}
.aviso.grave{border-color:var(--out-line); background:var(--out-soft); color:var(--out)}
.aviso svg{width:17px; height:17px; flex:none; margin-top:1px}

.painel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden;
}
.painel-cab{display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.painel-cab h3{font-size:13.5px}
.painel-cab .dica{font-size:11px; color:var(--ink-3)}
.painel-cab .espaco{margin-left:auto}
.painel-corpo{padding:16px}

.heroi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px}
@media (max-width:1240px){.heroi{grid-template-columns:1fr}}
.cartao-heroi{
  position:relative; display:flex; align-items:center; gap:18px; padding:18px 20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden;
  transition:transform .2s var(--suave), box-shadow .2s var(--suave);
}
.cartao-heroi:hover{transform:translateY(-2px); box-shadow:var(--sh-3)}
.cartao-heroi::after{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--tint), transparent 78%)}
.cartao-heroi .visual{flex:none; width:96px; height:96px; position:relative}
.cartao-heroi .visual .meio{position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; line-height:1.1}
.cartao-heroi .visual .meio b{font-family:"JetBrains Mono",monospace; font-size:16px;
  font-weight:600; display:block; letter-spacing:-.04em; max-width:74px; overflow:hidden;
  text-overflow:ellipsis}
.cartao-heroi .visual .meio span{font-size:9px; color:var(--ink-3)}
.cartao-heroi .dados{min-width:0; flex:1}
.cartao-heroi .dados .eyebrow{display:block; margin-bottom:6px}
.cartao-heroi .grande{font-family:"JetBrains Mono",monospace; font-size:32px; font-weight:600;
  letter-spacing:-.035em; line-height:1.05; display:block}
.cartao-heroi .grande .un{font-size:15px; color:var(--ink-3); font-weight:400; letter-spacing:0}
.cartao-heroi .nota{font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.4}
.cartao-heroi .nota.mal{color:var(--out); font-weight:500}

.tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-bottom:16px}
@media (max-width:1400px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{padding:14px 16px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform .2s var(--suave), box-shadow .2s var(--suave)}
.tile:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.tile .eyebrow{display:block; margin-bottom:7px}
.tile .v{font-family:"JetBrains Mono",monospace; font-size:23px; font-weight:600;
  letter-spacing:-.03em; line-height:1.1; display:block}
.tile .v .un{font-size:12px; color:var(--ink-3); font-weight:400; letter-spacing:0}
.tile .nota{font-size:11px; color:var(--ink-3); margin-top:4px}
.tile .faisca{position:absolute; right:14px; top:12px; width:64px; height:24px; opacity:.85}

.grade-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px}
@media (max-width:1240px){.grade-2{grid-template-columns:1fr}}
.grade-4{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:1240px){.grade-4{grid-template-columns:1fr}}

/* ============================================================ tabela ==== */
.rolax{overflow-x:auto}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px}
th{
  font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); text-align:left; padding:9px 11px;
  white-space:nowrap; background:var(--panel-2); border-bottom:1px solid var(--line);
}
th.ord{cursor:pointer; user-select:none; transition:color .12s}
th.ord:hover{color:var(--ink)}
th .seta{color:var(--brand); margin-left:3px; font-size:8px}
td{padding:0 11px; height:34px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--panel-2)}
tfoot td{background:var(--panel-2); font-weight:600; border-top:1px solid var(--line-2); border-bottom:0}
.r{text-align:right}
.cod{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-2);
  white-space:nowrap; width:62px; text-align:right}
.prod{max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fraco{color:var(--ink-3); font-size:11px}

.tabela-alta{max-height:calc(100vh - 272px); overflow:auto}
.tabela-alta thead th{position:sticky; top:0; z-index:3}
.tabela-alta .c1{position:sticky; left:0; z-index:2; background:var(--panel)}
.tabela-alta .c2{position:sticky; left:62px; z-index:2; background:var(--panel);
  min-width:216px; max-width:260px}
.tabela-alta thead .c1, .tabela-alta thead .c2{z-index:4; background:var(--panel-2)}
.tabela-alta tbody tr:hover .c1, .tabela-alta tbody tr:hover .c2{background:var(--panel-2)}
@media (max-width:900px){.tabela-alta .c2{position:static; min-width:150px}}
tr.clicavel{cursor:pointer}
tr.clicavel:hover td{background:var(--brand-soft)}

.marca-nivel{
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px;
  font-size:10.5px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.n-OUT{background:var(--out-soft); color:var(--out); border-color:var(--out-line)}
.n-OVER{background:var(--over-soft); color:var(--over); border-color:var(--over-line)}
.n-OK{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}

.faixa{display:inline-flex; gap:2px; align-items:center}
.faixa i{width:13px; height:16px; border-radius:3px; display:block; transition:transform .14s}
.faixa:hover i{transform:scaleY(1.16)}
.faixa i.OUT{background:var(--out)} .faixa i.OK{background:var(--ok)} .faixa i.OVER{background:var(--over)}

.barra-mini{position:relative; height:5px; background:var(--panel-3); border-radius:3px;
  overflow:hidden; min-width:52px}
.barra-mini i{display:block; height:100%; border-radius:3px;
  transition:width .5s var(--suave)}

.entrada{
  width:100%; padding:3px 7px; font-size:11.5px; border-radius:5px;
  background:transparent; border:1px solid transparent; color:var(--ink);
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.entrada:hover{border-color:var(--line-2)}
.entrada:focus{background:var(--panel); border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px var(--brand-soft)}
.entrada.sujo{border-color:var(--brand); background:var(--brand-soft)}
.entrada.salvo{border-color:var(--ok); background:var(--ok-soft)}
.entrada.falhou{border-color:var(--out); background:var(--out-soft)}
select.entrada{cursor:pointer}
input[type=number].entrada{text-align:right; font-family:"JetBrains Mono",monospace}

/* ============================================================ filtros ==== */
.barra-filtros{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
  padding:11px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1);
}
.barra-filtros .div{width:1px; height:20px; background:var(--line); margin:0 3px}
.pilulas{display:inline-flex; flex-wrap:wrap; gap:5px}
.pil{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:11.5px;
  border-radius:20px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink-2); transition:all .13s;
}
.pil:hover{border-color:var(--line-2); color:var(--ink); transform:translateY(-1px)}
.pil .n{font-family:"JetBrains Mono",monospace; font-size:10px; opacity:.65}
.pil[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.pil.OUT[aria-pressed="true"]{background:var(--out); border-color:var(--out); color:#fff}
.pil.OVER[aria-pressed="true"]{background:var(--over); border-color:var(--over); color:#fff}
.pil.OK[aria-pressed="true"]{background:var(--ok); border-color:var(--ok); color:#fff}
.seletor{padding:5px 9px; font-size:11.5px; border-radius:var(--r-sm); background:var(--panel-2);
  border:1px solid var(--line); color:var(--ink); max-width:190px}
.segm{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.segm button{padding:5px 11px; font-size:11.5px; color:var(--ink-3); background:var(--panel-2);
  transition:background .13s, color .13s}
.segm button:hover{color:var(--ink)}
.segm button[aria-pressed="true"]{background:var(--ink); color:var(--bg); font-weight:500}

/* ============================================================ gaveta ==== */
.cortina{position:fixed; inset:0; z-index:60; background:rgba(8,13,20,.55);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .2s}
.cortina.aberta{opacity:1; pointer-events:auto}
.gaveta{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,94vw); z-index:61;
  background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--sh-3);
  transform:translateX(102%); transition:transform .26s var(--suave);
  display:flex; flex-direction:column;
}
.gaveta.aberta{transform:none}
.gaveta-cab{display:flex; align-items:flex-start; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--line); background:var(--panel)}
.gaveta-cab h3{font-size:15px; line-height:1.25}
.gaveta-cab .cd{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.gaveta-corpo{padding:18px 20px 40px; overflow-y:auto; flex:1}
.gaveta-corpo section{margin-bottom:22px; animation:sobe .34s var(--suave) both}
.gaveta-corpo section > .eyebrow{display:block; margin-bottom:9px}
.fatos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fato{background:var(--panel); padding:10px 13px; min-width:0}
.fato .k{font-size:10.5px; color:var(--ink-3); margin-bottom:2px}
.fato .v{font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fato .v small{font-size:10.5px; color:var(--ink-3); font-weight:400}
.campo{margin-bottom:11px}
.campo label{display:block; font-size:11px; color:var(--ink-2); margin-bottom:4px; font-weight:500}
.campo .entrada{border-color:var(--line); background:var(--panel); padding:7px 10px; font-size:12.5px}

/* ============================================================ diversos ==== */
.vazio{padding:34px 20px; text-align:center; color:var(--ink-3); font-size:12.5px}
.vazio svg{width:26px; height:26px; margin:0 auto 8px; opacity:.5; display:block}
.legenda{display:flex; gap:15px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); margin-top:11px}
.legenda span{display:inline-flex; align-items:center; gap:6px}
.legenda i{width:9px; height:9px; border-radius:3px; display:inline-block; flex:none}
.legenda b{font-family:"JetBrains Mono",monospace; font-weight:600; color:var(--ink)}
.pilha{display:flex; height:13px; border-radius:5px; overflow:hidden; background:var(--panel-3)}
.pilha i{display:block; height:100%; transition:width .55s var(--suave)}
svg.graf{display:block; width:100%; height:auto}
svg.graf text{font-family:"JetBrains Mono",monospace; font-size:9px; fill:var(--ink-3)}
svg.graf .malha{stroke:var(--line); stroke-width:1; stroke-dasharray:3 3}
svg.graf .eixo{stroke:var(--line-2); stroke-width:1}
svg.graf .desenha{stroke-dasharray:var(--comp); stroke-dashoffset:var(--comp);
  animation:traco 1.1s var(--suave) forwards}
svg.graf .anel-v{transition:stroke-dasharray .9s var(--mola)}

.esqueleto{
  background:linear-gradient(90deg, var(--panel-3) 25%, var(--panel-2) 50%, var(--panel-3) 75%);
  background-size:720px 100%; animation:brilho 1.3s linear infinite;
  border-radius:6px; color:transparent!important;
}

.aviso-flutua{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:11px; padding:11px 16px; font-size:13px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--sh-3); animation:sobe .3s var(--mola) both;
}
.aviso-flutua.ok{border-color:var(--ok)} .aviso-flutua.ok svg{color:var(--ok)}
.aviso-flutua.erro{border-color:var(--out)} .aviso-flutua.erro svg{color:var(--out)}
.aviso-flutua svg{width:16px; height:16px; flex:none}

.zona{
  border:2px dashed var(--line-2); border-radius:var(--r); padding:22px; text-align:center;
  color:var(--ink-3); font-size:12.5px; transition:border-color .15s, background .15s;
  cursor:pointer;
}
.zona:hover, .zona.sobre{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
.zona svg{width:24px; height:24px; margin-bottom:7px; display:block; margin-inline:auto}

.selo{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px;
  font-size:10px; font-weight:600; font-family:"JetBrains Mono",monospace;
}
.selo.ok{background:var(--ok-soft); color:var(--ok)}
.selo.espera{background:var(--panel-3); color:var(--ink-3)}
.selo.alerta{background:var(--over-soft); color:var(--over)}

.erro-tela{min-height:100vh; display:grid; place-items:center; text-align:center; padding:24px}
.erro-tela .cod{font-family:"JetBrains Mono",monospace; font-size:64px; font-weight:600;
  color:var(--brand); letter-spacing:-.04em}
.erro-tela p{color:var(--ink-3); margin:6px 0 20px}