/* painel.css - design system do painel da live (gramatica do dashboard NodeCG, identidade Rips 2).
 * Trocar uma cor aqui muda o painel todo; nenhum painel tem CSS proprio.
 * Cantos retos, sombra dura, planos azuis; ciano so no que esta ativo (guia p. 10-19). */
@font-face{font-family:'Rips Sans';font-weight:600;font-display:block;src:url('/g/fonts/RipsSans/RipsSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Rips Sans';font-weight:900;font-display:block;src:url('/g/fonts/RipsSans/RipsSans-Black.woff2') format('woff2')}

:root{
  --marinho:#16114A;--c1:#030E16;--c2:#061722;--c3:#092030;--c4:#0E2D43;--c5:#163C58;
  --ciano:#5FF3E4;--azul:#4D7CFF;--vermelho:#FF4D5E;--texto:#fff;--apagado:#7f97a8;
  --sombra:3px 5px 0 rgba(0,0,0,.55);
  --h-ctl:36px;      /* uma altura so para input, select e botao de linha */
}
*{box-sizing:border-box;margin:0}
body{font-family:'Rips Sans',sans-serif;font-weight:600;font-size:14px;color:var(--texto);min-height:100vh;
  background:linear-gradient(160deg,var(--c1) 0 30%,var(--c2) 30% 55%,var(--c3) 55% 80%,var(--c4) 80%)}

/* topo + abas */
.topo{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--c1);border-bottom:2px solid var(--c5)}
.topo h1{font-weight:900;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.topo h1 b{color:var(--ciano)}
.abas{display:flex;gap:6px;margin-left:12px}
.abas button{height:var(--h-ctl);padding:0 14px;background:var(--c4);color:var(--apagado)}
.abas button[aria-selected=true]{background:var(--c5);color:var(--ciano)}
.conexao{margin-left:auto;font-size:12px;font-weight:900;text-transform:uppercase;color:var(--apagado)}
.conexao.ok{color:var(--ciano)}
.conexao.mal{color:var(--vermelho)}

/* grade de paineis (cada .painel = um bloco de operacao) */
.aba{padding:16px}
.aba[hidden]{display:none}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.painel{background:var(--c3);box-shadow:var(--sombra);padding:12px}

/* gramatica do bloco: .sechd / .campo / .barra / .status */
.sechd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sechd h2{font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.sechd.sep{margin-top:16px;padding-top:12px;border-top:2px solid var(--c5)}
.onair{font-weight:900;font-size:11px;text-transform:uppercase;padding:3px 8px;background:var(--vermelho);color:#fff;visibility:hidden}
.onair.on{visibility:visible}
.barra{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status{margin-top:8px;font-size:12px;color:var(--apagado);min-height:1em}
.status:empty{display:none}

button{font:inherit;font-weight:900;text-transform:uppercase;font-size:13px;border:0;border-radius:0;cursor:pointer;
  height:var(--h-ctl);padding:0 12px;background:var(--c5);color:#fff;box-shadow:var(--sombra)}
button:hover:not(:disabled){background:var(--c4)}
button:active:not(:disabled){box-shadow:none;transform:translate(3px,5px)}
button:disabled{opacity:.35;cursor:default;box-shadow:none}
button:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
button.play{background:var(--ciano);color:var(--marinho)}
button.out{background:var(--marinho);color:#fff}

/* aba Caminhos */
table.caminhos{width:100%;border-collapse:collapse;background:var(--c3);box-shadow:var(--sombra)}
table.caminhos th,table.caminhos td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--c5);vertical-align:middle}
table.caminhos th{font-weight:900;font-size:11px;text-transform:uppercase;color:var(--apagado)}
table.caminhos code{font-family:ui-monospace,monospace;font-size:12px;word-break:break-all}
table.caminhos td.acoes{white-space:nowrap}
table.caminhos td.acoes button{margin-right:6px}

/* campo: rotulo + input (+ SETAR quando houver) */
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.campo label{font-weight:900;font-size:11px;text-transform:uppercase;color:var(--apagado)}
input{font:inherit;height:var(--h-ctl);padding:0 10px;border:0;border-radius:0;background:var(--c4);color:#fff}
input:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}

/* tela de login */
body.login{display:grid;place-items:center;padding:16px}
body.login .painel{width:min(360px,100%)}
body.login .barra{grid-template-columns:1fr}
body.login .sechd h2 b{color:var(--ciano)}

/* campo em linha: input + SETAR na mesma altura (--h-ctl) */
.linha{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.linha input{width:100%;min-width:0}

/* aba GFX (id interno "caminhos"): topo com a versao do build e REFRESH ALL; selo de versao por linha */
.gfx-topo{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:10px}
.gfx-build{font:12px ui-monospace,monospace;color:var(--apagado)}
.versao{font-weight:900;font-size:11px;text-transform:uppercase;padding:3px 8px;white-space:nowrap}
.versao.ok{background:var(--c5);color:var(--ciano)}
.versao.velho{background:var(--vermelho);color:#fff}
.versao.fora{color:var(--apagado)}

/* aba Caminhos: secao Comandos HTTP */
.secao{margin-top:24px}
.secao > h2{font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.secao .campo{max-width:360px}
table.caminhos td.met{font-weight:900;font-size:11px;color:var(--ciano)}
table.caminhos td.desc{font-size:12px;color:var(--apagado)}
table.caminhos tr.grupo td{font-weight:900;font-size:11px;text-transform:uppercase;color:var(--ciano);background:var(--c2)}

/* aba Preview: palco 9:16 escalado (o JS calcula a escala) + coluna de controles */
.pv{display:grid;grid-template-columns:auto minmax(320px,420px);gap:16px;align-items:start}
.pv-palco-caixa{position:relative;box-shadow:var(--sombra)}
.pv-palco{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#4a4f55 0,#2b2f33 55%,#1b1d20 100%)}
.pv-palco iframe{position:absolute;inset:0;width:1080px;height:1920px;border:0;background:transparent;pointer-events:none}
.pv-hit{position:absolute;cursor:pointer}
.pv-hit.sel,.pv-caixas .pv-hit{outline:4px dashed var(--ciano);outline-offset:-2px}
.pv-hit.sel{outline-style:solid;background:rgba(95,243,228,.08)}
.pv-hit span{position:absolute;left:0;top:-30px;font:900 20px 'Rips Sans';color:var(--ciano);text-transform:uppercase;display:none}
.pv-hit.sel span,.pv-caixas .pv-hit span{display:block}
/* UI falsa do TikTok: so para ver o que fica escondido */
.pv-tt{position:absolute;inset:0;pointer-events:none;z-index:50}
.pv-tt[hidden]{display:none}
.pv-tt .topo{position:absolute;left:40px;top:70px;display:flex;align-items:center;gap:16px;font:600 30px system-ui,sans-serif;color:#fff}
.pv-tt .topo i{width:72px;height:72px;border-radius:50%;background:#888}
.pv-tt .topo b{font-weight:800}
.pv-tt .topo em{font-style:normal;background:#fe2c55;padding:2px 10px;font-size:24px;font-weight:800}
.pv-tt .widget{position:absolute;left:800px;top:250px;width:240px;height:290px;padding:16px;border-radius:16px;background:rgba(0,0,0,.35);
  font:600 28px system-ui,sans-serif;color:#fff}
.pv-tt .widget b{font-size:48px}
.pv-tt .coment{position:absolute;left:30px;top:1320px;width:860px;display:flex;flex-direction:column;gap:18px}
.pv-tt .coment i{display:block;height:64px;border-radius:32px;background:rgba(0,0,0,.45)}
.pv-tt .barra-tt{position:absolute;left:30px;right:30px;top:1770px;height:100px;border-radius:50px;background:rgba(255,255,255,.18)}
select{font:inherit;height:var(--h-ctl);padding:0 10px;border:0;border-radius:0;background:var(--c4);color:#fff}
.pv-chk{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:900;text-transform:uppercase;margin:6px 0}
.pv-ajuste{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.pv-url{display:block;margin:6px 0 10px;font:12px ui-monospace,monospace;word-break:break-all;color:var(--ciano)}
.pv-lin{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--c5)}
.pv-lin .nome{font-weight:900;font-size:12px;text-transform:uppercase;cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pv-lin button{padding:0 10px}
/* a aba Preview escondida continua com layout (fora da tela, invisivel), nao display:none: os
   graficos medem caixa e texto na hora de animar, e dentro de um iframe sem layout tudo mede 0 */
#aba-preview[hidden]{display:block;position:absolute;left:-99999px;top:0;visibility:hidden}

/* aba Operacao: uma linha por peca, na ordem da live. nome · selo · PLAY · OUT · engrenagem */
.lista-ar{max-width:760px;padding:4px 12px}
.linha-ar{display:grid;grid-template-columns:1fr auto 110px 110px var(--h-ctl);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--c5)}
.linha-ar:last-child{border-bottom:0}
.linha-ar .nome{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.linha-ar .onair{min-width:96px;text-align:center}
.eng{position:relative}
.eng summary{list-style:none;display:grid;place-items:center;width:var(--h-ctl);height:var(--h-ctl);cursor:pointer;
  background:var(--c4);color:var(--apagado);font-size:18px;box-shadow:var(--sombra)}
.eng summary::-webkit-details-marker{display:none}
.eng summary:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.eng[open] summary{background:var(--c5);color:var(--ciano)}
.eng.erro summary{color:var(--vermelho)}
.eng .pop{position:absolute;right:0;top:calc(var(--h-ctl) + 8px);z-index:20;width:320px;padding:12px;background:var(--c3);box-shadow:4px 8px 0 rgba(0,0,0,.62)}
.eng .pop label{display:block;font-weight:900;font-size:11px;text-transform:uppercase;color:var(--apagado);margin-bottom:6px}

/* ---------- aba Operacao: blocos da live (paineis/bloco_*.js) + linhas dos graficos ---------- */
.op{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:16px;align-items:start}
.op-blocos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.op{grid-template-columns:1fr}}
.lista-ar{max-width:none}
.bloco > .barra,.bloco > .linha,.bloco > .seg{margin-bottom:4px}
.barra3{grid-template-columns:1fr 1fr var(--h-ctl)}
.selo-st{font-weight:900;font-size:11px;text-transform:uppercase;padding:3px 8px;background:var(--c5);color:var(--apagado)}
.selo-st.ok{background:var(--ciano);color:var(--marinho)}
.selo-st.mal{background:var(--vermelho);color:#fff}
button.perigo{background:var(--vermelho);color:#fff}
button.largo{width:100%}
button.mini{height:28px;padding:0 8px;font-size:11px;box-shadow:none}
select{font:inherit;height:var(--h-ctl);padding:0 8px;border:0;border-radius:0;background:var(--c4);color:#fff;width:100%}
.eng .pop input,.eng .pop select{width:100%;margin-bottom:8px}
.eng .pop .linha input{margin-bottom:0}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duas input{width:100%}
a.link{font-weight:900;font-size:12px;text-transform:uppercase;color:var(--ciano)}
a.botao{display:inline-grid;place-items:center;height:var(--h-ctl);padding:0 14px;background:var(--c5);color:#fff;font-weight:900;font-size:13px;
  text-transform:uppercase;text-decoration:none;box-shadow:var(--sombra)}
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.numeros small{display:block;font-weight:900;font-size:11px;text-transform:uppercase;color:var(--apagado)}
.numeros b{font-weight:900;font-size:24px}
/* toggle Automatico/Fila: o pressionado e o modo atual */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0}
.seg button{box-shadow:none;background:var(--c4);color:var(--apagado)}
.seg button[aria-pressed=true]{background:var(--ciano);color:var(--marinho);opacity:1}
/* lista de scans */
.scans{max-height:300px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.scan{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;flex:none;height:auto;min-height:66px;padding:5px 8px;text-align:left;line-height:1.35;
  text-transform:none;font-weight:600;background:var(--c4);box-shadow:none}
.scan.sel{outline:2px solid var(--ciano);outline-offset:-2px}
.scan.feito{opacity:.55}
.scan.conferir small{color:#ffd166}
.thumb{width:40px;height:56px;object-fit:cover;background:var(--c2)}
.txt{display:flex;flex-direction:column;min-width:0}
.txt b{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txt small{font-size:11px;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel{margin-top:10px;padding-top:10px;border-top:2px solid var(--c5)}
.pend{margin-top:10px}
.pend:empty{display:none}
.pend .rot{font-weight:900;font-size:11px;text-transform:uppercase;color:#ffd166;margin-bottom:6px}
.pend .linha{grid-template-columns:1fr 90px auto;margin-bottom:6px;align-items:center}
.pend-nome{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vazio,.apagado{font-size:12px;color:var(--apagado)}

/* ---------- abas Participantes e Sorteados ---------- */
.part-topo{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.part-topo input{width:min(360px,100%)}
.part-topo .status{margin:0}
.part-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:1100px){.part-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sechd h2 span{color:var(--ciano);margin-left:6px}
.itens{max-height:calc(100vh - 210px);overflow:auto}
.item{display:flex;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--c5)}
.item .txt{flex:1}
.item.barrado b{color:var(--apagado)}
table.sorteados td{vertical-align:top}
table.sorteados .num{text-align:right;white-space:nowrap}
table.sorteados .forte{font-weight:900}
table.sorteados tfoot td{font-weight:900;font-size:16px;border-bottom:0}
.ganho{display:grid;grid-template-columns:40px minmax(140px,1fr) 80px auto auto auto;gap:6px;align-items:center;padding:4px 0}
.ganho input{height:28px;width:100%}
.ganho.cancelado{grid-template-columns:40px 1fr;opacity:.5}
.ganho.cancelado .txt b,.ganho.cancelado .txt small{text-decoration:line-through}
.ganho.creditado small{color:var(--ciano)}
.pv-legenda{font-size:12px;font-weight:900;text-transform:uppercase;color:var(--apagado);margin:6px 0}
/* aba Preview: arrastar peca */
.pv-hit.sel{cursor:move}
.pv-hit .pv-alca{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;background:var(--ciano);cursor:nwse-resize;display:none}
.pv-hit.sel .pv-alca{display:block}
.pv-hit.ruim{outline-color:var(--vermelho)!important;background:rgba(255,77,94,.15)!important}
.pv-sel-barra{grid-template-columns:1fr 1fr;row-gap:8px}