/* ---------------------------------------------------------------------------
   mapa.css — bloque "Como llegar" de la portada.

   Hoja aparte, cargada SOLO en la portada desde partials/head.php. Motivos:
   1. Es la unica pagina que la usa; en lasolas.css viajaria a las siete.
   2. Se entrega sin tocar lasolas.css, que es un fichero de 150 selectores
      portados de Astro y con historia (ver §14 del traspaso).
   Si algun dia el mapa aparece en mas paginas, se fusiona con lasolas.css y
   se quita el condicional de head.php.

   Los colores salen de las variables de la paleta con valor de respaldo, para
   que la hoja funcione aunque se cargue antes que lasolas.css.
   --------------------------------------------------------------------------- */

.lo-mapa {
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--lo-line, #e6e3dc);
  border-radius: .5rem;
  /* Blanco, NO --lo-shell: la seccion de contacto va sobre --lo-az-claro y el
     crema al lado del azul palido parece un parche pegado. */
  background: #ffffff;
}

/* La altura se fija AQUI, no en JS: asi el hueco existe desde el primer
   pintado y el pie no salta cuando Leaflet toma el control del elemento. */
.lo-mapa-lienzo {
  width: 100%;
  height: 24rem;
}

@media (max-width: 40rem) {
  .lo-mapa-lienzo { height: 17rem; }
}

/* Leaflet trae su propia tipografia y su propio fondo gris. Se igualan a los
   del sitio para que el mapa no parezca pegado de otra web. */
.leaflet-container {
  font: inherit;
  background: #ffffff;
}

.leaflet-container a { color: var(--lo-az, #216480); }

.leaflet-control-attribution {
  font-size: .7rem;
  background: rgba(255, 255, 255, .8);
}

.leaflet-popup-content {
  margin: .7rem .9rem;
  font-size: .95rem;
  color: var(--lo-ink, #2a2a28);
}

/* --- Fallo de carga, y <noscript> ----------------------------------------- */

.lo-mapa-error {
  margin: 0;
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: .9rem;
  color: var(--lo-soft, #6a6a64);
}