/* MP360 · Ayres de Cardales — sitio web embebido
 *
 * Diálogo modal. Tarea principal: navegar el sitio del proyecto sin salir del
 * recorrido.
 *
 * Contrato responsive (tanda 5: sin cabecera propia)
 *   Imprescindible: sitio (iframe) · cerrar.
 *   Progresivo:     estado de carga; carga lenta → "Abrir sitio web" (recuperación).
 *   Scroll:         solo el del sitio, dentro de su iframe. La capa no scrollea
 *                   ni deja pasar gestos al recorrido.
 *   Marco:          el iframe directo en un contenedor con radio y
 *                   overflow:hidden (recorta las esquinas del sitio).
 *   Cierre:         cierre compartido en espacio reservado FUERA del marco,
 *                   arriba a la derecha: nunca tapa la web.
 *     Desktop, tablet y horizontal: columna propia a la derecha del marco.
 *     Mobile vertical (≤ 767 px y vertical): franja propia sobre el marco.
 *   Estados: cerrado · abierto · cerrando; carga: vacio · cargando · listo · lento.
 *   Motion: MP360Motion (velo + marco + cierre).
 *   Compatibilidad: BLOCK. Cierra menú, tooltip, rutas y placa
 *   (mp360:superficie-abierta). Capa 50 en #mp360-root: visible en fullscreen.
 */

.mp360-root .mp360-web {
  --web-gutter: clamp(16px, 3vw, 40px);
  --web-gap: 12px;
  --web-control: 44px;
  --web-radio: var(--radius-container);

  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);
  pointer-events: auto;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}

.mp360-web[hidden] { display: none !important; }
.mp360-root .mp360-web[data-estado="cerrando"],
.mp360-web[data-estado="cerrando"] .mp360-web__cuerpo,
.mp360-web[data-estado="cerrando"] .mp360-web__cerrar { pointer-events: none; }

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

/* ---------------- diálogo: marco + columna del cierre ---------------- */

.mp360-web__dialogo {
  position: absolute;
  inset:
    max(var(--web-gutter), env(safe-area-inset-top, 0px))
    max(var(--web-gutter), env(safe-area-inset-right, 0px))
    max(var(--web-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--web-gutter), env(safe-area-inset-left, 0px));
  max-width: calc(1440px + var(--web-control) + var(--web-gap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--web-control);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "marco cierre";
  column-gap: var(--web-gap);
  box-sizing: border-box;
  outline: none;
  pointer-events: none;           /* el velo recibe el toque fuera del marco */
}

.mp360-web__cerrar {
  grid-area: cierre;
  align-self: start;
  justify-self: end;
  pointer-events: auto;
}

/* ---------------- marco del sitio ---------------- */

.mp360-web__cuerpo {
  grid-area: marco;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--web-radio);
  background: var(--white);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  isolation: isolate;             /* recorte de esquinas fiable sobre el iframe */
}

.mp360-web__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--white);
}

.mp360-web__iframe:focus-visible {
  outline: 2px solid var(--secondary-400);
  outline-offset: -2px;
}

.mp360-web__estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  background: var(--neutral-950);
  transition: opacity 0.2s var(--mp360-ease-out), visibility 0s linear 0.2s;
}

.mp360-web[data-carga="listo"] .mp360-web__estado,
.mp360-web[data-carga="vacio"] .mp360-web__estado {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

.mp360-web__accion[hidden] { display: none; }

/* ---------------- mobile vertical: franja del cierre sobre el marco ---------------- */

@media (max-width: 767px) and (orientation: portrait) {
  .mp360-root .mp360-web { --web-gutter: 8px; --web-gap: 8px; --web-radio: var(--radius-compact); }
  .mp360-web__dialogo {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--web-control) minmax(0, 1fr);
    grid-template-areas: "cierre" "marco";
    row-gap: var(--web-gap);
  }
}

/* ---------------- altura reducida (horizontal): columna, menos margen ---------------- */

@media (max-height: 500px) {
  .mp360-root .mp360-web { --web-gutter: 8px; --web-gap: 8px; --web-radio: var(--radius-compact); }
}