/* ============================================================
   Novelas XZ — estantería + lector
   ============================================================ */

:root{
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wood-1:#7a5232;
  --wood-2:#4a3120;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  background:#0f0a07;
  color:#f0e7dc;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ============================================================
   ESTANTERÍA
   ============================================================ */

.shelf-view{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  padding: clamp(18px,4vh,44px) clamp(16px,4vw,56px) 0;
  background:
    radial-gradient(120% 90% at 50% 6%, #3a2a1e 0%, #221710 42%, #120d09 78%, #0b0806 100%);
  overflow:hidden;
}

.shelf-view::before{
  /* luz cálida de lámpara */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side at 50% 12%, rgba(255,196,120,.16), transparent 70%);
  pointer-events:none;
}

.shelf-head{ position:relative; z-index:2; text-align:center; }
.shelf-head h1{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f3e3cd;
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.shelf-sub{
  margin:.5em 0 0;
  font-size:clamp(11px,1.6vw,13px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#a08a72;
}

.shelf-stage{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  perspective:1600px;
  padding-bottom:clamp(10px,3vh,32px);
  min-height:0;
}

.shelf-books{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(18px,4vw,54px);
  padding:0 clamp(8px,3vw,40px) 0;
  transform-style:preserve-3d;
}
/* halo cálido detrás de los libros (va en el escenario, no en la capa 3D) */
.shelf-stage::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(70vw,600px); height:78%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,206,142,.14), rgba(255,206,142,0) 76%);
  pointer-events:none;
  z-index:0;
}

/* ---- libro ---- */
.book{
  position:relative;
  width:clamp(148px,21vw,248px);
  aspect-ratio:3/4;
  transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(1.5deg) translateZ(0);
  transition:transform .5s var(--ease), filter .5s var(--ease);
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.62));
  animation:book-in .7s var(--ease) both;
}
.book:nth-child(2){ animation-delay:.08s }
.book:nth-child(3){ animation-delay:.16s }
.book:nth-child(4){ animation-delay:.24s }
.book:nth-child(5){ animation-delay:.32s }

@keyframes book-in{
  from{ transform:rotateY(-16deg) translateY(26px) scale(.96); }
  to{ transform:rotateY(-16deg) translateY(0) scale(1); }
}

.book:hover, .book:focus-visible{
  transform:rotateY(-4deg) rotateX(0) translateY(-14px) translateZ(40px);
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.7));
  outline:none;
}

.book-cover{
  position:absolute; inset:0;
  border-radius:2px 5px 5px 2px;
  overflow:hidden;
  background:#1a120c;
  box-shadow:
    inset -2px 0 0 rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.book-cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* lomo */
.book-cover::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:9%;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.28) 55%, rgba(255,255,255,.07));
  z-index:2;
}
/* brillo del lomo */
.book-cover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.16) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

/* canto de las hojas */
.book-pages{
  position:absolute; top:2px; bottom:2px; right:-5px; width:6px;
  border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(90deg,#d9cdb8 0 1px,#b9a88f 1px 2px,#e8ddc9 2px 3px);
  transform:translateZ(-1px);
  opacity:.85;
}

.book-badge{
  position:absolute;
  left:50%; bottom:-14px;
  transform:translateX(-50%);
  z-index:4;
  display:flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(20,12,7,.86);
  border:1px solid rgba(255,196,120,.28);
  color:#f0d9b5;
  font-size:11px;
  letter-spacing:.04em;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}

/* ---- repisa ---- */
.shelf-plank{
  position:relative;
  z-index:2;
  height:clamp(18px,2.6vh,26px);
  margin:0 calc(-1 * clamp(16px,4vw,56px));
}
.plank-top{
  position:absolute; left:0; right:0; top:0; height:55%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#8a5f38,#6b4527);
  border-radius:2px 2px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,214,160,.35);
}
.plank-front{
  position:absolute; left:0; right:0; top:52%; bottom:0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 3px, transparent 3px 9px),
    linear-gradient(180deg,#3b2515,#1e120a);
  box-shadow:0 18px 34px rgba(0,0,0,.6);
}
.shelf-shadow{
  position:absolute; left:50%; bottom:clamp(2px,1vh,10px);
  width:min(70vw,620px); height:26px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%);
  z-index:1;
}

.shelf-foot{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(10px,2.5vh,26px) 0 clamp(14px,3vh,30px);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#7d6a56;
}

/* ============================================================
   LECTOR
   ============================================================ */

.reader-view{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--paper-bg,#f4efe4);
  color:var(--ink,#241d16);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:10;
}
.reader-view.is-open{ opacity:1; pointer-events:auto; }

/* temas */
.reader-view[data-theme="paper"]{ --paper-bg:#f6f1e6; --ink:#26201a; --ink-soft:#7a6a58; --rule:rgba(70,50,30,.14); --bar:rgba(246,241,230,.88); --accent:#8a5a2b; }
.reader-view[data-theme="sepia"]{ --paper-bg:#efe0c4; --ink:#3a2b1a; --ink-soft:#8a7455; --rule:rgba(90,60,20,.18); --bar:rgba(239,224,196,.9); --accent:#8f5f22; }
.reader-view[data-theme="night"]{ --paper-bg:#14110e; --ink:#cbbfae; --ink-soft:#7d7264; --rule:rgba(255,255,255,.09); --bar:rgba(20,17,14,.9); --accent:#c69a63; }

.paper-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.5), transparent 60%),
    var(--paper-bg);
  pointer-events:none;
}
.reader-view[data-theme="night"] .paper-bg{
  background:radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--paper-bg);
}

/* ---- barras ---- */
.reader-bar{
  position:relative;
  z-index:6;
  background:var(--bar);
  backdrop-filter:blur(14px) saturate(1.2);
  color:var(--ink);
}
.reader-bar--top{
  display:flex; align-items:center; gap:8px;
  padding:max(8px,env(safe-area-inset-top)) clamp(10px,2vw,22px) 8px;
  border-bottom:1px solid var(--rule);
}
.reader-bar--bottom{
  padding:0 clamp(14px,3vw,28px) max(8px,env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);
}

.icon-btn{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  color:var(--ink);
  opacity:.75;
  transition:opacity .2s, background .2s;
  flex:none;
}
.icon-btn:hover{ opacity:1; background:rgba(125,125,125,.12); }
.icon-btn .aa{ font-family:var(--serif); font-size:15px; font-weight:600; }

.bar-title{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  line-height:1.25;
  overflow:hidden;
}
.bar-title strong{
  font-family:var(--serif); font-weight:600;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.bar-title span{
  font-size:11px; color:var(--ink-soft); letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bar-actions{ display:flex; gap:2px; flex:none; }

.progress-track{
  height:2px; background:var(--rule); border-radius:2px;
  margin:0 0 6px; overflow:hidden;
}
.progress-fill{
  display:block; height:100%; width:0%;
  background:var(--accent);
  transition:width .35s var(--ease);
}
.bar-meta{
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.08em; color:var(--ink-soft);
  padding-bottom:4px;
}

/* ---- escenario del libro ---- */
.reader-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
}
.book-viewport{
  position:absolute; inset:0;
  overflow:hidden;
  padding:clamp(14px,2.4vh,34px) clamp(18px,4vw,64px);
}
/* ventana que recorta exactamente la doble página */
.book-window{
  position:absolute;
  overflow:hidden;
}
/* pliegue central: da la sensación de dos páginas enfrentadas */
.book-window.is-spread::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:90px; transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(60,40,20,0) 0%,
    rgba(60,40,20,.045) 34%,
    rgba(60,40,20,.13) 49%,
    rgba(60,40,20,.16) 50%,
    rgba(60,40,20,.13) 51%,
    rgba(60,40,20,.045) 66%,
    rgba(60,40,20,0) 100%);
}
.reader-view[data-theme="night"] .book-window.is-spread::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.35) 54%, rgba(0,0,0,0) 100%);
}
.book-paper{
  position:absolute;
  top:0;
  left:0;
  font-family:var(--serif);
  font-size:var(--fs,19px);
  line-height:1.68;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  color:var(--ink);
  column-fill:auto;
  will-change:transform;
  transition:transform .46s var(--ease);
  transform:translateX(0);
  overflow:visible;
}
.book-paper.no-anim{ transition:none; }

.book-paper .chap-head{
  column-span:none;
  margin:0 0 1.1em;
  text-align:center;
  break-after:avoid;
}
.book-paper .chap-head .kicker{
  display:block;
  font-family:var(--sans);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.7em;
}
.book-paper .chap-head h2{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5em;
  letter-spacing:.06em;
  line-height:1.2;
}
.book-paper .chap-head .rule{
  display:block; width:44px; height:1px; margin:.85em auto 0;
  background:var(--accent); opacity:.5;
}

.book-paper p{
  margin:0;
  text-indent:1.4em;
  orphans:2; widows:2;
}
.book-paper p:first-of-type{ text-indent:0; }

.book-paper .chap-end{
  margin-top:1.6em;
  text-align:center;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
  text-indent:0;
}

/* ---- zonas de toque ---- */
.nav-zone{
  position:absolute; top:0; bottom:0;
  z-index:4;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.nav-zone--prev{ left:0; width:32%; cursor:w-resize; }
.nav-zone--next{ right:0; width:68%; cursor:e-resize; }

.hint{
  position:absolute; top:50%; z-index:5;
  transform:translateY(-50%);
  color:var(--ink-soft);
  opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.hint--prev{ left:clamp(4px,1vw,14px); }
.hint--next{ right:clamp(4px,1vw,14px); }

@media (hover:hover){
  .reader-stage:hover .hint{ opacity:.18; }
  .nav-zone--prev:hover ~ .hint--prev,
  .nav-zone--next:hover ~ .hint--next{ opacity:.45; }
}

/* ---- sombra de giro ---- */
.turn-shade{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.turn-shade::before{
  content:"";
  position:absolute; top:0; bottom:0; width:45%;
  left:-45%;
  background:linear-gradient(90deg, transparent, rgba(40,25,10,.22), transparent);
  opacity:0;
}
.turn-shade.on::before{ animation:sweep .5s var(--ease); }
.turn-shade.back::before{ animation:sweep-back .5s var(--ease); }

@keyframes sweep{
  0%{ left:-45%; opacity:0 }
  35%{ opacity:.9 }
  100%{ left:100%; opacity:0 }
}
@keyframes sweep-back{
  0%{ left:100%; opacity:0 }
  35%{ opacity:.9 }
  100%{ left:-45%; opacity:0 }
}

/* ============================================================
   ÍNDICE
   ============================================================ */

.drawer{
  position:fixed; inset:0;
  z-index:20;
  pointer-events:none;
}
.drawer::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(8,5,3,.5);
  opacity:0; transition:opacity .3s;
  backdrop-filter:blur(2px);
}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(380px,88vw);
  display:flex; flex-direction:column;
  background:#161009;
  color:#e9dcc9;
  border-left:1px solid rgba(255,200,140,.14);
  transform:translateX(102%);
  transition:transform .34s var(--ease);
}
.drawer.is-open{ pointer-events:auto; }
.drawer.is-open::before{ opacity:1; }
.drawer.is-open .drawer-panel{ transform:translateX(0); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 14px 14px 20px;
  border-bottom:1px solid rgba(255,200,140,.12);
}
.drawer-head h2{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:14px; letter-spacing:.24em; text-transform:uppercase;
  color:#d9c4a6;
}
.drawer-list{ flex:1; overflow-y:auto; padding:8px 0 30px; overscroll-behavior:contain; }
.drawer-list button{
  display:flex; align-items:baseline; gap:12px;
  width:100%; text-align:left;
  padding:10px 20px;
  font-family:var(--serif); font-size:15px;
  color:#cbb99f;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.drawer-list button:hover{ background:rgba(255,200,140,.07); color:#f3e3cd; }
.drawer-list button .num{
  font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  color:#7d6a56; min-width:34px; text-align:right; flex:none;
}
.drawer-list button .lbl{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.drawer-list button .lbl b{
  font-weight:600; font-size:14px; letter-spacing:.04em;
}
.drawer-list button .lbl i{
  font-style:normal; font-size:12.5px; line-height:1.35;
  color:#8a7a63;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.drawer-list button.current .lbl i{ color:#a89070; }
.drawer-list button.current{ background:rgba(255,200,140,.1); color:#f7e9d4; }
.drawer-list button.current .num{ color:#c69a63; }

/* ---- aviso flotante ---- */
.toast{
  position:fixed;
  left:50%; bottom:calc(64px + env(safe-area-inset-bottom));
  transform:translate(-50%, 12px);
  z-index:40;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(22,14,8,.9);
  color:#f2e2ca;
  font-family:var(--sans);
  font-size:12px; letter-spacing:.08em;
  border:1px solid rgba(255,200,140,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:560px){
  .book{ width:min(56vw,210px); }
  .shelf-view{ padding-inline:14px; }
  .bar-title strong{ font-size:12px; }
}

/* ---- celular acostado: prioridad a leer, no a la interfaz ---- */
@media (orientation:landscape) and (max-height:500px){
  .reader-bar--top{
    padding:max(3px,env(safe-area-inset-top)) 8px 3px;
    gap:4px;
  }
  .bar-title{
    flex-direction:row; gap:10px; align-items:baseline;
  }
  .bar-title strong{ display:none; }
  .bar-title span{ font-size:10px; letter-spacing:.1em; }
  .icon-btn{ width:34px; height:34px; border-radius:8px; }
  .icon-btn .aa{ font-size:13px; }
  .reader-bar--bottom{ padding:0 12px max(3px,env(safe-area-inset-bottom)); }
  .progress-track{ margin:0 0 3px; }
  .bar-meta{ font-size:10px; padding-bottom:2px; }
  .book-paper{ line-height:1.52; }
  .book-paper .chap-head{ margin:0 0 .5em; }
  .book-paper .chap-head .kicker,
  .book-paper .chap-head .rule{ display:none; }
  .book-paper .chap-head h2{ font-size:1.15em; }
  .hint{ display:none; }
}

@media (max-height:520px) and (orientation:landscape){
  .shelf-head h1{ font-size:19px; }
  .shelf-sub{ display:none; }
  .book{ width:clamp(88px,12vh,120px); }
  .shelf-foot{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}