/* ==========================================================================
   Painel TV — folha isolada.
   Todo seletor vive sob #view-tv ou body.tv-ativo; nada aqui altera estilo
   global das telas atuais. Remover a classe tv-ativo restaura a aplicação
   exatamente como estava.

   Escala: tudo é derivado da ALTURA da viewport (--u). Numa TV 16:9 a altura é
   a restrição real para caber sem rolagem, e assim a mesma composição serve
   1366x768, 1920x1080 e 4K sem media query por resolução.
   Em 1080p: número grande ~76px, título de página ~32px, texto ~22px.
   ========================================================================== */

#view-tv {
  --u: 1vh;
  --tv-fundo: #071a2e;
  --tv-painel: #0d2740;
  --tv-painel-alto: #143a5c;
  --tv-painel-2: #10304e;
  --tv-borda: rgba(120, 170, 214, 0.18);
  --tv-ciano: #29c1e0;
  --tv-texto: #eaf3fb;
  --tv-texto-medio: #a9c2d9;
  --tv-texto-fraco: #7793ae;
  --tv-sombra: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0, 0, 0, 0.35);

  --tv-num: calc(var(--u) * 7);
  --tv-titulo: calc(var(--u) * 3);
  --tv-texto-base: calc(var(--u) * 2.05);
  --tv-rotulo: calc(var(--u) * 1.6);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tv-texto);
}

/* Durante a apresentação o painel ocupa a tela inteira e recolhe a navegação. */
body.tv-ativo .sidebar,
body.tv-ativo .footer { display: none !important; }
body.tv-ativo .app-shell { grid-template-columns: 1fr !important; }
body.tv-ativo #viewRoot { max-width: none !important; padding: 0 !important; }
body.tv-ativo { overflow: hidden; }

/* ---------- Palco ---------- */
.tv-palco {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(41, 193, 224, 0.10), transparent 52%),
    radial-gradient(ellipse at 92% 96%, rgba(109, 94, 248, 0.10), transparent 55%),
    var(--tv-fundo);
  overflow: hidden;
}
/* Malha técnica discreta ao fundo — textura, sem competir com os dados. */
.tv-palco::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: calc(var(--u) * 6) calc(var(--u) * 6);
  pointer-events: none;
}

/* ---------- Cabeçalho ---------- */
.tv-cabecalho {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 4) calc(var(--u) * 1.6);
  border-bottom: 1px solid var(--tv-borda);
}
.tv-logo { height: calc(var(--u) * 4.4); width: auto; display: block; }
.tv-logo-fallback {
  font-size: calc(var(--u) * 2.6); font-weight: 800; letter-spacing: -0.02em;
  color: var(--tv-texto); white-space: nowrap;
}
.tv-cabecalho-escopo { flex: 1; min-width: 0; }
.tv-escopo-rotulo {
  font-size: var(--tv-rotulo); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--tv-texto-fraco); font-weight: 600;
}
.tv-escopo-nome {
  font-size: calc(var(--u) * 2.9); font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-cabecalho-titulo { text-align: right; }
.tv-pagina-titulo {
  font-size: var(--tv-titulo); font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
}
.tv-pagina-sub { font-size: var(--tv-rotulo); color: var(--tv-texto-medio); margin-top: calc(var(--u) * 0.4); }

/* ---------- Área de conteúdo ---------- */
.tv-conteudo {
  position: relative;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  min-height: 0;
  display: grid;
}
/* Flex (e não grid de 2 faixas fixas): há páginas com faixa de indicadores + conteúdo e páginas
   só de conteúdo. Com grid-template-rows: auto 1fr, a página de um filho só ficava espremida no
   topo com dois terços da TV vazios. Aqui o último bloco sempre ocupa a altura restante. */
.tv-pagina {
  min-height: 0;
  display: flex; flex-direction: column; gap: calc(var(--u) * 2.2);
  animation: tv-entrar 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tv-pagina > .tv-kpis { flex: 0 0 auto; }
.tv-pagina > .tv-colunas,
.tv-pagina > .tv-painel { flex: 1 1 auto; min-height: 0; }
@keyframes tv-entrar {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-pagina { animation: none; }
}

/* ---------- Faixa de indicadores ---------- */
.tv-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(var(--u) * 2); }
.tv-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--tv-painel-2), var(--tv-painel));
  border: 1px solid var(--tv-borda);
  border-radius: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2);
  box-shadow: var(--tv-sombra);
}
.tv-kpi::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--u) * 0.42); background: var(--tv-ciano);
}
.tv-kpi.tv-kpi-alerta::after { background: #d97706; }
.tv-kpi.tv-kpi-critico::after { background: #dc2626; }
.tv-kpi.tv-kpi-ok::after { background: #16a34a; }
.tv-kpi-valor {
  font-size: var(--tv-num); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.tv-kpi.tv-kpi-alerta .tv-kpi-valor { color: #f0a93b; }
.tv-kpi.tv-kpi-critico .tv-kpi-valor { color: #ff6b6b; }
.tv-kpi.tv-kpi-ok .tv-kpi-valor { color: #34d399; }
.tv-kpi-unidade { font-size: calc(var(--u) * 2.6); font-weight: 700; margin-left: calc(var(--u) * 0.4); }
.tv-kpi-rotulo {
  margin-top: calc(var(--u) * 0.8);
  font-size: var(--tv-rotulo); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tv-texto-medio); font-weight: 600;
}
.tv-kpi-nota { margin-top: calc(var(--u) * 0.5); font-size: calc(var(--u) * 1.45); color: var(--tv-texto-fraco); }

/* ---------- Painéis ---------- */
.tv-colunas { display: grid; gap: calc(var(--u) * 2.2); min-height: 0; align-items: stretch; }
.tv-colunas-65-35 { grid-template-columns: 65fr 35fr; }
.tv-colunas-50-50 { grid-template-columns: 1fr 1fr; }
.tv-colunas-60-40 { grid-template-columns: 60fr 40fr; }
.tv-colunas:not([class*="tv-colunas-"]) { grid-template-columns: 1fr; }

.tv-painel {
  position: relative; min-height: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--tv-painel-2), var(--tv-painel));
  border: 1px solid var(--tv-borda);
  border-radius: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2);
  box-shadow: var(--tv-sombra);
  overflow: hidden;
}
.tv-painel-titulo {
  font-size: calc(var(--u) * 2.1); font-weight: 700;
  margin-bottom: calc(var(--u) * 1.4); display: flex; align-items: baseline; gap: calc(var(--u) * 1.2);
}
.tv-painel-titulo .tv-painel-base {
  font-size: calc(var(--u) * 1.45); font-weight: 500; color: var(--tv-texto-fraco);
}
.tv-grafico { position: relative; flex: 1; min-height: 0; }

/* ---------- Distribuição em barra ---------- */
.tv-dist { display: flex; gap: calc(var(--u) * 0.35); height: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 0.6); overflow: hidden; }
.tv-dist-seg { display: flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 0.4); transition: flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tv-dist-seg span { font-size: calc(var(--u) * 1.5); font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.tv-legenda { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.9) calc(var(--u) * 2.2); margin-top: calc(var(--u) * 1.4); }
.tv-legenda-item { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.75); color: var(--tv-texto-medio); }
.tv-legenda-cor { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; flex-shrink: 0; }
.tv-legenda-item strong { color: var(--tv-texto); font-variant-numeric: tabular-nums; }

/* ---------- Listas de prioridade ---------- */
/* A apresentação não rola: se um texto longo sobrar, ele é cortado com elegância pelo painel,
   nunca empurra o layout nem cria barra de rolagem. */
.tv-lista { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); min-height: 0; overflow: hidden; }
.tv-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--tv-borda);
  border-left: calc(var(--u) * 0.5) solid var(--tv-texto-fraco);
  border-radius: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 1.15) calc(var(--u) * 1.5);
}
.tv-item.cond-perigo { border-left-color: #dc2626; }
.tv-item.cond-critico { border-left-color: #991b1b; }
.tv-item.cond-alerta { border-left-color: #d97706; }
.tv-item.cond-alarme { border-left-color: #d97706; }
.tv-item-topo { display: flex; align-items: baseline; gap: calc(var(--u) * 1.2); }
.tv-item-ativo {
  font-size: calc(var(--u) * 1.95); font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-item-linha {
  margin-top: calc(var(--u) * 0.45); font-size: calc(var(--u) * 1.6);
  color: var(--tv-texto-medio);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-item-meta { margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 1.4); color: var(--tv-texto-fraco); }

.tv-chip {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.55);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1);
  border-radius: 999px; font-size: calc(var(--u) * 1.45); font-weight: 700;
  white-space: nowrap;
}
.tv-chip::before { content: ''; width: calc(var(--u) * 0.85); height: calc(var(--u) * 0.85); border-radius: 50%; background: currentColor; }

/* ---------- Destaque técnico ---------- */
.tv-destaque-cabec { display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); flex-wrap: wrap; }
.tv-destaque-nome { font-size: calc(var(--u) * 3.4); font-weight: 800; letter-spacing: -0.02em; }
.tv-destaque-tag { font-size: calc(var(--u) * 1.9); color: var(--tv-texto-fraco); font-weight: 600; }
.tv-destaque-texto { font-size: calc(var(--u) * 1.95); color: var(--tv-texto-medio); line-height: 1.45; }
.tv-destaque-texto strong { color: var(--tv-texto); }
.tv-destaque-bloco + .tv-destaque-bloco { margin-top: calc(var(--u) * 1.5); }
.tv-destaque-rotulo {
  font-size: calc(var(--u) * 1.35); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tv-texto-fraco); font-weight: 700; margin-bottom: calc(var(--u) * 0.4);
}
.tv-foto-wrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.22); border-radius: calc(var(--u) * 0.9); overflow: hidden;
}
.tv-foto { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ---------- Tabela (painel interno) ---------- */
.tv-tabela { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 1.7); }
.tv-tabela th {
  text-align: left; font-size: calc(var(--u) * 1.35); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tv-texto-fraco); font-weight: 700;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1);
  border-bottom: 1px solid var(--tv-borda);
}
.tv-tabela td {
  padding: calc(var(--u) * 0.95) calc(var(--u) * 1);
  border-bottom: 1px solid rgba(120, 170, 214, 0.08);
  font-variant-numeric: tabular-nums;
}
.tv-tabela td.tv-td-nome { font-weight: 600; font-variant-numeric: normal; }
.tv-tabela tr:last-child td { border-bottom: none; }

/* ---------- Estados ---------- */
.tv-estado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.4); height: 100%; text-align: center;
}
.tv-estado-titulo { font-size: calc(var(--u) * 2.6); font-weight: 700; }
.tv-estado-texto { font-size: calc(var(--u) * 1.9); color: var(--tv-texto-medio); max-width: 60ch; }
.tv-spinner {
  width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-radius: 50%;
  border: calc(var(--u) * 0.45) solid rgba(41, 193, 224, 0.2);
  border-top-color: var(--tv-ciano);
  animation: tv-girar 0.9s linear infinite;
}
@keyframes tv-girar { to { transform: rotate(360deg); } }

/* ---------- Rodapé ---------- */
.tv-rodape {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 4);
  border-top: 1px solid var(--tv-borda);
  font-size: calc(var(--u) * 1.5); color: var(--tv-texto-fraco);
}
.tv-pontos { display: flex; gap: calc(var(--u) * 0.7); flex: 1; }
.tv-ponto {
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%;
  background: rgba(169, 194, 217, 0.28); transition: background 0.3s, transform 0.3s;
}
.tv-ponto.ativo { background: var(--tv-ciano); transform: scale(1.25); }
.tv-rodape-info { display: flex; gap: calc(var(--u) * 2.4); white-space: nowrap; }
.tv-rodape-info b { color: var(--tv-texto-medio); font-weight: 600; }
.tv-sync-aviso { color: #f0a93b; }

/* Barra de progresso da página atual */
.tv-progresso {
  position: absolute; left: 0; bottom: 0; height: calc(var(--u) * 0.35);
  background: var(--tv-ciano); width: 0;
}

/* ---------- Controles ---------- */
.tv-controles {
  position: absolute; left: 50%; bottom: calc(var(--u) * 3.5); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  background: rgba(7, 26, 46, 0.92);
  border: 1px solid var(--tv-borda);
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 0, 0, 0.5);
  z-index: 5;
  transition: opacity 0.3s, transform 0.3s;
}
.tv-controles.oculto { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(calc(var(--u) * 1.2)); }
.tv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.7);
  min-width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 1.5);
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08); color: var(--tv-texto);
  font-family: inherit; font-size: calc(var(--u) * 1.6); font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.tv-btn:hover { background: rgba(41, 193, 224, 0.22); border-color: var(--tv-ciano); }
.tv-btn:focus-visible { outline: 2px solid var(--tv-ciano); outline-offset: 2px; }
.tv-btn svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.tv-btn-primario { background: var(--tv-ciano); color: #062132; }
.tv-btn-primario:hover { background: #4dd2ec; }
.tv-sep { width: 1px; height: calc(var(--u) * 2.6); background: var(--tv-borda); }

/* ---------- Configurações ---------- */
.tv-config {
  position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 10);
  width: calc(var(--u) * 46); max-width: 92vw; max-height: 72vh; overflow-y: auto;
  background: rgba(9, 31, 52, 0.98);
  border: 1px solid var(--tv-borda); border-radius: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.2);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.55);
  z-index: 6;
}
.tv-config h3 { margin: 0 0 calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.2); font-weight: 700; }
.tv-campo { margin-bottom: calc(var(--u) * 1.8); }
.tv-campo > span {
  display: block; margin-bottom: calc(var(--u) * 0.7);
  font-size: calc(var(--u) * 1.4); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tv-texto-fraco); font-weight: 700;
}
.tv-opcoes { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.7); }
.tv-opcao {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 0.8);
  border: 1px solid var(--tv-borda); background: rgba(255, 255, 255, 0.05);
  color: var(--tv-texto); font-family: inherit; font-size: calc(var(--u) * 1.6);
  cursor: pointer;
}
.tv-opcao.ativa { background: var(--tv-ciano); color: #062132; border-color: var(--tv-ciano); font-weight: 700; }
.tv-config-lista { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); max-height: calc(var(--u) * 26); overflow-y: auto; }
.tv-check { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.7); cursor: pointer; }
.tv-check input { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); accent-color: var(--tv-ciano); }

/* Aviso discreto de dados novos */
.tv-novidade {
  position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 4);
  display: flex; align-items: center; gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.5);
  background: rgba(41, 193, 224, 0.16); border: 1px solid var(--tv-ciano);
  border-radius: 999px; font-size: calc(var(--u) * 1.5); color: var(--tv-texto);
  animation: tv-entrar 0.4s ease;
  z-index: 4;
}

/* Tela estreita (prévia fora da TV): empilha para nada cortar. */
@media (max-aspect-ratio: 1/1) {
  .tv-colunas-65-35, .tv-colunas-50-50, .tv-colunas-60-40 { grid-template-columns: 1fr; }
  .tv-kpis { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* Item em foco na rotação interna: a lista à direita marca qual ativo está com a curva na tela. */
.tv-item.tv-item-foco {
  background: rgba(41, 193, 224, 0.14);
  border-color: var(--tv-ciano);
  box-shadow: 0 0 0 1px var(--tv-ciano) inset;
}