/* Inter servida localmente (OFL, ver fontes/LICENSE-Inter.txt): funciona offline e sem requisicao externa */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fontes/inter-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fontes/inter-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Barra de sistema e abas: painel da Vercel. Métricas e gráficos: Tremor. Estado: Vercel Geist.
   Faixa por ponto: GitHub Status. Tokens: design system Elephant. Ver referencias_design/. */
:root{
  --primary:200 80% 25%;
  --fg:220 25% 10%; --fg-2:220 12% 30%; --muted:220 9% 46%;
  --line:220 13% 91%; --line-2:220 14% 96%; --bg:0 0% 100%; --bg-side:220 20% 98.5%;
  --ok:152 60% 40%; --at:38 92% 50%; --cr:0 72% 51%; --info:205 85% 50%; --vazio:220 13% 91%;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:hsl(var(--bg));color:hsl(var(--fg));font:14px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11"}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.tn{font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.i.s{width:14px;height:14px}
[hidden]{display:none!important}

/* estado: ponto + texto (Geist) */
.st{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:hsl(var(--fg-2));white-space:nowrap}
.st i,.pt{width:8px;height:8px;border-radius:50%;background:hsl(var(--vazio));flex-shrink:0}
.st.ok i,.pt.ok{background:hsl(var(--ok))} .st.at i,.pt.at{background:hsl(var(--at))}
.st.cr i,.st.fa i,.pt.cr,.pt.fa{background:hsl(var(--cr))} .st.in i{background:hsl(var(--info))}
.st.cr,.st.fa{color:hsl(var(--cr))}

/* ---------- sidebar ---------- */
.side{position:fixed;inset:0 auto 0 0;width:264px;border-right:1px solid hsl(var(--line));background:hsl(var(--bg-side));display:flex;flex-direction:column;padding:0 16px 16px;z-index:20}
.marca{height:56px;display:flex;align-items:center;gap:10px;padding:0 4px;border-bottom:1px solid hsl(var(--line));margin:0 -16px;padding-left:20px}
.marca .av{width:28px;height:28px;border-radius:5px;background:hsl(var(--primary));color:#fff;display:flex;align-items:center;justify-content:center}
.marca b{font-size:14px;font-weight:600;display:block;line-height:1.2}
.marca small{font-size:12px;color:hsl(var(--muted))}
.sec{margin-top:24px;font-size:12px;color:hsl(var(--muted));padding:0 4px 6px}
.lista{display:flex;flex-direction:column;gap:1px}
.it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border-radius:var(--radius);font-size:14px;color:hsl(var(--fg-2));transition:background .12s,color .12s}
.it:hover{background:hsl(var(--line-2));color:hsl(var(--fg))}
.it svg{color:hsl(var(--muted))}
.it.ativo{color:hsl(var(--primary));font-weight:500;background:hsl(var(--primary)/.06)} .it.ativo svg{color:hsl(var(--primary))}
.side-pe{margin-top:auto;padding:12px 4px 0;border-top:1px solid hsl(var(--line));font-size:12px;color:hsl(var(--muted))}
.side-pe dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0}
.side-pe dd{margin:0;text-align:right;color:hsl(var(--fg-2))}

/* seletor de ponto (switcher de workspace da Tremor) */
.sel-ponto{position:relative}
.sel-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid hsl(var(--line));border-radius:var(--radius);background:hsl(var(--bg));box-shadow:0 1px 2px hsl(220 25% 10% / .04);text-align:left;transition:border-color .12s}
.sel-btn:hover{border-color:hsl(220 13% 82%)}
.sel-btn:focus-visible,.opc:focus-visible,.aba:focus-visible,.btn:focus-visible{outline:2px solid hsl(var(--primary)/.35);outline-offset:1px}
.sel-txt{flex:1;min-width:0}
.sel-txt b,.opc b{display:block;font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-txt small,.opc small{display:block;font-size:12px;color:hsl(var(--muted));line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-btn > svg{color:hsl(var(--muted))}
.sel-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:hsl(var(--bg));border:1px solid hsl(var(--line));border-radius:var(--radius);box-shadow:0 8px 24px hsl(220 25% 10% / .10);padding:4px;z-index:30;max-height:340px;overflow:auto}
.sel-ponto.aberto .sel-menu{display:block}
.cab-menu{font-size:12px;color:hsl(var(--muted));padding:6px 8px 4px}
.opc{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:4px;text-align:left}
.opc:hover{background:hsl(var(--line-2))}
.opc .txt{flex:1;min-width:0}
.opc .marca-sel{color:hsl(var(--primary));visibility:hidden}
.opc[aria-selected="true"] .marca-sel{visibility:visible}

/* ---------- barra de sistema (Vercel) ---------- */
main{margin-left:264px;min-height:100vh}
.topo{position:sticky;top:0;z-index:15;background:hsl(var(--bg)/.92);backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid hsl(var(--line))}
.topo-l1{height:56px;display:flex;align-items:center;gap:16px;padding:0 32px}
.trilha{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.trilha .sep{color:hsl(var(--line));font-size:20px;font-weight:300}
.trilha .raiz{color:hsl(var(--muted))}
.trilha b{font-weight:500;white-space:nowrap}
.trilha small{color:hsl(var(--muted));font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:16px}
.relogio{font-size:13px;color:hsl(var(--muted));font-variant-numeric:tabular-nums}
.ao-vivo{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:hsl(var(--fg-2))}
.ao-vivo i{width:8px;height:8px;border-radius:50%;background:hsl(var(--ok));box-shadow:0 0 0 0 hsl(var(--ok)/.5);animation:pulso 2s infinite}
.ao-vivo.off i{background:hsl(var(--cr));animation:none} .ao-vivo.pausa i{background:hsl(var(--at));animation:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 hsl(var(--ok)/.45)}70%{box-shadow:0 0 0 6px hsl(var(--ok)/0)}100%{box-shadow:0 0 0 0 hsl(var(--ok)/0)}}
.vsep{width:1px;height:20px;background:hsl(var(--line))}
.abas{display:flex;gap:4px;padding:0 24px;height:44px;align-items:stretch}
.aba{position:relative;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:14px;color:hsl(var(--muted));transition:color .12s}
.aba:hover{color:hsl(var(--fg))}
.aba.on{color:hsl(var(--fg))}
.aba.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:hsl(var(--fg));border-radius:2px}
.aba .n{font-size:12px;color:hsl(var(--muted));background:hsl(var(--line-2));border-radius:999px;padding:0 7px;line-height:18px;font-variant-numeric:tabular-nums}

.conteudo{padding:28px 32px 64px;max-width:1440px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
h2{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}
.sub{font-size:13px;color:hsl(var(--muted));margin:2px 0 0}
section + section{margin-top:48px}
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius);font-size:13px;font-weight:500;border:1px solid hsl(var(--line));background:hsl(var(--bg));transition:background .12s;white-space:nowrap}
.btn:hover{background:hsl(var(--line-2))}
.btn.pri{background:hsl(var(--fg));border-color:hsl(var(--fg));color:#fff}
.btn.pri:hover{background:hsl(220 20% 22%)}
.btn.ic{width:32px;padding:0;justify-content:center}
.btn:disabled{opacity:.4;pointer-events:none}

.alerta{display:none;margin:0 0 24px;border:1px solid hsl(0 75% 88%);background:hsl(0 85% 98.5%);border-radius:var(--radius);padding:12px 14px;gap:12px;align-items:flex-start}
.alerta.on{display:flex}
.alerta svg{color:hsl(var(--cr));margin-top:2px}
.alerta.at{border-color:hsl(40 85% 80%);background:hsl(42 95% 97.5%)} .alerta.at svg{color:hsl(30 85% 40%)}
.alerta b{font-weight:500;display:block}
.alerta small{color:hsl(var(--muted));font-size:13px}

/* pontos (GitHub Status) */
.pontos{margin-top:16px;border:1px solid hsl(var(--line));border-radius:var(--radius);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ponto{padding:16px 20px;border-top:1px solid hsl(var(--line));text-align:left;transition:background .12s;display:block;width:100%}
.ponto:nth-child(-n+2){border-top:0}
.ponto:nth-child(2n){border-left:1px solid hsl(var(--line))}
.ponto:only-child{grid-column:1/-1}
.ponto:hover{background:hsl(var(--line-2)/.6)}
.ponto.sel{box-shadow:inset 3px 0 0 hsl(var(--primary))}
.ponto-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ponto-cab b{font-weight:500}
.ponto-cab small{color:hsl(var(--muted));font-size:12px;margin-left:8px}
.faixa{display:flex;gap:2px;height:28px;margin-top:10px}
.faixa span{flex:1;border-radius:1px;background:hsl(var(--vazio))}
.faixa .f0{background:hsl(152 45% 72%)} .faixa .f1{background:hsl(var(--at))} .faixa .f2,.faixa .f3{background:hsl(var(--cr))}
.faixa-leg{display:flex;align-items:center;gap:12px;font-size:12px;color:hsl(var(--muted));margin-top:6px}
.faixa-leg hr{flex:1;border:0;border-top:1px solid hsl(var(--line));margin:0}
.ponto-val{display:flex;gap:20px;margin-top:10px;font-size:13px;color:hsl(var(--muted));flex-wrap:wrap}
.ponto-val b{color:hsl(var(--fg));font-weight:500}

/* três colunas */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:20px}
.met h3{font-size:14px;font-weight:500;margin:0;color:hsl(var(--fg-2))}
.met .v{font-size:28px;font-weight:400;letter-spacing:-.02em;line-height:1.3;margin-top:4px}
.met .det{font-size:13px;color:hsl(var(--muted));margin-top:2px}
.barras{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.barra-lin{display:flex;justify-content:space-between;font-size:14px;color:hsl(var(--fg-2))}
.barra-lin span:last-child{font-variant-numeric:tabular-nums;color:hsl(var(--fg))}
.barra-lin span:last-child i{font-style:normal;color:hsl(var(--muted))}
.trilho{height:6px;border-radius:999px;background:hsl(var(--primary)/.1);margin-top:6px;overflow:hidden}
.trilho span{display:block;height:100%;border-radius:999px;background:hsl(var(--primary));transition:width .4s}
.nota{font-size:13px;color:hsl(var(--muted));margin-top:18px}
.nota a,.link{color:hsl(var(--primary))} .nota a:hover,.link:hover{text-decoration:underline}
.seg{display:flex;gap:2px;height:8px;margin-top:22px;border-radius:999px;overflow:hidden;background:hsl(var(--line-2))}
.seg span{height:100%;transition:width .4s}
.leg{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.leg .linha{display:flex;justify-content:space-between;font-size:13px}
.leg .linha span:last-child{color:hsl(var(--muted));font-variant-numeric:tabular-nums}
.kv-lin{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid hsl(var(--line));font-size:14px;color:hsl(var(--fg-2))}

/* controles */
.ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-bottom:16px;border-bottom:1px solid hsl(var(--line))}
.segm{display:inline-flex;border:1px solid hsl(var(--line));border-radius:var(--radius);overflow:hidden}
.segm button{height:30px;padding:0 12px;font-size:13px;color:hsl(var(--muted));border-left:1px solid hsl(var(--line))}
.segm button:first-child{border-left:0}
.segm button.on{background:hsl(var(--line-2));color:hsl(var(--fg));font-weight:500}
.ctrl-esq{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:hsl(var(--muted))}

/* gráficos */
.graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:24px}
.gr-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gr-cab h3{font-size:14px;font-weight:500;margin:0;color:hsl(var(--fg-2))}
.gr-val{display:flex;justify-content:space-between;align-items:baseline;margin-top:2px}
.gr-val .v{font-size:28px;font-weight:400;letter-spacing:-.02em}
.gr-val .v small{font-size:14px;color:hsl(var(--muted));margin-left:4px;letter-spacing:0}
.gr-val .ref{font-size:13px;color:hsl(var(--muted))}
.gr{position:relative;margin-top:10px}
canvas{display:block;width:100%}
.gr-eixo{display:flex;justify-content:space-between;font-size:12px;color:hsl(var(--muted));margin-top:6px;font-variant-numeric:tabular-nums;padding-left:40px}
.tip{position:absolute;pointer-events:none;display:none;background:hsl(var(--bg));border:1px solid hsl(var(--line));border-radius:var(--radius);box-shadow:0 4px 12px hsl(220 25% 10% / .08);padding:8px 10px;font-size:12px;z-index:5;min-width:170px;white-space:nowrap}
.tip .t{font-weight:500;margin-bottom:4px}
.tip .l{display:flex;align-items:center;gap:8px;color:hsl(var(--muted))}
.tip .l i{width:8px;height:2px;border-radius:1px}
.tip .l b{margin-left:auto;font-weight:500;color:hsl(var(--fg));font-variant-numeric:tabular-nums}

/* tabelas (Geist) e paginação */
.tabela{margin-top:16px;border:1px solid hsl(var(--line));border-radius:var(--radius);overflow:hidden}
.tab-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;font-size:13px;color:hsl(var(--muted));padding:10px 16px;border-bottom:1px solid hsl(var(--line));white-space:nowrap;background:hsl(var(--bg-side))}
td{padding:10px 16px;color:hsl(var(--fg-2));vertical-align:top;border-bottom:1px solid hsl(var(--line-2))}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:hsl(var(--line-2)/.5)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.forte{color:hsl(var(--fg));font-weight:500}
td.mut{color:hsl(var(--muted))}
td.nw{white-space:nowrap}
.pag{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid hsl(var(--line));font-size:13px;color:hsl(var(--muted));background:hsl(var(--bg-side))}
.pag-dir{display:flex;align-items:center;gap:8px}
.pag select{height:30px;border:1px solid hsl(var(--line));border-radius:var(--radius);background:hsl(var(--bg));font:inherit;font-size:13px;padding:0 6px;color:hsl(var(--fg))}
.pag .btn{height:30px}
.pag .btn.ic{width:30px}
.vazio{padding:40px 16px;text-align:center;color:hsl(var(--muted))}
.vazio b{display:block;color:hsl(var(--fg));font-weight:500;margin-bottom:2px}
.obs{margin-top:16px;font-size:13px;color:hsl(var(--muted));display:flex;gap:8px;align-items:flex-start}
.obs b{color:hsl(var(--fg));font-weight:500}
.vivo-nota{font-size:12px;color:hsl(var(--muted));display:inline-flex;align-items:center;gap:6px}

@media (max-width:1180px){.tres{grid-template-columns:1fr 1fr}.graficos{grid-template-columns:1fr}}
@media (max-width:960px){
  .side{display:none} main{margin-left:0}
  .topo-l1{padding:0 16px} .abas{padding:0 8px;overflow-x:auto} .conteudo{padding:20px 16px 40px}
  .relogio,.vsep{display:none}
  .tres{grid-template-columns:1fr;gap:32px}
  .pontos{grid-template-columns:1fr} .ponto:nth-child(2n){border-left:0} .ponto:nth-child(2){border-top:1px solid hsl(var(--line))}
}
@media (max-width:640px){table{min-width:640px} .topo-dir .btn span{display:none}}

.btn.sair{color:hsl(var(--muted))}
.cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:hsl(var(--line-2));padding:1px 5px;border-radius:4px;color:hsl(var(--fg))}
td .mut{color:hsl(var(--muted));font-weight:400}
.nota.erro{color:hsl(var(--cr))}
.form-placa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin-top:16px;max-width:960px}
.form-placa label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:hsl(var(--fg-2))}
.form-placa input,.form-placa select{height:36px;border:1px solid hsl(var(--line));border-radius:var(--radius);padding:0 10px;font:inherit;font-size:14px;background:hsl(var(--bg));color:hsl(var(--fg))}
.form-placa input:focus,.form-placa select:focus{outline:none;border-color:hsl(var(--primary)/.6);box-shadow:0 0 0 3px hsl(var(--primary)/.12)}
.form-acoes{display:flex;gap:8px;align-items:flex-end}
@media (max-width:960px){.form-placa{grid-template-columns:1fr}}

/* ---------- barra do topo e responsividade ---------- */
.topo-l1{min-width:0}
.trilha{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.trilha b{overflow:hidden;text-overflow:ellipsis}
.topo-dir{flex-shrink:0}
.ao-vivo{white-space:nowrap}
.aba{white-space:nowrap;flex-shrink:0}
.abas{overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.menu{display:none}
.veu{display:none}
@media (max-width:1280px){.trilha small,.raiz{display:none}}
@media (max-width:1100px){
  .relogio,.vsep{display:none}
  .topo-dir .btn span{display:none}
  .topo-dir .btn{width:32px;padding:0;justify-content:center}
}
@media (max-width:960px){
  .menu{display:inline-flex}
  .side{display:flex;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 0 hsl(220 25% 10% / 0);z-index:40;overflow-y:auto}
  body.menu-aberto .side{transform:none;box-shadow:0 10px 30px hsl(220 25% 10% / .18)}
  body.menu-aberto .veu{display:block;position:fixed;inset:0;background:hsl(220 25% 10% / .35);z-index:35}
  body.menu-aberto{overflow:hidden}
  .topo-l1{padding:0 12px;gap:10px}
  .topo-dir{gap:8px}
  .ao-vivo span{display:none}
}
@media (max-width:640px){
  .conteudo{padding:16px 12px 32px}
  h2{font-size:15px}
  .met .v,.gr-val .v{font-size:24px}
  .ponto{padding:14px}
  .ponto-val{gap:12px}
  .pag{flex-direction:column;align-items:flex-start}
  .ctrl{flex-direction:column;align-items:flex-start}
  .segm{max-width:100%;overflow-x:auto}
  .form-acoes{flex-wrap:wrap}
}