/* Tela de fábrica (monitor/TV lido a 3–6 m). Cores por PAPEL em variáveis: trocar a paleta é trocar só este bloco.
   Padrão escuro de baixo ofuscamento; estados NUNCA dependem só de cor (têm rótulo e ícone em texto). */
@font-face { font-family: "Inter"; src: url("../bancada/fontes/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --fundo: #0f1216; --superficie: #1a1f26; --texto: #f3f5f8; --texto-2: #a6b0bf; --borda: #333c4a;
  --destaque: #4ade80; --sobre-destaque: #0f1216; --alerta: #facc15; --sobre-alerta: #0f1216; --erro: #f87171;
  --linha: clamp(64px, 9.2vh, 132px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--fundo); color: var(--texto); font-family: "Inter", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.oculto { display: none !important; }
.faixa { padding: 0.6vh 2vw; font-size: clamp(16px, 2.2vh, 30px); font-weight: 700; text-align: center; }
.faixa.simulado { background: var(--alerta); color: var(--sobre-alerta); }
.faixa.alerta { background: var(--erro); color: #0f1216; }

.tv { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 1.6vh 2vw 1vh; gap: 1vh; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 2vw; border-bottom: 2px solid var(--borda); padding-bottom: 1vh; }
.topo h1 { margin: 0; font-size: clamp(28px, 5.4vh, 76px); line-height: 1.05; letter-spacing: 0; }
.resumo { margin: 0.4vh 0 0; color: var(--texto-2); font-size: clamp(16px, 2.6vh, 36px); }
.relogio { text-align: right; white-space: nowrap; }
.relogio strong { display: block; font-size: clamp(28px, 5.4vh, 76px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.relogio span { color: var(--texto-2); font-size: clamp(14px, 2.1vh, 28px); }

.cabecalho, .lista li { display: grid; grid-template-columns: 7vw minmax(0, 1fr) 13vw 17vw 17vw; align-items: center; column-gap: 1.2vw; padding: 0 1.2vw; }
.cabecalho { color: var(--texto-2); font-size: clamp(14px, 2.1vh, 28px); text-transform: none; }
.lista { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.7vh; min-height: 0; }
.lista li { flex: 1 1 0; min-height: 0; max-height: var(--linha); background: var(--superficie); border: 2px solid var(--borda); border-radius: 10px; font-size: clamp(22px, 4.3vh, 62px); font-variant-numeric: tabular-nums; }
.lista .n { font-weight: 700; color: var(--texto-2); }
.lista .codigo { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.lista .codigo small { display: block; font: 700 clamp(13px, 1.9vh, 26px) system-ui, sans-serif; letter-spacing: 0.04em; margin-bottom: 0.2vh; }
.lista li.proxima { border-color: var(--destaque); border-width: 4px; background: #14241a; }
.lista li.proxima .n, .lista li.proxima .codigo small { color: var(--destaque); }
.lista li.divergente { border-color: var(--alerta); border-style: dashed; }
.lista li.divergente .codigo small { color: var(--alerta); }
.estado { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(26px, 5vh, 70px); color: var(--texto-2); margin: 0; padding: 0 6vw; }
.rodape { display: flex; justify-content: space-between; align-items: center; gap: 2vw; color: var(--texto-2); font-size: clamp(13px, 1.9vh, 26px); border-top: 2px solid var(--borda); padding-top: 0.8vh; }
.discreto { background: none; border: 1px solid var(--borda); color: var(--texto-2); border-radius: 8px; padding: 0.4vh 1vw; font: inherit; cursor: pointer; }

.login { max-width: 520px; margin: 8vh auto; padding: 0 20px; font-size: 20px; }
.login h1 { font-size: 40px; margin: 0 0 8px; }
.login label { display: block; margin: 16px 0; color: var(--texto-2); }
.login input { display: block; width: 100%; margin-top: 6px; padding: 14px; font-size: 22px; border-radius: 10px; border: 2px solid var(--borda); background: var(--superficie); color: var(--texto); }
.login button { width: 100%; padding: 16px; font-size: 24px; font-weight: 700; border: 0; border-radius: 10px; background: var(--destaque); color: var(--sobre-destaque); cursor: pointer; }
.login .erro { color: var(--erro); min-height: 1.4em; }
@media (max-width: 700px) { .cabecalho, .lista li { grid-template-columns: 12vw minmax(0, 1fr) 0 26vw 24vw; } .cabecalho span:nth-child(3), .lista li > :nth-child(3) { display: none; } }