/*
 * ESTB Pestañas Carrusel Móvil
 * Todo este CSS depende de la clase "estb-tc-on", que solo añade el JS
 * cuando la pantalla está por debajo del breakpoint y ha podido localizar
 * las pestañas y los paneles. Sin JS, o en escritorio, las pestañas se
 * comportan exactamente igual que siempre.
 */

/* ---------- Tira de títulos (triggers) ---------- */
.estb-tc-on .estb-tc-tablist {
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
}
.estb-tc-on .estb-tc-tablist::-webkit-scrollbar {
	display: none;
}
.estb-tc-on .estb-tc-tab {
	flex: 0 0 auto !important;
	white-space: nowrap;
	scroll-snap-align: center;
}

/* ---------- Pista de paneles ---------- */
.estb-tc-on .estb-tc-track {
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	max-width: 100%;
	transition: height var(--estb-tc-height-speed, 300ms) ease;
}
.estb-tc-on .estb-tc-track::-webkit-scrollbar {
	display: none;
}

/* Todos los paneles visibles, uno al lado del otro. Se respeta el "display"
   original del panel (flex, grid, block...) que el JS guarda en la variable. */
.estb-tc-on .estb-tc-panel,
.estb-tc-on .estb-tc-panel[hidden] {
	display: var(--estb-tc-panel-display, block) !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.estb-tc-on .estb-tc-track {
		transition: none;
	}
}