/* Índice Lateral — nav fixed de progreso de lectura, un punto por sección.
   Defaults calcados de indexdesign-web (.side-index). Ver indexdesign-elementos.md §Índice Lateral. */
:root{
	--indexdesign-sideindex-dot-size-default: 7px;
	--indexdesign-sideindex-dot-color-default: #DFE9EC;
	--indexdesign-sideindex-dot-active-color-default: #39DFAC;
	--indexdesign-sideindex-dot-halo-color-default: rgba(57,223,172,.16);
	--indexdesign-sideindex-text-color-default: #4A6269;
	--indexdesign-sideindex-text-active-color-default: #192D34;
	--indexdesign-sideindex-pill-bg-default: rgba(252,253,254,.92);
	--indexdesign-sideindex-pill-blur-default: 8px;
	--indexdesign-sideindex-offset-default: 34px;
	--indexdesign-sideindex-shadow: 0 22px 46px -22px rgba(25,45,52,.22);
	--indexdesign-sideindex-toggle-size-default: 30px;
	--indexdesign-sideindex-toggle-color-default: #4A6269;
	--indexdesign-sideindex-toggle-bg-default: rgba(252,253,254,.92);
	--indexdesign-sideindex-toggle-border-default: #DFE9EC;
	--indexdesign-sideindex-header-offset-default: 45px;
}

/* top:calc(50% + header-offset), no top:50% a secas: el nav es position:fixed sobre el
   VIEWPORT completo, pero el Header (fixed/sticky, ~90px) ocupa siempre la franja de
   arriba — centrarlo en el 100% del alto de pantalla deja el primer punto pegado contra
   el Header en notebooks de poca altura (medido: 721px de alto, primer punto a 66px,
   adentro de la franja del Header). El offset (mitad del alto del Header) recentra el
   nav en el espacio realmente visible DEBAJO del Header. Reportado por Claudio. */
.indexdesign-sideindex{position:fixed;top:calc(50% + var(--indexdesign-sideindex-header-offset,var(--indexdesign-sideindex-header-offset-default)));transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:20px}
.indexdesign-sideindex-align-right .indexdesign-sideindex{right:var(--indexdesign-sideindex-offset,var(--indexdesign-sideindex-offset-default))}
.indexdesign-sideindex-align-left .indexdesign-sideindex{left:var(--indexdesign-sideindex-offset,var(--indexdesign-sideindex-offset-default))}

.indexdesign-sideindex__items{display:flex;flex-direction:column;gap:inherit;transition:opacity .35s ease,visibility .35s ease}

.indexdesign-sideindex a{font-family:'Sora',sans-serif;font-weight:600;font-size:.72rem;color:var(--indexdesign-sideindex-text-color,var(--indexdesign-sideindex-text-color-default));display:flex;align-items:center;gap:10px;transition:color .25s;text-decoration:none}
.indexdesign-sideindex-align-right .indexdesign-sideindex a{justify-content:flex-end}
.indexdesign-sideindex-align-left .indexdesign-sideindex a{flex-direction:row-reverse;justify-content:flex-end}

.indexdesign-sideindex__dot{width:var(--indexdesign-sideindex-dot-size,var(--indexdesign-sideindex-dot-size-default));height:var(--indexdesign-sideindex-dot-size,var(--indexdesign-sideindex-dot-size-default));border-radius:50%;background:var(--indexdesign-sideindex-dot-color,var(--indexdesign-sideindex-dot-color-default));box-shadow:0 0 0 1px rgba(25,45,52,.15);transition:all .25s;flex-shrink:0}

/* La etiqueta lleva su propio fondo con blur, no solo el color de texto: el
   índice es fixed y pasa por arriba de bandas oscuras y tarjetas de
   cualquier color — así se lee siempre, sea lo que sea que haya debajo. */
.indexdesign-sideindex__lbl{opacity:0;transform:translateX(6px);transition:all .25s;white-space:nowrap;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.indexdesign-sideindex-align-left .indexdesign-sideindex__lbl{transform:translateX(-6px)}

.indexdesign-sideindex a:hover .indexdesign-sideindex__lbl,
.indexdesign-sideindex a.active .indexdesign-sideindex__lbl{
	opacity:1;transform:translateX(0);
	background:var(--indexdesign-sideindex-pill-bg,var(--indexdesign-sideindex-pill-bg-default));
	backdrop-filter:blur(var(--indexdesign-sideindex-pill-blur,var(--indexdesign-sideindex-pill-blur-default)));
	-webkit-backdrop-filter:blur(var(--indexdesign-sideindex-pill-blur,var(--indexdesign-sideindex-pill-blur-default)));
	box-shadow:var(--indexdesign-sideindex-shadow);
}

.indexdesign-sideindex a.active{color:var(--indexdesign-sideindex-text-active-color,var(--indexdesign-sideindex-text-active-color-default))}
.indexdesign-sideindex a.active .indexdesign-sideindex__dot{
	background:var(--indexdesign-sideindex-dot-active-color,var(--indexdesign-sideindex-dot-active-color-default));
	box-shadow:0 0 0 4px var(--indexdesign-sideindex-dot-halo-color,var(--indexdesign-sideindex-dot-halo-color-default));
}

/* Botón de ocultar/mostrar — mismo contenedor flex-column que los items,
   así queda alineado igual (align-self en vez de justify-content porque
   es un único elemento de tamaño fijo, no una fila con dot+label). */
.indexdesign-sideindex__toggle{
	width:var(--indexdesign-sideindex-toggle-size,var(--indexdesign-sideindex-toggle-size-default));
	height:var(--indexdesign-sideindex-toggle-size,var(--indexdesign-sideindex-toggle-size-default));
	flex-shrink:0;padding:0;line-height:0;border-radius:50%;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:var(--indexdesign-sideindex-toggle-bg,var(--indexdesign-sideindex-toggle-bg-default));
	border:1px solid var(--indexdesign-sideindex-toggle-border,var(--indexdesign-sideindex-toggle-border-default));
	color:var(--indexdesign-sideindex-toggle-color,var(--indexdesign-sideindex-toggle-color-default));
	backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
	box-shadow:var(--indexdesign-sideindex-shadow);
	transition:background .2s,border-color .2s,color .2s,transform .2s;
}
/* El punto (7px default) y el botón (30px default) quedan alineados por
   BORDE (flex-end/flex-start), no por CENTRO — con anchos distintos, sus
   centros no coinciden: el botón queda corrido hacia adentro respecto a la
   columna de puntos. Reportado por Claudio, simulado a ojo con margin:-10px
   en DevTools. Corregido con la fórmula real en vez del número fijo, así se
   ajusta solo si el Tamaño del botón o el Tamaño del punto cambian por los
   controles de Estilo: el corrimiento necesario es (ancho botón − ancho
   punto) / 2 — con los defaults (30px y 7px) da 11.5px, muy cerca del -10px
   que Claudio ya había validado visualmente. */
.indexdesign-sideindex-align-right .indexdesign-sideindex__toggle{
	align-self:flex-end;
	margin-right:calc((var(--indexdesign-sideindex-toggle-size,var(--indexdesign-sideindex-toggle-size-default)) - var(--indexdesign-sideindex-dot-size,var(--indexdesign-sideindex-dot-size-default))) / -2);
}
.indexdesign-sideindex-align-left .indexdesign-sideindex__toggle{
	align-self:flex-start;
	margin-left:calc((var(--indexdesign-sideindex-toggle-size,var(--indexdesign-sideindex-toggle-size-default)) - var(--indexdesign-sideindex-dot-size,var(--indexdesign-sideindex-dot-size-default))) / -2);
}
/* El reset.css de hello-elementor trae button:hover,:focus{background-color:#c36}
   (especificidad 0,1,1) — sin repetir background-color/color aca explicito,
   esa propiedad puntual la gana el reset aunque el resto del selector no
   aplique. Mismo bug ya resuelto en widget-faqs.css, ver indexdesign-elementos.md. */
.indexdesign-sideindex__toggle:hover,
.indexdesign-sideindex__toggle:focus{
	background:var(--indexdesign-sideindex-toggle-bg,var(--indexdesign-sideindex-toggle-bg-default));
	color:var(--indexdesign-sideindex-text-active-color,var(--indexdesign-sideindex-text-active-color-default));
}
.indexdesign-sideindex__toggle svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.indexdesign-sideindex__toggle-show{display:none}
.indexdesign-sideindex.is-collapsed .indexdesign-sideindex__toggle-show{display:block}
.indexdesign-sideindex.is-collapsed .indexdesign-sideindex__toggle-hide{display:none}

/* Alineación izquierda: mismos 2 SVG de flecha (dibujados para la derecha),
   se invierten en espejo en vez de duplicar el marcado. El ícono de ojo es
   simétrico, invertirlo no cambia nada. */
.indexdesign-sideindex-align-left .indexdesign-sideindex__toggle svg{transform:scaleX(-1)}

/* opacity+visibility, no display:none: el <nav> completo esta centrado con
   top:50%/translateY(-50%), asi que su alto total define ese centro. Si los
   items desaparecieran del flujo, el nav se achicaria al colapsar y el
   boton (el unico elemento que queda) saltaria al centro exacto de la
   pantalla — reportado por Claudio. Ocultando visualmente sin sacar del
   flujo, el nav nunca cambia de alto y el boton no se mueve. */
.indexdesign-sideindex.is-collapsed .indexdesign-sideindex__items{opacity:0;visibility:hidden;pointer-events:none}

/* Breakpoint fijo, calcado del original (960px) — no coincide con ninguno de
   los 2 breakpoints del Kit de Elementor (768/1025), así que se resuelve acá
   en vez de con los controles nativos "Ocultar en" (Avanzado → Responsive). */
@media(max-width:960px){
	.indexdesign-sideindex{display:none}
}