/* TV Mode: mapa e lista ocupam a altura; cabeçalho e rodapé ficam em uma linha cada. */
.tv-page { box-sizing: border-box; width: 100%; height: 100vh; min-height: 620px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: #071b2e; color: #f1f7fb; font-family: 'Instrument Sans', Arial, sans-serif; }
/* O rodapé técnico do Dash contém só scripts; a regra global de footer lhe dá uma borda de 2px. */
body > footer:has(script#_dash-config) { border: 0 !important; background: transparent !important; }
.tv-page * { box-sizing: border-box; }

/* Cabeçalho: marca · pílula de alertas · relógio */
.tv-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 10px 20px; border-bottom: 1px solid #23435b; background: #0a243b; }
.tv-brand-link { display: inline-flex; align-items: center; gap: 12px; color: #f3fbff; text-decoration: none; font-size: clamp(20px, 1.3vw, 34px); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.tv-brand-link:focus-visible { outline: 3px solid #d2edff; outline-offset: 4px; border-radius: 6px; }
.tv-brand-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #2563eb; }
.tv-brand-icon img { width: 60%; height: 60%; }
.tv-header-right { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.tv-clock { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(28px, 2vw, 54px); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-timezone { color: #b9d2e2; font-weight: 600; font-size: clamp(12px,.72vw,20px); }

/* Alertas: uma pílula, um alerta por vez */
.tv-alert { justify-self: center; width: min(100%, 1040px); min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: 12px; padding: 5px 6px 5px 14px; border: 1px solid #2f6b52; border-radius: 999px; background: #0f3a2c; color: #cfeedd; font-size: clamp(13px,.8vw,22px); font-weight: 600; }
.tv-alert > span:only-child { grid-column: 1 / -1; padding-right: 8px; }
.tv-alert-headline { font-weight: 800; white-space: nowrap; }
.tv-alert-chip { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tv-alert-chip strong { font-weight: 800; }
.tv-alert-chip--mais { grid-column: 3; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 800; }
.tv-alert-chip--rot2, .tv-alert-chip--rot3 { animation: tv-alert-rot2 12s linear infinite; }
.tv-alert-chip--rot3 { animation-name: tv-alert-rot3; animation-duration: 18s; }
/* Sai um, entra o outro: sem sobreposição de textos na troca. */
@keyframes tv-alert-rot2 { 0% { opacity: 0; } 3%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tv-alert-rot3 { 0% { opacity: 0; } 2%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tv-alert-chip--rot2, .tv-alert-chip--rot3 { animation: none; } .tv-alert-chip--rot2 ~ .tv-alert-chip--rot2, .tv-alert-chip--rot3 ~ .tv-alert-chip--rot3 { visibility: hidden; } }
.tv-alert--watch { background: #4a3810; border-color: #b8893a; color: #fff1cf; }
.tv-alert--warn { background: #5a3015; border-color: #d97f47; color: #ffe6d4; }
.tv-alert--danger { background: #632a26; border-color: #e3705f; color: #fff0ea; }
.tv-alert--unknown { background: #33384a; border-color: #7c829a; color: #e7e9f2; }

/* Corpo: mapa + estações */
.tv-main { display: grid; grid-template-columns: minmax(0, 64fr) minmax(360px, 36fr); min-height: 0; gap: 12px; padding: 12px 16px; }
.tv-map-head, .tv-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; background: #143c56; }
.tv-map-head { flex-wrap: wrap; }
.tv-map-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.tv-map-head h1, .tv-side-head h2 { font-size: clamp(20px, 1.25vw, 36px); margin: 0; font-weight: 800; }
.tv-map-head h1 { white-space: nowrap; }
.tv-side-head { flex-wrap: wrap; gap: 3px 12px; }
.tv-map-title span, .tv-side-head span { font-size: clamp(13px, .78vw, 22px); color: #c6dbe8; }
.tv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Rodapé: resumo da rede + estado da atualização */
.tv-footer { display: flex; align-items: center; gap: 12px 24px; padding: 8px 20px; border-top: 1px solid #23435b; background: #0a243b; min-width: 0; }
.tv-summary { flex: 1; min-width: 0; display: flex; align-items: center; }
.tv-summary-card { min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 2px 20px; border-left: 1px solid #2c4b62; }
.tv-summary-card:first-child { border-left: 0; padding-left: 0; }
.tv-summary-label { color: #a9c3d3; font-size: clamp(12px,.72vw,20px); font-weight: 600; white-space: nowrap; }
.tv-summary-value { color: #f2fbff; font: 700 clamp(17px,1.05vw,30px)/1.1 'Space Grotesk',Arial,sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-summary-note { color: #a9c3d3; font-size: clamp(12px,.72vw,20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-summary-card--watch .tv-summary-note { color: #f0c977; }
.tv-status { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.tv-freshness, .tv-update-status { color: #a9c3d3; font-size: clamp(12px,.72vw,20px); }
.tv-action { border: 1px solid #3c6584; border-radius: 8px; color: #dcecf7; background: transparent; padding: 5px 10px; font-size: clamp(12px, .72vw, 20px); font-weight: 700; white-space: nowrap; cursor: pointer; }
.tv-action:hover { background: #153d5d; }
.tv-action:focus-visible { outline: 3px solid #d2edff; outline-offset: 1px; }
.tv-empty { color: #bfd4e2; padding: 24px; align-self: center; text-align: center; }
.tv-switch { display: flex; align-items: center; gap: 4px; background: #173b58; padding: 3px; border-radius: 9px; }
.tv-switch label { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 11px; border-radius: 7px; color: #d5e5ef; font-size: clamp(14px, .8vw, 23px); font-weight: 700; white-space: nowrap; }
.tv-switch label:has(input:checked) { color: #0b2235; background: #d2edff; }
/* O Dash 3 pinta de roxo a opção focada; as cores do seletor têm de vencer essa regra. */
.tv-page .tv-switch label.dash-options-list-option { color: #d5e5ef; }
.tv-page .tv-switch label.dash-options-list-option:has(input:checked) { color: #0b2235; }
.tv-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tv-switch label:has(input:focus-visible) { outline: 2px solid #d2edff; outline-offset: 2px; }
.tv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.tv-map-panel, .tv-side { min-width: 0; min-height: 0; border: 1px solid #41637a; border-radius: 13px; background: #102e47; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 7, 16, .18); }
.tv-map-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.tv-side-head { flex-wrap: wrap; gap: 3px 12px; }
.tv-map-head h1, .tv-side-head h2 { color: #f1f7fb; }
.tv-map { position: relative; min-height: 0; overflow: hidden; background: #102b42; }
.tv-map-frame { display: block; width: 100%; height: 100%; border: 0; background: #102b42; }
.tv-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 7px 12px; padding: 10px 12px; color: #e1eff7; font-size: clamp(12px, .8vw, 23px); font-weight: 700; }
.tv-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--tv-level, #64748b); }
.tv-side { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.tv-ranking { min-height: 0; overflow: auto; display: grid; grid-auto-rows: minmax(52px,1fr); gap: 6px; padding: 8px; }
.tv-rank-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid #2b4b62; border-left: 4px solid var(--tv-level, #16a34a); border-radius: 8px; padding: 7px 12px; position: relative; background: rgba(13, 48, 70, .45); }
.tv-rank-row--watch { background: rgba(202, 138, 4, .14); }
.tv-rank-row--warn { background: rgba(234, 88, 12, .17); }
.tv-rank-row--danger { background: rgba(220, 38, 38, .2); }
.tv-rank-row--late, .tv-rank-row--missing { opacity: .75; }
.tv-rank-main, .tv-rank-reading { display: flex; flex-direction: column; min-width: 0; }
.tv-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(17px, 1.15vw, 36px); font-weight: 800; line-height: 1.2; }
.tv-rank-meta { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.2; }
.tv-rank-source, .tv-rank-reading small { font-size: clamp(12px, .65vw, 20px); color: #c4d9e6; }
.tv-rank-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-rank-threshold { display: inline-block; flex: none; padding: 2px 6px; border-radius: 5px; font-size: clamp(11px, .58vw, 16px); font-weight: 800; white-space: nowrap; background: var(--tv-level, #ca8a04); color: var(--tv-level-fg, #0b1f38); }
.tv-rank-reading { align-items: flex-end; text-align: right; }
/* Tendência: seta junto ao valor (lida de longe) e variação na linha de baixo. */
.tv-rank-value-line { display: flex; align-items: center; justify-content: flex-end; gap: .25em; font-size: clamp(21px, 1.45vw, 44px); }
.tv-trend-icon { display: inline-flex; flex: none; }
.tv-trend-icon img { width: .85em !important; height: .85em !important; }
.tv-trend-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-trend--subindo { color: #ffb36b; }
.tv-trend--descendo { color: #6cc9ff; }
.tv-trend--estavel { color: #9fb6c6; font-weight: 600; }
.tv-rank-reading strong { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(21px, 1.45vw, 44px); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
.tv-rank-reading small { line-height: 1.25; font-size: clamp(12px, .74vw, 22px); white-space: nowrap; }
.tv-error { color: #ffdfbb; font-size: clamp(13px, .7vw, 20px); padding: 3px 10px; min-height: 22px; }

/* Telas de TV menores (1366×768) */
@media (max-width: 1450px) {
  .tv-header { gap: 14px; padding: 7px 12px; }
  .tv-brand-icon { width: 32px; height: 32px; border-radius: 8px; }
  .tv-main { grid-template-columns: minmax(0,60fr) minmax(340px,40fr); padding: 7px; gap: 7px; }
  .tv-map-head, .tv-side-head { padding: 7px 12px; }
  .tv-controls { gap: 6px; }
  .tv-switch label { padding: 4px 8px; }
  .tv-map-title { flex-direction: column; align-items: flex-start; gap: 0; }
  .tv-switch label { padding: 4px 9px; font-size: 13px; }
  .tv-footer { padding: 5px 12px; gap: 8px 16px; }
  .tv-summary-card { padding: 2px 12px; gap: 6px; }
  .tv-update-status { display: none; }
  .tv-rank-row { padding: 4px 8px; }
  .tv-ranking { gap: 4px; padding: 5px; grid-auto-rows: minmax(43px,1fr); }
  .tv-legend { padding: 6px; gap: 5px 8px; }
  .tv-side-head span { font-size: 12px; }
}
@media (max-width: 1200px) { .tv-summary-card:nth-child(4) { display: none; } }
/* Celular e tablet: página rola, blocos empilham */
@media (max-width: 900px) {
  .tv-page { height: auto; min-height: 100vh; overflow: auto; display: block; }
  .tv-header { grid-template-columns: minmax(0,1fr) auto; }
  .tv-alert { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; }
  .tv-main { display: block; }
  .tv-map-head { flex-wrap: wrap; }
  .tv-map-panel { height: 70vh; min-height: 420px; margin-bottom: 10px; }
  .tv-side { min-height: 480px; }
  .tv-ranking { grid-auto-rows: minmax(65px,auto); }
  .tv-footer { flex-direction: column; align-items: stretch; }
  .tv-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .tv-summary-card, .tv-summary-card:first-child, .tv-summary-card:nth-child(4) { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid #2c4b62; border-radius: 8px; }
  .tv-status { flex-wrap: wrap; white-space: normal; }
  .tv-update-status { display: inline; }
}
@media (max-width: 480px) {
  .tv-brand-link { gap: 7px; font-size: 16px; }
  .tv-brand-icon { width: 29px; height: 29px; }
  .tv-clock { font-size: 25px; }
  .tv-timezone { font-size: 11px; }
  .tv-alert { border-radius: 14px; align-items: start; }
  .tv-alert-chip { white-space: normal; }
  .tv-switch label { padding: 5px 8px; font-size: 13px; }
  .tv-rank-name { font-size: 17px; }
}