/* ==================================================================
 * Ftop Video Player
 * Miniatura + modal de vídeo a pantalla completa con Plyr.
 * Independiente de Salient/WPBakery. Comentarios en español.
 *
 * La personalización de Plyr se hace, siempre que es posible, a través de
 * sus propias variables CSS (sin !important). Solo se recurre a !important
 * o a selectores de mayor especificidad donde es estrictamente necesario
 * para sobrescribir reglas internas de Plyr.
 * ================================================================== */

:root {
	/* --- Personalización global (ajustables en un único sitio) --- */
	--ftop-accent: #000000;              /* Color del progreso reproducido. */
	--ftop-modal-bg: #000000;            /* Fondo del modal. */
	--ftop-play-bg: rgba(0, 0, 0, 0.55); /* Fondo del botón play de la miniatura. */
	--ftop-play-icon: #ffffff;           /* Color del triángulo de play. */
	--ftop-play-size: 60px;              /* Tamaño del botón play en desktop. */
	--ftop-play-size-mobile: 60px;       /* Tamaño del botón play en móvil. */
	--ftop-overlaid-nudge: 0%;           /* Triángulo del botón central overlaid: 0% = sin desplazamiento (posición por defecto de Plyr). Afinable. */
}

/* ------------------------------------------------------------------
 * 1) Miniatura (estado inicial)
 * ---------------------------------------------------------------- */
.ftop-video {
	margin: 0;
	width: 100%;
}

.ftop-video__thumb {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;               /* Elimina el hueco de línea base que dejaría una */
	line-height: 0;             /* franja negra bajo la imagen (caja de línea). */
	cursor: pointer;            /* Cursor pointer sobre toda la miniatura. */
	overflow: hidden;          /* Recorta el +1px del póster (cubre el ancho real). */
	border: 0;
	-webkit-tap-highlight-color: transparent;
	/* Sin background negro: el póster cubre el contenedor, así que ningún negro
	   puede asomar por ningún borde (eliminamos la fuente, no la disimulamos). */
}

/* CAUSA RAÍZ (confirmada con DevTools): el póster es un <img> inline, lo que
   genera el "gap fantasma" bajo la línea base y hace que .ftop-video__thumb mida
   ~15px más que la imagen (franja negra). La solución es forzar display:block en
   la imagen. El modo Material de Salient (body.material) reaplica estilos a las
   imágenes con selectores muy específicos —incluyen ID, p. ej. #ajax-content-wrap—
   que ninguna combinación de clases puede superar; por eso aquí el !important sobre
   `display` es ESTRICTAMENTE necesario. El contenedor no tiene height/min-height/
   aspect-ratio/padding propios, así que se ceñirá exacto a la imagen (cualquier
   proporción: 16:9, 9:16 vertical, 1:1 cuadrada). */
.ftop-video .ftop-video__thumb img.ftop-video__poster {
	display: block !important; /* Imprescindible: anula el inline del modo Material. */
	width: calc(100% + 1px);   /* +1px: cubre el ancho REAL pese al redondeo de subpíxel
	                              (el sobrante lo recorta el overflow:hidden del contenedor),
	                              evitando la raya de ~1px en el borde derecho del póster. */
	height: auto;              /* Responsive: respeta la proporción del poster. */
	margin: 0;                 /* Anula cualquier margen heredado del tema. */
	padding: 0;
	border: 0;
	vertical-align: bottom;    /* Refuerzo si el tema forzara inline en algún caso. */
}

/* Botón play circular, centrado sobre la miniatura. */
.ftop-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--ftop-play-size);
	height: var(--ftop-play-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ftop-play-bg);
	border-radius: 50%;
	transition: transform 0.2s ease, background-color 0.2s ease;
	pointer-events: none;      /* El clic lo gestiona el contenedor __thumb. */
}

.ftop-video__play svg {
	width: 40%;
	height: 40%;
	fill: var(--ftop-play-icon);
	/* Centrado del triángulo: su centroide queda un pelín a la izquierda del centro,
	   así que un pequeño desplazamiento a la derecha lo deja centrado en el círculo.
	   Sustituye al antiguo margin-left:6%, que lo descentraba claramente a la derecha. */
	transform: translateX(2%);
}

/* Zoom sutil del botón play al pasar el cursor (o con foco) por la miniatura. */
.ftop-video__thumb:hover .ftop-video__play,
.ftop-video__thumb:focus-visible .ftop-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Foco visible al navegar con teclado. */
.ftop-video__thumb:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* ------------------------------------------------------------------
 * 2) Bloqueo del scroll de fondo (la página no se mueve con el modal abierto)
 * ---------------------------------------------------------------- */
body.ftop-scroll-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	/* La propiedad 'top' la fija el JS de forma inline con la posición de
	   scroll guardada (top negativo), para que la página no salte. */
}

/* ------------------------------------------------------------------
 * 3) Modal
 * ---------------------------------------------------------------- */
.ftop-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* El modal SOLO se usa en desktop (>= 1024px), donde 100vh/100dvh cubren el
	   viewport completo. En móvil/tablet no hay modal: la reproducción es inline. */
	height: 100vh;
	height: 100dvh;
	z-index: 2147483000;       /* Por encima de todo (barras de Salient, etc.). */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--ftop-modal-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Fundido de salida: la visibilidad se retrasa hasta acabar la opacidad. */
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ftop-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* Fundido de entrada: la visibilidad cambia de inmediato. */
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* Contenedor del vídeo. Su tamaño define el área que NO cierra el modal al
   hacer clic (el resto, el fondo negro, sí lo cierra). */
.ftop-modal__media {
	--ftop-arn: 1.7778;        /* Proporción por defecto (16:9); el JS la ajusta. */
	position: relative;
	box-sizing: border-box;
	/* Desktop: margen lateral de ~7% (el vídeo ocupa como máximo el 86% del ancho)
	   y, a la vez, nunca supera el 86% del alto del viewport. Mantiene proporción.
	   Para cualquier proporción (vertical/cuadrada incluidas), el vídeo se centra
	   y el espacio sobrante queda en negro (object-fit: contain, más abajo). */
	width: min(86vw, calc(86vh * var(--ftop-arn)));
	width: min(86dvw, calc(86dvh * var(--ftop-arn)));
	aspect-ratio: var(--ftop-arn);
	max-width: 86vw;
	max-width: 86dvw;
	max-height: 86vh;
	max-height: 86dvh;
}

/* El reproductor llena el contenedor manteniendo la proporción del vídeo. */
.ftop-modal .plyr {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.ftop-player .plyr video,
.ftop-player video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------------
 * 4) Botón de cierre (X) — fuera del marco del vídeo, en el espacio negro
 * ---------------------------------------------------------------- */
.ftop-modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	width: 44px;               /* Área táctil cómoda (>= 44x44). */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: none;          /* Sin fondo de botón circular. */
	border: 0;
	color: #fff;               /* Icono X en blanco. */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ftop-modal__close svg {
	width: 26px;
	height: 26px;
	display: block;
	opacity: 0.9;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ftop-modal__close:hover svg {
	opacity: 1;
	transform: scale(1.08);
}

.ftop-modal__close:focus-visible {
	outline: 2px solid #fff;   /* Foco visible al navegar por teclado. */
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------
 * 5) Personalización de Plyr (mediante sus variables CSS: sin !important)
 *    Ámbito .ftop-player: se aplica a TODOS los reproductores del sistema, tanto
 *    el del modal (desktop) como el inline (móvil/tablet). El JS añade la clase
 *    .ftop-player al contenedor de cada reproductor.
 * ---------------------------------------------------------------- */
.ftop-player .plyr {
	/* --- Barra de progreso (tres colores, estilo YouTube) --- */
	--plyr-range-fill-background: var(--ftop-accent);                    /* Reproducido: negro. */
	--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.4); /* Buffer: gris claro translúcido. */
	--plyr-video-range-track-background: rgba(255, 255, 255, 0.15);      /* Track total: gris oscuro translúcido. */
	--plyr-range-thumb-background: #ffffff;                              /* Handle: blanco sólido. */
	--plyr-range-thumb-height: 14px;
	--plyr-range-track-height: 5px;

	/* --- Iconos de control (barra inferior) --- */
	--plyr-video-control-color: #ffffff;
	--plyr-video-control-color-hover: #ffffff;                           /* No cambian de color al hover. */
	--plyr-video-control-background-hover: rgba(0, 0, 0, 0.4);           /* Círculo negro translúcido (contrasta con el icono blanco). */

	/* --- Degradado oscuro sutil en la zona inferior (legibilidad) --- */
	--plyr-video-controls-background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);

	/* --- Acento general --- */
	--plyr-color-main: var(--ftop-accent);

	/* --- Menú de ajustes/velocidad (fondo claro, contenido oscuro) --- */
	--plyr-menu-background: #ffffff;
	--plyr-menu-color: #1a1a1a;
	--plyr-menu-arrow-color: #6b7280;

	/* --- Tooltips --- */
	--plyr-tooltip-background: rgba(0, 0, 0, 0.8);
	--plyr-tooltip-color: #ffffff;

	/* Hereda la tipografía del tema. */
	--plyr-font-family: inherit;
}

/* Hover en forma de círculo sutil SOLO en los botones de la barra inferior
   (no en los items del menú emergente). */
.ftop-player .plyr__controls > .plyr__control,
.ftop-player .plyr__controls .plyr__volume > .plyr__control,
.ftop-player .plyr__controls .plyr__menu > .plyr__control {
	border-radius: 50%;
}

/* Botón central grande (overlaid). Por defecto Plyr lo pinta con el color de
   "hover" (que aquí es translúcido), lo que lo dejaría casi invisible. Le damos
   un fondo sólido coherente con el botón play de la miniatura y siempre visible. */
.ftop-player .plyr__control--overlaid {
	background: var(--ftop-play-bg);
	color: #fff;
	opacity: 1;
}

.ftop-player .plyr__control--overlaid:hover,
.ftop-player .plyr__control--overlaid:focus {
	background: rgba(0, 0, 0, 0.7);
}

/* Centrado del triángulo de PLAY del control play/pausa de la barra (estado en
   pausa). El icono #plyr-play tiene la masa desplazada a la izquierda (centroide en
   x≈6.67 de un viewBox de 18), por lo que se ve corrido a la izquierda aunque su
   bounding box esté centrado; un pequeño desplazamiento a la derecha lo centra.
   IMPORTANTE: se targetiza SOLO el icono de play (.icon--not-pressed). El icono de
   pausa (.icon--pressed, dos barras) NO se toca y permanece centrado. El valor es
   ajustable; ~12% deja el centroide prácticamente en el centro. */
.ftop-player .plyr__control[data-plyr="play"] .icon--not-pressed {
	transform: translateX(12%);
}

/* Mismo centrado para el triángulo del botón central overlaid (el grande que
   aparece al pausar). Se desplaza el <svg> INTERIOR, nunca el botón, de modo que
   su tamaño, su fondo y su translate(-50%,-50%) de centrado quedan intactos. El
   overlaid es solo play, así que no afecta a ningún icono de pausa. */
.ftop-player .plyr__control--overlaid svg {
	transform: translateX(var(--ftop-overlaid-nudge));
}

/* Menú emergente (ajustes/velocidad): los iconos/flechas y el texto deben
   permanecer OSCUROS y legibles también en hover/foco. Esto sobrescribe la
   regla genérica de Plyr, que pondría el texto en blanco (ilegible sobre el
   fondo claro del menú). Mayor especificidad que la de Plyr: sin !important. */
.ftop-player .plyr__menu__container .plyr__control:hover,
.ftop-player .plyr__menu__container .plyr__control:focus-visible,
.ftop-player .plyr__menu__container .plyr__control[aria-expanded="true"] {
	background: rgba(0, 0, 0, 0.08);
	color: var(--plyr-menu-color, #1a1a1a);
}

/* ------------------------------------------------------------------
 * 5b) Reproductor INLINE (móvil/tablet < 1024px, sin modal)
 *     La miniatura se sustituye por el reproductor en su MISMA caja.
 *     Hereda toda la estética de Plyr vía .ftop-player (sección 5).
 * ---------------------------------------------------------------- */
/* Al reproducir inline, se oculta la miniatura y el reproductor ocupa su sitio. */
.ftop-video--playing .ftop-video__thumb {
	display: none;
}

.ftop-video__inline {
	--ftop-arn: 1.7778;        /* Proporción; el JS la ajusta al póster y al vídeo. */
	position: relative;
	width: 100%;
	aspect-ratio: var(--ftop-arn);
	overflow: hidden;
	/* Sin background negro: el wrapper va transparente y el vídeo se muestra con
	   object-fit:contain (igual que el modal). Así cualquier sliver de redondeo de
	   subpíxel en los bordes es del color de la página, nunca una raya negra. */
}

.ftop-video__inline .plyr {
	width: 100%;
	height: 100%;
	/* El wrapper de vídeo de Plyr es negro por defecto (--plyr-video-background);
	   lo hacemos transparente para que tampoco asome por subpíxel (el vídeo lo cubre). */
	--plyr-video-background: transparent;
}

/* El <video> inline se muestra con su proporción REAL y franjas (letterbox)
   SIMÉTRICAS, exactamente igual que el modal de desktop:
   - display:block          → quita el gap fantasma de línea base (caja de línea).
   - object-fit:contain     → respeta la proporción del vídeo; cualquier banda sobrante
     queda centrada (arriba = abajo). NO recorta ni sobre-escala (nada de cover).
   - object-position:center → sin desplazamiento vertical/horizontal (sin "nudge" de 1px).
   La caja toma la proporción del propio vídeo (--ftop-arn), así que el vídeo la llena
   sin franjas perceptibles; si el redondeo de subpíxel dejara un hilo lateral, el
   wrapper transparente hace que sea del color de la página, no una raya negra.
   Solo afecta al inline; el modal de desktop ya usaba object-fit:contain (intacto). */
.ftop-video__inline.ftop-player .plyr video,
.ftop-video__inline.ftop-player video {
	display: block;
	object-fit: contain;
	object-position: center;
}

.ftop-video__inline:focus {
	outline: none;             /* Caja con tabindex="-1": foco programático sin halo. */
}

/* ------------------------------------------------------------------
 * 6) Responsive (móvil: ancho <= 767px)
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.ftop-video__play {
		width: var(--ftop-play-size-mobile);
		height: var(--ftop-play-size-mobile);
	}

	/* En móvil el vídeo ocupa el ancho completo disponible. Unidades dinámicas
	   (dvw/dvh) para que, al rotar a horizontal, recalcule contra el viewport
	   visible real (sin que asome la barra del navegador). */
	.ftop-modal__media {
		width: min(100vw, calc(100vh * var(--ftop-arn)));
		width: min(100dvw, calc(100dvh * var(--ftop-arn)));
		max-width: 100vw;
		max-width: 100dvw;
		max-height: 100vh;
		max-height: 100dvh;
	}

	.ftop-modal__close {
		top: 14px;
		right: 14px;
	}
}

/* ------------------------------------------------------------------
 * 7) Respeto por "reduce motion"
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ftop-modal,
	.ftop-video__play,
	.ftop-modal__close svg {
		transition-duration: 0.01ms;
	}
}