/* personajes.css — v0.4 (2026-09-27, #0663: aviso del modo prueba) · AF-057: la ninja y el robot vivos del catálogo.

   Solo se emite con TIENDA_PERSONAJES_VIVOS = prueba | on (partials/personajes-vivos).
   Todo cuelga de `body.personajes-vivos`, que pone personajes.js SOLO cuando arrancan: en modo
   «prueba» sin ?personajes=1 esa clase no aparece y la tienda queda exactamente como hoy.

   ANC-116 (tienda-cristal.css) NO se toca: los dibujos fijos siguen ahí. Con los personajes
   vivos encendidos se ocultan desde este archivo, que es una capa aparte. Apagado = vuelven.
   Colores: los mismos pares ya medidos para el prototipo (PALETA_PASALA.md §7 bis, #0657). */

/* Con los vivos encendidos, fuera los dibujos quietos de la rejilla (los mismos personajes). */
body.tienda-pasala.personajes-vivos .catalogo-grid::before,
body.tienda-pasala.personajes-vivos .catalogo-grid::after {
    display: none;
}

/* Los personajes pueden asomar por los bordes de la pantalla: sin esto meterían scroll
   horizontal. `clip` (no `hidden`) no crea contenedor de scroll, así la cabecera sigue fija. */
html:has(body.personajes-vivos),
body.personajes-vivos {
    overflow-x: clip;
}

#capa-personajes { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 3; pointer-events: none; }
.pj {
    position: absolute; top: 0; left: 0; pointer-events: auto; cursor: grab; will-change: transform;
    touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pj.prendido { pointer-events: none; }          /* colgado del puntero: no tapa ningún clic */
body.agarrando, body.agarrando * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.pj-giro { width: 100%; height: 100%; transform-origin: 50% 100%; }
.pj-cuerpo {
    background-repeat: no-repeat; transform-origin: 50% 100%;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .6)) drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
    transition: filter 1.2s;
}
.pj-cuerpo.respira { animation: pj-respira 3.2s ease-in-out infinite; }
.pj-cuerpo.apagado { filter: brightness(.35) drop-shadow(0 5px 7px rgba(0, 0, 0, .6)); transition: none; }
@keyframes pj-respira { 50% { transform: scaleY(1.012) translateY(-.5px); } }
.pj-globo {
    position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px) scale(.8);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    background: #111B38; color: #F2F6FF; border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px; padding: .3rem .55rem; font-size: 1.05rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pj-globo.visible { opacity: 1; transform: translate(-50%, -4px) scale(1); }
.pj-globo.clicable { pointer-events: auto; cursor: pointer; background: #EA580C; color: #FFFFFF; }
.pj-pantalla { display: block; width: 58px; height: auto; }

/* Lo que los personajes señalan o empujan en la tienda. */
body.personajes-vivos .vg-linea.resalta { border-radius: 14px; box-shadow: 0 0 0 3px #FDE08A, 0 0 30px rgba(253, 224, 138, .35); }
body.personajes-vivos .serv-avisame.pulso { animation: pj-pulso .6s ease-in-out 4; }
@keyframes pj-pulso { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(251, 191, 36, .3); } }

@media (prefers-reduced-motion: reduce) {
    .pj-cuerpo.respira, body.personajes-vivos .serv-avisame.pulso { animation: none; }
    .pj-globo { transition: none; }
}
/* v0.4 (#0663): aviso de 6 s en modo prueba. Mismo par ya medido que el globo (#111B38 / #F2F6FF). */
.pj-aviso-prueba {
    position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 60;
    width: min(26rem, calc(100vw - 2rem)); padding: .7rem .9rem; border-radius: 12px;
    background: #111B38; color: #F2F6FF; border: 1px solid #FDE08A;
    font: 600 .92rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55); pointer-events: none;
}
@media print { #capa-personajes { display: none; } }

/* v0.6 (#0781) — Globo de la guía: frases largas en varias líneas y enlaces que se pulsan.
   Mismo fondo medido (#111B38); texto #F2F6FF 15,68:1 y enlaces #FDE08A 13,09:1 (scripts/contraste.py). */
.pj-globo.guia {
    white-space: normal; width: max-content; max-width: min(17rem, calc(100vw - 2rem));
    font-size: .95rem; font-weight: 600; line-height: 1.4; text-align: left; padding: .55rem .7rem;
    pointer-events: auto; cursor: default; z-index: 2;
}
.pj-globo.guia a { color: #FDE08A; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.pj-globo.guia a:focus-visible { outline: 2px solid #FDE08A; outline-offset: 2px; border-radius: 3px; }
.pj-globo .pj-cupos { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 700; color: #FDE08A; }
/* La ninja señala el asistente: el botón amarillo late unas veces. */
body.personajes-vivos #ppp-asis-abrir.pj-pulso { animation: pj-pulso .6s ease-in-out 5; }
@media (prefers-reduced-motion: reduce) {
    body.personajes-vivos #ppp-asis-abrir.pj-pulso { animation: none; outline: 3px solid #FDE08A; outline-offset: 3px; }
}
/* v0.7 (#0782): «Tócame: No» debajo de la cara del robot mientras espera una respuesta. */
.pj-globo .pj-etq { display: block; margin-top: .25rem; font-size: .8rem; text-align: center; color: #F2F6FF; }