/* MP360 · Ayres de Cardales — visor de placas de lote
 *
 * Diálogo modal. Tarea principal: leer la placa del lote tocado. La imagen es
 * el contenido (suministrada, 1081×1921): se muestra completa, con su
 * proporción, y se puede ampliar y desplazar.
 *
 * Contrato responsive
 *   Imprescindible: imagen completa · cerrar.
 *   Progresivo:     ampliar/reducir (botón, doble toque/clic, pellizco, rueda, + − 0).
 *   Scroll:         ninguno. Único gesto de desplazamiento: mover la placa ampliada.
 *   Jerarquía (tanda 5): cierre compartido (MP360Cierre) arriba a la derecha;
 *                   "Ampliar" es secundaria y va abajo, lejos del cierre.
 *   Encaje:         el JS elige la reserva que deja la placa más grande y la
 *                   publica en data-encaje:
 *                   vertical → cierre arriba-derecha · Ampliar abajo al centro;
 *                   lateral  → columnas simétricas: cierre arriba-derecha ·
 *                              Ampliar abajo-derecha (horizontal y desktop).
 *   Altura reducida (740×360): la placa entra completa (texto chico) y
 *                   "Ampliar" la lleva al ancho útil.
 *   Estados: cerrado · abierto · cerrando; carga: cargando · listo · error.
 *   Motion: MP360Motion (velo · vista · capa de controles).
 *   Compatibilidad: BLOCK. El velo cubre todo; el recorrido no recibe gestos.
 *   Cierra menú, tooltip y panel de rutas (mp360:superficie-abierta).
 *
 * Capa 50 dentro de #mp360-root (entrada 20 · tooltip 30 · controles 33–35 ·
 * aviso 40 · rutas 50; rutas y placa son excluyentes). Vive en .mp360-app:
 * en fullscreen sigue visible.
 */

.mp360-root .mp360-placa {
  --placa-gutter: clamp(12px, 3vw, 32px);
  --placa-gap: 12px;
  --placa-control: 44px;
  --placa-control-fondo: rgba(10, 28, 33, 0.72);
  --placa-control-hover: rgba(30, 63, 72, 0.9);
  --placa-control-activo: rgba(45, 86, 97, 0.95);

  position: absolute;
  left: 0;
  right: 0;
  top: var(--mp360-vv-top, 0px);
  height: var(--mp360-vv-h, 100%);
  z-index: 50;
  font-family: var(--mp360-font-ui);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
}

.mp360-placa[hidden] { display: none !important; }
/* Durante la salida el recorrido vuelve a recibir el puntero. */
.mp360-root .mp360-placa[data-estado="cerrando"],
.mp360-placa[data-estado="cerrando"] .mp360-placa__cerrar,
.mp360-placa[data-estado="cerrando"] .mp360-placa__zoom,
.mp360-placa[data-estado="cerrando"] .mp360-placa__accion { pointer-events: none; }

/* ---------------- velo ---------------- */

.mp360-placa__velo {
  position: fixed;
  inset: 0;
  background: rgba(10, 28, 33, 0.86);
  touch-action: none;
}

/* ---------------- diálogo ---------------- */

.mp360-placa__dialogo {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding:
    max(var(--placa-gutter), env(safe-area-inset-top, 0px))
    max(var(--placa-gutter), env(safe-area-inset-right, 0px))
    max(var(--placa-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--placa-gutter), env(safe-area-inset-left, 0px));
  outline: none;
}

/* La vista ocupa todo el diálogo: ampliada, la placa usa la pantalla entera
   (pasa por debajo de los controles, que tienen superficie propia). */
.mp360-placa__vista {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}

.mp360-placa[data-carga="listo"] .mp360-placa__vista { cursor: zoom-in; }
.mp360-placa[data-carga="listo"][data-zoom="ampliada"] .mp360-placa__vista { cursor: grab; }
.mp360-placa[data-carga="listo"][data-zoom="ampliada"] .mp360-placa__vista:active { cursor: grabbing; }

.mp360-placa__lienzo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  border-radius: var(--radius-compact);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.55);
}
.mp360-placa__lienzo.is-animando { transition: transform 0.3s var(--mp360-ease-out); }

.mp360-placa__lienzo picture { display: contents; }

.mp360-placa__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* la proporción la garantiza el lienzo; esto es defensa */
  opacity: 0;
  transition: opacity 0.2s var(--mp360-ease-out);
  -webkit-user-drag: none;
  pointer-events: none;
}

.mp360-placa[data-carga="listo"] .mp360-placa__img { opacity: 1; }

/* ---------------- estado (carga / error) ---------------- */

.mp360-placa__estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

.mp360-placa[data-carga="listo"] .mp360-placa__estado,
.mp360-placa[data-carga="vacio"] .mp360-placa__estado { display: none; }

.mp360-placa__mensaje {
  margin: 0;
  max-width: 22rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: var(--mp360-ui-tracking);
  color: var(--neutral-50);
  text-wrap: balance;
}

.mp360-placa__mensaje:empty { display: none; }

/* ---------------- controles ---------------- */

/* Capa de controles: cubre el diálogo sin recibir puntero; cada botón se ubica
   en su esquina respetando gutter y safe areas. */
.mp360-placa__barra {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.mp360-placa__cerrar,
.mp360-placa__zoom { position: absolute; pointer-events: auto; }

/* Cierre compartido sobre superficie oscura propia: se lee sobre el velo y
   sobre la placa ampliada (blanca). Doble clase: mp360-cierre.css se carga
   después y define sus variables con la misma especificidad. */
.mp360-placa .mp360-placa__cerrar {
  --mp360-cierre-fondo: var(--placa-control-fondo);
  --mp360-cierre-fondo-hover: var(--placa-control-hover);
  --mp360-cierre-fondo-activo: var(--placa-control-activo);
  top: max(var(--placa-gutter), env(safe-area-inset-top, 0px));
  right: max(var(--placa-gutter), env(safe-area-inset-right, 0px));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* "Ampliar": acción secundaria de texto, misma superficie que el cierre, sin
   contorno; ancho estable entre "Ampliar" y "Reducir". */
.mp360-placa__zoom,
.mp360-placa__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--placa-control);
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--placa-control-fondo);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--mp360-ui-tracking);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--mp360-ease-out, ease-out), opacity 0.15s linear;
}

.mp360-placa__zoom {
  min-width: 6.5rem;
  bottom: max(var(--placa-gutter), env(safe-area-inset-bottom, 0px));
  left: 50%;
  translate: -50% 0;
}
.mp360-placa[data-encaje="lateral"] .mp360-placa__zoom {
  left: auto;
  right: max(var(--placa-gutter), env(safe-area-inset-right, 0px));
  translate: none;
}

/* "Reintentar" es la acción del estado de error: superficie clara, como la
   acción del aviso del recorrido. */
.mp360-placa__accion {
  pointer-events: auto;
  background: var(--white);
  color: var(--primary-700);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mp360-placa__accion[hidden] { display: none; }

.mp360-placa__zoom:disabled { opacity: 0; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .mp360-placa__zoom:hover { background: var(--placa-control-hover); }
  .mp360-placa__accion:hover { background: var(--primary-50); }
}
.mp360-placa__zoom:active { background: var(--placa-control-activo); }

.mp360-placa__zoom:focus-visible,
.mp360-placa__accion:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mp360-placa__lienzo.is-animando { transition: none; }
  .mp360-placa__img { transition: none; }
}