/* =========================================================================
   VISTAPRO TV · vod-player.css · VOD Cinema Controls
   -------------------------------------------------------------------------
   CSS propio inspirado en patrones de reproductores de streaming:
   - controles mínimos, sin botones enormes tipo app infantil
   - barra de progreso protagonista
   - foco limpio para Android TV
   - degradado cinematográfico arriba/abajo
   ========================================================================= */

#vpVideoControls.vp-video-controls {
  --vp-vod-red: var(--vp-progress, #00ff85);
  --vp-vod-white: #ffffff;
  --vp-vod-muted: rgba(255, 255, 255, .68);
  --vp-vod-soft: rgba(255, 255, 255, .18);
  --vp-vod-focus: rgba(255, 255, 255, .92);
  --vp-vod-shadow: rgba(0, 0, 0, .72);

  /* Botones: un único sistema de tamaños para que todo respire igual */
  --vp-btn: 42px;           /* caja cuadrada estándar (fila inferior + volver) */
  --vp-btn-gap: 10px;       /* separación entre botones de la fila */
  --vp-btn-icon: 16px;      /* tamaño base de icono, se ajusta por glifo */
  --vp-btn-bg: rgba(20, 20, 20, .38);
  --vp-btn-bg-hover: rgba(20, 20, 20, .58);
  --vp-btn-glow: rgba(255, 255, 255, .55);
  --vp-btn-ease: cubic-bezier(.4, 0, .2, 1);

  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--vp-vod-white);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.44) 12%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.06) 57%, rgba(0,0,0,.52) 76%, rgba(0,0,0,.96) 100%) !important;
  transition: opacity .14s ease;
}

#vpVideoControls.vp-video-controls.visible {
  opacity: 1;
  pointer-events: auto;
}

#vpVideoControls,
#vpVideoControls * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#vpVideoControls button {
  font-family: "Roboto", "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif;
}

/* =========================
   CABECERA: simple, sin caja
   ========================= */
#vpVideoControls .vp-vod-top {
  position: absolute !important;
  left: 64px !important;
  top: 42px !important;
  right: 64px !important;
  height: 78px !important;
  display: grid !important;
  grid-template-columns: var(--vp-btn) minmax(0, 1fr) var(--vp-btn) !important;
  gap: 24px !important;
  align-items: center !important;
  pointer-events: auto;
}

#vpVideoControls .vp-video-title {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 40px !important;
  line-height: 1.04 !important;
  font-weight: 760 !important;
  letter-spacing: -.9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 16px 46px var(--vp-vod-shadow) !important;
}

#vpVideoControls .vp-video-subtitle {
  position: absolute !important;
  left: 146px !important;
  top: 112px !important;
  width: min(1120px, calc(100vw - 292px)) !important;
  max-width: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 20px !important;
  line-height: 1.22 !important;
  font-weight: 560 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 14px 38px var(--vp-vod-shadow) !important;
  backdrop-filter: none !important;
}

#vpVideoControls .vp-video-subtitle:empty {
  display: none !important;
}

/* =========================
   BOTONES: sistema unificado
   ------------------------------------------------------------
   Una sola caja cuadrada (--vp-btn) para TODOS los controles
   secundarios (volver, -10, siguiente, reiniciar). El botón de
   play/pausa de la fila usa la misma caja para no romper el
   ritmo visual; el círculo grande central es la única excepción
   deliberada (es la acción primaria flotando sobre el vídeo).
   ========================= */
#vpVideoControls .vp-video-btn,
#vpVideoControls .vp-video-big {
  position: relative !important;
  width: var(--vp-btn) !important;
  height: var(--vp-btn) !important;
  min-width: var(--vp-btn) !important;
  max-width: var(--vp-btn) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--vp-btn-bg) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  opacity: 1;
  transform-origin: center center;
  transform: scale(1) translateZ(0);
  transition: background .16s var(--vp-btn-ease), transform .16s var(--vp-btn-ease), box-shadow .16s var(--vp-btn-ease);
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#vpVideoControls .vp-video-btn > *,
#vpVideoControls .vp-video-big > * {
  display: none !important;
}

/* El icono vive en ::before, centrado por el flex del botón.
   Cada glifo de Font Awesome tiene un peso óptico distinto, así
   que el tamaño se afina por icono más abajo. */
#vpVideoControls .vp-video-btn::before,
#vpVideoControls .vp-video-big::before {
  display: block;
  color: currentColor;
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  font-weight: 900 !important;
  font-size: var(--vp-btn-icon);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

/* Foco/hover: nada de anillo cuadrado. Solo brillo + zoom centrado,
   ya que width = height y transform-origin = center garantizan que
   el zoom no se desplaza hacia ningún lado. */
#vpVideoControls .vp-video-btn:hover,
#vpVideoControls .vp-video-btn.is-active,
#vpVideoControls .vp-video-btn:focus,
#vpVideoControls .vp-video-btn:focus-visible,
#vpVideoControls .vp-video-big:hover,
#vpVideoControls .vp-video-big.is-active,
#vpVideoControls .vp-video-big:focus,
#vpVideoControls .vp-video-big:focus-visible {
  background: var(--vp-btn-bg-hover) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 22px var(--vp-btn-glow), 0 10px 24px rgba(0,0,0,.4) !important;
  transform: scale(1.12) translateZ(0);
}

#vpVideoControls .vp-video-btn:active {
  transform: scale(.96) translateZ(0);
}

/* --- Volver --- */
#vpVideoControls .vp-vod-top-back::before {
  content: "\f060";
  font-size: 17px;
  transform: translateX(-1px); /* la flecha visualmente pesa a la derecha */
}

/* --- Retroceder / avanzar 10s --- */
#vpVideoControls #vpVideoBack10::before,
#vpVideoControls #vpVideoForward10::before {
  font-size: 17px;
}

#vpVideoControls #vpVideoBack10::before { content: "\f2ea"; }
#vpVideoControls #vpVideoForward10::before { content: "\f2f9"; }

#vpVideoControls #vpVideoBack10::after,
#vpVideoControls #vpVideoForward10::after {
  content: "10";
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  color: currentColor;
  font-family: "Roboto", "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.3px;
  pointer-events: none;
}

/* --- Play / pausa (fila inferior y botón central) ---
   Se dibujan como formas CSS puras (barras / triángulo) en vez de
   usar el glifo de Font Awesome: así el centrado es 100% geométrico
   -flex centra un bloque con ancho/alto fijos- y no depende de cómo
   esa fuente concreta dibuja el icono dentro de su caja, que es lo
   que provocaba el desplazamiento hacia arriba. */
#vpVideoControls #vpVideoPlayBtn::before,
#vpVideoControls .vp-video-big::before {
  content: "" !important;
  font-family: initial !important;
  display: block !important;
  border-radius: 1px;
}

/* Pausa: dos barras verticales idénticas, centradas por el flex */
#vpVideoControls #vpVideoPlayBtn::before {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) no-repeat left center / 3.5px 100%,
    linear-gradient(currentColor, currentColor) no-repeat right center / 3.5px 100%;
}

/* Play: triángulo vía clip-path, con un pequeño ajuste óptico
   (el centroide visual de un triángulo no coincide con el centro
   geométrico de su caja, así que se nudge unos px a la derecha) */
#vpVideoControls.is-paused #vpVideoPlayBtn::before {
  width: 13px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(1.5px);
}

#vpVideoControls .vp-video-big::before {
  width: 22px;
  height: 26px;
  background:
    linear-gradient(currentColor, currentColor) no-repeat left center / 6px 100%,
    linear-gradient(currentColor, currentColor) no-repeat right center / 6px 100%;
}

#vpVideoControls.is-paused .vp-video-big::before {
  width: 24px;
  height: 28px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(3px);
}

/* --- Siguiente --- */
#vpVideoControls #vpVideoNext::before {
  content: "\f051";
  font-size: 16px;
}

/* --- Reiniciar: icono propio (antes duplicaba el de avanzar 10s) --- */
#vpVideoControls #vpVideoRestart::before {
  content: "\f021"; /* arrows-rotate: distinto del icono de avanzar 10s */
  font-size: 15px;
}

#vpVideoControls .vp-vod-skip,
#vpVideoControls .vp-vod-skip b,
#vpVideoControls .vp-vod-skip-number,
#vpVideoControls .vp-vod-btn-label,
#vpVideoControls .vp-video-help {
  display: none !important;
}

/* Botón oculto/no aplicable: colapsa sin romper la alineación
   del resto (la fila usa columnas de ancho fijo, así que el hueco
   se queda quieto y nada "salta" al aparecer/desaparecer). */
#vpVideoControls .vp-video-btn.is-unavailable {
  opacity: 0 !important;
  transform: scale(.7) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

#vpVideoControls .vp-video-btn[style*="display: none"]:not(#vpVideoNext) {
  display: none !important;
}

/* =========================
   BOTÓN CENTRAL: solo pausa
   ========================= */
#vpVideoControls .vp-video-center {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

#vpVideoControls .vp-video-big {
  width: 84px !important;
  min-width: 84px !important;
  height: 84px !important;
  max-width: 84px !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,.30) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.46) !important;
  opacity: 0;
  transform: scale(.88);
}

#vpVideoControls:not(.is-paused) .vp-video-big {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(.88) !important;
}

#vpVideoControls.is-paused .vp-video-big,
#vpVideoControls .vp-video-big.is-active,
#vpVideoControls .vp-video-big:focus,
#vpVideoControls .vp-video-big:focus-visible {
  opacity: .96 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

#vpVideoControls .vp-video-big.is-active,
#vpVideoControls .vp-video-big:focus,
#vpVideoControls .vp-video-big:focus-visible {
  background: rgba(0,0,0,.40) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 30px var(--vp-btn-glow), 0 22px 70px rgba(0,0,0,.5) !important;
  transform: scale(1.1) !important;
}

/* =========================
   PARTE INFERIOR: barra protagonista
   ========================= */
#vpVideoControls .vp-video-bottom {
  position: absolute !important;
  left: 92px !important;
  right: 92px !important;
  bottom: 40px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}

#vpVideoControls .vp-video-progress {
  position: relative !important;
  width: 100% !important;
  height: 5px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  outline: 0 !important;
  background: rgba(255,255,255,.30) !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: translateY(0);
  transition: height .11s ease, background .11s ease, transform .11s ease;
}

#vpVideoControls .vp-video-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  bottom: -28px;
  border-radius: 999px;
}

#vpVideoControls .vp-video-progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.38);
  opacity: .42;
  pointer-events: none;
}

#vpVideoControls .vp-video-progress.is-active,
#vpVideoControls .vp-video-progress:focus,
#vpVideoControls .vp-video-progress:focus-visible {
  height: 9px !important;
  background: rgba(255,255,255,.42) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18) !important;
}

#vpVideoControls #vpVideoProgressBar {
  position: relative !important;
  z-index: 2;
  width: 0%;
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--vp-vod-red) !important;
  box-shadow: none !important;
}

#vpVideoControls #vpVideoProgressBar::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--vp-vod-red);
  box-shadow: 0 8px 20px rgba(0,0,0,.48);
  opacity: 0;
  transform: translateY(-50%) scale(.76);
  transition: opacity .11s ease, transform .11s ease;
}

#vpVideoControls .vp-video-progress.is-active #vpVideoProgressBar::after,
#vpVideoControls .vp-video-progress:focus #vpVideoProgressBar::after,
#vpVideoControls .vp-video-progress:focus-visible #vpVideoProgressBar::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

#vpVideoControls .vp-video-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 18px !important;
}

#vpVideoControls .vp-video-left {
  grid-column: 1 !important;
  justify-self: start !important;
  width: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, var(--vp-btn)) !important;
  grid-template-rows: var(--vp-btn) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: center !important;
  column-gap: var(--vp-btn-gap) !important;
  min-width: 0 !important;
}

/* Las cinco cajas de la fila son idénticas: mismo tamaño,
   mismo radio, mismo fondo. El play/pausa ya no es "especial";
   es simplemente el control del centro. */
#vpVideoControls .vp-video-left .vp-video-btn.main::after {
  display: none !important;
}

#vpVideoControls .vp-video-time {
  grid-column: 2 !important;
  justify-self: end !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.70) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 560 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  text-shadow: 0 12px 34px var(--vp-vod-shadow) !important;
}

#vpVideoControls #vpVideoCurrent {
  color: rgba(255,255,255,.96);
}

#vpVideoControls #vpVideoDuration {
  color: rgba(255,255,255,.62);
}

/* =========================
   Modo ligero
   ========================= */
html.lite #vpVideoControls,
html.lite #vpVideoControls *,
html.lite #vpVideoControls *::before,
html.lite #vpVideoControls *::after {
  transition: none !important;
  animation: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html.lite-max #vpVideoControls,
html.lite-max #vpVideoControls *,
html.lite-max #vpVideoControls *::before,
html.lite-max #vpVideoControls *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}