/* KAIA · la tele sobre un escenario virtual (se carga la última).

   Por qué: el modo TV tenía seis capas de estilo; unas medían en --u y otras en px,
   vw, vh o con cortes @media por ancho y alto. Solo 1920×1080 se veía como se
   diseñó: en 720p y 960×540 los paneles se achicaban hasta cortarse, en 4K la barra
   y las fichas quedaban diminutas, en vertical la letra no se leía y en el Muro las
   cifras se partían.

   Cómo: hy-tablero.js (formaTv) pone body.hy-tv-escala y --z. La tele se maqueta
   siempre sobre 1920×1080 —o 640 de ancho en pantallas verticales— y `zoom` la lleva
   al tamaño real. `zoom` vuelve a maquetar al tamaño final, así que la letra sale
   nítida. Por eso aquí:
   · --u es fija (20 px, la de 1080p) y el tamaño base de letra también;
   · lo que se medía en vw/vh dentro de la tele pasa a su valor a 1920×1080
     (1vw = 19,2 px, 1vh = 10,8 px), porque dentro del escenario ya escala `zoom`;
   · los @media por ancho/alto no aplican con esta clase (van con
     :where(:not(.hy-tv-escala)) en cada hoja), porque miden la pantalla real y no el
     escenario.
   Cada selector lleva #hy para ganar a las capas anteriores sin !important.       */

body.hy-tv-escala #hy{--u:20px;font-size:21.12px;padding:0 calc(var(--z,1) * 86.4px)}
body.hy-tv-escala.hy-tv-muro #hy{padding:0 calc(var(--z,1) * 65.28px)}
body.hy-tv-escala #hy>.hy-tv-barra,body.hy-tv-escala #hy>#hy-cuerpo,body.hy-tv-escala #hy>.hy-tv-ui,
body.hy-tv-escala #hy>.hy-tv-ajustes,body.hy-tv-escala .hy-tv-sesion{zoom:var(--z,1)}

/* ── marco: flechas, pausa, ajustes, aviso de sesión (vw/vh → px de 1080p) ── */
body.hy-tv-escala #hy .hy-tv-fl.ant{left:9.6px} body.hy-tv-escala #hy .hy-tv-fl.sig{right:9.6px}
body.hy-tv-escala #hy .hy-tv-pp{width:49.92px;height:49.92px}
body.hy-tv-escala #hy .hy-tv-fila>*{margin-right:26.88px} body.hy-tv-escala #hy .hy-tv-fila>.hy-tv-sig{margin-right:0}
/* el diálogo y el aviso no pasan del ancho real de la pantalla (en un celular, 1000 px de
   escenario serían más anchos que ella). Son fijos: su 100 % es la pantalla y el zoom no
   escala porcentajes, a diferencia de vw, que no todos los navegadores tratan igual. */
body.hy-tv-escala #hy .hy-tv-ajustes{width:1000px;max-width:calc(100% - 40px)}
body.hy-tv-escala .hy-tv-sesion{top:140.4px;max-width:min(1536px,calc(100% - 40px))}

/* ── paneles: gráficos, mapa y cifras (vw/vh y clamp() con vw → px de 1080p) ── */
body.hy-tv-escala #hy .hy-gr svg{max-height:626.4px}
/* (el atlas ejecutivo, .atlas-panel, estira sus mapas a su tarjeta: no se toca; con :where
   para no subir la especificidad, que el Muro y la vertical ajustan más abajo) */
body.hy-tv-escala #hy :where(.hy-panel:not(.atlas-panel)) .hy-ov2.tv .hy-mapa .peru{max-height:648px}
body.hy-tv-escala #hy :where(.hy-panel:not(.atlas-panel)) .hy-ov2.tv .hy-mapa .lima{max-height:496.8px}
body.hy-tv-escala:not(.hy-tv-muro) #hy :where(.hy-panel:not(.atlas-panel)) .hy-mapa .peru{height:432px;max-height:432px}
body.hy-tv-escala:not(.hy-tv-muro) #hy :where(.hy-panel:not(.atlas-panel)) .hy-mapa .lima{height:324px;max-height:324px}
body.hy-tv-escala.hy-tv-muro #hy .hy-escenario{column-gap:23.04px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-hero h2{font-size:52px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-hero .hy-p{font-size:17px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-cifra .l{font-size:18px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-cifra .v{font-size:76px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-cifra.principal .v{font-size:142px}
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-cifra .r{font-size:17px}
/* atlas y fachadas del mapa */
body.hy-tv-escala:not(.hy-tv-muro) #hy .hy-escenario>.atlas-panel{padding:28px}
body.hy-tv-escala #hy .atlas-panel .hy-panel-h h2{font-size:48px}
body.hy-tv-escala #hy .atlas-panel .hy-sub{font-size:16px}
body.hy-tv-escala #hy .atlas-intro>b{font-size:18px}
body.hy-tv-escala #hy .atlas-metricas strong{font-size:40px}
body.hy-tv-escala #hy .atlas-metricas>div:not(.atlas-intro)>span{font-size:14px}
body.hy-tv-escala #hy .atlas-panel .hy-lima-leyenda button{font-size:13px}
body.hy-tv-escala #hy .atlas-panel .atlas-ficha h3{font-size:29px}
body.hy-tv-escala #hy .atlas-valor{font-size:90px}
body.hy-tv-escala #hy .hy-mapa .fachada-panel h3{font-size:25px}
body.hy-tv-escala #hy .con-fachadas .fachada-cabecera h3{font-size:21.12px}

/* ── pantallas verticales (hy-tv-vertical, siempre con el diseño angosto del Muro) ──
   Escenario de 1080 de ancho: una señalización 1080×1920 muestra dos paneles, uno
   debajo del otro (hy-tv-pila); una tablet o un celular, uno. */
body.hy-tv-escala.hy-tv-vertical #hy,body.hy-tv-escala.hy-tv-muro.hy-tv-vertical #hy{padding:0 calc(var(--z,1) * 40px)}
body.hy-tv-muro.hy-tv-vertical .hy-escenario{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:0;row-gap:23.04px}
body.hy-tv-muro.hy-tv-vertical.hy-tv-pila .hy-escenario{grid-template-rows:repeat(2,minmax(0,1fr))}
body.hy-tv-muro.hy-tv-vertical .hy-escenario>.hy-panel.activa{grid-column:1;grid-row:1}
body.hy-tv-muro.hy-tv-vertical .hy-escenario>.hy-panel.muro-b{grid-column:1;grid-row:2}
body.hy-tv-muro.hy-tv-vertical:not(.hy-tv-pila) .hy-escenario>.hy-panel.muro-b,
body.hy-tv-muro.hy-tv-vertical .hy-escenario>.hy-panel.muro-c{display:none}
/* barra en dos renglones: marca y hora arriba; sello y botones abajo */
body.hy-tv-vertical #hy .hy-tv-barra{row-gap:10px}
body.hy-tv-vertical #hy .hy-tv-barra>.hy-tv-m{order:1}
body.hy-tv-vertical #hy .hy-tv-barra>.hy-tv-r{order:2;margin-left:auto}
body.hy-tv-vertical #hy .hy-tv-barra::after{content:'';order:3;flex-basis:100%;height:0}
body.hy-tv-vertical #hy .hy-tv-barra>.hy-tv-s{order:4}
body.hy-tv-vertical #hy .hy-tv-barra>button{order:5}
body.hy-tv-vertical #hy .hy-tv-barra>#hy-tv-aj{margin-left:auto}
/* fichas del pie: centradas y en varias filas si no caben */
body.hy-tv-vertical #hy .hy-tv-chips{flex-wrap:wrap;justify-content:center;row-gap:4px}

/* ── paneles angostos (Muro y verticales): lo que se armaba a lo ancho, en columna ──
   Resumen ejecutivo: el título arriba a todo el ancho; la cifra principal debajo y
   las otras cuatro en dos columnas. Antes el título quedaba en una columna de un
   quinto del panel (cuatro renglones) y las cinco cifras se recortaban. */
body.hy-tv-muro #hy .hy-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;align-items:start;gap:calc(var(--u)*1.2)}
body.hy-tv-muro #hy .hy-hero-t{max-width:none}
body.hy-tv-muro #hy .hy-hero h2{font-size:calc(var(--u)*2.3);line-height:1.08}
body.hy-tv-muro #hy .hy-hero .hy-p{max-width:none;font-size:calc(var(--u)*.95)}
body.hy-tv-muro #hy .hy-hero-n{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-content:start}
body.hy-tv-muro #hy .hy-cifra.principal{grid-column:1/-1;grid-row:auto;order:-1}
/* Mapa: el Perú y sus listas empiezan arriba (centrados, si no cabían, el mapa se
   cortaba por arriba y por abajo) y el mapa tiene un alto que deja ver las listas. */
body.hy-tv-muro #hy .hy-ov2.tv{align-content:start;height:auto}
body.hy-tv-muro #hy .hy-ov2.tv .hy-mapa .peru{max-height:calc(var(--u)*21)}
/* En vertical el panel es el doble de ancho que en el Muro: mapa y listas lado a lado. */
body.hy-tv-muro.hy-tv-vertical #hy .hy-ov2.tv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
body.hy-tv-muro.hy-tv-vertical #hy .hy-ov2.tv .hy-mapa .peru{max-height:calc(var(--u)*22)}
/* Las dos listas del mapa (mejores y a revisar): nombre y cifra en un renglón, sin la
   barra, que en un panel angosto partía cada nombre en dos líneas. En el Muro van una
   al lado de la otra bajo el mapa; en vertical, a la derecha del mapa. */
body.hy-tv-muro #hy .hy-tv-lista .hy-rk{grid-template-columns:calc(var(--u)*1.3) minmax(0,1fr) auto;gap:calc(var(--u)*.6)}
body.hy-tv-muro #hy .hy-tv-lista .hy-rk .pistas{display:none}
body.hy-tv-muro #hy .hy-tv-lista .hy-rk{padding:calc(var(--u)*.2) calc(var(--u)*.3);line-height:1.25}
body.hy-tv-muro #hy .hy-tv-lista .hy-rk .n{display:block;white-space:nowrap;text-overflow:ellipsis;font-size:calc(var(--u)*1.1);line-height:1.25}
body.hy-tv-muro #hy .hy-tv-lista .hy-rk .v{font-size:calc(var(--u)*1.25);line-height:1.2}
body.hy-tv-muro #hy .hy-tv-lista{margin-bottom:calc(var(--u)*.6)}
/* En el Muro horizontal el panel es bajo y angosto: mapa más chico y menos aire. */
body.hy-tv-muro:not(.hy-tv-vertical) #hy .hy-ov2.tv{row-gap:calc(var(--u)*.9)}
body.hy-tv-muro:not(.hy-tv-vertical) #hy .hy-ov2.tv .hy-mapa .peru{max-height:calc(var(--u)*16)}
body.hy-tv-muro:not(.hy-tv-vertical) #hy .hy-ov2.tv .hy-ov2-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--u)*1.2);align-items:start}
body.hy-tv-muro:not(.hy-tv-vertical) #hy .hy-ov2.tv .hy-ov2-r>.hy-tv-nota{grid-column:1/-1}
body.hy-tv-muro #hy .hy-tv-lista h3{font-size:calc(var(--u)*1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Alertas: en el Muro, dos columnas (tres dejaban cada explicación en diez renglones);
   la explicación, hasta tres renglones. */
body.hy-tv-muro:not(.hy-tv-vertical) #hy .hy-aten{grid-template-columns:repeat(2,minmax(0,1fr))}
body.hy-tv-muro #hy .hy-aten{gap:calc(var(--u)*.7)}
body.hy-tv-muro #hy .hy-aten-i{padding:calc(var(--u)*.8) calc(var(--u)*1)}
body.hy-tv-muro #hy .hy-aten-i .e{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body.hy-tv-muro #hy .hy-aten-i .n{font-size:calc(var(--u)*2.6)}
body.hy-tv-muro #hy .hy-aten-i .t{font-size:calc(var(--u)*1.1);line-height:1.25}
/* Variación entre períodos: en un panel angosto el nombre de la sede quedaba en «W.».
   Sin la barra (la diferencia ya va en cifra), el nombre se lleva el espacio. */
body.hy-tv-muro #hy .hy-mov-f{grid-template-columns:calc(var(--u)*1.4) calc(var(--u)*1.4) minmax(0,1fr) auto auto;gap:calc(var(--u)*.6)}
body.hy-tv-muro #hy .hy-mov-f .bar{display:none}
body.hy-tv-muro #hy .hy-mov-f .n{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* La celda «sin ítems» de la tira 10R tomaba el gris claro del portal: en la tele
   oscura era un recuadro blanco. */
body.hy-tv:not(.hy-tv-claro) #hy .hy-tira-v.sin-items{background:rgba(255,255,255,.06)}

/* ── celulares (hy-tv-compacto): el zoom no baja de 0,55 y la tele se lee como una
   página que se desliza con el dedo. Con la altura fija de una tele, un celular
   acostado dejaba al panel un tercio de pantalla y lo aplastaba. Solo se dibuja el
   panel visible (los otros, apilados para el fundido, estirarían la página) y el pie
   con los controles queda fijo abajo. */
body.hy-tv.hy-tv-compacto{overflow:auto}
/* #hy va fijo a pantalla completa (hy-max): es él quien se desliza, no la página. */
body.hy-tv-compacto #hy{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.hy-tv-compacto #hy #hy-cuerpo{flex:none}
body.hy-tv-compacto #hy .hy-escenario{flex:none;grid-template-rows:auto}
body.hy-tv-compacto #hy .hy-escenario>.hy-panel{height:auto;overflow:visible}
body.hy-tv-compacto #hy .hy-escenario>.hy-panel:not(.activa){display:none}
body.hy-tv-compacto #hy .hy-escenario>.hy-panel .hy-panel-c{overflow:visible}
body.hy-tv-compacto #hy>.hy-tv-ui{position:sticky;bottom:0;z-index:5;background:var(--bg)}
/* En el celular las fichas del pie se comían el alto del panel: se pasa con las
   flechas o deslizando. En vertical, mapa y listas van uno debajo del otro. */
body.hy-tv-compacto #hy .hy-tv-chips{display:none}
body.hy-tv-compacto.hy-tv-muro.hy-tv-vertical #hy .hy-ov2.tv{grid-template-columns:minmax(0,1fr)}
body.hy-tv-compacto.hy-tv-muro #hy .hy-aten{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Tira 10R en columna (Muro y vertical): «Obligatorios / Recomendados» una sola vez,
   como encabezado de columna, en vez de «OBLIG.» y «RECOM.» en cada fila; así el
   nombre del proceso entra entero en vez de «3R: RECO…». */
body.hy-tv-muro #hy .hy-tira-rot{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*5.2) calc(var(--u)*5.2);grid-template-rows:auto;grid-row:auto}
body.hy-tv-muro #hy .hy-tira-rot span{border-top:0;justify-content:flex-end;padding:0 calc(var(--u)*.4) calc(var(--u)*.25);font-size:calc(var(--u)*.54);letter-spacing:.02em;white-space:nowrap}
body.hy-tv-muro #hy .hy-tira-col{grid-template-columns:minmax(0,1fr) calc(var(--u)*5.2) calc(var(--u)*5.2)}
body.hy-tv-muro #hy .hy-tira-v{min-width:0}
body.hy-tv-muro #hy .hy-tira-v .k{display:none}
/* Celular acostado: el escenario es más angosto que una tele, así que la tira de ocho
   procesos lleva el nombre más chico (partía «RECORDA/R») y la cifra de la red no se
   parte en dos renglones. */
body.hy-tv-compacto:not(.hy-tv-muro) #hy .hy-tira-i .l{font-size:calc(var(--u)*.8);word-break:normal;overflow-wrap:normal;hyphens:none}
body.hy-tv-compacto #hy .hy-mov-red b{white-space:nowrap;font-size:calc(var(--u)*2.7)}

/* ── logo de Hyundai en la barra de la tele: es su portal. Blanco sobre la tele
   oscura (Hyundai publica también su versión blanca) y azul en el tema de proyector;
   el archivo es el oficial, sin cambios. ── */
body.hy-tv #hy .hy-tv-logo{flex:none;display:block;height:calc(var(--u)*1.45);width:auto;padding-right:calc(var(--u)*.9);border-right:1px solid var(--line-2);filter:brightness(0) invert(1)}
body.hy-tv.hy-tv-claro #hy .hy-tv-logo{filter:none}