/* ==========================================================================
   MP Travel Services — Visor de imágenes
   --------------------------------------------------------------------------
   La capa que abre una foto a pantalla completa, con zoom y arrastre.

   La cargan `paquetes.html` y `galeria.html`. Es la misma pieza para las dos:
   en los paquetes el precio y las fechas van escritos dentro del flyer en
   letra chica, y en la galería lo que se quiere es ver la foto grande. En los
   dos casos hace falta lo mismo —abrir, acercar, mover— así que el visor está
   acá y no dentro de uno de los dos.

   Quién lo abre: cualquier botón con la clase `.abre-visor`. Lo demás se lo
   dice por atributos `data-` (ver `js/publico.js`).

   Los tokens, el vidrio y los botones vienen de `base.css`.
   ========================================================================== */

/* La imagen es un botón: se le quita todo el aspecto de botón, pero se le deja
   el foco visible —con teclado tiene que verse dónde se está parado—. */
.abre-visor{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;
}

.abre-visor:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* El visor es una columna: el marco de la imagen se queda con todo el alto
   que sobra y el pie ocupa el suyo, debajo y nunca encima.
   Antes era `display:grid` con el marco centrado y el pie flotando pegado al
   borde inferior de la pantalla: en celular ese pie —título, ayuda y botón,
   repartidos en dos o tres líneas— tapaba la franja de abajo del flyer, que
   es justo donde van las fechas y el precio. La imagen se veía cortada.

   OJO con el orden: `.visor{display:flex}` le gana por especificidad al
   `[hidden]{display:none}` del navegador, así que sin la regla de abajo el
   visor se ve siempre —telón, botón de cerrar y todo— sobre la página. */
.visor{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column}

.visor[hidden]{display:none}

/* Tinta, no negro neutro: es el mismo color del texto del sitio con mucha
   opacidad, así que el telón se lee como parte de la misma paleta. Queda un 8%
   de transparencia a propósito —se adivina la página de atrás y se entiende
   que esto es una capa encima, no otra pantalla—. */
.visor-fondo{position:absolute;inset:0;background:rgba(23,40,45,.93)}

body.visor-abierto{overflow:hidden}

/* `min-height:0` es lo que deja al marco encogerse: sin eso un flyer alto lo
   estira por debajo del pie y vuelve el recorte por otro lado. */
.visor-marco{
  position:relative;z-index:1;
  flex:1 1 auto;min-height:0;
  width:100%;max-width:1100px;margin:0 auto;
  overflow:hidden;
  cursor:zoom-in;touch-action:none; /* el pellizco y el arrastre los maneja el JS */
}

/* ESTE ES EL ARREGLO DEL RECORTE, y conviene dejarlo explicado porque el
   síntoma no apunta para nada a la causa.

   La imagen se limita con `max-width:100%` y `max-height:100%`. Un porcentaje
   se mide siempre contra la caja de arriba, y ahí estaba el problema: el marco
   era `display:grid`, y en una rejilla la caja de referencia no es el
   contenedor sino la CELDA, que al ser automática crece hasta donde crezca su
   contenido. O sea que el tope de alto se medía contra la propia imagen: un
   flyer vertical se estiraba más allá del marco y el `overflow:hidden` le
   cortaba la cabeza y los pies —justo donde va el precio—.

   Con `display:flex` la referencia sí es el contenedor, y este lienzo tiene
   alto conocido porque va absoluto con los cuatro lados fijados. Los cuatro
   márgenes, de paso, le dejan su esquina al botón de cerrar. */
.visor-lienzo{
  position:absolute;top:72px;right:var(--space-4);bottom:var(--space-2);left:var(--space-4);
  display:flex;align-items:center;justify-content:center;
}

.visor-marco.acercado{cursor:grab}

.visor-marco.acercado:active{cursor:grabbing}

/* Mientras dura el gesto la transición estorba: el pellizco tiene que seguir
   a los dedos, no llegar dos cuadros tarde. */
.visor-marco.gesto img{transition:none}

/* `object-fit:contain` es el cinturón de seguridad: la imagen ya entra entera
   por las dos medidas máximas, pero si alguna regla futura le fija un tamaño,
   con esto se sigue viendo completa en vez de recortarse. */
.visor-marco img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:var(--r-md);
  transform-origin:center;
  transition:transform .18s var(--ease-out);
  user-select:none;-webkit-user-drag:none;
}

.visor-cerrar{
  position:absolute;top:16px;right:16px;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:0;border-radius:50%;
  color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease-out);
}

.visor-cerrar:hover{background:rgba(255,255,255,.25)}

.visor-cerrar:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Ya no va flotando sobre la imagen: es la fila de abajo de la columna. */
.visor-pie{
  position:relative;z-index:2;flex:0 0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-3) var(--space-5);
  padding:var(--space-3) var(--space-4) var(--space-4);
  text-align:center;
}

.visor-titulo{
  color:#fff;font-size:.88rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}

.visor-ayuda{color:rgba(255,255,255,.6);font-size:.84rem}

.visor-pie .btn{background:#fff;color:var(--text);border-color:#fff}

.visor-pie .btn:hover{background:#fff;opacity:.88}

@media (max-width:560px){
  .visor-lienzo{top:64px;right:var(--space-2);left:var(--space-2)}
  .visor-pie{gap:var(--space-2) var(--space-4)}
}

@media (prefers-reduced-motion:reduce){
  .visor-marco img{transition:none}
}