/* Sección Ubicación (#ubicacion .location) — solo el mapa, a toda la sección, sin texto ni márgenes.
   Mapa real con Leaflet + teselas oscuras de CARTO (ver assets/js/location-map.js); aquí solo se
   redecoran los controles de Leaflet (zoom, atribución, popup) para que encajen con el negro del sitio. */

.location {
  position: relative;
  padding: 0; /* anula el padding-block por defecto de "section" en base.css */
}

/* Cosido con Reservas: una sombra que cae sobre el propio mapa para que parezcan una misma
   sección continua, en vez de un corte seco entre la pizarra y el mapa. z-index:500 la deja por
   encima de las teselas (panes de Leaflet hasta ~400) pero por debajo de marcador/controles (600+),
   así el degradado no tapa el pin ni el selector de zoom. */
.location::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(3rem, 12vw, 7rem);
  background: linear-gradient(180deg, #000, transparent);
  z-index: 500;
  pointer-events: none;
}

.location-map {
  width: 100%;
  height: 70vh;
  min-height: 22rem;
  background: #1a1b1e; /* mismo tono que las teselas dark_all mientras cargan */
}

.location-pin {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Controles de zoom — blancos, con iconos de línea propios en vez del glifo +/− por defecto
   (ver zoomInText/zoomOutText en assets/js/location-map.js) */
.leaflet-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #17161a;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.leaflet-bar a:hover {
  background: #d9d9d9;
  color: #17161a;
}

/* Cajetín de atribución (CARTO/OSM) */
.leaflet-control-attribution {
  background: rgba(11, 11, 13, 0.75) !important;
  color: var(--color-text-muted);
}
.leaflet-control-attribution a {
  color: var(--color-text-muted);
}

/* Popup del pin */
.leaflet-popup-content-wrapper {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
}
.leaflet-popup-content {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}
.leaflet-popup-tip {
  background: var(--color-surface);
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--color-text-muted);
}
.leaflet-container a.leaflet-popup-close-button:hover {
  color: #fff;
}