/*
* Nombres y términos geográficos (/nombres-y-terminos).
*
* No declara ni un token: los toma todos de tokens.css. El cromo —barra del
* Estado, cabecera, menú, pie y el aviso de servicio caído— lo define base.css.
*
* La página tiene dos vistas y una sola navegación. La de nombres es un tablero
* de lista y mapa, como el selector de entidades, porque el gesto es el mismo:
* recorrer una lista larga viendo dónde cae cada cosa. La de glosario es una
* rejilla de tarjetas con ilustración, porque ahí lo que se hace es hojear.
*/
html { font-size: clamp(16px, 0.85rem + 0.42vmin, 22px); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta);
font-family: var(--fuente-texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, li { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-cobalto); }
a:hover { color: var(--color-enlace-fuerte); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.maplibregl-canvas:focus { outline: 0; }
/* Igual que en entidades: display en la clase gana al atributo, hay que decirlo.
La hamburguesa queda fuera para que la consulta de medios de base.css pueda
encenderla en el teléfono. */
[hidden]:not(.hamburguesa) { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contenedor { width: 100%; max-width: 96rem; margin-inline: auto; padding-inline: var(--sangria); }
/* El banner de sección vive en base.css: lo comparten cinco páginas. */
/* Aquí había un bloque que encogía el banner por debajo de 46rem de alto, para
que en un portátil el encabezado y los filtros no se llevaran media pantalla
antes de que empezara la lista. El diagnóstico era bueno; la cura, no: dejaba
esta página con un banner distinto del de /entidades, que está a un clic en la
misma navegación, y eso es lo que se veía al cambiar de pestaña.
La altura la devuelve ahora la barra de sección: el banner se va con la página
y una franja de 3rem lo releva. Se gana más -el banner entero, no un recorte- y
se gana en todas las pantallas, no solo en las bajas. */
/* ── Banda de controles ─────────────────────────────────────────────
Los tabuladores, los filtros y el abecedario son controles de la misma lista.
Estaban en tres bandas de ancho completo separadas por bordes, con el mismo
margen entre ellas: tres contenedores compensando una proximidad que se
arregla juntándolos. Ahora son un solo bloque con fondo propio y tres
renglones de peso decreciente —qué se consulta, por dónde se acota, por qué
letra—, y el hueco generoso va después, contra el tablero. Así lo que lidera
la página es la lista, que es a lo que se viene. */
/* Una sola banda para lo que dice qué se consulta: los tabuladores a la
izquierda y el abecedario a la derecha, en el mismo renglón. El abecedario es
ancho por naturaleza —treinta casillas— y ahogarlo en la columna de la lista
lo partía en dos filas; aquí cabe en una. */
/* Valor de partida de la banda previa, para que el modulo no pinte a un alto y
encoja a otro cuando navegacion.js publique el medido: el guion va con defer,
asi que su correccion llega despues del primer pintado. Es el mismo trato que
--cromo-h, que tambien tiene su numero de boceto en tokens.css y lo reescribe
el guion. 65px es lo que mide la banda de tabuladores e indice en un renglon. */
:root { --banda-previa-h: 65px; }
.controles { background: var(--papel-2); border-bottom: 1px solid var(--color-borde); }
.controles > .contenedor { display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 0.5rem 1.25rem; }
/* Los filtros sí viven con la lista, que es a lo que acotan. Estaban a ancho de
página y sumaban otra banda al encabezado: en un portátil eso dejaba al
tablero 340 px de 950 y a la lista dos nombres. */
.acotar { padding: 0.375rem clamp(0.75rem, 1.4vw, 1.25rem); background: var(--papel-2);
border-bottom: 1px solid var(--color-borde); }
.vistas { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.vistas__opcion { display: grid; gap: 0; padding: 0.4375rem 0.6875rem 0.375rem; border: 0; border-bottom: 3px solid transparent;
background: transparent; text-align: left; font-family: var(--fuente-titular);
font-weight: var(--peso-negro); font-size: 0.9375rem; letter-spacing: -.02em;
color: var(--tinta-suave); transition: color var(--dur-rapida) var(--curva-salida),
border-color var(--dur-rapida) var(--curva-salida); }
.vistas__opcion small { font-family: var(--fuente-texto); font-weight: var(--peso-normal);
font-size: 0.75rem; letter-spacing: 0; color: var(--tinta-suave); }
.vistas__opcion:hover { color: var(--tinta); }
.vistas__opcion[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--color-cobalto); }
/* ── Tira de filtros ──────────────────────────────────────────────
Un solo renglón, sin rótulos encima. El rótulo de cada desplegable es su
primera opción —«Todos los departamentos»—, así que se lee en el propio
control y no hace falta una fila entera para repetirlo. El buscador conserva
su aria-label y la lupa, que es la que dice para qué sirve.
Y no ocupan el ancho completo: los controles se quedan en el sitio que
necesitan y el resto del renglón es aire. Estirar las cajas hasta el borde
solo consigue que un desplegable de «Todos» mida 330 px.
Eso lo decía este comentario y no lo hacía el código: los desplegables medían
337 px medidos, justo lo que la nota decía evitar.
Se arregla con un TOPE, no quitando el crecimiento. La diferencia importa: con
`flex-wrap` el navegador reparte por bases antes de encoger, así que subir la
base para que no se estiraran hacía saltar de línea al cuarto control en cuanto
el contenedor era estrecho —y aquí el contenedor es la columna de la lista, no
la página—. La base se queda pequeña, que es lo que hace que las cuatro cajas
quepan en un renglón, y el tope es el que impide que un desplegable de «Todos»
acabe midiendo 330. */
.filtros-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4375rem; }
.campo--buscar { flex: 2 1 10rem; min-width: 8rem; max-width: 24rem; }
.filtros-tira .campo__control { flex: 1 1 6.5rem; min-width: 6rem; max-width: 14rem; }
/* En estrecho se estiran: ahí el aire no sobra, falta.
PERO EL TOPE NO SE QUITA, y esto costó encontrarlo. Iba con `max-width: none`
en los dos, y para el buscador da igual —un es exactamente lo contrario. Un desplegable mide,
de suyo, lo que mida su opción más larga, y las opciones de este son nombres
de términos geográficos. Medido a 375 px de ancho: su mínimo intrínseco son
552 px.
Y no se quedaba en el desplegable. Ese mínimo sube por la tira, por .acotar y
por la columna del panel, que es una rejilla de columna implícita `auto` y por
tanto se estira hasta el mayor mínimo de sus hijos: la columna entera pasaba a
576 px dentro de un teléfono de 375, así que CADA RENGLÓN DE LA LISTA medía
576 y los 201 de la derecha quedaban fuera de pantalla. El nombre largo, el
municipio y el término se cortaban, y no había desplazamiento horizontal que
los recuperara. El comentario de aquí arriba ya avisaba de que el tope es lo
que impide que un desplegable de «Todos» acabe midiendo de más; en estrecho se
había quitado, que es donde más falta hacía.
20rem y no las 14 de escritorio: en estrecho los desplegables van a dos por
fila y tienen que poder estirarse. A 375 px el 45 % son 169, así que el tope
ni se nota; lo único que hace es no dejar que el contenido mande. */
@media (max-width: 48rem) { .campo--buscar { flex: 1 1 100%; max-width: none; }
.filtros-tira .campo__control { flex: 1 1 45%; max-width: 20rem; } }
/* El glosario no tiene selectores, así que su tira la comparten el buscador y
el abecedario en un solo renglón. El buscador se queda en un ancho de
lectura y no crece; el abecedario toma lo que sobre y se alinea al final,
igual que en la vista de nombres. Si no caben, el wrap los separa. */
.filtros-tira--glosario { padding-block: 0.75rem 0.625rem; gap: 0.375rem 1rem; }
.filtros-tira--glosario .buscar { flex: 0 1 24rem; min-width: 11rem; }
.filtros-tira--glosario .abecedario { flex: 1 1 auto; justify-content: flex-end; padding-block: 0; }
.buscar__caja { position: relative; display: flex; align-items: center; }
.buscar__lupa { position: absolute; left: 0.75rem; width: 1.125rem; height: 1.125rem;
color: var(--tinta-suave); pointer-events: none; }
.buscar__campo { width: 100%; min-height: 2.5rem; padding: 0.5rem 2.25rem 0.5rem 2.5rem;
border: 1.5px solid var(--color-borde-firme); border-radius: 0.625rem;
background: var(--papel); font: inherit; font-size: 0.9375rem; color: var(--tinta); }
.buscar__campo::-webkit-search-cancel-button { display: none; }
.buscar__campo:focus-visible { border-color: var(--color-cobalto); }
.buscar__limpiar { position: absolute; right: 0.375rem; width: 1.75rem; height: 1.75rem; border: 0;
border-radius: 50%; background: transparent; font-size: 1.25rem; line-height: 1;
color: var(--tinta-suave); }
.buscar__limpiar:hover { background: var(--papel-3); color: var(--tinta); }
/* Las cuatro cajas miden lo mismo y alinean solas: mismo alto declarado, no un
mínimo. Con alturas mínimas el buscador quedaba dos píxeles por debajo de los
desplegables, y dos píxeles se ven cuando hay cuatro cajas en fila. */
.filtros-tira .buscar__campo, .filtros-tira .campo__control,
.filtros-tira .limpiar-todo { height: 2.125rem; min-height: 2.125rem; }
/* Con el dedo, esos 37 px se quedan cortos: el mínimo cómodo son 44. Con ratón
no hace falta y cada píxel de la tira se lo quita el tablero. Por eso la
compactación de arriba es solo para el ratón: la consulta de puntero manda
sobre ella, y el área táctil no baja nunca de 44. */
@media (pointer: coarse) {
.filtros-tira .buscar__campo, .filtros-tira .campo__control,
.filtros-tira .limpiar-todo { height: 2.75rem; min-height: 2.75rem; }
}
.campo__control { padding: 0.375rem 0.625rem; border: 1.5px solid var(--color-borde-firme);
border-radius: 0.625rem; background: var(--papel); font: inherit; font-size: 0.9375rem;
color: var(--tinta); }
.campo__control:disabled { background: var(--papel-3); color: var(--tinta-suave); cursor: not-allowed; }
.limpiar-todo { height: 2.125rem; padding: 0 0.875rem; border: 1.5px solid var(--color-borde-firme);
border-radius: var(--radio-pastilla); background: transparent; font-size: 0.875rem;
font-weight: var(--peso-medio); transition: border-color var(--dur-rapida) var(--curva-salida); }
.limpiar-todo:hover { border-color: var(--tinta); }
/* ── Abecedario ─────────────────────────────────────────────────── */
/* Las letras las pone el servicio, no una lista escrita: pueden ser 26 o 28, y
la caja tiene que aguantar las dos sin descolocarse. */
.abecedario { display: flex; flex-wrap: wrap; gap: 0.125rem; padding-block: 0.375rem; }
.abecedario__cargando { font-size: 0.875rem; color: var(--tinta-suave); }
.letra { min-width: 1.375rem; min-height: 1.75rem; padding: 0 0.1875rem; border: 1.5px solid var(--color-borde);
border-radius: 0.4375rem; background: var(--papel); font-family: var(--fuente-titular);
font-weight: var(--peso-fuerte); font-size: 0.75rem; color: var(--tinta);
transition: background var(--dur-rapida) var(--curva-salida),
border-color var(--dur-rapida) var(--curva-salida); }
.letra:hover { background: var(--papel-3); border-color: var(--color-borde-firme); }
/* Donde se toca con el dedo, la casilla sube al mínimo de 44 px. En escritorio
se queda en 32: con el ratón se acierta, y treinta casillas de 44 se comen un
renglón entero de la pantalla. */
@media (pointer: coarse) { .letra { min-width: 2.75rem; min-height: 2.75rem; } }
.letra.es-viva { background: var(--color-cobalto); border-color: var(--color-cobalto); color: var(--papel-2); }
/* ── Tablero: lista y mapa ──────────────────────────────────────── */
/* Los nombres mandan y el mapa acompaña: la lista se lleva el ancho y el mapa se
queda en una columna estrecha. Antes era al revés —la lista en 26rem fijos y
el mapa con todo lo demás—, y eso le daba al mapa una atención que aquí no le
toca: lo que se viene a leer es la lista de nombres.
El alto se resuelve como en el selector de entidades: la caja se planta en lo
que da el visor y el tablero se lleva lo que sobra, así que en un monitor
entra entero sin desplazar y en un portátil se encoge en vez de desbordar.
La condición con :has() es para que el alto solo se imponga cuando la vista
de nombres está a la vista: el glosario es una rejilla larga y se recorre
desplazando. Donde :has() no exista, la página simplemente se desplaza. */
.tablero { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--color-borde); }
@media (min-width: 62rem) {
/* La caja no impone alto -lo impone la vista- para que el alto del documento no
dependa de si la franja está puesta. Ver --area-util en tokens.css. */
.pantalla:has(#vista-nombres:not([hidden])) {
display: flex; flex-direction: column;
height: auto; min-height: 34rem;
}
.pantalla > .vista { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tablero { flex: 1 1 auto; min-height: 0;
grid-template-columns: 55% 45%; }
/* Con la barra puesta manda la vista y no la caja: la banda y los controles ya
se fueron hacia arriba, así que el tablero se planta en el visor menos la
franja. Ver --area-util en tokens.css. */
/* #vista-nombres y no `.vista` a secas: en esta página hay dos vistas y la otra
es el glosario, que es una rejilla larga de 275 tarjetas hecha para
recorrerse desplazando. Plantarla en el alto del visor la dejaría con las
tarjetas cortadas, y engancharla se pelearía con la rueda en mitad de la
lectura. El alto de pantalla y el enganche son de la vista de nombres, que
es la que tiene mapa.
MENOS la banda de controles. Los tabuladores y el índice alfabético viven
fuera de la vista, así que con el alto entero el enganche dejaba la vista
llenando el visor y la banda escondida detrás de la cabecera: se perdía el
índice de letras, que es el mando principal de la página. Los filtros no
tenían ese problema porque están dentro del tablero; esta banda no. */
#vista-nombres {
height: calc(var(--area-util) - var(--banda-previa-h)); flex: none;
}
/* Aquí iba el `scroll-snap-align` del tramo de trabajo. Ya no hace falta
declararlo: el tramo es «donde empieza lo que hay debajo del banner», y eso
navegacion.js lo lee de la maquetación —el primer hermano del banner que
ocupe sitio, que en esta página es .controles—. Una clase menos que
mantener sincronizada con lo que de verdad decide el reparto, que es el
alto de aquí arriba. Ver la nota de los tramos en base.css. */
}
/* ── En el glosario, el desplazamiento normal ─────────────────────────────
Los tramos son de «Nombres del territorio» y de nadie más en esta página.
El razonamiento ya estaba escrito ahí arriba para el ALTO —el glosario es una
rejilla larga de 275 tarjetas hecha para recorrerse desplazando, y plantarla
en el alto del visor la dejaría con las tarjetas cortadas— y se quedó a medio
aplicar: el alto sí distinguía las dos vistas, la rueda no. Así que al pasar
al glosario seguía habiendo tres paradas, y un gesto que debería avanzar unas
cuantas tarjetas saltaba al pie. Recorrer 275 términos así es imposible.
La distinción es la misma de siempre: los tramos existen donde hay TRES
ESTADOS que recorrer —presentación, área de trabajo, pie—, y el glosario no
los tiene. Es una lista larga, y una lista larga se lee desplazando.
Se apaga desde el CSS y no desde el guion porque es lo que ya hace el gate:
navegacion.js lee --tramos en cada gesto, así que conmutar de pestaña
enciende y apaga el pase solo, sin un escuchador que mantener ni un estado
que sincronizar. Va fuera de la consulta de medios a propósito: por debajo de
62rem ya vale 0, y repetirlo dentro sería decir dos veces lo mismo.
Sin :has() esta regla no llega a aplicarse y el glosario se queda con los
tramos, que es molesto pero se lee. La misma degradación que declara la nota
del alto, unas líneas más arriba. */
html:has(#vista-glosario:not([hidden])) { --tramos: 0; }
@media (max-width: 62rem) {
/* En el teléfono el mapa va primero y la lista debajo: se lee la lista y se ve
dónde cae lo que se toca.
AQUÍ HUBO `position: sticky; top: var(--barra-alta)`, y el comentario que
acompañaba a esas dos líneas decía que no hacían nada —que
`.mapa-caja{position:relative}`, más abajo y sin consulta de medios, ganaba
por orden— y que el desplazamiento se dejaba escrito por si algún día se
arreglaba el orden. Las dos mitades de esa frase eran falsas, y la segunda
salió cara.
El `position` sí lo ganaba el `relative`. El `top` NO: `top` se aplica
igual sobre una caja relativa, y sobre una caja relativa desplaza lo que se
ve SIN mover lo que ocupa. Así que el mapa se pintaba 48 px más abajo de su
sitio, invadiendo la primera franja del panel que tiene debajo, y con
`z-index: 400` la tapaba —el panel y su ficha van en 2—.
Medido a 375x812: el mapa ocupa de 620 a 929 y se pintaba de 668 a 977,
encima del panel, que empieza en 929. Y en esos 48 px es exactamente donde
vive el botón «Volver a la lista» de la ficha del topónimo. No es que no se
viera: `elementFromPoint` sobre el botón devolvía la leyenda del mapa. Una
vez abierto un nombre, en el teléfono no había manera de volver a la lista.
El desplazamiento se va y no se sustituye por nada. Existía para que la
franja de sección no tapara la primera tira de mapa, y eso solo hace falta
si el mapa se pega arriba; no se pega, ni le hace falta, porque la lista ya
trae su propio desplazamiento interno y el mapa se queda quieto mientras se
la recorre. `z-index` se queda: es lo que pone los controles del mapa por
encima del lienzo. */
.mapa-caja { order: -1; z-index: 400;
height: 38vh; min-height: 14rem;
border-bottom: 1px solid var(--color-borde); }
.lista { max-height: min(30rem, 65vh); }
}
/* `grid-template-columns: minmax(0, 1fr)` y no columna implícita. La implícita
es `auto`, y `auto` se estira hasta el mayor mínimo intrínseco de sus hijos:
basta con que uno de ellos pida más ancho del que hay para que la columna
entera crezca y se lleve por delante a los demás. Eso es lo que pasó en el
teléfono con el desplegable de términos -ver la nota del tope en .filtros-tira-,
y el daño no lo sufrió el desplegable sino la lista, cuyos renglones pasaron a
medir 576 en una pantalla de 375.
Con `minmax(0, 1fr)` la columna vale lo que valga el panel y nada más. Si algo
no cabe, se le ve no caber a él en vez de descuadrar a toda la columna, que es
la diferencia entre un defecto que se localiza y uno que hay que perseguir. */
.panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto 1fr; min-height: 0;
border-right: 1px solid var(--color-borde); background: var(--papel); }
/* La cuenta a la izquierda y los pasos de página a la derecha, en una banda.
En dos bandas se llevaban 105 px de un panel que en un portátil mide 400. */
.panel__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
padding: 0.5625rem var(--sangria); border-bottom: 1px solid var(--color-borde); }
.panel__que { min-width: 0; }
.panel__titulo { font-family: var(--fuente-titular); font-weight: var(--peso-negro);
font-size: 1.0625rem; letter-spacing: -.02em; }
.panel__dice { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-suave); }
/* ── Ficha del topónimo ──────────────────────────────────────────────────
Se superpone al panel entero -filtros, cabecera, lista y paginación- en vez
de empujarlos: al volver, la lista sigue en la fila y en el desplazamiento
donde se quedó, sin repetir la consulta ni perder el sitio en 84.784. */
.detalle { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr;
background: var(--papel); }
.detalle__volver { display: flex; align-items: center; gap: 0.375rem; justify-self: start;
min-height: 2.25rem; margin: 0.5rem var(--sangria) 0; padding: 0.25rem 0.625rem 0.25rem 0.375rem;
border: 1px solid var(--color-borde-firme); border-radius: var(--radio-pastilla);
background: transparent; font-size: 0.8125rem; font-weight: var(--peso-medio);
color: var(--tinta); transition: border-color var(--dur-rapida) var(--curva-salida); }
.detalle__volver:hover { border-color: var(--color-cobalto); color: var(--color-cobalto); }
.detalle__volver svg { width: 1rem; height: 1rem; }
.detalle__cuerpo { min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 0.75rem var(--sangria) 2rem; }
.detalle__nombre { font-family: var(--fuente-titular); font-weight: var(--peso-negro);
font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem); letter-spacing: -.02em;
line-height: 1.2; text-wrap: pretty; }
.detalle__alterno { margin-top: 0.1875rem; font-size: 0.8125rem; font-style: italic; color: var(--tinta-suave); }
/* Los datos en dos columnas: el rótulo estrecho y el valor a su lado. En una
columna, «Dónde» y su municipio quedaban en renglones distintos y la ficha
se estiraba el doble de lo que dice. */
.detalle__datos { display: grid; gap: 0.375rem; margin: 0.875rem 0; padding: 0.75rem 0;
border-block: 1px solid var(--color-borde); }
.detalle__dato { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; align-items: start;
font-size: 0.8125rem; line-height: 1.45; color: var(--tinta); }
.detalle__rotulo { font-size: 0.6875rem; font-weight: var(--peso-fuerte);
letter-spacing: .06em; text-transform: uppercase;
color: var(--tinta-suave); padding-top: 0.125rem; }
.detalle__valor { min-width: 0; text-wrap: pretty; }
.detalle__valor b { font-weight: var(--peso-fuerte); }
.detalle__termino { justify-self: start; padding: 0.125rem 0.5rem; border: 0;
border-radius: var(--radio-pastilla); background: var(--papel-3);
font-size: 0.8125rem; font-weight: var(--peso-fuerte); color: var(--color-cobalto);
transition: background var(--dur-rapida) var(--curva-salida); }
.detalle__termino:hover { background: var(--crema-90); }
/* La descripción es a lo que se viene: se lee a un cuerpo mayor que la lista. */
.detalle__dice { font-size: 0.9375rem; line-height: 1.65; color: var(--tinta); text-wrap: pretty; }
.detalle__dice + .detalle__dice { margin-top: 0.75em; }
.detalle__sin { font-size: 0.875rem; line-height: 1.6; font-style: italic; color: var(--tinta-suave); }
.detalle__cod { margin-top: 1.25rem; font-size: 0.6875rem; font-variant-numeric: tabular-nums;
color: var(--tinta-suave); }
.lista { overflow-y: auto; overscroll-behavior: contain; }
.vacio { padding: 1.75rem var(--sangria); font-size: 0.9375rem; line-height: 1.6; color: var(--tinta-suave); }
/* La fila es de dos renglones: el nombre, y debajo el lugar con el término al
lado. En tres medía 110 px y en un portátil solo cabía un nombre a la vez. */
.fila { display: grid; gap: 0.125rem; padding: 0.6875rem var(--sangria); align-content: center;
border-bottom: 1px solid var(--color-borde); cursor: pointer;
transition: background var(--dur-rapida) var(--curva-salida); }
.fila:hover { background: var(--papel-2); }
.fila.es-viva { background: var(--papel-2); box-shadow: inset 3px 0 0 var(--color-cobalto); }
.fila__nombre { font-family: var(--fuente-titular); font-weight: var(--peso-fuerte); font-size: 0.9375rem;
letter-spacing: -.01em; line-height: 1.3; text-wrap: pretty; }
.fila__alterno { font-size: 0.75rem; color: var(--tinta-suave); font-style: italic; }
/* La descripción entra en la fila recortada a dos renglones. Es el motivo de la
página -un topónimo con lo que se sabe de él- y sin ella la lista era un
listín; entera, cada fila mediría lo que quisiera su párrafo y en un portátil
cabría una. El texto completo está a un clic, en la ficha. */
.fila__dice { font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-suave);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
overflow: hidden; }
.fila__puntos { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0.0625rem 0.4375rem;
border-radius: var(--radio-pastilla); border: 1px solid var(--color-borde-firme);
font-size: 0.6875rem; font-weight: var(--peso-medio); color: var(--tinta-suave); }
.fila__pie { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; }
.fila__donde { font-size: 0.8125rem; color: var(--tinta-suave); }
.fila__termino { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 1px 0.4375rem;
border-radius: var(--radio-pastilla); background: var(--papel-3); font-size: 0.6875rem;
font-weight: var(--peso-fuerte); text-decoration: none; color: var(--tinta); }
.fila__termino:hover { background: var(--color-cobalto); color: var(--papel-2); }
/* El término que no está en el glosario no se pinta como enlace: ofrecer una
puerta que no abre es peor que no ofrecerla. */
.fila__termino.es-suelto { background: transparent; border: 1px dashed var(--color-borde-firme);
color: var(--tinta-suave); font-weight: var(--peso-normal); }
/* Los botones son flechas y no «Anteriores/Siguientes»: al lado de la cuenta,
el rótulo largo empujaba el titulo a dos renglones en un panel estrecho. El
nombre completo sigue estando, en el aria-label. */
.paginas { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.paginas__boton { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: 0 0.375rem;
border: 1px solid var(--color-borde-firme); border-radius: 0.5rem;
background: var(--papel); font-size: 0.875rem; font-weight: var(--peso-medio); }
.paginas__boton:hover:not(:disabled) { border-color: var(--tinta); }
.paginas__boton:disabled { opacity: .45; cursor: not-allowed; }
.paginas__dice { min-width: 6.5rem; font-size: 0.75rem; color: var(--tinta-suave); text-align: center;
font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .paginas__boton { min-width: 2.75rem; min-height: 2.75rem; } }
.mapa-caja { position: relative; min-height: 0; background: var(--papel-3); }
.mapa-caja__lienzo { position: absolute; inset: 0; }
.credito { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 500; padding: 5px 0.6875rem;
border-radius: var(--radio-pastilla); background: var(--crema-90); font-size: 0.7188rem;
color: var(--tinta-suave); }
/* El botón de volver al encuadre. MapLibre dibuja los suyos con una imagen de
fondo; este lleva un SVG dentro, así que hay que darle tamaño y color. */
.ctrl-inicio svg { display: block; width: 1.125rem; height: 1.125rem;
margin: auto; color: var(--tinta); }
/* ── Leyenda ─────────────────────────────────────────────────────────────
Abajo a la izquierda: arriba a la derecha están el zoom y abajo a la derecha
el crédito. Toma el mismo papel translúcido del crédito, así que se lee sobre
la imagen de satélite sin tapar el mapa más de lo necesario, y se pliega,
porque en una pantalla corta quince sectores serían media columna. */
/* El tope va contra el mapa, no contra el visor: con svh, un mapa corto dentro
de una pantalla alta dejaba que la leyenda se comiera casi toda su caja. Con
el 45% del contenedor, la lista se desplaza y el mapa sigue siendo el mapa. */
/* Sin tope de alto y sin desplazamiento. Una leyenda que hay que desplazar para
leerla entera deja de ser una leyenda: lo suyo es comparar quince sectores de
un vistazo, y no se compara lo que no se ve a la vez. Primero fue el 45% del
mapa, luego el 72%; las dos veces la lista salía cortada.
Si aun así no cabe —una pantalla baja, el móvil en horizontal—, se pliega
sola. Cerrada y completa al abrirla es mejor que abierta y cortada. */
.leyenda { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 500;
display: flex; flex-direction: column;
max-width: min(16rem, calc(100% - 1.5rem));
border-radius: var(--radio-lg); background: var(--crema-90);
box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.leyenda__cabeza { display: flex; align-items: center; gap: 0.375rem; flex: none; width: 100%;
padding: 0.375rem 0.5625rem; border: 0; background: transparent;
font-family: var(--fuente-titular); font-weight: var(--peso-fuerte);
font-size: 0.6875rem; color: var(--tinta); text-align: left; }
.leyenda__titulo { flex: 1; }
.leyenda__senal { width: 0.8125rem; height: 0.8125rem; flex: none;
transition: transform var(--dur-rapida) var(--curva-salida); }
.leyenda[data-plegada] .leyenda__senal { transform: rotate(-90deg); }
.leyenda[data-plegada] .leyenda__lista { display: none; }
.leyenda__lista { display: grid; gap: 0.0625rem; padding: 0 0.5625rem 0.4375rem; }
/* Sirve de fila y de botón. En la página de nombres es un y solo informa;
en la del Banco es un que apaga y enciende su categoría, y por eso
lleva el reinicio de estilos de botón —que en un no molesta— en vez de
dos reglas casi iguales. */
.leyenda__fila { display: flex; align-items: center; gap: 0.375rem; width: 100%;
padding: 0.125rem 0.25rem; margin-inline: -0.25rem;
border: 0; border-radius: var(--radio-sm); background: transparent;
font: inherit; font-size: 0.6875rem; line-height: 1.3;
color: var(--tinta); text-align: left; }
button.leyenda__fila { cursor: pointer;
transition: background var(--dur-rapida) var(--curva-salida); }
button.leyenda__fila:hover { background: var(--crema-90); }
/* Fuera del foco: se queda en su sitio y sigue diciendo cuántas hay, porque
saber que una temática existe y no se está mirando es parte de lo que la
leyenda explica. Pierde color, que es lo que ha perdido en el mapa.
Sin tachar. El tachado dice «esto se ha eliminado» y aquí no se ha eliminado
nada: se ha elegido mirar otra cosa, y un clic la trae de vuelta. */
button.leyenda__fila[aria-pressed="false"] { color: var(--tinta-suave); }
button.leyenda__fila[aria-pressed="false"] .leyenda__icono { opacity: 0.35; filter: grayscale(0.85); }
.leyenda__que { min-width: 0; }
/* Un botón que solo aparece cuando hay algo que deshacer. */
.leyenda__todas { flex: none; margin: 0 0.5625rem 0.4375rem; padding: 0.3125rem 0.5rem;
border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
background: transparent; cursor: pointer;
font-family: var(--fuente-titular); font-size: 0.6875rem;
font-weight: var(--peso-fuerte); color: var(--color-cobalto);
transition: background var(--dur-rapida) var(--curva-salida); }
.leyenda__todas:hover { background: var(--crema-90); }
/* El icono, a la proporción del pin del servicio -17x22 puntos-, reducido a lo
que hace falta para reconocerlo en una lista. */
.leyenda__icono { width: 0.8125rem; height: 1.0625rem; flex: none; object-fit: contain; }
.leyenda__cuantos { margin-left: auto; padding-left: 0.3125rem; font-variant-numeric: tabular-nums;
font-size: 0.625rem; color: var(--tinta-suave); }
@media (pointer: coarse) { .leyenda__cabeza { min-height: 2.75rem; } }
/* ── Ficha del término, encima de la lista ──────────────────────────
Va en , así que el fondo, el foco atrapado y el cierre con Escape los
pone el navegador. Aquí solo el aspecto. */
.ficha-termino { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 4rem); padding: 0;
border: 0; border-radius: var(--radio-lg); background: var(--papel);
color: var(--tinta); overflow: auto; overscroll-behavior: contain; }
.ficha-termino::backdrop { background: rgba(22, 35, 58, .55); backdrop-filter: blur(2px); }
.ficha-termino__cerrar { position: sticky; top: 0.5rem; float: right; z-index: 2; margin-right: 0.5rem;
width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%;
background: var(--crema-90); font-size: 1rem; line-height: 1; color: var(--tinta); }
.ficha-termino__cerrar:hover { background: var(--papel-3); }
/* La lámina manda: ahora la ficha es también la manera de leer un término desde
el glosario, donde la imagen era la protagonista de la tarjeta, y entrar a un
párrafo con una franja estrecha encima perdía lo que se venía mirando. Crece
con el alto del visor y no con un número fijo, y se detiene en 22rem para que
en una pantalla alta no empuje la definición fuera de la vista. */
.ficha-termino__lamina { width: 100%; height: clamp(14rem, 34svh, 22rem); object-fit: cover;
display: block; background: var(--papel-3); }
.ficha-termino__texto { display: grid; gap: 0.5rem; padding: 1.125rem 1.375rem 1.375rem; }
.ficha-termino__que { font-size: 0.6875rem; font-weight: var(--peso-fuerte); letter-spacing: .1em;
text-transform: uppercase; color: var(--tinta-suave); }
.ficha-termino__nombre { font-family: var(--fuente-titular); font-weight: var(--peso-negro);
font-size: 1.375rem; letter-spacing: -.02em; text-wrap: pretty; }
.ficha-termino .acepcion + .acepcion { margin-top: 0.5rem; }
.ficha-termino__ver { justify-self: start; margin-top: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem;
border: 0; border-radius: var(--radio-pastilla); background: var(--color-cobalto);
color: var(--papel-2); font-size: 0.875rem; font-weight: var(--peso-fuerte);
transition: background var(--dur-rapida) var(--curva-salida); }
.ficha-termino__ver:hover { background: var(--color-enlace-fuerte); }
/* ── Glosario ───────────────────────────────────────────────────── */
.glosario__cuenta { margin-bottom: 1rem; font-size: 0.875rem; color: var(--tinta-suave); }
/* Las tarjetas cerradas miden todas lo mismo: la rejilla alinea las filas y cada
tarjeta se estira a la altura de su fila. Sin eso, una definición de tres
renglones y otra de once dejan la rejilla a saltos, que es lo que se veía. */
.glosario { display: grid; gap: 1.125rem; padding-bottom: 3.5rem; align-items: stretch;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.termino { display: grid; grid-template-rows: auto 1fr; overflow: hidden;
border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--papel);
transition: border-color var(--dur-rapida) var(--curva-salida),
box-shadow var(--dur-media) var(--curva-salida); }
.termino:hover { border-color: var(--color-borde-firme); box-shadow: var(--sombra-tarjeta); }
/* La lámina es el botón que abre la ficha. La señal ya no es un chevron que
gira: abre una ficha encima, no despliega la tarjeta, y una flecha hacia
abajo prometía lo segundo. */
.termino__abrir { position: relative; display: block; width: 100%; padding: 0; border: 0;
background: var(--papel-3); overflow: hidden; }
.termino__lamina { width: 100%; height: 13.5rem; object-fit: cover; display: block;
transition: transform var(--dur-media) var(--curva-salida); }
.termino__abrir:hover .termino__lamina { transform: scale(1.03); }
.termino__senal { position: absolute; right: 0.625rem; bottom: 0.625rem; display: grid; place-items: center;
width: 2rem; height: 2rem; border-radius: 50%; background: var(--crema-90);
color: var(--tinta); transition: transform var(--dur-rapida) var(--curva-salida); }
.termino__senal svg { width: 1.125rem; height: 1.125rem; }
.termino__abrir:hover .termino__senal { transform: scale(1.12); }
.termino__texto { display: grid; align-content: start; gap: 0.5rem; padding: 1rem 1.125rem 1.125rem; }
.termino__nombre { font-family: var(--fuente-titular); font-weight: var(--peso-negro); font-size: 1.0625rem;
letter-spacing: -.02em; text-wrap: pretty; }
.termino__dice { font-size: 0.875rem; line-height: 1.6; color: var(--azul-800); text-wrap: pretty; }
.termino__fuente { margin-top: 0.1875rem; font-size: 0.75rem; line-height: 1.5; color: var(--tinta-suave);
/* Las fuentes traen direcciones larguísimas sin espacios y se salían de la tarjeta. */
overflow-wrap: anywhere; }
.termino__mas { font-size: 0.75rem; font-weight: var(--peso-fuerte); color: var(--color-cobalto); }
.acepcion__n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
margin-bottom: 0.1875rem; border-radius: 50%; background: var(--papel-3);
font-size: 0.6875rem; font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
/* En la tarjeta, la definición se recorta a cuatro renglones: una rejilla donde
cada pieza mide distinto según lo larga que sea su definición se lee como algo
roto. El texto entero está a un clic, en la ficha, donde no recorta nada. */
.termino .termino__dice {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
overflow: hidden; }
.termino__ver { justify-self: start; margin-top: 0.25rem; min-height: 2.25rem; padding: 0.375rem 0.75rem;
border: 1.5px solid var(--color-borde-firme); border-radius: var(--radio-pastilla);
background: transparent; font-size: 0.8125rem; font-weight: var(--peso-medio);
transition: border-color var(--dur-rapida) var(--curva-salida); }
.termino__ver:hover { border-color: var(--color-cobalto); color: var(--color-cobalto); }
/* Aquí estaba `.pie__fuentes`, el párrafo de procedencia del pie. Se retiró el
párrafo de /nombres-y-terminos y de /bnng —las dos páginas que cargan esta
hoja— y la regla se va con él: una regla sin nadie a quien aplicarse no avisa
de que sobra, se queda esperando a que alguien reutilice la clase para otra
cosa y se lleve un estilo que no pidió.
La clase NO ha desaparecido del sitio: la ficha de entidad la sigue usando
para el sello de «Consultando el servicio del IGAC…», y su regla vive en
ficha.css, que es la única hoja que carga esa página. */
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; } }