/* KAIA · la tele a cuatro metros, el tema de proyector y el movimiento de
   entrada (etapa 07, pasos 2 y 3).

   Tamaños: todo lo que se ve en la tele se mide en --u, una unidad atada al alto
   de la pantalla (20 px en una de 1080). Así el mismo panel se lee igual en un
   televisor de 1080, en uno 4K y en un proyector de 1280×800, y el texto nunca
   se achica con un transform, que lo emborronaría. La escala sigue la norma
   AVIXA DISCAS de tamaño por distancia: cifras de 5 unidades, títulos de 2,4,
   rótulos de 1,3-1,6 y nada por debajo de 0,9 salvo lo decorativo.           */
/* Una variable no tiene respaldo en la línea anterior: si min() no existe, la
   unidad quedaría inválida y toda la letra de la tele heredaría 14 px. */
body.hy-tv .hy{--u:1.852vh;padding:0 3.4vw}
@supports (width:min(1px,2px)){body.hy-tv .hy{--u:min(1.852vh,1.042vw)}}
body.hy-tv .hy *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.hy-tv .hy-escenario{position:relative}
body.hy-tv .hy-escenario>.hy-panel{overflow:hidden;padding:calc(var(--u)*1.5) calc(var(--u)*2)}
body.hy-tv .hy-panel-c{min-height:0;overflow:hidden}
body.hy-tv .hy-panel-h{margin-bottom:calc(var(--u)*.9)}
body.hy-tv .hy-panel-h h2{font-size:calc(var(--u)*2.4);letter-spacing:-.015em}
body.hy-tv .hy-panel-h h2 svg{width:.8em;height:.8em}
body.hy-tv .hy-panel-h .hy-sub{font-size:calc(var(--u)*1.15);margin-top:.3em}

/* cifra principal */
body.hy-tv .hy-hero{padding:calc(var(--u)*2.4) calc(var(--u)*2.6);gap:calc(var(--u)*2)}
body.hy-tv .hy-hero h2{font-size:calc(var(--u)*3.2)}
body.hy-tv .hy-hero .hy-p{font-size:calc(var(--u)*1.1);max-width:40ch}
body.hy-tv .hy-hero .hy-kick{font-size:calc(var(--u)*.9)}
body.hy-tv .hy-cifra{padding:calc(var(--u)*1.3) calc(var(--u)*1.4);gap:calc(var(--u)*.5)}
body.hy-tv .hy-cifra .l{font-size:calc(var(--u)*1)}
body.hy-tv .hy-cifra .v{font-size:calc(var(--u)*5.2)}
body.hy-tv .hy-cifra .r{font-size:calc(var(--u)*1)}
body.hy-tv .hy-cifra .d b{font-size:calc(var(--u)*1.2)}
body.hy-tv .hy-cifra .bar{height:calc(var(--u)*.45)}

/* rankings */
body.hy-tv .hy-rk{grid-template-columns:calc(var(--u)*1.8) minmax(0,1.3fr) minmax(0,1fr) calc(var(--u)*5.4);gap:calc(var(--u)*.8);padding:calc(var(--u)*.4) calc(var(--u)*.5)}
body.hy-tv .hy-rk .p{font-size:calc(var(--u)*1)}
body.hy-tv .hy-rk .n{font-size:calc(var(--u)*1.35)}
body.hy-tv .hy-rk .n small{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-rk .v{font-size:calc(var(--u)*1.6)}
body.hy-tv .hy-rk .v small{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-rk .pista{height:calc(var(--u)*.7)}
body.hy-tv .hy-rk-eje,body.hy-tv .hy-rk-ref,body.hy-tv .hy-pie,body.hy-tv .hy-mapa-cob{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-leyenda{font-size:calc(var(--u)*1.05)}
body.hy-tv .hy-rampa{font-size:calc(var(--u)*1)}
body.hy-tv .hy-rampa i{width:calc(var(--u)*2.2);height:calc(var(--u)*.8)}
body.hy-tv .hy-rampa small{font-size:calc(var(--u)*.9)}
body.hy-tv .hy-gr svg{max-height:58vh}

/* mapa en la tele: el mapa y dos listas cortas en letra grande, no veinte filas */
body.hy-tv .hy-ov2.tv{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(var(--u)*2.2);align-items:start;height:100%}
body.hy-tv .hy-ov2.tv .hy-mapa .peru{max-height:60vh}
body.hy-tv .hy-ov2.tv .hy-mapa .lima{max-height:46vh}
body.hy-tv .hy-mapas{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:calc(var(--u)*.8)}
body.hy-tv .hy-mapa-tit{font-size:calc(var(--u)*.8);margin-bottom:calc(var(--u)*.4)}
body.hy-tv .hy-lima-leyenda{font-size:calc(var(--u)*.82);gap:calc(var(--u)*.25) calc(var(--u)*.9);margin-top:calc(var(--u)*.6)}
body.hy-tv .hy-lima-leyenda li b{width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);font-size:calc(var(--u)*.65)}
.hy-tv-lista{margin-bottom:calc(var(--u)*1.2)}
.hy-tv-lista h3{margin:0 0 .35em;font-size:calc(var(--u)*1.25);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.hy-tv-lista.bajas h3{color:var(--dv-neg)}
.hy-tv-lista .hy-rk-eje,.hy-tv-lista .hy-pie,.hy-tv-lista .hy-rk-ref{display:none}
/* De lejos se lee nombre y cifra; la ciudad y el concesionario quedan para el portal. */
body.hy-tv .hy-tv-lista .hy-rk .n small{display:none}
body.hy-tv .hy-tv-lista .hy-rk{padding:calc(var(--u)*.3) calc(var(--u)*.5)}
body.hy-tv .hy-tv-lista .hy-rank{max-height:none;overflow:visible}
.hy-tv-nota{margin:.4em 0 0;font-size:calc(var(--u)*.95);color:var(--ink-3)}

/* qué requiere atención: seis mosaicos; el color aparece solo si hay algo */
body.hy-tv .hy-aten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1);height:100%}
body.hy-tv .hy-aten-i>*+*{margin-top:.25em}
body.hy-tv .hy-aten-i{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:calc(var(--u)*1.2) calc(var(--u)*1.4);border-width:2px}
body.hy-tv .hy-aten-i .n{font-size:calc(var(--u)*4.4);min-width:0;text-align:left}
body.hy-tv .hy-aten-i .t{font-size:calc(var(--u)*1.3)}
body.hy-tv .hy-aten-i .e{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-aten-i .ir{display:none}
body.hy-tv .hy-aten-i.critico:not(.cero){border-color:var(--dv-neg)}
body.hy-tv .hy-aten-i.revision:not(.cero){border-color:var(--hy-ambar)}
body.hy-tv .hy-aten-i.cero{opacity:.72}

/* flujo y acciones por concesionaria */
body.hy-tv .hy-emb{grid-template-columns:calc(var(--u)*13) minmax(0,1fr) calc(var(--u)*3.5);gap:calc(var(--u)*.8);padding:calc(var(--u)*.3) 0}
body.hy-tv .hy-emb .l{font-size:calc(var(--u)*1.2)}
body.hy-tv .hy-emb .v{font-size:calc(var(--u)*1.5)}
body.hy-tv .hy-emb .pista{height:calc(var(--u)*.9)}
body.hy-tv .hy-venc{font-size:calc(var(--u)*1.1)}
body.hy-tv .hy-ap{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) calc(var(--u)*3);padding:calc(var(--u)*.3) 0}
body.hy-tv .hy-ap .n{font-size:calc(var(--u)*1.2)}
body.hy-tv .hy-ap .n small{font-size:calc(var(--u)*.9)}
body.hy-tv .hy-ap .pila{height:calc(var(--u)*.9)}
body.hy-tv .hy-ap .v{font-size:calc(var(--u)*1.2)}

/* tira 10R */
body.hy-tv .hy-tira-i .ic{width:calc(var(--u)*4.6)}
body.hy-tv .hy-tira-i .l{font-size:calc(var(--u)*1)}
body.hy-tv .hy-tira-v b{font-size:calc(var(--u)*1.9)}
body.hy-tv .hy-tira-rot span{font-size:calc(var(--u)*.95)}
/* En muro (tres paneles a la vez) la tira de 8 procesos recibe apenas un tercio de
   pantalla, y como estrip horizontal de 8 columnas colapsaba: iconos encallimados,
   rotulos partidos letra a letra («3R/RE/CO/RD/AR») y numeros pegados
   («7966368765635721»). Manu lo vio raro en la tele. El corte responsive era por ancho
   de VENTANA (1920) y en el muro la ventana es ancha aunque el panel sea angosto. En
   muro se rearma como LISTA vertical: una fila por proceso, con su icono, el codigo y
   sus dos numeros grandes (obligatorios / recomendados), que es lo que se lee de lejos.
   Se ocultan el aviso azul y el pie de este panel para dar alto a las ocho filas; el
   nombre largo se recorta con «...» pero el codigo 3R..10R siempre se ve. En pantalla
   completa (un solo panel) la tira sigue a lo ancho con iconos grandes, que ahi entra. */
body.hy-tv-muro .hy-panel[data-panel="procesos"] .hy-lectura,
body.hy-tv-muro .hy-panel[data-panel="procesos"] .hy-pie{display:none}
body.hy-tv-muro .hy-tira{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none}
body.hy-tv-muro .hy-tira-rot{display:none}
body.hy-tv-muro .hy-tira-col{display:grid;grid-template-columns:1fr auto auto;align-items:center;grid-row:auto;
  border-left:0;border-top:1px solid var(--line-2)}
body.hy-tv-muro .hy-tira-col:first-child{border-top:0}
body.hy-tv-muro .hy-tira-i{flex-direction:row;justify-content:flex-start;align-items:center;
  gap:calc(var(--u)*.5);padding:calc(var(--u)*.42) calc(var(--u)*.55);min-width:0}
body.hy-tv-muro .hy-tira-i .ic{width:calc(var(--u)*2.3);flex:none}
body.hy-tv-muro .hy-tira-i .l{font-size:calc(var(--u)*1);line-height:1.05;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hy-tv-muro .hy-tira-v{border-top:0;justify-content:flex-end;gap:calc(var(--u)*.35);
  padding:0 calc(var(--u)*.4);min-width:calc(var(--u)*4)}
body.hy-tv-muro .hy-tira-v .k{display:inline;font-size:calc(var(--u)*.62);color:var(--ink-3)}
body.hy-tv-muro .hy-tira-v b{font-size:calc(var(--u)*1.7)}

/* controles y marco, en la misma unidad */
body.hy-tv .hy-tv-barra{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-tv-r{font-size:calc(var(--u)*1.9)}
body.hy-tv .hy-tv-fila{font-size:calc(var(--u)*1.15)}
body.hy-tv .hy-tv-chips{flex-wrap:nowrap;overflow:hidden}
body.hy-tv .hy-tv-chips button{font-size:calc(var(--u)*.78);padding:.3em .75em;white-space:nowrap;flex:none}

/* Contra el quemado de pantalla: el marco fijo se corre 1-2 px cada tres minutos. */
body.hy-tv[data-deriva="1"] .hy-tv-barra,body.hy-tv[data-deriva="1"] .hy-tv-pie{transform:translate(2px,1px)}
body.hy-tv[data-deriva="2"] .hy-tv-barra,body.hy-tv[data-deriva="2"] .hy-tv-pie{transform:translate(-1px,2px)}
body.hy-tv[data-deriva="3"] .hy-tv-barra,body.hy-tv[data-deriva="3"] .hy-tv-pie{transform:translate(-2px,-1px)}

/* ═══════════ tema «Proyector o sala iluminada» ═══════════
   Un proyector con la luz prendida lava los oscuros: el fondo casi negro se
   vuelve gris y los grises del texto desaparecen. Este tema es claro (marfil,
   nunca blanco puro, que encandila), con tinta a 7:1 y los colores de dato más
   oscuros y saturados. El mapa también pasa a claro.                          */
body.hy-tv.hy-tv-claro .hy{
  --bg:#F4F1EA;--bg-2:#FFFDF8;--bg-3:#EAE5DA;
  --ink:#101619;--ink-2:#333E45;--ink-3:#4E5A62;
  --line:rgba(16,22,25,.16);--line-2:rgba(16,22,25,.32);
  --s1:#1A56A8;--s2:#B0441A;
  --r1:#9EC0EA;--r2:#6B9BDB;--r3:#3C77C4;--r4:#1F5AA6;--r5:#123F7A;
  --dv-neg:#B3312E;--dv-pos:#1A56A8;--dv-mid:#77736B;
  --gr-rej:#DDD7CA;--gr-eje:#8C877B;--gr-sup:#FFFDF8;
  --hy-azul:#1A56A8;--hy-azul-bg:rgba(26,86,168,.12);
  --hy-ok:#1C7A4F;--hy-ambar:#8A5A00;--hy-rojo:#B3312E;--hy-gris:#5E676D}
body.hy-tv.hy-tv-claro .hy-mapa .mapcard{background:#E7E1D4;--dv-neg:#B3312E;--dv-pos:#1A56A8;--dv-mid:#77736B;
  --r1:#9EC0EA;--r2:#6B9BDB;--r3:#3C77C4;--r4:#1F5AA6;--r5:#123F7A}
body.hy-tv.hy-tv-claro .hy .peru .dep.vacio{fill:#D5CEBF;stroke:#C3BBA9}
body.hy-tv.hy-tv-claro .hy .lima .ld,body.hy-tv.hy-tv-claro .hy .lima .ld.vacio{fill:#D5CEBF;stroke:#C3BBA9}
body.hy-tv.hy-tv-claro .hy-lima-leyenda,body.hy-tv.hy-tv-claro .hy-lima-leyenda li .v{color:#101619}
body.hy-tv.hy-tv-claro .hy .peru .dep.con[data-paso]{stroke:rgba(16,22,25,.25)}
body.hy-tv.hy-tv-claro .hy .peru .pin.neutro .dot{fill:#002C5F;stroke:#fff}
body.hy-tv.hy-tv-claro .hy .peru .lbl{fill:#101619}
body.hy-tv.hy-tv-claro #hy-rayado rect{fill:#D5CEBF} body.hy-tv.hy-tv-claro #hy-rayado line{stroke:#A69E8C}
body.hy-tv.hy-tv-claro .hy-rk .pista,body.hy-tv.hy-tv-claro .hy-emb .pista{background:rgba(16,22,25,.08)}
body.hy-tv.hy-tv-claro .hy-tv-fl{color:#101619;background:rgba(16,22,25,.06);border-color:rgba(16,22,25,.3)}
body.hy-tv.hy-tv-claro .hy-tv-fl:hover{background:rgba(16,22,25,.14)}
body.hy-tv.hy-tv-claro .hy-tv-fl:focus-visible{background:rgba(16,22,25,.14)}
body.hy-tv.hy-tv-claro .hy-tv-pie .hy-tv-p{background:rgba(16,22,25,.08)}
body.hy-tv.hy-tv-claro .hy-tv-est{background:rgba(138,90,0,.12)}

/* ═══════════ ajustes de esta pantalla (tecla P) ═══════════ */
.hy-tv-ajustes{position:fixed;z-index:90;top:50%;left:50%;transform:translate(-50%,-50%);width:60vw;width:min(60vw,1000px);
  padding:calc(var(--u,20px)*2);border-radius:20px;background:var(--bg-2);border:2px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--ink);font-size:calc(var(--u,20px)*1.05)}
.hy-tv-ajustes h3{margin:0 0 .3em;font-size:calc(var(--u,20px)*1.8)}
.hy-tv-ajustes p{margin:.3em 0;color:var(--ink-2);line-height:1.45}
.hy-tv-ajustes .k{font-size:.85em;color:var(--ink-3)}
.hy-tv-ajustes .esc{display:flex;margin:.8em 0 1em;height:calc(var(--u,20px)*4);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.hy-tv-ajustes .esc i{flex:1;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;color:var(--ink-3)}
.hy-tv-ajustes .esc i:nth-child(1){background:#0B1014}.hy-tv-ajustes .esc i:nth-child(2){background:#131B21}
.hy-tv-ajustes .esc i:nth-child(3){background:#1C262D}.hy-tv-ajustes .esc i:nth-child(4){background:#26313A}
.hy-tv-ajustes .esc i:nth-child(5){background:#313D47}
body.hy-tv-claro .hy-tv-ajustes .esc i:nth-child(1){background:#FFFDF8}body.hy-tv-claro .hy-tv-ajustes .esc i:nth-child(2){background:#F4F1EA}
body.hy-tv-claro .hy-tv-ajustes .esc i:nth-child(3){background:#E9E4D8}body.hy-tv-claro .hy-tv-ajustes .esc i:nth-child(4){background:#DDD7CA}
body.hy-tv-claro .hy-tv-ajustes .esc i:nth-child(5){background:#D1CABB}
.hy-tv-ajustes .op{display:flex;flex-wrap:wrap;margin:.5em -.3em}
.hy-tv-ajustes .op.fin{justify-content:flex-end;margin-top:1em}
.hy-tv-ajustes .op button{font:inherit;margin:.3em;padding:.5em 1.1em;border-radius:100px;border:2px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}
.hy-tv-ajustes .op button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.hy-tv-ajustes .op button:focus-visible{outline:3px solid var(--s1);outline-offset:2px}

/* ═══════════ movimiento de entrada ═══════════
   Solo transform y opacidad, que el televisor mueve sin esfuerzo; cada escena
   termina quieta para leerse. Con movimiento reducido o «Sobrio», nada.       */
.hy-tv-placa{display:none}
@media (prefers-reduced-motion:no-preference){
  .hy-entra .hy-rk,.hy-entra .hy-aten-i,.hy-entra .hy-emb,.hy-entra .hy-ap,.hy-entra .hy-tira-col,.hy-entra .hy-cifra,.hy-entra .hy-tv-lista{
    animation:hy-entra .6s cubic-bezier(.05,.7,.1,1) backwards;animation-delay:calc(var(--n,0) * 45ms)}
  .hy-entra .pista i,.hy-entra .hy-cifra .bar i,.hy-entra .pila i{
    transform-origin:left center;animation:hy-crece .9s cubic-bezier(.05,.7,.1,1) backwards;animation-delay:calc(var(--n,0) * 45ms + 150ms)}
  /* El Perú se levanta en perspectiva y se asienta plano, con los departamentos
     subiendo del más bajo al más alto: el nivel «Inclinado», para cualquier
     aparato, antes del 3D de verdad. */
  .hy-entra .mapcard{perspective:1400px}
  .hy-entra .mapcard svg{transform-origin:50% 62%;animation:hy-inclina 1.9s cubic-bezier(.2,.7,.1,1) backwards}
  .hy-entra .mapcard .dep.con{transform-box:fill-box;transform-origin:50% 100%;
    animation:hy-sube .8s cubic-bezier(.05,.7,.1,1) backwards;animation-delay:calc(var(--n,0) * 60ms + 450ms)}
  .hy-barrido{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:inherit;opacity:0;
    background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%)}
  .hy-entra .hy-barrido{animation:hy-barrido 1.4s ease-out 1.1s}
  body.hy-tv .hy-tv-placa{display:flex}
  .hy-tv-placa{position:absolute;left:calc(var(--u,20px)*2);bottom:calc(var(--u,20px)*1.4);z-index:5;align-items:baseline;
    padding:.45em 1em .45em .8em;border-radius:12px;background:rgba(0,44,95,.94);color:#fff;
    font-size:calc(var(--u,20px)*1.3);font-weight:600;pointer-events:none;opacity:0}
  .hy-tv-placa b{font-family:var(--disp);font-variant-numeric:tabular-nums;color:#00AAD2;margin-right:.55em}
  .hy-tv-placa.ver{animation:hy-placa 1.9s cubic-bezier(.05,.7,.1,1) both}
}
@keyframes hy-entra{from{opacity:0;transform:translateY(12px)}}
@keyframes hy-crece{from{transform:scaleX(0)}}
@keyframes hy-inclina{
  0%{transform:rotateX(46deg) rotateZ(-5deg) scale(.86) translateY(3%);opacity:.15;filter:drop-shadow(0 22px 0 rgba(0,0,0,.45))}
  55%{transform:rotateX(26deg) rotateZ(-2deg) scale(.94);opacity:1;filter:drop-shadow(0 12px 0 rgba(0,0,0,.35))}
  100%{transform:none;filter:none}}
@keyframes hy-sube{from{transform:translateY(-12px) scale(1.035);opacity:.35}}
@keyframes hy-barrido{0%{opacity:1;transform:translateX(-60%)}100%{opacity:0;transform:translateX(60%)}}
@keyframes hy-placa{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}
body.hy-tv-sobrio .hy-entra *,body.hy-tv-sobrio .hy-entra,body.hy-tv-sobrio .hy-tv-placa{animation:none!important}
body.hy-tv-sobrio .hy-tv-placa{display:none!important}

@media print{.hy-tv-placa,.hy-tv-ajustes,.hy-barrido{display:none!important}}

/* En la tele el mapa no se toca: tocar un departamento no debe dejar un filtro
   escondido, ni abrir un cajón que en pantalla completa no se vería. */
body.hy-tv .hy-mapa .dep,body.hy-tv .hy-mapa .pin{pointer-events:none}
body.hy-tv .hy-mapa-vacio .bt{display:none}

/* Imprimir con la tele encendida saca todos los paneles, no solo el visible. */
@media print{
  body.hy-tv .hy{display:block;height:auto;overflow:visible}
  body.hy-tv .hy-escenario{display:block}
  body.hy-tv .hy-escenario>.hy-panel{display:block!important;opacity:1!important;visibility:visible!important;height:auto;overflow:visible;break-inside:avoid;page-break-after:always}
  body.hy-tv .hy-tv-cinta,body.hy-tv .hy-tv-momento,body.hy-tv .hy-tv-sesion{display:none!important}
  body.hy-tv .hy-panel-c{overflow:visible;zoom:1!important}
}

/* ═══════════ el Perú en 3D ═══════════
   El lienzo cubre la tarjeta del mapa y entra con un fundido sobre el SVG, que
   se queda en el DOM (lo leen los lectores de pantalla). Los nombres de las
   ciudades y la nota de la sede enfocada son HTML, nítidos en 4K.            */
.mapcard canvas.hy-3d{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;border-radius:inherit}
.mapcard svg{transition:opacity .45s ease}
.hy-3d-rot{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;opacity:0}
.hy-3d-rot span{position:absolute;left:0;top:0;font-size:calc(var(--u,20px)*.8);font-weight:600;color:#EAF1F6;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 1px rgba(0,0,0,.9)}
body.hy-tv-claro .hy-3d-rot span{color:#101619;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.hy-3d-foco{position:absolute;left:0;top:0;padding:.45em .85em;border-radius:10px;white-space:nowrap;transition:opacity .4s ease;
  background:rgba(8,18,26,.93);border:1px solid rgba(255,255,255,.22);color:#EAF1F6;font-size:calc(var(--u,20px)*1)}
.hy-3d-foco b{font-weight:700;margin-right:.35em}
body.hy-tv-claro .hy-3d-foco{background:rgba(255,253,248,.96);border-color:rgba(16,22,25,.25);color:#101619}
.hy-tv-lista .hy-rk.foco{background:var(--hy-azul-bg);box-shadow:inset 4px 0 0 var(--s1)}
@media print{.mapcard canvas.hy-3d,.hy-3d-rot{display:none!important}.mapcard svg{opacity:1!important}}

/* Centrar el contenido del panel con justify-content:center lo desborda por
   arriba cuando no cabe (y ese pedazo no se puede ni ver ni medir). Con márgenes
   automáticos queda centrado si sobra lugar y pegado arriba si no. */
body.hy-tv .hy-panel-c{justify-content:flex-start}
body.hy-tv .hy-panel-c>:first-child{margin-top:auto}
body.hy-tv .hy-panel-c>:last-child{margin-bottom:auto}

/* quién mejoró, a cuatro metros */
body.hy-tv .hy-mov{gap:calc(var(--u)*1.8)}
body.hy-tv .hy-mov-red{padding:calc(var(--u)*1.2) calc(var(--u)*1.3)}
body.hy-tv .hy-mov-red .k{font-size:calc(var(--u)*.9)}
body.hy-tv .hy-mov-red b{font-size:calc(var(--u)*4.2)}
body.hy-tv .hy-mov-red span{font-size:calc(var(--u)*1)}
body.hy-tv .hy-mov-p{padding:calc(var(--u)*.7) calc(var(--u)*.9);grid-template-columns:calc(var(--u)*2.2) minmax(0,1fr) auto}
body.hy-tv .hy-mov-p .o{width:calc(var(--u)*2);height:calc(var(--u)*2);font-size:calc(var(--u)*1.05)}
body.hy-tv .hy-mov-p .n b{font-size:calc(var(--u)*1.2)} body.hy-tv .hy-mov-p .n small{font-size:calc(var(--u)*.9)}
body.hy-tv .hy-mov-p .d{font-size:calc(var(--u)*1.4)}
body.hy-tv .hy-mov-f{grid-template-columns:calc(var(--u)*1.6) calc(var(--u)*3) minmax(0,1.5fr) calc(var(--u)*8) minmax(0,1fr) calc(var(--u)*5.4);gap:calc(var(--u)*.7);padding:calc(var(--u)*.35) calc(var(--u)*.5)}
body.hy-tv .hy-mov-f .pos,body.hy-tv .hy-mov-f .cam{font-size:calc(var(--u)*.95)}
body.hy-tv .hy-mov-f .n{font-size:calc(var(--u)*1.25)} body.hy-tv .hy-mov-f .n small{display:none}
body.hy-tv .hy-mov-f .vals{font-size:calc(var(--u)*1)}
body.hy-tv .hy-mov-f .bar{height:calc(var(--u)*.7)}
body.hy-tv .hy-mov-f .d{font-size:calc(var(--u)*1.35)}
body.hy-tv .hy-tira-v small.d{font-size:calc(var(--u)*.85)}

/* la cifra que manda, en la tele */
body.hy-tv .hy-cifra.principal .v{font-size:calc(var(--u)*7)}
body.hy-tv .hy-waffle{gap:calc(var(--u)*.2)}
body.hy-tv .hy-waffle i{height:calc(var(--u)*.7)}

/* en la tele no hay globos; la lectura es el subtítulo de la escena */
body.hy-tv .hy-globo{display:none!important}
body.hy-tv .hy-lectura{font-size:calc(var(--u)*1.1);padding:.35em .8em;margin-bottom:.6em}

/* el 3D del escritorio con letra de escritorio; en la tele, en su unidad */
.hy-3d-rot span{font-size:12px}
body.hy-tv .hy-3d-rot span{font-size:calc(var(--u)*.8)}
.hy-3d-foco{font-size:13px;max-width:86%;white-space:normal}
body.hy-tv .hy-3d-foco{font-size:calc(var(--u)*1)}

/* ═══════════ el muro vive solo (etapa 07, paso 9) ═══════════ */
/* la cinta «Al día» */
.hy-tv-cinta{display:flex;align-items:center;margin:.2vh 0 1vh;overflow:hidden;font-size:calc(var(--u,20px)*1.05);color:var(--ink-2)}
.hy-tv-cinta .rot{flex:none;margin-right:1em;padding:.2em .7em;border-radius:6px;background:#002C5F;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8em}
.hy-tv-cinta .pista{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.hy-tv-cinta .mov{display:inline-flex;white-space:nowrap;animation:hy-cinta var(--dur,60s) linear infinite}
.hy-tv-cinta .mov span{padding-right:2.6em}
.hy-tv-cinta .mov span+span::before{content:"·";margin-right:2.6em;margin-left:-1.3em;color:var(--ink-3)}
.hy-tv-cinta b{color:var(--ink)} .hy-tv-cinta .sube{color:var(--dv-pos)}
@keyframes hy-cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hy-tv-cinta .mov{animation:none}}
body.hy-tv-sobrio .hy-tv-cinta .mov{animation:none}
body.hy-tv-claro .hy-tv-cinta .rot{background:#002C5F}

/* momento: la rotación se detiene para contar algo bueno y real */
.hy-tv-momento{position:absolute;left:50%;top:50%;z-index:8;transform:translate(-50%,-50%);width:70%;width:min(70%,1100px);text-align:center;
  padding:calc(var(--u,20px)*2.2) calc(var(--u,20px)*2.6);border-radius:22px;background:#002C5F;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hy-tv-momento .k{margin:0;font-size:calc(var(--u,20px)*1);letter-spacing:.14em;text-transform:uppercase;color:#00AAD2;font-weight:700}
.hy-tv-momento h3{margin:.3em 0;font-size:calc(var(--u,20px)*3);line-height:1.1}
.hy-tv-momento h3 .sube{color:#9ec5f4}
.hy-tv-momento p{margin:.2em 0;font-size:calc(var(--u,20px)*1.35);color:rgba(255,255,255,.86)}
@media (prefers-reduced-motion:no-preference){.hy-tv-momento{animation:hy-momento .6s cubic-bezier(.05,.7,.1,1) both}}
@keyframes hy-momento{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}}

/* sesión vencida: una sola tarjeta, arriba */
.hy-tv-sesion{position:fixed;left:50%;top:13vh;z-index:85;transform:translateX(-50%);max-width:80vw;padding:.9em 1.5em;border-radius:14px;
  background:#8A5A00;color:#fff;font-size:calc(var(--u,20px)*1.15);font-weight:600;box-shadow:0 18px 50px rgba(0,0,0,.45)}

/* El Muro: tres paneles a la vez, como el cuadro común de un centro de control */
body.hy-tv-muro .hy-escenario{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.2vw}
body.hy-tv-muro .hy-escenario>.hy-panel{grid-area:auto;grid-row:1;display:none}
body.hy-tv-muro .hy-escenario>.hy-panel.activa{display:flex;grid-column:1}
body.hy-tv-muro .hy-escenario>.hy-panel.muro-b{display:flex;grid-column:2;opacity:1;visibility:visible}
body.hy-tv-muro .hy-escenario>.hy-panel.muro-c{display:flex;grid-column:3;opacity:1;visibility:visible}
body.hy-tv-muro .hy-ov2.tv{grid-template-columns:1fr}
/* En el muro el panel es angosto: dos mapas no se leen; queda el Perú solo. */
body.hy-tv-muro .hy-mapas{grid-template-columns:1fr}
body.hy-tv-muro .hy-mapa .lima-card{display:none}

/* ajustes de la tele en Personalizar */
.hy-tv-conf{margin:14px 0 0;padding:12px 14px 10px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.hy-tv-conf legend{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-weight:600;font-size:13px}
.hy-tv-conf legend svg{width:15px;height:15px}
.hy-tv-conf .bt{display:flex;flex-wrap:wrap;gap:8px}
/* En el Muro cada panel tiene un tercio del ancho: títulos más cortos y la
   torre de posiciones sin el podio, que ya cuenta la cinta. */
body.hy-tv-muro .hy-panel-h h2{font-size:calc(var(--u)*1.7)}
body.hy-tv-muro .hy-panel-h .hy-sub{font-size:calc(var(--u)*.9)}
body.hy-tv-muro .hy-mov{grid-template-columns:1fr}
body.hy-tv-muro .hy-mov-podio{display:none}
body.hy-tv-muro .hy-mov-red b{font-size:calc(var(--u)*3)}

/* Mientras el relieve está encendido, el mapa plano de debajo no recibe el puntero. */
.mapcard.en-3d svg{pointer-events:none}

/* Cinco cifras en la tele: concesionarios y talleres son cuentas distintas y las
   dos van arriba. La principal conserva su peso; las demás ceden ancho. */
body.hy-tv .hy-hero{grid-template-columns:minmax(0,.62fr) 3fr}
body.hy-tv .hy-hero-n{grid-template-columns:repeat(2,minmax(0,1fr)) 1.3fr repeat(2,minmax(0,1fr));gap:calc(var(--u)*.7)}
body.hy-tv .hy-cifra{min-width:0;overflow:hidden;padding:calc(var(--u)*1) calc(var(--u)*1)}
/* Con cinco cifras en una fila, el tamaño de la etapa 07 (5,2u) desbordaba su
   tarjeta y una cifra se montaba sobre la de al lado. Estos valores son los que
   entran, medidos a 1920×1080 y a 3840×2160. */
body.hy-tv .hy-cifra .v{font-size:calc(var(--u)*3)}
body.hy-tv .hy-cifra .v small{font-size:.4em}
body.hy-tv .hy-cifra.principal .v{font-size:calc(var(--u)*4.6)}
body.hy-tv .hy-cifra .l{font-size:calc(var(--u)*.85);letter-spacing:.04em}
body.hy-tv .hy-cifra .r{font-size:calc(var(--u)*.85);min-height:0}
body.hy-tv .hy-hero h2{font-size:calc(var(--u)*2.6)}
/* La ficha de un panel con nombre largo se recorta con puntos suspensivos en vez
   de empujar al contador fuera de la pantalla. */
body.hy-tv .hy-tv-chips button{max-width:22ch;overflow:hidden;text-overflow:ellipsis}