.tv-page { box-sizing: border-box; width: 100%; height: 100vh; min-height: 680px; overflow: hidden; display: grid; grid-template-rows: 98px 58px minmax(0,1fr); 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; }
.tv-header { display: grid; grid-template-columns: 1fr minmax(360px, 1.3fr) auto; align-items: center; gap: 24px; padding: 12px 28px; border-bottom: 1px solid #31506a; background: #0a243b; }
.tv-brand { display: flex; flex-direction: column; gap: 3px; }
.tv-brand-link { color: #f3fbff; text-decoration: none; font-size: clamp(22px, 1.5vw, 38px); font-weight: 800; letter-spacing: .06em; }
.tv-brand-sub { color: #b9d2e2; font-size: clamp(13px, .82vw, 22px); }
.tv-alert { color: #e6f7e8; background: #174837; border: 1px solid #4e9e78; border-left: 7px solid #4e9e78; border-radius: 10px; font-weight: 700; text-align: left; padding: 8px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; overflow: hidden; max-height: 74px; }
.tv-alert-headline { font-size: clamp(17px, 1vw, 28px); font-weight: 800; white-space: nowrap; }
.tv-alert-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 7px; background: rgba(5,15,25,.3); font-size: clamp(12px, .68vw, 19px); font-weight: 600; white-space: nowrap; }
.tv-alert-chip strong { font-weight: 800; }
.tv-alert-chip--mais { background: rgba(255,255,255,.18); font-weight: 800; }
.tv-alert--watch { background: #5b4413; border-color: #d9a441; color: #fff3d6; }
.tv-alert--watch .tv-alert-chip--watch { background: rgba(217,164,65,.28); }
.tv-alert--warn { background: #6b3a17; border-color: #f0935a; color: #ffe9d9; }
.tv-alert--warn .tv-alert-chip--warn { background: rgba(240,147,90,.28); }
.tv-alert--danger { background: #70322e; border-color: #f18374; color: #fff1ec; }
.tv-alert--danger .tv-alert-chip--danger { background: rgba(241,131,116,.3); }
.tv-alert--unknown { background: #454554; border-color: #9da1b6; color: #eef0f6; }
.tv-header-right { text-align: right; white-space: nowrap; }
.tv-clock { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(28px, 2.2vw, 56px); font-weight: 750; line-height: 1; }
.tv-freshness { color: #c4d7e4; font-size: clamp(12px, .75vw, 21px); }
.tv-controls { display: flex; align-items: center; gap: 16px; padding: 7px 28px; background: #0c2942; border-bottom: 1px solid #31506a; }
.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; }
.tv-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tv-switch label:focus-within { outline: 2px solid #d2edff; outline-offset: 2px; }
.tv-action { border: 1px solid #80aac6; border-radius: 8px; color: #e8f5ff; background: #153d5d; padding: 8px 12px; font-size: clamp(13px, .78vw, 22px); font-weight: 700; white-space: nowrap; }
.tv-action:hover, .tv-action:focus-visible { outline: 3px solid #d2edff; outline-offset: 1px; }
.tv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.tv-main { display: grid; grid-template-columns: minmax(0, 62fr) minmax(360px, 38fr); min-height: 0; gap: 12px; padding: 12px 20px; }
.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: 56px minmax(0,1fr) 45px; }
.tv-map-head, .tv-side-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 18px; background: #143c56; }
.tv-map-head h1, .tv-side-head h2 { font-size: clamp(22px, 1.38vw, 38px); margin: 0; font-weight: 800; }
.tv-map-head h1, .tv-side-head h2 { color: #f1f7fb; }
.tv-map-head span, .tv-side-head span { font-size: clamp(13px, .82vw, 23px); color: #d0e3ee; text-align: right; }
.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; align-items: center; justify-content: space-around; gap: 9px; padding: 5px 12px; color: #e1eff7; font-size: clamp(12px, .72vw, 20px); font-weight: 700; white-space: nowrap; overflow: hidden; }
.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: 56px minmax(0,1fr) auto; }
.tv-ranking { overflow: hidden; padding: 4px 10px; }
.tv-rank-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 12%; gap: 8px; border-bottom: 1px solid #2b4b62; border-left: 4px solid var(--tv-level, #16a34a); padding: 5px 8px; 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(18px, 1vw, 30px); font-weight: 800; line-height: 1.15; }
.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; }
.tv-rank-reading strong { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(20px, 1.1vw, 34px); white-space: nowrap; line-height: 1.15; }
.tv-rank-reading small { line-height: 1.2; }
.tv-error { color: #ffdfbb; font-size: clamp(13px, .7vw, 20px); padding: 3px 10px; min-height: 22px; }
@media (max-width: 1450px) { .tv-page { grid-template-rows: 65px 50px minmax(0,1fr); } .tv-header { gap: 9px; padding: 8px 13px; } .tv-controls { gap: 6px; padding: 5px 12px; } .tv-main { grid-template-columns: minmax(0,59fr) minmax(340px,41fr); padding: 7px; gap: 7px; } .tv-map-panel, .tv-side { grid-template-rows: 48px minmax(0,1fr) 38px; } .tv-side { grid-template-rows: 48px minmax(0,1fr) auto; } .tv-rank-row { padding-block: 5px; } }
@media (max-width: 900px) { .tv-page { height: auto; min-height: 100vh; overflow: auto; display: block; } .tv-header { grid-template-columns: 1fr auto; } .tv-alert { grid-column: 1 / -1; } .tv-controls { flex-wrap: wrap; } .tv-main { display: block; } .tv-map-panel { height: 60vh; margin-bottom: 10px; } .tv-side { height: 60vh; } }