/* Catalogue loupe like the review link (S25, S26; catalogo-lupa.js). The loupe canvas itself is
   .lupa in site.css, shared with the fabric sheets; the catalogue one is round and fixed. */
.book.is-lupa { cursor: crosshair; }
.book.is-lupa-mode { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

.lupa--hoja {
  /* Round, centred on the pointer; fixed to the viewport so it stays inside the screen. */
  position: fixed; z-index: 60; border-radius: 50%;
}

.book-lupa-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  margin-top: 1rem; text-align: center;
}
.book-lupa-hint { margin: 0; max-width: 34rem; font-size: .9rem; color: var(--ink-muted); }

/* S25/S29: the "Lupa" button is on every screen, mouse included, and comes pressed by default. */
.book-lupa { padding: .7rem 1.1rem; }
.book-lupa[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }

/* S26: on computers, "Atrás"/"Siguiente" also sit at both sides of the book (the ones below stay).
   They live in the wrap's side padding, never over the pages, so the loupe keeps working under
   every part of a visible sheet page. */
.book-side {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  display: none; min-width: 2.4rem; min-height: 3.4rem; padding: 0;
  font-size: 1.7rem; line-height: 1;
}
.book-side--prev { left: clamp(.2rem, 1vw, .7rem); }
.book-side--next { right: clamp(.2rem, 1vw, .7rem); }
@media (hover: hover) and (pointer: fine) {
  .book-side { display: inline-flex; }
  .book-wrap { padding-inline: clamp(2.9rem, 4vw, 3.6rem); }
}