/* NDH Galería — frontend (v2, galería propia) */

.ndh-vg-gallery {
	--ndh-vg-thumbs: 5;
	--ndh-vg-gap: 10px;
	width: 100%;
	max-width: var(--ndh-vg-gallery-max-width, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* ---- Escenario (imagen/video principal) ---- */
.ndh-vg-stage {
	position: relative;
	width: 100%;
	background: #fff;
	overflow: hidden;
}
.ndh-vg-stage-item {
	display: none;
	position: relative;
	width: 100%;
	cursor: zoom-in;
	line-height: 0;
}
.ndh-vg-stage-item.is-active {
	display: block;
}
.ndh-vg-stage-item img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--ndh-vg-main-max-height, none);
	object-fit: var(--ndh-vg-main-fit, contain);
}
.ndh-vg-stage-video {
	cursor: pointer;
}
.ndh-vg-stage-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ndh-vg-gallery button.ndh-vg-stage-play:hover,
.ndh-vg-gallery button.ndh-vg-stage-play:focus,
.ndh-vg-gallery button.ndh-vg-stage-play:active {
	background: transparent;
	box-shadow: none;
}
.ndh-vg-stage-video .ndh-vg-play {
	width: 74px;
	height: 74px;
}

/* Botón play (compartido) */
.ndh-vg-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ndh-vg-play-bg);
	color: #fff;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ndh-vg-stage-play:hover .ndh-vg-play {
	background: var(--ndh-vg-play-hover-bg);
	transform: scale(1.06);
}

/* ---- Tira de thumbnails ---- */
.ndh-vg-thumbs-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
}
.ndh-vg-thumbs {
	flex: 1 1 auto;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
	scroll-behavior: smooth;
}
.ndh-vg-thumbs::-webkit-scrollbar {
	display: none; /* WebKit */
}
.ndh-vg-thumbs-track {
	display: flex;
	gap: var(--ndh-vg-gap);
}
.ndh-vg-thumb {
	position: relative;
	flex: 0 0 calc( ( 100% - ( var(--ndh-vg-thumbs) - 1 ) * var(--ndh-vg-gap) ) / var(--ndh-vg-thumbs) );
	aspect-ratio: 1 / 1;
	padding: 0;
	border: var(--ndh-vg-sel-width, 2px) solid transparent;
	background: #f5f5f5;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color 0.2s ease;
}
/* El tema aplica un background-color a todos los botones en hover/focus
   (p. ej. button:hover{background:#c36}). Lo neutralizamos en las miniaturas. */
.ndh-vg-gallery button.ndh-vg-thumb:hover,
.ndh-vg-gallery button.ndh-vg-thumb:focus,
.ndh-vg-gallery button.ndh-vg-thumb:active {
	background: #f5f5f5;
	color: inherit;
	box-shadow: none;
}
.ndh-vg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ndh-vg-thumb.is-active {
	border-color: var(--ndh-vg-sel-color);
}
.ndh-vg-thumb:hover:not(.is-active) {
	border-color: var(--ndh-vg-sel-hover-color);
}
.ndh-vg-thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ndh-vg-play-bg);
	color: #fff;
	pointer-events: none;
}

/* Flechas */
.ndh-vg-arrow {
	flex: 0 0 auto;
	width: var(--ndh-vg-arrow-size, 34px);
	height: var(--ndh-vg-arrow-size, 34px);
	padding: 0;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ndh-vg-arrow-border);
	border-radius: 50%;
	background: var(--ndh-vg-arrow-bg);
	color: var(--ndh-vg-arrow-icon);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.ndh-vg-gallery button.ndh-vg-arrow:hover:not(:disabled),
.ndh-vg-gallery button.ndh-vg-arrow:focus:not(:disabled) {
	background: var(--ndh-vg-arrow-hover-bg);
	border-color: var(--ndh-vg-arrow-hover-bg);
	color: var(--ndh-vg-arrow-hover-icon);
}
/* Blindaje del ícono: hereda el color del botón y evita que el tema o
   Elementor lo pise o lo colapse a 0. Respeta paths con stroke (chevron,
   flecha, ángulo) y con fill (triángulo). */
.ndh-vg-arrow svg {
	width: 45%;
	height: 45%;
	display: block;
	pointer-events: none;
	flex: 0 0 auto;
	color: inherit;
}
.ndh-vg-arrow svg [fill="currentColor"] {
	fill: currentColor;
}
.ndh-vg-arrow svg [stroke="currentColor"] {
	stroke: currentColor;
}
.ndh-vg-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.ndh-vg-arrow.is-hidden {
	display: none;
}

/* ---- Visor / overlay ---- */
.ndh-vg-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: 24px;
}
.ndh-vg-overlay.is-open {
	display: flex;
}
.ndh-vg-overlay-inner {
	position: relative;
	width: 100%;
	max-width: 960px;
}
.ndh-vg-frame-holder {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	background: #000;
	overflow: hidden;
	border-radius: 4px;
}
.ndh-vg-overlay.is-image .ndh-vg-frame-holder {
	background: transparent;
	height: auto;
}
.ndh-vg-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ndh-vg-media-img {
	position: static;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 85vh;
	margin: 0 auto;
	border-radius: 4px;
}
.ndh-vg-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.ndh-vg-close:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* Flechas de navegación del lightbox de imágenes */
.ndh-vg-lb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
	z-index: 2;
}
.ndh-vg-overlay.has-nav .ndh-vg-lb-arrow {
	display: flex;
}
.ndh-vg-lb-arrow:hover {
	background: rgba(255, 255, 255, 0.28);
}
/* Blindaje contra button:hover del tema en los controles del overlay. */
.ndh-vg-overlay button.ndh-vg-lb-arrow:focus,
.ndh-vg-overlay button.ndh-vg-lb-arrow:active {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	box-shadow: none;
}
.ndh-vg-overlay button.ndh-vg-close:hover,
.ndh-vg-overlay button.ndh-vg-close:focus,
.ndh-vg-overlay button.ndh-vg-close:active {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	box-shadow: none;
}
.ndh-vg-lb-prev {
	left: -64px;
}
.ndh-vg-lb-next {
	right: -64px;
}
.ndh-vg-lb-arrow svg {
	pointer-events: none;
}

html.ndh-vg-lock,
html.ndh-vg-lock body {
	overflow: hidden;
}

@media (max-width: 900px) {
	/* Las flechas del lightbox pasan a estar sobre la imagen, no fuera. */
	.ndh-vg-lb-prev {
		left: 8px;
	}
	.ndh-vg-lb-next {
		right: 8px;
	}
	.ndh-vg-lb-arrow {
		background: rgba(0, 0, 0, 0.45);
	}
}
@media (max-width: 782px) {
	.ndh-vg-gallery {
		--ndh-vg-thumbs: 4;
	}
}
@media (max-width: 480px) {
	.ndh-vg-gallery {
		--ndh-vg-thumbs: 3;
	}
	.ndh-vg-overlay {
		padding: 16px;
	}
	.ndh-vg-close {
		top: -40px;
	}
	.ndh-vg-lb-arrow {
		width: 40px;
		height: 40px;
	}
}