/* ==========================================================================
   INDI Interactivo · estilos del explorador
   --------------------------------------------------------------------------
   Referencia visual: el explorador estático anterior (legacy/explorador.css,
   legacy/estilo.css y legacy/mapa.html). Se conservan su composición en un
   marco fino, la franja de pestañas, el mapa cálido a todo el ancho, los
   puntos con borde crema, las cifras y el sello sobre el mapa, y la franja de
   filtros con chips.

   Todo está acotado a .indi-explorer / .indi-componente: el plugin no toca
   body, h1, p, img ni button globales. Colores, espacios, pesos y anchos
   salen de Extendable (theme.json → --wp--preset--* y --wp--custom--*) con
   valores de respaldo. Los tonos fijos son los del mapa, que es siempre
   claro, igual que en la versión anterior.
   ========================================================================== */

.indi-explorer,
.indi-componente {
	/* Theme (Extendable). */
	--indi-fg: var(--wp--preset--color--foreground, #12141d);
	--indi-bg: var(--wp--preset--color--background, #ffffff);
	--indi-primario: var(--wp--preset--color--primary, #281616);
	--indi-alt: var(--wp--preset--color--tertiary, #f9f5f1);
	--indi-semi: var(--wp--custom--typography--font-weight--semi-bold, 600);
	--indi-medio: var(--wp--custom--typography--font-weight--medium, 500);
	--indi-titulos: var(--indi-fuente-titulos, Georgia, "Times New Roman", serif);
	--indi-pad: var(--wp--preset--spacing--30, clamp(1.5rem, 6vw, 2rem));

	/* Derivados, como --exp-linea / --exp-suave / --exp-panel del explorador anterior. */
	--indi-suave: #5c5d63;
	--indi-linea: rgba(18, 20, 29, 0.18);
	--indi-tenue: rgba(18, 20, 29, 0.09);
	--indi-linea-fuerte: rgba(18, 20, 29, 0.4);
	--indi-panel: #f7f7f7;

	/* Mapa (siempre claro): tinta, papel y reglas de legacy/mapa.html. */
	--indi-papel: #edeee9;
	--indi-papel-mapa: #f2eee4; /* el crema que resultaba de CARTO + sepia en el mapa anterior */
	--indi-papel-2: #f7f8f4;
	--indi-tinta: #1c211f;
	--indi-tinta-2: #55605b;
	--indi-tinta-3: #8b9490;
	--indi-regla: #c7ccc4;
	--indi-soho: #2c4f63;
	--indi-crisis: #9e3b34;

	--indi-radio: 0.15rem;
	--indi-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--indi-rapido: 160ms ease;

	color: var(--indi-fg);
	font-family: inherit;
	line-height: var(--wp--custom--typography--line-height--normal, 1.6);
	min-width: 0;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.indi-explorer,
	.indi-componente {
		/* 74 %: el texto secundario queda por encima de 4,5:1 sobre todos los papeles. */
		--indi-suave: color-mix(in srgb, var(--indi-fg) 74%, var(--indi-bg));
		--indi-linea: color-mix(in srgb, currentColor 18%, transparent);
		--indi-tenue: color-mix(in srgb, currentColor 9%, transparent);
		--indi-linea-fuerte: color-mix(in srgb, currentColor 40%, transparent);
		--indi-panel: color-mix(in srgb, var(--indi-bg) 96%, currentColor);
	}
}

/* Marco del explorador anterior: filete fino, esquinas apenas redondeadas. */
.indi-explorer,
.indi-componente {
	border: 1px solid var(--indi-linea);
	border-radius: 0.25rem;
	background: var(--indi-bg);
}

:where(.indi-explorer.alignwide, .indi-componente.alignwide) {
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

.indi-explorer *,
.indi-explorer *::before,
.indi-explorer *::after,
.indi-componente *,
.indi-componente *::before,
.indi-componente *::after {
	box-sizing: border-box;
}

/* El atributo hidden gana siempre, aunque el elemento tenga display propio. */
.indi-explorer [hidden],
.indi-componente [hidden] {
	display: none !important;
}

.indi-explorer :focus-visible,
.indi-componente :focus-visible,
.indi-lightbox :focus-visible {
	outline: 2px solid var(--indi-fg);
	outline-offset: 2px;
}

.indi-explorer button,
.indi-explorer input,
.indi-explorer select,
.indi-componente button,
.indi-componente input,
.indi-componente select {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
}

.indi-explorer ol,
.indi-explorer ul,
.indi-componente ol,
.indi-componente ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.indi-explorer p,
.indi-componente p {
	margin: 0;
}

.indi-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html.indi-sin-scroll {
	overflow: hidden;
}

/* ------------------------------ piezas comunes ------------------------------ */

/* Chip del explorador anterior (.exp__chip). */
.indi-explorer .indi-chip,
.indi-componente .indi-chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 1.9rem;
	padding: 0.28rem 0.6rem;
	border: 1px solid var(--indi-linea);
	border-radius: var(--indi-radio);
	background: var(--indi-bg);
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--indi-rapido), border-color var(--indi-rapido), color var(--indi-rapido);
}

.indi-explorer .indi-chip:hover,
.indi-componente .indi-chip:hover {
	border-color: currentColor;
}

.indi-explorer .indi-chip[aria-pressed="true"],
.indi-explorer .indi-chip[aria-expanded="true"],
.indi-componente .indi-chip[aria-pressed="true"],
.indi-componente .indi-chip[aria-expanded="true"] {
	background: var(--indi-primario);
	border-color: var(--indi-primario);
	color: var(--indi-bg);
}

.indi-explorer .indi-boton,
.indi-componente .indi-boton {
	appearance: none;
	display: inline-block;
	background: transparent;
	border: 1px solid var(--indi-fg);
	border-radius: var(--indi-radio);
	padding: 0.65rem 1.3rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--indi-rapido), color var(--indi-rapido);
}

.indi-explorer .indi-boton:hover,
.indi-componente .indi-boton:hover {
	background: var(--indi-primario);
	border-color: var(--indi-primario);
	color: var(--indi-bg);
}

.indi-explorer .indi-boton:disabled,
.indi-componente .indi-boton:disabled {
	opacity: 0.5;
	cursor: progress;
}

.indi-explorer .indi-boton-texto,
.indi-explorer .indi-enlace,
.indi-componente .indi-boton-texto,
.indi-componente .indi-enlace {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-size: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.indi-explorer .indi-boton-texto:hover,
.indi-explorer .indi-enlace:hover,
.indi-componente .indi-boton-texto:hover,
.indi-componente .indi-enlace:hover {
	text-decoration-thickness: 2px;
}

.indi-estado {
	padding: 2.5rem var(--indi-pad);
	color: var(--indi-suave);
	font-size: 0.9375rem;
}

.indi-estado p + .indi-boton {
	margin-top: 1rem;
}

.indi-estado--error {
	color: var(--indi-crisis);
}

/* Punto de leyenda / lista: el mismo marcador del mapa, en chico. */
.indi-punto {
	display: inline-block;
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--indi-c, var(--indi-tinta-3));
	box-shadow: 0 0 0 0.5px rgba(28, 33, 31, 0.35);
}

.indi-punto--closed {
	background: transparent;
	border: 1.5px solid var(--indi-c, var(--indi-tinta-3));
	box-shadow: none;
}

/*
 * Barra de filtros: la franja .exp__filtros del explorador anterior. Etiquetas
 * mínimas en versalitas, selects compactos, chips a la derecha. En pantallas
 * chicas los campos se pliegan bajo «Filtros».
 */
.indi-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	padding: 0.55rem 1rem;
	border-top: 1px solid var(--indi-linea);
	background: var(--indi-panel);
}

.indi-barra__campos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	min-width: 0;
}

.indi-barra__grupo {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.indi-barra__et {
	font-size: 0.5625rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.82;
	white-space: nowrap;
}

.indi-explorer .indi-barra__sel,
.indi-explorer .indi-barra__buscar,
.indi-componente .indi-barra__sel,
.indi-componente .indi-explorer .indi-barra__buscar,
.indi-componente .indi-barra__buscar {
	min-height: 1.9rem;
	max-width: 8.5rem;
	padding: 0.28rem 0.55rem;
	border: 1px solid var(--indi-linea);
	border-radius: var(--indi-radio);
	background-color: var(--indi-bg);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.indi-explorer .indi-barra__sel,
.indi-componente .indi-barra__sel {
	padding-right: 1.5rem;
	appearance: none;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.indi-barra__buscar {
	width: 11rem;
	max-width: 100%;
}

.indi-explorer .indi-barra__sel:hover,
.indi-explorer .indi-barra__sel:focus,
.indi-explorer .indi-barra__buscar:focus,
.indi-componente .indi-barra__sel:hover,
.indi-componente .indi-barra__sel:focus,
.indi-componente .indi-barra__buscar:focus {
	border-color: currentColor;
}

.indi-barra__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-left: auto;
}

.indi-explorer .indi-barra__plegar,
.indi-componente .indi-barra__plegar {
	display: none;
}

@media (max-width: 699px) {
	.indi-explorer .indi-barra__plegar,
	.indi-componente .indi-barra__plegar {
		display: inline-flex;
	}

	.indi-barra__campos {
		display: none;
		order: 3;
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding-top: 0.3rem;
	}

	.indi-barra.es-abierta .indi-barra__campos {
		display: flex;
	}

	.indi-barra__grupo {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.indi-explorer .indi-barra__sel,
	.indi-explorer .indi-barra__buscar,
	.indi-componente .indi-barra__sel,
	.indi-componente .indi-barra__buscar {
		width: 100%;
		max-width: none;
		min-height: 2.75rem;
		font-size: 1rem;
	}

	.indi-explorer .indi-chip,
	.indi-componente .indi-chip {
		min-height: 2.75rem;
		padding-inline: 0.8rem;
	}
}

/* ================================ pestañas ================================ */

/*
 * La franja de pestañas del explorador anterior (.exp__tabs): fondo de panel,
 * rótulo breve y bajada en versalitas; la activa toma el fondo de la página y
 * una línea de 2 px en el color primario del theme. Se agrega la numeración.
 */
.indi-explorer__tabs {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--indi-linea);
	border-radius: 0.25rem 0.25rem 0 0;
	background: var(--indi-panel);
}

.indi-explorer__tabs::-webkit-scrollbar {
	display: none;
}

.indi-explorer__tab {
	appearance: none;
	flex: none;
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 0.45rem;
	align-items: baseline;
	margin-bottom: -1px;
	padding: 0.8rem 1.35rem 0.7rem 1.1rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--indi-rapido), border-color var(--indi-rapido);
}

.indi-explorer__tab:hover {
	background: var(--indi-tenue);
}

.indi-explorer__tabnum {
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	opacity: 0.75;
}

.indi-explorer__tablabel {
	font-size: 0.875rem;
	font-weight: var(--indi-semi);
	line-height: 1.2;
}

.indi-explorer__tabsub {
	grid-column: 2;
	margin-top: 0.2rem;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.indi-explorer__tab[aria-selected="true"] {
	background: var(--indi-bg);
	border-bottom-color: var(--indi-primario);
}

.indi-explorer__tab[aria-selected="true"] .indi-explorer__tabsub,
.indi-explorer__tab[aria-selected="true"] .indi-explorer__tabnum {
	opacity: 0.9;
}

.indi-explorer__tab:focus-visible {
	outline-offset: -3px;
}

.indi-explorer__panel:focus-visible {
	outline-offset: -3px;
}

@media (max-width: 599px) {
	/* Cuatro pestañas tienen que entrar enteras: sin número ni bajada. */
	.indi-explorer__tab {
		flex: 1 1 0;
		justify-content: center;
		grid-template-columns: auto;
		padding: 0.85rem 0.4rem 0.75rem;
		text-align: center;
	}

	.indi-explorer__tabsub,
	.indi-explorer__tabnum {
		display: none;
	}
}

/* ================================== mapa ================================== */

/*
 * Etapas del mapa: relevamientos discretos, no una serie anual.
 *
 * A la izquierda, la etapa activa en grande y, debajo, contra qué se la
 * compara. A la derecha, las cinco etapas a la misma distancia (son
 * relevamientos, no años); entre cada par, un tramo dice cuánto tiempo pasó y
 * si las etapas se vinculan local por local (línea continua) o no (punteada).
 * Un carro se desliza hasta la etapa activa; la anterior queda marcada como
 * referencia, y el tramo que las une es el cambio que muestra el mapa.
 */
.indi-map__tiempo {
	border-bottom: 1px solid var(--indi-linea);
	background: var(--indi-panel);
}

.indi-tiempo {
	display: grid;
	grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem 2.25rem;
	padding: 0.9rem 1.25rem 0.75rem;
}

.indi-tiempo__et {
	font-size: 0.5625rem;
	font-weight: var(--indi-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.indi-tiempo__nombre {
	margin-top: 0.15rem;
	font-family: var(--indi-titulos);
	font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.9rem);
	line-height: 0.95;
	letter-spacing: -0.025em;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

.indi-tiempo__nombre.es-nueva {
	animation: indi-etapa-entra 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes indi-etapa-entra {
	from {
		opacity: 0.15;
		transform: translateY(0.3rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.indi-tiempo__pasos {
	display: flex;
	margin-top: 0.15rem;
}

/* «Recorrer las etapas»: una acción de texto, como «El sector en cifras». */
.indi-explorer .indi-tiempo__recorrer,
.indi-componente .indi-tiempo__recorrer {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--indi-linea-fuerte);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

/* Triángulo de reproducir; dos barras en pausa. */
.indi-tiempo__recorrer::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.3rem 0 0.3rem 0.5rem;
	border-color: transparent transparent transparent currentColor;
}

.indi-tiempo__recorrer[aria-pressed="true"]::before {
	width: 0.45rem;
	height: 0.6rem;
	border-width: 0 0.15rem;
	border-color: currentColor;
}

.indi-tiempo__recorrer:hover {
	text-decoration-color: currentColor;
}

/* La pista: estaciones y tramos en una grilla (columnas puestas por mapa.js). */
.indi-tiempo__linea {
	position: relative;
	min-width: 0;
	/* Arrastrar en horizontal mueve la etapa; en vertical, la página. */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.indi-tiempo__etapas {
	--indi-riel: 1.05rem;
	position: relative;
	display: grid;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El carro: un fondo que se desliza hasta la etapa activa. */
.indi-tiempo__carro {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 0.3rem;
	background: var(--indi-bg);
	box-shadow: 0 0 0 1px var(--indi-linea);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.es-arrastrando .indi-tiempo__carro {
	transition: none;
	box-shadow: 0 0 0 1px var(--indi-linea-fuerte);
}

.indi-explorer .indi-etapa,
.indi-componente .indi-etapa {
	appearance: none;
	position: relative;
	display: grid;
	justify-items: center;
	grid-template-rows: calc(var(--indi-riel) * 2) auto auto;
	min-width: 3.4rem;
	min-height: 2.75rem;
	padding: 0 0.55rem 0.45rem;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.indi-etapa__marca {
	align-self: center;
	width: 0.75rem;
	height: 0.75rem;
	border: 1.5px solid var(--indi-linea-fuerte);
	border-radius: 50%;
	background: var(--indi-panel);
	transition: transform 260ms ease, background-color 260ms ease, border-color 260ms ease;
}

.indi-etapa__anio {
	font-family: var(--indi-titulos);
	font-size: 1rem;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
	color: var(--indi-suave);
}

.indi-etapa__cant {
	margin-top: 0.1rem;
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	color: var(--indi-suave);
}

.indi-etapa:hover .indi-etapa__anio,
.indi-etapa.es-previa .indi-etapa__anio {
	color: var(--indi-fg);
}

.indi-etapa:hover .indi-etapa__marca,
.indi-etapa.es-previa .indi-etapa__marca {
	border-color: var(--indi-fg);
}

.indi-etapa.es-pasada .indi-etapa__marca {
	background: var(--indi-linea-fuerte);
	border-color: transparent;
}

.indi-etapa.es-actual .indi-etapa__marca {
	border-color: var(--indi-fg);
	background: var(--indi-fg);
	transform: scale(1.35);
}

.indi-etapa.es-actual .indi-etapa__anio,
.indi-etapa.es-actual .indi-etapa__cant {
	color: var(--indi-fg);
	font-weight: var(--indi-semi);
}

.indi-etapa:focus-visible {
	outline: 2px solid var(--indi-fg);
	outline-offset: -2px;
	border-radius: 0.3rem;
}

/* Tramo: cuánto tiempo pasó y si se vinculan. */
.indi-tramo {
	position: relative;
	display: grid;
	justify-items: center;
	grid-template-rows: calc(var(--indi-riel) * 2) auto auto;
	min-width: 0;
	pointer-events: none;
}

.indi-tramo__linea {
	position: absolute;
	top: calc(var(--indi-riel) - 1px);
	left: -0.2rem;
	right: -0.2rem;
	height: 2px;
	background: var(--indi-linea-fuerte);
}

/* El tramo que lleva a la etapa activa. */
.indi-tramo.es-cambio .indi-tramo__linea {
	top: calc(var(--indi-riel) - 1.5px);
	height: 3px;
	background: var(--indi-fg);
}

/* El sector en cifras del año de la etapa (abre la vista Datos). */
.indi-tiempo__cifras {
	margin-top: 0.45rem;
}

.indi-explorer .indi-tiempo__cifras a,
.indi-componente .indi-tiempo__cifras a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	color: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.indi-explorer .indi-tiempo__cifras a::after,
.indi-componente .indi-tiempo__cifras a::after {
	content: " →";
	white-space: pre;
}

/*
 * Panel de indicadores: una columna junto al mapa (arriba en móvil), en el
 * papel del cajón de la lista. Una cifra en tinta, su proporción, dos
 * acciones de texto y los barrios en líneas finas. El rojo queda para lo que
 * cerró (el tramo de la barra y su símbolo), como en los puntos del mapa; la
 * explicación metodológica se pliega en «Cómo se calcula».
 */
.indi-map__cuerpo {
	--indi-alto-mapa: clamp(560px, 70vh, 820px);
	--indi-cierre: #b2182b;
	--indi-gris-barra: #c9c6bd;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.indi-indicadores {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.35rem 1.35rem 1.1rem;
	background: var(--indi-papel-2);
	border-bottom: 1px solid var(--indi-regla);
	color: var(--indi-tinta);
	font-size: 0.8125rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.indi-indicadores[hidden] {
	display: none;
}

/* Si el panel desborda, se desplaza: nada se achica. */
.indi-indicadores > * {
	flex-shrink: 0;
}

@media (min-width: 900px) {
	/* Columnas fijas: el mapa nace con su ancho final aunque el panel todavía no se haya dibujado. */
	.indi-map__cuerpo {
		grid-template-columns: 18.5rem minmax(0, 1fr);
	}

	.indi-map__cuerpo > .indi-indicadores {
		grid-column: 1;
		grid-row: 1;
		height: var(--indi-alto-mapa);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--indi-regla) transparent;
		border-bottom: 0;
		border-right: 1px solid var(--indi-regla);
	}

	.indi-map__cuerpo > .indi-map__escenario {
		grid-column: 2;
		grid-row: 1;
	}
}

.indi-ind__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 1.75rem;
}

.indi-explorer .indi-ind__titulo,
.indi-componente .indi-ind__titulo,
.indi-explorer .indi-ind__subtitulo,
.indi-componente .indi-ind__subtitulo {
	margin: 0;
	font-family: inherit;
	font-size: 0.5625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--indi-tinta-2);
}

/* El barrio elegido: una etiqueta que se quita con un toque. */
.indi-explorer .indi-ind__quitar,
.indi-componente .indi-ind__quitar {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	min-height: 1.75rem;
	padding: 0.1rem 0.45rem 0.1rem 0.6rem;
	border: 1px solid var(--indi-linea-fuerte);
	border-radius: var(--indi-radio);
	background: var(--indi-bg);
	color: var(--indi-tinta);
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}

.indi-ind__quitar svg {
	width: 0.65rem;
	height: 0.65rem;
	color: var(--indi-tinta-2);
}

.indi-ind__quitar:hover {
	border-color: var(--indi-tinta);
}

.indi-ind__principal {
	margin-top: 0.35rem;
}

.indi-ind__cifra {
	margin: 0;
	font-family: var(--indi-titulos);
	font-size: clamp(2.6rem, 3.6vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--indi-tinta);
}

.indi-ind__cifra.es-conteo {
	font-size: clamp(2.1rem, 3vw, 2.5rem);
}

.indi-ind__def {
	margin: 0.4rem 0 0;
	max-width: 30ch;
	font-size: 0.78125rem;
	line-height: 1.45;
	color: var(--indi-tinta-2);
	text-wrap: pretty;
}

/* Proporción: un trazo fino; sólo lo cerrado en rojo. */
.indi-ind__barra {
	display: flex;
	gap: 2px;
	height: 0.3125rem;
	margin-top: 1rem;
}

.indi-ind__seg {
	min-width: 2px;
	border-radius: 1px;
}

.indi-ind__seg.es-cerrado {
	background: var(--indi-cierre);
}

.indi-ind__seg.es-abierto {
	background: var(--indi-gris-barra);
}

.indi-ind__leyenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.9rem;
	margin: 0.55rem 0 0;
	font-size: 0.71875rem;
	color: var(--indi-tinta-2);
}

.indi-ind__leyenda > span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.indi-ind__leyenda b {
	font-weight: 600;
	color: var(--indi-tinta);
}

.indi-ind__general {
	margin-left: auto;
}

.indi-indicadores [data-simbolo] {
	display: inline-flex;
}

/* Acciones de texto, en el idioma de «El sector en cifras»: sin cajas ni color. */
.indi-ind__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.1rem;
	margin-top: 0.8rem;
}

.indi-explorer .indi-ind__accion,
.indi-componente .indi-ind__accion {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--indi-tinta);
	font: inherit;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--indi-linea-fuerte);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	cursor: pointer;
	transition: text-decoration-color var(--indi-rapido);
}

.indi-ind__accion:hover {
	text-decoration-color: currentColor;
}

.indi-ind__accion[aria-pressed="true"] {
	text-decoration-color: var(--indi-cierre);
	text-decoration-thickness: 2px;
}

.indi-ind__accion[data-como]::after {
	content: "";
	width: 0.32rem;
	height: 0.32rem;
	margin: -0.15rem 0 0 0.1rem;
	border-right: 1.25px solid currentColor;
	border-bottom: 1.25px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--indi-rapido), margin var(--indi-rapido);
}

.indi-ind__accion[data-como][aria-expanded="true"]::after {
	margin-top: 0.2rem;
	transform: rotate(-135deg);
}

/* La explicación desplegada: texto chico, sobre el papel, sin caja. */
.indi-ind__como {
	flex-basis: 100%;
	margin: 0.35rem 0 0.15rem;
	padding: 0.1rem 0 0.1rem 0.75rem;
	border-left: 1px solid var(--indi-regla);
	font-size: 0.71875rem;
	line-height: 1.5;
	color: var(--indi-tinta-2);
}

.indi-ind__como[hidden] {
	display: none;
}

.indi-ind__como p {
	margin: 0;
}

.indi-ind__como p + p {
	margin-top: 0.45rem;
}

.indi-explorer .indi-ind__como a,
.indi-componente .indi-ind__como a {
	color: var(--indi-tinta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.indi-explorer .indi-ind__como a::after,
.indi-componente .indi-ind__como a::after {
	content: " →";
}

/* Por barrio: una línea por barrio, barras grises; la tasa general como marca. */
.indi-ind__barrios {
	margin-top: 1.25rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--indi-regla);
}

.indi-ind__barrios-cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.3rem;
}

.indi-ind__clave {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.6875rem;
	color: var(--indi-tinta-2);
}

.indi-ind__clave i {
	width: 1px;
	height: 0.7rem;
	background: var(--indi-tinta);
}

.indi-ind__lista,
.indi-ind__mini {
	margin: 0;
	padding: 0;
	list-style: none;
}

.indi-explorer .indi-ind__fila,
.indi-componente .indi-ind__fila {
	appearance: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 2.9rem;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	width: calc(100% + 0.8rem);
	margin: 0 -0.4rem;
	padding: 0.4rem 0.4rem 0.5rem;
	border: 0;
	border-radius: var(--indi-radio);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--indi-rapido);
}

.indi-explorer .indi-ind__fila.es-conteo,
.indi-componente .indi-ind__fila.es-conteo {
	grid-template-columns: minmax(0, 1fr) auto;
}

.indi-ind__fila:hover {
	background: var(--indi-papel);
}

.indi-ind__fila[aria-pressed="true"] {
	background: var(--indi-bg);
	box-shadow: inset 0 0 0 1px var(--indi-linea-fuerte);
}

.indi-ind__fila-nombre {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.indi-ind__fila[aria-pressed="true"] .indi-ind__fila-nombre {
	font-weight: 600;
}

.indi-ind__fila-valor {
	text-align: right;
	font-weight: 600;
}

.indi-ind__fila-n {
	text-align: right;
	font-size: 0.6875rem;
	color: var(--indi-tinta-3);
}

.indi-ind__fila-pista {
	grid-column: 1 / -1;
	position: relative;
	height: 0.1875rem;
	border-radius: 1px;
	background: var(--indi-tenue);
}

.indi-ind__fila-pista > span {
	display: block;
	height: 100%;
	border-radius: 1px;
	background: var(--indi-tinta-3);
}

.indi-ind__fila:hover .indi-ind__fila-pista > span,
.indi-ind__fila[aria-pressed="true"] .indi-ind__fila-pista > span {
	background: var(--indi-tinta-2);
}

/* La tasa general, como referencia en cada barrio. */
.indi-ind__fila-pista > i {
	position: absolute;
	top: -0.2rem;
	bottom: -0.2rem;
	width: 1.5px;
	background: var(--indi-tinta);
}

.indi-ind__pocos {
	margin-top: 0.35rem;
}

.indi-ind__pocos summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2rem;
	font-size: 0.71875rem;
	color: var(--indi-tinta-2);
	cursor: pointer;
	list-style: none;
}

.indi-ind__pocos summary::-webkit-details-marker {
	display: none;
}

.indi-ind__pocos summary::before {
	content: "";
	width: 0.32rem;
	height: 0.32rem;
	border-right: 1.25px solid currentColor;
	border-bottom: 1.25px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--indi-rapido);
}

.indi-ind__pocos[open] summary::before {
	transform: rotate(45deg);
}

.indi-ind__pocos summary:hover {
	color: var(--indi-tinta);
}

.indi-explorer .indi-ind__mini button,
.indi-componente .indi-ind__mini button {
	appearance: none;
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	width: calc(100% + 0.8rem);
	margin: 0 -0.4rem;
	padding: 0.28rem 0.4rem;
	border: 0;
	border-radius: var(--indi-radio);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	text-align: left;
	cursor: pointer;
}

.indi-ind__mini button:hover {
	background: var(--indi-papel);
}

.indi-ind__mini button[aria-pressed="true"] {
	background: var(--indi-bg);
	box-shadow: inset 0 0 0 1px var(--indi-linea-fuerte);
	font-weight: 600;
}

.indi-ind__mini button span:last-child {
	color: var(--indi-tinta-2);
	white-space: nowrap;
}

.indi-indicadores button:focus-visible,
.indi-ind__pocos summary:focus-visible,
.indi-ind__como a:focus-visible {
	outline: 2px solid var(--indi-tinta);
	outline-offset: 2px;
}

/* Hasta tableta, el panel va arriba del mapa y compacto: la cifra y su definición en una fila. */
@media (max-width: 899px) {
	.indi-indicadores {
		padding: 0.9rem 0.85rem 0.85rem;
	}

	.indi-ind__principal {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 0.9rem;
	}

	.indi-ind__cifra {
		font-size: 2.4rem;
	}

	.indi-ind__def {
		margin: 0;
		max-width: none;
		font-size: 0.75rem;
	}

	.indi-ind__def.es-sola {
		grid-column: 1 / -1;
	}

	.indi-ind__barra {
		margin-top: 0.8rem;
	}

	.indi-ind__barrios {
		margin-top: 0.9rem;
		padding-top: 0.65rem;
	}
}

/* Encuadres: la única forma, además de cargar, de mover la cámara sin tocar el mapa. */
.indi-map__encuadres {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 500;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	max-width: calc(100% - 1.5rem);
	padding: 0.2rem 0.25rem 0.2rem 0.55rem;
	border: 1px solid rgba(28, 33, 31, 0.16);
	border-radius: 0.2rem;
	background: rgba(255, 255, 255, 0.94);
	color: var(--indi-tinta);
}

.indi-map__encuadres-et {
	margin-right: 0.15rem;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--indi-tinta-2);
}

.indi-explorer .indi-map__encuadres button,
.indi-componente .indi-map__encuadres button {
	appearance: none;
	min-height: 2rem;
	padding: 0.2rem 0.55rem;
	border: 1px solid transparent;
	border-radius: 0.15rem;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	white-space: nowrap;
	cursor: pointer;
}

.indi-map__encuadres button:hover,
.indi-map__encuadres button:focus-visible {
	border-color: var(--indi-tinta);
}

/* El mapa: protagonista, a todo el ancho del marco. */
.indi-map__escenario {
	position: relative;
	height: var(--indi-alto-mapa, clamp(560px, 70vh, 820px));
	background: var(--indi-papel-mapa);
	overflow: hidden;
}

.indi-map__lienzo {
	position: absolute;
	inset: 0;
}

/* Cifras y sello sobre el mapa (.exp__cifras y .exp__sello). */
.indi-map__cifras {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	z-index: 500;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	max-width: calc(100% - 1.5rem);
	padding: 0.45rem 0.7rem;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(28, 33, 31, 0.16);
	border-radius: 0.2rem;
	color: var(--indi-tinta);
	pointer-events: none;
}

.indi-map__cifras b {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--indi-soho);
}

.indi-map__cifras span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.5625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.7;
}

.indi-map__sello {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	z-index: 500;
	padding: 0.2rem 0.45rem;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--indi-crisis);
	border-radius: var(--indi-radio);
	color: var(--indi-crisis);
	font-size: 0.5625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Estados sobre el mapa: la franja inferior .exp__desierto. */
.indi-map__escenario .indi-estado {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 650;
	padding: 0.6rem 1rem;
	background: rgba(255, 255, 255, 0.93);
	border-top: 1px solid rgba(28, 33, 31, 0.14);
	color: var(--indi-tinta);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.indi-map__escenario .indi-estado--error {
	color: var(--indi-crisis);
}

.indi-map__escenario .indi-estado .indi-boton {
	margin-top: 0.4rem;
	padding: 0.35rem 0.8rem;
}

/* Lista de resultados: un cajón sobre el mapa, sólo cuando se pide. */
.indi-map__cajon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 600;
	width: min(21rem, 100%);
	display: flex;
	flex-direction: column;
	background: var(--indi-papel-2);
	border-left: 1px solid var(--indi-regla);
	color: var(--indi-tinta);
}

.indi-map__cajon-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.4rem 0.5rem 0.9rem;
	border-bottom: 1px solid var(--indi-regla);
}

.indi-map__cajon-titulo {
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--indi-tinta-2);
}

.indi-explorer .indi-map__cerrar,
.indi-componente .indi-map__cerrar {
	appearance: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--indi-tinta-2);
	cursor: pointer;
}

.indi-map__cerrar svg {
	width: 0.9rem;
	height: 0.9rem;
}

.indi-map__cerrar:hover {
	color: var(--indi-tinta);
}

.indi-map__resultados {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Ítem de lista de legacy/mapa.html (.item). */
.indi-explorer .indi-map__item,
.indi-componente .indi-map__item {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0.55rem 0.8rem 0.55rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--indi-regla);
	border-left: 2px solid transparent;
	background: none;
	color: var(--indi-tinta);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s;
}

.indi-map__item:hover {
	background: var(--indi-papel);
	border-left-color: var(--indi-tinta);
}

.indi-map__item-nombre {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	font-size: 0.8125rem;
	font-weight: var(--indi-semi);
	line-height: 1.32;
	overflow-wrap: anywhere;
}

.indi-map__item-nombre .indi-simbolo {
	transform: translateY(0.1rem);
}

.indi-map__item-meta {
	display: block;
	margin-top: 0.1rem;
	padding-left: 1.15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	color: var(--indi-tinta-2);
}

.indi-map__item-nombre.es-anonimo,
.indi-ficha-mapa__titulo.es-anonimo {
	font-style: italic;
	font-weight: 400;
	color: var(--indi-tinta-2);
}

.indi-explorer .indi-map__mas,
.indi-componente .indi-map__mas {
	margin: 0.7rem 0.8rem;
	align-self: flex-start;
	background: transparent;
}

/* Con el cajón abierto, el zoom se corre para no quedar tapado. */
.indi-map.con-cajon .leaflet-bottom.leaflet-right {
	right: min(21rem, 100%);
}

/* Pie: leyenda y nota de la capa (.mapa-pie). */
.indi-map__pie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.6rem 2rem;
	padding: 0.8rem 1rem 0.9rem;
	border-top: 1px solid var(--indi-linea);
	font-size: 0.8125rem;
}

.indi-map__pie:empty {
	display: none;
}

.indi-ficha-mapa__estado-cambio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.15rem 0 0.35rem;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Estado documentado: independiente del cambio (dimensión 2). */
.indi-ficha-mapa__doc {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	color: #b2182b;
}

/* Otros locales en exactamente la misma ubicación (sin desplazar ninguno). */
.indi-ficha-mapa__juntos {
	margin-top: 0.5rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--indi-regla);
	font-size: 0.75rem;
}

.indi-ficha-mapa__juntos ul {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.indi-ficha-mapa__juntos li button {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 1.75rem;
	text-align: left;
}


.indi-map__nota {
	max-width: 44rem;
	opacity: 0.7;
}

.indi-map__aviso {
	flex: 1 0 100%;
	max-width: 60rem;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.indi-map__aviso b {
	font-weight: var(--indi-semi);
}

@media (max-width: 699px) {
	/*
	 * Móvil: la etapa y sus botones en una fila; las etapas a todo el ancho,
	 * sin rótulos en los tramos (la duración va en la línea de comparación);
	 * el resumen en una columna, con el balance debajo.
	 */
	.indi-tiempo {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 0.75rem 0.75rem 0.5rem;
	}

	.indi-tiempo__nombre {
		font-size: 2rem;
	}


	.indi-explorer .indi-etapa,
	.indi-componente .indi-etapa {
		min-width: 2.75rem;
		padding-inline: 0.1rem;
	}

	.indi-etapa__anio {
		font-size: 0.8125rem;
	}

	.indi-map__encuadres {
		top: 0.5rem;
		right: 0.5rem;
		max-width: calc(100% - 1rem);
		overflow-x: auto;
	}

	.indi-map__encuadres-et {
		display: none;
	}

	.indi-map__escenario {
		height: clamp(380px, 64vh, 560px);
	}

	/* El cajón pasa a ser una hoja inferior que deja ver el mapa arriba. */
	.indi-map__cajon {
		top: auto;
		left: 0;
		width: 100%;
		height: 62%;
		border-left: 0;
		border-top: 1px solid var(--indi-regla);
	}

	.indi-map.con-cajon .leaflet-bottom.leaflet-right {
		right: 0;
	}

	.indi-map__cifras {
		left: 0.5rem;
		top: 0.5rem;
		max-width: calc(100% - 1rem);
	}

	/* En pantallas chicas el sello baja para no tapar las cifras. */
	.indi-map__sello {
		top: auto;
		right: auto;
		left: 0.5rem;
		bottom: 0.5rem;
	}
}

/* --------------------------- Leaflet, sólo acá --------------------------- */

.indi-map .leaflet-container {
	font-family: inherit;
	color: var(--indi-tinta);
}

/*
 * Base cartográfica: OpenStreetMap llevado al papel cálido y de bajo
 * contraste del mapa anterior (CARTO + saturate/sepia): grises con un toque de
 * sepia, al 60 % sobre papel crema. El filtro se aplica sólo a las teselas;
 * marcadores, controles y popups quedan intactos.
 */
.indi-map .leaflet-container {
	background: var(--indi-papel-mapa);
}

.indi-map .leaflet-tile-pane {
	filter: grayscale(1) sepia(0.22) contrast(0.62) brightness(1.08) opacity(0.5);
}

.indi-map .leaflet-bar {
	border: 1px solid var(--indi-regla);
	border-radius: 2px;
	box-shadow: none;
}

.indi-map .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 29px;
	background: var(--indi-papel-2);
	color: var(--indi-tinta);
	border-bottom-color: var(--indi-regla);
	font-weight: 400;
}

.indi-map .leaflet-bar a:hover {
	background: #fff;
	color: var(--indi-tinta);
}

.indi-map .leaflet-bar a:first-child,
.indi-map .leaflet-bar a:last-child {
	border-radius: 0;
}

.indi-map .leaflet-control-attribution {
	background: rgba(247, 248, 244, 0.9);
	color: var(--indi-tinta-3);
	font-size: 0.625rem;
	line-height: 1.5;
}

.indi-map .leaflet-control-attribution a {
	color: var(--indi-tinta-2);
}

/*
 * Puntos: se dibujan en el canvas de Leaflet (assets/js/etapas.js, dibujar()).
 * Sin agrupamiento: cada establecimiento es un punto a cualquier zoom.
 */
.indi-map .leaflet-overlay-pane canvas {
	cursor: default;
}

.indi-map .leaflet-interactive {
	cursor: pointer;
}

/* Tooltip breve al pasar el puntero. */
.indi-map .indi-tooltip {
	padding: 0.2rem 0.45rem;
	background: var(--indi-papel-2);
	border: 1px solid var(--indi-regla);
	border-radius: 2px;
	box-shadow: none;
	color: var(--indi-tinta);
	font-size: 0.75rem;
	line-height: 1.3;
}

.indi-map .indi-tooltip.leaflet-tooltip-top::before {
	border-top-color: var(--indi-regla);
}

/* Popup: la ficha de legacy/mapa.html (.pop). */
.indi-map .indi-popup .leaflet-popup-content-wrapper {
	background: var(--indi-papel-2);
	color: var(--indi-tinta);
	border: 1px solid var(--indi-regla);
	border-radius: 2px;
	box-shadow: 0 6px 22px rgba(28, 33, 31, 0.13);
}

.indi-map .indi-popup .leaflet-popup-tip {
	background: var(--indi-papel-2);
	border: 1px solid var(--indi-regla);
	box-shadow: none;
}

.indi-map .indi-popup .leaflet-popup-content {
	margin: 0.9rem 1rem 0.85rem;
	max-width: calc(100vw - 5rem);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.indi-map .indi-popup .leaflet-popup-content p {
	margin: 0;
}

.indi-map .indi-popup a.leaflet-popup-close-button {
	width: 28px;
	height: 28px;
	padding: 4px 4px 0 0;
	color: var(--indi-tinta-3);
	font: 400 18px/24px Georgia, serif;
}

.indi-map .indi-popup a.leaflet-popup-close-button:hover {
	color: var(--indi-tinta);
}

.indi-map .indi-ficha-mapa__titulo {
	margin: 0 1.2rem 0.25rem 0;
	font-family: var(--indi-titulos);
	font-size: 1.05rem;
	font-weight: var(--indi-semi);
	line-height: 1.22;
	letter-spacing: -0.01em;
}

.indi-ficha-mapa__titulo:focus {
	outline: none;
}

.indi-ficha-mapa__cat {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.3rem !important;
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--indi-tinta-2);
}

.indi-ficha-mapa__cat .indi-punto {
	width: 0.5rem;
	height: 0.5rem;
}

.indi-ficha-mapa__dir {
	color: var(--indi-tinta-2);
}

.indi-ficha-mapa__estado {
	margin-top: 0.35rem !important;
	font-size: 0.75rem;
}

.indi-ficha-mapa__codigo {
	margin-top: 0.3rem !important;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	color: var(--indi-tinta-3);
}

.indi-ficha-mapa__pie {
	margin-top: 0.6rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--indi-regla);
	font-size: 0.75rem;
	color: var(--indi-tinta-2);
}

.indi-ficha-mapa__pie p + p {
	margin-top: 0.2rem !important;
}

.indi-ficha-mapa__pie a,
.indi-ficha-mapa__pie .indi-enlace {
	color: var(--indi-tinta);
}

/* ============================ archivo fotográfico ============================ */

/* La franja de filtros va arriba, pegada a las pestañas; el resto respira. */
.indi-archive {
	padding-bottom: var(--indi-pad);
}

.indi-archive > .indi-barra {
	border-top: 0;
	border-bottom: 1px solid var(--indi-linea);
}

.indi-archive > .indi-archive__resumen,
.indi-archive > .indi-archive__grilla,
.indi-archive > .indi-estado,
.indi-archive > .indi-archive__mas {
	margin-inline: var(--indi-pad);
}

.indi-archive__resumen {
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--indi-linea);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--indi-suave);
	font-variant-numeric: tabular-nums;
}

.indi-archive__resumen:empty {
	display: none;
}

.indi-archive__grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
	gap: 2rem 1.25rem;
}

.indi-foto {
	min-width: 0;
}

.indi-foto__boton {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}

.indi-foto__marco {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--indi-papel);
}

.indi-explorer .indi-foto__marco img,
.indi-componente .indi-foto__marco img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 22%;
	transition: transform 400ms ease, opacity 400ms ease;
}

.indi-foto__boton:hover img {
	transform: scale(1.025);
}

.indi-foto__pie {
	padding-top: 0.6rem;
}

.indi-foto__anio {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--indi-suave);
}

.indi-foto__titulo {
	font-size: 0.92rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.indi-foto__coleccion {
	margin-top: 0.15rem !important;
	font-size: 0.78rem;
	color: var(--indi-suave);
}

.indi-archive__mas {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

@media (max-width: 599px) {
	.indi-archive__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 0.75rem;
	}
}

/* Visor */
.indi-lightbox {
	width: min(78rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--indi-radio);
	background: var(--indi-bg);
	color: var(--indi-fg);
	overflow: hidden;
}

.indi-lightbox::backdrop {
	background: rgba(12, 12, 14, 0.86);
}

.indi-lightbox[open] {
	display: block;
}

.indi-lightbox__marco {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "figura controles" "figura texto";
	height: min(52rem, calc(100dvh - 2rem));
}

.indi-lightbox__figura {
	grid-area: figura;
	margin: 0;
	background: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.indi-lightbox .indi-lightbox__figura img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.indi-lightbox__controles {
	grid-area: controles;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 1rem 0.5rem 1.75rem;
	border-bottom: 1px solid var(--indi-linea);
}

.indi-lightbox__pos {
	margin: 0 auto 0 0 !important;
	font-size: 0.78rem;
	color: var(--indi-suave);
	font-variant-numeric: tabular-nums;
}

.indi-lightbox .indi-icono {
	appearance: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--indi-radio);
	color: inherit;
	cursor: pointer;
}

.indi-lightbox .indi-icono svg {
	width: 1.1rem;
	height: 1.1rem;
}

.indi-lightbox .indi-icono:hover {
	border-color: var(--indi-linea-fuerte);
}

.indi-lightbox .indi-icono:disabled {
	opacity: 0.3;
	cursor: default;
}

.indi-lightbox__texto {
	grid-area: texto;
	overflow-y: auto;
	padding: 1.5rem 1.75rem 2rem;
	font-size: 0.95rem;
}

.indi-lightbox__cuando {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--indi-suave);
}

.indi-lightbox .indi-lightbox__titulo {
	margin: 0.4rem 0 0.9rem;
	font-family: var(--indi-titulos);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	font-weight: 500;
	line-height: 1.15;
}

.indi-lightbox__epigrafe {
	font-size: 1rem;
	line-height: 1.55;
}

.indi-lightbox__epigrafe.es-pendiente {
	font-style: italic;
	color: var(--indi-suave);
}

.indi-lightbox__descripcion {
	margin-top: 0.9rem;
}

.indi-lightbox__descripcion p + p {
	margin-top: 0.75em;
}

.indi-ficha {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 0.35rem 0.75rem;
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--indi-linea);
	font-size: 0.875rem;
}

.indi-ficha:empty {
	display: none;
}

.indi-ficha dt {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--indi-suave);
	padding-top: 0.15rem;
}

.indi-ficha dd {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.indi-lightbox {
		width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
		overflow-y: auto;
	}

	.indi-lightbox__marco {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas: "controles" "figura" "texto";
		height: auto;
	}

	.indi-lightbox__controles {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--indi-bg);
		padding-left: 1rem;
	}

	.indi-lightbox__figura {
		height: 62dvh;
	}

	.indi-lightbox__texto {
		overflow: visible;
		padding: 1.25rem 1rem 2rem;
	}
}

/* ============================== línea de tiempo ============================== */

/* ============================== línea de tiempo · marco ============================== */

.indi-timeline {
	padding: var(--indi-pad);
}

.indi-timeline__cabecera {
	max-width: 46rem;
	margin-bottom: 2rem;
}

.indi-timeline .indi-timeline__titulo {
	margin: 0;
	font-family: var(--indi-titulos);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	line-height: 1.02;
}

.indi-timeline__intro {
	margin-top: 0.9rem !important;
	font-size: 1.05rem;
	color: var(--indi-suave);
}

.indi-timeline__nav {
	position: relative;
	margin-bottom: 0.5rem;
}

.indi-timeline__periodos {
	display: flex;
	overflow-x: auto;
	border-top: 1px solid var(--indi-linea-fuerte);
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.indi-timeline__periodos li {
	flex: 1 0 11.5rem;
	scroll-snap-align: start;
}

.indi-timeline__periodo {
	appearance: none;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-top: -1px;
	padding: 0.9rem 1.25rem 1rem 0;
	background: none;
	border: 0;
	border-top: 3px solid transparent;
	color: var(--indi-suave);
	text-align: left;
	cursor: pointer;
	transition: color var(--indi-rapido), border-color var(--indi-rapido);
}

.indi-timeline__periodo:hover {
	color: var(--indi-fg);
	border-top-color: var(--indi-linea-fuerte);
}

.indi-timeline__periodo[aria-current="true"] {
	color: var(--indi-fg);
	border-top-color: var(--indi-fg);
}

.indi-timeline__periodo-rango {
	font-family: var(--indi-titulos);
	font-size: 1.3rem;
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}

.indi-timeline__periodo-titulo {
	font-size: 0.9rem;
	line-height: 1.3;
}

/* Período */
.indi-periodo__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	padding: 2.5rem 0 2.25rem;
	border-bottom: 1px solid var(--indi-linea-fuerte);
}

.indi-periodo__rango {
	font-family: var(--indi-titulos);
	font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem);
	white-space: nowrap;
	line-height: 0.92;
	letter-spacing: -0.03em;
	font-variant-numeric: lining-nums tabular-nums;
}

.indi-periodo__guion {
	opacity: 0.35;
	padding-inline: 0.04em;
}

.indi-periodo__num {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--indi-suave);
}

.indi-timeline .indi-periodo__titulo {
	margin: 0.35rem 0 0;
	font-family: var(--indi-titulos);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
	line-height: 1.1;
}

.indi-periodo__intro {
	margin-top: 0.9rem !important;
	max-width: 38rem;
	font-size: 1.05rem;
	color: var(--indi-suave);
}

/* Enlace al relato con los datos económicos del mismo período. */
.indi-timeline .indi-periodo__historia {
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.indi-periodo__anios {
	position: relative;
	padding-top: 2.75rem !important;
}

/* Línea vertical */
.indi-periodo__anios::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.45rem;
	width: 1px;
	background: var(--indi-linea-fuerte);
}

.indi-anio {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: 1rem;
	padding-bottom: 3rem;
}

.indi-anio__nodo {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	width: 0.9rem;
	height: 0.9rem;
	margin-top: 0.85rem;
	border: 1px solid var(--indi-fg);
	border-radius: 50%;
	background: var(--indi-bg);
	position: relative;
	z-index: 1;
}

.indi-anio__numero {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--indi-titulos);
	font-size: clamp(2.6rem, 2rem + 2.5vw, 4.75rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums tabular-nums;
	margin-bottom: 1rem !important;
}

.indi-anio__hitos {
	grid-column: 2;
	grid-row: 2;
	display: grid;
	gap: 2.25rem;
	min-width: 0;
}

.indi-hito {
	max-width: 36rem;
}

/* «El sector en cifras en 2001»: abre la fotografía económica de ese año. */
.indi-anio__cifras {
	margin-top: -1rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--indi-tenue);
	max-width: 36rem;
}

.indi-explorer .indi-anio__cifras a::after {
	content: " →";
	white-space: pre;
}

.indi-hito__imagen {
	margin: 0 0 1rem;
	background: var(--indi-papel);
}

.indi-timeline .indi-hito__imagen img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
}

.indi-hito.es-destacado .indi-hito__imagen img {
	max-height: 34rem;
}

.indi-hito__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 1rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--indi-suave);
}

.indi-hito__cat {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.indi-hito__cat i {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 1px;
}

.indi-hito__fecha {
	font-variant-numeric: tabular-nums;
}

.indi-hito__crisis {
	color: var(--indi-crisis);
	border: 1px solid currentColor;
	padding: 0 0.35rem;
	border-radius: var(--indi-radio);
}

.indi-timeline .indi-hito__titulo {
	margin: 0.45rem 0 0;
	font-family: var(--indi-titulos);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.indi-hito.es-destacado .indi-hito__titulo {
	font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem);
}

.indi-hito__breve {
	margin-top: 0.55rem !important;
	font-size: 1rem;
	line-height: 1.6;
}

.indi-hito__completo {
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.65;
}

.indi-hito__completo > * + * {
	margin-top: 0.75em;
}

.indi-hito__mas {
	margin-top: 0.6rem;
}

.indi-hito__fuente {
	margin-top: 0.8rem;
	font-size: 0.82rem;
	color: var(--indi-suave);
}

.indi-hito__fuente summary {
	display: inline-block;
	cursor: pointer;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	list-style: none;
}

.indi-hito__fuente summary::-webkit-details-marker {
	display: none;
}

.indi-hito__fuente summary::after {
	content: " +";
}

.indi-hito__fuente[open] summary::after {
	content: " −";
}

.indi-hito__fuente p {
	margin-top: 0.35rem !important;
}

.indi-hito__original {
	font-style: italic;
}

.indi-periodo__pie {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--indi-linea-fuerte);
}

.indi-periodo__salto {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	font-family: var(--indi-titulos);
	font-size: 1.1rem;
	line-height: 1.3;
	cursor: pointer;
}

.indi-periodo__salto span {
	display: block;
	margin-bottom: 0.25rem;
	font-family: inherit;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--indi-suave);
}

.indi-explorer .indi-periodo__salto span,
.indi-componente .indi-periodo__salto span {
	font-family: var(--wp--preset--font-family--body, inherit);
}

.indi-periodo__salto:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.indi-periodo__salto.es-siguiente {
	grid-column: 2;
	text-align: right;
}

/* Desktop: línea central y composición alternada año / relato. */
@media (min-width: 900px) {
	.indi-periodo__cabecera {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 3rem;
		align-items: end;
		padding: 3.5rem 0 3rem;
	}

	.indi-periodo__anios::before {
		left: 50%;
	}

	.indi-anio {
		grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
		column-gap: 0;
		padding-bottom: 4.5rem;
	}

	.indi-anio__nodo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		margin-top: 1.4rem;
	}

	.indi-anio__numero {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		justify-self: end;
		text-align: right;
		padding-right: 0.5rem;
		margin-bottom: 0 !important;
		position: sticky;
		top: 6rem;
	}

	.indi-anio__hitos {
		grid-column: 3;
		grid-row: 1;
		gap: 3rem;
	}

	.indi-anio:nth-child(even) .indi-anio__numero {
		grid-column: 3;
		justify-self: start;
		text-align: left;
		padding: 0 0 0 0.5rem;
	}

	.indi-anio:nth-child(even) .indi-anio__hitos {
		grid-column: 1;
		justify-items: end;
	}

	.indi-anio:nth-child(even) .indi-hito {
		width: 100%;
	}
}

@media (max-width: 599px) {
	.indi-timeline__periodos li {
		flex-basis: 9.5rem;
	}

	.indi-timeline__periodo-rango {
		font-size: 1.1rem;
	}

	.indi-periodo__pie {
		grid-template-columns: minmax(0, 1fr);
	}

	.indi-periodo__salto.es-siguiente {
		grid-column: 1;
		text-align: left;
	}
}

/* ================================ movimiento ================================ */

@media (prefers-reduced-motion: reduce) {
	.indi-explorer *,
	.indi-componente *,
	.indi-lightbox * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}