/**
 * BXC Base - Sistema de Sliders (bxc-).
 * -----------------------------------------------------------
 * Estilos base para los sliders generados por bxc_slider.js.
 * La lógica de configuración se define vía data-attributes en el HTML.
 *
 * Estructura HTML mínima:
 *   <div class="bxc-slider"
 *        data-bxc-slides-per-view="3"
 *        data-bxc-speed="500"
 *        data-bxc-effect="slide"
 *        data-bxc-loop="true"
 *        data-bxc-autoplay="3000"
 *        data-bxc-arrows="true"
 *        data-bxc-dots="true">
 *     <div class="bxc-slider__track">
 *       <div class="bxc-slider__slide">Slide 1</div>
 *       <div class="bxc-slider__slide">Slide 2</div>
 *       <div class="bxc-slider__slide">Slide 3</div>
 *     </div>
 *     <button class="bxc-slider__arrow bxc-slider__arrow--prev" aria-label="Anterior">&lsaquo;</button>
 *     <button class="bxc-slider__arrow bxc-slider__arrow--next" aria-label="Siguiente">&rsaquo;</button>
 *     <div class="bxc-slider__dots"></div>
 *     <div class="bxc-slider__progress"></div>
 *   </div>
 */

.bxc-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.bxc-slider__track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
}

.bxc-slider__slide {
	flex: 0 0 100%;
	min-height: 1px;
	padding: 0 calc(var(--bxc-gutter) / 2);
	box-sizing: border-box;
}

/* Efecto fade */
.bxc-slider[data-bxc-effect="fade"] .bxc-slider__track {
	flex-direction: column;
	transition: none;
}
.bxc-slider[data-bxc-effect="fade"] .bxc-slider__slide {
	flex: 0 0 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.bxc-slider[data-bxc-effect="fade"] .bxc-slider__slide.bxc-slider__slide--active {
	opacity: 1;
	position: relative;
}

/* Efecto coverflow */
.bxc-slider[data-bxc-effect="coverflow"] .bxc-slider__track {
	perspective: 1200px;
}

/* Flechas */
.bxc-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, opacity 0.3s ease;
	cursor: pointer;
}
.bxc-slider__arrow:hover { background: rgba(0, 0, 0, 0.8); }
.bxc-slider__arrow--prev { left: 8px; }
.bxc-slider__arrow--next { right: 8px; }
.bxc-slider__arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* Puntos */
.bxc-slider__dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}
.bxc-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
	border: none;
	padding: 0;
}
.bxc-slider__dot--active {
	background: #fff;
	transform: scale(1.3);
}

/* Barra de progreso (autoplay) */
.bxc-slider__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--bxc-color-accent, #f00);
	width: 0;
	z-index: 10;
	transition: width 0.1s linear;
}

/* Estado: sin flechas / sin dots */
.bxc-slider[data-bxc-arrows="false"] .bxc-slider__arrow { display: none; }
.bxc-slider[data-bxc-dots="false"] .bxc-slider__dots { display: none; }
.bxc-slider[data-bxc-progress="false"] .bxc-slider__progress { display: none; }

/* Mobile: reducimos tamaño de flechas */
@media (max-width: 768px) {
	.bxc-slider__arrow {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
	.bxc-slider__slide {
		padding: 0 4px;
	}
}