/* Revista (The Journal): listado y visor.
   Se carga solo en /revista (push de la vista), no entra en el bundle de app.css. */

/* Excepción de ancho SOLO para la banda del número destacado: con el container del
   sitio, la portada a 6 columnas queda desproporcionada frente al texto que va a su
   lado. La cabecera y la reja de números se quedan con el ancho normal.
   Doble clase para ganar a los max-width de .container de Bootstrap sin depender
   del orden de carga. */
.container.container-journal {
  max-width: 1000px;
}

.journal-viewer[hidden] {
  display: none;
}

.journal-viewer {
  position: fixed;
  inset: 0;
  z-index: 1080; /* por encima del header y de los modales de Bootstrap */
  display: flex;
  flex-direction: column;
  background: #0F0C0A;
}

body.journal-open {
  overflow: hidden;
}

.journal-viewer-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: #FFFAF4;
}

.journal-viewer-title {
  font-family: var(--primary-font);
  font-size: 1.1rem;
  line-height: 1.2;
}

.journal-viewer-btn {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #FFFAF4;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-time);
}

.journal-viewer-btn:hover,
.journal-viewer-btn:focus-visible {
  opacity: 1;
  color: var(--bs-secondary);
  background: rgba(255, 250, 244, 0.12);
}

.journal-viewer-actions {
  display: flex;
  gap: 0.25rem;
}

/* Escenario: la altura disponible manda, y el libro se ajusta a ella. */
.journal-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.journal-viewer-holder {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-width: 1500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La librería añade .stf__parent al propio div del libro. */
.journal-viewer-book {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* El envoltorio interno se queda sin estilos: la hoja que inyecta page-flip
   lo escribe como `.sft__wrapper` (typo suyo). Sin alto explícito, .stf__block
   (absolute, height 100%) mide 0 y el visor sale en blanco. */
.journal-viewer-book .stf__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.journal-page {
  background: #0F0C0A;
  overflow: hidden;
}

.journal-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* que el arrastre lo capture la página, no la imagen */
  -webkit-user-select: none;
  user-select: none;
}

.journal-viewer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.4rem 1rem 0.8rem;
  color: rgba(255, 250, 244, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* Flechas del pie: son las que se usan en móvil, donde las laterales estorban. */
.journal-viewer-nav-sm {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
}

/* Aviso de deslizar, solo táctil. Se va al primer pase de página. */
.journal-viewer-hint {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(232, 184, 116, 0.55);
  border-radius: 2.5rem;
  background: rgba(15, 12, 10, 0.85);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
  color: #FFFAF4;
  font-size: 1.15rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s;
}

.journal-viewer-hint[hidden] {
  display: none;
}

.journal-viewer-hint.is-out {
  opacity: 0;
}

.journal-viewer-hint i {
  font-size: 1.5rem;
  color: var(--bs-secondary);
  animation: journal-swipe 1.6s ease-in-out infinite;
}

@keyframes journal-swipe {
  0%, 100% { transform: translateX(0.45rem); }
  50% { transform: translateX(-0.45rem); }
}

@media (prefers-reduced-motion: reduce) {
  .journal-viewer-hint i { animation: none; }
}

@media (max-width: 991.98px) {
  /* Las flechas laterales comerían ancho de página: se pasan al pie. */
  .journal-viewer-nav {
    display: none;
  }
  .journal-viewer-nav-sm {
    display: inline-flex;
  }
  .journal-viewer-stage {
    padding: 0 0.25rem;
  }
  .journal-viewer-title {
    font-size: 0.95rem;
  }
}