/* MP360 · Ayres de Cardales — Plano interactivo (minimapa abajo a la derecha)
 *
 * Superficie blanca como el selector (misma sombra), radius-container y aire
 * interno (--plano-pad) que contiene marcas, foco y halo de los puntos de
 * borde (p. ej. "Lat. Der. Abaj." en x≈0,026 · y≈0,963) sin mover coordenadas.
 *
 * Stage = rectángulo real del <img> (width 100 %, height auto, sin object-fit):
 * imagen, puntos (%) y cono (SVG con viewBox natural) comparten geometría.
 * Tamaños relativos al ancho del dibujo con unidades de contenedor (cqw):
 *   marca Ø = max(14px, dotSize × ancho) · activo × 1,3 + halo
 *   hit area = clamp(24px, distancia mínima entre puntos, 44px)
 *
 * Puntos ≠ marcadores de lote (círculo blanco con número): punto de color
 * secundario sin número; activo = primario, más grande y con halo (reconocible
 * sin depender del color) + aria-current.
 *
 * Carril: z-index 33 (como disponibilidad y selector), anclado con las
 * variables del carril inferior. No reserva espacio en el flujo.
 */

#mp360-plano {
  --plano-pad: 20px;
  /* ancho del dibujo: nunca invade la mitad izquierda ni el selector (ver QA) */
  --plano-lado: min(clamp(12rem, 16vw, 17.5rem), 32vh);
  position: absolute;
  z-index: 33;
  right: var(--mp360-inf-der, 24px);
  bottom: var(--mp360-inf-abajo, 24px);
  box-sizing: border-box;
  width: max-content;
  pointer-events: none;
  transition: opacity 0.3s var(--mp360-ease-out) 0.06s, translate 0.3s var(--mp360-ease-out) 0.06s, visibility 0s linear 0s;
}
#mp360-plano[hidden] { display: none !important; }

/* Cargando imagen/datos o cubierto por una superficie: fuera de vista (e inert por JS). */
#mp360-plano[data-listo="false"],
#mp360-plano[data-cubierto="true"] {
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.2s linear, translate 0.2s linear, visibility 0s linear 0.2s;
}

.mp360-plano__panel {
  box-sizing: border-box;
  padding: var(--plano-pad);
  border-radius: var(--radius-container);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(10, 28, 33, 0.14), 0 4px 12px rgba(10, 28, 33, 0.16);   /* --primary-950 */
  /* El cono de un punto de borde no sale de la superficie (medido: "Lat. Der.
     Abaj." activo lo proyectaba sobre el panorama). Marca, foco y hit area de
     44 px de ese punto quedan dentro del aire de --plano-pad. */
  overflow: hidden;
  pointer-events: auto;
}

.mp360-plano__stage {
  position: relative;
  width: calc(var(--plano-lado) * min(1, var(--plano-aspecto, 1)));
  container-type: inline-size;
}

.mp360-plano__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: max(var(--radius-compact), calc(var(--radius-container) - var(--plano-pad)));
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.mp360-plano__conos,
.mp360-plano__puntos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------------- cono ---------------- */
.mp360-plano__cono-stop { stop-color: var(--primary-700); }
.mp360-plano__cono path {
  fill: url(#mp360-plano-cono-grad);
  stroke: var(--white);
  stroke-opacity: 0.9;
  stroke-width: 1.25px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---------------- puntos ---------------- */
.mp360-plano__punto {
  /* Corrección puntual (2026-09-15): marca más visible (diámetro moderadamente
     mayor + piso más alto), sin tocar la distancia/hit area. */
  --plano-marca: max(16px, calc(var(--plano-dot, 0.03) * 100cqw * 1.2));
  --plano-hit: clamp(24px, calc(var(--plano-dist, 1) * 100cqw), 44px);
  position: absolute;
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--plano-hit);
  height: var(--plano-hit);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mp360-plano__punto[hidden] { display: none; }

.mp360-plano__marca {
  box-sizing: border-box;
  display: block;
  width: var(--plano-marca);
  height: var(--plano-marca);
  border-radius: 50%;
  background: var(--secondary-400);
  /* Anillo blanco (separa del fondo del plano) + halo discreto (contraste
     extra sobre fotos aéreas claras) + sombra de apoyo. Sutil, sin glow. */
  box-shadow:
    0 0 0 2.5px var(--white),
    0 0 0 4.5px rgba(10, 28, 33, 0.16),
    0 1px 4px 1px rgba(10, 28, 33, 0.45);
  transition: transform 0.2s var(--mp360-ease-out), background-color 0.2s var(--mp360-ease-out);
}

.mp360-plano__punto[data-activo] { cursor: default; }
.mp360-plano__punto[data-activo] .mp360-plano__marca {
  background: var(--primary-700);
  transform: scale(1.35);
  /* Activo: anillo doble más ancho (además del color) para distinguirse sin
     depender solo del contraste cromático. */
  box-shadow:
    0 0 0 2.5px var(--white),
    0 0 0 5px var(--primary-700),
    0 0 0 6.5px rgba(10, 28, 33, 0.16),
    0 1px 6px 1px rgba(10, 28, 33, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .mp360-plano__punto:not([data-activo]):hover .mp360-plano__marca {
    background: var(--secondary-500);
    transform: scale(1.18);
  }
}
.mp360-plano__punto:not([data-activo]):active .mp360-plano__marca {
  transform: scale(0.92);
  transition-duration: 0.08s;
}

.mp360-plano__punto:focus { outline: none; }
.mp360-plano__punto:focus-visible .mp360-plano__marca {
  outline: 2px solid var(--primary-950);
  outline-offset: 3px;
}
.mp360-plano__punto[data-activo]:focus-visible .mp360-plano__marca { outline-offset: 4px; }

/* ---------------- ausencia (defensa; el JS no lo monta) ----------------
   Misma clasificación que el JS (MQ_EXCLUIDO) y que el carril inferior:
   teléfono vertical, teléfono horizontal (altura reducida) y portrait angosto. */
@media (max-width: 599.98px), (max-height: 500px), (max-width: 899.98px) and (orientation: portrait) {
  #mp360-plano { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #mp360-plano,
  #mp360-plano[data-listo="false"],
  #mp360-plano[data-cubierto="true"],
  .mp360-plano__marca { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}