/* Sección de mapa: el recorrido sobre Lima real. */

.mapsec { padding-block: var(--space-6) 0; }
.mapsec[hidden] { display: none; }

.mapsec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.mapsec__title {
  font-size: var(--text-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  margin-top: var(--space-2);
}
.mapsec__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.map-shell {
  position: relative;
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

#map {
  height: clamp(22rem, 62svh, 40rem);
  background: var(--paper-deep);
}

/* Leaflet, alineado con los tokens en vez de sus defaults. */
.leaflet-container { font-family: var(--font-display); background: var(--paper-deep); }
.leaflet-control-attribution {
  font-size: 10px;
  background: oklch(100% 0 0 / 0.82);
  color: var(--ink-faint);
}
.leaflet-control-attribution a { color: var(--ink-soft); }

.leaflet-bar a {
  color: var(--ink);
  border-bottom-color: var(--paper-edge);
}
.leaflet-bar a:hover { background: var(--azul-soft); }

/* Marcadores propios */
.stop-pin {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--pin, var(--ink));
  box-shadow: 0 1px 4px oklch(20% 0.03 265 / 0.35);
}
.stop-pin--edge {
  width: 22px; height: 22px;
  border-width: 5px;
  background: var(--pin, var(--ink));
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.leaflet-popup-content { margin: 0.75rem 0.9rem; font-family: var(--font-display); }
.leaflet-popup-content .pop-name { font-weight: 800; font-size: var(--text-base); }
.leaflet-popup-content .pop-meta { font-size: var(--text-xs); color: var(--ink-soft); }
.leaflet-popup-content .pop-link {
  display: inline-block; margin-top: 0.4rem;
  font-size: var(--text-xs); font-weight: 700; color: var(--azul);
}