/* =========================================================
   Horizonte Ambateño · Estilos del mapa interactivo
   ========================================================= */
.ha-map { position: relative; background: #3f7a2c; overflow: hidden; user-select: none; -webkit-user-select: none; }
.ha-map-svg { width: 100%; height: 100%; display: block; cursor: default; touch-action: pan-y; }
.ha-map-svg.is-zoomed { cursor: grab; }
.ha-map-svg.is-panning { cursor: grabbing; }
.ha-map-svg.is-panning .lot { pointer-events: none; }

.map-green { fill: #6aa845; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 6 6; }
.map-green-label text { text-anchor: middle; fill: #fff; font-family: var(--f-sans); }
.green-title { font-size: 17px; font-weight: 800; letter-spacing: .18em; opacity: .95; }
.green-sub { font-size: 13px; font-weight: 600; opacity: .85; }
.sign-text { fill: #f7f3ea; font: 700 9.5px var(--f-sans); letter-spacing: .16em; text-anchor: middle; }
.sign-text--dark { fill: #fff; font-size: 12px; }

.lot { cursor: pointer; outline: none; transition: opacity .35s; }
.lot-shape {
  stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  transition: fill .25s, stroke .25s, stroke-width .25s;
}
.lot.is-available .lot-shape { fill: #2f8f3c; }
.lot.is-sold .lot-shape { fill: #c0392b; }
.lot.is-available:hover .lot-shape, .lot.is-available:focus-visible .lot-shape { fill: #45ab4f; }
.lot.is-sold:hover .lot-shape, .lot.is-sold:focus-visible .lot-shape { fill: #d24a3b; }
.lot:focus-visible .lot-shape { stroke: var(--sun); stroke-width: 3; }
.lot text { pointer-events: none; text-anchor: middle; fill: #fff; font-family: var(--f-sans); }
.lot-num { font-size: 17px; font-weight: 800; }
.lot-num--big { font-size: 34px; }
.lot-area { font-size: 9.5px; font-weight: 600; opacity: .92; letter-spacing: .02em; }
.lot-area--big { font-size: 15px; }

.lot.is-dim { opacity: .3; }
.lot.is-dim .lot-shape { fill: #6d7d68; }
.lot.is-match.is-available .lot-shape { fill: #33a043; }
.lot.is-selected .lot-shape { fill: #e9b43c; stroke: #fff; stroke-width: 2.5; }
.lot.is-selected.is-sold .lot-shape { fill: #c0392b; }
.lot.is-selected text { fill: var(--forest); }
.lot.is-selected.is-sold text { fill: #fff; }

.sel-ring { fill: none; stroke: #f5c451; stroke-width: 6; stroke-linejoin: round; animation: selPulse 1.6s ease-in-out infinite; }
.sel-core { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
@keyframes selPulse { 0%, 100% { stroke-opacity: .95; stroke-width: 5; } 50% { stroke-opacity: .35; stroke-width: 12; } }

/* Tooltip */
.map-tip {
  position: absolute; left: 0; top: 0; z-index: 5; min-width: 178px; pointer-events: none;
  background: rgba(14, 51, 34, .94); color: var(--cream); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); font-size: 13px;
  opacity: 0; transition: opacity .18s; backdrop-filter: blur(6px);
}
.map-tip.is-on { opacity: 1; }
.map-tip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.map-tip__head strong { font-family: var(--f-serif); font-size: 21px; font-weight: 600; line-height: 1; }
.map-tip__row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: rgba(247, 243, 234, .7); }
.map-tip__row b { color: #fff; }
.map-tip__cta { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(247, 243, 234, .15); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }

/* Controles */
.map-ctrl { position: absolute; right: 14px; top: 14px; z-index: 4; display: grid; gap: 8px; }
.map-ctrl button {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(251, 249, 244, .95); color: var(--forest);
  display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); transition: transform .2s, background .2s;
}
.map-ctrl button:hover { transform: scale(1.06); background: #fff; }
.map-ctrl svg { width: 20px; height: 20px; }
.map-zoom-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 4; padding: 6px 12px; border-radius: 999px;
  background: rgba(14, 51, 34, .8); color: var(--cream); font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.map-legend .l-ok { background: #2f8f3c; }
.map-legend .l-sold { background: #c0392b; }
.map-legend .l-sel { background: #e9b43c; }
.map-legend .l-green { background: #6aa845; }

/* Silueta mini y localizador */
.lot-shape-mini path { stroke: var(--forest); stroke-width: 2; fill: #2f8f3c; }
.lot-shape-mini path.is-sold { fill: #c0392b; }
.locator path { fill: #cfd8c9; stroke: #fff; stroke-width: 2; }
.locator path.is-sold { fill: #e3b0aa; }
.locator path.is-target { fill: #e9b43c; stroke: var(--forest); stroke-width: 4; }
.locator .locator-green { fill: #cfe3c2; stroke: none; }
.locator .locator-road { fill: none; stroke: #e7e5de; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }