/* ==========================================================================
   IRON ROUTE — el selector de capas del mapa.

   Diseñado para la cabina, no para una oficina:
     · Objetivo de toque 48px (con guantes, 44 no alcanza).
     · Se apoya arriba a la derecha, DEBAJO del área segura del notch, y por
       encima del mapa pero por debajo de los paneles (z-index 800).
     · En teléfono la lista se despliega hacia abajo; en pantallas anchas se
       queda abierta como fila, porque el dispatcher tiene sitio y un clic
       menos es un clic menos.
   ========================================================================== */

.irc-capas {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.irc-toggle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 20, 40, .88);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent;
}
.irc-toggle:active { transform: scale(.96); }
.irc-toggle:focus-visible { outline: 3px solid #D4A84B; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   `hidden` NO FUNCIONABA, Y ESO DEJABA EL DESPLEGABLE ABIERTO PARA SIEMPRE

   `map-layers.js` hace `lista.hidden = true` al construir, y su botón alterna
   esa propiedad. Correcto. Pero el atributo `hidden` se aplica con una regla
   del NAVEGADOR (`[hidden] { display: none }`), y cualquier regla de la hoja
   del sitio le gana — las de autor mandan sobre las del navegador.

   Aquí abajo hay un `display: flex`. Así que `hidden` no escondía nada.

   MEDIDO en un teléfono de 375: el desplegable de capas sale **abierto al
   cargar**, `172×270@191,188`, tapando el mapa y el botón de «Mi ubicación» —
   `elementFromPoint` sobre ese botón devuelve `irc-tx`, o sea un chip de
   capa. Y pulsar el botón de capas no lo cierra: tras el clic la caja mide
   exactamente lo mismo.

   Un menú que nace abierto, tapa un control y no se puede cerrar es de las
   cosas que hacen que alguien piense que la aplicación está rota. Y lo
   estaba: por una línea que no se aplicaba.

   La regla de abajo devuelve a `hidden` su significado. En escritorio hay una
   excepción explícita (la lista vive abierta en fila) y va después, en su
   media query, así que gana ahí y solo ahí.
   ══════════════════════════════════════════════════════════════════════════ */
.irc-lista[hidden] { display: none; }

.irc-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 20, 40, .95);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  min-width: 172px;
}

.irc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  /* Blanco casi puro sobre navy: contraste > 12:1, legible con sol de frente. */
  color: #F5F7FA;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.irc-item:active { background: rgba(255, 255, 255, .10); }
.irc-item:focus-visible { outline: 3px solid #D4A84B; outline-offset: -3px; }

/* La capa activa: oro de marca sobre navy. Se marca con FONDO y con una barra
   lateral, no solo con color de texto — al sol un cambio de tono se pierde. */
.irc-item.irc-on {
  background: rgba(212, 168, 75, .18);
  color: #E8C468;
  box-shadow: inset 3px 0 0 #D4A84B;
}

.irc-ic { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.irc-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Teléfono en horizontal: poca altura, se sube el panel ---------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .irc-capas { top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .irc-item  { min-height: 44px; font-size: 14px; }
}

/* --- Escritorio (dispatcher): la lista vive abierta, en fila -------------- */
@media (min-width: 1024px) {
  .irc-capas { top: calc(env(safe-area-inset-top, 0px) + 16px); flex-direction: row; align-items: flex-start; }
  .irc-toggle { display: none; }
  .irc-lista { flex-direction: row; min-width: 0; }
  .irc-lista[hidden] { display: flex; }   /* en ancho no se oculta nunca */
  .irc-item { width: auto; padding: 0 14px; }
}

/* Menos movimiento para quien lo pidió en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .irc-toggle:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1 · LA CAJA INVISIBLE QUE SE COMÍA LOS TOQUES

   Medido en Android 360×640:  `.irc-capas`  x 12..348  y 132..180.
   336 px de ancho, fondo transparente, `pointer-events: auto`.

   O sea: una banda invisible de 336×48 cruzando el mapa entero, y
   `elementFromPoint` en cualquier punto de esa banda devolvía la caja, no el
   mapa. Arrastrar el mapa desde ahí no funcionaba y no había nada que ver que
   lo explicara — el peor tipo de defecto, el que la persona se acaba echando
   a sí misma.

   La caja solo existe para colocar el botón y la lista. No tiene por qué
   recibir un solo toque: los reciben sus hijos.
   ══════════════════════════════════════════════════════════════════════════ */
.irc-capas {
  left: auto;
  width: max-content;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.irc-capas > * { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   2 · EN TELÉFONO ESTA BARRA YA NO EXISTE

   Chocaba con `.fab-collapse-toggle` (misma columna, 34 px de solape en
   360×640) y el que perdía era este: no se podía pulsar.

   No se mueve, se retira: su contenido —las cinco capas base— ahora vive
   dentro de la hoja «Capas del mapa» que abre `#layersBtn`, junto a las capas
   de datos. Una sola casa, un solo botón, y el rótulo deja de estar duplicado.

   En escritorio se queda: ahí medido no solapa con nada y es un clic menos
   para el dispatcher, que es su razón de ser.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .irc-capas { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · EL MAPA BASE, DENTRO DE LA HOJA DE CAPAS

   PRIMERA VERSIÓN, MÍA, MAL: fijé los colores del tema oscuro a mano
   (`#9FB0C3` de rótulo, `#10294A` de chip). Medido una hora después con el
   barrido de contraste:

       H3.ir-base-tit  «Mapa base»   rgb(159,176,195) sobre rgb(255,255,255)
                                     → 2.22:1, mínimo 4.5

   La hoja usa `background: var(--bg-surface, #fff)`, y en tema claro
   `--bg-surface` es **blanco**. Escribí gris claro sobre blanco.

   El error de forma no es el gris: es **fijar un color a mano en una
   aplicación con dos temas**. Aquí abajo no hay ni un hex de texto: se hereda
   el color del panel, que ya es el correcto en los dos temas, y la jerarquía
   se hace con opacidad y peso — que funcionan igual en claro y en oscuro.
   ══════════════════════════════════════════════════════════════════════════ */
.ir-base-sec { margin: 0 0 4px; color: inherit; }

.ir-base-tit {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
  /* .72 sobre un texto que ya cumple deja ~8:1 en claro y ~9:1 en oscuro.
     Un `--text-muted` habría sido más elegante y menos fiable: ese token es
     distinto en cada tema y en uno de los dos no llega. */
  opacity: .72;
}
.ir-base-tit-2 {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border, rgba(127, 127, 127, .25));
}

.ir-base-pie {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
  color: inherit;
  opacity: .72;
}

.ir-base-rejilla {
  display: grid;
  /* Dos columnas en teléfono, tres cuando cabe. `auto-fit` con un mínimo de
     140 px lo resuelve sin una sola consulta de medios. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.ir-base-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;          /* con guantes, 44 no alcanza */
  padding: 0 12px;
  border: 1px solid var(--glass-border, rgba(127, 127, 127, .3));
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
/* Un velo neutro: aclara sobre oscuro y oscurece sobre claro sin saber en cuál
   está, porque es el MISMO gris con alfa en los dos casos. */
.ir-base-chip:hover  { background: rgba(127, 127, 127, .12); }
.ir-base-chip:active { background: rgba(127, 127, 127, .20); }
.ir-base-chip:focus-visible { outline: 3px solid #D4A84B; outline-offset: 2px; }

/* La elegida: borde grueso, peso, y una marca de verificación **en el color
   del texto**. Nada de oro como texto: `#D4A84B` sobre blanco da 2.1:1 y
   sobre navy 6.9:1 — o sea que en tema claro sería ilegible. El oro se queda
   donde no es texto (el anillo de foco). */
.ir-base-chip.ir-base-on {
  border-width: 2px;
  border-color: currentColor;
  background: rgba(127, 127, 127, .14);
  font-weight: 700;
}
.ir-base-chip.ir-base-on::after {
  content: "\2713";        /* ✓ */
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  color: inherit;
}

.ir-base-ic { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.ir-base-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ir-base-chip { transition: none; }
}