/* =========================================================
   Visor de fotos (lightbox) reutilizable · va con js/visor.js
   Disparadores: [data-visor="grupo"]. El visor es un <dialog> modal a pantalla completa.
   ========================================================= */

/* ---------- Disparadores: cursor de zoom + indicador al hover ---------- */
[data-visor] { cursor: zoom-in; }
a[data-visor], button[data-visor], [data-visor][role="button"] { position: relative; display: block; }
a[data-visor]::after, button[data-visor]::after, [data-visor][role="button"]::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .92) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231F1A15' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M16.5 3.266c.844-.012 3.64-.593 4.234 0s.012 3.39 0 4.234m-.228-4.009l-7.004 7.005M3.266 16.5c-.012.845-.593 3.641 0 4.234s3.39.012 4.234 0m3.002-7.236l-7.004 7.005'/%3E%3C/svg%3E");
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  opacity: 0; transform: scale(.85); transition: opacity .25s var(--curva-hover, ease), transform .25s var(--curva-hover, ease); pointer-events: none;
}
a[data-visor]:hover::after, button[data-visor]:hover::after, [data-visor][role="button"]:hover::after,
a[data-visor]:focus-visible::after, button[data-visor]:focus-visible::after, [data-visor][role="button"]:focus-visible::after { opacity: 1; transform: none; }
/* En pantallas táctiles (sin hover) el indicador queda visible, más pequeño */
@media (hover: none) {
  a[data-visor]::after, button[data-visor]::after, [data-visor][role="button"]::after { width: 30px; height: 30px; top: 10px; right: 10px; background-size: 15px; opacity: .9; transform: none; }
}

/* ---------- Bloqueo del scroll de la página mientras está abierto ---------- */
html.visor-abierto { overflow: hidden; scrollbar-gutter: stable; }

/* ---------- Visor ---------- */
.visor {
  --visor-fondo: rgba(16, 12, 9, .96);
  /* 100vw/100dvh (no inset: 0) para cubrir también el canal de la barra de scroll que queda reservado */
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--visor-fondo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; overflow: hidden; overscroll-behavior: contain;
  opacity: 0; transition: opacity .22s var(--curva, ease);
}
.visor[open] { display: grid; }
.visor.es-visible { opacity: 1; }
.visor::backdrop { background: transparent; }

.visor__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 12px; }
.visor__contador { margin: 0; padding-left: 4px; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }

.visor__escenario { display: flex; align-items: center; justify-content: center; min-height: 0; height: 100%; padding: 0 104px; touch-action: pan-y pinch-zoom; }
.visor__img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 6px; user-select: none; -webkit-user-drag: none; cursor: default;
  transform: scale(.97); transition: opacity .3s var(--curva, ease), transform .45s var(--curva, ease);
}
.visor.es-visible .visor__img { transform: none; }
/* Cambio de foto: sale hacia un lado y entra desde el otro */
.visor .visor__img.es-salida { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); transition-duration: .16s; }
.visor .visor__img.es-entrada { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); transition: none; }
.visor .visor__img.es-arrastre { transition: none; }

.visor__pie { margin: 0; min-height: 76px; padding: 14px 96px 22px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .92); text-wrap: balance; }

.visor__boton { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s var(--curva-hover, ease); }
.visor__boton:hover { background: rgba(255, 255, 255, .2); }
.visor__boton:focus-visible { outline: 2px solid #F0C38A; outline-offset: 3px; }
.visor__boton svg { width: 24px; height: 24px; }
.visor__cerrar { width: 44px; height: 44px; }
.visor__flecha { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.visor__flecha svg { width: 26px; height: 26px; }
.visor__flecha--ant { left: 28px; }
.visor__flecha--sig { right: 28px; }
.visor__flecha[hidden] { display: none; }
.visor--una .visor__escenario { padding-inline: 24px; }
.visor--una .visor__pie { padding-inline: 24px; }

.visor__anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Móvil: foto a todo el ancho, flechas abajo junto al pie ---------- */
@media (max-width: 700px) {
  .visor__barra { padding: 10px 10px 8px 16px; }
  .visor__escenario { padding: 0; }
  .visor__img { border-radius: 0; }
  .visor__pie { min-height: 88px; padding: 12px 72px calc(16px + env(safe-area-inset-bottom)); font-size: 14.5px; }
  .visor__flecha { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); width: 48px; height: 48px; margin-top: 0; }
  .visor__flecha svg { width: 24px; height: 24px; }
  .visor__flecha--ant { left: 12px; }
  .visor__flecha--sig { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .visor, .visor__img, a[data-visor]::after, button[data-visor]::after, [data-visor][role="button"]::after { transition: none !important; }
  .visor__img, .visor .visor__img.es-salida, .visor .visor__img.es-entrada { transform: none; }
}