/* ══════════════════════════════════════════════════════════════════════
   QVATUBE — Reproductor
   ══════════════════════════════════════════════════════════════════════ */

.player-overlay {
  position: fixed; inset: 0; z-index: 600; background: #000;
  display: none; align-items: center; justify-content: center;
}
.player-overlay.show { display: flex; }
.player-overlay video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; background: #000; }

.player-close {
  position: absolute; top: max(env(safe-area-inset-top, 0px), 14px); right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
  border: 1px solid rgba(255,255,255,.15); font-size: 17px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.player-close:active { transform: scale(.9); }

/* ── Televisión en vivo (canales embebidos, ver openTvPlayer en app.js) ──
   Mismo lenguaje visual que .player-overlay (fondo negro, botón cerrar
   idéntico via .player-close), pero con un iframe en vez de <video> —
   el wrap usa position:absolute;inset:0 en vez del truco de
   padding-bottom que usa teveo.cu en su propio código de embed, porque
   acá el contenedor ya ocupa toda la pantalla (no hace falta simular un
   aspect-ratio dentro de un layout de página normal). */
.tv-overlay {
  position: fixed; inset: 0; z-index: 600; background: #000;
  display: none; align-items: center; justify-content: center;
}
.tv-overlay.show { display: flex; }
.tv-iframe-wrap { position: relative; width: 100%; height: 100%; }
.tv-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Canales HLS (campo `hls` en TV_CHANNELS): <video> en vez de iframe, más un
   aviso con "Reintentar" si el canal no carga. z-index 1: el botón cerrar
   (.player-close, z-index 2) tiene que seguir por encima del aviso. */
/* Encabezado de cada grupo de la sección Televisión (Canales Cubanos, Canales
   Internacionales...). El primero no lleva margen arriba. */
.tv-group-title {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .4px;
  margin: 26px 0 12px; color: var(--text);
}
.tv-group-title:first-of-type { margin-top: 0; }
.tv-iframe-wrap video.tv-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.tv-msg {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
  text-align: center; background: rgba(0,0,0,.82); color: var(--text); font-size: 14px; line-height: 1.5;
}
.tv-msg[hidden] { display: none; }
.tv-msg .auth-btn { width: auto; padding: 10px 24px; }

/* ── Tarjeta "Siguiente episodio" (auto-next con countdown cancelable) ──
   Flotante sobre el <video>, esquina inferior derecha en desktop y
   ancho completo pegado abajo en pantallas chicas — mismo criterio que
   el resto de overlays flotantes del reproductor (ad-box, modal-box):
   se apoya en los tokens de acento del sitio, no en colores propios. */
.up-next-box {
  position: absolute; z-index: 3; right: 16px; bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  left: 16px; max-width: 360px; margin-left: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none; flex-direction: column; gap: 12px;
  backdrop-filter: blur(6px);
}
.up-next-box.show { display: flex; animation: upNextIn .25s ease-out; }
@keyframes upNextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.up-next-info { display: flex; gap: 10px; align-items: center; }
.up-next-poster { width: 46px; height: 66px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--surface-2); }
.up-next-label { font-size: 11.5px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.up-next-label span { font-variant-numeric: tabular-nums; }
.up-next-title { font-size: 13.5px; color: var(--text); font-weight: 600; margin-top: 3px; line-height: 1.3; }

.up-next-actions { display: flex; gap: 8px; }
.up-next-actions .auth-btn { flex: 1; padding: 9px 10px; font-size: 13px; }

/* Botones de acción del panel de info (Reproducir + Descargar) */
.info-actions { display: flex; gap: 10px; margin-top: 16px; }
.info-actions button { flex: 1; }

/* ── Modal flotante: "alcanzaste el límite de tu plan" ────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 700; background: rgba(6,5,4,.78);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 22px; width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ── Overlay del reproductor de anuncios (VAST 3.0 vía IMA3) ───────────
   z-index por encima del modal-overlay (700): el anuncio se dispara
   DESDE el modal de "límite alcanzado", así que tiene que quedar por
   encima de él, no debajo. Sin este bloque el <div id="adOverlay">
   no tenía position/z-index/display, así que el video se reproducía
   (audio incluido) completamente invisible detrás del modal — el bug
   reportado en agosto 2026. */
.ad-overlay {
  position: fixed; inset: 0; z-index: 800; background: rgba(6,5,4,.92);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.ad-overlay.show { display: flex; }
.ad-box {
  width: 100%; max-width: 420px; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
#adPlayerContainer {
  width: 100%; aspect-ratio: 16 / 9; background: #000; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
}
#adVideoEl { width: 100%; height: 100%; object-fit: contain; background: #000; }
#adStatusText { color: var(--text-2); font-size: 13px; text-align: center; margin: 0; }
#adCancelBtn {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  padding: 9px 20px; border-radius: var(--r-md); font-size: 13.5px; cursor: pointer;
}
#adCancelBtn:active { transform: scale(.96); }