/* =========================================================
   Flipbook — estilos del visor tipo libro
   Depende de las variables de color de estilos.css
   ========================================================= */

.flipbook{
  --fb-fondo: #1B1410;
  --fb-papel: #fff;
  background:linear-gradient(170deg,#241C16,var(--fb-fondo));
  border-radius:var(--radio);
  padding:24px 18px 0;
  outline:none;
  position:relative;
  overflow:hidden;
}
.flipbook::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(620px 320px at 50% -10%, rgba(255,122,24,.26), transparent 65%);
}
.flipbook:focus-visible{box-shadow:0 0 0 3px var(--naranja)}
.flipbook:fullscreen{padding:20px 18px 0; border-radius:0; display:flex; flex-direction:column; justify-content:center}

/* ---------- Escenario ---------- */
.fb__escenario{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  min-height:280px; padding:0 46px;
  overflow:hidden;
  touch-action:pan-y;
  cursor:pointer;
  user-select:none; -webkit-user-select:none;
}
.fb__escenario--zoom{cursor:grab; touch-action:none}
.fb__escenario--zoom:active{cursor:grabbing}

.fb__lienzo{
  transform-origin:center center;
  will-change:transform;
  transition:transform .18s ease-out;
}
.fb__escenario--zoom .fb__lienzo{transition:none}

.fb__libro{
  position:relative;
  perspective:2400px;
  display:flex;
  transform-style:preserve-3d;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55));
}

/* Páginas fijas */
.fb__hoja{
  position:relative; flex:1 1 50%; min-width:0;
  background:var(--fb-papel); overflow:hidden;
}
.fb__libro--simple .fb__hoja--izq{display:none}
.fb__libro--simple .fb__hoja--der{flex:1 1 100%; border-radius:5px; box-shadow:none}
.fb__hoja canvas{width:100%; height:100%; display:block; object-fit:contain}
.fb__hoja--vacia{background:#EFE7DF}
.fb__hoja--vacia canvas{opacity:0}

.fb__hoja--izq{border-radius:4px 0 0 4px; box-shadow:inset -18px 0 26px -18px rgba(0,0,0,.5)}
.fb__hoja--der{border-radius:0 4px 4px 0; box-shadow:inset  18px 0 26px -18px rgba(0,0,0,.5)}

/* Lomo */
.fb__lomo{
  position:absolute; top:0; bottom:0; left:50%; width:16px; transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.2) 45%,rgba(0,0,0,.2) 55%,rgba(0,0,0,0));
  pointer-events:none; z-index:3;
}
.fb__libro--simple .fb__lomo{display:none}

/* Hoja que gira */
.fb__leaf{
  position:absolute; top:0; width:50%; height:100%;
  transform-style:preserve-3d; z-index:5; will-change:transform, opacity;
}
.fb__leaf--der{left:50%; transform-origin:left center}
.fb__leaf--izq{left:0;   transform-origin:right center}
.fb__leaf--completa{left:0; width:100%; transform-origin:left center}

.fb__cara{
  position:absolute; inset:0; background:var(--fb-papel);
  backface-visibility:hidden; overflow:hidden;
}
.fb__cara canvas{width:100%; height:100%; display:block; object-fit:contain}
.fb__cara--dorso{transform:rotateY(180deg)}
.fb__leaf--completa .fb__cara--dorso{display:none}
.fb__leaf--der .fb__cara--frente{box-shadow:inset 18px 0 26px -18px rgba(0,0,0,.5)}
.fb__leaf--izq .fb__cara--frente{box-shadow:inset -18px 0 26px -18px rgba(0,0,0,.5)}

/* Flechas */
.fb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:background .2s ease, opacity .2s ease;
}
.fb__nav:hover:not(:disabled){background:var(--naranja)}
.fb__nav:disabled{opacity:.2; cursor:default}
.fb__nav--prev{left:2px}
.fb__nav--next{right:2px}

/* Cargando */
.fb__cargando{
  position:absolute; inset:0; z-index:7; display:flex; gap:10px;
  align-items:center; justify-content:center;
  color:#fff; font-size:.92rem; background:rgba(27,20,16,.72);
}
.fb__cargando[hidden]{display:none}
.fb__cargando a{color:var(--naranja-claro)}
.fb__spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.25); border-top-color:var(--naranja);
  animation:fb-giro .8s linear infinite;
}
@keyframes fb-giro{to{transform:rotate(360deg)}}

/* Pista */
.fb__pista{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:6;
  background:rgba(0,0,0,.55); color:#fff; font-size:.76rem;
  padding:6px 13px; border-radius:100px; pointer-events:none;
  animation:fb-aparece .5s ease .8s both;
}
.fb__pista[hidden]{display:none}
@keyframes fb-aparece{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}

/* ---------- Barra de controles ---------- */
.fb__barra{
  position:relative; z-index:2;
  margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 4px 16px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#D7C9BE; font-size:.87rem;
}
.fb__titulo{color:#fff; font-family:var(--titulo); font-size:.94rem}
.fb__barra-centro,.fb__barra-der{display:flex; align-items:center; gap:8px}

.fb__btn{
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease, border-color .2s ease;
  text-decoration:none; flex:none;
}
.fb__btn:hover{background:var(--naranja); border-color:var(--naranja); color:#fff}

.fb__pagina{display:inline-flex; align-items:center; gap:6px; color:#D7C9BE; white-space:nowrap}
.fb__input{
  width:58px; padding:6px 8px; text-align:center;
  border-radius:8px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:.87rem;
}
.fb__input:focus{outline:none; border-color:var(--naranja); background:rgba(255,255,255,.12)}
.fb__total{color:#9A8B80}
.fb__zoom{min-width:44px; text-align:center; font-variant-numeric:tabular-nums; color:#D7C9BE}

@media (max-width:860px){
  .flipbook{padding:16px 10px 0}
  .fb__escenario{padding:0 40px}
  .fb__barra{justify-content:center; text-align:center; gap:10px}
  .fb__barra-izq{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fb__nav,.fb__btn,.fb__lienzo{transition:none}
  .fb__pista{animation:none}
}