/*
 * Selector de entidad territorial (/entidades).
 *
 * Hoja portada del prototipo del rediseño tal cual: colores, tamaños, cortes de
 * clase y duraciones son los que se verificaron contra el servicio del IGAC.
 * Lo único retirado son las reglas del cromo —barra del Estado, cabecera, menú y
 * pie—, que las define base.css para todo el sitio.
 *
 * Esta hoja no declara ni un token. Los toma todos de tokens.css, que es donde
 * viven. Hasta ahora repetía diecisiete —los alias cortos con los que se escribió
 * el prototipo: --papel, --cobalto, --titular…— con los mismos valores escritos
 * en hexadecimal mientras tokens.css los tenía en OKLCH. No habían divergido, pero
 * nada lo impedía: dos sitios donde cambiar un color es uno de más.
 */
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}
/* El contorno de foco en un polígono SVG se dibuja como caja de su bbox, no
   siguiendo la forma: cruza el mapa entero. El resalte visual del polígono es
   su propio trazo, así que aquí se retira el contorno. */
.maplibregl-canvas:focus{outline:0}
/* display en la clase gana al atributo hidden: hay que declararlo.
   La hamburguesa queda fuera. Va con hidden en el HTML a propósito —si la hoja no
   carga, el botón no sale y los enlaces quedan a la vista— y la enciende la consulta
   de medios de base.css por debajo de 62rem. Con el !important de aquí dentro esa
   consulta no ganaba, así que en el móvil de estas dos páginas no había ni botón ni
   menú: la cabecera se quedaba sin navegación. */
[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)}

/* La cabecera la define base.css, y solo base.css. Aquí había una copia del
   prototipo —min-height:4.6875rem y .marca__nombre en 1rem— que parecía decir lo
   mismo que la de base y no lo decía: esta hoja lleva la escala tipográfica fluida
   de más arriba, así que ese rem vale entre 16,6 y 22 px según la pantalla, mientras
   que en base.css la cabecera son 75 px y el rótulo 16 px fijos.
   El resultado era que el mismo banner medía 76 px en la portada y 86 aquí en un
   monitor de 1080, con el rótulo «Diccionario Geográfico» creciendo con él. Se nota
   al pasar de una página a otra, que es justo donde una marca no puede cambiar de
   tamaño. Lo único que sigue siendo propio de esta hoja es el ancho —al final del
   archivo—, porque alinea el logotipo con el contenido, que aquí mide 96rem. */

/* ── Encabezado ───────────────────────────────────────────────── */
/* El relleno y el titular del encabezado se miden también contra el alto del
   visor: en un portátil bajo cada píxel que se queda aquí se lo quita al mapa,
   que es lo que la página viene a enseñar. En pantalla alta los valores se
   plantan en los del diseño y no se nota. */
/* El banner de sección vive en base.css. Aquí solo lo que esta página ajusta. */
/* Aquí estaba el tope de 50rem para la bajada, con este razonamiento: a 1.300 px
   de renglón «el ojo pierde el renglón al saltar de línea». Era correcto, y por
   eso mismo se ha subido a base.css convertido en medida de lectura (62ch), que
   es lo que las otras tres secciones venían resolviendo cada una por su lado con
   un número distinto. La regla se cumple igual y ahora se cumple en las cuatro. */

/* ── Selector ─────────────────────────────────────────────────── */
.selector{display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--color-borde)}
/* El encabezado y el selector son una sola pantalla. Antes el selector medía
   100vh menos el cromo y el encabezado quedaba fuera de la cuenta: en un monitor
   de 1080 sobraba sitio y no se notaba, pero en un portátil —un panel 1080p al
   150 % de Windows deja 720 px de css— esos ~200 px de encabezado empujaban el
   tercio inferior del mapa al otro lado del pliegue, y el país había que verlo
   desplazando.
   Ahora la caja se planta en el alto disponible y el selector se lleva lo que
   sobra: la resta la hace la maquetación, no un número escrito a mano, así que
   el mapa entra entero en cualquier alto sin que nadie tenga que actualizar
   nada cuando el encabezado cambie de texto o de tamaño.
   --cromo-h vive en tokens.css y va en píxeles porque el cromo del Estado mide
   en píxeles: no crece con el clamp tipográfico de arriba. */
@media (min-width:62rem){
  /* La caja no impone alto: lo impone el selector, y la caja vale lo que sumen la
     banda azul y él. Así el alto del documento no depende de si la franja está
     puesta. Ver la nota de --area-util en tokens.css. */
  .pantalla{display:flex;flex-direction:column;height:auto;min-height:32rem}
  .selector{grid-template-columns:23rem minmax(0,1fr);min-height:0;
    height:calc(var(--area-util) - var(--banda-previa-h));flex:none}
  /* Aquí iba el `scroll-snap-align` del tramo de trabajo. El selector sigue
     siendo donde se para -es lo que se vino a usar-, pero ya no hace falta
     decirlo: navegacion.js toma el primer hermano del banner que ocupe sitio, y
     en esta página eso salta por encima del aviso de servicio caído cuando mide
     cero y para en él cuando no. Ver la nota de los tramos en base.css. */
}
@media (max-width:62rem){
  /* Aquí estaba el mismo `position: sticky; top: var(--barra-alta)` que en
     nombres.css, con el mismo comentario diciendo que no llegaba a pegar nada
     porque `.mapa-caja{position:relative}`, más abajo, ganaba por orden.

     El `position` sí lo perdía; el `top` no. Sobre una caja relativa `top`
     desplaza lo pintado sin mover lo ocupado, así que el mapa se dibujaba 48 px
     por debajo de su sitio, encima del panel, y con `z-index: 400` lo tapaba.
     En esta página eso se come la primera franja del panel, que es donde va el
     paso -«1 Elija un departamento»- y, cuando se ha entrado en un
     departamento, el botón de volver. El detalle entero, con la medición, en la
     nota equivalente de nombres.css. */
  .mapa-caja{order:-1;z-index:400;height:42vh;min-height:15rem;
    border-bottom:1px solid var(--color-borde)}
  .panel{border-right:0}
  /* La lista acota su propio alto: en móvil ningún ancestro resuelve altura, así
     que sin este tope el scroll interno no existe. */
  .lista{max-height:min(26rem, 60vh);min-height:16rem}
}

.panel{display:grid;grid-template-rows:auto auto 1fr;min-height:0;border-right:1px solid var(--color-borde);background:var(--papel)}
.panel__paso{display:flex;align-items:center;gap:0.5625rem;padding:1rem var(--sangria) 0;
  font-size:0.7188rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-cobalto)}
.panel__paso b{display:inline-flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.25rem;
  border-radius:62.4375rem;background:var(--color-cobalto);color:var(--papel-2);font-size:0.7188rem}
.panel__cabeza{padding:0.5rem var(--sangria) 0.875rem;border-bottom:1px solid var(--color-borde)}
.panel__titulo{font-family:var(--fuente-titular);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.panel__dice{margin-top:5px;font-size:0.8438rem;line-height:1.5;color:var(--tinta-suave)}
.volver{display:inline-flex;align-items:center;gap:7px;margin-top:0.6875rem;padding:7px 0.8125rem;border-radius:62.4375rem;
  border:1.5px solid var(--color-borde-firme);background:transparent;font-size:0.8438rem;font-weight:500;
  transition:background 140ms var(--curva-salida),border-color 140ms var(--curva-salida)}
.volver:hover{background:var(--papel-2);border-color:var(--tinta)}

/* ── Búsqueda ─────────────────────────────────────────────────── */
.buscar{display:grid;gap:0.5rem;margin-top:0.75rem}
/* La caja tiene relieve propio: hundida en reposo (el papel la contiene) y
   elevada al enfocarse, para que se lea como un campo activo y no como una
   línea más del panel. */
.buscar__caja{position:relative;display:flex;align-items:center;
  border:1.5px solid var(--color-borde-firme);border-radius:62.4375rem;
  background:linear-gradient(180deg,var(--papel-2),var(--papel));
  box-shadow:inset 0 1px 2px rgba(22,35,58,.07);
  transition:border-color 160ms var(--curva-salida),box-shadow 200ms var(--curva-salida),background 200ms var(--curva-salida),transform 200ms var(--curva-salida)}
.buscar__caja:hover{border-color:var(--tinta-suave)}
.buscar__caja:has(.buscar__campo:focus){border-color:var(--color-cobalto);background:#fff;transform:translateY(-1px);
  box-shadow:0 0 0 0.25rem color-mix(in oklch, var(--color-cobalto) 16%, transparent),0 0.75rem 1.5rem -0.9rem rgba(22,35,58,.5)}
.buscar__lupa{position:absolute;left:0.875rem;width:1.0625rem;height:1.0625rem;color:var(--tinta-suave);pointer-events:none;
  transition:color 180ms var(--curva-salida),transform 240ms var(--curva-salida)}
.buscar__caja:has(.buscar__campo:focus) .buscar__lupa{color:var(--color-cobalto);transform:scale(1.06)}
.buscar__campo{flex:1;min-width:0;min-height:2.875rem;padding:0.6875rem 0.5rem 0.6875rem 2.5rem;
  border:0;background:transparent;color:var(--tinta);font-family:inherit;font-size:0.9375rem}
.buscar__campo::placeholder{color:var(--tinta-suave)}
.buscar__campo:focus{outline:0}
.buscar__campo::-webkit-search-cancel-button{display:none}
/* Atajo visible: la barra oblicua enfoca el campo desde cualquier parte. */
.buscar__tecla{flex:none;margin-right:0.6875rem;padding:2px 0.4375rem;border-radius:0.375rem;
  border:1px solid var(--color-borde-firme);background:var(--papel);color:var(--tinta-suave);
  font-family:var(--fuente-titular);font-size:0.6875rem;font-weight:700;line-height:1.4;
  transition:opacity 160ms var(--curva-salida)}
.buscar__caja:has(.buscar__campo:focus) .buscar__tecla{opacity:0}
.buscar__limpiar{flex:none;margin-right:0.4375rem;width:1.75rem;height:1.75rem;display:grid;place-items:center;
  border:0;border-radius:62.4375rem;background:transparent;color:var(--tinta-suave);font-size:1.1875rem;line-height:1;
  transition:background 140ms var(--curva-salida),color 140ms var(--curva-salida)}
.buscar__limpiar:hover{background:var(--papel-3);color:var(--tinta)}

/* Ámbito: acota la búsqueda sin volver a escribirla, y de paso dice cuántas
   coincidencias hay de cada clase. */
.filtros{display:flex;gap:0.375rem}
.filtro{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;min-height:1.875rem;
  padding:0.25rem 0.625rem;border:1px solid var(--color-borde);border-radius:62.4375rem;background:transparent;
  color:var(--tinta-suave);font-size:0.75rem;font-weight:600;
  transition:background 140ms var(--curva-salida),color 140ms var(--curva-salida),border-color 140ms var(--curva-salida)}
.filtro:hover{background:var(--papel-2);color:var(--tinta)}
.filtro b{font-variant-numeric:tabular-nums;font-weight:700;opacity:.7}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel-2)}
.filtro[aria-pressed="true"] b{opacity:.75}
.filtro[disabled]{opacity:.4;pointer-events:none}

.lista__conteo{display:flex;align-items:baseline;gap:0.375rem;padding:0.75rem 0.375rem 0.25rem;
  font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.lista__conteo em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;opacity:.85}
.lista__vacio{display:grid;justify-items:start;gap:0.5rem;margin:1rem 0.375rem;padding:1.125rem 1.125rem;
  border:1px dashed var(--color-borde-firme);border-radius:0.875rem;background:var(--papel-2);
  font-size:0.8438rem;line-height:1.55;color:var(--tinta-suave)}
.lista__vacio b{color:var(--tinta);font-family:var(--fuente-titular);font-size:0.9375rem}
.lista__vacio svg{width:1.375rem;height:1.375rem;color:var(--color-borde-firme)}
.lista{overflow-y:auto;min-height:0;padding:6px var(--sangria) 1.25rem}
.lista__grupo{padding:0.875rem 0 6px;font-size:0.7188rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave)}
/* Columnas: punto, nombre, código DANE, pie (departamento) y la punta de avance
   del ::after. El código tiene columna propia para que quede alineado fila a
   fila; el pie puede faltar. */
.fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:0.6875rem;width:100%;
  padding:0.625rem 0.5rem 0.625rem 0.625rem;border:0;border-radius:0.6875rem;background:transparent;text-align:left;text-decoration:none;
  color:var(--tinta);font-size:0.9063rem;
  transition:background 140ms var(--curva-salida),box-shadow 180ms var(--curva-salida),transform 180ms var(--curva-salida)}
.fila:hover,.fila.es-marcada{background:var(--papel-2);transform:translateX(2px);
  box-shadow:inset 0.1875rem 0 0 var(--color-cobalto)}
.fila.es-marcada{background:var(--papel-3)}
.fila[aria-current]{background:var(--color-cobalto);color:var(--papel-2);font-weight:700}
.fila i{width:0.5rem;height:0.5rem;border-radius:6.1875rem;background:var(--color-cobalto);opacity:.4;
  transition:transform 200ms var(--curva-salida),opacity 200ms var(--curva-salida)}
.fila:hover i,.fila.es-marcada i{opacity:.9;transform:scale(1.25)}
.fila[aria-current] i{background:var(--amarillo);opacity:1}
.fila small{font-size:0.7813rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.fila[aria-current] small{color:rgba(246,239,220,.85)}
/* El código DANE, en monoespaciada y cifras tabulares: cinco dígitos que se
   alinean en columna y se leen como clave, no como cantidad. El ancho mínimo
   de cinco cifras deja los códigos de departamento (dos) alineados a la
   derecha con los de municipio. Misma pieza que .buscador__dane en la ficha. */
.fila__dane{min-width:5ch;text-align:right;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  font-size:0.75rem;letter-spacing:.06em;font-variant-numeric:tabular-nums slashed-zero;color:var(--tinta-suave)}
.fila[aria-current] .fila__dane{color:rgba(246,239,220,.85)}
.fila--capital i{background:var(--amarillo);opacity:1}
/* La coincidencia se marca en el nombre: al escribir «san» se ve por qué cae
   cada resultado. */
.fila mark{background:color-mix(in oklch, var(--amarillo) 55%, transparent);color:inherit;
  border-radius:0.1875rem;padding:0 1px}
/* Punta de avance: aparece en la fila apuntada, no en todas a la vez. */
.fila::after{content:"";width:0.4375rem;height:0.4375rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateX(-0.125rem);opacity:0;color:var(--color-cobalto);
  transition:opacity 160ms var(--curva-salida),transform 200ms var(--curva-salida)}
.fila:hover::after,.fila.es-marcada::after,.fila:focus-visible::after{opacity:.75;transform:rotate(-45deg)}
.fila[aria-current]::after{color:var(--papel-2)}
/* Entrada escalonada de los resultados: el cambio de lista se percibe como una
   respuesta a lo que se escribió, no como un salto. */
@keyframes entra-fila{from{opacity:0;transform:translateY(0.375rem)}to{opacity:1;transform:none}}
.lista--nueva .fila{animation:entra-fila 260ms var(--curva-salida) both}
.lista--nueva .fila:nth-child(-n+12){animation-delay:calc((var(--i,0)) * 22ms)}
@media (prefers-reduced-motion:reduce){.lista--nueva .fila{animation:none}}
.vacio{padding:1.125rem 0.625rem;font-size:0.8438rem;color:var(--tinta-suave)}

/* El suelo de 26rem es para el móvil, donde la caja se mide sola. Dentro de la
   pantalla de escritorio el alto ya lo reparte .pantalla, y un mínimo mayor que
   su parte volvería a sacar el mapa del visor. */
.mapa-caja{position:relative;min-height:26rem;background:var(--papel-2)}
@media (min-width:62rem){.mapa-caja{min-height:0}}
.mapa-caja__lienzo{position:absolute;inset:0}
.maplibregl-map{font-family:var(--fuente-texto)}
.maplibregl-canvas-container canvas{outline:0}
.maplibregl-ctrl-group{border-radius:0.6875rem;box-shadow:0 6px 16px -12px rgba(22,35,58,.7)}
.maplibregl-ctrl-group button+button{border-top-color:var(--color-borde)}
/* El globo del mapa: solo aparece donde el rótulo no cupo. */
.maplibregl-popup-content{padding:5px 0.6875rem;border-radius:62.4375rem;background:rgba(22,35,58,.9);
  color:var(--papel-2);font-family:var(--fuente-titular);font-weight:700;font-size:0.7813rem;box-shadow:none}
.maplibregl-popup-tip{display:none}
.pista{position:absolute;left:0.875rem;bottom:0.875rem;z-index:500;max-width:min(24rem,calc(100% - 1.75rem));
  display:grid;gap:4px;padding:0.75rem 0.9375rem;border-radius:0.875rem;background:rgba(22,35,58,.84);
  color:var(--papel-2);backdrop-filter:blur(6px)}
.pista b{font-family:var(--fuente-titular);font-weight:800;font-size:0.9375rem}
.pista span{font-size:0.8125rem;line-height:1.5;color:rgba(246,239,220,.85)}
.credito{position:absolute;right:0.75rem;bottom:0.75rem;z-index:500;padding:5px 0.6875rem;border-radius:62.4375rem;
  background:rgba(255,253,247,.9);font-size:0.7188rem;color:var(--tinta-suave)}

/* Aquí estaba `.pie__fuentes`. Retirado el párrafo de procedencia del pie del
   selector, la regla se queda sin nadie: esta hoja solo la carga /entidades. La
   ficha sigue usando la clase para el sello del servicio, pero carga ficha.css,
   que tiene la suya. */


@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}