/* ============================================================================
   video-guia.css — Los videos guía de Pásala.  v1.0 (2026-09-21, #0645 · AF-050)

   Qué es: los disparadores («▶ Mira cómo…») y el diálogo que abre el video
   ENCIMA de la misma página. Orden del socio en `arreglando 58.txt`: «debe
   reproducirse en la misma página… arriba, visible».

   GEMELO: `sitio/css/video.css` es copia EXACTA de este archivo. La portada
   vive en otro dominio (mipasala.com) y no carga hojas de la tienda. Si cambias
   uno, copia el otro — y comprueba que son iguales:
       cmp pinpunpan/public/css/video-guia.css sitio/css/video.css

   Colores (ATLAS 2.6 §B, paso 0): SOLO tokens que ya existen en las dos hojas
   base — --bg, --card, --text, --muted, --accent, --line —, así que no hay un
   hex suelto en ninguna regla. Único token nuevo: --vg-velo, el velo del
   diálogo (no había ninguno). Cada pareja está medida con
   `python scripts/contraste.py` y escrita en `PALETA_PASALA.md`.

   NO toca `tienda-cristal.css` (ANC-117): todo lleva prefijo vg- y se apoya en
   fondos OPACOS propios, así que se lee igual con la piel encendida o apagada.
   Sin animaciones: no hay nada que `prefers-reduced-motion` tenga que apagar.
   ========================================================================= */

/* El velo del diálogo. Va también en ::backdrop porque ese pseudo-elemento no
   heredaba de :root en los navegadores anteriores a 2024. Decorativo: no hay
   texto sobre él (el texto va en la caja opaca del diálogo). */
:root,
.vg-dialogo::backdrop {
    --vg-velo: rgba(2, 6, 23, 0.86);
}

/* --- Bloqueo del fondo mientras el diálogo está abierto ------------------- */
html.vg-abierto { overflow: hidden; }

/* --- El icono ▶: un triángulo de CSS, no un carácter. -----------------------
   En Android «▶» sale como emoji de color según el teclado del sistema; el
   triángulo de borde es igual en todos los teléfonos y no depende de fuentes
   (CL-V 4). Glifo --bg sobre --accent: medido 11,5:1. */
.vg-play {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
}
.vg-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 0.18rem;
    border-left: 0.55rem solid currentColor;
    border-top: 0.36rem solid transparent;
    border-bottom: 0.36rem solid transparent;
}
.vg-play--mini { width: 1.45rem; height: 1.45rem; }
.vg-play--mini::before { border-left-width: 0.46rem; border-top-width: 0.3rem; border-bottom-width: 0.3rem; margin-left: 0.14rem; }

/* --- Variante «línea»: catálogo --------------------------------------------
   Una sola línea. El margen superior negativo se come parte del hueco que ya
   deja `.pasos-marca` (1,75rem), así que los servicios bajan ~28 px: una línea
   de texto, como pidió el socio. Sin fondo propio: el fondo de ahí es el
   degradado de la página (medido en su zona MÁS CLARA, no en la media). */
.vg-linea {
    margin: -1rem 0 0.25rem;
    text-align: center;
}
.vg-disparador {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
}
.vg-disparador .vg-play { width: 1.4rem; height: 1.4rem; }
.vg-disparador .vg-play::before { border-left-width: 0.44rem; border-top-width: 0.29rem; border-bottom-width: 0.29rem; margin-left: 0.13rem; }
.vg-disparador-texto { min-width: 0; overflow-wrap: anywhere; }
.vg-pregunta { color: var(--muted); }
.vg-accion {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.vg-disparador:hover .vg-accion { text-decoration-thickness: 2px; }

/* --- Variante «pastilla»: «Recibimos tu pago» ------------------------------
   Con fondo OPACO propio, porque en esa pantalla hay un personaje (el mago de
   ANC-117) detrás del contenido: texto sobre imagen sin velo es R5. La
   pastilla ES el velo. */
.vg-linea--pastilla { margin: 1.25rem 0; }
.vg-linea--pastilla .vg-disparador {
    padding: 0.4rem 0.95rem 0.4rem 0.45rem;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 0.88rem;
}
.vg-linea--pastilla .vg-disparador:hover { border-color: var(--accent); }

/* --- Variante «asistente»: primera opción del menú (ANC-078 lo admite) -----
   Se apoya en `.ppp-asis-op` del propio asistente; aquí solo lo que cambia por
   ser un enlace y no un botón. Doble clase para ganarle a `.ppp-asis-op`, que
   se pinta DESPUÉS de esta hoja en la cascada. */
.ppp-asis-op.vg-asis-op {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    text-decoration: none;
}

/* --- Variante «tarjeta»: portada, junto a «Ir a la tienda» ----------------- */
.vg-tarjeta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 22rem;
    margin: 1.25rem auto 0;
    padding: 0.6rem 0.9rem 0.6rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--card);
    color: var(--text);
    text-align: left;
    text-decoration: none;
}
.vg-tarjeta:hover { border-color: var(--accent); }
.vg-poster {
    position: relative;
    flex: 0 0 auto;
    width: 4.5rem;
    aspect-ratio: 9 / 16;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--bg);
}
.vg-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Póster que no llegó: el JS le pone `hidden`, y sin esta línea el `display:block`
   de arriba le gana al atributo y se sigue viendo el icono de imagen rota. Es el
   mismo fallo que el #0587 con `.ppp-asis[hidden]`; visto en el banco de pruebas
   del #0645 antes de publicar. */
.vg-poster img[hidden] { display: none; }
.vg-poster .vg-play {
    position: absolute;
    inset: 0;
    margin: auto;
}
.vg-tarjeta-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vg-tarjeta-titulo { font-weight: 700; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.vg-tarjeta-sub { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

/* --- El diálogo ------------------------------------------------------------ */
.vg-dialogo {
    width: min(calc(100vw - 1.5rem), 25rem);
    max-width: none;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 50px var(--vg-velo);
}
.vg-dialogo::backdrop { background: var(--vg-velo); }
.vg-caja {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 0.75rem 0.9rem;
}
/* La cabecera se queda pegada arriba: al 200 % de zoom el diálogo puede
   necesitar desplazarse, y el «Cerrar» no puede irse con el scroll. */
.vg-cab {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -0.75rem;
    padding: 0.75rem;
    background: var(--card);
}
.vg-titulo {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vg-cerrar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--muted);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.vg-cerrar:hover { border-color: var(--accent); }
.vg-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
    border-radius: 0.6rem;
    background: var(--bg);
    object-fit: contain;
}
.vg-nota,
.vg-directo {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}
.vg-dialogo a { color: var(--accent); text-underline-offset: 0.18em; }
/* Aviso de error: ámbar = «aviso» del conjunto cerrado de estados, y además
   con PALABRAS («No se pudo cargar»): el color no va solo (R3). */
.vg-error {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--accent);
    border-radius: 0.4rem;
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
}
.vg-error[hidden], .vg-nota[hidden], .vg-directo[hidden] { display: none; }

/* --- Foco visible en TODO lo interactivo nuevo (CL-V 5) --------------------- */
.vg-disparador:focus-visible,
.vg-tarjeta:focus-visible,
.ppp-asis-op.vg-asis-op:focus-visible,
.vg-cerrar:focus-visible,
.vg-video:focus-visible,
.vg-dialogo a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

@media print {
    .vg-linea, .vg-tarjeta, .vg-asis-op, .vg-dialogo { display: none !important; }
}