/*
 * Overlays: el panel «Explorar» / «Menú», el overlay del reel, la galería arrastrable
 * y el cursor contextual. Diseño: docs/DISENO.md §8. Comportamiento: assets/js/overlays.js,
 * galeria.js y cursor.js.
 *
 * Los dos overlays son <dialog> nativos abiertos con showModal(): el navegador bloquea el
 * fondo, atrapa el foco y cierra con Escape. El JavaScript sólo agrega la animación:
 * pone data-fase="abierto" para entrar y lo saca para salir (esperando la transición).
 * Cerrados, no se muestran (display: none del propio <dialog>), así que sus imágenes
 * lazy y su video no se descargan.
 *
 * Índice:
 *   1. Fondo bloqueado    4. Panel Explorar / Menú      7. Cursor contextual
 *   2. Botón cerrar       5. Galería y piezas
 *   3. Overlay del reel   6. Flechas de la galería
 */

/* ============================================================
   1. FONDO BLOQUEADO — mientras hay un overlay abierto la página de atrás no se mueve
   ============================================================ */
html.overlay-abierto {
  overflow: hidden;
  scrollbar-gutter: stable; /* que no salte el contenido al desaparecer la barra */
  background-color: var(--negro); /* en Windows queda una franja del ancho de la barra: del color del overlay */
}

/* Reinicio de los estilos que el navegador le pone a un <dialog> modal */
.panel,
.reel-overlay {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  inset: 0;
  overscroll-behavior: contain;
}

.panel::backdrop,
.reel-overlay::backdrop {
  background-color: rgba(23, 23, 23, 0.55);
  opacity: 0;
  transition: opacity calc(var(--d-reel-fundido) * 0.7) var(--curva-salida);
}

.panel[data-fase="abierto"]::backdrop,
.reel-overlay[data-fase="abierto"]::backdrop {
  opacity: 1;
  transition-duration: var(--d-reel-fundido);
}

/* ============================================================
   2. BOTÓN CERRAR — círculo de 44 px con ×, se invierte en hover y foco
   ============================================================ */
.cerrar,
.flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--radio-circulo);
  background: none;
  color: inherit;
  line-height: 1;
  transition:
    background-color var(--d-enlace) var(--curva-salida),
    color var(--d-enlace) var(--curva-salida),
    border-color var(--d-enlace) var(--curva-salida),
    opacity var(--d-enlace) var(--curva-salida);
}

.cerrar { font-size: 1.75rem; }
.flecha { font-size: 1.25rem; }

.cerrar:focus-visible,
.flecha:focus-visible {
  background-color: var(--texto);
  color: var(--fondo);
}

@media (hover: hover) {
  .cerrar:hover,
  .flecha:not([aria-disabled="true"]):hover {
    background-color: var(--texto);
    color: var(--fondo);
  }
}

/* «Deshabilitada» con aria-disabled y no con disabled: así, si se llega al final con el
   teclado, el foco se queda en la flecha en vez de perderse. */
.flecha[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* ============================================================
   3. OVERLAY DEL REEL — fondo oscuro, video 16:9 centrado, fundido de 300 ms
   ============================================================ */
.reel-overlay {
  opacity: 0;
  transition: opacity calc(var(--d-reel-fundido) * 0.7) var(--curva-salida);
}

.reel-overlay[data-fase="abierto"] {
  opacity: 1;
  transition-duration: var(--d-reel-fundido);
}

.reel-overlay[open] {
  display: grid;
  place-items: center;
  padding: var(--e-9) var(--margen) var(--e-6);
}

.reel-overlay__cerrar {
  position: absolute;
  top: var(--e-4);
  right: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
}

/* El video nunca se pasa de la pantalla: ancho limitado por el alto disponible */
.reel-overlay__video {
  width: min(100%, calc((100vh - 8rem) * 16 / 9));
  width: min(100%, calc((100svh - 8rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.reel-overlay__video video {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   4. PANEL EXPLORAR / MENÚ — pantalla completa que entra desde abajo (650 ms)
   Hasta 1023 px: navegación + galería (es el «Menú» del celular).
   Desde 1024 px: sólo la galería, centrada (la navegación ya está en la cabecera).
   ============================================================ */
.panel {
  transform: translateY(100%);
  /* Lo que sale dura un poco menos que lo que entra */
  transition: transform calc(var(--d-panel) * 0.7) var(--curva-salida);
  overflow-y: auto;
}

.panel[data-fase="abierto"] {
  transform: none;
  transition-duration: var(--d-panel);
}

.panel[open] {
  display: flex;
  flex-direction: column;
}

.panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: var(--alto-cabecera);
  border-bottom: 1px solid var(--regla);
}

.panel__nav {
  flex: none;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--regla);
}

.panel__enlace {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 3.25rem;
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: var(--peso-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}

@media (hover: hover) {
  .panel__enlace:hover { color: var(--texto-2); }
}

@media (min-width: 1024px) {
  .panel__nav { display: none; }
}

.panel__galeria {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-block: auto; /* centrada en el alto que sobra */
  padding-block: var(--e-4) var(--e-4);
}

.panel__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.galeria__flechas {
  display: flex;
  gap: var(--e-2);
}

/* ============================================================
   5. GALERÍA Y PIEZAS — scroll horizontal nativo con snap
   Sin JavaScript igual se desliza con el dedo, la rueda horizontal y el teclado.
   galeria.js le suma el arrastre con mouse (con inercia) y las flechas.
   ============================================================ */
/* ".panel" delante: le gana al reset de ul[role="list"] de base.css, que le sacaba el padding */
.panel .galeria__pista {
  display: flex;
  gap: var(--e-5);
  padding: 0 max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen))) var(--e-2);
  overflow-x: auto;
  overflow-y: hidden; /* las piezas entran subiendo desde abajo de este borde, como detrás de una máscara */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
  scrollbar-width: none; /* hay flechas; la barra sólo estorba */
}

.panel .galeria__pista::-webkit-scrollbar { display: none; }

/* Mientras se arrastra con el mouse: sin snap (si no pelea con el arrastre) y sin selección */
.panel .galeria__pista.arrastrando {
  scroll-snap-type: none;
  user-select: none;
  cursor: grabbing;
}

.pieza {
  position: relative; /* el link de la pieza se estira sobre toda la tarjeta */
  display: flex;
  flex: 0 0 80vw;
  flex-direction: column;
  gap: var(--e-3);
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .pieza { flex-basis: 45vw; }
}

/* ~36 vw: la tercera pieza queda cortada a propósito para invitar a arrastrar.
   Tope por alto de pantalla: la tarjeta (4:5) más sus textos (unos 325 px: cabecera, título de la galería,
   número, título, detalle y «Ver más») tienen que entrar sin scroll vertical; por eso se restan 21 rem. */
@media (min-width: 1024px) {
  .pieza {
    flex-basis: max(16rem, min(36vw, calc((100vh - 21rem) * 0.8)));
    flex-basis: max(16rem, min(36vw, calc((100svh - 21rem) * 0.8)));
  }
}

.pieza .medio { border-radius: 0; }

.pieza__numero {
  padding-top: var(--e-2);
  border-top: 1px solid var(--texto);
  text-align: right;
}

.pieza__titulo {
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
}

/* Lleva también la clase .enlace (subrayado que se dibuja de izquierda a derecha, 180 ms): como el ::after
   cubre la tarjeta, el :hover del link se activa al pasar el mouse por cualquier parte de ella. */
.pieza__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* zona táctil de 44 px; el ::after la extiende a toda la tarjeta */
}

/* El link cubre toda la tarjeta: el área clicable es grande y el nombre accesible es sólo el título */
.pieza__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pieza__detalle { color: var(--texto-2); }

.pieza__mas {
  font-size: var(--t-boton);
  font-weight: var(--peso-semibold);
}

/* Zoom del medio dentro de su marco cuando se pasa el mouse o se enfoca la pieza */
.pieza .medio > picture {
  transition: transform var(--d-medio-hover) var(--curva-salida);
}

@media (hover: hover) {
  .pieza:hover .medio > picture { transform: scale(var(--escala-medio-hover)); }
}

.pieza:focus-within .medio > picture { transform: scale(var(--escala-medio-hover)); }

/* Las imágenes no se "arrastran" como archivo: el arrastre es el de la galería */
.pieza img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Entrada: cada pieza aparece subiendo, con 70 ms de diferencia con la anterior */
.pieza {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity calc(var(--d-panel) * 0.7) var(--curva-salida),
    transform calc(var(--d-panel) * 0.7) var(--curva-salida);
}

.panel[data-fase="abierto"] .pieza {
  opacity: 1;
  transform: none;
  transition-duration: var(--d-panel);
  transition-delay: calc(120ms + var(--i, 0) * var(--desfase-panel));
}

/* ============================================================
   6. FLECHAS DE LA GALERÍA — sólo se muestran si hay algo más para ver
   ============================================================ */
.galeria--sin-desborde .galeria__flechas { visibility: hidden; }

/* ============================================================
   7. CURSOR CONTEXTUAL «Ver» / «Arrastrar» — sólo con mouse
   - 80 px de alto. «Ver» es un círculo; «Arrastrar», más largo, se ensancha y queda como píldora.
   - No reemplaza al cursor real, no bloquea clics y no existe en pantallas táctiles.
   - Sobre zonas claras: negro con texto papel. Sobre oscuras: papel con texto negro.
   cursor.js lo crea y lo mueve; acá sólo se define cómo se ve.
   La posición se maneja con la propiedad `translate` y la aparición con `scale`: así se
   componen bien (con `transform` + `scale`, el tamaño también achicaría el desplazamiento).
   ============================================================ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  height: 5rem;
  min-width: 5rem;
  padding-inline: 1.25rem;
  border-radius: var(--radio-pill);
  background-color: var(--negro);
  color: var(--papel);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--t-etiqueta-ls);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%; /* centrado sobre el mouse; cursor.js le suma la posición */
  opacity: 0;
  scale: 0.5;
  transition:
    opacity var(--d-enlace) var(--curva-salida),
    scale var(--d-circulo-reel) var(--curva-salida),
    background-color var(--d-enlace) var(--curva-salida),
    color var(--d-enlace) var(--curva-salida);
  will-change: translate;
}

.cursor--visible {
  opacity: 1;
  scale: 1;
}

.cursor--sobre-oscuro {
  background-color: var(--papel);
  color: var(--negro);
}