/* Capa de mapa de SEVB: estilos que no dependen del proveedor (estado de error, tooltips propios, puntos) y reglas del proveedor Google.
   Las reglas de Leaflet siguen en styles.css / home.css. Contrato: docs/MAPA-CAPA.md. */

/* ---- Estado recuperable cuando el mapa no pudo crearse (ver js/mapa/nucleo.js) ---- */
.mapa-con-error { position: relative; }
.mapa-error {
    position: absolute; inset: 0; z-index: 1500; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
    background: rgba(243, 246, 244, .97); color: #1f2d27; font: 15px/1.45 system-ui, sans-serif;
}
.mapa-error strong { font-size: 17px; }
.mapa-error p { margin: 0; max-width: 34ch; }
.mapa-error button { min-height: 44px; padding: 0 22px; }
.mapa-error-detalle { max-width: 90%; margin: 6px 0 0; padding: 8px; overflow: auto; text-align: left; font: 11px/1.4 ui-monospace, monospace; background: #fff; border: 1px solid #cdd6d1; border-radius: 6px; white-space: pre-wrap; }

/* ---- Tooltip propio (Google no los trae para marcadores ni líneas; el estilo imita al de Leaflet) ---- */
.mapa-tooltip {
    position: absolute; z-index: 1200; transform: translate(-50%, -100%); pointer-events: none;
    padding: 3px 8px; border-radius: 6px; background: #fff; color: #243029; font: 11px/1.3 system-ui, sans-serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.mapa-tooltip[hidden] { display: none; }

/* ---- Elementos propios ---- */
.sevb-punto { cursor: pointer; box-sizing: border-box; }
.picking-location .sevb-marcador { pointer-events: none !important; }
.mapa-control { pointer-events: auto; }

/* ---- Proveedor Google ---- */
/* El mapa termina justo encima del panel inferior del celular: así el logotipo y los créditos de Google (que van abajo) nunca quedan
   tapados. En escritorio el panel es una tarjeta flotante a la izquierda y los créditos quedan abajo, visibles. */
@media (max-width: 559px), (max-width: 860px) and (min-height: 481px) {
    html[data-mapa="google"] body.home-sevb #map { inset: 0 0 var(--sheet-real, var(--sheet-visible, 0px)) 0; height: auto; }
}
html[data-mapa="google"] body.home-sevb #map { background: #dfe5e0; }
/* Con Google no hay selector de capas ni mapa guardado: se explica en el menú «Uso sin conexión» (js/offline.js). */
.offline-google-nota { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; }

/* Google monta los controles propios dentro del mapa y les escribe en línea `position:absolute; right:0; top:0`. El panel del bus se coloca con
   `bottom` (home.css): sin esto el `top:0` de Google lo ESTIRABA (282 px de alto con el panel visible, 768 px con el panel oculto) y esa caja
   transparente, con z-index 900, se quedaba el arrastre y el zoom de todo el mapa. Debe medir solo su contenido y seguir fija en pantalla. */
html[data-mapa="google"] body.home-sevb .bus-panel.mapa-control { position: fixed !important; top: auto !important; right: auto !important; height: auto; }

/* El contenedor del mapa de Google ocupa su caja (equivale a .leaflet-container { width/height: 100% } de styles.css). */
.mapa-google { width: 100%; height: 100%; font-family: inherit; }

/* Con Google, los botones flotantes no tapan el logotipo ni los créditos (abajo a la izquierda y a la derecha del mapa):
   quedan por encima de ellos, tanto con el panel visible como con el panel oculto. */
html[data-mapa="google"] { --reserva-boton-panel: 104px; }      /* espacio que ocupa el botón «Buscar ruta» con el panel oculto */
html[data-mapa="google"] body.home-sevb .map-fabs { margin-bottom: 30px; }
@media (max-width: 559px), (max-width: 860px) and (min-height: 481px) {
    html[data-mapa="google"] body.home-sevb .panel-show { margin-bottom: 30px; }
}

/* El pellizco sobre el mapa lo maneja el mapa (Leaflet / Google), no el navegador: sin esto, un pellizco que empieza sobre un marcador o un rótulo HTML
   hace zoom de PÁGINA (se agranda toda la interfaz). Solo afecta al área del mapa; el panel inferior no cambia. */
body.home-sevb .map-area { touch-action: none; }