/* Visor de catálogos (/visor/<gama>/). Se apoya en styles.css y v2.css de la landing. */
html:has(.visor){scroll-padding-top:0} /* el hueco de cabecera y barra lo pone .visor-page */
.visor{--header:84px;--bar:64px;--accent:var(--red);background:#f2f2f0}
.visor-bar{position:sticky;top:var(--header);z-index:15;background:#fff;border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--accent)}
.visor-bar-inner{display:flex;align-items:center;gap:24px;min-height:var(--bar);padding:0 6%}
.visor-back{font-size:12px;white-space:nowrap;color:var(--muted)}
.visor-back:hover{color:#c00}
/* Gravity es cursiva: el padding deja sitio a la inclinación de la última letra, que si no
   recorta el overflow:hidden (necesario para los «…» cuando el nombre no cabe). */
.visor h1{font-size:30px;line-height:1.1;margin:0;min-width:0;padding:0 .2em .05em 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-pager{display:flex;align-items:center;gap:6px;margin-left:auto}
.visor-pager button{width:44px;height:44px;border:1px solid var(--line);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.visor-pager button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.visor-pager button:disabled{opacity:.35;cursor:default}
.visor-count{font-size:12px;font-weight:700;letter-spacing:.04em;min-width:118px;text-align:center;font-variant-numeric:tabular-nums}
.visor-download{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.visor-download span{font-weight:400;color:var(--muted)}
.visor-download:hover{color:#bd0000}

.visor-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.visor-icon:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.visor-pages--zoom .visor-page img{cursor:zoom-in}
/* Lupa: los controles de PhotoSwipe son blancos; con fondo oscuro se ven también sobre páginas blancas. */
.pswp__top-bar .pswp__button,.pswp__counter{background:#000000b3;border-radius:22px}
.pswp__top-bar .pswp__button{margin:6px 6px 0 0;width:44px;height:44px}
.pswp__counter{height:32px;line-height:32px;margin:12px 0 0 12px;padding:0 12px;opacity:1}
.pswp__button--arrow .pswp__icn{background:#000000b3;border-radius:50%}
.visor-mode{min-height:44px;padding:0 14px;border:1px solid var(--line);background:#fff;font:700 12px Inter,Arial,sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.visor-mode:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Libro: StPageFlip ocupa el 100 % de .visor-frame y calcula el alto según el ancho.
   El marco se limita para que la doble página (--spread = ancho/alto) quepa en pantalla;
   en móvil, una página sola (--single), que es cuando StPageFlip pasa a una página. */
.visor-stage{padding:28px 16px 48px;overflow:hidden}
.visor-frame{margin:0 auto;width:min(100%,calc((100vh - var(--header) - var(--bar) - 76px) * var(--spread)))}
.visor-book{min-width:0!important} /* StPageFlip copia minWidth al elemento; el tamaño lo manda .visor-frame */
.visor-stage--single .visor-frame{width:min(100%,calc((100vh - var(--header) - var(--bar) - 76px) * var(--single)))}
.visor-leaf{background:#fff}
.visor-leaf img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

.visor-pages{list-style:none;margin:0;padding:28px 16px 64px;display:grid;gap:28px;justify-items:center}
.visor-page{scroll-margin-top:calc(var(--header) + var(--bar) + 16px);max-width:1400px;width:100%;display:flex;justify-content:center}
/* --ratio (ancho/alto) viene de la plantilla: reserva el hueco antes de cargar la imagen
   y ajusta cada página a la altura de la pantalla. */
.visor-page img{display:block;aspect-ratio:var(--ratio);height:auto;width:min(100%,calc((100vh - var(--header) - var(--bar) - 56px) * var(--ratio)));background:#fff;box-shadow:0 6px 24px #0000001f}

@media(max-width:1100px){.visor-bar-inner{gap:16px;padding:0 4%}.visor h1{font-size:24px}}
@media(max-width:480px){.visor h1{display:none}.visor-pager{margin-left:0;margin-right:auto}}
@media(max-width:672px){.visor-frame{width:min(100%,calc((100vh - var(--header) - var(--bar) - 56px) * var(--single)))}}
@media(max-width:820px){.visor{--header:76px}.visor-back{display:none}}
@media(max-width:580px){
  .visor{--header:70px;--bar:56px}
  .visor-bar-inner{padding:0 16px;gap:10px}
  .visor h1{font-size:20px}
  .visor-label,.visor-download span{display:none}
  .visor-count{min-width:64px}
  .visor-pager button{width:40px;height:40px}
  .visor-download{font-size:0;gap:0;width:40px;height:40px;justify-content:center;border:1px solid var(--line)}
  .visor-download svg{width:18px;height:18px}
  .visor-mode{min-height:40px;padding:0 10px;font-size:11px}
  .visor-icon{width:40px;height:40px}
  .visor-stage{padding:16px 8px 32px}
  .visor-pages{padding:16px 0 40px;gap:16px}
  .visor-page img{width:100%}
}