/* Tela de TV: só leitura, sem interação, letras grandes pra ver de longe. */

html, body.tv-body {
  height: 100%;
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  overflow: hidden;
}

.tv-tela {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(10px, 1.6vh, 32px) clamp(16px, 2vw, 40px);
}

.tv-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cor-borda);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.tv-marca {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: 700;
}

.tv-relogio {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--fonte-dados);
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  color: var(--cor-texto-fraco);
}

.tv-ao-vivo { display: flex; align-items: center; gap: 8px; color: var(--cor-perigo); font-weight: 600; }
.tv-ponto-vivo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cor-perigo);
  animation: tv-pulsar 1.4s infinite;
}
@keyframes tv-pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.tv-conteudo {
  flex: 1.35;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
}

/* "Próximo da fila" + "Em entrega" + "Música" dividem uma coluna de altura
   fixa. --tv-escala-coluna (ajustada pelo tv.js) cresce ou encolhe os três
   juntos pra sempre caberem sem cortar nada nem sobrar espaço em branco. */
.tv-coluna-esquerda {
  --tv-escala-coluna: 1;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--tv-escala-coluna));
  min-height: 0;
  overflow: hidden;
}

.tv-proximo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-formando) 16%, var(--cor-superficie)), var(--cor-superficie));
  border: 2px solid var(--cor-formando);
  border-radius: 20px;
  padding: calc(10px * var(--tv-escala-coluna, 1));
}

.tv-proximo-rotulo {
  font-size: calc(0.95rem * var(--tv-escala-coluna, 1));
  color: var(--cor-formando);
  font-weight: 700;
  margin: 0 0 calc(4px * var(--tv-escala-coluna, 1));
  font-family: var(--fonte-titulo);
}

.tv-proximo-nome {
  font-size: calc(2rem * var(--tv-escala-coluna, 1));
  font-family: var(--fonte-titulo);
  font-weight: 700;
  margin: 0;
  line-height: 1.05;
  word-break: break-word;
}

.tv-proximo-espera {
  font-size: calc(0.85rem * var(--tv-escala-coluna, 1));
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-dados);
  margin-top: calc(6px * var(--tv-escala-coluna, 1));
}

.tv-vazio-grande {
  font-size: clamp(1rem, 2.2vh, 1.8rem);
  font-family: var(--fonte-titulo);
  color: var(--cor-texto-fraco);
}

.tv-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--tv-escala-coluna, 1));
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: calc(5px * var(--tv-escala-coluna, 1)) calc(8px * var(--tv-escala-coluna, 1));
}
.tv-qr-caixa {
  flex-shrink: 0;
  background: #fff;
  padding: 3px;
  border-radius: 5px;
  line-height: 0;
}
.tv-qr-caixa canvas {
  /* Tamanho PROTEGIDO — não acompanha --tv-escala-coluna como o resto da
     coluna. Um QR precisa de um tamanho mínimo de verdade pra ser lido a
     uma certa distância; span reduzido é estética, QR ilegível é a
     funcionalidade inteira quebrada. Os outros blocos da coluna (em
     entrega, música) que cedem espaço pra ele, não o contrário. */
  display: block;
  width: clamp(96px, 12vh, 170px);
  height: clamp(96px, 12vh, 170px);
}
.tv-qr-texto {
  margin: 0;
  font-size: max(0.55rem, calc(0.72rem * var(--tv-escala-coluna, 1)));
  color: var(--cor-texto-fraco);
  line-height: 1.2;
}

.tv-resto, .tv-ocupados, .tv-player {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  padding: clamp(10px, 1.4vh, 28px);
  overflow: hidden;
  min-height: 0;
}

.tv-ocupados { flex: 1 1 60px; overflow: hidden; padding: calc(6px * var(--tv-escala-coluna, 1)) calc(10px * var(--tv-escala-coluna, 1)); }
.tv-player { flex: 0 0 auto; min-height: 0; overflow: hidden; padding: calc(4px * var(--tv-escala-coluna, 1)) calc(10px * var(--tv-escala-coluna, 1)); }
.tv-resto { height: 100%; display: flex; flex-direction: column; }

.tv-secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.85rem, 1.8vh, 1.6rem);
  margin: 0 0 8px;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tv-ocupados .tv-secao-titulo, .tv-player .tv-secao-titulo {
  font-size: calc(0.9rem * var(--tv-escala-coluna, 1));
  margin-bottom: calc(4px * var(--tv-escala-coluna, 1));
}

/* Grade que preenche a largura disponível e quebra em colunas — em vez de
   uma coluna única que cresce sem limite e obriga a rolar, a fila usa o
   espaço horizontal e só cresce em altura até caber na seção.

   O tamanho de tudo aqui dentro é controlado por --tv-escala-fila, ajustada
   dinamicamente pelo tv.js (ver ajustarEscala): cresce quando sobra espaço
   (poucos motoboys) e encolhe até caber quando tem gente demais na fila —
   nunca precisa rolar nem esconde ninguém. */
.tv-lista-fila {
  list-style: none;
  margin: 0;
  padding: 0;
  --tv-escala-fila: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--tv-escala-fila)), 1fr));
  grid-auto-rows: min-content;
  gap: calc(10px * var(--tv-escala-fila));
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

.tv-fila-item {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--tv-escala-fila, 1));
  padding: calc(10px * var(--tv-escala-fila, 1)) calc(16px * var(--tv-escala-fila, 1));
  background: var(--cor-superficie-alta);
  border-radius: 14px;
  font-size: calc(1.3rem * var(--tv-escala-fila, 1));
}
.tv-fila-posicao { font-family: var(--fonte-dados); color: var(--cor-texto-fraco); width: 1.8em; flex-shrink: 0; }
.tv-fila-nome { flex: 1; font-weight: 600; }
.tv-fila-espera { font-family: var(--fonte-dados); color: var(--cor-texto-fraco); font-size: 0.6em; white-space: nowrap; }

.tv-lista-ocupados {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--tv-escala-coluna, 1));
  align-content: flex-start;
}
.tv-chip-ocupado {
  background: color-mix(in srgb, var(--cor-despachado) 18%, var(--cor-superficie-alta));
  color: var(--cor-despachado);
  padding: calc(6px * var(--tv-escala-coluna, 1)) calc(14px * var(--tv-escala-coluna, 1));
  border-radius: 999px;
  font-size: calc(1rem * var(--tv-escala-coluna, 1));
  font-weight: 600;
}

.tv-vazio { color: var(--cor-texto-fraco); font-size: clamp(0.85rem, 1.4vh, 1.2rem); }

.tv-player-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(56px * var(--tv-escala-coluna, 1));
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.tv-player-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tv-player-form { display: flex; gap: calc(6px * var(--tv-escala-coluna, 1)); margin-top: calc(4px * var(--tv-escala-coluna, 1)); }
.tv-player-form input {
  flex: 1;
  min-width: 0;
  font-size: calc(0.75rem * var(--tv-escala-coluna, 1));
  padding: calc(3px * var(--tv-escala-coluna, 1)) calc(8px * var(--tv-escala-coluna, 1));
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-alta);
  color: var(--cor-texto);
}
.tv-player-form button {
  padding: calc(3px * var(--tv-escala-coluna, 1)) calc(10px * var(--tv-escala-coluna, 1));
  font-size: calc(0.75rem * var(--tv-escala-coluna, 1));
  white-space: nowrap;
}
#tv-player-automatico {
  background: var(--cor-superficie-alta);
  color: var(--cor-texto-fraco);
  border: 1px solid var(--cor-borda);
}

.tv-rotas {
  flex: 1.4;
  min-height: 0;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}

/* Grade que quebra em várias linhas/colunas em vez de uma fileira única com
   rolagem horizontal — assim todas as rotas ficam visíveis de uma vez.

   --tv-escala-rotas é ajustada dinamicamente pelo tv.js (ajustarEscala):
   cresce quando sobra espaço (poucas rotas) e encolhe até tudo caber quando
   tem muitas rotas ativas ao mesmo tempo — nunca corta nem esconde rota. */
.tv-rotas-lista {
  --tv-escala-rotas: 1;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(112px, calc(150px * var(--tv-escala-rotas))), 1fr));
  grid-auto-rows: min-content;
  gap: calc(10px * var(--tv-escala-rotas));
  overflow: hidden;
  align-content: start;
}

.tv-rota-card {
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda);
  border-radius: 16px;
  padding: calc(8px * var(--tv-escala-rotas, 1)) calc(10px * var(--tv-escala-rotas, 1));
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--tv-escala-rotas, 1));
  --cor-status: var(--cor-formando);
  border-color: color-mix(in srgb, var(--cor-status) 55%, var(--cor-borda));
}
.tv-rota-card--formando { --cor-status: var(--cor-formando); }
.tv-rota-card--pronta { --cor-status: var(--cor-pronto); }
.tv-rota-card--despachada { --cor-status: var(--cor-despachado); }

.tv-rota-codigo {
  font-family: var(--fonte-dados);
  font-weight: 700;
  font-size: calc(1.15rem * var(--tv-escala-rotas, 1));
  color: var(--cor-status);
}
.tv-rota-status {
  font-size: calc(0.85rem * var(--tv-escala-rotas, 1));
  color: var(--cor-texto-fraco);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-rota-zona { font-size: calc(0.95rem * var(--tv-escala-rotas, 1)); color: var(--cor-texto); font-weight: 600; }
.tv-rota-motoboy {
  margin-top: calc(4px * var(--tv-escala-rotas, 1));
  font-size: calc(0.95rem * var(--tv-escala-rotas, 1));
  font-weight: 600;
  color: var(--cor-despachado);
}

.tv-rota-comandas {
  margin-top: calc(3px * var(--tv-escala-rotas, 1));
  display: flex;
  flex-wrap: wrap;
  gap: calc(5px * var(--tv-escala-rotas, 1));
}
.tv-rota-comanda-tag {
  font-family: var(--fonte-dados);
  font-size: calc(0.95rem * var(--tv-escala-rotas, 1));
  font-weight: 700;
  color: var(--cor-status);
  background: color-mix(in srgb, var(--cor-status) 16%, var(--cor-superficie));
  border: 1px solid color-mix(in srgb, var(--cor-status) 45%, var(--cor-borda));
  border-radius: 8px;
  padding: calc(2px * var(--tv-escala-rotas, 1)) calc(7px * var(--tv-escala-rotas, 1));
}

.tv-rota-valor {
  margin-top: calc(3px * var(--tv-escala-rotas, 1));
  font-family: var(--fonte-dados);
  font-size: calc(1.1rem * var(--tv-escala-rotas, 1));
  font-weight: 700;
  color: var(--cor-formando);
}

.tv-rota-timer { margin: calc(2px * var(--tv-escala-rotas, 1)) 0; }
.tv-rota-timer-texto {
  font-family: var(--fonte-dados);
  font-size: calc(0.82rem * var(--tv-escala-rotas, 1));
  font-weight: 600;
  color: color-mix(in srgb, var(--cor-status) 80%, var(--cor-texto) 20%);
}
.tv-rota-timer-barra {
  height: calc(6px * var(--tv-escala-rotas, 1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor-status) 18%, var(--cor-superficie));
  overflow: hidden;
  margin-bottom: calc(4px * var(--tv-escala-rotas, 1));
}
.tv-rota-timer-barra-preenchimento {
  height: 100%;
  border-radius: 999px;
  background: var(--cor-status);
  transition: width 0.6s ease;
}
.tv-rota-timer--alerta .tv-rota-timer-barra-preenchimento { background: var(--cor-perigo); }
.tv-rota-timer--alerta .tv-rota-timer-texto { color: var(--cor-perigo); animation: tv-timer-pulsar 1.4s ease-in-out infinite; }
@keyframes tv-timer-pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.tv-rodape {
  margin-top: 10px;
  text-align: center;
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-dados);
  font-size: clamp(0.8rem, 1.4vh, 1.3rem);
  flex-shrink: 0;
}