Rutas — arreglo mobile-first

Fecha: 2026-09-19 · Proyecto: ~/nef/estado_turismo Commit: 26c646d · Ramas: trabajo en campana-ruta-maya

Síntoma reportado

“Sophia no lo puede ver en su celular” → en viewport móvil la barra de estaciones (.estaciones-bar) se superponía al places-panel y tapaba el contenido.

Causa

La media query max-width: 860px ya apilaba el layout (mapa 46vh arriba, panel abajo), pero .estaciones-bar seguía con position: absolute, max-width y sin límite de alto ni scroll. Su contenido (selector de ruta

• botones de estación + galería) era más alto que el mapa, se desbordaba y cubría el panel.

Arreglo

En @media (max-width: 860px) (en las 5 rutas):

.demo { grid-template-columns: 1fr; grid-template-rows: 52vh 1fr; }
.map { order: -1; }
places-panel { border-right: 0; min-height: 0; }
.estaciones-bar {
  left: 8px; right: 8px; top: 8px; bottom: 8px;  /* ancla al mapa */
  max-width: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px;
}

• Anclar top+bottom confina la barra al alto del mapa con scroll interno (con max-height: calc(52vh - …) no quedaba contenida por el box-sizing).
• El vuelo de estación usa padding responsivo: padding: { left: window.innerWidth > 860 ? 420 : 0 }.
• Se oculta la atribución de MapLibre en móvil (.maplibregl-ctrl-attrib).

Verificación

Playwright con devices['iPhone 12'] (402×685) en las 5 rutas, local y en vivo: barra contenida (barBottom 337 <= mapBottom 345), panel visible debajo, sin errores de consola.

Colapso de la barra (hecho)

En móvil la barra cubría buena parte del mapa, así que se volvió colapsable y compacta:

• Colapsada = una sola fila: el selector de ruta (ancho completo) + un botón chevron (SVG, sin emojis). Mide 46 px (antes 87 px, ~50% menos).
• Abierta: la lista (.eb-body) se despliega con max-height: 58vh y scroll interno; en Sophia/Maya llega a ~335–441 px.
• Al elegir una estación (o un POI, en Sophia) se colapsa sola.
• Proporción homogénea: selector y botón comparten altura, radio (9 px) y borde; labels de título ocultos en móvil para no duplicar el selector.
• Los controles de zoom se bajan (top: 58px) para no chocar con la barra.
• Desktop sin cambios (lista siempre visible; el toggle es el título, sin chevron).

Verificado con Playwright (iPhone 12) local y en vivo en las 5 rutas: barra 46 px, sin choque con controles, sin errores de consola.

Nota de rama

El trabajo vive en campana-ruta-maya. main está en un commit anterior (da87c72) que no contiene las rutas; si se ve la carpeta vacía, es por estar en main — hacer git checkout campana-ruta-maya.