:root {
  --reader-bg: #0f171b;
  --reader-panel: rgba(13, 22, 27, .92);
  --reader-text: #f5f7f8;
  --reader-muted: #9aabb2;
  --reader-accent: #28afb3;
  --reader-control: rgba(255,255,255,.075);
  --reader-control-hover: rgba(255,255,255,.14);
  --topbar-h: 56px;
  --bottombar-h: 42px;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--reader-bg); }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }

.reader-body {
  color:var(--reader-text);
  font-family:Arial,Helvetica,sans-serif;
  user-select:none;
}

.reader-shell {
  width:100vw;
  height:100dvh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, #334047 0%, #1b272d 37%, #0f171b 78%),
    var(--reader-bg);
}

.reader-topbar,
.reader-bottombar {
  position:absolute;
  z-index:60;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  color:var(--reader-text);
  background:var(--reader-panel);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.reader-topbar {
  top:0;
  height:var(--topbar-h);
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.reader-bottombar {
  bottom:0;
  height:var(--bottombar-h);
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.065);
}

.reader-topbar-left,
.reader-actions {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.reader-publication {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-left:3px;
}

.reader-publication strong {
  max-width:42vw;
  overflow:hidden;
  color:#fff;
  font-size:.91rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.reader-publication span {
  margin-top:2px;
  color:var(--reader-muted);
  font-size:.69rem;
  white-space:nowrap;
}

.reader-icon-button,
.reader-zoom-value {
  height:38px;
  border:0;
  border-radius:7px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--reader-control);
  color:var(--reader-text);
  cursor:pointer;
  text-decoration:none;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}

.reader-icon-button { width:38px; }
.reader-zoom-value { min-width:52px; padding:0 8px; font-size:.72rem; }
.reader-icon-button:hover,.reader-zoom-value:hover { background:var(--reader-control-hover); color:#fff; }
.reader-icon-button:active { transform:scale(.94); }
.reader-action-separator { width:1px; height:24px; margin:0 2px; background:rgba(255,255,255,.1); }

.reader-stage {
  position:absolute;
  inset:var(--topbar-h) 0 var(--bottombar-h);
  overflow:hidden;
}

.pages-viewport {
  position:absolute;
  inset:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}

.pages-viewport::-webkit-scrollbar { width:8px; height:8px; }
.pages-viewport::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:8px; }

.zoom-space {
  position:relative;
  min-width:100%;
  min-height:100%;
  display:block;
}

.book-scale {
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:0 0;
  will-change:transform;
}

.pageflip-book {
  position:relative;
  width:100%;
  height:100%;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.38));
}

.reading-layer {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  background:transparent;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.38));
}

.reading-page {
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

.reading-page + .reading-page {
  box-shadow:-1px 0 0 rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08);
}

.reading-page img {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  background:#fff;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}

.magazine-page {
  position:relative;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

.magazine-page::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:linear-gradient(90deg, rgba(0,0,0,.08), transparent 7%, transparent 92%, rgba(0,0,0,.05));
}

.magazine-page img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}

/* StPageFlip genera contenedores propios. Estas reglas hacen que la hoja conserve
   un borde limpio y que la sombra del pliegue no ensucie la tipografía. */
.stf__parent { margin:auto !important; }
.stf__block { background:transparent !important; }
.stf__item { background:#fff; }

.pan-capture {
  position:absolute;
  inset:0;
  z-index:45;
  display:none;
  cursor:grab;
  touch-action:none;
}

.reader-stage.is-zoomed .pan-capture { display:block; }
.reader-stage.is-panning .pan-capture { cursor:grabbing; }
.reader-stage.is-page-gesture .pan-capture { cursor:ew-resize; }

.reader-nav {
  position:absolute;
  z-index:50;
  top:50%;
  width:48px;
  height:80px;
  border:0;
  border-radius:10px;
  background:rgba(4,10,13,.42);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  transform:translateY(-50%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,opacity .18s ease,color .18s ease,transform .18s ease;
}

.reader-nav:hover { background:rgba(40,175,179,.28); color:#fff; }
.reader-nav:active { transform:translateY(-50%) scale(.95); }
.reader-nav:disabled,.reader-page-status button:disabled { opacity:.18; cursor:default; }
.reader-nav-prev { left:14px; }
.reader-nav-next { right:14px; }

.reader-drag-hint {
  position:absolute;
  z-index:48;
  left:50%;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.36);
  color:rgba(255,255,255,.72);
  font-size:.69rem;
  pointer-events:none;
  backdrop-filter:blur(8px);
}

.reader-message {
  position:absolute;
  z-index:80;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:var(--reader-bg);
}

.reader-message.is-hidden,.is-hidden { display:none !important; }
.reader-message h1 { margin:0; font-size:1.2rem; }
.reader-message p { margin:0; color:var(--reader-muted); }
.reader-message a { color:#71d7da; }
.reader-spinner {
  width:30px;
  height:30px;
  border:3px solid rgba(255,255,255,.14);
  border-top-color:var(--reader-accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.reader-progress-wrap {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:rgba(255,255,255,.07);
}
.reader-progress { height:100%; width:0; background:var(--reader-accent); transition:width .25s ease; }

.reader-page-status {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:170px;
}
.reader-page-status span { min-width:82px; text-align:center; font-size:.75rem; color:#e9edef; }
.reader-page-status button {
  width:30px;
  height:30px;
  border:0;
  border-radius:6px;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:transparent;
}
.reader-help {
  position:absolute;
  right:16px;
  color:rgba(255,255,255,.44);
  font-size:.65rem;
}

@media (max-width: 820px) {
  :root { --topbar-h:52px; --bottombar-h:46px; }
  .desktop-only { display:none !important; }
  .reader-publication strong { max-width:32vw; font-size:.82rem; }
  .reader-publication span { max-width:35vw; overflow:hidden; text-overflow:ellipsis; }
  .reader-actions { gap:3px; }
  .reader-icon-button { width:34px; height:34px; }
  .reader-zoom-value { height:34px; min-width:46px; padding:0 5px; }
  .reader-nav { display:none; }
  .reader-help { display:none; }
  .reader-page-status button { display:inline-flex; }
  .reader-drag-hint { bottom:7px; max-width:86vw; white-space:nowrap; font-size:.64rem; }
}

@media (max-width: 520px) {
  .reader-publication { display:none; }
  .reader-topbar { padding:0 7px; }
  .reader-icon-button { width:33px; }
  #pdf-button { display:none !important; }
  .reader-drag-hint span { max-width:70vw; overflow:hidden; text-overflow:ellipsis; }
}

/* --- Interacción táctil dedicada (V8) ---
   Desktop conserva exactamente el comportamiento de la V6. En teléfonos y
   tablets esta capa captura todos los gestos para que StPageFlip no compita
   con pinch/swipe del navegador. */
.reader-stage.is-touch-mobile .pan-capture {
  display:block;
  cursor:default;
  touch-action:none;
  -ms-touch-action:none;
  overscroll-behavior:none;
}

.reader-stage.is-touch-mobile.is-panning .pan-capture,
.reader-stage.is-touch-mobile.is-page-gesture .pan-capture {
  cursor:default;
}

.reader-stage.is-touch-mobile .pages-viewport {
  overscroll-behavior:none;
  -webkit-overflow-scrolling:auto;
}

.reader-stage.is-touch-mobile.is-mobile-pinching .pan-capture {
  cursor:default;
}

@media (max-width: 820px) {
  .reader-stage.is-touch-mobile .reader-drag-hint {
    bottom:8px;
    padding:7px 10px;
  }

  .reader-stage.is-touch-mobile .reader-drag-hint i {
    display:none;
  }
}