/* ============================================================
   Línea de Tiempo EAFIT
   ============================================================ */

.lte-wrapper {
	--lte-altura: 480px;
	--lte-azul: #00aeef;
	--lte-oscuro: #1b1f5c;
	--lte-arrow-bg: #ffffff;
	--lte-arrow-color: #1b1f5c;

	max-width: 100%;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}

.lte-wrapper *,
.lte-wrapper *::before,
.lte-wrapper *::after {
	box-sizing: border-box;
}

/* ---------- Pestañas ---------- */
.lte-tabs {
	display: flex;
	align-items: flex-end;
	gap: 28px;
	margin-bottom: 18px;
	padding-bottom: 6px;
}

.lte-tab {
	background: none;
	border: none;
	padding: 0 0 8px;
	margin: 0;
	cursor: pointer;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #b9c0cf;
	border-bottom: 4px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	line-height: 1;
}

.lte-tab:hover {
	color: var(--lte-oscuro);
}

.lte-tab.is-active {
	color: var(--lte-azul);
	border-bottom-color: var(--lte-azul);
}

/* ---------- Escenario (flechas + visor) ---------- */
.lte-stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lte-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--lte-altura);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;      /* Firefox: oculta la barra */
	-ms-overflow-style: none;   /* IE/Edge antiguo */
	cursor: grab;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	outline: none;
}

.lte-viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.lte-viewport.is-dragging img {
	pointer-events: none;
}

/* Oculta la barra de scroll en Webkit (Chrome, Safari, Edge) */
.lte-viewport::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.lte-viewport:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.4);
	border-radius: 4px;
}

/* ---------- Track y paneles ---------- */
.lte-track {
	height: 100%;
	position: relative;
}

.lte-panel {
	display: none;
	height: 100%;
	width: max-content;
}

.lte-panel.is-active {
	display: block;
}

.lte-panel img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Flechas ---------- */
.lte-arrow {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--lte-arrow-bg);
	color: var(--lte-arrow-color);
	box-shadow: 0 4px 14px rgba(27, 31, 92, 0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
	z-index: 3;
}

.lte-arrow:hover:not([disabled]) {
	transform: scale(1.08);
	background: var(--lte-azul);
	color: #fff;
}

.lte-arrow:active:not([disabled]) {
	transform: scale(0.96);
}

.lte-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 782px) {
	.lte-wrapper {
		--lte-altura: 320px;
	}
	.lte-arrow {
		width: 38px;
		height: 38px;
	}
	.lte-tabs {
		gap: 18px;
		padding: 20px;
		justify-content: center;
	}
}