/* ═══════════════════════════════════════════════════════════════════════════
   Lector de la biblioteca. Hereda los colores de sitio.css.
   La pantalla es del libro: cabecera de una línea, una barra y nada más.
   Media queries, todas al final.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El diálogo ───────────────────────────────────────────────────────────── */
.dialogo {
  width: min(100vw - 2rem, 86rem);
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: var(--hondo);
  color: var(--nieve);
  overflow: hidden;
}
.dialogo::backdrop {
  background: rgba(7, 24, 35, 0.85);
  backdrop-filter: blur(4px);
}
.dialogo__cuerpo { max-height: calc(100vh - 2rem); overflow: hidden; }
.dialogo__cargando {
  margin: 0;
  padding: 4rem 2rem;
  text-align: center;
  color: rgba(248, 250, 252, 0.7);
}

/* ── Armazón del lector ───────────────────────────────────────────────────── */
.lector {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--hondo);
  color: var(--nieve);
}

.lector__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lector__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-l);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  /* Un título largo no puede empujar los botones fuera de la pantalla. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lector__acciones { display: flex; gap: 0.4rem; flex: 0 0 auto; }

/* ── Botones de icono ─────────────────────────────────────────────────────── */
.icono {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.2);
  background: rgba(248, 250, 252, 0.07);
  color: var(--nieve);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.icono svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icono:hover { background: rgba(1, 157, 244, 0.28); border-color: var(--azul); }
.icono:active { transform: translateY(1px); }
.icono[disabled] { opacity: 0.3; cursor: not-allowed; transform: none; }
.icono--activo { background: var(--accion); border-color: var(--accion); }
.icono--cerrar:hover { background: rgba(196, 22, 28, 0.35); border-color: #E0555A; }

/* ── El libro ─────────────────────────────────────────────────────────────── */
.libro {
  --giro: 0;
  position: relative;
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* La perspectiva convierte el giro en una hoja y no en un plano que se
     encoge. */
  perspective: 2400px;
  background: var(--hondo-2);
  border-radius: var(--radio-chico);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  /* El scroll vertical se lo queda el navegador; el horizontal, el libro. Sin
     esto, en el teléfono el gesto de pasar página se lo lleva la página. */
  touch-action: pan-y;
  cursor: grab;
}
.libro--arrastrando { cursor: grabbing; }
/* Solo se anima el número cuando pasa página sola; arrastrando lo mueve el
   dedo y una transición aquí iría a rastras del gesto. */
.libro--animando { transition: --giro 0.78s cubic-bezier(0.34, 0.07, 0.2, 1); }

.libro__hoja {
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.libro__hoja img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
}
.libro__hoja--izquierda { box-shadow: inset -18px 0 26px -18px rgba(0, 0, 0, 0.45); }
.libro__hoja--derecha { box-shadow: inset 18px 0 26px -18px rgba(0, 0, 0, 0.45); }

.libro__lomo {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(11, 39, 57, 0.4);
  z-index: 3;
  pointer-events: none;
}

/* --giro va de 0 a 1 según lo doblada que esté la hoja. Lo escribe el guion en
   cada fotograma del arrastre, y en el giro por clic lo anima el navegador
   gracias a @property. Las sombras cuelgan de ese número. */
@property --giro {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.libro__giro {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  /* Sale con peso y entra frenando, como una hoja de papel que cae. */
  transition: transform 0.78s cubic-bezier(0.34, 0.07, 0.2, 1);
  z-index: 4;
  display: none;
  pointer-events: none;
}
.libro__giro[data-activa="si"] { display: block; }

/* La sombra que la hoja levantada proyecta sobre la página de debajo. Cuelga
   de --giro, que vive en .libro y heredan todas las piezas. */
.libro__hoja::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--giro) * 0.8);
  transition: opacity 0.12s linear;
}
.libro__hoja--derecha::after {
  background: linear-gradient(to right, rgba(11, 39, 57, 0.6), rgba(11, 39, 57, 0) 55%);
}
.libro__hoja--izquierda::after {
  background: linear-gradient(to left, rgba(11, 39, 57, 0.35), rgba(11, 39, 57, 0) 55%);
}

.libro__cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}
.libro__cara img { width: 100%; height: 100%; object-fit: contain; }
.libro__cara--reverso { transform: rotateY(180deg); }

/* El papel no es plano cuando gira: se oscurece hacia el lomo y coge brillo al
   ponerse de canto. Es lo que quita la sensación de cartón rígido. */
.libro__cara::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.libro__cara--frente::after {
  background: linear-gradient(to left,
    rgba(11, 39, 57, 0) 55%, rgba(11, 39, 57, 0.4) 100%);
  opacity: var(--giro);
}
.libro__cara--reverso::after {
  background: linear-gradient(to right,
    rgba(11, 39, 57, 0) 55%, rgba(11, 39, 57, 0.45) 100%);
  opacity: calc(1 - var(--giro));
}

/* Cantos: en un libro se pasa hoja tocando el borde. */
.libro__zona {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 39, 57, 0.18);
  background: rgba(248, 250, 252, 0.88);
  color: var(--hondo);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.libro__zona svg {
  width: 1.3rem; height: 1.3rem;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.libro__zona--anterior { left: 0.75rem; }
.libro__zona--siguiente { right: 0.75rem; }
.libro:hover .libro__zona { opacity: 1; }
.libro__zona:hover { background: #fff; }
.libro__zona:focus-visible { opacity: 1; outline: 2px solid var(--azul); outline-offset: 2px; }
.libro__zona[disabled] { opacity: 0 !important; pointer-events: none; }

/* ── Barra ────────────────────────────────────────────────────────────────── */
.barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: center;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(248, 250, 252, 0.12);
}
.barra__marcador {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-s);
  color: rgba(248, 250, 252, 0.8);
  padding-inline: 0.3rem;
}
.barra__marcador input {
  width: 3.2rem;
  font-family: var(--fuente-texto);
  font-size: var(--t-s);
  text-align: center;
  color: var(--nieve);
  background: rgba(248, 250, 252, 0.09);
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: 999px;
  padding: 0.3rem 0.4rem;
  -moz-appearance: textfield;
}
.barra__marcador input::-webkit-outer-spin-button,
.barra__marcador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.barra__marcador input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(1, 157, 244, 0.25);
}
.barra__total { color: rgba(248, 250, 252, 0.55); }

/* ── Miniaturas, solo cuando se piden ─────────────────────────────────────── */
.tira {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.tira__pagina {
  flex: 0 0 auto;
  width: 3.4rem;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tira__pagina img { width: 100%; height: auto; display: block; }
.tira__pagina:hover { transform: translateY(-2px); border-color: rgba(1, 157, 244, 0.6); }
.tira__pagina[aria-current="true"] { border-color: var(--azul); }

/* ── La página del documento (respaldo del diálogo) ───────────────────────── */
.pagina-lector { background: var(--hondo); min-height: 100vh; padding-block: 1rem 2rem; }
.pagina-lector .miga { margin-bottom: 0.5rem; width: min(100% - 2rem, 78rem); margin-inline: auto; }
.pagina-lector .lector { width: min(100% - 2rem, 78rem); margin-inline: auto; }
.pagina-lector .libro { height: min(72vh, 42rem); }

.miga {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
}
.miga a { color: var(--azul-claro); text-decoration: none; }
.miga a:hover { text-decoration: underline; }

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dentro del diálogo el libro llena lo que dejan la cabecera y la barra. */
.dialogo__cuerpo .libro { height: min(76vh, 46rem); }

/* ── Modo grande ──────────────────────────────────────────────────────────
   Una clase, no la Fullscreen API: así funciona también en el iPhone y dentro
   de un diálogo. Si además el navegador concede pantalla completa de verdad,
   se suma; si no, esto ya ocupa todo. */
.expandido {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: var(--hondo);
}
.expandido .dialogo__cuerpo,
.expandido.pagina-lector { height: 100dvh; max-height: 100dvh; padding: 0; }
.expandido .lector {
  height: 100dvh;
  width: min(100%, 100rem);
  margin-inline: auto;
  padding: clamp(0.7rem, 1.6vw, 1.2rem);
  gap: 0.7rem;
}
.expandido .libro { height: auto; flex: 1; min-height: 0; }
.expandido .miga { display: none; }

html.sin-scroll { overflow: hidden; }

/* ── Pantallas pequeñas ───────────────────────────────────────────────────── */
@media (max-width: 52rem) {
  /* Una sola página: en un teléfono, dos páginas se leen con lupa. */
  .libro { grid-template-columns: 1fr; }
  .libro__hoja--izquierda { display: none; }
  .libro__lomo { display: none; }
  .libro__giro { width: 100%; }

  /* El diálogo ocupa el teléfono entero y el libro casi todo el alto. */
  .dialogo { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .dialogo__cuerpo { max-height: 100dvh; height: 100dvh; }
  .dialogo__cuerpo .lector { height: 100dvh; padding: 0.7rem; gap: 0.6rem; }
  .dialogo__cuerpo .libro { height: auto; flex: 1; min-height: 0; }

  .lector__titulo { font-size: var(--t-m); }
  .icono { width: 2.6rem; height: 2.6rem; }   /* dedos, no ratón */

  /* Los cantos se ven siempre: en táctil no hay hover que los revele. */
  .libro__zona { opacity: 1; width: 2.5rem; height: 2.5rem; background: rgba(248, 250, 252, 0.8); }
  .libro__zona--anterior { left: 0.5rem; }
  .libro__zona--siguiente { right: 0.5rem; }

  .barra { width: 100%; justify-content: space-between; border-radius: var(--radio-boton); }
  .tira__pagina { width: 3rem; }

  .pagina-lector { padding-block: 0.7rem 1rem; }
  .pagina-lector .lector, .pagina-lector .miga { width: calc(100% - 1.4rem); }
  .pagina-lector .libro { height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .libro__giro { transition: none; }
}