/* Levapan Elements — Índice y Título índice */

.lv-index {
	--lv-index-icon-size: 28px;
}

.lv-index__header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-block-end: 20px;
}

.lv-index__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lv-index-icon-size);
	line-height: 1;
}

.lv-index__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-index__icon i {
	font-size: inherit;
}

.lv-index__title {
	line-height: 1.2;
}

.lv-index__list {
	--lv-index-marker: #cf1d1d;
	--lv-index-marker-size: 12px;
	--lv-index-item-gap: 22px;
	--lv-index-item-indent: 20px;
	--lv-index-line-display: none;

	display: flex;
	flex-direction: column;
	gap: var(--lv-index-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lv-index__item {
	position: relative;
	padding-inline-start: calc(var(--lv-index-marker-size) + var(--lv-index-item-indent));
}

/* Punto del ítem. */
.lv-index__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(0.7em - var(--lv-index-marker-size) / 2);
	width: var(--lv-index-marker-size);
	height: var(--lv-index-marker-size);
	border-radius: 50%;
	background-color: var(--lv-index-marker);
}

/* Línea que une un punto con el siguiente. */
.lv-index__item:not(:last-child)::after {
	content: "";
	display: var(--lv-index-line-display);
	position: absolute;
	inset-inline-start: calc(var(--lv-index-marker-size) / 2 - 1px);
	top: calc(0.7em + var(--lv-index-marker-size) / 2);
	bottom: calc(-1 * (var(--lv-index-item-gap) + 0.7em - var(--lv-index-marker-size) / 2));
	width: 2px;
	background-color: var(--lv-index-marker);
}

.lv-index__link {
	display: inline-block;
	text-decoration: none;
	transition: color 0.2s ease;
}

/*
 * El ítem activo hereda el color de hover mientras no se rellene el control
 * «Activo»: hasta la 1.4.0 ambos estados compartían un único control y las
 * páginas ya publicadas deben seguir viéndose igual. El control activo emite
 * su propia regla, que gana a esta por ir después en la hoja de Elementor.
 *
 * Fallback `unset` y no `inherit`: sin ningún color de hover configurado esta
 * regla debe desaparecer y dejar que mande el color normal del enlace, que se
 * pinta con menos especificidad (0,2,0 frente a 0,3,0).
 */
.lv-index__item.is-active .lv-index__link {
	color: var(--lv-index-active-color, unset);
}

.lv-index__item::before {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lv-index__empty {
	opacity: 0.6;
	font-style: italic;
}

/* Título índice */
.lv-index-heading {
	margin: 0;
	scroll-margin-block-start: 120px;
}

/* --- Modo colapsado --- */

/*
 * Reset del header cuando es <button> (solo se renderiza así en modo
 * colapsable). Selector compuesto (0,2,1): el kit de Elementor estiliza
 * button con .elementor-kit-N button (0,1,1) y ganaría a una clase sola.
 */
.lv-index > button.lv-index__header {
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: default;
}

/* Un título largo debe encoger y envolver, no empujar el chevron fuera de la
   píldora (min-width:auto de los flex items) ni pintarse encima de él cuando
   la tipografía trae white-space:nowrap. Icono y chevron no encogen. */
.lv-index > button.lv-index__header .lv-index__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lv-index > button.lv-index__header .lv-index__icon,
.lv-index > button.lv-index__header .lv-index__chevron {
	flex-shrink: 0;
}

.lv-index__chevron {
	display: none;
	margin-inline-start: auto;
	font-size: var(--lv-index-chevron-size, 20px);
	line-height: 1;
	transition: transform 0.35s ease;
}

.lv-index__chevron svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-index__chevron i {
	font-size: inherit;
}

/* Modo colapsado: clase que el JS sincroniza por matchMedia. El selector del
   cursor iguala al del reset de arriba (0,2,1) y gana por orden en la hoja. */
.lv-index--collapsed > button.lv-index__header {
	cursor: pointer;
}

.lv-index--collapsed .lv-index__header {
	transition: margin-block-end 0.35s ease;
}

.lv-index--collapsed .lv-index__chevron {
	display: inline-flex;
}

.lv-index--collapsed .lv-index__header[aria-expanded="true"] .lv-index__chevron {
	transform: rotate(180deg);
}

.lv-index--collapsed .lv-index__nav {
	overflow: hidden;
	transition: max-height 0.35s ease, visibility 0s;
}

/*
 * Cerrado en reposo, anclado a :not([aria-expanded="true"]) para matchear
 * también el HTML pre-JS (sin atributo) y morir solo al abrir — el estilo
 * inline anti-FOUC del widget usa las mismas claves. visibility saca los
 * enlaces del orden de tabulación; al cerrar se oculta tras la animación
 * (delay asimétrico). El !important del margin gana al control header_gap
 * ({{WRAPPER}}) solo mientras está cerrado.
 */
.lv-index--collapsed .lv-index__header:not([aria-expanded="true"]) {
	margin-block-end: 0 !important;
}

.lv-index--collapsed .lv-index__header:not([aria-expanded="true"]) + .lv-index__nav {
	max-height: 0;
	visibility: hidden;
	transition: max-height 0.35s ease, visibility 0s 0.35s;
}

/* Cierre instantáneo antes del scroll programático a una sección. */
.lv-index--no-anim .lv-index__header,
.lv-index--no-anim .lv-index__nav,
.lv-index--no-anim .lv-index__chevron {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.lv-index__chevron,
	.lv-index--collapsed .lv-index__header,
	.lv-index--collapsed .lv-index__nav {
		transition: none;
	}
}