/* Módulo videos: variables propias, clases con prefijo pv- */
.pv-videos-carrusel,
.pv-videos-single,
.pv-videos-archivo {
	--pv-v-gap: 1rem;
	--pv-v-radio: 8px;
	--pv-v-texto: #1f2937;
	--pv-v-acento: #3c434a;
	--pv-v-fondo-nav: rgba(0, 0, 0, 0.7);
	--pv-v-ancho: 1200px;
	--pv-v-fondo-video: linear-gradient(180deg, #2b2f36 0%, #4b5563 100%);
	--pv-v-secundario: #1f2937;
	--pv-v-sobre-principal: #fff;
	--pv-v-sobre-secundario: #fff;
	color: var(--pv-v-texto);
}

/* ---------- Carrusel ---------- */
.pv-videos-carrusel {
	max-width: var(--pv-v-ancho);
	margin: 2rem auto;
	padding: 0 1rem;
}
.pv-videos-carrusel__titulo { margin: 0 0 1rem; }
.pv-videos-carrusel__swiper { position: relative; padding-bottom: 0.25rem; }
.pv-videos-carrusel .swiper-slide { height: auto; }
.pv-videos-carrusel__todos { text-align: right; margin: 1rem 0 0; }

/* ---------- Ítem (carrusel y grilla) ---------- */
.pv-videos-item__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pv-videos-item__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pv-v-radio);
	background: var(--pv-v-fondo-video);
}
.pv-videos-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}
.pv-videos-item__enlace:hover img,
.pv-videos-item__enlace:focus-visible img { transform: scale(1.04); }
.pv-videos-item__enlace:focus-visible { outline: 3px solid var(--pv-v-acento); outline-offset: 3px; border-radius: var(--pv-v-radio); }
.pv-videos-item__titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.5rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Botón play (compartido) ---------- */
.pv-video-player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--pv-v-acento, #3c434a);
	pointer-events: none;
}
.pv-video-player__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

/* ---------- Flechas ---------- */
.pv-videos-nav {
	position: absolute;
	top: 40%;
	z-index: 10;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--pv-v-secundario);
	cursor: pointer;
	transform: translateY(-50%);
}
.pv-videos-nav::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 3px solid var(--pv-v-sobre-secundario);
	border-right: 3px solid var(--pv-v-sobre-secundario);
}
.pv-videos-nav--prev { left: 0.5rem; }
.pv-videos-nav--prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.pv-videos-nav--next { right: 0.5rem; }
.pv-videos-nav--next::after { transform: translate(-70%, -50%) rotate(45deg); }
.pv-videos-nav:focus-visible { outline: 3px solid var(--pv-v-acento); outline-offset: 2px; }
.pv-videos-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* ---------- Puntos de paginación ---------- */
.pv-videos-pagination.swiper-pagination { position: static; margin-top: 1rem; }
/* Puntos: el color principal con transparencia (inactivos) y sólido (activo). */
.pv-videos-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--pv-v-acento); opacity: 0.3; }
.pv-videos-pagination .swiper-pagination-bullet-active { width: 28px; border-radius: 5px; background: var(--pv-v-acento); opacity: 1; }

/* ---------- Reproductor lazy ---------- */
.pv-video-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--pv-v-fondo-video, #2b2f36);
	border-radius: var(--pv-v-radio, 8px);
	overflow: hidden;
}
.pv-video-player__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.pv-video-player__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.pv-video-player__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Miniatura bloqueada o inexistente: se oculta y queda el fondo propio. */
.pv-sin-miniatura { display: none; }
.pv-video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Página individual ---------- */
.pv-videos-single,
.pv-videos-archivo {
	max-width: var(--pv-v-ancho);
	margin: 2rem auto;
	padding: 0 1rem;
}
.pv-videos-single__contenido { max-width: 900px; margin: 0 auto; }
.pv-videos-single__titulo { margin: 0 0 0.25rem; }
.pv-videos-single__fecha { margin: 0 0 1rem; opacity: 0.7; }
.pv-videos-single__descripcion { margin: 1.25rem 0; font-size: 1.1rem; line-height: 1.6; }

/* ---------- Archivo ---------- */
.pv-videos-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem var(--pv-v-gap);
}
.pv-videos-paginacion { margin-top: 2rem; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.pv-videos-paginacion .page-numbers { padding: 0.4rem 0.8rem; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; }
.pv-videos-paginacion .current { background: var(--pv-v-acento); border-color: var(--pv-v-acento); color: var(--pv-v-sobre-principal); }
.pv-videos-paginacion a.page-numbers:hover,
.pv-videos-paginacion a.page-numbers:focus-visible { background: var(--pv-v-secundario); border-color: var(--pv-v-secundario); color: var(--pv-v-sobre-secundario); }

@media (prefers-reduced-motion: reduce) {
	.pv-videos-item__media img { transition: none; }
}

/* ---------- Filtros del listado ---------- */
.pv-videos-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
	margin: 0 0 1.5rem;
}
.pv-videos-filtros__campo { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.pv-videos-filtros select {
	min-width: 12rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #c3c7d0;
	border-radius: var(--pv-v-radio);
	background: #fff;
	color: var(--pv-v-texto);
	font: inherit;
	font-weight: 400;
}
.pv-videos-filtros__boton {
	padding: 0.55rem 1.25rem;
	border: 0;
	border-radius: var(--pv-v-radio);
	background: var(--pv-v-acento);
	color: var(--pv-v-sobre-principal);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.pv-videos-filtros__boton:hover { background: var(--pv-v-secundario); color: var(--pv-v-sobre-secundario); }
.pv-videos-filtros select:focus-visible,
.pv-videos-filtros__boton:focus-visible { outline: 3px solid var(--pv-v-acento); outline-offset: 2px; }
