/* ══════════════════════════════════════════════════════════════════════
   MAPA DE LA RED — opciones del panel master (pagina Mapa)
   ──────────────────────────────────────────────────────────────────────
   Lo carga directorio.html. Todas las reglas dependen de un atributo que
   pone js/directorio-motor.js en <html>:

     data-mapa-motor="3d"                 el mapa lo pinta MapLibre
     data-mapa-estilo="noche|claro|marca" solo con motor 3d
     data-mapa-forma="circulo|ventana"    recorte del mapa (vale para los dos motores)

   REGLA: con el mapa plano y la forma "completo" (lo de siempre) aqui no
   aplica NI UNA declaracion. Por eso ningun selector va sin su atributo,
   salvo los de los marcadores nuevos (.qsp-casita, .qsp-foto, .qsp-precio),
   que solo existen en el DOM cuando el 3D los crea.
   ══════════════════════════════════════════════════════════════════════ */


/* ── FONDO DETRAS DEL GLOBO ───────────────────────────────────────────
   Fuera del planeta el lienzo es transparente y se ve el fondo de #map.  */
html[data-mapa-motor="3d"] #map {
  background: radial-gradient(ellipse at 50% 42%, #152040 0%, #080c18 58%, #04060c 100%);
}
/* Estrellas: puntos fijos, sin animar. Van por debajo del lienzo. */
html[data-mapa-motor="3d"]:not([data-mapa-estilo="claro"]) #map::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 71%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 9%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 73% 23%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 94% 12%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 47%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 91%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 81% 88%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 38%, rgba(255,255,255,.3) 50%, transparent 51%);
}
html[data-mapa-motor="3d"][data-mapa-estilo="claro"] #map {
  background: linear-gradient(#bcdcfa 0%, #e9f4ff 70%, #f6fbff 100%);
}


/* ── CONTROLES DE MAPLIBRE, CON EL ASPECTO DE LA PAGINA ───────────────  */
html[data-mapa-motor="3d"] .maplibregl-ctrl-group {
  background: rgba(10,14,26,.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  overflow: hidden;
}
html[data-mapa-motor="3d"] .maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
html[data-mapa-motor="3d"] .maplibregl-ctrl-group button:hover { background: rgba(255,255,255,.06); }
/* Los iconos vienen en negro: se invierten para el fondo oscuro. */
html[data-mapa-motor="3d"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }

/* La atribucion es obligatoria (OpenFreeMap, OpenStreetMap). Se deja visible
   y plegada; NO ocultarla como se hacia con la de Leaflet. */
html[data-mapa-motor="3d"] .maplibregl-ctrl-attrib {
  background: rgba(10,14,26,.82);
  color: var(--muted);
  font-size: .62rem;
}
html[data-mapa-motor="3d"] .maplibregl-ctrl-attrib a { color: var(--text); }
html[data-mapa-motor="3d"] .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 14px; }
html[data-mapa-motor="3d"] .maplibregl-ctrl-attrib-button { filter: invert(1); background-color: transparent; }

/* Los controles de arriba bajan lo justo para no quedar debajo de la barra de
   cifras (#realtimeBar), que va centrada sobre el mapa y en movil se parte en
   dos lineas. */
html[data-mapa-motor="3d"] .maplibregl-ctrl-top-left,
html[data-mapa-motor="3d"] .maplibregl-ctrl-top-right { top: 44px; }
@media (max-width: 640px) {
  html[data-mapa-motor="3d"] .maplibregl-ctrl-top-left,
  html[data-mapa-motor="3d"] .maplibregl-ctrl-top-right { top: 78px; }
}

/* En movil la ficha ocupa casi todo el ancho y #map.panel-open dejaria el mapa
   en una tira de 30 px: redimensionar un lienzo WebGL a eso y volver, con un
   vuelo en marcha, es trabajo tirado. El mapa se queda entero debajo de la
   ficha y al cerrarla ya esta colocado sobre el apartamento. */
@media (max-width: 720px) {
  html[data-mapa-motor="3d"] #map.panel-open { right: 0; }
}

/* El marcador de MapLibre es un contenedor de tamano cero alrededor del
   nuestro; el cursor y el orden de apilado van aqui. */
html[data-mapa-motor="3d"] .qsp-mk { cursor: pointer; }
html[data-mapa-motor="3d"] .qsp-mk:hover { z-index: 5; }


/* ── MARCADORES NUEVOS ────────────────────────────────────────────────
   Llevan tambien la clase .apt-pin (la buscan los filtros de zona), asi que
   aqui se deshace lo que .apt-pin les pone de circulo de 34 px.
   --c es el color segun el estado, el mismo criterio que el pin.          */
.apt-pin.qsp-casita,
.apt-pin.qsp-foto,
.apt-pin.qsp-precio            { --c: var(--pin); }
.apt-pin.qsp-casita.available,
.apt-pin.qsp-foto.available,
.apt-pin.qsp-precio.available  { --c: var(--ok); }
.apt-pin.qsp-casita.occupied,
.apt-pin.qsp-foto.occupied,
.apt-pin.qsp-precio.occupied   { --c: var(--err); }
.apt-pin.qsp-casita.current-apt,
.apt-pin.qsp-foto.current-apt,
.apt-pin.qsp-precio.current-apt { --c: var(--accent); }

.apt-pin.qsp-casita .apt-pin-label,
.apt-pin.qsp-foto .apt-pin-label,
.apt-pin.qsp-precio .apt-pin-label { top: calc(100% + 8px); }

/* Casita 3D */
.apt-pin.qsp-casita {
  width: 44px; height: 46px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--c);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.55));
  transform-origin: 50% 90%;
}
.apt-pin.qsp-casita svg { width: 100%; height: 100%; display: block; overflow: visible; }
.apt-pin.qsp-casita:hover { transform: scale(1.16); box-shadow: none; }
.apt-pin.qsp-casita.current-apt { transform: scale(1.3); box-shadow: none; }

/* Foto de portada en un circulo, con el aro del color del estado */
.apt-pin.qsp-foto {
  width: 52px; height: 52px;
  padding: 3px; box-sizing: border-box;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--bg), 0 6px 18px rgba(0,0,0,.6);
  transform-origin: 50% 100%;
}
.apt-pin.qsp-foto img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #1a2238;
}
.apt-pin.qsp-foto::after,
.apt-pin.qsp-precio::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  translate: -50% -1px;
  border: 6px solid transparent;
  border-top-color: var(--c);
  border-bottom: 0;
}
.apt-pin.qsp-foto:hover { transform: scale(1.14); }

/* Precio en una pastilla */
.apt-pin.qsp-precio {
  width: auto; height: auto;
  padding: .32rem .66rem;
  border-radius: 999px;
  background: var(--c);
  color: #0a0e1a;
  font: 700 .76rem/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--bg), 0 5px 14px rgba(0,0,0,.55);
  transform-origin: 50% 100%;
}
.apt-pin.qsp-precio:hover { transform: scale(1.12); }


/* ── FORMA DEL MAPA ───────────────────────────────────────────────────
   clip-path recorta tambien los clics: fuera de la forma no hay mapa.
   La barra de arriba, la ficha y los botones son elementos aparte y no
   se recortan.                                                           */
html[data-mapa-forma] body {
  background: radial-gradient(ellipse at 50% 55%, #111a30 0%, var(--bg) 62%);
}
html[data-mapa-forma="circulo"] #map {
  clip-path: circle(min(47vw, calc((100vh - 56px) * .47)) at 50% 50%);
}
html[data-mapa-forma="ventana"] #map {
  clip-path: inset(3% 14% 3% 14% round 36vw 36vw 22px 22px);
}
@media (max-width: 720px) {
  /* En vertical un circulo dejaria medio movil vacio: se estira a ovalo. */
  html[data-mapa-forma="circulo"] #map { clip-path: ellipse(49% 45% at 50% 50%); }
  html[data-mapa-forma="ventana"] #map { clip-path: inset(2% 4% 2% 4% round 46vw 46vw 18px 18px); }
}