/**
 * Las diapositivas de video de la galería y su miniatura en la tira.
 *
 * ⚠️ Oxygen encola su universal.css DESPUÉS de las hojas del plugin, así que
 * ante igual especificidad gana Oxygen. Si algo de acá no se ve, mirar primero
 * si hay una regla en el builder pisándolo: ya pasó con las flechas de la tira
 * en la 1.13.1.
 */

.woocommerce-product-gallery__image.is-video {
	position: relative;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.is-video__player,
.is-video__poster {
	display: block;
	width: 100%;
	height: auto;
}

/* La URL del mp4 vive acá hasta que alguien lo reproduce. No se dibuja. */
.is-video__src {
	display: none;
}

/* El botón de play, centrado sobre la portada. */
.is-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(24, 24, 27, 0.72);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.is-video__play:hover {
	background: rgba(24, 24, 27, 0.88);
}

/* El triángulo se dibuja con bordes, igual que el chevron de las flechas: así
   el tamaño y la forma no cambian con la tipografía del tema. */
.is-video__play::before {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}

/* El botón se esconde MIENTRAS el mp4 se reproduce, y vuelve cuando se
   pausa. La clase la pone ficha-color.js con los eventos play y pause del
   video (13/10/2026). Antes se escondía con solo tener [src]: si el visitante
   pasaba a una foto, el video se pausaba pero seguía teniendo src, así que al
   volver no había botón y, sin controles, no había forma de reanudarlo. */
.is-video--mp4.is-video--reproduciendo .is-video__play {
	display: none;
}

/**
 * El distintivo de la miniatura.
 *
 * FlexSlider arma la tira copiando el data-thumb de cada diapositiva a un <img>
 * nuevo, y NO copia las clases. Así que desde el CSS no hay forma de saber cuál
 * miniatura es de un video: el distintivo lo pone gallery.js, marcando el <li>
 * que corresponde. Ver la nota en ese archivo.
 */
.flex-control-thumbs li.is-video-thumb {
	position: relative;
}

/* El círculo va en ::before y el triángulo en ::after: sin eso el triángulo
   quedaría tapado, porque a igual posición y sin z-index el ::after de un
   elemento pinta después que su ::before. */
.flex-control-thumbs li.is-video-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(24, 24, 27, 0.72);
	pointer-events: none;
}

/* El triángulo interno, la única señal de que la miniatura es un video y no
   una foto. Mismo truco de bordes que .is-video__play::before, en chico:
   sin él el distintivo es un punto liso indistinguible de cualquier otra
   marca redonda. */
.flex-control-thumbs li.is-video-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #fff;
	margin-left: 2px;
	pointer-events: none;
}

/* Esconde la portada y el botón cuando se dibuja el iframe, sin ocupar lugar. */
.is-video__hidden {
	display: none;
}

.is-video__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ---------------------------------------------- Controles propios (mp4) ---
   Reemplazan a los del navegador (13/10/2026). Mismos trazos finos y mismo
   gris oscuro que el botón de play. La posición la pone video-controles.js,
   ajustada al cuadro real del video. */
.is-vc {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 18px 12px 10px;
	background: linear-gradient(to top, rgba(24, 24, 27, 0.6), rgba(24, 24, 27, 0));
	color: #fff;
	font-size: 11px;
	line-height: 1;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.is-video--controles.is-vc--quieto .is-vc {
	opacity: 0;
	pointer-events: none;
}

/* Hasta saber el cuadro del video la barra no se ve: si no, aparecía a todo
   el ancho de la diapositiva y se achicaba un segundo después. */
.is-vc.is-vc--sin-medida {
	visibility: hidden;
}

.is-video--controles.is-vc--quieto .is-video__player {
	cursor: none;
}

.is-video--controles .is-video__player {
	cursor: pointer;
}

html body .is-vc .is-vc__btn {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

html body .is-vc .is-vc__btn:hover,
html body .is-vc .is-vc__btn:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.is-vc__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.is-vc__play svg path[d^="M8 5.5v13l"] {
	fill: currentColor;
}

/* La línea de avance: 2px, 4px al pasar el mouse para que sea fácil de
   agarrar. El área que recibe el clic es más alta que la línea dibujada. */
.is-vc__linea {
	position: relative;
	flex: 1 1 auto;
	height: 18px;
	cursor: pointer;
	outline: none;
}

.is-vc__linea::before,
.is-vc__relleno {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	border-radius: 2px;
	transition: height 0.15s ease;
}

.is-vc__linea::before {
	right: 0;
	background: rgba(255, 255, 255, 0.35);
}

.is-vc__relleno {
	width: 0;
	background: #fff;
}

.is-vc__linea:hover::before,
.is-vc__linea:hover .is-vc__relleno,
.is-vc__linea:focus-visible::before,
.is-vc__linea:focus-visible .is-vc__relleno {
	height: 4px;
}

.is-vc__tiempo {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Pantalla completa: el video entero sobre negro y la barra abajo. */
/* Separadas: si un navegador no entiende uno de los dos selectores, en una
   misma lista descartaría la regla entera. */
.is-video--mp4:fullscreen {
	background: #000;
}

.is-video--mp4:-webkit-full-screen {
	background: #000;
}

.is-video--mp4:fullscreen .is-video__player {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.is-video--mp4:-webkit-full-screen .is-video__player {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 480px) {
	.is-vc {
		gap: 6px;
		padding: 16px 8px 8px;
	}

	.is-vc__tiempo {
		font-size: 10px;
	}
}