/* Dashboards das TVs (decisão 0017). Quadro fixo 16:9 (desenhado para 1920×1080), centralizado e sempre inteiro,
   sem rolagem. Todas as medidas usam --u = 1% da largura do quadro. Sem verde: as cores ainda não dizem bom/ruim. */
@font-face { font-family: "Michroma"; font-weight: 400; font-display: swap; src: url("fontes/michroma-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fontes/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fontes/barlow-600.woff2") format("woff2"); }

:root {
  --bg: #000000;
  --fg: #f4f6f8;
  --muted: #a3acb6;
  --faint: #2c323a;
  --amber: #f7b94a;
  --coral: #ff6f5e;
  --ice: #82c8ff;
  --violet: #bfaeff;
  --f-marca: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --f-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --u: min(1vw, 1.7778vh);
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-texto); display: grid; place-items: center; cursor: default; }
.tela {
  width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); box-sizing: border-box;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6);
  position: relative; isolation: isolate; overflow: hidden;
}
/* horizonte: um arco de luz fraco no pé da tela, como a curvatura da Terra vista de órbita */
.tela::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: calc(var(--u) * -86); height: calc(var(--u) * 90); z-index: -1;
  border-radius: 50%; box-shadow: 0 -2px 60px rgba(130, 200, 255, .12), inset 0 1px 0 rgba(130, 200, 255, .22);
  pointer-events: none;
}
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { font-family: var(--f-marca); font-weight: 400; font-size: calc(var(--u) * 2.6); letter-spacing: .42em; margin: 0; }
nav { display: flex; align-items: center; gap: calc(var(--u) * .4); opacity: .6; }
nav:hover, nav:focus-within { opacity: 1; }
nav a {
  font: 600 calc(var(--u) * 1)/1 var(--f-texto); color: var(--muted); text-decoration: none;
  border: 1px solid var(--faint); border-radius: 3px;
  min-width: 1.9em; height: 1.9em; display: grid; place-items: center; padding: 0 .35em; box-sizing: border-box;
}
nav a[aria-current="page"] { color: var(--fg); border-color: var(--muted); }
nav a.rolar[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
nav a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
nav svg { width: .8em; height: .8em; }

.progresso { position: absolute; top: 0; left: 0; height: 3px; background: var(--muted); width: 0; opacity: 0; }
.rodando .progresso { opacity: .5; animation: encher 5s linear infinite; }
@keyframes encher { from { width: 0; } to { width: 100%; } }

main { display: grid; align-content: center; min-height: 0; }
.dash { display: none; }
.dash.ativo { display: grid; animation: entrar .5s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.par { grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 3.5); row-gap: calc(var(--u) * 1.8); }
.par .meio { border-left: 2px solid var(--faint); padding-left: calc(var(--u) * 3.5); }
.solo { justify-items: center; text-align: center; }

.ind { display: grid; gap: calc(var(--u) * .3); min-width: 0; align-content: start; }
.rotulo {
  font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--fg);
  font-size: calc(var(--u) * 3.3); line-height: 1.08; margin: 0; text-wrap: balance;
}
.linha { display: flex; align-items: baseline; min-width: 0; overflow: hidden; }
.num { font-weight: 600; line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-size: calc(var(--u) * 17.5); white-space: nowrap; }
#painel-2 .num { font-size: calc(var(--u) * 24); }
#painel-2 .rotulo { min-height: 2.16em; display: flex; align-items: flex-end; }
.solo .num { font-size: calc(var(--u) * 31); }
.seta { font-weight: 600; display: inline-flex; align-items: center; gap: .15em; font-variant-numeric: tabular-nums; margin-right: .6em; }
.seta:empty { display: none; }
.seta svg { width: .75em; height: .75em; }
.ontem { color: var(--muted); font-size: calc(var(--u) * 3.1); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin: 0; display: flex; align-items: center; }
.ontem b { color: var(--fg); font-weight: 600; letter-spacing: 0; margin-left: .35em; font-variant-numeric: tabular-nums; }
.solo .linha, .solo .ontem { justify-content: center; }
.solo .rotulo { font-size: calc(var(--u) * 4.4); }
.solo .ontem { font-size: calc(var(--u) * 4); }

/* Executadas: uma faixa só, rótulo, número e ontem na mesma linha */
.faixa { grid-column: 1 / -1; border-top: 2px solid var(--faint); padding-top: calc(var(--u) * 1.4); display: flex; align-items: baseline; gap: calc(var(--u) * 3); }
.faixa .num { font-size: calc(var(--u) * 11.5); }
.faixa .linha { overflow: visible; }
.faixa .ontem { margin-left: auto; }

.amber { color: var(--amber); } .coral { color: var(--coral); } .ice { color: var(--ice); } .violet { color: var(--violet); }
.sem-dado .num { color: var(--faint); }

footer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: calc(var(--u) * 1.3); font-weight: 500; letter-spacing: .06em; }
footer .alerta { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .dash.ativo { animation: none; } .rodando .progresso { animation: none; opacity: 0; }
}