/*
 * Base Nacional de Nombres Geográficos (/bnng).
 *
 * Se apoya en nombres.css, que ya trae el encabezado, la tira de filtros, el
 * tablero, el mapa y la leyenda. Aquí solo está lo que cambia, que es el
 * reparto: en la página de nombres manda la lista —se viene a leer— y aquí
 * manda el mapa, porque lo que se viene a ver es cómo se reparten ochocientos
 * mil topónimos sobre el país. La tabla es la manera de saber qué es cada
 * mancha, no el asunto.
 *
 * No declara ni un token: los toma todos de tokens.css.
 */

/* La caja de alto de pantalla. nombres.css la ata a #vista-nombres, que aquí no
   existe: sin esto el tablero no recibía altura, la tabla se quedaba en su
   encabezado y el mapa desaparecía con el pie pegado debajo. */
@media (min-width: 62rem) {
  /* Solo con el tablero a la vista, como en nombres.css: si el servicio no responde
     el tablero se oculta, y una caja de 34rem sin nada dentro dejaba un hueco en
     blanco entre el banner y el aviso. */
  .pantalla--banco:has(#vista-banco:not([hidden])) { display: flex; flex-direction: column;
                     height: auto; min-height: 34rem; }
  /* Dos tercios para el mapa. En nombres es 55/45 a favor de la lista. */
  .tablero--banco { grid-template-columns: 36% 64%; }
  /* Con la barra puesta manda el tablero y no la caja: se planta en el visor
     menos la franja. Aquí es donde más se nota, que es la página de mapa y tabla.
     Ver --area-util en tokens.css. */
  /* Solo la vista, no también el tablero que lleva dentro: son uno dentro de
     otro, así que fijarles el alto a los dos es decir dos veces lo mismo, y
     ponerles enganche a los dos deja dos posiciones a un par de píxeles una de
     otra. El tablero ya se estira solo dentro de la vista. */
  /* Menos la tira de filtros: los filtros son contenido y tienen que verse junto
     al tablero, no quedarse escondidos detrás de la cabecera. Ver --banda-previa-h. */
  .pantalla--banco > .vista {
    height: calc(var(--area-util) - var(--banda-previa-h)); flex: none;
  }
  /* Aquí iba el `scroll-snap-align` del tramo de trabajo, para que lo que
     quedara asentado fueran los filtros y lo que filtran, juntos. Sigue siendo
     así, solo que ya no se declara: el tramo es «donde empieza lo que hay
     debajo del banner», y esa es esta tira. Ver la nota de los tramos en
     base.css. */
}

/* ── El banner: el reparto, no el tamaño ──────────────────────────────────
   Esta página lo tenía recogido a un renglón para devolverle unos setenta
   píxeles al tablero. La intención era buena y el resultado era que la BNNG
   llevaba el banner más pequeño de las cuatro secciones —«pequeño» frente al
   «mediano» de /nombres y el «grande» de /entidades—, y las tres están a un clic
   una de otra.

   Los setenta píxeles los devuelve ahora la barra de sección: el banner se va
   con la página en cuanto se baja, que es exactamente cuando el tablero los
   necesita. Arriba del todo no los necesitaba nadie.

   Lo que sí se queda es el REPARTO, que no es cuestión de tamaño sino de
   contenido: esta sección tiene una cifra que las otras no tienen, y va a la
   derecha del título, donde no compite con el nombre de la sección. */

/* Al centro y no a la línea base: son dos bloques —lo que es esto y cuánto
   tiene—, no dos frases seguidas. Alineados por la base, la cifra quedaba
   colgando a la altura del título y el resto de su línea flotaba suelto. */

/* 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. 55px es lo que mide la tira de filtros de esta pagina en un renglon. */
:root { --banda-previa-h: 55px; }
.entrada--banco__interior { display: flex; align-items: center;
                            justify-content: space-between; gap: 0.75rem 2rem;
                            flex-wrap: wrap; }
.entrada--banco__que { min-width: 0; }

/* La cifra, como dato y no como frase. Filete a la izquierda: es lo que la
   separa del título sin necesidad de una caja ni de otro color, y es el
   recurso que ya usa el pie del sitio. */
.entrada--banco__cifra { display: flex; flex-direction: column; align-items: flex-end;
                         flex: none; gap: 0.0625rem; margin: 0;
                         padding-left: 2rem; border-left: 1px solid var(--crema-38);
                         line-height: 1.1; }
.entrada--banco__cifra b { font-family: var(--fuente-titular);
                           font-size: clamp(1.25rem, 2.4vw, 1.75rem);
                           font-weight: var(--peso-negro);
                           font-variant-numeric: tabular-nums; }
.entrada--banco__cifra span { font-size: 0.6875rem; letter-spacing: .08em;
                              text-transform: uppercase; color: var(--crema-85); }

/* En pantalla estrecha el filete estorba —la cifra ya no está al lado de nada—
   y el bloque se alinea con el título. */
@media (max-width: 48rem) {
  .entrada--banco__cifra { align-items: flex-start; padding-left: 0; border-left: 0; }
}

/* Los filtros van a ancho de página y no dentro del panel: la tabla es
   estrecha, y cuatro controles ahí dentro se apilarían en cuatro renglones. */
.acotar--banco { padding-block: 0.5rem; }
.acotar--banco .filtros-tira { max-width: 96rem; margin-inline: auto;
                               padding-inline: var(--sangria); }

/* ── La tabla ─────────────────────────────────────────────────────────────
   Tabla de verdad y no una lista de tarjetas: son registros de una base, todos
   con los mismos tres datos, y en columnas se comparan de un vistazo. El
   encabezado se queda fijo mientras el cuerpo se desplaza. */
.tabla-caja { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabla thead th { position: sticky; top: 0; z-index: 1;
                  padding: 0.4375rem var(--sangria); text-align: left;
                  background: var(--papel-2); border-bottom: 1px solid var(--color-borde);
                  font-size: 0.6875rem; font-weight: var(--peso-fuerte); letter-spacing: .06em;
                  text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; }
.tabla tbody tr { border-bottom: 1px solid var(--color-borde); cursor: pointer;
                  transition: background var(--dur-rapida) var(--curva-salida); }
.tabla tbody tr:hover { background: var(--papel-2); }
.tabla tbody tr.es-viva { background: var(--papel-2); box-shadow: inset 3px 0 0 var(--color-cobalto); }
.tabla td { padding: 0.4375rem var(--sangria); vertical-align: top; line-height: 1.35; }
/* El nombre es lo que se busca: pesa más que sus dos acompañantes. */
.tabla__nombre { font-weight: var(--peso-fuerte); color: var(--tinta); text-wrap: pretty; }
.tabla__termino, .tabla__donde { color: var(--tinta-suave); }
/* La subcategoría bajo su categoría, y el nombre alterno bajo el nombre: el
   dato menor debajo del mayor, no al lado. */
.tabla__donde small, .tabla__termino small { display: block; font-size: 0.6875rem; }
.tabla__vacio { padding: 1.25rem var(--sangria); font-size: 0.875rem; color: var(--tinta-suave); }

/* En pantalla estrecha la tabla pierde la columna del término —que se repite
   mucho y es lo más prescindible de los tres— antes que apretar el nombre. */
@media (max-width: 64rem) {
  .tablero--banco { grid-template-columns: 1fr; grid-template-rows: 45svh 1fr; }
  .tabla thead th:nth-child(2), .tabla td:nth-child(2) { display: none; }
}

/* ── La escala de densidad ────────────────────────────────────────────────
   Cinco pasos y sus dos extremos. Sin marcas intermedias a propósito: los
   cortes se recalculan con cada consulta y llenar la barra de cifras que
   cambian solas es más ruido que ayuda. La cifra exacta de una celda se pide
   señalándola, y aparece al lado del título. */
.escala { flex: none; padding: 0 0.5625rem 0.5rem;
          border-bottom: 1px solid var(--color-borde); margin-bottom: 0.375rem; }
.escala__que { display: flex; align-items: baseline; justify-content: space-between;
               gap: 0.5rem; font-size: 0.625rem; letter-spacing: .05em;
               text-transform: uppercase; color: var(--tinta-suave); }
.escala__lectura { font-size: 0.75rem; letter-spacing: 0; text-transform: none;
                   font-variant-numeric: tabular-nums; color: var(--tinta); }
.escala__barra { display: flex; margin-top: 0.25rem; height: 0.5rem;
                 border-radius: 999px; overflow: hidden; }
.escala__paso { flex: 1; }
.escala__topes { display: flex; justify-content: space-between; margin-top: 0.1875rem;
                 font-size: 0.625rem; font-variant-numeric: tabular-nums;
                 color: var(--tinta-suave); }
/* El aviso de rejilla vieja. Solo aparece pasado el umbral, así que cuando se
   ve importa: va con el color de error del sistema, sin caja ni icono. */
.escala__viejo { margin: 0.25rem 0 0; font-size: 0.625rem; line-height: 1.3;
                 color: var(--color-error); }

/* ── El globo del punto ───────────────────────────────────────────────────
   MapLibre trae su propio blanco, su propio radio y su propia sombra, y sobre
   la imagen de satélite se veía como una etiqueta de otro mapa. Toma el mismo
   papel translúcido que la leyenda y el aviso, que son sus vecinos. */
.globo .maplibregl-popup-content { padding: 0.5rem 0.75rem 0.5625rem;
  border-radius: var(--radio-lg); background: var(--crema-90);
  box-shadow: var(--sombra-tarjeta); }
/* La punta se pinta con el borde de un triángulo y el lado que se ve depende de
   por dónde salga el globo, así que hay que decírselo a los cuatro. */
.globo.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.globo.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.globo.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--crema-90); }
.globo.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.globo.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.globo.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--crema-90); }
.globo.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--crema-90); }
.globo.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--crema-90); }
/* ── Pastillas ────────────────────────────────────────────────────────────
   El término y, si lo hay, la marca de lengua nativa. Junto al nombre y no en
   columna propia: dicen qué clase de cosa es ese nombre, así que se leen con
   él. En la tabla van en línea con el texto, de ahí el inline-block. */
.pastilla { display: inline-block; padding: 0.0625rem 0.375rem; border-radius: var(--radio-pastilla);
            background: var(--papel-3); border: 1px solid var(--color-borde);
            font-family: var(--fuente-titular); font-size: 0.625rem; font-weight: var(--peso-medio);
            line-height: 1.5; color: var(--tinta-suave); white-space: nowrap;
            vertical-align: 0.0625rem; }
/* La de lengua nativa sí se señala: es lo excepcional —213 registros de
   836.316, contados— y es de lo que más dice de un topónimo. */
.pastilla--nativa { background: transparent; border-color: var(--color-cobalto);
                    color: var(--color-cobalto); }

.globo__pastillas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.globo__dato { display: block; margin-top: 0.25rem; font-size: 0.6875rem;
               line-height: 1.35; color: var(--tinta); }
/* El nombre en su lengua es el dato por el que existe este apartado: se lee
   como un nombre propio, no como un campo más. */
.globo__nativa { font-family: var(--fuente-titular); font-size: 0.8125rem;
                 color: var(--color-cobalto); }
.globo__nativa em { font-style: normal; font-size: 0.6875rem; color: var(--tinta-suave); }
/* La motivación es prosa y puede ser larga: se acota a cuatro renglones para que
   el globo no se coma el mapa. */
.globo__motivo { color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 4;
                 -webkit-box-orient: vertical; overflow: hidden; }
.globo__nombre { display: block; font-family: var(--fuente-titular);
                 font-size: 0.8125rem; line-height: 1.25; color: var(--tinta);
                 text-wrap: pretty; }
.globo__donde { display: block; margin-top: 0.125rem;
                font-size: 0.6875rem; color: var(--tinta-suave); }
.globo .maplibregl-popup-close-button { padding: 0 0.3125rem; color: var(--tinta-suave);
                                        font-size: 1rem; line-height: 1.2; }

/* Qué enseña el mapa, bajo la cifra de la consulta. Estaba en una tarjeta
   flotando sobre el mapa: tapaba justo la esquina por donde entra la mirada, y
   el dato tiene más sentido aquí, al lado del total con el que se compara. */
.panel__mapa { position: relative; margin: 0.1875rem 0 0; padding-right: 0.875rem;
               font-size: 0.6875rem; line-height: 1.35; color: var(--tinta-suave); }
.panel__mapa b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Mientras se pregunta al servicio. Un punto que late, no una cortina sobre el
   mapa: lo que hay dibujado sigue siendo verdad hasta que llegue lo nuevo, y
   taparlo sería quitar información para no dar ninguna. */
.alcance--cargando::after { content: ""; position: absolute; right: 0; top: 0.3125rem;
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--color-cobalto); animation: alcance-late 1s ease-in-out infinite; }
@keyframes alcance-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .alcance--cargando::after { animation: none; opacity: 0.7; }
}