/* =========================================================
   Academia ETERNI · ETERNI Reader V1 / V52
   Lector visual por páginas privadas.
   ========================================================= */

:root{
  --reader-plum:#43284b;
  --reader-plum-deep:#211627;
  --reader-plum-mid:#34203d;
  --reader-gold:#c49a54;
  --reader-paper:#fffdf9;
  --reader-ink:#2f2532;
  --reader-muted:#857b87;
  --reader-line:rgba(255,255,255,.12);
  --reader-zoom:1;
}

*{box-sizing:border-box}

body.eterni-reader-page{
  min-height:100vh;
  margin:0;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 78% 15%,rgba(196,154,84,.12),transparent 28rem),
    linear-gradient(145deg,#1f1525,#2b1c32 58%,#211627);
  font-family:"Inter",sans-serif;
}

.eterni-reader-page img{
  -webkit-user-drag:none;
  user-select:none;
}

.reader-topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(28,18,33,.88);
  backdrop-filter:blur(22px);
}

.reader-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:700;
}

.reader-back>span:first-child{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  font-size:18px;
}

.reader-title{
  min-width:0;
  text-align:center;
}

.reader-title small,
.reader-title strong{
  display:block;
}

.reader-title small{
  color:#d8b777;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.reader-title strong{
  overflow:hidden;
  margin-top:3px;
  max-width:46vw;
  color:#fff;
  font:600 22px/1 "Cormorant Garamond",serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.reader-top-actions{
  display:flex;
  align-items:center;
  justify-self:end;
  gap:12px;
}

.reader-secure-pill{
  padding:8px 11px;
  border:1px solid rgba(216,183,119,.15);
  border-radius:999px;
  color:#e5cc98;
  background:rgba(216,183,119,.07);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}

.reader-avatar{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:14px;
  color:#fff;
  background:#8e6398;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  font-size:11px;
  font-weight:800;
}

.reader-shell{
  height:100vh;
  padding:72px 0 78px;
}

.reader-stage{
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 64%);
}

.reader-loading,
.reader-error{
  display:grid;
  place-items:center;
  align-content:center;
  min-height:300px;
  text-align:center;
}

.reader-loading-mark{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  margin-bottom:18px;
  border:1px solid rgba(216,183,119,.20);
  border-radius:50%;
  color:#e0bd78;
  background:rgba(255,255,255,.04);
  font:600 46px/1 "Cormorant Garamond",serif;
  animation:reader-pulse 1.4s ease-in-out infinite;
}

.reader-loading strong{
  font:600 37px/1 "Cormorant Garamond",serif;
}

.reader-loading p{
  margin:10px 0 0;
  color:rgba(255,255,255,.62);
  font-size:13px;
}

@keyframes reader-pulse{
  0%,100%{transform:scale(.96);opacity:.72}
  50%{transform:scale(1.04);opacity:1}
}

.reader-book-viewport{
  position:relative;
  min-width:100%;
  min-height:100%;
  padding:28px 82px;
}

.reader-book{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:max-content;
  min-width:100%;
  min-height:100%;
  margin:auto;
  transform:scale(var(--reader-zoom));
  transform-origin:center center;
  transition:transform .2s ease;
}

.reader-book.turn-next{
  animation:reader-turn-next .28s ease;
}

.reader-book.turn-prev{
  animation:reader-turn-prev .28s ease;
}

@keyframes reader-turn-next{
  0%{transform:scale(var(--reader-zoom)) translateX(18px);opacity:.68}
  100%{transform:scale(var(--reader-zoom)) translateX(0);opacity:1}
}

@keyframes reader-turn-prev{
  0%{transform:scale(var(--reader-zoom)) translateX(-18px);opacity:.68}
  100%{transform:scale(var(--reader-zoom)) translateX(0);opacity:1}
}

.reader-page{
  position:relative;
  flex:0 0 auto;
  width:min(37vw,570px);
  aspect-ratio:1378.56 / 2081.28;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#eee8df;
  box-shadow:
    0 28px 70px rgba(0,0,0,.32),
    0 2px 0 rgba(255,255,255,.35) inset;
}

.reader-page.single{
  border-radius:5px 9px 9px 5px;
}

.reader-page.left{
  border-radius:6px 1px 1px 6px;
  box-shadow:
    -18px 28px 70px rgba(0,0,0,.28),
    inset -14px 0 20px rgba(45,32,25,.05);
}

.reader-page.right{
  border-radius:1px 6px 6px 1px;
  box-shadow:
    18px 28px 70px rgba(0,0,0,.28),
    inset 14px 0 20px rgba(45,32,25,.05);
}

.reader-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.reader-page.left::before,
.reader-page.right::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:18px;
  pointer-events:none;
}

.reader-page.left::before{
  right:0;
  background:linear-gradient(90deg,transparent,rgba(50,35,29,.09));
}

.reader-page.right::before{
  left:0;
  background:linear-gradient(90deg,rgba(50,35,29,.09),transparent);
}

.reader-page img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.reader-page-skeleton{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#8a7f75;
  background:
    linear-gradient(110deg,#eee8df 30%,#f9f5ef 45%,#eee8df 60%);
  background-size:240% 100%;
  animation:reader-shimmer 1.3s linear infinite;
  font-size:11px;
}

@keyframes reader-shimmer{
  to{background-position-x:-240%}
}

.reader-page-number{
  position:absolute;
  z-index:3;
  right:11px;
  bottom:8px;
  padding:4px 7px;
  border-radius:999px;
  color:rgba(46,35,49,.62);
  background:rgba(255,253,249,.68);
  font-size:8px;
  font-weight:800;
  backdrop-filter:blur(7px);
}

.reader-turn{
  position:fixed;
  z-index:20;
  top:50%;
  display:grid;
  place-items:center;
  width:52px;
  height:76px;
  margin-top:-38px;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  background:rgba(31,21,37,.60);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(15px);
  font:300 42px/1 "Inter",sans-serif;
  cursor:pointer;
}

.reader-turn:hover:not(:disabled){
  background:rgba(196,154,84,.22);
}

.reader-turn:disabled{
  opacity:.20;
  cursor:default;
}

.reader-turn-prev{
  left:18px;
  border-radius:18px;
}

.reader-turn-next{
  right:18px;
  border-radius:18px;
}

.reader-watermark{
  position:fixed;
  z-index:15;
  left:50%;
  bottom:93px;
  max-width:72vw;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  color:rgba(255,255,255,.28);
  background:rgba(20,12,24,.18);
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.reader-controls{
  position:fixed;
  z-index:45;
  inset:auto 0 0 0;
  min-height:78px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:12px 24px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(28,18,33,.90);
  backdrop-filter:blur(22px);
}

.reader-page-control,
.reader-tool-control{
  display:flex;
  align-items:center;
  gap:8px;
}

.reader-page-control button,
.reader-tool-control button{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-size:15px;
  cursor:pointer;
}

.reader-page-control button:hover:not(:disabled),
.reader-tool-control button:hover{
  border-color:rgba(216,183,119,.24);
  background:rgba(216,183,119,.11);
}

.reader-page-control button:disabled{
  opacity:.28;
  cursor:default;
}

.reader-page-control label{
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.58);
  font-size:10px;
}

.reader-page-control input{
  width:54px;
  height:34px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  outline:none;
  color:#fff;
  background:rgba(255,255,255,.06);
  text-align:center;
  font:700 11px "Inter",sans-serif;
}

.reader-page-control b{
  font-size:10px;
  font-weight:600;
}

.reader-tool-control{
  justify-content:center;
}

.reader-tool-control>span{
  min-width:45px;
  color:rgba(255,255,255,.68);
  font-size:9px;
  text-align:center;
}

.reader-progress-wrap{
  justify-self:end;
  width:min(240px,24vw);
}

.reader-progress-track{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.11);
}

.reader-progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b8873f,#edd29a);
  transition:width .25s ease;
}

.reader-progress-wrap small{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.48);
  font-size:8px;
  text-align:right;
}

.reader-error{
  min-height:100%;
}

.reader-error strong{
  font:600 38px/1 "Cormorant Garamond",serif;
}

.reader-error p{
  margin:9px 0 18px;
  color:rgba(255,255,255,.62);
}

.reader-error button{
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  color:var(--reader-plum);
  background:#fff;
  font-weight:800;
}

/* Fullscreen */
:fullscreen .reader-book-viewport{
  padding-top:38px;
  padding-bottom:38px;
}

/* No printing from the reader UI. */
@media print{
  html,body{display:none!important}
}

@media(max-width:980px){
  .reader-topbar{
    grid-template-columns:1fr auto;
  }

  .reader-title{
    display:none;
  }

  .reader-secure-pill{
    display:none;
  }

  .reader-book-viewport{
    padding:20px 56px;
  }

  .reader-book{
    gap:0;
  }

  .reader-page{
    width:min(84vw,620px);
  }

  .reader-page.left,
  .reader-page.right{
    border-radius:6px;
  }

  .reader-turn{
    width:40px;
    height:62px;
    margin-top:-31px;
  }

  .reader-turn-prev{left:8px}
  .reader-turn-next{right:8px}

  .reader-controls{
    grid-template-columns:1fr auto;
  }

  .reader-progress-wrap{
    display:none;
  }
}

@media(max-width:620px){
  .reader-topbar{
    height:62px;
    padding:0 12px;
  }

  .reader-shell{
    padding-top:62px;
    padding-bottom:70px;
  }

  .reader-back>span:last-child{
    font-size:10px;
  }

  .reader-avatar{
    width:36px;
    height:36px;
  }

  .reader-book-viewport{
    padding:16px 39px;
  }

  .reader-page{
    width:86vw;
  }

  .reader-turn{
    width:34px;
    height:54px;
    margin-top:-27px;
    border-radius:13px;
  }

  .reader-controls{
    min-height:70px;
    gap:8px;
    padding:9px 10px;
  }

  .reader-page-control{
    gap:5px;
  }

  .reader-page-control label>span{
    display:none;
  }

  .reader-page-control button,
  .reader-tool-control button{
    width:32px;
    height:32px;
    border-radius:10px;
  }

  .reader-tool-control>span{
    display:none;
  }

  #readerZoomOut,
  #readerZoomIn{
    display:none;
  }

  .reader-watermark{
    bottom:79px;
    max-width:86vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(prefers-reduced-motion:reduce){
  .reader-loading-mark,
  .reader-page-skeleton,
  .reader-book.turn-next,
  .reader-book.turn-prev{
    animation:none;
  }
}


/* =========================================================
   ETERNI Reader V52.2 · Estado de carga
   Evita que "Preparando tu libro" permanezca detrás del libro.
   ========================================================= */
.reader-loading[hidden],
.reader-error[hidden],
.reader-book-viewport[hidden],
.reader-controls[hidden]{
  display:none!important;
}

.reader-loading{
  position:absolute;
  z-index:40;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  background:
    radial-gradient(circle at center,rgba(196,154,84,.07),transparent 25rem),
    linear-gradient(145deg,#211627,#2b1c32);
  transition:opacity .18s ease,visibility .18s ease;
}

.reader-loading.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.reader-book-viewport{
  position:relative;
  z-index:5;
}