/* ═══════════════════════════════════════════════════════════════════════════
   LA CASA · el orden común de los 59 mapas.

   Nació de medir lo que había: 55 mapas con el botón de datos colocado de SIETE
   maneras distintas, 19 que abrían el panel tapando el mapa nada más entrar, la
   leyenda con tres selectores diferentes y hasta cuatro cosas flotando a la vez
   sobre el mapa. Cada mapa se había resuelto por su cuenta y ninguno estaba mal
   del todo; juntos no eran un sitio, eran cincuenta y nueve sitios.

   El reparto, igual en todos:

     arriba izquierda   la marca, ◎ y el buscador
     abajo derecha      DATOS — el botón siempre en el mismo sitio
     abajo izquierda    la leyenda, plegada a una píldora hasta que la tocas
     dentro del panel   capas, filtros y fuentes; ya no flotan

   Se carga la ÚLTIMA, para ganar a lo que cada mapa trajera de casa. De ahí
   los !important: no son pereza, son el precio de unificar sin reescribir 59
   ficheros a mano.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --casa-borde:#dfe7ee;
  --casa-tinta:#182430;
  --casa-sub:#5d6d7c;
  --casa-vidrio:rgba(255,255,255,.92);
  --casa-sombra:0 6px 22px rgba(24,36,48,.16);
  --casa-abajo:calc(14px + env(safe-area-inset-bottom,0px));
  /* LAS CUATRO REFERENCIAS DE LA CASA. Todo mando se cuelga de una de ellas,
     nunca de un número suelto. Vienen de un fallo real: los mapas escribían
     `top:62px` —la barra a 12 más 40 de alto más 10 de aire— y en el iPhone la
     barra baja con el hueco del reloj (env) y el panel del mapa no, así que la
     barra aterrizaba encima. Un número a mano es una copia de una medida ajena
     que nadie actualiza. --casa-techo la mide casa.js y la corrige si la barra
     crece (la pastilla cambia de ancho con el número de mapas). */
  --casa-arriba:calc(12px + env(safe-area-inset-top,0px));
  --casa-techo:calc(var(--casa-arriba) + 50px);   /* primera línea libre BAJO la barra */
  --casa-suelo:calc(var(--casa-abajo) + 54px);    /* primera línea libre SOBRE la píldora */
  --casa-izq:calc(12px + env(safe-area-inset-left,0px));
  --casa-der:calc(12px + env(safe-area-inset-right,0px));
}

/* ── DATOS · abajo a la derecha, en todos ──────────────────────────────────
   Antes vivía arriba, pegado al borde del panel, y como cada mapa tenía un
   panel de ancho distinto acababa en siete sitios distintos. Y arriba chocaba
   con el buscador. Abajo a la derecha no choca con nada y es donde llega el
   pulgar. */
body #pliega{
  position:fixed !important;
  top:auto !important; left:auto !important;
  right:var(--casa-der) !important;
  bottom:var(--casa-abajo) !important;
  z-index:1200 !important;
  display:inline-flex !important; align-items:center; gap:7px;
  height:44px !important; padding:0 18px !important;
  border:1px solid var(--casa-borde) !important;
  border-radius:999px !important;
  background:var(--casa-tinta) !important; color:#fff !important;
  font:700 11.5px/1 'Sora',system-ui,sans-serif !important;
  letter-spacing:.08em !important; text-transform:uppercase;
  box-shadow:var(--casa-sombra) !important;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, background .14s ease;
}
body #pliega:active{transform:scale(.96)}
/* (La regla que había aquí para el panel abierto se retiró: ponía el botón en
   vidrio con `backdrop-filter`, y eso le descuadraba la posición fija — se iba
   70 px por debajo del borde de la pantalla y con el panel abierto no había
   forma visible de cerrarlo. El estado abierto se define más abajo, macizo.) */

/* ── el panel ─────────────────────────────────────────────────────────────
   Cerrado al entrar, siempre: lo primero que tiene que verse de un mapa es el
   mapa. En móvil sube desde abajo y ocupa lo que necesita, no media pantalla
   fija; en escritorio sigue siendo la columna de la derecha de toda la vida. */
body aside{transition:transform .24s cubic-bezier(.4,0,.2,1) !important}

@media (max-width:760px){
  body aside{
    /* La casa impone width:100%, y 17 mapas tienen el panel en `content-box`: el
       ancho acababa siendo 375 + 32 de relleno = 407 px en un móvil de 375, con
       barra horizontal y el texto cortado por la derecha. Medido, no supuesto. */
    box-sizing:border-box !important;
    top:auto !important; right:0 !important; left:0 !important;
    bottom:0 !important; width:100% !important;
    max-height:78vh !important;
    border-left:0 !important;
    border-top:1px solid var(--casa-borde) !important;
    border-radius:18px 18px 0 0 !important;
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -8px 30px rgba(24,36,48,.18) !important;
  }
  body.plegado aside{transform:translateY(100%) !important}
  body:not(.plegado) aside{transform:none !important}
  /* el mapa no se encoge: el panel se le pone encima */
  body #mapa{right:0 !important; bottom:0 !important}
  /* asidero, para que se entienda que eso se arrastra hacia abajo */
  body aside::before{
    content:''; position:sticky; top:0; display:block;
    width:38px; height:4px; margin:-6px auto 10px;
    border-radius:99px; background:#cfd9e2;
  }
}

/* ── la leyenda · abajo a la izquierda, plegada ────────────────────────────
   Era un muro de letra de nueve puntos encima del mapa. Ahora es una píldora
   con el nombre de lo que se está mirando, y se abre si la tocas. */
body .leymapa, body #leyenda{
  position:fixed !important;
  left:var(--casa-izq) !important; right:auto !important;
  bottom:var(--casa-abajo) !important; top:auto !important;
  z-index:1150 !important;
  max-width:min(60vw,320px) !important;
  background:var(--casa-vidrio) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--casa-borde) !important;
  border-radius:14px !important;
  box-shadow:var(--casa-sombra) !important;
  transform:none !important; opacity:1 !important; pointer-events:auto !important;
  transition:max-height .2s ease !important;
}
body .leymapa.casa-plegada, body #leyenda.casa-plegada{
  max-height:40px !important; overflow:hidden !important;
  padding:0 !important; border-radius:999px !important;
  max-width:min(58vw,300px) !important;
}
/* la píldora: el nombre de la capa y una flecha */
.casa-tirador{
  display:none; align-items:center; gap:8px;
  height:40px; padding:0 15px;
  font:700 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--casa-tinta);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  -webkit-tap-highlight-color:transparent;
}
body .leymapa .casa-tirador, body #leyenda .casa-tirador{display:flex}
body .leymapa.casa-plegada > :not(.casa-tirador),
body #leyenda.casa-plegada > :not(.casa-tirador){display:none !important}
/* ── abierta: la cabecera es una barra de título, no una etiqueta suelta ──
   Tres cosas que no funcionaban y se ven en cuanto se abre:

    · Decía «GASOLINA» dos veces: en la cabecera y en el filtro marcado justo
      debajo. La línea más valiosa del panel, gastada en repetir.
    · No había separación entre título y contenido: la cabecera no se leía como
      cabecera, sino como una línea más.
    · El bloque medía 240 px y el texto salía en jirones («…con la media
      provincial / del 13/09/2026 como / referencia»).

   Se ensancha, se le pone un filo bajo el título, y la cabecera queda PEGADA
   arriba: si el contenido es largo y se desplaza, la equis sigue a mano. */
body .leymapa:not(.casa-plegada), body #leyenda:not(.casa-plegada){
  /* El suelo generoso no es capricho: el bloque llega hasta donde está DATOS, y
     sin él las últimas líneas quedaban leyéndose por debajo del botón. */
  padding:12px 16px 68px !important;
  /* ANCHO, no solo máximo: al ir en posición fija sin ancho, el bloque se
     encogía a lo que midiera su contenido —200 px— y el texto salía en jirones
     aunque el máximo fuera 322. */
  width:min(78vw,320px) !important;
  max-width:min(78vw,320px) !important;
  max-height:56vh !important; overflow:auto !important;
}
body .leymapa:not(.casa-plegada) .casa-tirador,
body #leyenda:not(.casa-plegada) .casa-tirador{
  position:sticky; top:-12px; z-index:3;
  /* márgenes negativos para que el filo llegue de borde a borde del bloque */
  margin:-12px -16px 12px; padding:0 12px 0 16px;
  height:48px;
  background:var(--mando-vidrio);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(24,36,48,.11);
  border-radius:14px 14px 0 0;
}
/* Y el contenido ocupa el ancho del bloque. Los mapas traen anchos clavados
   dentro —en gasolineras, 140 px, unos veinte caracteres por línea—, pensados
   para cuando la leyenda era una pastilla pequeña sobre el mapa. Ensanchar el
   bloque sin soltar esto solo añadía hueco a la derecha. */
body .leymapa:not(.casa-plegada) > *:not(.casa-tirador),
body #leyenda:not(.casa-plegada) > *:not(.casa-tirador){
  max-width:none !important;
  width:auto !important;
}

/* el valor no se repite: lo dice el filtro que está marcado. Solo se calla si
   hay etiqueta que lo sustituya — en las leyendas puras el valor ES el título. */
body .leymapa:not(.casa-plegada) .casa-tirador .casa-et:not([hidden]) ~ b,
body #leyenda:not(.casa-plegada) .casa-tirador .casa-et:not([hidden]) ~ b{display:none}
body .leymapa:not(.casa-plegada) .casa-tirador .casa-et,
body #leyenda:not(.casa-plegada) .casa-tirador .casa-et{color:var(--mando-tinta)}


/* ── el hueco de aviso · uno solo, debajo de la barra ──────────────────────
   Quedaban dos cosas flotando por su cuenta y las dos hacen falta:

     · el distintivo de antigüedad («DATO DE 2023 · no es «ahora»», «EJERCICIO
       2025 · cerrado»), que es de honestidad y no puede esconderse en un panel
       cerrado: si el dato no es de ahora, hay que verlo sin abrir nada;
     · la pista de toque («Toca un barrio para ver su ficha»), que es lo único
       que le dice a alguien que el mapa se puede pulsar.

   Así que no se quitan: se les da UN hueco, el mismo en los 59, centrado justo
   debajo de la barra. Antes el distintivo se colocaba con cinco reglas distintas
   y la pista aparecía en mitad del mapa, encima de los datos.

   El !important es imprescindible en la pista: bm.js le escribe `top` y `left`
   en línea para clavarla junto a lo que señala, y solo !important gana a un
   estilo en línea. */
#anio,
#bm-toca-txt{
  position:fixed !important;
  /* Colgado de la referencia, no de un 64 copiado: --casa-techo la MIDE casa.js
     desde donde acaba la barra de verdad, así que sigue al hueco del reloj del
     iPhone y también a la barra si algún día cambia de alto. */
  top:var(--casa-techo) !important;
  left:50% !important; right:auto !important; bottom:auto !important;
  transform:translateX(-50%) !important;
  z-index:1180 !important;
  max-width:calc(100vw - 28px) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#anio{
  padding:6px 13px !important;
  border-radius:999px !important;
  background:var(--casa-vidrio) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--casa-borde) !important;
  color:var(--casa-sub) !important;
  font:700 10px/1.35 'Sora',system-ui,sans-serif !important;
  letter-spacing:.07em !important; text-transform:uppercase;
  box-shadow:0 3px 12px rgba(24,36,48,.10) !important;
}
/* Mientras se enseña la pista, el distintivo se aparta: el hueco es uno.
   Con :has() y no con un vigilante en JavaScript — esto lo resuelve el navegador
   solo, sin observadores ni temporizadores dando vueltas para siempre. Donde no
   haya :has() no pasa nada grave: se ven los dos, que es como estaba antes. */
body:has(#bm-toca-txt.on) #anio{opacity:0 !important; pointer-events:none !important}

/* La capital que el mapa base ya ha escrito no se escribe dos veces. Lo decide
   casa.js preguntándole al mapa vectorial, no una lista fija: lo que dibuja
   depende del zoom, del encuadre y de si caben. */
/* (retirada: ahora cede el rótulo del mapa base, no el nombre del dato) */
/* Y lo mismo dentro de una pastilla de dato: se va el nombre, se queda el
   dato. En el mapa del tiempo, «26° Madrid» sobre un mapa que ya pone Madrid
   pasa a «26°»; donde el base no rotula, la pastilla sigue diciendo el nombre. */
/* (retirada: ahora cede el rótulo del mapa base, no el nombre del dato) */

/* ── lo que deja de flotar ─────────────────────────────────────────────────
   «ver fuentes» y el sello son material de consulta, no mandos del mapa: su
   sitio es el panel. Dejarlos sueltos era la cuarta cosa encima del mapa. */
body .btn-fuentes{display:none !important}
body .sello{
  position:static !important; display:block !important;
  max-width:none !important; bottom:auto !important; right:auto !important;
  text-align:left !important; margin-top:14px !important;
}

/* ── la barra de arriba ───────────────────────────────────────────────────
   Las cuentas: marca 112 px + ◎ 38 + compartir 38 + huecos 24 = 212, y el
   buscador pide otros 212. Hacen 424 en una pantalla de 375. Por eso el campo
   salía cortado («busca un luga…») y los mandos se apretaban unos contra otros.

   El buscador se encoge a su lupa y solo se abre cuando lo tocas. Y se abre
   HACIA LA IZQUIERDA, por encima de los otros mandos, en vez de ensanchar la
   barra: así nada se mueve de sitio al escribir.

   Sin JavaScript: el botón de la lupa ya enfocaba el campo, y `:focus-within`
   se entera de eso solo. Se cierra igual de solo al salir del campo.

   El corte está en 520 px y no en los 760 de la casa: en una tableta sí caben
   los cinco mandos y encoger el buscador allí sería empeorarlo por simetría. */
@media (max-width:760px){
  body #cambia{max-width:calc(100vw - 24px) !important; flex-wrap:nowrap !important}
}

@media (max-width:520px){
  body #busca-caja{
    position:relative !important;
    flex:none !important;
    width:var(--mando-alto) !important;
    transition:width .2s ease, margin-left .2s ease;
  }
  body #busca-in{
    width:100% !important; min-width:0 !important;
    text-overflow:ellipsis;
  }
  /* Cerrado no lleva relleno: con border-box, 40 de hueco para la lupa más 14
     por la derecha no caben en un círculo de 40 y el campo lo empujaba hasta
     56, así que el buscador salía como una pastilla y los otros tres redondos. */
  body #busca-caja:not(:focus-within) #busca-in{
    padding:0 !important;
    /* y sin texto: al quitarle el relleno, el «busca un lugar…» asomaba por
       detrás de la lupa y se leía un «b.» suelto dentro del círculo */
    color:transparent !important;
  }
  body #busca-caja:not(:focus-within) #busca-in::placeholder{color:transparent !important}
  body #cambia.casa-buscando #busca-in{
    padding-left:var(--mando-alto) !important;
    padding-right:16px !important;
  }
  /* Abierto: la barra ENTERA se convierte en el buscador. Los otros tres
     mandos se apartan mientras escribes y vuelven al salir.

     Se probó antes a estirar el campo hacia la izquierda con un margen
     negativo, y se salía 22 px de la pantalla: la lupa quedaba cortada contra
     el borde. Calcular el margen exacto era posible pero frágil —depende del
     ancho de la marca, que cambia con el número de mapas—. Esto no depende de
     ninguna medida: mientras buscas solo hay una cosa, y es el buscador. */
  /* OJO con volver a :focus-within aquí: casa con CUALQUIER hijo enfocado, y
     al apretar «59 MAPAS», situarse o compartir, esta misma regla escondía EL
     BOTÓN QUE ESTABAS PULSANDO. El buscador se metía debajo del dedo entre la
     pulsación y la soltada, el clic acababa en #cambia y el menú no abría nunca:
     los 59 mapas se quedaron sin navegación en pantallas estrechas. La clase la
     pone casa.js SOLO cuando el foco está dentro del buscador. */
  body #cambia.casa-buscando > :not(#busca-caja){display:none !important}
  body #cambia.casa-buscando{width:calc(100vw - 24px) !important}
  body #cambia.casa-buscando #busca-caja{
    width:100% !important; margin-left:0 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body #busca-caja{transition:none !important}
}

/* ── el zoom, fuera del paso del pulgar ───────────────────────────────────
   Los mandos de Leaflet caían justo donde ahora está DATOS. */
body .leaflet-bottom.leaflet-right{
  bottom:calc(var(--casa-abajo) + 52px) !important;
  right:calc(var(--casa-der) - 2px) !important;
}
body .leaflet-control-attribution{
  font-size:9px !important; background:rgba(255,255,255,.66) !important;
  padding:1px 5px !important;
}

@media (prefers-reduced-motion:reduce){
  body #pliega, body aside, body .leymapa, body #leyenda, .casa-tirador i{transition:none !important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOS MANDOS · una sola familia, arriba y abajo

   Lo que había eran dos familias: arriba tres círculos con iconos azules
   macizos, abajo dos píldoras de pesos distintos. Y en un mapa como el de
   gasolineras los iconos azules compiten con los datos, que también son azules:
   el ojo no sabe qué es mando y qué es dato.

   La regla: EL MAPA PONE EL COLOR, LOS MANDOS PONEN LA TINTA. Todos los mandos
   son la misma superficie —vidrio blanco, filo de un píxel, misma sombra, misma
   altura— con el icono en tinta. El acento azul se gasta UNA vez, en el ◎, que
   es la única acción que cambia al instante lo que estás viendo.

   Y una sola excepción maciza: DATOS. Si todo pesa igual, nada manda.

   Los iconos se redibujan aquí, con máscara CSS, en vez de tocar los 59 mapas:
   así el color lo decide la hoja y puede cambiar con el estado. Trazo único de
   1,7 px, los tres con la misma caja de 24 y el mismo grosor — antes cada uno
   estaba dibujado a su manera (discos concéntricos, nodos, una lupa con mango).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --mando-alto:40px;
  --mando-vidrio:rgba(255,255,255,.93);
  --mando-filo:rgba(24,36,48,.10);
  --mando-sombra:0 1px 2px rgba(24,36,48,.06), 0 8px 22px rgba(24,36,48,.11);
  --mando-tinta:#22313f;
  --mando-acento:#1f7ab2;
}

/* ── la superficie común ───────────────────────────────────────────────── */
body #cambia{
  gap:8px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important;
}
body #cambia-btn,
body #situa,
body #comparte,
body #busca-caja,
body #busca-in{
  /* border-box en todos: sin esto el filo de un píxel hacía que la caja del
     buscador midiera 42 de alto y los círculos 40, y la fila salía descuadrada */
  box-sizing:border-box !important;
  height:var(--mando-alto) !important;
  border-radius:999px !important;
  background:var(--mando-vidrio) !important;
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border:1px solid var(--mando-filo) !important;
  box-shadow:var(--mando-sombra) !important;
  color:var(--mando-tinta) !important;
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
body #situa, body #comparte{
  width:var(--mando-alto) !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:0 !important;
}
body #cambia-btn:active, body #situa:active, body #comparte:active, body #busca-btn:active{
  transform:scale(.94);
  box-shadow:0 1px 2px rgba(24,36,48,.10) !important;
}

/* ── los iconos, redibujados a trazo único ─────────────────────────────── */
body #situa > svg, body #comparte > svg, body #busca-btn > svg{display:none !important}

body #situa::before,
body #comparte::before,
body #busca-btn::before{
  content:''; display:block;
  width:19px; height:19px;
  background-color:var(--mando-tinta);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  transition:background-color .14s ease;
}

/* ◎ dónde estoy · la retícula. Es el único mando con acento: es la acción
   que cambia al instante lo que ves. */
body #situa::before{
  background-color:var(--mando-acento);
  -webkit-mask-image:var(--ico-situa); mask-image:var(--ico-situa);
}
body #comparte::before{ -webkit-mask-image:var(--ico-comparte); mask-image:var(--ico-comparte); }
body #busca-btn::before{ -webkit-mask-image:var(--ico-busca); mask-image:var(--ico-busca); }

:root{
  --ico-situa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3Cpath d='M12 1.8v2.6M12 19.6v2.6M1.8 12h2.6M19.6 12h2.6'/%3E%3C/svg%3E");
  --ico-comparte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.8' cy='5.6' r='2.7'/%3E%3Ccircle cx='6.2' cy='12' r='2.7'/%3E%3Ccircle cx='17.8' cy='18.4' r='2.7'/%3E%3Cpath d='M8.6 10.7l6.9-3.8M8.6 13.3l6.9 3.8'/%3E%3C/svg%3E");
  --ico-arriba:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E");
  --ico-izquierda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --ico-cerrar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-busca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='M15.3 15.3L21 21'/%3E%3C/svg%3E");
}

/* el ◎ mientras busca la posición: el acento late en vez de dar un salto */
body #situa.buscando::before{animation:mando-late 1.15s ease-in-out infinite}
body #situa.fallo::before{background-color:#b4462f}
@keyframes mando-late{0%,100%{opacity:1}50%{opacity:.35}}

/* ── el buscador, de la misma familia ──────────────────────────────────── */
body #busca-btn{
  width:var(--mando-alto) !important; height:var(--mando-alto) !important;
  left:0 !important; top:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  background:none !important; border:0 !important; box-shadow:none !important;
}
body #busca-in{
  width:100% !important;
  padding-left:var(--mando-alto) !important;
  padding-right:14px !important;
  font:600 14px/1 'IBM Plex Sans',system-ui,sans-serif !important;
  color:var(--mando-tinta) !important;
}
body #busca-in::placeholder{color:#8fa1b0 !important; font-weight:400}
body #busca-caja:focus-within #busca-in{
  border-color:rgba(31,122,178,.55) !important;
  box-shadow:0 1px 2px rgba(24,36,48,.06), 0 8px 22px rgba(31,122,178,.20) !important;
}

/* ── DATOS · el único macizo ───────────────────────────────────────────── */
body #pliega{
  height:46px !important;
  padding:0 20px !important;
  gap:9px !important;
  background:var(--mando-tinta) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  font:800 11px/1 'Sora',system-ui,sans-serif !important;
  letter-spacing:.1em !important;
  box-shadow:0 2px 6px rgba(24,36,48,.16), 0 12px 28px rgba(24,36,48,.22) !important;
}
body #pliega #pliega-n{
  font:700 11px/1 'IBM Plex Sans',system-ui,sans-serif;
  background:rgba(255,255,255,.16);
  border-radius:999px; padding:4px 8px 3px;
  letter-spacing:.02em;
}
/* Abierto sigue siendo tinta maciza, y esto es una corrección: lo había puesto
   en vidrio razonando que ya no era una llamada sino una salida. Pero el panel
   abierto es blanco, así que quedaba blanco sobre blanco y con el panel abierto
   NO HABÍA FORMA VISIBLE DE CERRARLO. Una salida puede ser secundaria; lo que no
   puede es esconderse. Se queda maciza y se le añade una equis. */
body:not(.plegado) #pliega{
  background:var(--mando-tinta) !important;
  color:#fff !important;
}
/* DATOS también dice hacia dónde se abre, igual que la píldora de filtros. Y
   dice cosas distintas según la pantalla, porque el panel NO entra por el mismo
   sitio: en móvil sube desde abajo (flecha arriba) y en escritorio entra por la
   derecha (flecha a la izquierda). Medido, no supuesto. */
body #pliega::before{
  content:''; width:15px; height:15px; flex:none;
  background-color:#fff;
  -webkit-mask:var(--ico-izquierda) center/contain no-repeat;
          mask:var(--ico-izquierda) center/contain no-repeat;
}
@media (max-width:760px){
  body #pliega::before{
    -webkit-mask-image:var(--ico-arriba); mask-image:var(--ico-arriba);
  }
}
/* abierto, en las dos: la equis */
body:not(.plegado) #pliega::before{
  -webkit-mask-image:var(--ico-cerrar) !important;
          mask-image:var(--ico-cerrar) !important;
}
body:not(.plegado) #pliega #pliega-n{display:none}   /* al cerrar no hace falta el contador */

/* ── FILTROS · vidrio, como los de arriba ──────────────────────────────── */
body .leymapa, body #leyenda{
  background:var(--mando-vidrio) !important;
  border:1px solid var(--mando-filo) !important;
  box-shadow:var(--mando-sombra) !important;
}
.casa-tirador{
  height:46px; padding:0 17px; gap:10px;
  font:800 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.1em;
  color:var(--mando-tinta);
}
body .leymapa.casa-plegada, body #leyenda.casa-plegada{max-height:46px !important}
/* el valor elegido, en tinta viva sobre la etiqueta, que es secundaria */
.casa-tirador b{font-weight:800; color:var(--mando-tinta)}
.casa-tirador .casa-et{color:#6b7c8b; font-weight:700}
/* El mando de abrir y cerrar.

   La flecha apunta ARRIBA porque el panel crece hacia arriba: medido, de 750 a
   529 con el borde de abajo clavado. Una flecha hacia abajo prometía lo
   contrario de lo que pasa, que es peor que no poner flecha.

   Y va en tinta maciza, no en una chapa clarita: en esta familia lo macizo es
   lo que se pulsa —lo mismo que DATOS—, así que un botón de vidrio con una
   marquita dentro no se leía como un mando. Abierto cambia el glifo a una equis
   y se queda en el mismo sitio: cerrar se busca donde ya está la mano. */
.casa-tirador i{
  margin-left:auto; flex:none;
  width:28px; height:28px; border-radius:999px;
  background:var(--mando-tinta);
  display:flex; align-items:center; justify-content:center;
  font-size:0;                       /* el glifo lo pone ::before */
  box-shadow:0 1px 3px rgba(24,36,48,.22);
  transition:background .15s ease, transform .15s ease;
}
.casa-tirador i::before{
  content:''; width:15px; height:15px;
  background-color:#fff;
  -webkit-mask:var(--ico-arriba) center/contain no-repeat;
          mask:var(--ico-arriba) center/contain no-repeat;
}
.casa-tirador:hover i{transform:translateY(-1px)}
.casa-tirador:active i{transform:scale(.92)}

/* abierto: el mismo botón, con una equis */
body .leymapa:not(.casa-plegada) .casa-tirador i::before,
body #leyenda:not(.casa-plegada) .casa-tirador i::before{
  -webkit-mask-image:var(--ico-cerrar); mask-image:var(--ico-cerrar);
}

@media (prefers-reduced-motion:reduce){
  body #cambia-btn, body #situa, body #comparte, body #busca-caja, body #pliega{transition:none !important}
  body #situa.buscando::before{animation:none}
}

/* ── la barra de deslizamiento, por encima de la píldora de LEYENDA ────────
   Cuatro mapas traen su propia barra abajo (#tiempo): el tiempo por horas, el
   polen, la calidad del aire y los estrechos. En móvil caía JUSTO donde la casa
   pone la píldora de LEYENDA, y la píldora (z 1150) tapaba el «AHORA» y el play
   de la barra (z 1000): no se veía ni desde dónde corre el tiempo.

   La barra sube por encima de la píldora. La altura de la píldora es fija (46 px
   con su sombra), la de la barra NO —61 px en el tiempo, 92 en el polen—, así
   que casa.js la mide y la publica en --casa-barra para que la atribución de
   Leaflet se aparte también, en vez de quedarse cruzada por dentro. */
@media (max-width:760px){
  body.casa-barra #tiempo{
    bottom:calc(var(--casa-abajo) + 54px) !important;   /* 46 de píldora + 8 de aire */
  }
  /* solo donde hay barra: los otros 55 mapas siguen con la atribución de siempre */
  body.casa-barra .leaflet-bottom.leaflet-right{
    bottom:calc(var(--casa-abajo) + 60px + var(--casa-barra,64px)) !important;
  }
}

/* ── el zoom y la atribución, por encima de la hoja de datos ───────────────
   Con la hoja abierta en móvil los mandos de Leaflet quedaban DEBAJO de ella,
   cruzando el texto del panel: un «+», un «−» y el crédito de OpenStreetMap
   flotando sobre los párrafos. Suben al borde de la hoja mientras está abierta.
   La clase y la medida las pone casa.js, y solo donde el panel flota de verdad. */
@media (max-width:760px){
  body.casa-hoja .leaflet-bottom.leaflet-right{
    bottom:calc(var(--casa-hoja,50vh) + 10px) !important;
  }
}

/* ── que se vea que el menú se despliega ──────────────────────────────────
   El galón existía en escritorio —8 px, gris claro— y en móvil estaba
   `display:none` para ganar sitio: por debajo de 430 px no había NINGUNA señal
   de que la pastilla abriera nada. Y llevaba `transform:none !important`, así
   que tampoco giraba al abrirse, que es el gesto que de verdad enseña que algo
   se despliega.

   Mismo idioma que DATOS y FILTROS: la flecha apunta a donde se abre y gira
   cuando está abierto. Cuesta 10 px en la pastilla estrecha y los vale. */
/* Estaba a 11 px, trazo de 1,6 y opacidad .62: en el navegador se veía, en un
   móvil de verdad no. Son 1,8 px de línea gris clara sobre blanco. Ahora 13 px,
   trazo 2 y opacidad .85, y en pantalla estrecha un punto más: ahí es donde hay
   que pulsarla y donde menos se veía. `stroke-width` va por CSS porque es
   atributo de presentación y el CSS le gana al que trae el SVG. */
body #cambia-btn .marca-chev{
  display:block !important;
  width:13px !important; height:13px !important;
  color:var(--mando-tinta) !important; opacity:.85;
  flex:none !important;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), opacity .18s;
}
body #cambia-btn .marca-chev path{stroke-width:2 !important}
@media (max-width:760px){
  body #cambia-btn .marca-chev{width:14px !important; height:14px !important; opacity:.9}
  body #cambia-btn .marca-chev path{stroke-width:2.1 !important}
}
body #cambia-btn:hover .marca-chev{opacity:1}
/* abierto: el galón mira hacia arriba, al botón del que ha salido el menú */
body #cambia-btn[aria-expanded="true"] .marca-chev{
  transform:rotate(180deg) !important; opacity:1;
}
@media (prefers-reduced-motion:reduce){
  body #cambia-btn .marca-chev{transition:none}
}

/* El menú ya no lleva las descripciones en el HTML (las pinta bm.js desde menu_desc.json,
   17-10-2026): el span vacío conserva su alto —12,5 px medidos en producción— para que la
   lista no dé un salto cuando lleguen. */
.cm-it>span>span{display:block;min-height:12.5px}
/* «Sigue por aquí», al final de «Sobre este mapa» (_barre_sigue.py) */
.sm-sigue{margin:14px 0 2px;padding-top:10px;border-top:1px solid #e0e9f0;font-size:12.5px;line-height:1.5}
.sm-sigue b{font-weight:700;color:#0e1218}
.sm-sigue a{color:#1f7ab2;text-decoration:none;border-bottom:1px solid #bcd6e8}
.sm-sigue a:hover{color:#0e1218;border-bottom-color:#0e1218}
.sm-serie{font-size:11.5px;color:#5d6d7c}
.sm-serie a{color:#1f7ab2}