/* ============================================================
   REVISTA DIGITAL — visor flipbook interactivo
   ============================================================ */

.reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(8, 8, 9, 0.96);
  display: none;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: contain;
}
.reader-overlay.open { display: flex; }

.reader-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reader-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.reader-title b {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
  white-space: nowrap;
}
.reader-title span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.reader-page-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reader-icon-btn {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center;
  color: #d7d7da;
  transition: background 0.15s, color 0.15s;
}
.reader-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.reader-icon-btn svg { width: 19px; height: 19px; }

.reader-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0 4px;
}
.reader-zoom-level {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reader-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 18px 70px 30px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.reader-flip-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  transform-origin: center center;
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}

/* Ventana de recorte: su ancho se anima al centrar una pagina final suelta
   (ver adjustSoloTrailingPage en flipbook.js). #flipbookEl adentro SIEMPRE
   mide el ancho completo del spread — page-flip nunca se entera del recorte,
   asi que el canvas no se reescala ni se distorsiona, solo queda tapada la
   mitad vacia. */
#flipbookCrop {
  position: relative;
  overflow: hidden;
  transition: width 0.25s ease;
}

#flipbookEl { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transition: transform 0.25s ease; transform-origin: top left; }
#flipbookEl img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.reader-hotspots { transition: transform 0.25s ease; }

.reader-pdf-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
.reader-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.reader-pdf-page > span {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: #777;
  background: #fff;
  font: 600 12px var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reader-pdf-page.is-loading > span,
.reader-pdf-page.has-error > span { display: grid; }
.reader-pdf-page.has-error > span { color: var(--red); }

.reader-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background 0.15s;
  z-index: 3;
}
.reader-nav:hover { background: rgba(255, 255, 255, 0.18); }
.reader-nav[disabled] { opacity: 0.25; pointer-events: none; }
.reader-nav svg { width: 20px; height: 20px; }
.reader-nav--prev { left: 14px; }
.reader-nav--next { right: 14px; }

.reader-hotspots {
  position: absolute;
  pointer-events: none;
}
.reader-hotspot {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Hipervinculo: la imagen de la revista ES el boton — no se ve una caja
   encima del diseño original. Lo único que delata que hay algo interactivo
   es una marca discreta en la esquina (un pequeño circulo translucido con
   una flechita), casi invisible en reposo, que se enciende del todo al
   pasar el mouse — igual que un "punto caliente" en un mapa interactivo. */
.reader-hotspot--link {
  border-radius: 6px;
  transition: background 0.18s ease;
}
.reader-hotspot--link::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151719' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  opacity: 0.32;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.reader-hotspot--link:hover {
  background: rgba(204, 34, 40, 0.13);
}
.reader-hotspot--link:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Boton: se ve como un boton real pegado sobre la pagina, con un poco mas
   de profundidad y un pequeño indicador de accion para que se lea como un
   elemento de interfaz, no como un rotulo pegado encima de la foto. */
.reader-hotspot--button {
  border-radius: 999px;
  background: linear-gradient(155deg, var(--red) 0%, var(--red-deep, #9A141A) 100%);
  box-shadow: 0 8px 22px -4px rgba(154, 20, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  gap: 8px;
  transition: transform 0.16s cubic-bezier(.22,1,.36,1), box-shadow 0.16s ease, background 0.16s ease;
}
.reader-hotspot--button:hover {
  background: linear-gradient(155deg, #e0272d 0%, var(--red-deep, #9A141A) 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px -4px rgba(154, 20, 26, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.reader-hotspot-btn-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  font-size: clamp(11px, 1.4vw, 16px);
  padding: 0 6px;
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
}
.reader-hotspot--button::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(12px, 1.6vw, 16px);
  height: clamp(12px, 1.6vw, 16px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 2px;
  opacity: 0.9;
}

/* Video: miniatura oscurecida + boton de reproducir */
.reader-hotspot--video {
  border-radius: 8px;
  background-color: rgba(10, 10, 12, 0.55);
  background-blend-mode: darken;
  overflow: hidden;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  flex-direction: column;
  transition: box-shadow 0.18s ease;
}
.reader-hotspot--video:hover { box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.6); }
.reader-hotspot-play {
  width: clamp(28px, 20%, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--red) 0%, var(--red-deep, #9A141A) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s;
  pointer-events: none;
}
.reader-hotspot--video:hover .reader-hotspot-play { transform: scale(1.1); }
.reader-hotspot-play svg { width: 45%; height: 45%; fill: #fff; margin-left: 8%; }
.reader-hotspot-vcap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
  font-size: clamp(9px, 1.1vw, 12.5px);
  font-weight: 600;
  padding: 12px 8px 6px;
  text-align: center;
  pointer-events: none;
}

.reader-loading {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

@media (max-width: 760px) {
  .reader-topbar { min-height: 58px; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .reader-title b { font-size: 15px; }
  .reader-tools { gap: 2px; }
  .reader-icon-btn { width: 42px; height: 42px; }
  .reader-page-count { font-size: 12px; padding: 0 5px; }
  .reader-zoom { border: 0; margin: 0; padding: 0; }
  .reader-zoom-level { display: none; }
  .reader-stage { align-items: center; padding: 6px 6px calc(66px + env(safe-area-inset-bottom)); }
  .reader-nav { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: 48px; height: 48px; transform: none; background: rgba(255,255,255,.14); }
  .reader-nav--prev { left: calc(50% - 58px); }
  .reader-nav--next { right: calc(50% - 58px); }
  .reader-title span { display: none; }
}

@media (max-width: 390px) {
  .reader-title b { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .reader-page-count { min-width: 44px; text-align: center; }
  #readerFullscreen { display: none; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .reader-stage { padding: 14px 58px 24px; }
  .reader-nav--prev { left: 7px; }
  .reader-nav--next { right: 7px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .reader-topbar { min-height: 48px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .reader-stage { padding-top: 4px; padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .reader-nav { width: 42px; height: 42px; bottom: max(5px, env(safe-area-inset-bottom)); }
}