/* Capa `modals`: la declara este mismo archivo. Antes se la asignaba el
   `@import ... layer(modals)` de main.css; ahora cada hoja se encola por
   separado para que descarguen en paralelo. Ver inc/enqueue.php. */
@layer modals {
/*
 * modals.css — Sistema de modales con <dialog> nativo
 *
 * Basado en el diseño original del proyecto.
 * Requiere las variables CSS de global.css (--color-primary, --radius-box, etc.)
 *
 * Compatibilidad: Chrome 37+, Firefox 98+, Safari 15.4+
 * ─────────────────────────────────────────────────────
 */

/* ── Variables locales ──────────────────────────────────────────────────── */
:root {
  --modal-overlay: rgba(0, 0, 0, 0.55);
  --modal-overlay-down: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 40%,
    transparent 100%
  );
  --modal-max-width: 480px;
  --modal-close-size: 42px;
  --modal-blur: 5px;
  --modal-dur-enter: 0.32s;
  --modal-dur-leave: 0.2s;
  --modal-ease-enter: cubic-bezier(0.34, 1.56, 0.64, 1);
  --modal-ease-leave: cubic-bezier(0.4, 0, 1, 1);
}

/* ── @keyframes ─────────────────────────────────────────────────────────── */

/* Entrada estándar (centro) — sube desde ligeramente debajo */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Salida estándar — cae y se desvanece */
@keyframes modal-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

/* Entrada desde abajo (bottom sheet) — 100% = altura propia del elemento */
@keyframes modal-enter-down {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Salida hacia abajo */
@keyframes modal-leave-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* Backdrop — fade puro, sin spring */
@keyframes modal-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-backdrop-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ── Elemento <dialog> base ─────────────────────────────────────────────── */

dialog.modal {
  /* Reset de estilos del navegador */
  margin: 0;
  padding: calc(var(--modal-close-size) + 1rem) var(--padding-h)
    var(--padding-h);
  border: none;
  background: transparent;
  color: inherit;

  /*
   * Anclado al viewport. Imprescindible: sin position:fixed el <dialog>
   * hereda una posición en el flujo del documento y, al abrirlo con
   * showModal() (que mueve el foco dentro), el navegador desplaza la página
   * para "traerlo a la vista" → salto de scroll al inicio. Fijándolo al
   * viewport, abrir el modal nunca mueve el scroll de fondo.
   */
  position: fixed;
  inset: 0;

  /* El botón .modal__close sobresale por arriba del .modal__inner */
  overflow: visible;

  /* Dimensiones: ocupa todo el viewport como contenedor flex */
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
}

/* Solo activo cuando está abierto — el navegador gestiona display:none en cierre */
dialog.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Backdrop nativo con desenfoque — reemplaza al anterior .modal__bg */
dialog.modal::backdrop {
  background: var(--modal-overlay);
  backdrop-filter: blur(var(--modal-blur));
  -webkit-backdrop-filter: blur(var(--modal-blur));
  animation: modal-backdrop-enter var(--modal-dur-enter) ease-out;
}

dialog.modal.modal--closing::backdrop {
  animation: modal-backdrop-leave var(--modal-dur-leave) ease-in forwards;
}

/* ── Contenedor visible (.modal__inner) ─────────────────────────────────── */

.modal__inner {
  position: relative;
  width: 100%;
  max-width: var(--modal-max-width);
  max-height: calc(100dvh - 80px);
  background: #fff;
  border-radius: var(--radius-box);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/*
 * Animación de entrada: se dispara cada vez que [open] se añade al <dialog>.
 * No puede estar en .modal__inner directamente — solo se ejecutaría al cargar la página.
 */
dialog.modal[open] .modal__inner {
  animation: modal-enter var(--modal-dur-enter) var(--modal-ease-enter) both;
}

/* Animación de salida — sobreescribe la de entrada (misma especificidad, declarada después) */
dialog.modal.modal--closing .modal__inner {
  animation: modal-leave var(--modal-dur-leave) var(--modal-ease-leave) forwards;
}

/* ── Zona de scroll (contenido) ─────────────────────────────────────────── */

.modal__info {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--padding-inner);
}

/* ── Botón de cierre ────────────────────────────────────────────────────── */

.modal__close {
  /* Posición: encima del .modal__inner, alineado a la derecha */
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(calc(-100% - 0.5rem)) scale(1);
  z-index: 1;

  /* Dimensiones */
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  padding: 0;

  /* Apariencia */
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-content, #fff);
  font-size: 1.25rem;
  cursor: pointer;

  /* Centra el icono */
  display: grid;
  place-content: center;

  transition:
    filter 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal__close:hover {
  filter: brightness(1.2);
  transform: translateY(calc(-100% - 0.5rem)) scale(1.1);
}

.modal__close:active {
  filter: brightness(0.95);
  transform: translateY(calc(-100% - 0.5rem)) scale(0.88);
}

/* Anillo de foco accesible */
.modal__close:focus-visible {
  outline: 2px solid var(--color-primary-content, #fff);
  outline-offset: 3px;
}

/* ── Variante: bottom sheet (.modal--down) ──────────────────────────────── */

dialog.modal--down {
  /*
   * overflow:hidden es clave para el slide-from-bottom:
   * el .modal__inner a translateY(100%) queda recortado por el borde inferior
   * del dialog, y se va revelando a medida que sube hacia translateY(0).
   * El <dialog> base tiene overflow:visible para el botón de cierre que
   * sobresale; aquí lo invertimos porque el botón queda dentro del área.
   */
  overflow: hidden;
  padding: var(--padding-h) var(--padding-h) 0;
}

/* [open] iguala la especificidad de dialog.modal[open] y gana por orden de cascada */
dialog.modal--down[open] {
  align-items: flex-end;
}

dialog.modal--down::backdrop {
  background: var(--modal-overlay-down);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

dialog.modal--down .modal__inner {
  border-radius: var(--radius1) var(--radius1) 0 0;
  max-height: calc(100dvh - 100px);
  max-width: 100%;
}

dialog.modal--down[open] .modal__inner {
  /* Easing de desaceleración: sin rebote, deslizamiento natural */
  animation: modal-enter-down 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

dialog.modal--down.modal--closing .modal__inner {
  animation: modal-leave-down 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Cierre centrado en bottom sheet */
dialog.modal--down .modal__close {
  left: 0;
  right: 0;
  margin: 0 auto;
}

dialog.modal--down p {
  text-align: center;
}

/* ── Variante: iframe (ej. #modal-360) ──────────────────────────────────── */

.modal__iframe {
  overflow: hidden;
  border-radius: var(--radius1);
}

.modal__iframe iframe {
  display: block;
  width: 100%;
  height: 90vh;
}

dialog#modal-360 .modal__inner {
  max-width: 100%;
  border-radius: var(--radius1);
}

/* ── Variante: promo/cookie (.modal--cookie) ────────────────────────────── */

/*
 * Las promos se abren con JS directamente (sin .open-modal).
 * La animación es más lenta para un efecto de aparición sutil.
 */
dialog.modal--cookie .modal__inner {
  animation-duration: 0.7s;
  animation-timing-function: ease;
}

/* Promo — contenedor general */
.promo .modal__info {
  padding: 0;
  position: relative;
}

.promo img {
  border-radius: var(--radius-box);
}

.promo .modal__info > div {
  padding: var(--padding-inner);
  position: relative;
}

.promo .button {
  margin: 0;
}

/* Promo 1 — texto flotante centrado sobre la imagen */
.promo--1 {
  text-align: center;
}

.promo--1 .modal__info > div {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 2rem);
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-box);
}

/* Promo 2 — imagen arriba, texto debajo */
.promo--2 {
  text-align: center;
}

.promo--2 img {
  border-radius: var(--radius-box) var(--radius-box) 0 0;
}

/* Promo 3 — overlay oscuro sobre la imagen */
.promo--3 .modal__info > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* Promo 4 — texto centrado simple */
.promo--4 {
  text-align: center;
}

/* ── Respeto por prefers-reduced-motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] .modal__inner,
  dialog.modal.modal--closing .modal__inner,
  dialog.modal--down[open] .modal__inner,
  dialog.modal--down.modal--closing .modal__inner {
    animation: none;
  }

  dialog.modal::backdrop,
  dialog.modal.modal--closing::backdrop {
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .modal__close {
    transition: filter 0.2s ease;
  }
  .modal__close:hover,
  .modal__close:active {
    transform: translateY(calc(-100% - 0.5rem)) scale(1);
  }
}
}