/* ==========================================================================
   MP360 · Jacarandá — armazón compartido de superficies temporales

   Una sola geometría para Ubicación, Recorridos, Proyectos y Agostini: velo,
   diálogo, radio, sombra y botón de cierre. Lo que cambia entre superficies es
   el contenido, no la idea visual.

   Las superficies viven dentro de .mp360-app: siguen operativas en fullscreen.
   ========================================================================== */

.mp360-surface {
  --sf-blanco: #FFFFFF;
  --sf-tinta: #151515;
  --sf-primary-50: #F3F4FF;
  --sf-primary-700: #4742A1;
  --sf-primary-800: #332F7B;    /* variante fuerte del Design System */
  --sf-oscuro: #1A1A1F;         /* superficie oscura de las fichas de proyecto */

  /* Escala de radios del Design System, declarada en el scope del componente
     igual que hacen mp360-lot-card.css y mp360-servicios.css. Ningún radio de
     estas superficies se escribe a mano: todos salen de acá. */
  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-prominent: 16px;

  /* recetas */
  --radius-modal: var(--radius-prominent);
  --radius-modal-compacto: var(--radius-container);   /* alto reducido */
  --radius-icon-button: var(--radius-control);        /* cuadrado redondeado */
  --radius-media: var(--radius-container);            /* imagen dentro del panel */
  --sf-cierre: 2.75rem;         /* 44px · target mínimo (DESIGN.md §7) */
  --sf-borde: rgba(21, 21, 21, 0.10);
  --sf-pad: clamp(1rem, 3vw, 2rem);

  position: absolute;
  inset: 0;
  z-index: 50;                  /* mismo plano que Servicios y Galería: nunca coexisten */
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 4vh, 3rem) clamp(0.75rem, 4vw, 3rem);
  padding-top: max(clamp(0.75rem, 4vh, 3rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(0.75rem, 4vh, 3rem), env(safe-area-inset-bottom, 0px));
  font-family: "Manrope", system-ui, sans-serif;
}

.mp360-surface[hidden] { display: none !important; }

.mp360-surface *,
.mp360-surface *::before,
.mp360-surface *::after { box-sizing: border-box; }

/* Reset de margenes del navegador para todo lo que viva en una superficie.
   Va dentro de `:where()` a proposito. Escrito como selector de elemento la
   regla vale (0,1,1) y le gana a CUALQUIER margen declarado por clase dentro
   de la superficie: el componente escribe `margin-bottom` en su propia clase,
   la regla no aparece tachada en devtools —gana otra hoja— y el margen queda
   en cero sin sintoma. Paso exactamente en el proyector de cuota.
   `:where()` no aporta especificidad, asi que el reset baja a (0,1,0) y las
   clases de cada componente lo pisan por orden, que es lo que se espera de un
   reset. */
.mp360-surface :where(p, h2, h3) { margin: 0; }

/* Sin desenfoque: cubriría el viewport entero sobre un panorama en movimiento
   y es el efecto más caro que se puede pedir en mobile. */
.mp360-surface__scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, 0.62);
  cursor: pointer;
}

.mp360-surface__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(80vw, 1180px);
  height: min(80dvh, 760px);
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-modal);
  background: var(--sf-blanco);
  color: var(--sf-tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cierre

   Ocupa una esquina reservada. Va por encima del contenido porque algunas
   superficies llegan hasta el borde —el mapa, la foto del proyecto— y ahí no
   hay banda que reservarle; por eso lleva superficie propia y sombra, para
   leerse como control sobre cualquier fondo.
   -------------------------------------------------------------------------- */
.mp360-surface__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: var(--sf-cierre);
  height: var(--sf-cierre);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--sf-blanco);
  border: 1px solid var(--sf-borde);
  border-radius: var(--radius-icon-button);   /* cuadrado redondeado, no círculo */
  color: var(--sf-tinta);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mp360-surface__close:hover {
    background: var(--sf-primary-50);
    border-color: var(--sf-primary-700);
  }
}

.mp360-surface__close:active { background: var(--sf-primary-50); }

.mp360-surface__close:focus-visible {
  outline: 2px solid var(--sf-primary-700);
  outline-offset: 2px;
}

.mp360-surface__close-icon { width: 1.125rem; height: 1.125rem; display: block; }
.mp360-surface__close-icon svg { display: block; width: 100%; height: 100%; }

/* Sobre superficie oscura el cierre invierte, y su foco necesita contraste
   contra el panel, no contra el blanco. */
.mp360-surface--agostini .mp360-surface__close {
  background: rgba(255, 255, 255, 0.94);
}

.mp360-surface--proyecto .mp360-surface__close:focus-visible,
.mp360-surface--agostini .mp360-surface__close:focus-visible {
  outline-color: var(--sf-blanco);
}

/* --------------------------------------------------------------------------
   Cierre de la ficha de proyecto — violeta primario con la cruz blanca

   La ficha es la única superficie cuyo cierre puede quedar sobre la fotografía
   según el viewport. Un botón blanco depende de que la foto sea oscura debajo;
   el violeta primario del proyecto no depende de nada: mantiene el contraste
   contra cualquier imagen y contra el panel oscuro.

   Blanco sobre #4742A1: 8,19:1. Muy por encima del 4.5:1 de DESIGN.md §6.

   Tamaño, posición, radio y comportamiento son los del componente compartido:
   acá sólo cambia el color y sus estados.
   -------------------------------------------------------------------------- */
.mp360-surface--proyecto .mp360-surface__close {
  background: var(--sf-primary-700);
  border-color: var(--sf-primary-700);
  color: var(--sf-blanco);
}

@media (hover: hover) and (pointer: fine) {
  .mp360-surface--proyecto .mp360-surface__close:hover {
    background: var(--sf-primary-800);
    border-color: var(--sf-primary-800);
    color: var(--sf-blanco);
  }
}

/* Pressed: el mismo escalón fuerte que el hover, para que el control acuse
   recibo también en táctil, donde no hay hover. */
.mp360-surface--proyecto .mp360-surface__close:active {
  background: var(--sf-primary-800);
  border-color: var(--sf-primary-800);
}

.mp360-surface__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Alto reducido / apaisado corto — la superficie se queda con casi todo
   ========================================================================== */
@media (orientation: landscape) and (max-height: 620px) {
  .mp360-surface {
    padding: 0.5rem;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .mp360-surface__dialog {
    width: min(96vw, 1180px);
    height: 100%;
    border-radius: var(--radius-modal-compacto);
  }

  .mp360-surface__close { top: 0.5rem; right: 0.5rem; }
}

/* Una columna: la superficie ocupa casi todo el marco y el aire lo da el
   padding del velo. */
@media (max-width: 899.98px) {
  .mp360-surface__dialog { width: 100%; height: 100%; }
}

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

/* El foco de apertura entra al diálogo, no a un control suyo (ver
   mp360-superficies.js). El contenedor no es un control: no lleva anillo. El
   anillo aparece cuando el usuario llega con Tab al botón de cierre, que es
   donde significa algo. */
.mp360-surface:focus,
.mp360-surface:focus-visible { outline: none; }