/**
 * Mapa interactivo.
 *
 * El color de cada departamento sale de data-level, que imprime el servidor.
 * Ninguna regla depende de JavaScript, así que el mapa está pintado
 * correctamente desde el primer fotograma.
 */

.cig-map {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --cig-space-3 );
}

.cig-map__frame {
	position: relative;
	width: 100%;
	/* Alto fijo por proporción: el mapa tiene un área propia y no la abandona
	   al ampliarse. Sin esto, el zoom empujaba el resto de la página. */
	aspect-ratio: 3 / 4;
	max-height: 68vh;
	border-radius: var( --cig-radius );
	overflow: hidden;
	background: var( --cig-surface );
}

.cig-map__svg:active { cursor: grabbing; }

.cig-map__svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Con el país entero a la vista, un dedo desplaza la página: es lo que
	   se espera al pasar por encima de un mapa que aún no se ha explorado. */
	touch-action: pan-y pinch-zoom;
	cursor: grab;
}

/* Ya ampliado, el dedo mueve el mapa en lugar de la página. Solo entonces:
   hacerlo siempre atraparía el desplazamiento de quien únicamente pasaba por
   encima camino de la galería. */
.cig-map.is-zoomed .cig-map__svg,
.cig-map.is-municipality .cig-map__svg,
.cig-map.is-panzoom .cig-map__svg {
	touch-action: none;
}

/* El grupo ya no se transforma: el acercamiento se hace moviendo el viewBox,
   que recorta por definición y no puede desbordar el marco. */
.cig-map__zoom { transform: none; }

/* Departamentos ------------------------------------------------------- */

.cig-depto {
	stroke: var( --cig-paper );
	/* Sin escalar: el separador mide lo mismo con el país entero a la vista
	   que con un departamento ampliado seis veces. Escalándolo, al acercarse
	   se convertía en una franja gruesa que se comía la geometría. */
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill var( --cig-fast ) var( --cig-ease ),
	            stroke var( --cig-fast ) var( --cig-ease );
}

.cig-depto[data-level="0"] { fill: var( --cig-scale-0 ); }
.cig-depto[data-level="1"] { fill: var( --cig-scale-1 ); }
.cig-depto[data-level="2"] { fill: var( --cig-scale-2 ); }
.cig-depto[data-level="3"] { fill: var( --cig-scale-3 ); }
.cig-depto[data-level="4"] { fill: var( --cig-scale-4 ); }

.cig-depto[aria-hidden="true"] { cursor: default; pointer-events: none; }

.cig-depto:hover { stroke: var( --cig-ink ); stroke-width: 1.5; }

/* El foco de teclado se marca con un contorno grueso y no solo con color:
   el requisito de no depender del color se aplica también aquí. */
.cig-depto:focus-visible {
	outline: none;
	stroke: var( --cig-ink );
	stroke-width: 3;
}

.cig-depto[aria-pressed="true"] {
	stroke: var( --cig-ink );
	stroke-width: 2.5;
}

/* El departamento activo se distingue además por el atenuado del resto, para
   que la selección se perciba sin depender del tono del relleno. */
.cig-map.is-filtered .cig-depto:not([aria-pressed="true"]) { opacity: .45; }

.cig-map__inset-frame {
	fill: none;
	stroke: var( --cig-line );
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

/* Leyenda -------------------------------------------------------------- */

.cig-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var( --cig-space-2 ) var( --cig-space-4 ); }

.cig-legend__title {
	font-size: var( --cig-text-xs );
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --cig-ink-soft );
}

.cig-legend__scale {
	display: flex;
	flex-wrap: wrap;
	gap: var( --cig-space-3 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.cig-legend__item { display: flex; align-items: center; gap: var( --cig-space-1 ); }

.cig-legend__swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var( --cig-line );
}

.cig-legend__swatch[data-level="0"] { background: var( --cig-scale-0 ); }
.cig-legend__swatch[data-level="1"] { background: var( --cig-scale-1 ); }
.cig-legend__swatch[data-level="2"] { background: var( --cig-scale-2 ); }
.cig-legend__swatch[data-level="3"] { background: var( --cig-scale-3 ); }
.cig-legend__swatch[data-level="4"] { background: var( --cig-scale-4 ); }

.cig-legend__label {
	font-family: var( --cig-font-mono );
	font-size: var( --cig-text-xs );
	color: var( --cig-ink-soft );
	font-variant-numeric: tabular-nums;
}

/* Lista equivalente ---------------------------------------------------- */

.cig-map__list-toggle {
	font-size: var( --cig-text-sm );
	color: var( --cig-ink-soft );
	cursor: pointer;
	padding: var( --cig-space-2 ) 0;
}

.cig-map__list-toggle:focus-visible { outline: 2px solid var( --cig-emerald ); outline-offset: 2px; }

.cig-deptlist {
	list-style: none;
	margin: var( --cig-space-2 ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 2px;
	max-height: 340px;
	overflow-y: auto;
}

.cig-deptlist__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: var( --cig-space-2 );
	width: 100%;
	font: inherit;
	font-size: var( --cig-text-sm );
	text-align: left;
	color: var( --cig-ink );
	background: transparent;
	border: 0;
	border-radius: var( --cig-radius-sm );
	padding: var( --cig-space-2 ) var( --cig-space-3 );
	cursor: pointer;
}

.cig-deptlist__item:hover { background: var( --cig-surface ); }
.cig-deptlist__item:focus-visible { outline: 2px solid var( --cig-emerald ); outline-offset: -2px; }

.cig-deptlist__item[aria-pressed="true"] {
	background: var( --cig-emerald );
	color: #fff;
}

/* El código DIVIPOLA en monoespaciada: es un identificador oficial, no
   decoración, y verlo ayuda a distinguir municipios homónimos. */
.cig-deptlist__code {
	font-family: var( --cig-font-mono );
	font-size: var( --cig-text-xs );
	opacity: .55;
}

.cig-deptlist__count {
	font-family: var( --cig-font-mono );
	font-size: var( --cig-text-xs );
	font-variant-numeric: tabular-nums;
	opacity: .75;
}

/* Disposición partida en escritorio ------------------------------------ */

@media ( min-width: 1024px ) {

	.cig--split .cig__layout {
		display: grid;
		grid-template-columns: minmax( 320px, 34% ) 1fr;
		gap: var( --cig-space-8 );
		align-items: start;
	}

	.cig--split .cig__map-col {
		position: sticky;
		top: var( --cig-space-4 );
	}
}

@media ( max-width: 1023px ) {

	.cig-map__frame { max-height: 56vh; aspect-ratio: 4 / 5; }

	/* En pantallas pequeñas la lista es el modo principal de navegación:
	   se abre de entrada en lugar de esconderse tras un desplegable. */
	.cig-map__list { border-top: 1px solid var( --cig-line ); padding-top: var( --cig-space-2 ); }
}

/* ---------------------------------------------------------------------- */
/* Municipios                                                             */
/* ---------------------------------------------------------------------- */

.cig-muni {
	fill: var( --cig-muni-empty );
	stroke: var( --cig-surface );
	/* 1,2 px es el mínimo que se distingue de verdad. Con 0,6 el navegador lo
	   dibujaba en medio píxel y la división política era invisible: 123
	   municipios parecían una sola mancha gris. */
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	cursor: pointer;
	opacity: 0;
	transition: fill var( --cig-fast ) var( --cig-ease ),
	            opacity var( --cig-slow ) var( --cig-ease );
}

.cig-map__munis.is-active .cig-muni { opacity: 1; }

.cig-muni[data-level="0"] { fill: var( --cig-muni-empty ); }
.cig-muni[data-level="1"] { fill: var( --cig-scale-1 ); }
.cig-muni[data-level="2"] { fill: var( --cig-scale-2 ); }
.cig-muni[data-level="3"] { fill: var( --cig-scale-3 ); }
.cig-muni[data-level="4"] { fill: var( --cig-scale-4 ); }

.cig-muni[aria-hidden="true"] { cursor: default; pointer-events: none; opacity: .55; }

.cig-muni:hover { stroke: var( --cig-ink ); stroke-width: 2; }

.cig-muni:focus-visible {
	outline: none;
	stroke: var( --cig-ink );
	stroke-width: 3;
}

.cig-muni[aria-pressed="true"] {
	stroke: var( --cig-ink );
	stroke-width: 2.6;
}

/* Con los municipios visibles, los departamentos quedan de fondo: siguen
   dando contexto de dónde está uno, pero dejan de robar los clics. */
.cig-map.is-zoomed .cig-depto { pointer-events: none; }
.cig-map.is-zoomed .cig-depto:not([aria-pressed="true"]) { opacity: .25; }

/* El departamento activo conserva un contorno tenue bajo sus municipios, que
   lo cubren casi por completo. No se dibuja una capa extra por encima: el
   intento anterior de hacerlo introducía un recuadro fantasma sobre el mapa. */
.cig-map.is-zoomed .cig-depto[aria-pressed="true"] {
	fill: transparent;
	stroke: var( --cig-ink-soft );
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

/* Migas ---------------------------------------------------------------- */

.cig-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --cig-space-1 );
	min-height: 32px;
}

.cig-crumbs__item {
	font: inherit;
	font-size: var( --cig-text-sm );
	color: var( --cig-ink-soft );
	background: transparent;
	border: 0;
	border-radius: var( --cig-radius-sm );
	padding: var( --cig-space-1 ) var( --cig-space-2 );
	cursor: pointer;
	transition: color var( --cig-fast ) var( --cig-ease );
}

button.cig-crumbs__item:hover { color: var( --cig-emerald ); }
button.cig-crumbs__item:focus-visible { outline: 2px solid var( --cig-emerald ); outline-offset: 1px; }

.cig-crumbs__item.is-current {
	font-family: var( --cig-font-display );
	color: var( --cig-ink );
	cursor: default;
}

.cig-crumbs__sep { color: var( --cig-line ); }

@media ( max-width: 640px ) {
	.cig-map__frame { aspect-ratio: 1 / 1; max-height: 58vh; }
}

/* ---------------------------------------------------------------------- */
/* Barra superior del mapa                                                */
/* ---------------------------------------------------------------------- */

/* Botón y migas comparten fila: el botón nunca se superpone al mapa ni a
   las migas, que era el problema de tenerlo flotando encima. */
.cig-map__bar {
	display: flex;
	align-items: center;
	gap: var( --cig-space-2 );
	flex-wrap: wrap;
	min-height: 36px;
}

.cig-map__back {
	display: inline-flex;
	align-items: center;
	gap: var( --cig-space-1 );
	flex: 0 0 auto;
	font: inherit;
	font-size: var( --cig-text-sm );
	color: var( --cig-ink );
	background: var( --cig-surface );
	border: 1px solid var( --cig-line );
	border-radius: 999px;
	padding: var( --cig-space-2 ) var( --cig-space-4 );
	cursor: pointer;
	transition: border-color var( --cig-fast ) var( --cig-ease ),
	            color var( --cig-fast ) var( --cig-ease );
}

.cig-map__back:hover { color: var( --cig-emerald ); border-color: var( --cig-emerald ); }
.cig-map__back:focus-visible { outline: 2px solid var( --cig-emerald ); outline-offset: 2px; }
.cig-map__back[hidden] { display: none; }

/* Panel de información ------------------------------------------------- */

/* Va DEBAJO del mapa, no encima. Flotando dentro del marco tapaba justo la
   zona que el visitante acaba de tocar, que en un teléfono es casi todo. */
.cig-map__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --cig-space-1 ) var( --cig-space-4 );
	min-height: 2.75rem;
	padding: var( --cig-space-2 ) var( --cig-space-3 );
	border-radius: var( --cig-radius-sm );
	background: var( --cig-surface );
	border: 1px solid var( --cig-line );
	opacity: 0;
	transition: opacity var( --cig-fast ) var( --cig-ease );
}

.cig-map__info.is-visible { opacity: 1; }

.cig-map__info b {
	font-family: var( --cig-font-display );
	font-weight: 400;
	font-size: var( --cig-text-base );
	color: var( --cig-ink );
}

.cig-map__info span {
	font-family: var( --cig-font-mono );
	font-size: var( --cig-text-xs );
	color: var( --cig-ink-soft );
	font-variant-numeric: tabular-nums;
}

/* Controles de zoom ---------------------------------------------------- */

.cig-map__zoomctl {
	position: absolute;
	right: var( --cig-space-2 );
	bottom: var( --cig-space-2 );
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cig-map__zbtn {
	width: 40px;              /* Objetivo táctil cómodo sin invadir el mapa. */
	height: 40px;
	display: grid;
	place-items: center;
	font: inherit;
	font-size: var( --cig-text-lg );
	line-height: 1;
	color: var( --cig-ink );
	background: var( --cig-surface );
	border: 1px solid var( --cig-line );
	border-radius: var( --cig-radius-sm );
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 18, 33, 29, .08 );
	transition: color var( --cig-fast ) var( --cig-ease ),
	            border-color var( --cig-fast ) var( --cig-ease );
}

.cig-map__zbtn:hover { color: var( --cig-emerald ); border-color: var( --cig-emerald ); }
.cig-map__zbtn:focus-visible { outline: 2px solid var( --cig-emerald ); outline-offset: 2px; }

/* Lista de municipios --------------------------------------------------- */

.cig-munlist {
	margin-top: var( --cig-space-3 );
	padding-top: var( --cig-space-3 );
	border-top: 1px solid var( --cig-line );
}

.cig-munlist[hidden] { display: none; }

.cig-munlist__title {
	margin: 0 0 var( --cig-space-2 );
	font-size: var( --cig-text-xs );
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --cig-ink-soft );
}

/* ---------------------------------------------------------------------- */
/* Municipio destacado                                                     */
/* ---------------------------------------------------------------------- */

/* Con un municipio seleccionado desaparece todo lo demás.
   Atenuar los vecinos en lugar de ocultarlos dejaba sus contornos cruzando
   por encima de la fotografía: con el mapa muy ampliado, esas líneas quedan
   justo sobre la imagen y estorban. Se ocultan por completo y también se
   desactivan sus eventos, para que no capturen pulsaciones invisibles. */
.cig-map.is-municipality .cig-muni:not([aria-pressed="true"]),
.cig-map.is-municipality .cig-depto,
.cig-map.is-municipality .cig-map__inset-frame {
	opacity: 0;
	pointer-events: none;
}

.cig-muni.has-photo {
	/* Único contorno visible en toda la escena. */
	stroke: var( --cig-surface );
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
	/* La transición del relleno se anula: entre un color y un patrón de
	   imagen no hay interpolación posible y el navegador parpadearía. */
	transition: opacity var( --cig-slow ) var( --cig-ease );
}

.cig-muni.has-photo:hover { stroke: var( --cig-surface ); }

/* Rótulo de bienvenida ------------------------------------------------- */

.cig-map__welcome {
	position: absolute;
	left: 50%;
	bottom: var( --cig-space-4 );
	transform: translate( -50%, 8px );
	z-index: 3;
	max-width: 86%;
	text-align: center;
	pointer-events: none;
	padding: var( --cig-space-2 ) var( --cig-space-6 );
	border-radius: 999px;
	background: rgba( 8, 18, 15, .82 );
	backdrop-filter: blur( 6px );
	color: #fff;
	opacity: 0;
	transition: opacity var( --cig-slow ) var( --cig-ease ),
	            transform var( --cig-slow ) var( --cig-ease );
}

.cig-map__welcome.is-visible { opacity: 1; transform: translate( -50%, 0 ); }

.cig-map__welcome b {
	display: block;
	font-family: var( --cig-font-display );
	font-weight: 400;
	font-size: var( --cig-text-lg );
	line-height: 1.15;
}

.cig-map__welcome span {
	display: block;
	font-family: var( --cig-font-mono );
	font-size: var( --cig-text-xs );
	opacity: .8;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 640px ) {
	.cig-map__welcome { padding: var( --cig-space-2 ) var( --cig-space-4 ); }
	.cig-map__welcome b { font-size: var( --cig-text-base ); }
}