/* ==========================================================================
   Perlas 3 · Estilos del plano interactivo (sitio y panel /admin)
   ========================================================================== */
.mapa__canvas {
  --st-disponible: #3fb6d4;
  --st-apartado: #e4a33a;
  --st-vendido: #a3b1bb;
  --st-sel: #053854;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(5, 56, 84, .14) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #f7fbfe, #eaf3fa);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mapa__canvas.is-zoomed { touch-action: none; }
.mapa__canvas.is-dragging { cursor: grabbing; }
.mapa__canvas:focus-visible { outline: 2px solid #199cc0; outline-offset: -2px; }
.mapa__stage { position: absolute; inset: 0; }
.mapa__stage > svg { display: block; width: 100%; height: 100%; }

/* Plano */
.plano .pl-predio { fill: #e7f0f6; stroke: #053854; stroke-width: .5; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; }
.plano .pl-vias path { stroke: #b6ccda; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plano .pl-donaciones path { fill: #d8eedf; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano [data-lote] {
  cursor: pointer;
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill .25s ease, opacity .25s ease;
}
.plano .lote--disponible { fill: var(--st-disponible); }
.plano .lote--apartado { fill: var(--st-apartado); }
.plano .lote--vendido { fill: var(--st-vendido); }
.plano [data-lote]:hover { fill: #199cc0; }
.plano .lote--apartado:hover { fill: #cf8d22; }
.plano .lote--vendido:hover { fill: #8b9aa5; }
.plano [data-lote].is-selected { fill: var(--st-sel); }
.plano [data-lote].is-dimmed { opacity: .2; }
.plano .pl-sel { fill: none; stroke: #053854; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.plano .pl-num text { fill: #053854; transition: opacity .2s ease; }
.plano .pl-num text.n--vendido { fill: #f4f7f9; }
.plano .pl-num text.is-dimmed { opacity: .25; }
.plano.sin-numeros .pl-num { display: none; }
.plano.sin-detalle .pl-don-label text + text { display: none; }
.plano .pl-mz text { fill: #053854; }
.plano .pl-don-label text { fill: #2f6e4a; }
.mapa__stage svg .pl-num text[data-for].sel-num { fill: #fff; }

/* Tooltip, aviso y carga */
.mapa__tooltip {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  display: grid; gap: 2px; padding: 9px 12px; border-radius: 8px;
  background: rgba(3, 40, 61, .94); color: #fff; font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 10px 30px -10px rgba(2, 26, 41, .6);
  opacity: 0; transition: opacity .15s ease; white-space: nowrap;
}
.mapa__tooltip.is-on { opacity: 1; }
.mapa__tooltip strong { font-weight: 600; letter-spacing: .02em; }
.mapa__tooltip i { font-style: normal; font-weight: 500; }
.mapa__tooltip .t-disponible { color: #7fd3e8; }
.mapa__tooltip .t-apartado { color: #f3c36e; }
.mapa__tooltip .t-vendido { color: #c4ced5; }
.mapa__hint {
  position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translate(-50%, 8px);
  padding: 8px 14px; border-radius: 100px; background: rgba(3, 40, 61, .88); color: #fff;
  font-size: 12.5px; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s;
}
.mapa__canvas.show-hint .mapa__hint { opacity: 1; transform: translate(-50%, 0); }
.mapa__loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 14px;
  color: #4f687a; font-size: 14px; letter-spacing: .04em; background: inherit;
}
.mapa__loading::before {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(25, 156, 192, .25); border-top-color: #199cc0; animation: mapa-spin .9s linear infinite;
}
.mapa__canvas.is-ready .mapa__loading { display: none; }
.mapa__canvas.is-error .mapa__loading::before { display: none; }
@keyframes mapa-spin { to { transform: rotate(360deg); } }

/* Leyenda de colores */
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #4f687a; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.mapa-dot--disponible { background: #3fb6d4; }
.mapa-dot--apartado { background: #e4a33a; }
.mapa-dot--vendido { background: #a3b1bb; }
.mapa-dot--donacion { background: #d8eedf; border: 1px solid #a9d3b6; }
.plano .pl-num text.is-sel { fill: #ffffff; font-weight: 600; }