/*
 * DSTech — Operação ao vivo (TV da sala do dono), rota /tv
 * Mesmo mundo do quadro de comando, agora como o VISOR do painel: fundo grafite,
 * dígitos âmbar, sinaleiros que só acendem por estado. Uma tela, sem rolagem,
 * tudo escalado pela largura (1920 px → 16 px de base; 4K → 32 px).
 */
.tv {
  --tv-fundo: #111315;
  --tv-painel: #1B1E21;
  --tv-painel-2: #22262A;
  --tv-borda: #2E3338;
  --tv-texto: #E9EAE5;
  --tv-texto-2: #A9AEA7;
  --tv-texto-3: #7D837C;
  --tv-verde: #58C27D;     /* verde/âmbar/vermelho do sinaleiro, clareados para ler sobre o visor escuro */
  --tv-ambar: #F0A93B;
  --tv-vermelho: #FF8B83;
  --tv-ok: #7BE39C;
  --tv-tunel: 1.2em;       /* cápsula do túnel: a forma da máquina */
  font-size: max(12px, 0.8333vw);
  position: fixed; inset: 0; overflow: hidden;
  background: var(--tv-fundo); color: var(--tv-texto);
  font-family: var(--fonte); font-variant-numeric: tabular-nums;
  display: grid; grid-template-rows: auto 1fr; gap: 0.9em; padding: 1em 1.2em 1.1em;
}
.tv .num { font-weight: 600; letter-spacing: -.01em; }
.tv .unit { color: var(--tv-texto-3); margin-left: .3em; font-size: .45em; font-weight: 500; }
.tv .lamp { width: .95em; height: .95em; }

/* ---------------------------------------------------------------- cabeçalho */
.tv-head { display: flex; align-items: center; gap: 1.4em; }
.tv-logo-plate { background: var(--placa); border-radius: 4px; padding: .35em .7em; display: flex; }
.tv-logo { height: 2.6em; width: auto; display: block; }
.tv-brand { flex: 1; min-width: 0; }
.tv-title { font-family: var(--fonte-leg); font-weight: 700; font-size: 2em; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.tv-client { color: var(--tv-texto-2); font-size: 1.15em; margin-top: .2em; }
.tv-head-right { display: flex; align-items: center; gap: 1.6em; }
.tv-demo { font-family: var(--fonte-leg); font-weight: 600; font-size: .85em; letter-spacing: .06em; text-transform: uppercase; color: var(--tv-texto-2); border: 1px dashed var(--tv-texto-3); padding: .25em .6em; border-radius: 2px; }
.tv-status { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; font-size: 1.05em; }
.tv-clock { text-align: right; }
.tv-hora { font-size: 2.6em; font-weight: 600; color: var(--digito); line-height: 1; letter-spacing: .01em; }
.tv-data { color: var(--tv-texto-2); font-size: 1em; margin-top: .15em; }

/* ---------------------------------------------------------------- grade */
.tv-grid {
  display: grid; min-height: 0; gap: .9em;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  grid-template-areas: "hero hero alarmes" "tunel tunel feed" "inds inds inds";
}
.tv-panel { background: var(--tv-painel); border: 1px solid var(--tv-borda); border-radius: 4px; padding: 1em 1.2em; min-height: 0; overflow: hidden; }
.tv-hero { grid-area: hero; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .6em 2em; }
.tv-tunel { grid-area: tunel; display: flex; flex-direction: column; }
.tv-alarmes { grid-area: alarmes; display: flex; flex-direction: column; }
.tv-feed { grid-area: feed; display: flex; flex-direction: column; }
.tv-inds { grid-area: inds; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; }

.tv-lab { display: flex; align-items: center; gap: .5em; font-family: var(--fonte-leg); font-weight: 600; font-size: 1em; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-texto-2); }
.tv-note { color: var(--tv-texto-3); font-size: .95em; margin-top: .25em; }
.tv-sec-head { display: flex; align-items: baseline; gap: .8em; margin-bottom: .7em; }
.tv-sec { font-family: var(--fonte-leg); font-weight: 700; font-size: 1.2em; letter-spacing: .08em; text-transform: uppercase; }
.tv-sec-sub { color: var(--tv-texto-3); font-size: .95em; }

/* ---------------------------------------------------------------- destaque do dia */
.tv-hero-main { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; padding-right: 1em; border-right: 1px solid var(--tv-borda); }
.tv-kg { color: var(--digito); line-height: .95; margin: .1em 0 .15em; white-space: nowrap; }
.tv-kg .num { font-size: 7.5em; }
.tv-kg .unit { font-size: 2.2em; color: var(--digito-2); }
.tv-comp { font-size: 1.15em; color: var(--tv-texto-2); max-width: 26em; line-height: 1.35; }
.tv-delta { font-weight: 700; }
.tv-delta.up { color: var(--tv-verde); }
.tv-delta.down { color: var(--tv-ambar); }
.tv-delta.flat { color: var(--tv-texto); }
.tv-hero-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; align-content: start; }
.tv-mini { border-left: 1px solid var(--tv-borda); padding-left: 1em; }
.tv-mini:first-child { border-left: 0; padding-left: 0; }
.tv-num { font-size: 2.6em; line-height: 1.05; margin-top: .1em; white-space: nowrap; }
.tv-num .unit { font-size: .45em; }

.tv-curva { min-height: 0; display: flex; flex-direction: column; }
.tv-curva > div { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tv-curva-leg { display: flex !important; flex: 0 0 auto !important; gap: 1.4em; color: var(--tv-texto-3); font-size: .9em; margin-bottom: .4em; }
.tv-curva-leg .sw { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .4em; vertical-align: -.05em; }
.tv-curva-leg .sw.hoje { background: var(--digito); }
.tv-curva-leg .sw.med { background: #4A5057; }
.tv-bars { display: flex !important; flex-direction: row !important; align-items: flex-end; gap: .25em; flex: 1; min-height: 5em; padding-bottom: 1.3em; }
.tv-bar { flex: 1; height: 100%; position: relative; }
.tv-bar-med { position: absolute; left: 0; right: 0; bottom: 0; background: #3A3F45; border-radius: 2px 2px 0 0; }
.tv-bar-hoje { position: absolute; left: 22%; right: 22%; bottom: 0; height: 100%; background: var(--digito); border-radius: 2px 2px 0 0; transform-origin: bottom; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.tv-bar-hoje.agora { box-shadow: 0 0 0 2px rgba(255,181,71,.35); }
.tv-bar-h { position: absolute; bottom: -1.35em; left: 0; right: 0; text-align: center; font-size: .8em; color: var(--tv-texto-3); }

/* ---------------------------------------------------------------- túnel */
.tv-linha { display: flex; align-items: stretch; gap: .6em; flex: 1; min-height: 0; }
.tv-camaras { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; flex: 1; min-width: 0;
  border: 2px solid #40464D; border-radius: var(--tv-tunel); background: repeating-linear-gradient(90deg, #1F2327 0 1px, transparent 1px 3px), var(--tv-painel-2); overflow: hidden; }
.tv-seta { align-self: center; color: var(--tv-texto-3); font-size: 1.2em; }
.tv-st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; text-align: center; padding: .6em .2em; min-width: 0; }
.tv-st-cam + .tv-st-cam { border-left: 1px solid #3A4046; }
.tv-st-aux { background: var(--tv-painel-2); border: 1px solid #3A4046; border-radius: var(--r); min-width: 6em; padding: .6em .8em; }
.tv-st .lamp { width: 1.5em; height: 1.5em; }
.tv-st-rot { font-family: var(--fonte-leg); font-weight: 700; font-size: 1.35em; letter-spacing: .04em; }
.tv-st-aux .tv-st-rot { font-size: 1.05em; }
.tv-st-temp { color: var(--digito); font-weight: 600; font-size: 1.1em; }
.tv-st-nota { color: var(--tv-texto-3); font-size: .8em; }
.tv-st-nota.alerta { color: var(--tv-vermelho); font-weight: 600; }
.tv-st.st-red { background: rgba(198,46,39,.14); }
.tv-st.st-none .tv-st-rot { color: var(--tv-texto-3); }
.tv-st.st-red .lamp.red { animation: pisca 1.4s ease-in-out infinite; }
.tv-apoio { display: flex; gap: .6em; margin-top: .7em; flex-wrap: wrap; }
.tv-apoio .tv-st-aux { flex-direction: row; gap: .5em; padding: .45em .8em; }
.tv-apoio .tv-st .lamp { width: 1em; height: 1em; }

/* ---------------------------------------------------------------- alarmes ativos */
.tv-al-lista { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.tv-al { display: grid; grid-template-columns: 1.2em 4.2em minmax(0, 1fr) auto; gap: .7em; align-items: center; padding: .55em 0; border-bottom: 1px solid var(--tv-borda); }
.tv-al .lamp.red { animation: pisca 1.4s ease-in-out infinite; }
.tv-al-area { font-family: var(--fonte-leg); font-weight: 700; font-size: 1.05em; }
.tv-al-msg { font-size: 1.05em; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tv-al-tempo { color: var(--tv-vermelho); font-weight: 600; white-space: nowrap; }
.tv-ok { display: flex; align-items: center; gap: 1em; flex: 1; justify-content: center; }
.tv-ok .lamp { width: 3em; height: 3em; }
.tv-ok-tit { font-family: var(--fonte-leg); font-weight: 700; font-size: 2.2em; color: var(--tv-ok); letter-spacing: .03em; }

/* ---------------------------------------------------------------- últimas cargas */
.tv-cg-lista { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.tv-cg { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .8em; padding: .45em 0; border-bottom: 1px solid var(--tv-borda); animation: entra .7s cubic-bezier(.2,.8,.2,1); }
.tv-cg-hora { grid-row: 1 / 3; color: var(--tv-texto-2); font-weight: 600; align-self: center; }
.tv-cg-cli { font-weight: 600; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-cg-prog { grid-column: 2; color: var(--tv-texto-3); font-size: .9em; }
.tv-cg-kg { grid-row: 1 / 3; grid-column: 3; align-self: center; color: var(--digito); font-weight: 600; font-size: 1.3em; }
.tv-cg-kg .unit { font-size: .6em; }
@keyframes entra { from { opacity: 0; transform: translateY(-.6em); background: rgba(255,181,71,.12); } to { opacity: 1; transform: none; background: transparent; } }

/* ---------------------------------------------------------------- indicadores */
.tv-ind { background: var(--tv-painel); border: 1px solid var(--tv-borda); border-radius: 4px; padding: .8em 1.1em; }
.tv-ind .tv-num { font-size: 2.3em; }

@media (prefers-reduced-motion: reduce) {
  .tv .lamp.red, .tv-cg, .tv-bar-hoje { animation: none !important; transition: none !important; }
}
/* telas pequenas (celular/notebook): vira coluna com rolagem */
@media (max-width: 1100px) {
  .tv { position: static; min-height: 100vh; font-size: 14px; overflow: auto; }
  .tv-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "hero" "alarmes" "tunel" "feed" "inds"; }
  .tv-hero { grid-template-columns: minmax(0, 1fr); }
  .tv-hero-main { grid-row: auto; border-right: 0; }
  .tv-kg .num { font-size: 5em; }
  .tv-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-camaras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-linha { flex-direction: column; }
  .tv-seta { transform: rotate(90deg); }
  .tv-head { flex-wrap: wrap; }
}

/* estado da operação (Sts_Dados.D0) */
.tv-op { display: flex; align-items: center; gap: 1.2em; margin-bottom: .8em; flex-wrap: wrap; }
.tv-op-est { display: flex; align-items: center; gap: .6em; }
.tv-op-est .lamp { width: 1.6em; height: 1.6em; }
.tv-op-tit { font-family: var(--fonte-leg); font-weight: 700; font-size: 2em; letter-spacing: .04em; text-transform: uppercase; }
.tv-op-tit.ok { color: var(--tv-ok); }
.tv-op-tit.parado { color: var(--tv-ambar); }
.tv-op-det { color: var(--tv-texto-2); font-size: 1.1em; }

/* TV: só as 5 cargas mais recentes cabem inteiras; celular mostra todas */
@media (min-width: 1101px) { .tv-cg:nth-child(n+6) { display: none; } }
@media (max-width: 1100px) {
  .tv-hero-side { grid-template-columns: minmax(0, 1fr); gap: .8em; }
  .tv-mini, .tv-mini:first-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--tv-borda); padding-top: .8em; }
}

/* túnel: conclusão em uma frase + legenda sob cada sinaleiro */
.tv-tun-resumo { display: flex; align-items: center; gap: .7em; font-size: 1.35em; margin: 0 0 .8em; padding: .5em .8em;
  border-radius: var(--r); background: var(--tv-painel-2); border: 1px solid var(--tv-borda); }
.tv-tun-resumo .lamp { width: 1.1em; height: 1.1em; }
.tv-tun-resumo.ok { color: var(--tv-ok); }
.tv-tun-resumo.alerta { color: var(--tv-texto); border-color: rgba(198,46,39,.6); background: rgba(198,46,39,.14); }
.tv-tun-resumo.alerta strong { color: var(--tv-vermelho); }
.tv-tun-mais { color: var(--tv-texto-2); }
.tv-st-nota.ok { color: var(--tv-verde); }