/* =====================================================================
   COCUYO APP — reproductor (css/reproductor.css)
   ---------------------------------------------------------------------
   Ideas de iQIYI (24-sep-2026): series 16:9 enteras con bandas negras,
   modo apaisado (candado, paneles a la derecha, controles que se esconden),
   gestos (±10 s y 2x), «Sigues desde…», tarjeta «Siguiente», capa de
   «No se pudo cargar» y el clip de Para ti con «Ver la serie».
   Ronda 2: subtítulos por idioma (.vs-subs y el botón «Subtítulos»).
   Lo usa js/pantallas/_visor.js. Va DESPUÉS de dramas.css (index.html):
   aquí solo se añade o se ajusta, la base del visor sigue en dramas.css.
   Diseño propio en negro y lima; nada copiado de iQIYI.
   Derecha a izquierda (ronda 3): la línea del tiempo del vídeo NO se
   voltea. Barras, tiempos, los botones de abajo del apaisado, los círculos
   −10/+10 y «Sigues desde…»/«Siguiente» del apaisado se quedan donde están
   (físicos, left/right). Lo demás sigue al idioma: título, riel, textos y,
   en apaisado, la barra de arriba, el candado y el panel lateral (que en
   RTL sale por la izquierda; ver el final).
   ===================================================================== */

/* ---------- Formato: una serie 16:9 se ve ENTERA, nunca recortada ---------- */
.vs-item[data-formato="horizontal"] .vs-video,
.vs-item[data-formato="horizontal"] .vs-img { object-fit: contain; }
/* El «acercar» lento de los pósteres recortaría la imagen 16:9. */
.vs-item[data-formato="horizontal"] .vs-img { animation: none !important; transform: none; }

/* Botón «Pantalla completa», justo debajo del cuadro 16:9 (el vídeo mide
   el ancho de la app, como mucho 480 px: medio alto = ancho × 9/32). */
.vs-pantalla {
  position: absolute; z-index: 5; left: 50%; top: calc(50% + min(28.125vw, 135px) + 14px); transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; padding-block: 7px; padding-inline: 11px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--texto); white-space: nowrap;
  background: var(--escarcha); border: 1px solid var(--escarcha-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vs-pantalla .ic { width: 18px; height: 18px; color: var(--lima); }
.vs-item[data-formato="horizontal"][data-estado="listo"][data-con-video] .vs-pantalla { display: inline-flex; }

/* ---------- Gestos ---------- */
/* Deslizar en vertical sigue funcionando; sin menú ni zoom al mantener pulsado. */
.vs-toque { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; }

.vs-salto {
  position: absolute; z-index: 2; top: 50%; width: 88px; height: 88px; margin-top: -44px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45);
  color: var(--texto); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s; pointer-events: none;
}
/* Físicos: la barra del vídeo va de izquierda a derecha también en RTL, así
   que tocar a la izquierda es «atrás» (ver zonaToque en _visor.js). */
.vs-salto[data-salto="-1"] { left: 9%; }
.vs-salto[data-salto="1"] { right: 9%; }
.vs-salto.ver { opacity: 1; transform: none; }

.vs-rapido {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--seg-arriba) + 112px); transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); font-size: 13px; font-weight: 700; pointer-events: none; direction: ltr;   /* «» 2x» como el vídeo */
}
.vs-rapido .ic { width: 16px; height: 16px; color: var(--lima); }
.vs-item[data-rapido] .vs-rapido { display: inline-flex; }

/* ---------- «Sigues desde 3:10 · Desde el principio» ---------- */
.vs-retomar {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--seg-arriba) + 64px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); padding-block: 4px; padding-inline: 14px 4px;
  border-radius: 999px; white-space: nowrap; font-size: 13px; color: var(--texto);
  background: rgba(18, 18, 18, .88); border: 1px solid var(--escarcha-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: vsRetomar .25s ease-out;
}
.vs-retomar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* frase larga: con puntos suspensivos */
.vs-retomar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-retomar i { font-style: normal; color: var(--texto3); }
.vs-retomar button { padding: 7px 11px; border-radius: 999px; color: var(--lima); font-weight: 600; }
@keyframes vsRetomar { from { opacity: 0; transform: translate(-50%, -6px); } }

/* ---------- Tarjeta «Siguiente: EP.n» (nunca pasa sola) ---------- */
.vs-sig {
  display: flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; margin-bottom: 10px; padding: 3px;
  border-radius: 12px; background: rgba(18, 18, 18, .88); border: 1px solid var(--escarcha-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: vsSube .25s ease-out;
}
.vs-sig-ir {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 8px; padding-inline: 10px 13px; border-radius: 9px;
  background: var(--lima); color: var(--sobre-acento); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.vs-sig-ir span { overflow: hidden; text-overflow: ellipsis; }
.vs-sig-ir .ic { width: 18px; height: 18px; }
.vs-sig-cerrar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--texto2); }
.vs-sig-cerrar .ic { width: 18px; height: 18px; }
@keyframes vsSube { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Renovar la firma y «No se pudo cargar · Reintentar» ---------- */
.vs-item[data-renovando] .vs-pausa { opacity: 1; background: none; }
.vs-item[data-renovando] .vs-pausa .ic { display: none; }
.vs-item[data-renovando] .vs-pausa::after {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--texto); animation: girar .8s linear infinite;
}
.vs-fallo { position: absolute; inset: 0; z-index: 7; display: none; place-items: center; padding: 24px; background: rgba(0, 0, 0, .74); text-align: center; }
.vs-fallo > div { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 270px; }
.vs-fallo .ic { width: 34px; height: 34px; color: var(--texto2); }
.vs-fallo p { font-size: 16px; font-weight: 600; }
.vs-fallo small { color: var(--texto3); font-size: 13px; }
.vs-fallo .btn-principal { margin-top: 8px; }
.vs-item[data-estado="fallo"] .vs-fallo { display: grid; }

/* ---------- Subtítulos (ronda 2) ----------
   El visor pinta las frases en .vs-subs (js/video.js → ponerSubtitulos con
   capa), así nunca quedan debajo de sus botones: en los minidramas, justo
   encima del título (--vs-info-alto lo mide el visor); en una serie 16:9,
   dentro de la imagen, abajo; en apaisado, abajo, y suben con los controles. */
.vs-subs {
  position: absolute; z-index: 3; inset-inline: 14px 70px;
  bottom: calc(58px + var(--vs-info-alto, 64px) + 10px);
  display: flex; justify-content: center; text-align: center; pointer-events: none;
}
.tab-negra .vs-subs { bottom: calc(50px + var(--vs-info-alto, 26px) + 10px); }
.vs-subs span {
  max-width: 100%; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .64);
  color: var(--texto); font-size: 16px; font-weight: 500; line-height: 1.38; white-space: pre-line;
  overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.vs-item:not([data-estado="listo"]) .vs-subs { display: none; }
/* 16:9 en vertical: dentro de la imagen, abajo, y centradas sin pasar por
   debajo de los botones del riel (a la derecha, ~64 px). */
.vs-item[data-formato="horizontal"] .vs-subs {
  left: 64px; right: 64px; bottom: auto;
  top: calc(50% + min(28.125vw, 135px) - 8px); transform: translateY(-100%);
}
.vs-item[data-formato="horizontal"] .vs-subs span { font-size: 14px; padding: 2px 7px; }
/* ([data-formato] para ganar a la regla 16:9 de arriba; centradas: físico) */
.vs-apaisado .vs-item[data-formato] .vs-subs {
  left: 50%; right: auto; top: auto; width: min(86%, 960px); transform: translateX(-50%);
  bottom: max(22px, env(safe-area-inset-bottom)); transition: bottom .2s;
}
.vs-apaisado .vs-item[data-formato] .vs-subs span { font-size: 18px; padding: 3px 10px; }
/* Con los controles a la vista, por encima de la barra; con un panel abierto
   (a la derecha; en RTL a la izquierda, ver el final), en lo que queda libre. */
.vs-apaisado .vs-item[data-formato]:has(.vs-land.mostrar) .vs-subs { bottom: 112px; }
.vs-apaisado .vs-item[data-formato]:has(.vs-land.con-panel) .vs-subs { left: 26%; width: 48%; }

/* Si alguna vez las pinta el propio navegador (sin capa): legibles igual. */
video::cue { color: var(--texto, #f8fafc); background: rgba(0, 0, 0, .64); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); line-height: 1.38; }

/* Botón «Subtítulos» del riel (Para ti) y del apaisado: encendido, trazo lima
   (sin relleno: el de «Guardado» taparía las letras CC). */
.vs-riel [data-cc][aria-pressed="true"] .ic, .vs-land-btn[data-l="subtitulos"][aria-pressed="true"] .ic { fill: none; stroke: var(--lima); color: var(--lima); }

/* ---------- Para ti: clip vertical de una serie 16:9 ---------- */
.vs-info h2 .vs-etiqueta {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 5px; vertical-align: 2px;
  background: var(--lima); color: var(--sobre-acento); font-size: 11px; font-weight: 700;
}
.vs-ep-serie .ic:first-child { color: var(--lima); }
.vs-ep-serie b { color: var(--lima); font-weight: 600; }

/* Serie 16:9 que aún no tiene episodios: su portada apaisada entera. */
.db-ficha-pronto.h16 > img { aspect-ratio: 16 / 9; margin-top: calc(48px + var(--seg-arriba)); }
.db-ficha-pronto.h16 .db-ficha-pronto-info { margin-top: -36px; padding-top: 52px; background: linear-gradient(transparent, #000 52px); }

/* =====================================================================
   MODO APAISADO (series 16:9)
   El visor pasa a ocupar toda la pantalla (fixed) y solo se ve la
   diapositiva activa. Si el móvil no deja fijar la orientación, se gira
   con CSS (.vs-girado).
   ===================================================================== */
body.vs-apaisado-activo .vs-cab { display: none; }
.vs-apaisado .vs[data-vs] {
  position: fixed; inset: 0; z-index: 70; width: auto; height: auto; max-width: none;
  overflow: hidden; scroll-snap-type: none; background: #000;
}
.vs-girado .vs[data-vs] {
  inset: auto; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw;
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}
.vs-apaisado .vs-riel, .vs-apaisado .vs-info, .vs-apaisado .vs-barra, .vs-apaisado .vs-ep,
.vs-apaisado .vs-pantalla, .vs-apaisado .vs-nota, .vs-apaisado .vs-sonido { display: none !important; }
.vs-apaisado .vs-item::after { display: none; }
.vs-apaisado .vs-rapido { top: 64px; }
.vs-apaisado .vs-retomar {
  top: auto; bottom: 104px; left: max(20px, env(safe-area-inset-left)); transform: none; animation: none;
}

/* Capa de controles: no recoge toques salvo en sus botones (el resto va a .vs-toque). */
.vs-land { position: absolute; inset: 0; z-index: 8; pointer-events: none; color: var(--texto); }
.vs-land button, .vs-land input { pointer-events: auto; }
.vs-land-arriba, .vs-land-abajo, .vs-land-candado { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.vs-land.mostrar .vs-land-arriba, .vs-land.mostrar .vs-land-abajo, .vs-land.mostrar .vs-land-candado { opacity: 1; visibility: visible; }
.vs-land.bloqueado .vs-land-arriba, .vs-land.bloqueado .vs-land-abajo, .vs-land.bloqueado .vs-land-sig { display: none !important; }

.vs-land-arriba {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px;
  padding: 8px max(14px, env(safe-area-inset-right)) 32px max(8px, env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, .72), transparent);
}
.vs-land-titulo { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-land-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.vs-land-ic .ic { width: 24px; height: 24px; }

/* Candado: en RTL, a la derecha (ver el final). */
.vs-land-candado {
  position: absolute; top: 50%; left: max(18px, env(safe-area-inset-left)); width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45);
}
.vs-land-candado .ic { width: 22px; height: 22px; }
.vs-land-candado[aria-pressed="true"] { color: var(--lima); background: rgba(0, 0, 0, .6); }

.vs-land-abajo {
  position: absolute; left: 0; right: 0; bottom: 0; direction: ltr;
  padding: 36px max(18px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
}
.vs-land-tiempo { display: flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.vs-land-tiempo .vs-rango { flex: 1; accent-color: var(--lima); }
.vs-land-botones { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.vs-land-hueco { flex: 1; }
.vs-land-btn { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 22px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.vs-land-btn .ic { width: 22px; height: 22px; }
.vs-land-btn:active, .vs-land-ic:active { background: rgba(255, 255, 255, .12); }

/* La tarjeta «Siguiente» se queda aunque se escondan los controles (física, como la fila de abajo). */
.vs-land-sig { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: 108px; margin: 0; pointer-events: auto; transition: bottom .2s; }
.vs-land:not(.mostrar) .vs-land-sig { bottom: max(18px, env(safe-area-inset-bottom)); }

/* Paneles laterales: entran por la derecha (en RTL, por la izquierda) y el vídeo sigue. */
.vs-land-panel {
  position: absolute; top: 0; inset-inline-end: 0; bottom: 0; z-index: 2; width: min(380px, 48%);
  display: flex; flex-direction: column; padding: 12px max(14px, env(safe-area-inset-right)) 12px 16px;
  background: rgba(8, 8, 8, .94); border-inline-start: 1px solid var(--escarcha-borde); color: var(--texto);
  transform: translateX(100%); visibility: hidden; pointer-events: auto;
  transition: transform .22s ease-out, visibility 0s linear .22s;
}
.vs-land.con-panel .vs-land-panel { transform: none; visibility: visible; transition: transform .22s ease-out; }
.vs-panel-cab { display: flex; align-items: center; gap: 8px; }
.vs-panel-cab h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-panel-cerrar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--texto2); }
.vs-panel-cerrar .ic { width: 20px; height: 20px; }
.vs-panel-sub { margin: 0 0 10px; color: var(--texto3); font-size: 12px; }
.vs-panel-carga { display: grid; place-items: center; padding: 30px 0; }
.vs-panel-vacio { padding: 20px 0; color: var(--texto2); font-size: 13px; }

.vs-panel-lista { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.vs-panel-lista::-webkit-scrollbar { display: none; }
.vs-panel-ep { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; text-align: start; }
.vs-panel-ep:active { background: rgba(255, 255, 255, .06); }
.vs-panel-ep.actual { background: var(--acento-suave); }
.vs-panel-ep[aria-disabled="true"] { opacity: .45; }
.vs-panel-mini { position: relative; flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--sup2); }
.vs-panel-mini img { width: 100%; height: 100%; object-fit: cover; }
.vs-panel-mini i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: var(--lima); }
.vs-panel-mini i .ic { width: 20px; height: 20px; }
.vs-panel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vs-panel-txt b { font-size: 13px; font-weight: 600; }
.vs-panel-ep.actual .vs-panel-txt b { color: var(--lima); }
.vs-panel-txt span { font-size: 12px; color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-panel-txt small { font-size: 11px; color: var(--texto3); }

.vs-marca {
  flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 600; background: var(--sup3); color: var(--texto2);
}
.vs-marca .ic { width: 12px; height: 12px; }
.vs-marca-gratis, .vs-marca-desbloqueado { background: var(--acento-suave); color: var(--lima); }
.vs-marca-vip { background: var(--verde-profundo); color: var(--lima-clara); }

.vs-panel-vel { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
/* Hasta ~60 idiomas: la lista se desplaza dentro del panel. */
.vs-panel-cc { position: relative; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-width: none; }
.vs-panel-cc::-webkit-scrollbar { display: none; }
.vs-panel-vel button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 12px;
  border-radius: 10px; font-size: 15px;
}
.vs-panel-vel button .ic { width: 20px; height: 20px; color: var(--lima); visibility: hidden; }
.vs-panel-vel button[aria-pressed="true"] { background: var(--acento-suave); color: var(--lima); }
.vs-panel-vel button[aria-pressed="true"] .ic { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .vs-retomar, .vs-sig { animation: none; }
  .vs-land-panel, .vs-land-sig, .vs-salto { transition: none; }
}

/* ---------- Derecha a izquierda (ar, he, fa, ur) ---------- */
/* La barra de arriba del apaisado se voltea (atrás a la derecha); cada lado
   conserva su margen de seguridad físico (muesca). */
[dir="rtl"] .vs-land-arriba { padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
/* Dentro de la fila de abajo (izquierda a derecha) los textos siguen en su idioma. */
[dir="rtl"] .vs-land-btn span { direction: rtl; }
/* Candado a la derecha y panel lateral por la izquierda, cada uno con su
   margen de seguridad físico; los subtítulos, en lo que deja libre el panel. */
[dir="rtl"] .vs-land-candado { left: auto; right: max(18px, env(safe-area-inset-right)); }
[dir="rtl"] .vs-land-panel { transform: translateX(-100%); padding-left: max(14px, env(safe-area-inset-left)); padding-right: 16px; }
[dir="rtl"] .vs-apaisado .vs-item[data-formato]:has(.vs-land.con-panel) .vs-subs { left: 74%; }