/* MP360 · Ayres de Cardales — Galería de imágenes ("Imágenes" del navbar)
 *
 * Referencia aprobada: Osmo Supply · Layered Image Slider, tal como quedó
 * integrado en Canteras del Riachuelo (CCode/index.html §9c + §9c-bis).
 * Fidelidad: estructura, clases y data-* del recurso, crossfade de fondos,
 * contador + barra de autoplay arriba, navegación abajo (a la derecha en
 * desktop, repartida en mobile), frame enmascarado y títulos conservados pero
 * ocultos (Canteras: la fotografía no lleva palabras encima).
 * Integración Ayres: todo bajo `.mp360-galeria` (sin estilos globales),
 * tokens y tipografía de Ayres, velo y botón cerrar del visor de placas.
 *
 * Contrato responsive
 *   Tarea: recorrer los renders del desarrollo.
 *   Imprescindible: imagen · cerrar · anterior/siguiente · posición (01 / 06).
 *   Progresivo: autoplay con barra (sin autoplay con reduced motion), swipe.
 *   Desktop (> 900): modal min(1720px, 90vw) × min(84dvh, 940px) (Canteras).
 *   ≤ 900: min(720px, ancho útil) × min(74dvh, 640px) (Canteras).
 *   Altura reducida (landscape ≤ 480 px de alto): alto útil completo; Canteras
 *     acotaba a 280 px por su banda de navbar, que en Ayres queda bajo el velo.
 *   Scroll: ninguno. Compatibilidad: BLOCK (velo sobre recorrido y navbar).
 *   Estados: cerrado · abierto; imagen: vacio · cargando · listo · error.
 *
 * Capa 50 dentro de #mp360-root (como placas y rutas; son excluyentes vía
 * mp360:superficie-abierta). Vive en .mp360-app: sigue visible en fullscreen.
 */

.mp360-root .mp360-galeria {
  --galeria-gutter: clamp(12px, 3vw, 32px);
  --galeria-control: 44px;
  --galeria-control-fondo: rgba(10, 28, 33, 0.72);
  --galeria-w: min(1720px, 90vw);
  --galeria-h: min(84dvh, 940px);
  --galeria-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;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:
    max(var(--galeria-gutter), env(safe-area-inset-top, 0px))
    max(var(--galeria-gutter), env(safe-area-inset-right, 0px))
    max(var(--galeria-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--galeria-gutter), env(safe-area-inset-left, 0px));
  font-family: var(--mp360-font-ui);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
}

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

/* El recurso asume `box-sizing: border-box` global (Canteras lo declara);
   Ayres no: sin esto el overlay (100% + padding) desborda el diálogo. */
.mp360-galeria,
.mp360-galeria *,
.mp360-galeria *::before,
.mp360-galeria *::after { box-sizing: border-box; }

/* ---------------- velo (mismo que el visor de placas) ---------------- */

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

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

.mp360-galeria__dialogo {
  position: relative;
  width: min(var(--galeria-w), 100%);
  height: min(var(--galeria-h), 100%);
  box-sizing: border-box;
  border-radius: var(--galeria-radio);
  overflow: hidden;
  background: var(--primary-950);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.55);
  outline: none;
  touch-action: none;
  overscroll-behavior: contain;
}

.mp360-galeria__vivo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Osmo Supply · Layered Image Slider — CSS del recurso (literal, acotado a la
   galería). Mecánica intacta: crossfade de fondos, strip de títulos, frame
   enmascarado, contador, barra de autoplay y nav.
   ========================================================================== */

.mp360-galeria .layered-slider {
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  padding-bottom: 15em;
  position: relative;
  overflow: clip;
}

.mp360-galeria .layered-slider__container {
  width: 100%;
  position: relative;
}

.mp360-galeria .layered-slider__bg-collection {
  z-index: 0;
  position: absolute;
  inset: 0%;
  overflow: clip;
}

.mp360-galeria .layered-slider__bg-item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.mp360-galeria .layered-slider__bg-img {
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  display: block;
}

.mp360-galeria .layered-slider__bg-dark {
  z-index: 2;
  background-color: #00000026;
  position: absolute;
  inset: 0%;
}

.mp360-galeria .layered-slider__text-collection {
  z-index: 3;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 28em;
  padding-bottom: 28em;
  display: flex;
  position: relative;
}

.mp360-galeria .layered-slider__text-list {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.mp360-galeria .layered-slider__text-item {
  text-align: center;
  cursor: pointer;
  max-width: 80%;
  position: absolute;
}

.mp360-galeria .layered-slider__mask-collection {
  z-index: 3;
  aspect-ratio: 4 / 5;
  border-radius: .75em;
  width: 20em;
  position: absolute;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, 30%);
}

.mp360-galeria .layered-slider__mask-list {
  position: absolute;
  inset: 0%;
}

.mp360-galeria .layered-slider__mask-item {
  flex: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.mp360-galeria .layered-slider__overlay {
  z-index: 4;
  pointer-events: none;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 120em;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
}

.mp360-galeria .layered-slider__overlay-top {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mp360-galeria .layered-slider__progress {
  background-color: #ffffff40;
  border-radius: 10em;
  width: 6em;
  height: 2px;
  overflow: hidden;
}

.mp360-galeria .layered-slider__progress-inner {
  transform-origin: 0%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #fff;
  transform: scale3d(0, 1, 1);
}

.mp360-galeria .layered-slider__overlay-btm {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.mp360-galeria .layered-slider__nav {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mp360-galeria .layered-slider__nav-button {
  background-color: #0000;
  border: 1px solid #ffffff4d;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: .75em;
  display: flex;
  position: relative;
}

.mp360-galeria .layered-slider__nav-icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

@media screen and (max-width: 767px) {
  .mp360-galeria .layered-slider__overlay {
    padding: 1em;
  }

  .mp360-galeria .layered-slider__overlay-btm {
    justify-content: center;
    align-items: center;
  }

  .mp360-galeria .layered-slider__nav {
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .mp360-galeria .layered-slider__mask-collection {
    width: 14em;
  }
}

/* ==========================================================================
   Adaptación (como Canteras §9c-bis + Ayres). La mecánica del recurso no se
   toca: solo geometría dentro del modal, contenido y contexto de los botones.
   ========================================================================== */

/* El em del recurso se fija acá: no depende de lo que herede #mp360-root. */
.mp360-galeria .mp360-galeria__slider {
  font-size: 16px;
  height: 100%;
  padding-bottom: 0;
  background: var(--primary-950);
  --mask-w: 300px;
  --mask-inset: 32px;
}

/* El slider es el único contenido del modal: su altura ES la del diálogo. */
.mp360-galeria .mp360-galeria__slider .layered-slider__container { height: 100%; }

/* Títulos: nodos conservados (de ellos sale el conteo y el strip), vacíos,
   invisibles, sin puntero ni exposición a tecnologías asistivas. */
.mp360-galeria .mp360-galeria__slider .layered-slider__text-collection {
  position: absolute;
  inset: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Frame enmascarado: nodos conservados (el JS mide maskFrame.clientWidth),
   sin imagen ni render, como en Canteras. */
.mp360-galeria .mp360-galeria__slider .layered-slider__mask-collection {
  width: var(--mask-w);
  bottom: var(--mask-inset);
  transform: translate(-50%, 0);
  visibility: hidden;
  pointer-events: none;
}

/* Carga diferida: la imagen aparece al decodificarse, sin salto. */
.mp360-galeria .layered-slider__bg-item picture { display: contents; }
.mp360-galeria .layered-slider__bg-img {
  opacity: 0;
  transition: opacity 0.32s var(--mp360-ease-out);
  -webkit-user-drag: none;
  pointer-events: none;
}
.mp360-galeria .layered-slider__bg-item[data-carga="listo"] .layered-slider__bg-img { opacity: 1; }

/* Normalización de los <button> del recurso (heredan fuente y color en su
   contexto original) + piso táctil. Los SVG siguen siendo los del recurso. */
.mp360-galeria .layered-slider__nav-button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: var(--galeria-control);
  min-height: var(--galeria-control);
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
@media (hover: hover) and (pointer: fine) {
  .mp360-galeria .layered-slider__nav-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
  }
}
.mp360-galeria .layered-slider__nav-button:active { background-color: rgba(255, 255, 255, 0.2); }

.mp360-galeria .layered-slider__span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* ---------------- cerrar (patrón del visor de placas) ---------------- */

.mp360-galeria__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: var(--galeria-control);
  height: var(--galeria-control);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-icon-button);
  background: var(--galeria-control-fondo);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}

.mp360-galeria__icono {
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url("../icons/nucleo/circle-xmark.svg") center / contain no-repeat;
  mask: url("../icons/nucleo/circle-xmark.svg") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .mp360-galeria__cerrar:hover { background: rgba(30, 63, 72, 0.9); border-color: rgba(255, 255, 255, 0.4); }
}
.mp360-galeria__cerrar:active { background: rgba(45, 86, 97, 0.95); }

/* Tanda 5: cierre compartido (MP360Cierre). Se conserva solo la posición;
   fondo oscuro translúcido para contraste sobre la foto, sin círculo ni borde. */
.mp360-galeria__cerrar.mp360-cierre {
  --mp360-cierre-fondo: rgb(16 36 42 / 0.62);
  --mp360-cierre-fondo-hover: rgb(16 36 42 / 0.82);
  --mp360-cierre-fondo-activo: rgb(45 86 97 / 0.95);
  width: var(--mp360-cierre-tam);
  height: var(--mp360-cierre-tam);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--mp360-cierre-fondo);
}
@media (hover: hover) and (pointer: fine) {
  .mp360-galeria__cerrar.mp360-cierre:hover { background: var(--mp360-cierre-fondo-hover); }
}
.mp360-galeria__cerrar.mp360-cierre:active { background: var(--mp360-cierre-fondo-activo); }

.mp360-galeria__cerrar:focus-visible,
.mp360-galeria__accion:focus-visible,
.mp360-galeria .layered-slider__nav-button:focus-visible {
  outline: 2px solid var(--secondary-400);
  outline-offset: 2px;
}

/* ---------------- estado de la imagen activa (carga / error) ---------------- */

.mp360-galeria__estado {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 72px 24px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.mp360-galeria__estado[hidden] { display: none; }

.mp360-galeria__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-galeria__mensaje:empty { display: none; }

.mp360-galeria__accion {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--galeria-control);
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--white);
  color: var(--primary-700);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--mp360-ui-tracking);
  cursor: pointer;
}
.mp360-galeria__accion[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mp360-galeria__accion:hover { background: var(--primary-50); }
}

/* ---------------- responsive ---------------- */

/* Tablet vertical y mobile (Canteras ≤ 900). */
@media (max-width: 900px) {
  .mp360-root .mp360-galeria {
    --galeria-w: 720px;
    --galeria-h: min(74dvh, 640px);
  }
  .mp360-galeria .mp360-galeria__slider { --mask-w: 168px; --mask-inset: 20px; }
}

@media (max-width: 767px) {
  .mp360-root .mp360-galeria { --galeria-radio: var(--radius-compact); }
  .mp360-galeria__cerrar { top: 8px; right: 8px; }
}

@media (max-width: 380px) {
  .mp360-galeria .mp360-galeria__slider { --mask-w: 148px; --mask-inset: 16px; }
}

/* Mobile horizontal: hay ancho, no alto. */
@media (orientation: landscape) and (max-height: 480px) {
  .mp360-root .mp360-galeria {
    --galeria-gutter: 12px;
    --galeria-h: 100%;
  }
  .mp360-galeria .mp360-galeria__slider { --mask-w: 112px; --mask-inset: 12px; }
  .mp360-galeria__cerrar { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-galeria .layered-slider__bg-img { transition: none; }
}