/* ==========================================================================
   El libro: dos páginas, un lomo y una hoja que gira.
   Las medidas llegan desde `book.js` por variables CSS:
     --page-w  ancho de una página      --book-w  ancho del libro
     --page-h  alto de una página       --book-h  alto del libro
     --spine    posición del lomo (%)
     --leaf-w  ancho de la hoja        --leaf-left  borde izquierdo de la hoja
     --flip-ms duración de la animación
   ========================================================================== */

.book {
  position: relative;
  width: var(--book-w, 800px);
  height: var(--book-h, 560px);
  perspective: 2800px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  --total-scale-factor: 1;
}

/* --- Ranuras fijas: siempre muestran la vista de destino ---------------- */

.book__slot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--leaf-w, 50%);
  height: 100%;
  overflow: hidden;
  background: #fff;
  /* El canto exterior de la hoja, apenas un milímetro de papel. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.22),
    0 12px 28px -8px rgba(0, 0, 0, 0.4);
}

.book__slot--right {
  left: var(--leaf-left, 50%);
}

.book[data-mode='single'] .book__slot--left {
  display: none;
}

/* Portada: solo la página 1, centrada sobre el ancho del libro. La ranura
   derecha se desplaza media página a la izquierda (del 50% al 25%) sin
   cambiar su tamaño: la portada no se deforma. */
.book[data-cover='true'] .book__slot--left,
.book[data-cover='true'] .book__gutter {
  display: none;
}

.book[data-cover='true'] .book__slot--right {
  left: 25%;
}

/* Un hueco sin página no es papel: se ve el fondo del visor, sin sombra. */
.book__slot.is-empty {
  background: transparent;
  box-shadow: none;
}

.page.is-blank {
  background: transparent;
}

/* --- Lomo ---------------------------------------------------------------- */

.book__gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine, 50%);
  width: 34px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 30%,
    rgba(0, 0, 0, 0.3) 48%,
    rgba(0, 0, 0, 0.34) 52%,
    rgba(0, 0, 0, 0.06) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

.book[data-mode='single'] .book__gutter {
  display: none;
}

/* --- Hoja móvil ---------------------------------------------------------- */

.book__leaf {
  position: absolute;
  top: 0;
  left: var(--leaf-left, 50%);
  width: var(--leaf-w, 50%);
  height: 100%;
  /* El giro pivota sobre el lomo, que es el canto izquierdo de la hoja. */
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  /* En reposo la hoja es invisible: sus caras son blancas y opacas, y si se
     quedara visible taparía la página derecha aunque no tuviera nada dentro. */
  visibility: hidden;
  /* --lift se eleva mientras se arrastra con el dedo o el ratón. */
  --lift: 0px;
}

/* --- Hoja móvil: de una pieza, con su cara y su reverso ------------------ */

.book__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  /* Cada cara solo se ve desde su propio lado. */
  backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.book__face--back {
  transform: rotateY(180deg);
}

/* Sombra de la hoja mientras se agarra. */
.book.is-peeling .book__face {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.45);
}

/* --- Flechas para pasar página ---------------------------------------- */
/* Van dentro del libro para ir siempre pegadas a sus cantos, pero encima
   de todo (incluso de la hoja móvil). Solo salen al pasar el ratón por el
   visor; en táctil, donde no hay hover, se ven siempre tenues. */

.page-turn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 12px;
  background: rgba(10, 14, 22, 0.55);
  color: #e9ecf3;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s, background 0.15s;
}

.page-turn--prev {
  left: 8px;
}

.page-turn--next {
  right: 8px;
}

/* En doble página van un poco por fuera del papel, sin tapar el contenido;
   con una sola página (o la portada) van pegadas al canto, más cerca. */
.book[data-mode='spread']:not([data-cover='true']) .page-turn--prev {
  left: -20px;
}

.book[data-mode='spread']:not([data-cover='true']) .page-turn--next {
  right: -20px;
}

/* En la portada la página va centrada (ocupa del 25% al 75%): las flechas van
   a unos 12px de sus bordes, no de los del libro. */
.book[data-cover='true'] .page-turn--prev {
  left: calc(25% - 56px);
}

.book[data-cover='true'] .page-turn--next {
  right: calc(25% - 56px);
}

.stage:hover .page-turn:not(:disabled),
.page-turn:focus-visible {
  opacity: 1;
  visibility: visible;
}

.page-turn:hover:not(:disabled) {
  background: rgba(20, 28, 44, 0.85);
}

.page-turn:disabled {
  opacity: 0;
  visibility: hidden;
}

@media (hover: none) {
  .page-turn:not(:disabled) {
    opacity: 0.6;
    visibility: visible;
  }
}

/* Sombra que barre el libro mientras gira la hoja. */
.book__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.04) 42%,
    rgba(0, 0, 0, 0.04) 58%,
    rgba(0, 0, 0, 0.38) 100%
  );
}

.book.is-flipping .book__shade {
  animation: book-sweep var(--flip-ms, 620ms) ease-in-out;
}

@keyframes book-sweep {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book.is-flipping .book__shade {
    animation: none;
  }
  .book__leaf {
    transition: none !important;
  }
}

/* --- La página y su canvas ---------------------------------------------- */

.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.page__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Capa de texto y resaltado.
   Las reglas vienen de pdf.js (`web/pdf_viewer.css`): los fragmentos se
   colocan con `transform` y `--font-height`, y el color es transparente para
   que se vea el canvas de debajo.
   ========================================================================== */

.page {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor, 1) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.textLayer {
  position: absolute;
  inset: 0;
  overflow: clip;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 1;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x))
    scale(var(--min-font-size-inv));
}

.textLayer .markedContent {
  display: contents;
}

.textLayer span[role='img'] {
  user-select: none;
  cursor: default;
}

.textLayer ::selection {
  background: rgba(60, 130, 255, 0.35);
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
}

/* Resaltado del buscador: cajas calculadas con Range.getClientRects(). */
.highlights {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hl {
  position: absolute;
  border-radius: 3px;
  mix-blend-mode: multiply;
}

.hl--hit {
  background: rgba(255, 205, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(160, 120, 0, 0.3) inset;
}

.hl--current {
  background: rgba(255, 138, 0, 0.62);
  box-shadow: 0 0 0 1.5px rgba(150, 70, 0, 0.55) inset;
}