/* =========================================
   ESTILOS PARA CONTENEDORES Y ELEMENTOS DE SWIPE INYECTADOS POR JS
   (Solo versión móvil o general según aplique)
========================================= */

/* Contenedor principal de navegación (flechas y puntos) */
.hswipe-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 0;
	width: 100%;
	z-index: 10;
	background: #ea6262;
}

/* Botones de anterior / siguiente */
.ui-swipe-btn {
	background: rgb(var(--b) / 0.8);
	color: rgb(var(--n) / 1);
	border: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1rem;
	transition: background 0.3s ease, opacity 0.3s ease;
}

.ui-swipe-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.ui-swipe-btn:not(:disabled):hover {
	background: rgb(var(--b) / 1);
}

/* Contenedor de los puntos indicadores (dots) */
.ui-swipe-dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

/* Cada punto indicador (ahora span con clase específica) */
.ui-swipe-dot-item {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgb(var(--b) / 0.3);
	transition: background 0.3s ease, transform 0.3s ease;
	cursor: pointer;
}

/* Punto activo */
.ui-swipe-dot-item.is-active {
	background: rgb(var(--b) / 1);
	transform: scale(1.25);
}

/* Clases inyectadas automáticamente por el JS para habilitar scroll snap nativo */
.is-swipe-container {
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.is-swipe-item {
	scroll-snap-align: center;
	scroll-snap-stop: always;
}