/* TerreNet - mapa del catalogo (ronda 3). Ver docs/2026-11-evolucion/03-SISTEMA-DE-DISENO.md
   Todo va bajo #terrenos-map para ganarle en especificidad a leaflet.css (que se carga bajo demanda). */

#terrenos-map {
  --m-ink: var(--tn-ink, #15201a);
  --m-ink-2: var(--tn-ink-2, #3a4740);
  --m-muted: var(--tn-muted, #5e6b64);
  --m-line: var(--tn-line, #dce3dd);
  --m-line-strong: var(--tn-line-strong, #bfcac2);
  --m-surface: var(--tn-surface, #fff);
  --m-sunken: var(--tn-sunken, #eaeee8);
  --m-brand: var(--tn-brand, #18794e);
  --m-brand-strong: var(--tn-brand-strong, #0f5c3a);
  --m-hito: var(--tn-hito, #b8431a);
  --m-rent: var(--tn-rent, #1d4f91);
  --m-mono: var(--tn-mono, 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace);
  --m-font: var(--tn-font, 'Archivo', system-ui, sans-serif);
  --m-focus: #2f8f5f;
}

/* ---------- Contenedor ---------- */
#terrenos-map.map-container {
  position: relative;
  width: 100%;
  height: 60vh;
  height: 60svh;
  min-height: 380px;
  max-height: 640px;
  margin: 0 0 16px;
  border: 1px solid var(--m-line);
  border-radius: var(--tn-r3, 10px);
  box-shadow: none;
  background: var(--m-sunken);
  overflow: hidden;
  font-family: var(--m-font);
  scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom));
}
@media (min-width: 761px) {
  #terrenos-map.map-container { height: 560px; min-height: 480px; }
}
/* modern.css pone display:none hasta .visible: se mantiene */

#terrenos-map.leaflet-container { font-family: var(--m-font); background: var(--m-sunken); }

/* Basemap OSM desaturado: calma visual para que los pines manden */
#terrenos-map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.06); }

/* ---------- Estados de carga / vacio ---------- */
#terrenos-map .tn-map-status {
  position: absolute; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; color: var(--m-ink-2); font-size: 15px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(21, 32, 26, .05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(21, 32, 26, .05) 39px 40px),
    var(--m-sunken);
}
#terrenos-map .tn-map-status p { margin: 0; max-width: 32ch; }
#terrenos-map .tn-map-status__btn,
#terrenos-map .tn-map-bar__back {
  min-height: 44px; padding: 0 16px; border-radius: var(--tn-r2, 6px);
  font: 600 14px/1 var(--m-font); cursor: pointer;
  background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-ink);
}
#terrenos-map .tn-map-status__btn:hover,
#terrenos-map .tn-map-bar__back:hover { background: var(--m-ink); color: #fff; }

#terrenos-map .tn-map-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 450;
  width: min(320px, calc(100% - 32px)); padding: 16px; margin: 0;
  background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--tn-r2, 6px);
  color: var(--m-ink-2); font-size: 14px; line-height: 1.45; text-align: center;
}
#terrenos-map .tn-map-empty[hidden] { display: none; }

/* ---------- Barra superior (Ver lista + conteo) ---------- */
#terrenos-map .tn-map-bar { display: flex; align-items: center; gap: 8px; margin: 0; }
#terrenos-map .leaflet-top.leaflet-left .tn-map-bar { margin: 10px 0 0 10px; }
#terrenos-map .tn-map-bar__back { display: none; box-shadow: 0 1px 2px rgba(21, 32, 26, .12); }
@media (max-width: 760px) {
  #terrenos-map .tn-map-bar__back { display: inline-flex; align-items: center; }
}
#terrenos-map .tn-map-bar__count {
  margin: 0; padding: 0 10px; min-height: 28px; display: inline-flex; align-items: center;
  font: 500 12px/1 var(--m-mono); font-variant-numeric: tabular-nums; color: var(--m-ink);
  background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--tn-r1, 4px);
}
#terrenos-map .tn-map-bar__count:empty { display: none; }

/* ---------- Controles de zoom ---------- */
#terrenos-map .leaflet-top.leaflet-right .leaflet-control { margin: 10px 10px 0 0; }
#terrenos-map .leaflet-bar {
  border: 1px solid var(--m-line-strong); border-radius: var(--tn-r2, 6px);
  box-shadow: 0 1px 2px rgba(21, 32, 26, .12); overflow: hidden;
}
#terrenos-map .leaflet-bar a,
#terrenos-map .leaflet-bar a:hover {
  width: 44px; height: 44px; line-height: 42px;
  background: var(--m-surface); color: var(--m-ink);
  font: 500 22px/42px var(--m-mono); border-bottom: 1px solid var(--m-line);
}
#terrenos-map .leaflet-bar a:last-child { border-bottom: 0; }
#terrenos-map .leaflet-bar a:hover { background: var(--m-ink); color: #fff; }
#terrenos-map .leaflet-bar a.leaflet-disabled { background: var(--m-sunken); color: var(--m-line-strong); }
#terrenos-map .leaflet-bar a:focus-visible,
#terrenos-map .tn-map-bar__back:focus-visible,
#terrenos-map .tn-map-status__btn:focus-visible,
#terrenos-map .tn-sheet__close:focus-visible,
#terrenos-map .leaflet-popup-close-button:focus-visible,
#terrenos-map .tn-pv__cta:focus-visible {
  outline: 3px solid var(--m-focus); outline-offset: 2px;
}

/* Atribucion */
#terrenos-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, .88); color: var(--m-muted); font: 11px/1.5 var(--m-font); padding: 1px 6px;
}
#terrenos-map .leaflet-control-attribution a { color: var(--m-ink-2); text-decoration: underline; }

/* ---------- Pines de precio ---------- */
#terrenos-map .tn-pin-wrap { background: none; border: 0; width: 0; height: 0; outline: none; }
#terrenos-map .tn-pin {
  position: absolute; left: 0; bottom: 0; transform: translate(-50%, -5px);
  display: block; padding: 4px 7px; white-space: nowrap; cursor: pointer;
  font: 500 12px/1.2 var(--m-mono); font-variant-numeric: tabular-nums;
  color: var(--m-ink); background: #fff; border: 1px solid var(--m-ink); border-radius: var(--tn-r1, 4px);
  box-shadow: 0 1px 2px rgba(21, 32, 26, .18);
  transition: background-color 120ms ease, color 120ms ease;
}
#terrenos-map .tn-pin::after { /* puntero */
  content: ""; position: absolute; left: 50%; top: 100%; width: 7px; height: 7px;
  background: inherit; border-right: 1px solid var(--m-ink); border-bottom: 1px solid var(--m-ink);
  transform: translate(-50%, -4px) rotate(45deg); border-bottom-right-radius: 1px;
}
#terrenos-map .tn-pin--rent { color: var(--m-rent); border-color: var(--m-rent); }
#terrenos-map .tn-pin--rent::after { border-color: var(--m-rent); }

#terrenos-map .tn-pin-wrap:hover .tn-pin,
#terrenos-map .tn-pin-wrap.is-hover .tn-pin,
#terrenos-map .tn-pin-wrap.is-active .tn-pin,
#terrenos-map .tn-pin-wrap:focus-visible .tn-pin { background: var(--m-ink); color: #fff; }
#terrenos-map .tn-pin-wrap:hover .tn-pin--rent,
#terrenos-map .tn-pin-wrap.is-hover .tn-pin--rent,
#terrenos-map .tn-pin-wrap.is-active .tn-pin--rent,
#terrenos-map .tn-pin-wrap:focus-visible .tn-pin--rent { background: var(--m-rent); color: #fff; }
/* mojon: solo el pin seleccionado lleva el acento */
#terrenos-map .tn-pin-wrap.is-active .tn-pin { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-hito); }
#terrenos-map .tn-pin-wrap:focus-visible .tn-pin { outline: 3px solid var(--m-focus); outline-offset: 3px; }

/* ---------- Clusters ---------- */
#terrenos-map .tn-cluster {
  display: flex; align-items: center; justify-content: center;
  background: var(--m-ink); color: #fff; border: 0; border-radius: var(--tn-r1, 4px);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(21, 32, 26, .35);
  font: 500 13px/1 var(--m-mono); font-variant-numeric: tabular-nums; cursor: pointer;
  outline: none;
}
#terrenos-map .tn-cluster:hover { background: var(--m-brand-strong); }
#terrenos-map .tn-cluster:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--m-focus); }
#terrenos-map .marker-cluster-spider-leg, #terrenos-map .leaflet-cluster-spider-leg { stroke: var(--m-ink); }

/* ---------- Vista previa (popup desktop y hoja mobile) ---------- */
#terrenos-map .tn-popup .leaflet-popup-content-wrapper {
  padding: 0; border-radius: var(--tn-r2, 6px); background: var(--m-surface); color: var(--m-ink);
  border: 1px solid var(--m-line-strong); box-shadow: 0 2px 4px rgba(21, 32, 26, .08), 0 12px 28px rgba(21, 32, 26, .16);
}
#terrenos-map .tn-popup .leaflet-popup-content { margin: 0; line-height: 1.4; font-size: 14px; }
#terrenos-map .tn-popup .leaflet-popup-tip { background: var(--m-surface); box-shadow: none; border: 1px solid var(--m-line-strong); }
#terrenos-map .tn-popup .leaflet-popup-close-button,
#terrenos-map .tn-sheet__close {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 26px/1 var(--m-font); color: var(--m-ink); background: transparent; border: 0; cursor: pointer;
  text-decoration: none; border-radius: 0 var(--tn-r2, 6px) 0 var(--tn-r2, 6px);
}
#terrenos-map .tn-popup .leaflet-popup-close-button:hover,
#terrenos-map .tn-sheet__close:hover { background: var(--m-sunken); color: var(--m-ink); }

#terrenos-map .tn-pv {
  display: grid; grid-template-columns: 112px 1fr; gap: 0 12px; align-items: start;
  padding: 12px;
}
#terrenos-map .tn-pv__media {
  display: block; aspect-ratio: 4 / 3; width: 112px; border-radius: var(--tn-r1, 4px); overflow: hidden;
  background: var(--m-sunken); border: 1px solid var(--m-line);
}
#terrenos-map .tn-pv__media.is-empty {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(21, 32, 26, .06) 7px 8px), var(--m-sunken);
}
#terrenos-map .tn-pv__media img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
#terrenos-map .tn-pv__body { min-width: 0; padding-right: 32px; }
#terrenos-map .tn-pv__price {
  margin: 0; white-space: nowrap; font: 500 16px/1.2 var(--m-mono); font-variant-numeric: tabular-nums; color: var(--m-ink);
}
#terrenos-map .tn-pv--rent .tn-pv__price { color: var(--m-rent); }
#terrenos-map .tn-pv__unit { font-size: 12px; color: var(--m-muted); margin-left: 2px; }
#terrenos-map .tn-pv__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#terrenos-map .tn-pv__measure {
  font: 500 12px/1 var(--m-mono); font-variant-numeric: tabular-nums; color: var(--m-ink);
  padding: 4px 6px; border: 1px dashed var(--m-line-strong); border-radius: var(--tn-r1, 4px);
}
#terrenos-map .tn-pv__m2 { font: 400 12px/1 var(--m-mono); color: var(--m-muted); font-variant-numeric: tabular-nums; }
#terrenos-map .tn-pv__loc { margin: 6px 0 0; font-size: 14px; color: var(--m-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#terrenos-map .tn-pv__cta {
  grid-column: 1 / -1; margin-top: 12px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--m-brand); color: #fff; border-radius: var(--tn-r2, 6px);
  font: 600 15px/1 var(--m-font); text-decoration: none;
}
#terrenos-map .tn-pv__cta:hover { background: var(--m-brand-strong); color: #fff; }
.leaflet-container a.tn-pv__cta { color: #fff; }

/* Hoja inferior (mobile): flota dentro del mapa, deja visible la atribucion */
#terrenos-map .tn-sheet { display: none; }
@media (max-width: 760px) {
  #terrenos-map .tn-sheet {
    display: block; position: absolute; z-index: 800; left: 8px; right: 8px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px) * 0);
    background: var(--m-surface); color: var(--m-ink);
    border: 1px solid var(--m-line-strong); border-radius: var(--tn-r2, 6px);
    box-shadow: 0 -2px 4px rgba(21, 32, 26, .06), 0 10px 28px rgba(21, 32, 26, .2);
    transform: translateY(16px); opacity: 0; transition: transform 180ms var(--tn-ease, ease), opacity 180ms ease;
  }
  #terrenos-map .tn-sheet[hidden] { display: none; }
  #terrenos-map .tn-sheet.is-open { transform: none; opacity: 1; }
  #terrenos-map .tn-sheet .tn-pv { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Tarjeta de la lista resaltada desde el pin ---------- */
article.card.tn-card-hl { outline: 2px solid var(--tn-ink, #15201a); outline-offset: -2px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #terrenos-map *, #terrenos-map *::before, #terrenos-map *::after {
    transition: none !important; animation: none !important;
  }
  #terrenos-map .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}
/* Evita las líneas blancas entre tiles (redondeo de subpíxeles al hacer zoom) */
#terrenos-map .leaflet-tile-container img.leaflet-tile { width: 256.6px !important; height: 256.6px !important; }
/* Base vectorial (OpenFreeMap Positron): ya es gris, sin filtro */
#terrenos-map.tn-map--vector .leaflet-tile-pane { filter: none; }
#terrenos-map .leaflet-gl-layer { z-index: 1; }