/*
  Bloque "Àncores flotants" (spora/anchor-flotante) — front + editor.

  FRONT: dos piezas. El marcador (.spora-anchor-flotante-slot) se queda en el
  flujo del contenido y reserva el alto del índice; el índice
  (.spora-anchor-flotante) lo cuelga view.js del <body> y lo coloca encima del
  marcador, con el ancho de su contenedor. Es un sticky con tope: en su sitio,
  fijo al llegar arriba (.is-stuck) y, al llegar a la última sección anclada, se
  va con la página. La posición (top / left / width) la escribe view.js en línea;
  aquí solo se decide absolute o fixed. Ver la cabecera de view.js.

  SIN CAJA: no hay fondo, ni borde, ni sombra, ni relleno. Son las palabras
  sueltas sobre el contenido. OJO: al no haber fondo blanco detrás, mientras va
  fijo las entradas quedan a merced de lo que pase por debajo — sobre imágenes o
  fondos oscuros el gris apagado del estado en reposo se lee mal.

  EDITOR (.spora-anchor-flotante-editor): tarjeta normal en el flujo del
  contenido. Si en el editor también flotara, taparía la interfaz y no se podría
  escribir dentro.

  Los colores y tamaños van con FALLBACK contra el preset de WordPress, no
  contra los alias --spora-* de style.css: en el editor esta hoja se encola sola
  y el :root del tema puede no estar.

  SIN HOVER: las entradas son <button> y el tema los pinta como botones de
  verdad (fondo, borde, sombra, estados). Se neutralizan todos los estados
  explícitamente; la única entrada que se marca es la de la sección que se está
  leyendo, y eso lo decide el scroll.
*/

/* ---------------------------------------------------------------------------
   Front: el índice flotante
   --------------------------------------------------------------------------- */

/* Marcador: no se ve. Se queda en el flujo del contenido y view.js le da en
   línea el alto del índice, para que el contenido de debajo no se le meta por
   debajo mientras está en su sitio. Sin JS mide 0. */
.spora-anchor-flotante-slot {
	height: 0;
	margin: 0;
	padding: 0;
}

/* Mientras el índice siga dentro del marcador es que view.js todavía no lo ha
   movido al body. Ahí no se pinta: sin JavaScript las entradas no saltan a
   ninguna parte, así que un índice muerto solo estorbaría. */
.spora-anchor-flotante-slot .spora-anchor-flotante {
	display: none;
}

.spora-anchor-flotante {
	--af-fg: var(--wp--preset--color--spora-dark-green, #001A17);
	--af-muted: rgba(0, 26, 23, 0.28);

	/* Tramos 1 y 3 (en su sitio / ya soltado): absolute contra el documento, así
	   que scrollea de forma nativa. top / left / width los escribe view.js a
	   partir del marcador. */
	position: absolute;
	top: 0;
	left: 0;
	/* POR ENCIMA DE TODO EL CONTENIDO de la página —secciones, textos e
	   imágenes—, pero POR DEBAJO de la barra del sitio.

	   20 está elegido con medidas, no a ojo: dentro del <article> de la ficha no
	   hay ni un elemento con z-index mayor que 1, así que 20 gana a todo el
	   contenido con margen de sobra. Y queda por debajo del #masthead (99) y de
	   sus submenús (100), que TIENEN que taparlo cuando el índice va fijo justo
	   por debajo de la cabecera. Con un z-index por encima de 100 el índice se
	   pintaba sobre el menú del sitio.

	   HUBO UNA VERSIÓN CON z-index NEGATIVO, para que las imágenes y los textos
	   le pasaran por encima. Se descartó: el single de projecte necesita un fondo
	   opaco en el contenido para el efecto persiana de la cabecera, y contra un
	   fondo opaco un índice en negativo no se ve NUNCA. Los dos efectos son
	   incompatibles; manda el índice.

	   Al estar por encima del contenido recibe sus propios clics, así que NO
	   lleva pointer-events: none ni hace falta repartir los clics por
	   coordenadas. */
	z-index: 20;
	box-sizing: border-box;
	/* Sin caja: solo las palabras. Ni fondo, ni borde, ni sombra, ni relleno. */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	/* SIN transiciones ni transform: la posición la reescribe view.js en cada
	   frame de scroll, y cualquier transición la haría ir persiguiendo al scroll
	   con retardo (un sube-baja elástico al fijarse y al soltarse). */
	transition: none;
	transform: none;
}

/* Tramo 2: fijo por debajo de la cabecera. */
.spora-anchor-flotante.is-stuck {
	position: fixed;
}


/* ---------------------------------------------------------------------------
   Entradas (comunes a front y editor en lo tipográfico)
   --------------------------------------------------------------------------- */

.spora-anchor-flotante__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spora-anchor-flotante__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Las entradas no deben parecer botones. El tema (Astra) pinta cualquier
   <button> con fondo, borde, sombra y color propios, y ADEMÁS le da estados
   :hover / :focus / :active que ganaban por especificidad a lo de aquí: al
   pasar el ratón o al pinchar salía un botón de verdad dentro del índice.
   Se neutraliza en TODOS los estados de una vez, con el nombre del bloque
   delante para ganarle a los selectores por etiqueta del tema.

   El índice NO tiene efecto de hover: la única entrada que cambia es la de la
   sección que se está leyendo, y eso lo decide el scroll, no el ratón. El
   único indicador que queda es el del foco de teclado, más abajo. */
.spora-anchor-flotante .spora-anchor-flotante__item,
.spora-anchor-flotante .spora-anchor-flotante__item:hover,
.spora-anchor-flotante .spora-anchor-flotante__item:focus,
.spora-anchor-flotante .spora-anchor-flotante__item:active {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: none;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--af-muted);
	opacity: 1;
	transform: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

/* La sección que se está leyendo: en oscuro y subrayada. Se repite en los
   mismos estados por el mismo motivo: si no, el :hover del tema (y el de arriba)
   le devolvía el color apagado al pasar el ratón por encima. */
.spora-anchor-flotante .spora-anchor-flotante__item.is-active,
.spora-anchor-flotante .spora-anchor-flotante__item.is-active:hover,
.spora-anchor-flotante .spora-anchor-flotante__item.is-active:focus,
.spora-anchor-flotante .spora-anchor-flotante__item.is-active:active {
	color: var(--af-fg);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	font-weight: 600;
}

/* El foco de teclado sí se marca: no es un efecto de ratón, solo sale
   navegando con el tabulador. */
.spora-anchor-flotante .spora-anchor-flotante__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Entrada sin id de destino: no es clicable, y se nota que falta rellenarla. */
.spora-anchor-flotante .spora-anchor-flotante__item[disabled],
.spora-anchor-flotante .spora-anchor-flotante__item[disabled]:hover,
.spora-anchor-flotante .spora-anchor-flotante__item[disabled]:active {
	cursor: not-allowed;
	opacity: 0.45;
}

/* ---------------------------------------------------------------------------
   Móvil. En tablet se ve y acompaña al scroll igual que en escritorio, y
   también en vertical: el formato es SIEMPRE una entrada debajo de otra.
   HUBO una variante en horizontal (hasta 921px) de cuando el índice iba pegado
   abajo de la pantalla; se quitó el 2026-09-30 porque en tablet partía las
   entradas en filas desiguales.

   Solo en MÓVIL (hasta 767px) view.js no lo fija, y se oculta por defecto
   (interruptor «Ocultar en móvil»). El corte de 767/768px está repetido en
   view.js (STICKY_MQ): si cambia, los dos.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.spora-anchor-flotante.is-hidden-mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spora-anchor-flotante__item {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Editor: tarjeta en el flujo, con el repeater
   --------------------------------------------------------------------------- */

.spora-anchor-flotante-editor {
	padding: 16px;
	border: 1px dashed #ccc;
	border-radius: 6px;
	background: #fff;
}

.spora-anchor-flotante-editor__note {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.4;
	color: #757575;
}

.spora-anchor-flotante-editor__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid #f0f0f0;
}

.spora-anchor-flotante-editor__fields {
	flex: 1 1 auto;
	min-width: 0;
}

.spora-anchor-flotante-editor__tools {
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding-top: 24px;
}

.spora-anchor-flotante-editor__add {
	margin-top: 12px;
}