/* ===================== Espacio Hyundai · interior del panel =====================
   Encapsulado bajo .hy: hereda tokens, fuentes, cabecera y fondo de styles.css. Nada
   de resets globales. Los colores de abajo son tokens funcionales del panel (serie,
   revisión, verificado), no colores oficiales de KAIA ni de Hyundai.
   El cajón, el fondo, el aviso y la burbuja cuelgan de <body>, fuera de .hy: llevan
   los mismos tokens para que sus etiquetas y botones no queden sin color.           */
.hy,.hy-cajon,.hy-fondo,.hy-toast,.hy-tg-fab{
  --hy-azul:#245DDE; --hy-azul-bg:#EDF3FF;
  --hy-verde:#067F83; --hy-verde-bg:#E9F7F5;
  --hy-violeta:#6948BB; --hy-violeta-bg:#F3EFFC;
  --hy-ambar:#966000; --hy-ambar-bg:#FFF5E2;
  --hy-rojo:#B6364B; --hy-rojo-bg:#FFF0F3;
  --hy-ok:#167550; --hy-ok-bg:#E9F7EF;
  --hy-gris:#5B6770; --hy-gris-bg:#F1F3F5;
  --hy-radio:20px; --hy-radio-s:12px;
  --hy-sombra:0 10px 30px rgba(15,21,24,.06);
  --hy-t:180ms;

  /* ── paleta de datos ───────────────────────────────────────────────────────
     Validada con scripts/validate_palette.js (skill dataviz) contra las dos
     superficies reales: tarjeta blanca #FFFFFF y televisor oscuro #0F1518.
     Pasa banda de luminosidad, piso de croma, separación en daltonismo,
     piso de visión normal y contraste. No cambiar a ojo: volver a validar. */
  --s1:#2a78d6;              /* serie 1 · obligatorios   */
  --s2:#eb6834;              /* serie 2 · recomendados   */
  --r1:#86b6ef; --r2:#5598e7; --r3:#2a78d6; --r4:#1c5cab; --r5:#104281;  /* rampa de magnitud */
  --dv-neg:#d03b3b; --dv-pos:#2a78d6; --dv-mid:#f0efec;                   /* divergente vs promedio */
  --gr-rej:#e1e0d9;          /* líneas de rejilla, un paso sobre la superficie */
  --gr-eje:#c3c2b7;
  --gr-sup:var(--bg-2);      /* color del hueco de 2 px entre marcas */
}
.hy{max-width:1320px}
.hy.compacta{--hy-radio:14px}
.hy *{box-sizing:border-box}
.hy .hy-oculto{display:none!important}

/* ── cabecera local ─────────────────────────────────────────── */
.hy-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hy-crumb a{color:var(--hy-azul)} .hy-crumb a:hover{text-decoration:underline}
.hy-crumb b{color:var(--ink);font-weight:600}
.hy-crumb i{font-style:normal;opacity:.45}
.hy-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.hy-head .hy-kicker{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hy-head h1{margin:0;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.03em}
.hy-head h1 span{font-weight:500;color:var(--ink-2);font-size:.55em;letter-spacing:-.01em;margin-left:10px}
.hy-head .hy-sub{margin:10px 0 0;max-width:70ch;font-size:15px;color:var(--ink-2);line-height:1.55}
.hy-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hy-perfil{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 11px;border:1px solid var(--line);border-radius:100px;background:var(--bg-2)}
.hy-perfil::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hy-azul)}

/* botones */
.hy-btn{font:inherit;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink);transition:border-color var(--hy-t) var(--ease),background var(--hy-t) var(--ease),transform var(--hy-t) var(--ease);text-decoration:none;min-height:40px;white-space:nowrap}
.hy-btn:hover{border-color:var(--ink)} .hy-btn:active{transform:translateY(1px)}
.hy-btn.primario{background:var(--ink);border-color:var(--ink);color:#fff} .hy-btn.primario:hover{opacity:.88}
.hy-btn.violeta{background:var(--hy-violeta-bg);border-color:transparent;color:var(--hy-violeta)} .hy-btn.violeta:hover{border-color:var(--hy-violeta)}
.hy-btn.peq{padding:6px 11px;font-size:12px;min-height:32px;border-radius:9px}
.hy-btn.fantasma{background:transparent}
.hy-btn[disabled]{opacity:.45;cursor:not-allowed}
.hy-btn svg{width:15px;height:15px;flex:none}
.hy-btn.icono{padding:9px;border-radius:10px}

/* ── riel lateral ──────────────────────────────────────────────────────────
   El portal deja de ser una página con pestañas y pasa a ser una aplicación:
   el riel fijo a la izquierda y el contenido a la derecha, como Gmail o el
   administrador de Meta. Vive colgado de <body>, no de .hy, así que un solo
   `padding-left` corre todo lo demás y ninguna de las catorce páginas cambió.  */
body.hy-app{--rail:252px;padding-left:var(--rail);transition:padding-left 200ms var(--ease)}
body.hy-app.hy-rail-iconos{--rail:68px}

.hy-nav{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:8;
  display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;margin:0;
  background:var(--bg-2);border:0;border-right:1px solid var(--line);border-radius:0;
  box-shadow:none;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  transition:width 200ms var(--ease),transform 220ms var(--ease)}
.hy-nav::-webkit-scrollbar{width:6px}
.hy-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}

.hy-rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 14px}
.hy-rail-marca{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink)}
/* El logo oficial de Hyundai (assets/hyundai-logo.svg, tal como lo publica hyundai.pe).
   Con el riel contraído se ve solo el óvalo: la caja corta el logo en el borde del
   emblema (0 a 39,5 de 148 unidades de ancho), sin tocar el archivo. */
.hy-rail-marca:has(b img){flex-direction:column;align-items:flex-start;gap:5px}
.hy-rail-marca b{flex:none;display:block;height:22px;overflow:hidden}
.hy-rail-marca b img{display:block;height:22px;width:auto;max-width:none}
.hy-rail-marca span{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:600;line-height:1.2}
.hy-rail-marca small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-rail-x{display:none;border:0;background:transparent;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 6px}

.hy-rail-g{display:flex;flex-direction:column;gap:2px}
.hy-rail-t{margin:14px 0 4px;padding-left:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ── grupos desplegables ───────────────────────────────────────────────────
   Doce entradas planas cansan; cinco que se abren, no. El grupo donde estás se
   abre solo, y el que abras a mano se recuerda, porque cada navegación recarga
   la página entera.                                                          */
.hy-rail-t2{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left}
.hy-rail-t2:hover{background:rgba(15,21,24,.05);color:var(--ink)}
.hy-rail-t2 svg{width:17px;height:17px;flex:none;opacity:.75}
.hy-rail-t2>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-rail-t2[data-aqui="1"]{color:var(--ink);font-weight:600}
.hy-rail-t2 .n{font-style:normal;background:var(--hy-violeta);color:#fff;font-size:10.5px;line-height:1;
  padding:3px 7px;border-radius:100px;font-variant-numeric:tabular-nums;flex:none}
.hy-rail-t2 .ch{flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);opacity:.5;transition:transform 160ms var(--ease)}
.hy-rail-t2[aria-expanded="true"] .ch{transform:rotate(45deg) translate(-2px,-2px)}
.hy-rail-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 4px}
.hy-rail-sub[hidden]{display:none}
.hy-nav a.sub{padding-left:40px;font-size:13px;color:var(--ink-3)}
.hy-nav a.sub[aria-current="page"]{color:var(--hy-azul)}
.hy-nav a.sub[aria-current="page"]::before{left:26px;top:6px;bottom:6px}
.hy-rail-g.pie{margin-top:6px}
.hy-rail-marca{cursor:default}

/* En modo iconos el submenú sale flotando al costado al pasar o al enfocar:
   sin esto, contraer el menú escondería secciones enteras. */
body.hy-rail-iconos .hy-rail-t2 .ch,body.hy-rail-iconos .hy-rail-t2>span{display:none}
body.hy-rail-iconos .hy-rail-t2{justify-content:center;padding-inline:0}
body.hy-rail-iconos .hy-rail-t2 .n{position:absolute;top:2px;right:6px;padding:1px 5px;font-size:9.5px}
body.hy-rail-iconos .hy-rail-g[data-grupo]{position:relative}
body.hy-rail-iconos .hy-rail-sub{position:absolute;left:100%;top:0;z-index:12;min-width:196px;margin:0 0 0 6px;
  padding:6px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);box-shadow:0 12px 32px rgba(15,21,24,.16);
  opacity:0;visibility:hidden;transition:opacity 130ms var(--ease)}
body.hy-rail-iconos .hy-rail-sub[hidden]{display:flex}
body.hy-rail-iconos .hy-rail-g[data-grupo]:hover .hy-rail-sub,
body.hy-rail-iconos .hy-rail-g[data-grupo]:focus-within .hy-rail-sub{opacity:1;visibility:visible}
body.hy-rail-iconos .hy-nav a.sub{padding-left:12px}
body.hy-rail-iconos .hy-nav a.sub span{display:block}
body.hy-rail-iconos .hy-nav a.sub[aria-current="page"]::before{left:-6px}
.hy-nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background var(--hy-t) var(--ease),color var(--hy-t) var(--ease)}
.hy-nav a svg{width:17px;height:17px;flex:none;opacity:.75}
.hy-nav a span{overflow:hidden;text-overflow:ellipsis}
.hy-nav a:hover{background:rgba(15,21,24,.05);color:var(--ink)}
/* El activo se marca con una barra a la izquierda y un fondo suave, no con un
   bloque negro: en columna, un bloque lleno pesa demasiado y rompe la lectura. */
.hy-nav a[aria-current="page"]{background:var(--hy-azul-bg);color:var(--hy-azul);font-weight:600}
.hy-nav a[aria-current="page"] svg{opacity:1}
.hy-nav a[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--hy-azul)}
.hy-nav .hy-nav-sep{flex:1;min-height:10px}
.hy-nav a.util{font-size:13px;color:var(--ink-3)}
.hy-nav a.util[aria-current="page"]{color:var(--hy-azul)}
.hy-nav a .n{background:var(--hy-violeta);color:#fff;font-size:10.5px;padding:1px 6px;border-radius:100px;font-variant-numeric:tabular-nums;margin-left:auto}

.hy-rail-c{margin-top:10px;display:flex;align-items:center;gap:11px;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;font:inherit;font-size:12.5px;color:var(--ink-3);cursor:pointer;width:100%;text-align:left}
.hy-rail-c:hover{background:rgba(15,21,24,.05);color:var(--ink)}
.hy-rail-c svg{width:16px;height:16px;flex:none}

/* modo iconos: el nombre se va, el título accesible se queda */
body.hy-rail-iconos .hy-nav{padding-inline:8px;align-items:stretch}
body.hy-rail-iconos .hy-nav a span,
body.hy-rail-iconos .hy-rail-marca span,
body.hy-rail-iconos .hy-rail-c span,
body.hy-rail-iconos .hy-rail-t{display:none}
body.hy-rail-iconos .hy-nav a,
body.hy-rail-iconos .hy-rail-c{justify-content:center;padding-inline:0}
body.hy-rail-iconos .hy-rail-marca{justify-content:center}
body.hy-rail-iconos .hy-rail-marca b{width:calc(22px * 1.34)}
body.hy-rail-iconos .hy-rail-marca:has(b img){align-items:center}
body.hy-rail-iconos .hy-nav a[aria-current="page"]::before{left:-8px}
body.hy-rail-iconos .hy-rail-c svg{transform:scaleX(-1)}

/* botón para abrir el riel en pantallas angostas */
.hy-rail-b{display:none;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:8px;cursor:pointer;color:var(--ink)}
.hy-rail-b svg{width:18px;height:18px;display:block}
.hy-top-logo{display:none;height:18px;width:auto;margin-left:10px}
.hy-rail-f{position:fixed;inset:0;z-index:7;background:rgba(15,21,24,.36)}

/* Dos posiciones fijas que el riel descentraba: el aviso flotante y la banda de
   modo abierto quedaban a caballo del menú. */
body.hy-app .hy-toast{left:calc(50% + var(--rail) / 2)}
body.hy-app #abierto{left:var(--rail)}

@media (max-width:1180px){
  body.hy-app{--rail:68px}
  body.hy-app .hy-nav a span,body.hy-app .hy-rail-marca span,
  body.hy-app .hy-rail-c span,body.hy-app .hy-rail-t{display:none}
  body.hy-app .hy-nav a,body.hy-app .hy-rail-c{justify-content:center;padding-inline:0}
  body.hy-app .hy-rail-marca{justify-content:center}
  body.hy-app .hy-rail-marca b{width:calc(22px * 1.34)}
  body.hy-app .hy-rail-marca:has(b img){align-items:center}
  body.hy-app .hy-rail-c{display:none}
}
/* 820 px es el punto que ya usa movil.css para la barra superior: el riel pasa
   a cajón deslizante y el contenido recupera todo el ancho. */
@media (max-width:820px){
  body.hy-app{--rail:252px;padding-left:0}
  body.hy-app .hy-nav{transform:translateX(-100%);box-shadow:0 0 40px rgba(15,21,24,.18);z-index:9}
  body.hy-app.hy-rail-abierto .hy-nav{transform:none}
  body.hy-app .hy-nav a span,body.hy-app .hy-rail-marca span,
  body.hy-app .hy-rail-c span,body.hy-app .hy-rail-t{display:block}
  body.hy-app .hy-nav a,body.hy-app .hy-rail-c{justify-content:flex-start;padding-inline:12px}
  body.hy-app .hy-rail-marca{justify-content:flex-start}
  body.hy-app .hy-rail-marca b{width:auto}
  body.hy-app .hy-rail-marca:has(b img){align-items:flex-start}
  body.hy-app .hy-top-logo{display:block}
  body.hy-app .hy-rail-t2{justify-content:flex-start;padding-inline:12px}
  body.hy-app .hy-rail-t2>span,body.hy-app .hy-rail-t2 .ch{display:block}
  body.hy-app .hy-rail-t2 .n{position:static}
  body.hy-app .hy-rail-sub{position:static;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0;margin:1px 0 4px}
  body.hy-app .hy-rail-sub[hidden]{display:none}
  body.hy-app .hy-nav a.sub{padding-left:40px}
  body.hy-app .hy-rail-c{display:none}
  body.hy-app .hy-rail-x{display:block}
  body.hy-app .hy-rail-b{display:inline-flex}
  body.hy-app .hy-toast{left:50%}
  body.hy-app #abierto{left:0}
}
@media (prefers-reduced-motion:reduce){body.hy-app,.hy-nav{transition:none}}

/* ── barra de contexto ─────────────────────────────────────────── */
.hy-ctx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.hy-campo{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;font-size:13px}
.hy-campo label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hy-campo select{font:inherit;font-size:13px;font-weight:500;border:0;background:transparent;color:var(--ink);padding:4px 4px;max-width:340px;cursor:pointer}
.hy-campo select:focus{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.hy-etq{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:6px 11px;border-radius:100px;border:1px solid transparent;white-space:nowrap}
.hy-etq.ambar{background:var(--hy-ambar-bg);color:var(--hy-ambar);border-color:rgba(150,96,0,.2)}
.hy-etq.azul{background:var(--hy-azul-bg);color:var(--hy-azul)}
.hy-etq.verde{background:var(--hy-verde-bg);color:var(--hy-verde)}
.hy-etq.ok{background:var(--hy-ok-bg);color:var(--hy-ok)}
.hy-etq.rojo{background:var(--hy-rojo-bg);color:var(--hy-rojo)}
.hy-etq.gris{background:var(--hy-gris-bg);color:var(--hy-gris)}
.hy-etq.violeta{background:var(--hy-violeta-bg);color:var(--hy-violeta)}
.hy-etq.sint{background:#FFE9AE;color:#5A3D00;border-color:#E8A317}
.hy-ctx .hy-reset{margin-left:auto}

/* ── tarjetas ─────────────────────────────────────────── */
.hy-tarjetas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.hy-tarj{position:relative;padding:20px 22px 18px;border-radius:var(--hy-radio);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--hy-sombra);
  display:flex;flex-direction:column;gap:6px;min-height:150px;cursor:pointer;transition:transform var(--hy-t) var(--ease),border-color var(--hy-t) var(--ease);text-align:left;font:inherit;color:inherit}
.hy-tarj:hover,.hy-tarj:focus-visible{transform:translateY(-2px);border-color:var(--line-2)}
.hy-tarj.azul{background:linear-gradient(180deg,var(--hy-azul-bg),#fff)}
.hy-tarj.verde{background:linear-gradient(180deg,var(--hy-verde-bg),#fff)}
.hy-tarj.violeta{background:linear-gradient(180deg,var(--hy-violeta-bg),#fff)}
.hy-tarj .t{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hy-tarj .t svg{width:16px;height:16px}
.hy-tarj .v{font-family:var(--disp);font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.hy-tarj .v small{font-size:16px;color:var(--ink-3);font-weight:500;letter-spacing:0;margin-left:3px}
.hy-tarj .a{font-size:12px;color:var(--ink-2)}
.hy-tarj .m{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--ink-3)}
.hy-tarj .m .bar{width:90px;height:5px;margin:0;background:rgba(15,21,24,.08)}
.hy-tarj.azul .m .bar i{background:var(--hy-azul)} .hy-tarj.verde .m .bar i{background:var(--hy-verde)}
.hy-tarj .ir{position:absolute;top:16px;right:16px;color:var(--ink-3)} .hy-tarj .ir svg{width:14px;height:14px}
.hy-tarj .estado{position:absolute;bottom:14px;right:16px}
.hy.compacta .hy-tarj{min-height:118px;padding:14px 16px} .hy.compacta .hy-tarj .v{font-size:30px}

/* ── bloques ─────────────────────────────────────────── */
.hy-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:16px;align-items:start;margin-bottom:18px}
.hy-bloque{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--hy-radio);padding:22px 24px;box-shadow:var(--hy-sombra);min-width:0}
.hy-bloque.violeta{background:linear-gradient(180deg,var(--hy-violeta-bg),#fff)}
.hy-bloque.ambar{background:linear-gradient(180deg,var(--hy-ambar-bg),#fff)}
.hy-bloque h2{margin:0;font-size:21px;letter-spacing:-.02em;line-height:1.2}
.hy-bloque h3{margin:0 0 6px;font-size:15.5px;letter-spacing:-.01em}
.hy-bloque .hy-sub{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.hy-bh{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hy-kick{margin:0 0 6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hy-violeta);display:flex;align-items:center;gap:7px}
.hy-kick svg{width:14px;height:14px}
.hy-p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.hy-p.peq{font-size:12px;color:var(--ink-3)}
.hy-sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.hy-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.hy-vacio{padding:18px 20px;border:1px dashed var(--line-2);border-radius:var(--hy-radio-s);font-size:13px;color:var(--ink-2);line-height:1.6;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.hy-vacio b{color:var(--ink)}
.hy-toggle{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.hy-toggle button{font:inherit;font-size:12.5px;font-weight:500;padding:6px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer}
.hy-toggle button[aria-pressed="true"]{background:var(--bg-2);color:var(--ink);box-shadow:0 1px 3px rgba(15,21,24,.12)}
.hy-leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:0 0 14px}
.hy-leyenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.hy-leyenda .s1 i{background:var(--s1)} .hy-leyenda .s2 i{background:var(--s2)}

/* barras por proceso */
.hy-barras{display:flex;flex-direction:column;gap:6px}
.hy-fila{display:grid;grid-template-columns:34px 112px 1fr 76px;align-items:center;gap:12px;padding:8px 8px;border-radius:12px;border:1px solid transparent;cursor:pointer;background:transparent;font:inherit;color:inherit;text-align:left;width:100%}
.hy-fila:hover,.hy-fila:focus-visible{background:var(--bg);border-color:var(--line)}
.hy-fila[aria-pressed="true"]{border-color:var(--hy-azul);background:var(--hy-azul-bg)}
.hy-fila .c{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 0;text-align:center}
.hy-fila .n{font-size:13.5px;font-weight:500}
.hy-fila .pistas{display:flex;flex-direction:column;gap:4px}
.hy-fila .pista{height:7px;border-radius:100px;background:rgba(15,21,24,.08);overflow:hidden;position:relative}
.hy-fila .pista i{position:absolute;left:0;top:0;bottom:0;border-radius:100px;transition:width .6s var(--ease)}
.hy-fila .pista.m i{background:var(--s1)} .hy-fila .pista.r i{background:var(--s2)}
.hy-fila .pista.vacia{background:repeating-linear-gradient(90deg,rgba(15,21,24,.07) 0 6px,transparent 6px 10px)}
.hy-fila .vals{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums;font-size:12.5px}
.hy-fila .vals .m{color:var(--ink);font-weight:600} .hy-fila .vals .r{color:var(--ink-2)}
.hy-eje{display:flex;justify-content:space-between;margin:8px 0 0 158px;font-size:10.5px;color:var(--ink-3)}
.hy-pie{margin-top:12px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
@media (prefers-reduced-motion:reduce){.hy .pista i,.hy-tarj,.hy-btn,.hy-cajon{transition:none!important}}

/* matriz */
.hy-matriz-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
.hy-matriz{border-collapse:separate;border-spacing:0;font-size:12px;min-width:640px;width:100%}
.hy-matriz th{position:sticky;top:0;background:var(--bg-2);z-index:2;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:9px 8px;border-bottom:1px solid var(--line);text-align:center}
.hy-matriz th:first-child,.hy-matriz td:first-child{position:sticky;left:0;background:var(--bg-2);z-index:3;text-align:left;min-width:180px;border-right:1px solid var(--line)}
.hy-matriz td{padding:0;border-bottom:1px solid var(--line)}
.hy-matriz td:first-child{padding:7px 10px;font-weight:500;font-size:12.5px}
.hy-matriz td:first-child small{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400}
.hy-celda{display:block;width:100%;padding:9px 6px;border:0;font:inherit;font-variant-numeric:tabular-nums;font-size:12px;cursor:pointer;text-align:center;color:var(--ink);border-radius:0}
.hy-celda:hover,.hy-celda:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;position:relative;z-index:1}
.hy-celda.na{color:var(--ink-3);background:transparent;cursor:default}
.hy-matriz-leg{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
.hy-matriz-leg .escala{display:inline-flex;height:10px;width:120px;border-radius:100px;background:linear-gradient(90deg,#EDF3FF,#245DDE)}

/* atención */
.hy-aten{display:flex;flex-direction:column;gap:8px}
.hy-aten-i{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.hy-aten-i:hover,.hy-aten-i:focus-visible{border-color:var(--ink)}
.hy-aten-i .n{font-family:var(--disp);font-size:22px;font-weight:600;min-width:34px;text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.hy-aten-i.critico .n{color:var(--hy-rojo)} .hy-aten-i.revision .n{color:var(--hy-ambar)} .hy-aten-i.neutral .n{color:var(--hy-gris)}
.hy-aten-i.cero .n{color:var(--ink-3)}
.hy-aten-i .t{font-size:13px;font-weight:500} .hy-aten-i .e{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.hy-aten-i .ir{color:var(--ink-3)} .hy-aten-i .ir svg{width:14px;height:14px}

/* flujo de mejoras */
.hy-flujo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hy-flujo button{font:inherit;padding:12px 8px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;color:inherit;min-width:0}
.hy-flujo button:hover{border-color:var(--ink)}
.hy-flujo .v{font-family:var(--disp);font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.hy-flujo .l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.3;white-space:normal}
.hy-flujo button.cerrado .v{color:var(--hy-ok)} .hy-flujo button.evidencia .v{color:var(--hy-ambar)}
.hy-venc{margin-top:10px;font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center}

/* tablas genéricas */
.hy-tabla-wrap{overflow-x:auto}
.hy-tabla{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.hy-tabla th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.hy-tabla td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.hy-tabla tr:hover td{background:rgba(15,21,24,.025)}
.hy-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hy-tabla .mini{display:block;height:4px;width:60px;border-radius:100px;background:rgba(15,21,24,.08);margin-top:4px;margin-left:auto;overflow:hidden}
.hy-tabla .mini i{display:block;height:100%;background:var(--hy-azul)} .hy-tabla .mini.r i{background:var(--hy-verde)}
.hy-tabla a{color:var(--hy-azul);font-weight:500} .hy-tabla a:hover{text-decoration:underline}
.hy-tabla .cod{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.hy-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--bg);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-2);margin-right:10px;vertical-align:middle;flex:none}

/* herramientas */
.hy-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hy-tool{display:flex;flex-direction:column;gap:8px;padding:20px 20px 16px;border-radius:var(--hy-radio);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--hy-sombra);color:inherit;position:relative;transition:transform var(--hy-t) var(--ease),border-color var(--hy-t) var(--ease)}
.hy-tool:hover{transform:translateY(-2px);border-color:var(--line-2)}
.hy-tool .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.hy-tool .ic svg{width:18px;height:18px}
.hy-tool .ic.azul{background:var(--hy-azul-bg);color:var(--hy-azul)} .hy-tool .ic.verde{background:var(--hy-verde-bg);color:var(--hy-verde)}
.hy-tool .ic.violeta{background:var(--hy-violeta-bg);color:var(--hy-violeta)} .hy-tool .ic.ambar{background:var(--hy-ambar-bg);color:var(--hy-ambar)}
.hy-tool h3{margin:0;font-size:15.5px;letter-spacing:-.01em}
.hy-tool p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.hy-tool .ruta{margin-top:auto;padding-top:8px;font-size:11px;color:var(--ink-3)}
.hy-tool .ir{position:absolute;top:16px;right:16px;color:var(--ink-3)} .hy-tool .ir svg{width:14px;height:14px}

/* pestañas internas */
.hy-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 18px;overflow-x:auto;scrollbar-width:none}
.hy-tabs button{font:inherit;font-size:13.5px;font-weight:500;padding:10px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.hy-tabs button[aria-selected="true"]{color:var(--hy-azul);border-bottom-color:var(--hy-azul)}
.hy-tabs button:hover{color:var(--ink)}

/* cajones laterales (detalle, ayuda, resolver) */
.hy-fondo{position:fixed;inset:0;background:rgba(15,21,24,.42);z-index:120;opacity:0;transition:opacity var(--hy-t) var(--ease);backdrop-filter:blur(2px)}
.hy-fondo.abierto{opacity:1}
.hy-cajon{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg-2);z-index:121;box-shadow:-20px 0 60px rgba(15,21,24,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--hy-t) var(--ease)}
.hy-cajon.abierto{transform:none}
.hy-cajon-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.hy-cajon-h .k{margin:0 0 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hy-cajon-h h2{margin:0;font-size:20px;letter-spacing:-.02em;line-height:1.2}
.hy-cajon-b{padding:18px 22px 40px;overflow:auto;flex:1;font-size:13.5px;line-height:1.6}
.hy-cajon-b h3{margin:18px 0 6px;font-size:14px}
.hy-cajon-b h3:first-child{margin-top:0}
.hy-cajon-b p{margin:0 0 10px;color:var(--ink-2)}
.hy-cajon-b .dato{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:12.5px;margin:8px 0}
/* La misma ficha fuera del cajón (Contrato, en Configuración): sin esto el dt y el dd
   caían uno debajo del otro y la pantalla parecía un borrador. */
.hy .hy-bloque dl.dato{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:8px 14px;font-size:13px;margin:12px 0;align-items:center}
.hy .hy-bloque dl.dato dt{color:var(--ink-3)} .hy .hy-bloque dl.dato dd{margin:0;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hy-cajon-b .dato dt{color:var(--ink-3)} .hy-cajon-b .dato dd{margin:0;color:var(--ink)}
.hy-cierra{font:inherit;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-size:18px;line-height:1;color:var(--ink-2);flex:none}
.hy-cierra:hover{border-color:var(--ink);color:var(--ink)}
.hy-cajon-f{padding:12px 22px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;background:var(--bg-3)}
.hy-cajon .hy-tabs{padding:0 22px;margin:0}
.hy-cajon .hy-tabs button{padding:12px 12px}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-cajon{width:100%}}

/* buscador */
.hy-buscar{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;background:rgba(15,21,24,.42)}
.hy-buscar .caja{width:100%;max-width:640px;background:var(--bg-2);border-radius:18px;box-shadow:0 30px 80px rgba(15,21,24,.3);overflow:hidden}
.hy-buscar input{width:100%;font:inherit;font-size:16px;padding:16px 18px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
.hy-buscar input:focus{outline:none}
.hy-buscar .res{max-height:60vh;overflow:auto;padding:8px}
.hy-buscar .g{padding:10px 10px 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hy-buscar .it{display:block;width:100%;text-align:left;font:inherit;padding:9px 10px;border:0;background:transparent;border-radius:9px;cursor:pointer;color:inherit}
.hy-buscar .it:hover,.hy-buscar .it:focus-visible{background:var(--bg)}
.hy-buscar .it b{display:block;font-size:13.5px;font-weight:500} .hy-buscar .it small{color:var(--ink-3);font-size:12px}
.hy-buscar .vacio{padding:24px;text-align:center;font-size:13px;color:var(--ink-3)}
.hy-kbd{font:500 10.5px var(--mono);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-3);background:var(--bg)}

/* formularios */
.hy-form{display:flex;flex-direction:column;gap:12px}
.hy-form label,.hy-lab{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hy-form input,.hy-form select,.hy-form textarea,.hy-in{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);text-transform:none;letter-spacing:0;width:100%;min-height:42px}
.hy-form textarea{resize:vertical;min-height:80px}
.hy-form input:focus,.hy-form select:focus,.hy-form textarea:focus{outline:none;border-color:var(--ink);background:var(--bg-2)}
.hy-form .fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hy-form .ayuda{font-size:12px;color:var(--ink-3);text-transform:none;letter-spacing:0;line-height:1.45}
.hy-form .err{font-size:12px;color:var(--hy-rojo);text-transform:none;letter-spacing:0}
.hy-form input[aria-invalid="true"],.hy-form textarea[aria-invalid="true"],.hy-form select[aria-invalid="true"]{border-color:var(--hy-rojo)}
.hy-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink-2);flex-direction:row!important}
.hy-check input{width:18px;height:18px;min-height:0;margin-top:2px;padding:0}
.hy-pasos{display:flex;gap:6px;margin-bottom:14px}
.hy-pasos span{flex:1;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:500;text-align:center;border:1px solid var(--line);color:var(--ink-3);background:var(--bg)}
.hy-pasos span[aria-current="step"]{border-color:var(--hy-azul);color:var(--hy-azul);background:var(--hy-azul-bg)}
.hy-pasos span.hecho{color:var(--hy-ok);border-color:rgba(22,117,80,.3)}
.hy-estado-guardado{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.hy-estado-guardado.ok{color:var(--hy-ok)} .hy-estado-guardado.err{color:var(--hy-rojo)} .hy-estado-guardado.pend{color:var(--hy-ambar)}
.hy-aviso{padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55}
.hy-aviso.ambar{background:var(--hy-ambar-bg);color:#5A3D00;border:1px solid rgba(150,96,0,.2)}
.hy-aviso.rojo{background:var(--hy-rojo-bg);color:var(--hy-rojo);border:1px solid rgba(182,54,75,.2)}
.hy-aviso.azul{background:var(--hy-azul-bg);color:#1B3E8F;border:1px solid rgba(36,93,222,.18)}
.hy-aviso.verde{background:var(--hy-ok-bg);color:var(--hy-ok);border:1px solid rgba(22,117,80,.2)}
.hy-aviso.gris{background:var(--hy-gris-bg);color:var(--ink-2);border:1px solid var(--line)}

/* tarjetas de acción / kanban */
.hy-kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.hy-col{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:120px}
.hy-col h4{margin:2px 6px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between}
.hy-acc{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:8px;cursor:pointer;transition:border-color var(--hy-t) var(--ease)}
.hy-acc:hover,.hy-acc:focus-visible{border-color:var(--ink)}
.hy-acc .h{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px;font-size:10.5px;color:var(--ink-3)}
.hy-acc .h .cod{font-family:var(--mono)}
.hy-acc .t{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hy-acc .f{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.hy-acc .f .venc{color:var(--hy-rojo);font-weight:600} .hy-acc .f .pv{color:var(--hy-ambar);font-weight:600}
.hy-acc .f .rev{color:var(--hy-ambar);font-weight:500}
.hy-pri{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:100px}
.hy-pri.alta{background:var(--hy-rojo-bg);color:var(--hy-rojo)} .hy-pri.media{background:var(--hy-ambar-bg);color:var(--hy-ambar)} .hy-pri.baja{background:var(--hy-gris-bg);color:var(--hy-gris)}

/* evidencias */
.hy-evid{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);margin-bottom:8px}
.hy-evid img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.hy-evid .doc{width:64px;height:64px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);background:var(--bg)}
.hy-evid .i{font-size:12.5px;line-height:1.45;min-width:0} .hy-evid .i b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-evid .i small{color:var(--ink-3)}
/* La miniatura de 64 px se amplía al tocarla (visor) y el recuadro de PDF/video/HEIC descarga el archivo. */
.hy-evid img.clic,.hy-evid .doc.clic{cursor:zoom-in;transition:border-color var(--hy-t) var(--ease),transform var(--hy-t) var(--ease)}
.hy-evid .doc.clic{cursor:pointer;text-align:center;padding:4px;line-height:1.3;text-decoration:none}
.hy-evid img.clic:hover,.hy-evid img.clic:focus-visible,.hy-evid .doc.clic:hover,.hy-evid .doc.clic:focus-visible{border-color:var(--ink);transform:scale(1.04)}
/* Celular: la etiqueta de estado (y el botón «Abrir acción» de la bandeja) baja a su propia fila. Con «nowrap»
   se comía la columna y el nombre del archivo quedaba casi una palabra por línea (captura a 390 px, 27-9-2026). */
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-evid{grid-template-columns:64px minmax(0,1fr)}:where(body:not(.hy-tv-escala)) .hy-evid>:nth-child(n+3){grid-column:1/-1;justify-self:start}}
.hy-visor{position:fixed;inset:0;z-index:1200;background:rgba(10,12,18,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 16px}
.hy-visor-h{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;font-size:13px}
.hy-visor-h span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-visor-h .hy-btn{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.hy-visor-h .hy-cierra{font:inherit;font-size:26px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer;padding:2px 8px}
.hy-visor img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:zoom-out}

/* checklist de auditoría */
.hy-ck{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:8px}
.hy-ck.hecho{border-color:rgba(22,117,80,.35)} .hy-ck.falta{border-color:rgba(150,96,0,.4);background:linear-gradient(180deg,var(--hy-ambar-bg),#fff)}
.hy-ck .h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:11px;color:var(--ink-3)}
.hy-ck .h .cod{font-family:var(--mono);color:var(--ink)}
.hy-ck .q{margin:0 0 4px;font-size:14px;font-weight:500;line-height:1.45}
.hy-ck .q.largo{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .hy-ck .q.largo.abierto{-webkit-line-clamp:unset;display:block}
.hy-ck .n{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
.hy-ck .ant{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.hy-ck .a{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.hy-nb{font:inherit;font-size:12.5px;padding:8px 14px;border-radius:100px;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);min-height:38px}
.hy-nb:hover{border-color:var(--ink);color:var(--ink)}
.hy-nb.on{background:var(--ink);border-color:var(--ink);color:#fff}
.hy-nb.on.no{background:var(--hy-rojo);border-color:var(--hy-rojo)} .hy-nb.on.parcial{background:var(--hy-ambar);border-color:var(--hy-ambar)} .hy-nb.on.si{background:var(--hy-ok);border-color:var(--hy-ok)}
.hy-ck .obs{flex:1;min-width:220px;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);min-height:38px}
.hy-ck .extra{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:12px;color:var(--ink-3)}
.hy-runbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;margin:0 0 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);box-shadow:0 6px 20px rgba(15,21,24,.08)}
.hy-runbar .prog{display:flex;align-items:center;gap:10px;min-width:200px;font-size:12.5px;color:var(--ink-2)}
.hy-runbar .prog .bar{flex:1;height:6px;margin:0}

/* toast */
.hy-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font-size:13px;z-index:200;transition:all var(--hy-t) var(--ease);max-width:min(560px,92vw);box-shadow:0 12px 30px rgba(15,21,24,.3)}
.hy-toast.ver{opacity:1;transform:translateX(-50%)}
.hy-toast.err{background:var(--hy-rojo)} .hy-toast.ok{background:var(--hy-ok)}

/* guía */
.hy-guia{position:fixed;z-index:140;max-width:340px;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 20px 50px rgba(15,21,24,.25);font-size:13.5px;line-height:1.55}
.hy-guia .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hy-violeta);margin-bottom:6px}
.hy-guia h3{margin:0 0 6px;font-size:16px}
.hy-guia p{margin:0 0 12px;color:var(--ink-2)}
.hy-guia .f{display:flex;gap:8px;justify-content:space-between;align-items:center}
.hy-guia-destino{position:relative;z-index:139;outline:3px solid var(--hy-violeta);outline-offset:6px;border-radius:var(--hy-radio)}

/* pie del espacio */
.hy-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.hy-foot a{color:var(--hy-azul)} .hy-foot a:hover{text-decoration:underline}

/* semáforo de respuestas (donut) */
.hy-donut{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.hy-donut svg{width:150px;height:150px}
.hy-donut .leg{display:flex;flex-direction:column;gap:8px;font-size:13px}
.hy-donut .leg span{display:flex;justify-content:space-between;gap:10px}
.hy-donut .leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.hy-donut .leg b{font-variant-numeric:tabular-nums}

/* ── responsivo ─────────────────────────────────────────── */
@media (max-width:1100px){:where(body:not(.hy-tv-escala)) .hy-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))} :where(body:not(.hy-tv-escala)) .hy-tools{grid-template-columns:repeat(2,minmax(0,1fr))} :where(body:not(.hy-tv-escala)) .hy-flujo{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){:where(body:not(.hy-tv-escala)) .hy-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  :where(body:not(.hy-tv-escala)) .hy-tarjetas{grid-template-columns:1fr 1fr;gap:10px} :where(body:not(.hy-tv-escala)) .hy-tarj{min-height:128px;padding:14px 14px} :where(body:not(.hy-tv-escala)) .hy-tarj .v{font-size:30px}
  :where(body:not(.hy-tv-escala)) .hy-tools{grid-template-columns:1fr 1fr;gap:10px} :where(body:not(.hy-tv-escala)) .hy-tool{padding:14px}
  :where(body:not(.hy-tv-escala)) .hy-flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(body:not(.hy-tv-escala)) .hy-fila{grid-template-columns:28px 78px 1fr 64px;gap:8px} :where(body:not(.hy-tv-escala)) .hy-fila .n{font-size:12px} :where(body:not(.hy-tv-escala)) .hy-eje{margin-left:122px}
  :where(body:not(.hy-tv-escala)) .hy-bloque{padding:16px 16px;border-radius:16px}
  :where(body:not(.hy-tv-escala)) .hy-head h1{font-size:30px} :where(body:not(.hy-tv-escala)) .hy-head h1 span{display:block;margin:6px 0 0;font-size:18px}
  :where(body:not(.hy-tv-escala)) .hy-ctx .hy-campo{width:100%;justify-content:space-between} :where(body:not(.hy-tv-escala)) .hy-campo select{max-width:60vw}
  :where(body:not(.hy-tv-escala)) .hy-ctx .hy-reset{margin-left:0}
  :where(body:not(.hy-tv-escala)) .hy-form .fila{grid-template-columns:1fr}
  :where(body:not(.hy-tv-escala)) .hy-btn{min-height:44px}
  :where(body:not(.hy-tv-escala)) .hy-nav a{padding:10px 12px;font-size:13px}
  :where(body:not(.hy-tv-escala)) .hy-donut{grid-template-columns:1fr;justify-items:center}
}
@media print{.hy-nav,.hy-ctx,.hy-tools,.hy-cajon,.hy-fondo,.hy-toast,.hy-rail-b,.hy-rail-f,.topbar,.footer,.bg{display:none!important} body.hy-app{padding-left:0!important} .hy-bloque{box-shadow:none;break-inside:avoid}}

/* El interior Hyundai arranca más arriba que las páginas de portada; la cabecera global no cambia. */
.page.hy{padding-block:26px 56px}
/* Iconos en títulos y textos: nunca crecen al ancho del bloque. */
.hy h2 svg,.hy h3 svg,.hy-kick svg,.hy-venc svg,.hy-pie svg{width:18px;height:18px;vertical-align:-3px;flex:none}


/* ===================== Dealer Operation Overview (etapa 03-A) ===================== */
.hy-hero{display:grid;grid-template-columns:minmax(260px,1.1fr) 2fr;gap:22px;align-items:end;padding:26px 28px;margin:0 0 18px;border-radius:var(--hy-radio);
  background:linear-gradient(135deg,#0F1518 0%,#1B2A38 60%,#245DDE 140%);color:#fff;box-shadow:var(--hy-sombra)}
.hy-hero .hy-kick{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hy-hero h2{margin:0;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.hy-hero .hy-p{color:rgba(255,255,255,.72);margin:10px 0 0;font-size:13.5px;max-width:48ch}
.hy-hero-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hy-cifra{font:inherit;text-align:left;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;
  transition:background var(--hy-t) var(--ease),transform var(--hy-t) var(--ease)}
.hy-cifra:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.hy-cifra .l{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hy-cifra .v{font-family:'Archivo',sans-serif;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em}
.hy-cifra .v small{font-size:.42em;font-weight:500;margin-left:3px;color:rgba(255,255,255,.7)}
.hy-cifra .r{font-size:12px;color:rgba(255,255,255,.66);min-height:2.6em}
.hy-cifra .bar{display:block;height:6px;border-radius:100px;background:rgba(255,255,255,.14);overflow:hidden}
.hy-cifra .bar i{display:block;height:100%;border-radius:100px;background:#fff}
.hy-cifra.ok .bar i{background:#2CC36B} .hy-cifra.ambar .bar i{background:#FFC14A} .hy-cifra.rojo .bar i{background:#FF5A5F}
.hy-cifra.rojo .v{color:#FFB3B6}

.hy-ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:16px}
.hy-etq[hidden]{display:none}
.hy-panel{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--hy-radio);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--hy-sombra);padding:20px 22px}
.hy-panel-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.hy-panel-h h2{margin:0;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.hy-panel-h h2 svg{width:18px;height:18px}
.hy-panel-h .hy-sub{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.hy-panel-b{display:flex;gap:8px;align-items:center;flex:none}
.hy-panel-c{flex:1;min-width:0;display:flex;flex-direction:column}
.hy-panel-c>.hy-bloques,.hy-panel-c>.hy-aten{flex:1}

/* carrusel: un panel a la vez, deslizable, con flechas y puntos */
.hy-carrusel{position:relative;min-width:0;display:flex;flex-direction:column}
.hy-pista{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hy-pista::-webkit-scrollbar{display:none}
.hy-pista>.hy-panel{flex:0 0 100%;scroll-snap-align:start;min-height:420px}
.hy-car-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.hy-puntos{display:flex;gap:7px}
.hy-puntos button{width:9px;height:9px;padding:0;border-radius:100px;border:0;background:var(--line-2);cursor:pointer;transition:background var(--hy-t) var(--ease),transform var(--hy-t) var(--ease)}
.hy-puntos button[aria-current="true"]{background:var(--ink);transform:scale(1.25)}

/* bloques por proceso */
.hy-bloques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.hy-bloq{font:inherit;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;min-width:0;
  border-left-width:5px;transition:transform var(--hy-t) var(--ease),border-color var(--hy-t) var(--ease)}
.hy-bloq:hover{transform:translateY(-2px);border-color:var(--ink)}
.hy-bloq .num{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hy-bloq .nom{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hy-bloq .v{font-family:'Archivo',sans-serif;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-top:4px;white-space:nowrap}
.hy-bloq .v small{font-size:13px;font-weight:500;color:var(--ink-3)}
.hy-bloq .bar{display:block;height:5px;border-radius:100px;background:var(--hy-gris-bg);overflow:hidden;margin-top:6px}
.hy-bloq .bar i{display:block;height:100%;border-radius:100px;background:var(--ink)}
.hy-bloq .obj{font-size:11px;color:var(--ink-3);margin-top:4px}
.hy-bloq.ok{border-left-color:var(--hy-ok)} .hy-bloq.ok .bar i{background:var(--hy-ok)} .hy-bloq.ok .v{color:var(--hy-ok)}
.hy-bloq.ambar{border-left-color:#E8A317} .hy-bloq.ambar .bar i{background:#E8A317} .hy-bloq.ambar .v{color:var(--hy-ambar)}
.hy-bloq.rojo{border-left-color:var(--hy-rojo)} .hy-bloq.rojo .bar i{background:var(--hy-rojo)} .hy-bloq.rojo .v{color:var(--hy-rojo)}
.hy-bloq.sin{border-left-color:var(--line-2);opacity:.75}
.hy-sig h3{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}

/* mapa dentro del overview: fondo oscuro del mapa sobre tarjeta clara */
.hy-mapa .mapcard{background:#0F1518;border-radius:14px;padding:10px;overflow:hidden}
.hy-mapa .peru{max-height:56vh}
/* Dos mapas en el mismo espacio (Manu, 18-9-2026): el Perú a la izquierda y Lima
   Metropolitana ampliada al costado, con sus ocho sedes numeradas. */
.hy-mapas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;align-items:stretch}
.hy-mapa .lima-card{display:flex;flex-direction:column}
.hy-mapa .lima{display:block;width:100%;height:auto;max-height:44vh;flex:1}
.hy-mapa .lima .ld{fill:#1C2A35;stroke:#2E3F4D;stroke-width:.8;transition:fill var(--hy-t) var(--ease)}
.hy-mapa .lima .ld.vacio{fill:#172230;stroke:#26363F}
.hy-mapa .lima .ld.con-alto{fill:color-mix(in srgb,var(--dv-pos) 42%,#15212A)}
.hy-mapa .lima .ld.con-bajo{fill:color-mix(in srgb,var(--dv-neg) 42%,#15212A)}
.hy-mapa .lima .ld.con-sin{fill:#1C2A35;stroke:#3B4C58;stroke-dasharray:3 2}
.hy-mapa .lima .bus,.hy-mapa .lima .lgd{display:none}
.hy-mapa-tit{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8D9BC4}
.hy .lima .pin{cursor:pointer}
.hy .lima .pin .dot{stroke:#fff;stroke-width:1.6;fill:#3B4C58}
.hy .lima .pin.alto .dot{fill:var(--dv-pos)} .hy .lima .pin.medio .dot{fill:var(--dv-mid)} .hy .lima .pin.critico .dot{fill:var(--dv-neg)} .hy .lima .pin.sin .dot{fill:#3B4C58}
.hy .lima .pin:hover .dot,.hy .lima .pin:focus-visible .dot{stroke-width:2.6}
.hy .lima .pin .num{fill:#fff;font-size:9.5px;font-weight:700;text-anchor:middle;pointer-events:none;font-family:var(--font)}
.hy-lima-leyenda{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11px;color:#AFC4D4}
.hy-lima-leyenda li{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0}
.hy-lima-leyenda li b{flex:none;width:16px;height:16px;border-radius:50%;background:#3B4C58;color:#fff;font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.hy-lima-leyenda li.alto b{background:var(--dv-pos)} .hy-lima-leyenda li.medio b{background:var(--dv-mid)} .hy-lima-leyenda li.critico b{background:var(--dv-neg)}
.hy-lima-leyenda li .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hy-lima-leyenda li .v{flex:none;font-variant-numeric:tabular-nums;color:#fff}
.hy-lima-leyenda li:hover .n{color:#fff}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-mapas{grid-template-columns:1fr}:where(body:not(.hy-tv-escala)) .hy-mapa .lima{max-height:40vh}}
.hy-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 10px}
.hy-filtros input,.hy-filtros select{font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--ink);min-height:36px}
.hy-filtros input{flex:1;min-width:180px}
.hy-sedes{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;padding-right:4px}
.hy-sede{display:grid;grid-template-columns:12px minmax(0,1fr) 64px 64px auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;
  transition:border-color var(--hy-t) var(--ease),transform var(--hy-t) var(--ease)}
.hy-sede:hover{border-color:var(--ink);transform:translateX(2px)}
.hy-sede .dot{width:10px;height:10px;border-radius:100px;background:var(--line-2)}
.hy-sede.alto .dot{background:#2CC36B} .hy-sede.medio .dot{background:#E8A317} .hy-sede.critico .dot{background:#FF5A5F;box-shadow:0 0 0 4px rgba(255,90,95,.18)}
.hy-sede .n{min-width:0;display:flex;flex-direction:column} .hy-sede .n b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hy-sede .n small{font-size:11.5px;color:var(--ink-3)}
.hy-sede .v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1} .hy-sede .v b{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600} .hy-sede .v small{font-size:10.5px;color:var(--ink-3)}
.hy-sede .e{font-size:11px;color:var(--ink-3);white-space:nowrap}

/* pantalla completa: el panel llena la pantalla (para una tele) */
.hy-panel:fullscreen,.hy-panel.hy-max{position:fixed;inset:0;z-index:60;border-radius:0;padding:5vh 6vw;overflow:auto;background:var(--bg-2)}
.hy-panel:fullscreen .hy-panel-h h2,.hy-panel.hy-max .hy-panel-h h2{font-size:34px}
.hy-panel:fullscreen .hy-bloq .v,.hy-panel.hy-max .hy-bloq .v{font-size:56px}
.hy-panel:fullscreen .hy-bloq .nom,.hy-panel.hy-max .hy-bloq .nom{font-size:18px}
.hy-panel:fullscreen .hy-bloques,.hy-panel.hy-max .hy-bloques{gap:18px}
.hy-panel:fullscreen .hy-mapa .peru,.hy-panel.hy-max .hy-mapa .peru{max-height:70vh}
.hy-panel:fullscreen .hy-sedes,.hy-panel.hy-max .hy-sedes{max-height:none}
.hy-panel:fullscreen .hy-aten-i,.hy-panel.hy-max .hy-aten-i{font-size:1.15em}
@media (max-width:1100px){:where(body:not(.hy-tv-escala)) .hy-hero{grid-template-columns:1fr}:where(body:not(.hy-tv-escala)) .hy-hero-n{grid-template-columns:repeat(2,minmax(0,1fr))}:where(body:not(.hy-tv-escala)) .hy-ov{grid-template-columns:1fr}:where(body:not(.hy-tv-escala)) .hy-pista>.hy-panel{min-height:0}}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-hero{padding:20px}:where(body:not(.hy-tv-escala)) .hy-hero h2{font-size:24px}:where(body:not(.hy-tv-escala)) .hy-cifra .v{font-size:34px}:where(body:not(.hy-tv-escala)) .hy-sede{grid-template-columns:12px minmax(0,1fr) 56px 56px}:where(body:not(.hy-tv-escala)) .hy-sede .e{display:none}}


/* ===================== Cuestionario de auditoría (etapa 03-B) ===================== */
.ck-sec{margin:22px 0 0}
.ck-proc{position:sticky;top:86px;z-index:5;display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:16px;letter-spacing:-.01em}
.ck-proc .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;opacity:.7}
.ck-proc small{margin-left:auto;font-size:12px;font-weight:500;opacity:.75}
.ck-score{font-size:12px;color:var(--ink-3);white-space:nowrap} .ck-score b{color:var(--ink)}
.hy-ck{border-left:5px solid var(--line)}
.hy-ck.si{border-left-color:var(--hy-ok);background:linear-gradient(90deg,var(--hy-ok-bg),#fff 32%)}
.hy-ck.parcial{border-left-color:#E8A317;background:linear-gradient(90deg,var(--hy-ambar-bg),#fff 32%)}
.hy-ck.no{border-left-color:var(--hy-rojo);background:linear-gradient(90deg,var(--hy-rojo-bg),#fff 32%)}
.hy-ck .h .num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:100px;background:var(--hy-gris-bg);color:var(--ink);font-weight:600;font-size:12px}
.hy-ck .h .tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px}
.hy-ck .h .tag.man{background:var(--hy-azul-bg);color:var(--hy-azul)} .hy-ck .h .tag.rec{background:var(--hy-gris-bg);color:var(--hy-gris)}
.hy-ck .h .resp{color:var(--ink-2)} .hy-ck .h .obj{color:var(--ink-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.hy-ck .q{font-size:15px}
.ck-det{margin:6px 0 4px;font-size:12.5px;color:var(--ink-2)} .ck-det summary{cursor:pointer;color:var(--ink-3);font-size:12px} .ck-det ul{margin:6px 0 0;padding-left:18px;line-height:1.55}
/* Manu (18-9-2026): la pregunta se lee en tres pasos rotulados y las alternativas
   van en lista vertical con casilla, una por línea. Acotado a .ck-alt: los filtros
   de la lista de auditorías también usan .ck-chip y siguen siendo píldoras. */
.ck-paso{display:flex;align-items:center;flex-basis:100%;width:100%;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px;font-weight:600}
.ck-paso b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:100px;background:var(--ink);color:#fff;font-size:10.5px;margin-right:7px;letter-spacing:0}
.hy-ck .q{margin:0 0 8px}
.ck-alt{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ck-alt .ck-paso{margin-bottom:0}
.ck-alt .grupo{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.ck-alt .grupo+.grupo{margin-top:2px}
.ck-alt .tit{display:block;margin:2px 0 0}
.ck-alt .ck-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border-radius:10px;padding:8px 12px;line-height:1.35}
.ck-alt .ck-chip::before{content:'';flex:none;width:16px;height:16px;border:1.5px solid var(--ink-3);border-radius:4px;background:var(--bg-2)}
.ck-alt .ck-chip.on::before{content:'✓';background:var(--hy-azul);border-color:var(--hy-azul);color:#fff;font-size:11px;line-height:14px;text-align:center}
.hy-ck .a{margin-top:12px}
.ck-alt .tit{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ck-chip{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:100px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);cursor:pointer;min-height:32px}
.ck-chip:hover{border-color:var(--ink);color:var(--ink)} .ck-chip.on{background:var(--hy-azul-bg);border-color:var(--hy-azul);color:var(--hy-azul);font-weight:600}
.ck-chip[disabled]{cursor:default;opacity:.7}
.ck-barra{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:10px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,21,24,.14)}
.ck-barra .ck-actual{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--ink-2)}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .ck-proc{top:70px;font-size:14px}:where(body:not(.hy-tv-escala)) .ck-barra .hy-btn{padding:8px 10px;font-size:12px}}

.ck-porque summary{color:var(--hy-azul)}
.ck-p{margin:6px 0 0;font-size:12px;color:var(--ink-3)}

/* ═══════════════ gráficos · chrome compartido ═══════════════
   Todo gráfico se dibuja a mano en SVG o CSS: la CSP solo permite scripts
   propios, así que no hay librería de gráficos posible ni deseable.
   Reglas que se respetan en todos: marcas finas (barras ≤24 px, trazo 2 px,
   marcadores ≥8 px), rejilla de un solo píxel y sólida, hueco de 2 px en el
   color de fondo para separar marcas en vez de un borde, leyenda siempre que
   haya dos series, y un gemelo en tabla para que ningún valor dependa del
   puntero ni del color.                                                     */
.hy-gr{display:flex;flex-direction:column;gap:10px}
.hy-gr-svg{position:relative}
.hy-gr svg{display:block;width:100%;height:auto;font-family:var(--font)}
.hy-gr svg:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.hy-gr .rej line{stroke:var(--gr-rej);stroke-width:1}
.hy-gr .base{stroke:var(--gr-eje);stroke-width:1}
.hy-gr .tx{fill:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.hy-gr .tx.fin{text-anchor:end} .hy-gr .tx.med{text-anchor:middle}
.hy-gr .etq{fill:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

/* leyenda · la identidad nunca depende solo del color del trazo */
.hy-leyenda{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-2)}
.hy-leyenda span{display:inline-flex;align-items:center;gap:7px}
.hy-leyenda i{width:16px;height:2px;border-radius:2px;flex:none;background:var(--ink-3)}
.hy-leyenda i.caja{height:10px;width:10px;border-radius:3px}
.hy-leyenda .s1 i{background:var(--s1)} .hy-leyenda .s2 i{background:var(--s2)}

/* globo · el valor manda, el nombre de la serie acompaña */
.hy-tip{position:absolute;z-index:6;pointer-events:none;min-width:130px;max-width:230px;
  padding:9px 11px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(15,21,24,.14);font-size:12px;color:var(--ink-2);
  transform:translate(-50%,-100%);transition:opacity 120ms var(--ease)}
.hy-tip[hidden]{display:none}
.hy-tip .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.hy-tip .f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:3px}
.hy-tip .f i{display:inline-block;width:12px;height:2px;border-radius:2px;flex:none;margin-right:6px;vertical-align:middle}
.hy-tip .f b{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* gemelo en tabla · sin JavaScript, con teclado, y se imprime */
.hy-gr-t summary{font-size:12px;color:var(--hy-azul);cursor:pointer}
.hy-gr-t table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;font-variant-numeric:tabular-nums}
.hy-gr-t th,.hy-gr-t td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right}
.hy-gr-t th:first-child,.hy-gr-t td:first-child{text-align:left;font-variant-numeric:normal}
.hy-gr-t th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ── línea de tiempo ── */
.hy-lin .s1{stroke:var(--s1)} .hy-lin .s2{stroke:var(--s2)}
.hy-lin path.ser{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hy-lin .pt circle{stroke:var(--gr-sup);stroke-width:2}
.hy-lin .pt circle.s1{fill:var(--s1)} .hy-lin .pt circle.s2{fill:var(--s2)}
.hy-lin .cruz line{stroke:var(--ink-3);stroke-width:1}
.hy-lin .cruz circle{stroke:var(--gr-sup);stroke-width:2}
.hy-lin .cruz circle.s1{fill:var(--s1)} .hy-lin .cruz circle.s2{fill:var(--s2)}
.hy-lin .ref{stroke:var(--gr-eje);stroke-width:1}
.hy-lin .cap{cursor:crosshair}

/* ── minigráfico de tarjeta · es un glifo, no un gráfico ── */
.hy-chispa{display:block;width:96px;height:28px}
.hy-chispa path{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hy-chispa.s1 path,.hy-chispa.s1 circle{stroke:var(--s1)} .hy-chispa.s1 circle{fill:var(--s1)}
.hy-chispa.s2 path,.hy-chispa.s2 circle{stroke:var(--s2)} .hy-chispa.s2 circle{fill:var(--s2)}

/* ── ranking horizontal ── */
.hy-rank{display:flex;flex-direction:column;gap:2px}
.hy-rk{display:grid;grid-template-columns:22px minmax(0,1fr) 1.35fr 64px;align-items:center;gap:10px;
  width:100%;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.hy-rk:hover,.hy-rk:focus-visible{background:var(--bg);border-color:var(--line)}
.hy-rk[aria-pressed="true"]{border-color:var(--hy-azul);background:var(--hy-azul-bg)}
.hy-rk .p{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.hy-rk .n{font-size:13px;font-weight:500;overflow:hidden;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hy-rk .n small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400}
.hy-rk .pistas{display:flex;flex-direction:column;gap:2px}
.hy-rk .pista{position:relative;height:10px;border-radius:3px;background:rgba(15,21,24,.07);overflow:visible}
.hy-rk .pista i{position:absolute;left:0;top:0;bottom:0;border-radius:2px 3px 3px 2px;background:var(--s1)}
.hy-rk .pista.r i{background:var(--s2)}
/* Con var() adentro, un respaldo en la línea anterior no sirve: la declaración
   se da por válida y, si el navegador no conoce color-mix, queda transparente.
   Por eso la mezcla va dentro de @supports y fuera queda el color plano. */
.hy-rk .pista.div i{background:var(--dv-pos)}
.hy-rk .pista.div.bajo i{background:var(--dv-neg)}
@supports (background:color-mix(in srgb,red,blue)){
  .hy-rk .pista.div i{background:color-mix(in srgb,var(--dv-pos) calc(var(--d,0)*100%),var(--dv-mid))}
  .hy-rk .pista.div.bajo i{background:color-mix(in srgb,var(--dv-neg) calc(var(--d,0)*100%),var(--dv-mid))}}
.hy-rk .pista .ref{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ink-2);opacity:.55}
.hy-rk .v{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.hy-rk .v small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3)}
.hy-rk-eje{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);margin-top:6px}
.hy-rk-ref{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3);margin-top:4px}
.hy-rk-ref::before{content:"";width:1px;height:11px;background:var(--ink-2);opacity:.55}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-rk{grid-template-columns:20px minmax(0,1fr) 56px}:where(body:not(.hy-tv-escala)) .hy-rk .pistas{grid-column:1/-1}}

/* ── pendiente (promovida desde la ficha de sede) ── */
.hy-gr .slope .sl.sube line,.hy-gr .slope .sl.sube circle{stroke:var(--dv-pos)}
.hy-gr .slope .sl.sube circle{fill:var(--dv-pos)}
.hy-gr .slope .sl.baja line,.hy-gr .slope .sl.baja circle{stroke:var(--dv-neg)}
.hy-gr .slope .sl.baja circle{fill:var(--dv-neg)}
.hy-gr .slope .sl.igual line,.hy-gr .slope .sl.igual circle{stroke:var(--ink-3)}
.hy-gr .slope .sl.igual circle{fill:var(--ink-3)}
.hy-gr .slope .sl{cursor:pointer}
.hy-gr .slope .sl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hy-gr .slope:has(.sl:hover) .sl:not(:hover){opacity:.28}
.hy-gr .slope:has(.sl:focus-visible) .sl:not(:focus-visible){opacity:.28}

/* ── aviso de panel sin permiso ── */
.hy-panel.hy-vetado{opacity:.86}
.hy-vetado-m{margin:0;font-size:13px;color:var(--ink-3);line-height:1.6}

/* celda de matriz: la intensidad llega como variable y la mezcla la hace CSS */
.hy-celda.con{background:var(--hy-azul-bg)}
@supports (background:color-mix(in srgb,red,blue)){.hy-celda.con{background:color-mix(in srgb,var(--r4) calc(var(--i,0)*62% + 6%),transparent)}}

/* leyenda de la rampa de cinco pasos */
.hy-rampa{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hy-rampa i{width:26px;height:10px;border-radius:2px;flex:none}
.hy-rampa small{flex-basis:100%;font-size:11px;line-height:1.5;color:var(--ink-3)}

/* ═══════════════ tablero armable ═══════════════
   Rejilla de doce columnas: cada panel declara cuántas ocupa y el orden lo pone
   la preferencia del usuario. Por debajo de 820 px el mismo DOM se monta como
   carrusel, que ya lee el orden del propio DOM.                               */
.hy-rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:16px}
.hy-rejilla>.hy-panel{grid-column:span var(--w,6)}
.hy-rejilla>.hy-panel>.hy-panel-c{min-height:var(--h,0)}
.hy-panel[style*="--tope"]>.hy-panel-c{max-height:var(--tope);overflow-y:auto;padding-right:4px}
.hy-panel:fullscreen[style*="--tope"]>.hy-panel-c,.hy-panel.hy-max[style*="--tope"]>.hy-panel-c{max-height:none}
.hy-rejilla>.hy-panel.desnudo,.hy-pista>.hy-panel.desnudo{background:transparent;border:0;box-shadow:none;padding:0}
.hy-panel.desnudo>.hy-panel-h{display:none}
.hy-cargando{margin:0;padding:26px 0;font-size:12.5px;color:var(--ink-3);text-align:center}
.hy-panel-x{display:contents}
@media (max-width:1100px){:where(body:not(.hy-tv-escala)) .hy-rejilla>.hy-panel{grid-column:span 12}}

/* mapa y ranking uno al lado del otro: el mapa dice dónde, la tabla dice quién */
.hy-ov2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start}
.hy-ov2-r{display:flex;flex-direction:column;gap:10px;min-width:0}
.hy-ov2-r .hy-rank{max-height:460px;overflow-y:auto;padding-right:4px}
@media (max-width:1100px){:where(body:not(.hy-tv-escala)) .hy-ov2{grid-template-columns:1fr}}

/* embudo de mejoras: etapas ordenadas, un solo azul de claro a oscuro */
.hy-embudo{display:flex;flex-direction:column;gap:3px}
.hy-emb{display:grid;grid-template-columns:150px minmax(0,1fr) 46px;align-items:center;gap:10px;width:100%;
  padding:6px 8px;border:1px solid transparent;border-radius:9px;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.hy-emb:hover,.hy-emb:focus-visible{background:var(--bg);border-color:var(--line)}
.hy-emb .l{font-size:12.5px;color:var(--ink-2)}
.hy-emb .pista{height:10px;border-radius:3px;background:rgba(15,21,24,.07);overflow:hidden}
.hy-emb .pista i{display:block;height:100%;border-radius:2px 3px 3px 2px;background:var(--r1)}
.hy-emb[style*="--p:2"] .pista i{background:var(--r2)}
.hy-emb[style*="--p:3"] .pista i{background:var(--r2)}
.hy-emb[style*="--p:4"] .pista i{background:var(--r3)}
.hy-emb[style*="--p:5"] .pista i{background:var(--r3)}
.hy-emb[style*="--p:6"] .pista i{background:var(--r4)}
.hy-emb[style*="--p:7"] .pista i{background:var(--r5)}
.hy-emb .v{text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-emb{grid-template-columns:110px minmax(0,1fr) 40px}}

/* barras apiladas de vencimientos: 2 px de hueco en el color del fondo, sin bordes */
.hy-apil{display:flex;flex-direction:column;gap:2px}
.hy-ap{display:grid;grid-template-columns:minmax(0,1fr) 1.2fr 42px;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;color:inherit}
.hy-ap:hover{background:var(--bg)}
.hy-ap .n{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-ap .n small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400}
.hy-ap .pila{display:flex;height:12px;border-radius:3px;overflow:hidden;background:rgba(15,21,24,.06);gap:2px}
.hy-ap .pila i{display:block;height:100%}
.hy-ap .pila .a{background:var(--hy-rojo)} .hy-ap .pila .b{background:var(--hy-ambar)}
.hy-ap .pila .c{background:var(--hy-ok)} .hy-ap .pila .d{background:var(--line-2)}
.hy-ap .v{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* variación junto a la cifra, con su minigráfico */
.hy-cifra .d{display:flex;align-items:center;gap:8px;margin-top:2px;min-height:22px}
.hy-cifra .d b{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.hy-cifra .d b.sube{color:var(--hy-ok)} .hy-cifra .d b.baja{color:var(--hy-rojo)}
.hy-hero .hy-cifra .d b{color:rgba(255,255,255,.72)}
.hy-hero .hy-cifra .d b.sube{color:#7FD8AC} .hy-hero .hy-cifra .d b.baja{color:#FF9DAE}

/* lista para elegir y ordenar paneles */
.hy-plista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.hy-pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.hy-pl .hy-check{flex:1;margin:0;align-items:flex-start}
.hy-pl .hy-check span{display:flex;flex-direction:column;gap:2px}
.hy-pl .hy-check small{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.hy-pl-o{display:flex;gap:4px;flex:none}
.hy-pl-o .hy-btn{min-height:28px;padding:4px 8px;font-size:13px}

/* alfiler neutro: en el mapa divergente el color lo lleva el departamento */
.hy .peru .pin.neutro .dot{fill:#fff;stroke:#002C5F;stroke-width:2.5}
.hy .peru .pin.sel .dot{stroke:var(--hy-azul);stroke-width:3}

/* ═══════════════ modo televisor ═══════════════
   Para dejar el tablero puesto en la pantalla de la oficina. Nada se redibuja
   al entrar: los colores son variables y la letra crece con el ancho de la
   pantalla, así que el mismo SVG se re-estiliza solo.                        */
body.hy-tv{overflow:hidden}
body.hy-tv .hy{
  --bg:#0B1014; --bg-2:#111A20; --bg-3:#0E1519;
  --ink:#F2F6F8; --ink-2:#AEBCC5; --ink-3:#7C8B95;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.26);
  --s1:#3987e5; --s2:#d95926;
  --r1:#184f95; --r2:#256abf; --r3:#3987e5; --r4:#6da7ec; --r5:#9ec5f4;
  --dv-neg:#e66767; --dv-pos:#3987e5; --dv-mid:#6A6E73;
  --gr-rej:#23303a; --gr-eje:#3a4a56; --gr-sup:#111A20;
  --hy-azul:#6da7ec; --hy-azul-bg:rgba(57,135,229,.14);
  --hy-ok:#2ea36f; --hy-ambar:#d9a441; --hy-rojo:#e66767; --hy-gris:#7C8B95;
  background:var(--bg);color:var(--ink);
  font-size:1.1vw;font-size:clamp(15px,1.1vw,23px);
  max-width:none;padding:0 3vw 2vh;
}
/* Solo datos: lo mismo que se esconde al imprimir, más lo que sirve para operar
   y no para mirar de lejos. */
body.hy-tv #hy-cabecera,body.hy-tv .hy-ctx,body.hy-tv .hy-foot,
body.hy-tv #hy-avisos,body.hy-tv .topbar,body.hy-tv .footer,body.hy-tv .bg,
body.hy-tv .hy-nav,body.hy-tv .hy-rail-b,body.hy-tv #abierto,
body.hy-tv .hy-filtros,body.hy-tv [data-ampliar],body.hy-tv .hy-gr-t{display:none!important}
body.hy-tv{padding-left:0!important}
body.hy-tv .hy-panel{background:var(--bg-2);border-color:var(--line);box-shadow:none;padding:2.2vh 2.4vw}
body.hy-tv .hy-panel-h h2{font-size:clamp(21px,1.9vw,40px)}
body.hy-tv .hy-panel-h .hy-sub{font-size:clamp(12px,.85vw,19px)}
body.hy-tv .hy-hero h2{font-size:clamp(26px,2.6vw,54px)}
body.hy-tv .hy-cifra .v{font-size:clamp(40px,4.4vw,104px)}
body.hy-tv .hy-cifra .l{font-size:clamp(11px,.8vw,17px)}
body.hy-tv .hy-panel[style*="--tope"]>.hy-panel-c{max-height:none}
body.hy-tv .hy-ov2-r .hy-rank{max-height:none}
body.hy-tv .hy-mapa .peru{max-height:62vh}
body.hy-tv .hy-sedes{max-height:none}
/* Escenario de la tele: la página es una columna de alto fijo (barra, paneles,
   controles) y los paneles se apilan en una sola celda, uno visible a la vez,
   fundiéndose entre sí. Nada empuja nada fuera de la pantalla.               */
body.hy-tv .hy{display:flex;flex-direction:column;height:100vh;height:100dvh;box-sizing:border-box;overflow:hidden}
body.hy-tv #hy-cuerpo{flex:1;min-height:0;display:flex;flex-direction:column}
body.hy-tv .hy-escenario{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hy-escenario>.hy-panel{grid-area:1/1/2/2;min-height:0;height:100%;overflow:auto;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s}
.hy-escenario>.hy-panel.activa{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.hy-escenario>.hy-panel.desnudo{background:transparent;border:0;box-shadow:none;padding:0}
@media (prefers-reduced-motion:reduce){.hy-escenario>.hy-panel,.hy-escenario>.hy-panel.activa{transition:none}}
/* En una tele nadie va a navegar: un clic que saca de pantalla completa es peor
   que no ofrecer el clic. */
body.hy-tv .hy-aten-i,body.hy-tv .hy-emb,body.hy-tv .hy-rk,
body.hy-tv .hy-ap,body.hy-tv .hy-cifra,body.hy-tv .hy-sig .hy-btn{pointer-events:none}

.hy-tv-barra{display:none}
body.hy-tv .hy-tv-barra{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;
  padding:12px 4px 10px;margin-bottom:10px;border-bottom:1px solid var(--line);
  font-size:clamp(11px,.85vw,18px);color:var(--ink-3)}
.hy-tv-m{font-weight:500;color:var(--ink-2)}
.hy-tv-m b{font-family:var(--disp);color:var(--ink);letter-spacing:.02em}
.hy-tv-s{display:inline-flex;align-items:center;gap:7px}
.hy-tv-s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hy-ok);flex:none}
.hy-tv-s.err{color:var(--hy-ambar)} .hy-tv-s.err::before{background:var(--hy-ambar)}
.hy-tv-r{margin-left:auto;font-variant-numeric:tabular-nums;font-size:clamp(15px,1.5vw,30px);color:var(--ink);font-weight:600}
/* Controles de la tele. Viven fuera del tablero: flechas grandes a los costados
   que se atenúan cuando nadie mueve el ratón pero nunca desaparecen, y abajo la
   pausa, dónde estás, qué viene y una ficha por panel.                       */
.hy-tv-ui{display:none}
body.hy-tv .hy-tv-ui{display:block;flex:none}
.hy-tv-fl{position:fixed;top:50%;z-index:70;width:7vh;width:min(7vh,4.4vw);height:15vh;height:min(15vh,9vw);
  transform:translateY(-50%);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border-radius:18px;color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.28);
  transition:opacity .4s var(--ease),background .2s var(--ease)}
.hy-tv-fl.ant{left:.5vw} .hy-tv-fl.sig{right:.5vw}
.hy-tv-fl svg{width:60%;height:auto}
.hy-tv-fl:hover{background:rgba(255,255,255,.2);opacity:1}
.hy-tv-fl:focus-visible{background:rgba(255,255,255,.2);outline:none;opacity:1}
body.hy-tv-quieto .hy-tv-fl{opacity:.25}
body.hy-tv-quieto,body.hy-tv-quieto .hy{cursor:none}
.hy-tv-pie{position:relative;display:flex;flex-direction:column;padding:1.4vh 0 1.2vh;border-top:1px solid var(--line)}
.hy-tv-pie .hy-tv-p{position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.06)}
.hy-tv-pie .hy-tv-p i{display:block;height:100%;width:0;background:var(--s1);transition:width .25s linear}
@media (prefers-reduced-motion:reduce){.hy-tv-pie .hy-tv-p i{transition:none}}
.hy-tv-fila{display:flex;align-items:center;margin-bottom:1vh;font-size:14px;font-size:clamp(14px,1.05vw,24px);color:var(--ink-2)}
.hy-tv-pp{flex:none;width:40px;height:40px;width:clamp(36px,2.6vw,60px);height:clamp(36px,2.6vw,60px);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--line-2);background:transparent;color:var(--ink)}
.hy-tv-pp svg{width:48%;height:48%}
.hy-tv-pp:hover{background:rgba(255,255,255,.12)}
.hy-tv-pp:focus-visible{background:rgba(255,255,255,.12);outline:none}
.hy-tv-cont{font-weight:600;color:var(--ink)}
.hy-tv-cont b{font-variant-numeric:tabular-nums;color:var(--s1);margin-right:.15em}
.hy-tv-est{display:none;padding:.25em .8em;border-radius:100px;background:rgba(217,164,65,.16);color:var(--hy-ambar);font-weight:600}
.hy-tv-est.on{display:inline-block}
.hy-tv-sig{margin-left:auto} .hy-tv-sig b{color:var(--ink);font-weight:600}
.hy-tv-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5vw}
.hy-tv-chips button{font:inherit;font-size:12px;font-size:clamp(11px,.78vw,18px);padding:.35em .9em;margin:2px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-3)}
.hy-tv-chips button:hover{color:var(--ink)}
.hy-tv-chips button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.hy-tv-chips button[hidden]{display:none}
/* En una tele el panel ocupa toda la pantalla: el contenido se centra en lugar
   de quedar pegado arriba con medio televisor vacío. */
body.hy-tv .hy-panel-c{justify-content:center}
body.hy-tv .hy-hero{height:100%;align-content:center}
body.hy-tv .hy-ov2{height:100%;align-content:center}
/* El respaldo cuando el navegador no concede pantalla completa: sin esto, .hy
   —que no es .hy-panel— se quedaría en el flujo normal de la página. */
.hy:fullscreen,.hy.hy-max{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;overflow:auto;background:var(--bg)}

/* ═══════════════ impresión ═══════════════
   Un gráfico impreso tiene que llevar sus números encima: por eso se abren
   todos los gemelos en tabla. Y sin `print-color-adjust` el mapa, que se pinta
   con `color-mix`, saldría en blanco.                                        */
@media print{
  .hy-rejilla{display:block}
  .hy-rejilla>.hy-panel{grid-column:auto!important;break-inside:avoid;page-break-after:always;margin-bottom:12px}
  .hy-pista{display:block;overflow:visible}
  .hy-pista>.hy-panel{flex:none;width:100%;min-height:0;break-inside:avoid;page-break-after:always}
  .hy-car-nav,.hy-panel-b,.hy-tv-barra,.hy-tv-ui,.hy-filtros{display:none!important}
  .hy-panel[style*="--tope"]>.hy-panel-c{max-height:none;overflow:visible}
  .hy-ov2-r .hy-rank{max-height:none;overflow:visible}
  .hy-gr-t{display:block!important}
  .hy-gr-t>summary{list-style:none;font-weight:600;color:var(--ink)}
  .hy-gr-t[open]>summary,.hy-gr-t>summary::-webkit-details-marker{display:none}
  .hy-gr-t table{display:table!important}
  .hy-tip{display:none!important}
  .peru .dep,.hy-rk .pista i,.hy-ap .pila i,.hy-emb .pista i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .mapcard{background:#0F1518!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* ═══════════════ los códigos no encabezan ═══════════════
   «Los códigos y ese tipo de cosas no deberían estar de frente al nombre de la
   sede, el nombre del cliente o el nombre del auditor». No se borran: quien
   audita en campo los necesita para cruzar contra el checklist impreso. Se
   atenúan, se corren al final de la línea, y viven en la ayuda emergente del
   nombre. Esta regla va al final del archivo a propósito: gana el empate de
   especificidad con las de más arriba sin necesidad de !important.           */
.hy-tabla .cod,.hy-acc .h .cod,.hy-ck .h .cod,.hy-matriz td:first-child small,
.hy-fila .c,.ck-proc .num,.pcod,.dcode,.alias,.hy-cod,.hy-cri{
  font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3);letter-spacing:.02em}
.hy-cod,.hy-cri{opacity:.72;cursor:help;transition:opacity 140ms var(--ease)}
.hy-cod:hover,.hy-cod:focus-visible,.hy-cri:hover{opacity:1}
/* «programada · completa» son palabras, no un código: estaban en mono gris. */
.hy-tabla .sub{font-size:11.5px;color:var(--ink-3)}
/* Un nombre que esconde su código avisa de que hay algo debajo, sin gritarlo. */
.hy-tabla a[title],.hy-rk .n[title]{text-decoration-color:transparent}
/* Al imprimir el código vuelve a leerse: quien concilia contra el archivo de
   Hyundai lo necesita en el papel. */
@media print{.hy-cod,.hy-cri,.hy-tabla .cod,.pcod,.dcode{opacity:1;color:var(--ink-2)}}

/* aviso de auditoría a medio llenar */
.hy-aviso-aud{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  padding:14px 18px;border-radius:var(--hy-radio);background:var(--hy-ambar-bg);
  border:1px solid var(--hy-ambar)}
@supports (background:color-mix(in srgb,red,blue)){.hy-aviso-aud{border-color:color-mix(in srgb,var(--hy-ambar) 30%,transparent)}}
.hy-aviso-aud .ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--bg-2);color:var(--hy-ambar)}
.hy-aviso-aud .ic svg{width:18px;height:18px}
.hy-aviso-aud .tx{flex:1;min-width:220px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.hy-aviso-aud .tx b{color:var(--ink)}
.hy-aviso-aud .bt{display:flex;gap:8px;flex:none;flex-wrap:wrap}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-aviso-aud{padding:12px 14px}:where(body:not(.hy-tv-escala)) .hy-aviso-aud .bt{width:100%}}
@media print{.hy-aviso-aud{display:none}}

/* auditorías sin terminar: se ven distintas y van primero */
.hy-tabla tr.hy-encurso td{background:var(--hy-ambar-bg)}
.hy-tabla tr.hy-encurso td:first-child{box-shadow:inset 3px 0 0 var(--hy-ambar)}
.hy-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}

/* tarjetas de la bienvenida: lo que puedes hacer, en botones grandes */
.hy-bienv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.hy-bienv-t{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-2);color:inherit;
  transition:border-color var(--hy-t) var(--ease),transform var(--hy-t) var(--ease)}
.hy-bienv-t:hover{border-color:var(--ink);transform:translateY(-1px)}
.hy-bienv-t b{font-size:14.5px}
.hy-bienv-t span{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.hy-bienv-t small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-bienv{grid-template-columns:1fr}}


/* ═══════════════ tira 10R en el formato de Hyundai ═══════════════
   La rejilla con bordes de la hoja Summary. En escritorio, una fila de ocho con
   los rótulos de fila a la izquierda; en tableta cuatro y en celular dos, y ahí
   cada celda lleva su propio rótulo corto para que nada dependa de la posición. */
.hy-tira{display:grid;grid-template-columns:auto repeat(8,minmax(0,1fr));grid-template-rows:auto auto auto;
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.hy-tira-rot,.hy-tira-col{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.hy-tira-rot span{display:flex;align-items:center;padding:0 14px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;border-top:1px solid var(--line-2)}
.hy-tira-rot span:first-child{border-top:0}
.hy-tira-col{border-left:1px solid var(--line-2);min-width:0}
.hy-tira-i{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:14px 6px 12px;
  border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:center;min-width:0}
.hy-tira-i:hover,.hy-tira-i:focus-visible{background:var(--bg)}
.hy-tira-i:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.hy-tira-i .ic{width:clamp(44px,4.4vw,70px);aspect-ratio:1;flex:none}
.hy-tira-i .ic svg{display:block;width:100%;height:100%}
.hy-tira-i .l{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.25;overflow-wrap:anywhere}
.hy-tira-v{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.hy-tira-v b{font-size:15px;font-weight:600;color:var(--ink)}
.hy-tira-v .k{display:none;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hy-tira-v.sin-items{background:var(--hy-gris-bg)}
.hy-tira-v.sin-items b{color:var(--ink-3)}
.hy-tira-v.sin-dato b{font-size:12px;font-weight:400;color:var(--ink-3)}
@media (max-width:1100px){
  :where(body:not(.hy-tv-escala)) .hy-tira{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}
  :where(body:not(.hy-tv-escala)) .hy-tira-rot{display:none}
  :where(body:not(.hy-tv-escala)) .hy-tira-col{grid-row:auto;grid-template-rows:auto;border-top:1px solid var(--line-2);margin-top:-1px}
  :where(body:not(.hy-tv-escala)) .hy-tira-v .k{display:inline}}
@media (max-width:640px){:where(body:not(.hy-tv-escala)) .hy-tira{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* televisor: se lee desde lejos y no responde a clics */
body.hy-tv .hy-tira-i{pointer-events:none}
body.hy-tv .hy-tira-i .ic{width:clamp(56px,5.2vw,124px)}
body.hy-tv .hy-tira-i .l{font-size:clamp(11px,.9vw,19px)}
body.hy-tv .hy-tira-v b{font-size:clamp(16px,1.7vw,38px)}
@media print{.hy-tira-v.sin-items{print-color-adjust:exact;-webkit-print-color-adjust:exact}.hy-tira-i{break-inside:avoid}}

/* aviso de corte cambiado y estados del mapa */
.hy-aviso-corte{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.4;
  color:var(--hy-ambar);background:var(--hy-ambar-bg);border-radius:10px;padding:4px 6px 4px 12px}
.hy-mapa{position:relative}
.hy-mapa-vacio{position:absolute;left:14px;right:14px;bottom:14px;background:var(--bg-2);gap:6px;text-align:left;align-items:flex-start}
.hy-mapa-vacio .bt{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hy-mapa-cob{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:11.5px;color:var(--ink-3)}
.hy-mapa-cob .rayado{flex:none;width:18px;height:11px;border-radius:2px;background:repeating-linear-gradient(45deg,#15212A 0 3px,#3B4C58 3px 5.5px)}
.hy-tabla td small{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}

/* La puerta al Modo TV, a la vista y en el azul de Hyundai */
.hy-btn.hy-btn-tv{background:#002C5F;border-color:#002C5F;color:#fff}
.hy-btn.hy-btn-tv:hover{background:#00458F;border-color:#00458F;opacity:1}
.hy-rail-c.tv{color:#002C5F;font-weight:600}

/* El atributo hidden tiene que ganarle al display de los botones. */
.hy-btn[hidden],.hy-tv-fl[hidden]{display:none!important}
/* Márgenes en vez de gap en la fila de la tele: los motores anteriores a 2020 no
   conocen gap en flex y los controles quedarían pegados. */
.hy-tv-fila>*{margin-right:1.4vw}
.hy-tv-fila>.hy-tv-sig{margin-right:0}

/* ═══════════ quién mejoró y quién retrocedió (etapa 07, paso 6) ═══════════ */
.hy-mov{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.2fr);gap:18px;align-items:start}
.hy-mov-lado{display:flex;flex-direction:column;min-width:0} .hy-mov-lado>*+*{margin-top:12px}
.hy-mov-red>*+*{margin-top:3px}
.hy-mov-red{display:flex;flex-direction:column;padding:16px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.hy-mov-red .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hy-mov-red b{font-family:var(--disp);font-size:40px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.hy-mov-red b.sube{color:var(--dv-pos)} .hy-mov-red b.baja{color:var(--dv-neg)}
.hy-mov-red span{font-size:12.5px;color:var(--ink-2)} .hy-mov-red .c{color:var(--ink-3)}
.hy-mov-podio{display:flex;flex-direction:column} .hy-mov-podio>*+*{margin-top:8px}
.hy-mov-p{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
.hy-mov-p .o{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--hy-azul-bg);color:var(--dv-pos)}
.hy-mov-p .n{min-width:0} .hy-mov-p .n b{display:block;font-size:13.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hy-mov-p .n small{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hy-mov-p .d{font-weight:700;color:var(--dv-pos);font-variant-numeric:tabular-nums;white-space:nowrap}
.hy-mov-torre{display:flex;flex-direction:column;min-width:0}
.hy-mov-f{display:grid;grid-template-columns:22px 40px minmax(0,1.4fr) 116px minmax(80px,1fr) 78px;gap:10px;align-items:center;padding:6px 8px;border-radius:9px;will-change:transform}
.hy-mov-f:nth-child(odd){background:var(--bg)}
.hy-mov-f .pos{font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.hy-mov-f .cam{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.hy-mov-f .cam.sube{color:var(--dv-pos)} .hy-mov-f .cam.baja{color:var(--dv-neg)}
.hy-mov-f .n{font-size:13px;font-weight:500;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hy-mov-f .n small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.hy-mov-f .vals{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hy-mov-f .vals b{color:var(--ink)}
.hy-mov-f .bar{position:relative;height:10px;border-radius:3px;background:rgba(15,21,24,.06)}
.hy-mov-f .bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ink-3)}
.hy-mov-f .bar i{position:absolute;top:0;bottom:0;border-radius:2px}
.hy-mov-f .bar i.pos{left:50%;background:var(--dv-pos)} .hy-mov-f .bar i.neg{right:50%;background:var(--dv-neg)}
.hy-mov-f .d{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;color:var(--ink-2)}
.hy-mov-f .d.sube{color:var(--dv-pos)} .hy-mov-f .d.baja{color:var(--dv-neg)}
@media (max-width:900px){:where(body:not(.hy-tv-escala)) .hy-mov{grid-template-columns:1fr}:where(body:not(.hy-tv-escala)) .hy-mov-f{grid-template-columns:22px 36px minmax(0,1fr) 70px}:where(body:not(.hy-tv-escala)) .hy-mov-f .vals,:where(body:not(.hy-tv-escala)) .hy-mov-f .bar{display:none}}
@media (prefers-reduced-motion:reduce){.hy-mov-f{transition:none!important;transform:none!important}}
/* cambio contra el período anterior en rankings, tira 10R y cifra principal */
.hy-rk .v small.d{font-weight:600;color:var(--ink-3)} .hy-rk .v small.d.sube{color:var(--dv-pos)} .hy-rk .v small.d.baja{color:var(--dv-neg)}
.hy-tira-v small.d{font-size:10.5px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hy-tira-v small.d.sube{color:var(--dv-pos)} .hy-tira-v small.d.baja{color:var(--dv-neg)}
.hy-pesas{display:block;width:74px;height:22px}
.hy-pesas line{stroke:rgba(255,255,255,.55);stroke-width:1.6}
.hy-pesas circle{fill:rgba(255,255,255,.6)} .hy-pesas circle.b{fill:#fff}

/* ═══════════ el escritorio parece una aplicación (etapa 07, paso 7) ═══════════
   Dentro del portal Hyundai la barra global se vuelve una franja fija y
   compacta (la sesión, Clave y Salir siguen ahí), se van el fondo cuadriculado
   y el pie de página, y la cabecera ocupa una línea: la primera cifra queda
   arriba, no después de 400 px de títulos. Network se alcanza desde la marca
   del riel.                                                                   */
body.hy-app .bg,body.hy-app .footer{display:none}
body.hy-app .topbar{position:sticky;top:0;z-index:7;padding-block:8px;min-height:52px;background:var(--bg-2);border-bottom:1px solid var(--line)}
body.hy-app .topbar .mark img{width:78px}
body.hy-app .topbar .nav{display:none}
body.hy-app .page.hy{padding-block:16px 40px}
body.hy-app .hy-crumb{margin:0 0 4px}
body.hy-app .hy-head{margin-bottom:12px;align-items:center}
body.hy-app .hy-head .hy-kicker{display:none}
body.hy-app .hy-head h1{font-size:clamp(24px,2.3vw,30px)}
body.hy-app .hy-head .hy-sub{margin-top:3px;font-size:13px}
a.hy-rail-marca{cursor:pointer}
a.hy-rail-marca:hover b{opacity:.82}
/* paneles emparejados del mismo alto */
.hy-rejilla{align-items:stretch}

/* La cifra que manda: obligatorios en grande, con su pista en el azul de la
   serie y la marca del estándar; los otros tres la acompañan. Sin semáforo:
   verde y ámbar no se distinguen en daltonismo protán, y el número ya lo dice. */
.hy-hero{grid-template-columns:minmax(220px,.8fr) 2.4fr;padding:22px 24px;align-items:center}
.hy-hero h2{font-size:24px}
.hy-hero-n{grid-template-columns:repeat(2,minmax(0,1fr)) 1.4fr repeat(2,minmax(0,1fr))}
.hy-cifra.principal{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
.hy-cifra.principal .v{font-size:64px}
.hy-cifra .bar{position:relative;overflow:visible}
.hy-cifra .bar i,.hy-cifra.ok .bar i,.hy-cifra.ambar .bar i,.hy-cifra.rojo .bar i{background:#6da7ec}
.hy-cifra.rec .bar i{background:#f39a6b}
.hy-cifra .bar .obj{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:#fff}
.hy-cifra.rojo .v{color:#fff}
.hy-cifra.alerta .v{color:#FFD28A}
.hy-cifra.alerta .l::before{content:"⚠ ";color:#FFD28A}
.hy-waffle{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;margin-top:2px}
.hy-waffle i{height:9px;border-radius:2px;background:rgba(255,255,255,.85)}
.hy-waffle i.sin{background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.hy-hero .hy-cifra .d b.sube{color:#9ec5f4} .hy-hero .hy-cifra .d b.baja{color:#ff9d9d}
/* En pantalla angosta el héroe va a una sola columna: esta regla tiene que estar
   aquí abajo y no solo en el bloque base, porque la de arriba (línea ~1100) es
   posterior y le ganaba, dejando las cifras en una columna de 28 px. */
@media (max-width:1100px){:where(body:not(.hy-tv-escala)) .hy-hero{grid-template-columns:1fr;align-items:start}:where(body:not(.hy-tv-escala)) .hy-hero-n{grid-template-columns:repeat(2,minmax(0,1fr))}:where(body:not(.hy-tv-escala)) .hy-cifra.principal{grid-column:1/-1}}

/* Vencimientos: vencidas en rojo, por vencer en ámbar rayado (la textura las
   separa también en daltonismo), cerradas en azul. */
.hy-ap .pila .a{background:var(--dv-neg)}
.hy-ap .pila .b{background:repeating-linear-gradient(45deg,var(--hy-ambar) 0 3px,#e8b654 3px 6px)}
.hy-ap .pila .c{background:var(--dv-pos)}
.hy-leyenda i.caja.b{background:repeating-linear-gradient(45deg,var(--hy-ambar) 0 3px,#e8b654 3px 6px)!important}

/* KAIA Central como burbuja de chat (Manu, 18-9-2026): fija abajo a la derecha,
   colgada de <body>. Por debajo del cajón (120/121) y por encima de los paneles
   ampliados (60) y los controles de la tele (70). Se esconde en la tele, al
   ordenar el tablero y al imprimir. */
/* Cuelga de <body>, fuera de .hy: los tokens del panel no llegan, así que los colores van escritos. */
.hy-tg-fab{position:fixed;right:20px;bottom:20px;z-index:100;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:100px;background:#6948BB;color:#fff;font:600 13px/1 var(--font);letter-spacing:.01em;box-shadow:0 12px 30px rgba(15,21,24,.28);cursor:pointer;transition:transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.hy-tg-fab:hover,.hy-tg-fab:focus-visible{transform:translateY(-2px);box-shadow:0 16px 36px rgba(15,21,24,.32)}
.hy-tg-fab svg{width:20px;height:20px;flex:none}
.hy-tg-fab.listo{background:#0F1518}
.hy-tg-fab .hy-pip{font-style:normal;background:#fff;color:#6948BB;font-size:10.5px;line-height:1;padding:3px 6px;border-radius:9px}
body.hy-tv .hy-tg-fab,body.hy-ordenando .hy-tg-fab{display:none!important}
.con-aviso .hy-tg-fab{bottom:72px}
@media (max-width:820px){:where(body:not(.hy-tv-escala)) .hy-tg-fab{right:14px;bottom:14px;padding:0 14px 0 12px;min-height:44px}}
/* el triángulo de la cifra de la red, más chico que el número */
.hy-mov .g{font-style:normal;font-size:.6em;vertical-align:.14em}
/* La barra de Vista y Sede en una sola fila en pantallas anchas, y el aviso de
   auditoría en una línea: la primera cifra sube a la parte de arriba. */
@media (min-width:1280px){
  body.hy-app .hy-ctx{flex-wrap:nowrap;margin-bottom:12px;gap:8px}
  body.hy-app .hy-campo{min-width:0;flex:0 1 auto}
  body.hy-app .hy-campo select{max-width:250px;text-overflow:ellipsis}
  body.hy-app #hy-ctx-etq{min-width:0;flex:0 1 auto;overflow:hidden;white-space:nowrap}
  body.hy-app .hy-ctx>.hy-btn{flex:none}
}
.hy-aviso-aud{padding:9px 14px;gap:10px;margin-bottom:10px;font-size:13px}
.hy-aviso-aud .ic{width:28px;height:28px}
.hy-hero h2{font-size:21px}
.hy-hero .hy-p{font-size:12.5px;line-height:1.5}

/* ═══════════ interacción tipo analítica (etapa 07, paso 8) ═══════════ */
.hy-globo{min-width:180px;max-width:290px;z-index:20}
.hy-globo .f span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-globo .f b.sube{color:var(--dv-pos)} .hy-globo .f b.baja{color:var(--dv-neg)}
.hy-globo .s{display:block;margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);line-height:1.45}
.hy-lectura{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--s1);background:var(--hy-azul-bg);border-radius:0 10px 10px 0;font-size:13px;color:var(--ink);line-height:1.5}
.hy-lectura b{font-weight:600}
.hy-rk.enlazada{background:var(--hy-azul-bg);border-color:var(--hy-azul)}
#hy-rank .hy-rk.foco{background:var(--hy-azul-bg);box-shadow:inset 4px 0 0 var(--s1)}
.hy-mapa .dep.con:hover{stroke:#fff;stroke-width:2}

/* ═══════════ el sistema en las otras páginas (etapa 07, paso 10) ═══════════ */
.hy-tabla small.d{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.hy-tabla small.d.sube,.hy-sub .sube{color:var(--dv-pos);font-weight:600} .hy-tabla small.d.baja,.hy-sub .baja{color:var(--dv-neg);font-weight:600}
.hy-red-rampa .hy-rampa{margin-top:8px}
#hy-sede-10r .hy-tira{margin-top:4px}
#hy-sede-10r .hy-tira-v.clic{cursor:pointer} #hy-sede-10r .hy-tira-v.clic:hover,#hy-sede-10r .hy-tira-v.clic:focus-visible{background:var(--bg);outline:2px solid var(--ink);outline-offset:-2px}
.hy-tarj .m .bar{position:relative;overflow:visible} .hy-tarj .m .bar i{border-radius:inherit}
.hy-tarj .m .bar .obj{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
/* La barra superior es fija: al saltar a un ancla, el destino no debe quedar debajo. */
body.hy-app [data-brecha],body.hy-app .hy-bloque[id],body.hy-app [id^="hy-"]{scroll-margin-top:64px}
/* Imprimir la ficha de una sede: queda la hoja y se van los controles. Es el
   «informe imprimible» que Manu revisó, ahora dentro del portal y con los mismos
   números que el resto, en vez de una página aparte que leía la API vieja. */
@media print{
  body.hy-app .hy-rail,body.hy-app .hy-btn,body.hy-app .hy-tabs,body.hy-app .hy-head-r,body.hy-app .hy-crumb,body.hy-app .hy-aviso-aud,body.hy-app .hy-tg-fab{display:none!important}
  body.hy-app .hy-bloque{box-shadow:none;border:1px solid #d7dbde;break-inside:avoid}
  body.hy-app .hy-tira,body.hy-app .hy-tabla{break-inside:avoid}
  body.hy-app h1,body.hy-app h2{break-after:avoid}
}

/* ═══════════ acomodar el panel principal (etapa 09) ═══════════
   El modo ordenar se enciende a propósito: con él apagado el tablero se usa normal
   —gráficos, globos, el ⤢—, y encendido los paneles tiemblan como los iconos de un
   teléfono para que se vea que están sueltos. */
.hy-agarre{display:none}
body.hy-ordenando .hy-agarre{display:inline-flex;cursor:grab;touch-action:none}
body.hy-ordenando .hy-agarre:active{cursor:grabbing}
body.hy-ordenando [data-ampliar]{display:none}
/* Mientras se acomoda, el contenido no recibe el puntero: si no, arrastrar sobre un
   gráfico sacaría su globo y el panel se quedaría a medio mover. */
body.hy-ordenando .hy-panel-c{pointer-events:none;user-select:none}
body.hy-ordenando .hy-panel{cursor:default}
body.hy-ordenando .hy-panel-h{cursor:grab}
@media (prefers-reduced-motion:no-preference){
  body.hy-ordenando .hy-rejilla>.hy-panel{animation:hy-tiembla 2.4s ease-in-out infinite}
  body.hy-ordenando .hy-rejilla>.hy-panel:nth-child(2n){animation-delay:-1.2s}
  body.hy-ordenando .hy-rejilla>.hy-panel.hy-hueco,body.hy-ordenando .hy-rejilla>.hy-panel.hy-levantado{animation:none}
}
@keyframes hy-tiembla{0%,100%{transform:rotate(-.22deg)}50%{transform:rotate(.22deg)}}
.hy-panel.hy-hueco{opacity:.35;outline:2px dashed var(--hy-azul);outline-offset:-2px}
.hy-panel.hy-hueco>*{visibility:hidden}
.hy-panel.hy-levantado{outline:2px solid var(--hy-azul);outline-offset:-2px;box-shadow:0 18px 44px rgba(15,21,24,.22)}
.hy-fantasma{position:fixed;z-index:110;pointer-events:none;margin:0;opacity:.95;
  box-shadow:0 26px 60px rgba(15,21,24,.3);transform:scale(1.02);transition:none}
body.hy-arrastrando{cursor:grabbing}
.hy-ord-barra{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:115;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(920px,92vw);
  padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);box-shadow:0 20px 50px rgba(15,21,24,.22)}
.hy-ord-barra .hy-ord-t{font-size:12px;color:var(--ink-2);max-width:42ch}
.hy-ord-barra .hy-ord-aviso{font-size:12px;font-weight:600;color:var(--hy-azul);min-width:0}
/* Con la franja de «modo abierto» abajo, la barra se levanta: el alto exacto lo mide
   el propio archivo, porque esa franja se envuelve en pantallas angostas. */
.con-aviso .hy-ord-barra{bottom:66px}
@media (max-width:640px){.hy-ord-barra{left:8px;right:8px;transform:none;max-width:none}.hy-ord-barra .hy-ord-t{display:none}
  .con-aviso .hy-ord-barra{bottom:90px}}
@media print{.hy-ord-barra{display:none!important}}

/* ── estirar y ocultar (etapa 09, bloque 3) ──────────────────────────────────
   El tirador vive en el borde derecho del panel y solo existe en modo ordenar.
   Por debajo de 1100 px la rejilla pone todos los paneles a ancho completo, así
   que ahí no se muestra: mover algo que no cambia nada sería mentir. */
.hy-tirador{display:none}
.hy-ocultar{display:none}
body.hy-ordenando .hy-ocultar{display:inline-flex}
body.hy-ordenando .hy-tirador{display:block;position:absolute;top:50%;right:-7px;transform:translateY(-50%);
  width:14px;height:64px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);
  cursor:ew-resize;touch-action:none;z-index:3;box-shadow:0 2px 8px rgba(15,21,24,.12)}
body.hy-ordenando .hy-tirador::after{content:'';position:absolute;inset:0;margin:auto;width:2px;height:22px;border-radius:2px;background:var(--ink-3)}
body.hy-ordenando .hy-tirador:hover,body.hy-ordenando .hy-tirador:focus-visible{border-color:var(--hy-azul)}
body.hy-ordenando .hy-tirador:focus-visible::after{background:var(--hy-azul)}
@media (max-width:1100px){body.hy-ordenando .hy-tirador{display:none}}
.hy-ord-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.hy-ord-chips .hy-btn{min-height:26px;padding:3px 9px;font-size:12px}

/* ── el menú, a la izquierda o arriba (etapa 09, bloque 4) ────────────────────
   Bruno lo pidió así: «es como si quisiera mover el menú de izquierda a arriba solo
   porque a mí me gusta así». Cada persona elige, y se recuerda en su cuenta.

   El truco es que todo el riel cuelga de un solo token, --rail: poniéndolo en cero
   se recolocan solos el aviso flotante y la franja de modo abierto, que ya estaban
   escritos en función de él. Por eso esto es casi todo CSS y no reescribe el menú. */
body.hy-app.hy-menu-arriba{--rail:0px;padding-left:0;padding-top:calc(var(--barra-top,52px) + var(--barra-menu,56px))}
body.hy-app.hy-menu-arriba .topbar{position:fixed;top:0;left:0;right:0;z-index:9}
body.hy-app.hy-menu-arriba .hy-nav{left:0;right:0;top:var(--barra-top,52px);bottom:auto;width:auto;height:var(--barra-menu,56px);
  flex-direction:row;align-items:center;gap:4px;padding:6px 12px;overflow-x:auto;overflow-y:hidden;
  border-right:0;border-bottom:1px solid var(--line)}
body.hy-app.hy-menu-arriba .hy-rail-top{flex:none;margin:0 10px 0 0}
body.hy-app.hy-menu-arriba .hy-rail-g{flex:none;position:relative}
body.hy-app.hy-menu-arriba .hy-rail-g.pie{margin-left:auto}
body.hy-app.hy-menu-arriba .hy-nav-sep{display:none}
body.hy-app.hy-menu-arriba .hy-rail-c{flex:none}
body.hy-app.hy-menu-arriba #hy-contraer{display:none}
body.hy-app.hy-menu-arriba .hy-nav a,body.hy-app.hy-menu-arriba .hy-rail-t2{white-space:nowrap}
/* Los submenús bajan en vez de abrirse al costado: es la misma caja flotante que ya
   existía para el riel contraído, girada de eje. */
body.hy-app.hy-menu-arriba .hy-rail-sub{position:absolute;left:0;top:100%;z-index:12;min-width:196px;margin:6px 0 0;
  padding:6px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);box-shadow:0 12px 32px rgba(15,21,24,.16);
  opacity:0;visibility:hidden;transition:opacity 130ms var(--ease)}
body.hy-app.hy-menu-arriba .hy-rail-sub[hidden]{display:flex}
body.hy-app.hy-menu-arriba .hy-rail-g[data-grupo]:hover .hy-rail-sub,
body.hy-app.hy-menu-arriba .hy-rail-g[data-grupo]:focus-within .hy-rail-sub{opacity:1;visibility:visible}
/* Arriba hay sitio para las palabras aunque la pantalla sea mediana: la regla de
   «solo iconos» de 1180 px es del riel lateral, no de la barra. */
@media (max-width:1180px){
  body.hy-app.hy-menu-arriba .hy-nav a span,body.hy-app.hy-menu-arriba .hy-rail-t2>span,
  body.hy-app.hy-menu-arriba .hy-rail-marca span{display:block}
  body.hy-app.hy-menu-arriba .hy-rail-marca b{width:auto}
  body.hy-app.hy-menu-arriba .hy-rail-marca:has(b img){align-items:flex-start}
  body.hy-app.hy-menu-arriba .hy-nav a,body.hy-app.hy-menu-arriba .hy-rail-t2{justify-content:flex-start;padding-inline:10px}
}
/* En el teléfono no cambia nada: sigue el cajón lateral que ya está hecho y probado.
   Una barra horizontal en una pantalla angosta es peor que el cajón. */
@media (max-width:820px){
  body.hy-app.hy-menu-arriba{--rail:252px;padding-left:0;padding-top:0}
  body.hy-app.hy-menu-arriba .topbar{position:sticky;z-index:7}
  body.hy-app.hy-menu-arriba .hy-nav{left:0;right:auto;top:0;bottom:0;width:var(--rail);height:auto;
    flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:hidden;
    border-right:1px solid var(--line);border-bottom:0;padding:14px 10px 12px}
  body.hy-app.hy-menu-arriba .hy-rail-g.pie{margin-left:0}
  body.hy-app.hy-menu-arriba .hy-rail-sub{position:static;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0;margin:1px 0 4px}
  body.hy-app.hy-menu-arriba .hy-rail-sub[hidden]{display:none}
}
@media print{body.hy-app.hy-menu-arriba{padding-top:0!important}}

/* ── el asistente que sabe dónde está cada cosa (etapa 09, bloque 5) ────────── */
.hy-asis-sug{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.hy-asis-res{margin-top:12px;display:flex;flex-direction:column}
.hy-asis-res>*+*{margin-top:10px}
.hy-asis-r{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.hy-asis-r .k{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hy-asis-r p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.hy-asis-r .bt{display:block;margin-top:10px}
.hy-asis-nota{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-3)}
.hy-asis-voz{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.hy-asis-voz .hy-p{margin:0}
.hy-asis-aviso{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.hy-asis-aviso[hidden]{display:none}
.hy-asis-aviso p{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.hy-asis-aviso .bt{display:block;margin-top:10px}

/* Bandeja de avisos. El servidor los escribía desde hace etapas y ninguna pantalla los
   leía: solo viajaba el contador. Un aviso que nadie puede abrir no es un aviso. */
.hy-avisos{list-style:none;margin:0;padding:0}
.hy-avisos li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.hy-avisos li+li{margin-top:8px}
.hy-avisos li.nuevo{border-left:3px solid var(--azul,#2563eb)}
.hy-avisos li.leido{opacity:.66}
.hy-avisos .t{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.hy-avisos .c{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.hy-avisos .f{margin:6px 0 0;font-size:11px;color:var(--ink-3)}
.hy-avisos .bt{display:block;margin-top:8px}
.hy-rail-c .hy-pip{position:absolute;top:6px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--ambar,#d97706);color:#fff;font-size:10px;font-style:normal;font-weight:700;line-height:16px;text-align:center}
.hy-rail-c{position:relative}