/* ==========================================
   Modales de video (YouTube IFrame Player API)
   Qué cubre: Video de introducción de personajes (intro.js) y video de la Misión 0 (ciudad.js).
   Ver js/nucleo/video-youtube.js.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 7 de 12).
   Secciones:
     · MODALES DE VIDEO (YouTube IFrame Player API)
   ========================================== */

/* ==========================================
   MODALES DE VIDEO (YouTube IFrame Player API)
   Video de introducción de personajes (intro.js) y video de la Misión 0 /
   Presaberes (ciudad.js) — ver js/nucleo/video-youtube.js para el detalle de cómo
   se crea el reproductor. El primero no lleva .btn-cerrar en su header
   (no se puede saltar); el segundo (Presaberes) sí lo lleva: un ✕ que
   detiene el video y vuelve al mapa (ver mostrarVideoPresaberes en ciudad.js).
   ========================================== */

.modal-video {
  max-width: 900px;
  width: 92vw;
}

/* Caja de proporción 16:9 — el reproductor de YouTube (un <iframe> que la
   API inserta dentro) se estira a ocupar todo este recuadro. */
.video-responsive {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 10px;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-aviso {
  margin: 0.8rem 0 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--atx-text-muted);
}

/* TEMPORAL: botón "Continuar" mientras los videos de YouTube están privados.
   Quitar junto con sus botones de index.html cuando los videos estén disponibles. */
.btn-video-temporal {
  display: block;
  margin: 0.8rem auto 0;
  padding: 0.5rem 1.4rem;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffffff;
  background: rgba(16, 185, 129, 0.9);
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.btn-video-temporal:hover {
  background: rgb(16, 185, 129);
}