/* =========================================================================
   map.css — Mapa de lotes (Leaflet + overlay SVG) y ficha del lote.
   .is-embed sobre #map-stage = versión compacta de la home.
   Los colores vienen de las variables de site.css (:root).
   ========================================================================= */

/* ─── Marco ────────────────────────────────────────────────────────────── */
.map-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #EEF1E8;
  border: 1px solid rgba(31, 61, 43, 0.10);
  box-shadow: 0 30px 60px -30px rgba(31, 61, 43, 0.45), 0 2px 6px rgba(31, 61, 43, 0.06);
}

#map-stage {
  position: relative;
  /* Página /mapa/: todo el alto disponible debajo del header. */
  height: calc(100dvh - var(--header-h, 64px) - var(--bottomnav-h, 0px) - 2rem);
  min-height: 420px;
  isolation: isolate;
}
.map-frame--embed #map-stage { height: 420px; min-height: 0; }
@media (min-width: 1024px) { .map-frame--embed #map-stage { height: 520px; } }

.leaflet-host {
  position: absolute; inset: 0;
  background: #EEF1E8;
  font-family: 'Inter', system-ui, sans-serif;
}
.leaflet-container { background: #EEF1E8; outline: none; }
.leaflet-container .plan-img {
  /* El PNG es line-art negro/naranja: lo calentamos apenas y lo multiplicamos
     sobre el fondo para que no se vea como un escaneo. */
  mix-blend-mode: multiply;
  filter: saturate(0.8) contrast(0.95);
}

.map-loading {
  position: absolute; inset: 0; z-index: 500;
  display: grid; place-items: center;
  color: var(--muted); font-size: 14px;
  background: #EEF1E8;
  transition: opacity .3s;
}
#map-stage.is-ready .map-loading { opacity: 0; pointer-events: none; }

/* ─── Lotes ────────────────────────────────────────────────────────────── */
.lots-overlay .lot { cursor: pointer; }
.lots-overlay .lot-fill {
  fill: rgba(255, 255, 255, 0.01);          /* casi invisible pero "tocable" */
  stroke: rgba(31, 61, 43, 0.35);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill .15s, stroke .15s;
}
.lots-overlay .lot.has-owner .lot-fill { fill: rgba(78, 125, 74, 0.28); }
.lots-overlay .lot:hover .lot-fill { fill: rgba(242, 181, 68, 0.35); stroke: var(--forest); }
.lots-overlay .lot.active .lot-fill {
  fill: rgba(242, 181, 68, 0.55);
  stroke: #B7791F;
  stroke-width: 3;
}
.lots-overlay .lot-num {
  font: 600 15px 'Inter', system-ui, sans-serif;
  fill: var(--forest);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3.5;
  opacity: 0;
  transition: opacity .2s;
}
/* El plano ya trae los números impresos: el nuestro sólo resalta el activo. */
.lots-overlay .lot.active .lot-num { opacity: 1; font-size: 22px; fill: #7A4E0E; }

/* ─── Controles Leaflet con la estética del sitio ──────────────────────── */
#map-stage .leaflet-bottom.leaflet-right { margin: 0 12px 12px 0; display: flex; flex-direction: column-reverse; gap: 8px; }
#map-stage .leaflet-control { margin: 0 !important; }
#map-stage .leaflet-bar {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(31, 61, 43, 0.35);
}
#map-stage .leaflet-bar a,
#map-stage .map-recenter {
  width: 44px; height: 44px; line-height: 44px;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 500;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.96);
  border: none;
  border-bottom: 1px solid rgba(31, 61, 43, 0.08);
}
#map-stage .map-recenter {
  border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(31, 61, 43, 0.35);
}
#map-stage .leaflet-bar a:hover, #map-stage .map-recenter:hover { background: #fff; color: var(--moss); }

/* ─── Buscador ─────────────────────────────────────────────────────────── */
.map-search {
  position: absolute; z-index: 800;
  top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 14px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  box-shadow: 0 10px 28px -12px rgba(31, 61, 43, 0.45);
}
@media (min-width: 768px) { .map-search { right: auto; width: 20rem; } }
.map-search-icon { color: var(--muted); flex: none; }
.map-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 16px;               /* 16px evita el zoom automático de iOS */
  color: var(--ink);
  padding: 8px 4px;
}
.map-search button {
  flex: none;
  height: 40px; padding: 0 16px;
  border-radius: 11px;
  background: var(--forest); color: #fff;
  font-weight: 600; font-size: 14px;
}
.map-search button:hover { background: var(--moss); }
.map-search-error {
  position: absolute; z-index: 800; top: 70px; left: 12px;
  padding: 6px 12px; border-radius: 10px;
  background: #FDECEC; color: #9B2C2C; font-size: 13px;
}

/* ─── Leyenda ──────────────────────────────────────────────────────────── */
.map-legend {
  position: absolute; z-index: 700;
  left: 12px; bottom: 12px;
  display: flex; gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 12px; color: var(--muted);
  box-shadow: 0 6px 16px -8px rgba(31, 61, 43, 0.3);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .dot { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid rgba(31, 61, 43, 0.45); }
.map-legend .dot--owner { background: rgba(78, 125, 74, 0.45); }
.map-legend .dot--empty { background: #fff; }
#map-stage.is-embed .map-legend { display: none; }

/* ─── CTA del embed ────────────────────────────────────────────────────── */
.map-embed-cta {
  position: absolute; z-index: 800;
  left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--forest); color: #fff;
  font-weight: 600; font-size: 14px;
  box-shadow: 0 12px 28px -10px rgba(31, 61, 43, 0.7);
  transition: transform .2s, background .2s;
}
.map-embed-cta:hover { background: var(--moss); transform: translateY(-1px); }
.map-embed-cta span { transition: transform .2s; }
.map-embed-cta:hover span { transform: translateX(3px); }

/* ─── Tooltip (sólo mouse) ─────────────────────────────────────────────── */
.map-tooltip {
  position: absolute; z-index: 900;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--forest); color: #fff;
  font-size: 13px; line-height: 1.3;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0; transition: opacity .12s;
  white-space: nowrap;
}
.map-tooltip strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.map-tooltip[data-show="true"] { opacity: 1; }

/* ─── Ficha del lote ───────────────────────────────────────────────────── */
.lotmodal {
  position: fixed; inset: 0; z-index: 1300;  /* por encima de header y barra inferior */
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none;
}
.lotmodal[data-show="true"] { visibility: visible; pointer-events: auto; }
.lotmodal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 30, 20, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.lotmodal[data-show="true"] .lotmodal-backdrop { opacity: 1; }
.lotmodal-card {
  position: relative;
  width: min(560px, 92vw);
  max-height: 88vh; overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 30, 20, 0.35);
  padding: 28px;
  color: var(--ink);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .22s, transform .28s cubic-bezier(.2, .9, .3, 1.1);
}
.lotmodal[data-show="true"] .lotmodal-card { opacity: 1; transform: none; }
.lotmodal-grabber { display: none; }

/* Celular: hoja desde abajo, con el mapa todavía visible arriba. */
@media (max-width: 640px) {
  .lotmodal { align-items: flex-end; }
  .lotmodal-backdrop { background: rgba(15, 30, 20, 0.25); backdrop-filter: none; }
  .lotmodal-card {
    width: 100%; max-height: 78vh;
    border-radius: 24px 24px 0 0;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1), opacity .2s;
  }
  .lotmodal-grabber {
    display: block; width: 44px; height: 5px; border-radius: 99px;
    background: #D6DBD2; margin: 0 auto 14px;
  }
}

.lotmodal-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: #F1F4EE; color: var(--muted);
  font-size: 22px; line-height: 1;
  transition: background .15s, color .15s;
}
.lotmodal-close:hover { background: #E4EADF; color: var(--forest); }
.lotmodal-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--moss);
}
.lotmodal-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 28px; font-weight: 600;
  margin: 4px 40px 10px 0;
  color: var(--forest); line-height: 1.15;
}
.status-pill {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
}
.status-pill[data-s="free"]     { color: #2B5A2E; background: #E3F1DD; }
.status-pill[data-s="reserved"] { color: #8B5A1F; background: #FBEBD0; }
.status-pill[data-s="sold"]     { color: #8C2E3A; background: #F8E1E4; }

.lotmodal-grid {
  margin-top: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lotmodal-field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #F5F7F2;
  min-width: 0;
}
.lotmodal-field.full { grid-column: 1 / -1; }
.lotmodal-field label { font-size: 12px; color: var(--muted); }
.lotmodal-field span, .lotmodal-field a { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.lotmodal-field a { color: var(--forest); font-weight: 600; }
.lotmodal-field a[href]::after { content: " ↗"; font-size: 12px; opacity: .7; }
@media (max-width: 340px) { .lotmodal-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .lotmodal-header h2 { font-size: 24px; }
  .lotmodal-grid { margin-top: 14px; gap: 8px; }
  .lotmodal-field { padding: 10px 12px; }
}

.lotmodal-masked, .lotmodal-masked-inline {
  display: inline-block;
  color: rgba(31, 27, 22, 0.5);
  filter: blur(4px);
  pointer-events: none; user-select: none;
}
.lotmodal-field.is-masked .lotmodal-value { display: none; }

.lotmodal-private-hint {
  margin-top: 16px; padding: 12px 14px;
  border-radius: 14px;
  background: #FFF8E8; color: #7A5A1A;
  font-size: 14px; text-align: center;
}
.lotmodal-private-hint a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lotmodal-private-hint-sep { margin: 0 6px; opacity: .5; }

.lotmodal-claim { margin-top: 16px; padding: 16px; border-radius: 14px; background: #EEF5EA; }
.lotmodal-claim p { font-size: 14px; color: var(--muted); margin-bottom: 12px; }