/* ===========================================================================
   Painel de transmissão
   ===========================================================================
   Uma tela de TV não é um celular grande. Três coisas mudam:

   1. NADA ROLA. Quem assiste não tem mouse. Se a informação não cabe, ela não
      existe — por isso o número de linhas de cada categoria é calculado em
      tempo de execução contra a altura real da tela, e não fixado aqui.
   2. Fundo escuro. É a proporção do manual (60% verde escuro) e é o que uma
      TV de salão projeta melhor; branco a três metros de distância cansa.
   3. O texto escala com a ALTURA da janela, não com a largura. Um telão de
      1920x1080 e um monitor de 1280x800 têm larguras parecidas e alturas bem
      diferentes, e é a altura que decide se a linha cabe.
   =========================================================================== */

:root {
  --tv-fundo: #08251B;
  --tv-carta: #0F3D2E;
  --tv-borda: rgba(255, 255, 255, .10);
  --tv-texto: #F2F6F3;
  --tv-fraco: #9CBBAC;
  --tv-realce: #7BB17A;
  --tv-ouro: #F7AF16;
  --tv-vivo: #58D68D;

  /* Escala única: tudo abaixo é múltiplo dela, então a página inteira cresce
     junto quando a tela é maior. */
  --u: clamp(9px, 1.35vh, 19px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;               /* a regra da casa: nada rola */
}

body {
  background: var(--tv-fundo);
  color: var(--tv-texto);
  font-family: 'Sora', system-ui, -apple-system, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.tela {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  gap: calc(var(--u) * .9);
}

/* ---- faixa de cima ---------------------------------------------------- */

.topo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  flex: none;
}
.topo-marca img, .topo-marca svg { height: calc(var(--u) * 2.9); width: auto; display: block; }
.topo-marca .nome { font-size: calc(var(--u) * 1.15); font-weight: 700; letter-spacing: .02em; }

.topo-titulo { min-width: 0; flex: 1 1 auto; }
.selo {
  margin: 0 0 calc(var(--u) * .18);
  font-size: calc(var(--u) * .74);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tv-realce);
  font-weight: 600;
}
.topo-titulo h1 {
  margin: 0;
  font-size: calc(var(--u) * 1.62);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-titulo .sub {
  margin: calc(var(--u) * .2) 0 0;
  font-size: calc(var(--u) * .82);
  color: var(--tv-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- números grandes da etapa ----------------------------------------- */

.macro { display: flex; gap: calc(var(--u) * 1.5); flex: none; align-items: flex-end; }
.macro > div { text-align: right; }
.macro .valor {
  display: block;
  font-size: calc(var(--u) * 1.85);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.macro .rotulo {
  display: block;
  margin-top: calc(var(--u) * .28);
  font-size: calc(var(--u) * .62);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--tv-fraco);
}
.macro .valor.destaque { color: var(--tv-ouro); }

.vivo {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .34) calc(var(--u) * .78);
  border-radius: 999px;
  border: 1px solid var(--tv-borda);
  font-size: calc(var(--u) * .7);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.vivo .ponto {
  width: calc(var(--u) * .48); height: calc(var(--u) * .48);
  border-radius: 50%; background: var(--tv-vivo);
  animation: pulsar 2s ease-in-out infinite;
}
.vivo[data-estado="ruim"] { color: var(--tv-ouro); border-color: rgba(247,175,22,.45); }
.vivo[data-estado="ruim"] .ponto { background: var(--tv-ouro); animation: none; }
@keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .vivo .ponto { animation: none } }

/* ---- vistas ------------------------------------------------------------- */

.vistas { display: flex; gap: calc(var(--u) * .3); flex: none; }
.aba-vista {
  padding: calc(var(--u) * .34) calc(var(--u) * .7);
  border-radius: 999px; border: 1px solid var(--tv-borda);
  background: none; color: var(--tv-fraco);
  font-family: inherit; font-size: calc(var(--u) * .64);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.aba-vista.ativa { background: var(--tv-realce); border-color: var(--tv-realce); color: #08251B; }
/* O cadeado nao e uma vista — fica separado das abas por uma borda tracejada,
   pra nao parecer mais uma opcao de tela. */
.aba-fixar { border-style: dashed; margin-left: calc(var(--u) * .3); }
.aba-fixar.fixado { border-color: var(--tv-ouro); color: var(--tv-ouro); border-style: solid; }

/* ---- barra de apuração ------------------------------------------------- */

.barra-apuracao {
  flex: none;
  height: calc(var(--u) * .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.barra-apuracao > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--tv-realce), var(--tv-vivo));
  border-radius: 999px;
  transition: width .6s ease;
}

/* ---- a grade de categorias -------------------------------------------- */

.grade {
  flex: 1 1 auto;
  min-height: 0;                  /* sem isto o grid estoura o flex e volta a rolar */
  display: grid;
  gap: calc(var(--u) * .8);
}

.cat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--tv-carta);
  border: 1px solid var(--tv-borda);
  border-radius: calc(var(--u) * .75);
  overflow: hidden;
}
.cat-topo {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .58) calc(var(--u) * .8);
  border-bottom: 1px solid var(--tv-borda);
  background: rgba(255, 255, 255, .035);
}
.cat-topo h2 {
  margin: 0;
  font-size: calc(var(--u) * .95);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-topo .contagem {
  font-size: calc(var(--u) * .64);
  color: var(--tv-fraco);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cat-corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; }

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead th {
  padding: calc(var(--u) * .3) calc(var(--u) * .5);
  font-size: calc(var(--u) * .56);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tv-fraco);
  text-align: right;
  border-bottom: 1px solid var(--tv-borda);
}
thead th.esq { text-align: left; padding-left: calc(var(--u) * .2); }
thead th.pos { text-align: left; padding-right: calc(var(--u) * .2); }
tbody td {
  padding: calc(var(--u) * .34) calc(var(--u) * .5);
  font-size: calc(var(--u) * .86);
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
/* Largura pelo texto, nao por multiplo de --u: "17o=" (posicao de dois
   digitos com empate, o pior caso real) cabe em 3ch. O padding direito da
   posicao mais o esquerdo do nome formam o respiro entre os dois, entao os
   dois encolhem junto com a coluna.
   O cabecalho ERA um <th colspan=2> unico: sem width proprio em nenhuma
   celula da PRIMEIRA linha da tabela, table-layout:fixed ignorava a largura
   que o corpo pedia e repartia o colspan do seu jeito — a mesma razao pela
   qual os outros pares th.num/td.num, abaixo, ja vinham casados. Virou
   th.pos + th.esq, um por coluna, com a MESMA largura do corpo. */
td.pos, th.pos {
  width: calc(var(--u) * .7 + 3ch); padding-right: calc(var(--u) * .2);
}
td.pos { color: var(--tv-fraco); text-align: left; font-weight: 600; }
td.nome {
  padding-left: calc(var(--u) * .2);
  text-align: left; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
/* Largura explicita nas quatro colunas de numero. Em `table-layout: fixed` a
   coluna SEM largura divide a sobra em partes iguais — sem isto o nome do
   atleta era cortado no meio. */
td.num, th.num { width: calc(var(--u) * 2.9); }
td.criterio { font-weight: 700; }
/* A coluna que nao classifica esta ali como referencia, e nao pode competir com
   a que decide: mesmo tamanho, menos peso e menos contraste. */
td.apoio { color: var(--tv-fraco); font-weight: 400; }
th.apoio { opacity: .65; }
td.pts, th.pts { width: calc(var(--u) * 2.4); }
td.pts { color: var(--tv-realce); font-weight: 700; }
th.criterio, th.pts { color: var(--tv-realce); }

/* O líder e o pódio: quem passa os olhos de longe precisa achar o topo sem ler
   a coluna de posição. */
tbody tr.p1 td { background: rgba(247, 175, 22, .12); }
tbody tr.p1 td.pos, tbody tr.p1 td.nome { color: var(--tv-ouro); }
tbody tr.p2 td.pos, tbody tr.p3 td.pos { color: var(--tv-texto); }

/* Linha que mudou desde a última busca. Some sozinha — é sinal de que a mesa
   acabou de lançar, e não um estado permanente. */
@keyframes acender {
  from { background: rgba(88, 214, 141, .30); }
  to   { background: transparent; }
}
tbody tr.mudou td { animation: acender 3.5s ease-out 1; }
@media (prefers-reduced-motion: reduce) { tbody tr.mudou td { animation: none } }

.cat-rodape {
  flex: none;
  min-height: calc(var(--u) * 1.28);
  padding: calc(var(--u) * .32) calc(var(--u) * .8);
  font-size: calc(var(--u) * .62);
  color: var(--tv-fraco);
  border-top: 1px solid var(--tv-borda);
  background: rgba(0, 0, 0, .12);
}
.cat-vazio {
  padding: calc(var(--u) * .9) calc(var(--u) * .8);
  font-size: calc(var(--u) * .74);
  color: var(--tv-fraco);
}

/* ---- rodapé ------------------------------------------------------------ */

.rodape {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * .62);
  color: var(--tv-fraco);
}
.rodape img, .rodape svg { height: calc(var(--u) * 1.5); width: auto; opacity: .8; }
.rodape .relogio { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ---- tela sem torneio -------------------------------------------------- */

.aviso-tela {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .6);
  text-align: center;
}
.aviso-tela h2 { margin: 0; font-size: calc(var(--u) * 2); font-weight: 700; }
.aviso-tela p { margin: 0; font-size: calc(var(--u) * .95); color: var(--tv-fraco); }

/* Em pé (algum telão de recepção é vertical) a faixa de cima empilha. */
@media (orientation: portrait) {
  .topo { flex-wrap: wrap; }
  .macro { width: 100%; justify-content: space-between; }
}