/* Levapan Elements — Slider thumbnails */

.lv-thumb-slider-wrap {
	--lv-slider-arrow-size: 44px;
	--lv-slider-arrow-icon-size: 18px;
	--lv-slider-arrow-color: #ffffff;
	--lv-slider-arrow-bg: #cf1d1d;
	--lv-slider-dot: #d9d9d9;
	--lv-slider-dot-active: #cf1d1d;
	--lv-slider-dot-size: 10px;
	--lv-slider-dot-gap: 6px;
	--lv-slider-arrow-offset: 0px;

	/* Estados sin valor propio: heredan el normal para no alterar el aspecto
	   por defecto al exponer estos controles nuevos. */
	--lv-slider-arrow-color-hover: var(--lv-slider-arrow-color);
	--lv-slider-arrow-bg-hover: var(--lv-slider-arrow-bg);
	--lv-slider-arrow-opacity-disabled: 0.35;
	--lv-slider-dot-hover: var(--lv-slider-dot);

	/* Aire para que la sombra del slide no se recorte. Cero por defecto: sin
	   sombra configurada nada cambia. */
	--lv-slide-air-block: 0px;
	--lv-slide-air-inline: 0px;

	position: relative;
	padding-block: var(--lv-slide-air-block);
	/* El aire lateral se talla DENTRO del wrap: las tarjetas ceden ese espacio
	   y nada sobresale del widget. Si el .swiper desbordara hacia fuera, en
	   móvil (widget a todo el ancho) aparecería scroll horizontal en la página. */
	padding-inline: var(--lv-slide-air-inline);
}

.lv-thumb-slider {
	--lv-slider-opacity: 1;

	width: 100%;
}

/* Swiper pone `overflow: hidden` en `.swiper` y eso recorta la sombra de las
   tarjetas. No se puede pasar a `visible` —es lo que oculta los slides fuera de
   vista—, así que se recorta solo en horizontal.

   `overflow-x: hidden` no vale: la spec obliga al otro eje a computar `auto`, o
   sea que el eje Y seguiría recortando y encima con barra de scroll. `clip` sí
   admite que el otro eje sea `visible` (mismo caso que .lv-timeline__track).

   El aire lateral va por padding porque el recorte de `clip`/`hidden` ocurre en
   el borde del padding, no en el del contenido: la sombra tiene ese hueco para
   pintarse. Swiper lo mide bien (usa `clientWidth`, que incluye el padding, y se
   lo resta después). Nada de `overflow-clip-margin`: Chromium y Firefox lo
   ignoran salvo que los DOS ejes sean `clip`, y aquí el Y es `visible`.

   El wrap aporta el hueco con su `padding-inline` y aquí el margen negativo y
   el ancho ampliado devuelven al .swiper hasta el borde del wrap: la zona de
   padding del .swiper (donde respira la sombra) queda dentro del widget y no
   desborda la página. Con la variable a 0 la regla es un no-op. */
.lv-thumb-slider.swiper {
	overflow: hidden; /* Fallback Safari < 16: el aire lateral funciona igual */
	overflow: clip visible;
	width: calc(100% + 2 * var(--lv-slide-air-inline));
	margin-inline: calc(-1 * var(--lv-slide-air-inline));
	padding-inline: var(--lv-slide-air-inline);
}

/* `overflow: visible`: elementor-pro (widget-carousel-module-base.css) pone
   `.swiper-slide { overflow: hidden }` con una clase y alcance global, y eso
   recorta la sombra de la tarjeta. En el editor ese CSS carga siempre —el
   preview encola los estilos de todos los widgets— y en el frontend cuando la
   página usa algún carrusel de Pro. Dos clases para ganarle. */
.lv-thumb-slider .swiper-slide {
	height: auto;
	overflow: visible;
	opacity: var(--lv-slider-opacity);
	transition: opacity 0.3s ease;
}

.lv-thumb-slider .swiper-slide.swiper-slide-active,
.lv-thumb-slider .swiper-slide.swiper-slide-thumb-active,
.lv-thumb-slider .swiper-slide.lv-slide-current {
	opacity: 1;
}

/* El `transform` no se declara aquí: lo emiten los controles de «Escala» por
   estado y solo si tienen valor. Un `transform` distinto de `none` —aunque sea
   `scale(1)`— crea contexto de apilamiento, y no queremos imponérselo al
   container de las instalaciones que no usen la escala. */
.lv-thumb-slider .swiper-slide > .e-con {
	width: 100%;
	height: 100%;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
		transform 0.3s ease;
}

/* --- Flechas --- */

.lv-thumb-slider-wrap .lv-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lv-slider-arrow-size);
	height: var(--lv-slider-arrow-size);
	border-radius: 50%;
	background-color: var(--lv-slider-arrow-bg);
	color: var(--lv-slider-arrow-color);
	font-size: var(--lv-slider-arrow-icon-size);
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* `:not(.swiper-button-disabled)`: en los extremos sin bucle la flecha no reacciona. */
.lv-thumb-slider-wrap .lv-slider-arrow:hover:not(.swiper-button-disabled),
.lv-thumb-slider-wrap .lv-slider-arrow:focus-visible:not(.swiper-button-disabled) {
	background-color: var(--lv-slider-arrow-bg-hover);
	color: var(--lv-slider-arrow-color-hover);
}

.lv-thumb-slider-wrap .lv-slider-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-thumb-slider-wrap .lv-slider-arrow i {
	font-size: inherit;
}

/* Tres clases para ganarle a `.elementor-element .swiper ~ .elementor-swiper-button-*`
   de e-swiper.min.css, que fija los 10px de Swiper. */
.elementor-element .lv-thumb-slider-wrap .lv-slider-arrow--prev {
	inset-inline-start: var(--lv-slider-arrow-offset);
	inset-inline-end: auto;
}

.elementor-element .lv-thumb-slider-wrap .lv-slider-arrow--next {
	inset-inline-end: var(--lv-slider-arrow-offset);
	inset-inline-start: auto;
}

.lv-thumb-slider-wrap .lv-slider-arrow.swiper-button-disabled {
	opacity: var(--lv-slider-arrow-opacity-disabled);
	cursor: default;
}

/* --- Paginación --- */

.lv-thumb-slider-wrap .swiper-pagination {
	position: static;
	margin-block-start: 16px;
}

.lv-thumb-slider-wrap .swiper-pagination-bullet {
	width: var(--lv-slider-dot-size);
	height: var(--lv-slider-dot-size);
	background-color: var(--lv-slider-dot);
	opacity: 1;
	transition: background-color 0.2s ease;
}

/* Tres clases para ganarle al margin fijo que Swiper pone a los bullets. */
.elementor-element .lv-thumb-slider-wrap .swiper-pagination-bullet {
	margin-inline: calc(var(--lv-slider-dot-gap) / 2);
}

.lv-thumb-slider-wrap .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
	background-color: var(--lv-slider-dot-hover);
}

.lv-thumb-slider-wrap .swiper-pagination-bullet-active {
	background-color: var(--lv-slider-dot-active);
}