/* =====================================================================
   RV25 Relojería · VISOR DE FOTOS (pantalla completa)
   ---------------------------------------------------------------------
   Fondo azul noche, la foto lo más grande posible y deslizable de lado.
   Lo crea y maneja js/componentes/visor-fotos.js
   ===================================================================== */

.visor {
  position: fixed; inset: 0; z-index: 60;
  background: var(--noche);
  color: var(--fondo);
  animation: visor-entra .25s ease;
}
.visor[hidden] { display: none; }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

/* La página de atrás no se mueve mientras el visor está abierto */
html.con-visor, html.con-visor body { overflow: hidden; }

/* --- Pista deslizable: una foto por pantalla --- */
.visor-pista {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.visor-pista::-webkit-scrollbar { display: none; }

/* Cada foto ocupa la pantalla menos el espacio del × (arriba) y del
   contador (abajo). La imagen se estira a esa caja y object-fit: contain
   la muestra completa sin deformarla, sea vertical u horizontal. */
.visor-foto {
  position: relative;
  flex: 0 0 100%; margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
}
.visor-foto img {
  position: absolute; left: 0; right: 0;
  top: calc(64px + env(safe-area-inset-top, 0px));
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  width: 100%; height: calc(100% - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-width: none;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  user-select: none; -webkit-user-drag: none;
}
/* Ampliada: el dedo o el mouse recorren la foto (ver visor-fotos.js) */
.visor-foto img.con-zoom { transform: scale(2.2); cursor: zoom-out; touch-action: none; }
.visor-foto img.arrastrando { transition: none; }

/* Mientras hay zoom, deslizar no cambia de foto */
.visor.con-zoom .visor-pista { overflow-x: hidden; }

/* --- Controles --- */
.visor-cerrar {
  position: absolute; z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: var(--noche-superficie); color: var(--fondo);
  font: 400 30px/1 var(--letra);
  cursor: pointer;
}

.visor-flecha {
  position: absolute; top: 50%; z-index: 2;
  width: 52px; height: 52px; margin-top: -26px;
  border: 0; border-radius: 50%;
  background: var(--noche-superficie); color: var(--fondo);
  font: 400 34px/1 var(--letra);
  cursor: pointer;
  display: none;                     /* en celular se desliza con el dedo */
}
.visor-anterior  { left: calc(16px + env(safe-area-inset-left, 0px)); }
.visor-siguiente { right: calc(16px + env(safe-area-inset-right, 0px)); }
.visor-cerrar:hover, .visor-flecha:hover { background: var(--acento-texto); }

.visor-contador {
  position: absolute; left: 0; right: 0; z-index: 2;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font: 500 15px/1 var(--letra);
  color: var(--tinta-sobre-noche);
  pointer-events: none;
}

@media (min-width: 1040px) {
  .visor-flecha { display: block; }
  .visor-flecha[hidden] { display: none; }
}