/* ==========================================================================
   Plano interactivo compacto (minimapa)

   Vive en la columna derecha del dock, según el layout canónico MP360.
   Es una superficie de orientación: persistente, chica y silenciosa. No se
   expande, no abre modal y no compite con el panorama.

   Hereda los tokens de color declarados en .mp360-dock.
   ========================================================================== */

/* El hueco no recibe puntero hasta que el plano existe de verdad. */
.mp360-dock__right.tiene-plano { pointer-events: auto; }

/* Superficie blanca, sin borde ni caja oscura: el plano es una lámina, no un
   panel. El protagonista es la imagen: el blanco es sólo el mínimo para que un
   punto sobre el borde no aparezca cortado por la mitad, no un marco. */
.mp360-plano {
  --plano-cono: 4rem;            /* lo recalcula el JS según el ancho real */
  --plano-marca: 17px;           /* 30% más que los 13px iniciales */
  --plano-target: 34px;

  /* Dos familias de vista. El violeta primario queda para las vistas en
     altura; las peatonales usan el secundario del Design System, que ya se
     usa en el CTA de WhatsApp. No es un color nuevo. */
  --plano-altura: #4742A1;       /* --primary-700 */
  --plano-peatonal: #A16455;     /* --secondary-600 */
  --plano-marco: 0.5rem;         /* 8px: exactamente medio punto, ni más */
  /* Intensidad del cono en su base. Los degradados de abajo la llevan
     escrita: si se cambia acá hay que cambiarla en las dos reglas. */
  --plano-cono-alpha: 0.8;

  width: 20rem;                  /* 320px: el plano pide más superficie que
                                    la leyenda; es la pieza que se lee, no se
                                    lee una lista */
  padding: var(--plano-marco);
  background: var(--white);
  border: none;
  border-radius: var(--radius-container);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  /* El recorte vive acá, en la lámina, no en la imagen: un punto sobre el
     borde se apoya entero en el blanco, y el cono usa ese mismo margen pero
     no sale de la tarjeta a flotar sobre la foto. */
  overflow: hidden;
}

/* Sin recorte: un punto o un cono sobre el borde de la imagen se apoya en el
   blanco en vez de cortarse. */
.mp360-plano__lienzo {
  position: relative;
  line-height: 0;
  overflow: visible;
}

/* La imagen se muestra completa y sin alterar: es el plano aprobado. */
.mp360-plano__img {
  display: block;
  border-radius: 2px;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;

  /* A3 - la imagen llega despues del montaje, asi que la caja se reserva con
     la proporcion real del archivo (1604x980). Sin esto, un `<img>` sin `src`
     con `height: auto` mide 0 y el dock se reacomoda cuando la imagen aparece.
     Con esto el hueco es el definitivo desde el primer frame y las marcas, que
     se posicionan en porcentajes sobre `__capa`, caen donde corresponde
     incluso antes de que haya imagen. */
  aspect-ratio: 1604 / 980;
}

.mp360-plano__capa { position: absolute; inset: 0; }

/* ---- cono de orientación ----
   Detrás del punto, nunca clickeable. Indica el rumbo calibrado del panorama;
   no es una lectura viva del FOV.

   Intensidad alta (80% en la base, por indicación del proyecto): el cono tiene
   que leerse de un vistazo sobre una imagen clara y con mucho detalle. Se
   mantiene la caída hacia la punta para que siga leyéndose como un haz y no
   como un triángulo plano. --plano-cono-alpha permite ajustarlo sin tocar la
   regla. */
.mp360-plano__cono {
  --fam: var(--plano-altura);
  position: absolute;
  z-index: 1;
  width: calc(var(--plano-cono) * 0.85);
  height: var(--plano-cono);
  transform-origin: 50% 100%;
  background: linear-gradient(to top,
              rgba(71, 66, 161, 0.8), rgba(71, 66, 161, 0.44));
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Las vistas peatonales son la otra familia. Se distinguen en reposo, no sólo
   al estar activas: el color dice qué tipo de vista es cada punto. */
.mp360-plano__cono[data-tipo="peatonal"],
.mp360-plano__pt[data-tipo="peatonal"] { --fam: var(--plano-peatonal); }

.mp360-plano__cono[data-tipo="peatonal"] {
  background: linear-gradient(to top,
              rgba(161, 100, 85, 0.8), rgba(161, 100, 85, 0.44));
}

.mp360-plano__cono.is-activo { opacity: 1; }

/* ---- punto navegable ----
   El botón es el área táctil; el círculo visible es el hijo. Así el target
   crece sin que la marca engorde y tape el plano. */
.mp360-plano__pt {
  --fam: var(--plano-altura);
  position: absolute;
  z-index: 2;
  width: var(--plano-target);
  height: var(--plano-target);
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

.mp360-plano__dot {
  width: var(--plano-marca);
  height: var(--plano-marca);
  border-radius: 50%;
  /* Relleno de familia con contorno blanco: a 17px un anillo de color deja el
     color casi invisible, y acá el color ES la información (altura o
     peatonal). Lo que distingue al punto activo es el halo y, sobre todo, el
     cono: ninguna otra marca lo tiene. */
  background: var(--fam);
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--mp360-ease-ui), background-color 0.3s ease, box-shadow 0.3s ease;
}

.mp360-plano__pt:hover .mp360-plano__dot { transform: scale(1.15); }

.mp360-plano__pt:focus-visible { outline: none; }
.mp360-plano__pt:focus-visible .mp360-plano__dot {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fam);
}

/* Activo: relleno violeta, anillo blanco y el borde oscuro que lo separa del
   plano. Sin texto: el nombre lo dice el selector, no el mapa. */
.mp360-plano__pt.is-activo .mp360-plano__dot {
  background: var(--fam);
  border-color: var(--white);
  box-shadow: 0 0 0 3px var(--white), 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ---- estado de carga ----
   Discreto a proposito: un rectangulo apenas mas claro que el fondo del dock.
   No lleva spinner ni texto. La espera dura lo que tarda un PNG ya cacheado en
   la mayoria de las visitas, y un indicador activo llamaria mas la atencion
   que el propio plano. Las marcas ya son visibles y utilizables encima. */
.mp360-plano.is-cargando .mp360-plano__lienzo {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

/* El fade tiene que ocurrir cuando LLEGA la imagen, no al montar. La regla se
   ancla a la ausencia de `is-cargando`, que es justo lo que `_cargarImagen()`
   quita en el `load`. Anclada al `<img>` a secas se habria ejecutado en el
   montaje, con la imagen todavia sin pedir. */
@media (prefers-reduced-motion: no-preference) {
  .mp360-plano:not(.is-cargando) .mp360-plano__img {
    animation: mp360-plano-aparece 0.35s ease both;
  }
}

@keyframes mp360-plano-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- responsive ----
   Por debajo de 900px el dock pasa a una sola columna y la columna derecha se
   oculta (regla de mp360-viewer.css).

   Acá decía que «el minimapa no se monta en ese ancho». No era cierto: se
   montaba igual, descargaba sus 2,27 MB y sostenía el rAF de seguimiento de
   cámara aun estando en `display: none` (medido a 375, 768 y 1440 px). Desde
   A3 la estructura sí se monta —es barata y evita un salto al cruzar el
   breakpoint— pero la imagen y el bucle quedan condicionados al ancho, con
   `MQ_OCULTO` en mp360-plano.js como espejo de esta misma regla.

   Lo que queda acá es el ajuste de altura reducida y de puntero grueso. */

@media (max-height: 780px) {
  .mp360-plano { width: 17rem; }
}

@media (pointer: coarse) {
  /* El área táctil sube al mínimo utilizable sin agrandar la marca visible. */
  .mp360-plano { --plano-target: 44px; --plano-marca: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-plano__dot,
  .mp360-plano__cono { transition: none !important; }
}