/* ============================================================
   NGN — visor de libros (el portfolio y el ensayo del PFG)
   El PDF real se dibuja con PDF.js (lib/pdfjs). Cada libro es una página
   (libro.html, ensayo.html) que carga esta hoja y lib/libro.js.
   Escritorio: portada sola y después páginas enfrentadas (2-3, 4-5, …).
   Móvil: una página cada vez.
   ============================================================ */
:root{
  color-scheme: light;
  --paper:#F4F2EE; --page:#FFFFFF; --ink:#1F2121; --ink-2:#4A4C4C; --muted:#6F6B64; --accent:#B0522F;
  --line:rgba(31,33,33,.14);
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px, 4vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0; height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column; min-height:100svh; overflow-x:hidden;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
a{color:inherit; text-decoration:none}
:focus-visible{outline:1.5px solid var(--accent); outline-offset:3px}
::selection{background:#E8CFC5; color:var(--ink)}
.eyebrow{font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.eyebrow--ink{color:var(--ink)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- barra superior ---------- */
.top{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px var(--gut); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{display:inline-flex; align-items:center; gap:14px; min-height:44px}
.brand svg{width:60px; height:auto; flex:0 0 auto}
.top nav{display:flex; gap:10px; align-items:center}
.top nav a{
  display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px; line-height:1;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.top nav a:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.top nav a svg{width:12px; height:12px}
.top nav .is-back{border-color:transparent; padding-left:4px}

/* ---------- el libro ---------- */
.reader{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.reader__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px var(--gut) 0; flex:0 0 auto;
}
.stage{
  position:relative; flex:1 1 auto; min-height:0;
  display:grid; place-items:center; overflow:hidden;
  padding:clamp(14px,2.4vh,30px) clamp(10px,2vw,32px);
  touch-action:pan-y pinch-zoom;
}
.stage.is-zoomed{overflow:auto; place-items:start center; cursor:grab; touch-action:auto}
.stage.is-grabbing{cursor:grabbing}
.spread{display:flex; gap:2px; align-items:flex-start; line-height:0; position:relative}
/* girada: la hoja se apaisa para llenar la pantalla vertical del móvil */
.spread.is-rotated{display:block}
.spread.is-rotated .leaf{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg)}
.leaf{position:relative; overflow:hidden; background:var(--page); box-shadow:0 10px 30px rgba(31,33,33,.13), 0 1px 2px rgba(31,33,33,.10)}
.leaf canvas{display:block; width:100%; height:100%}
/* mientras la hoja se dibuja, un filete de terracota recorre su canto superior */
.leaf.is-loading::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent) 55%, transparent);
  animation:leafwait 1.1s linear infinite;
}
@keyframes leafwait{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
/* la sombra del pliegue central, como en un libro abierto */
.spread[data-pages="2"] .leaf:first-child::after,
.spread[data-pages="2"] .leaf:last-child::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.spread[data-pages="2"] .leaf:first-child::after{background:linear-gradient(to left, rgba(31,33,33,.10), rgba(31,33,33,0) 6%)}
.spread[data-pages="2"] .leaf:last-child::after{background:linear-gradient(to right, rgba(31,33,33,.10), rgba(31,33,33,0) 6%)}

/* zonas para pasar página pulsando sobre el libro */
.hotspot{position:absolute; top:0; height:100%; width:50%; z-index:5; background:none}
.hotspot--prev{left:0; cursor:w-resize}
.hotspot--next{right:0; cursor:e-resize}
.hotspot[disabled]{cursor:default}
.stage.is-zoomed .hotspot{display:none}
/* las zonas de pulsar no se alcanzan con el tabulador (los botones de la barra si): sin anillo de foco,
   que tras un clic y una tecla dibujaba una raya terracota por el lomo del libro */
.hotspot:focus-visible{outline:none}

/* estados: cargando y error */
.state{
  position:absolute; inset:0; display:grid; place-items:center; padding:var(--gut);
  background:var(--paper); text-align:center; z-index:20;
}
.state[hidden]{display:none}
.state__inner{max-width:46ch}
.state__bar{width:min(280px,60vw); height:1px; background:var(--line); margin:18px auto 0; overflow:hidden}
.state__fill{display:block; height:100%; width:0%; background:var(--accent); transition:width .3s linear}
.state h2{font-family:"Inter Tight","Inter",sans-serif; font-weight:300; font-size:clamp(28px,2.9vw,42px); letter-spacing:-.02em; margin:14px 0 10px; line-height:1.1}
.state p{color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0}
.state__actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px}
.state__actions[hidden]{display:none}
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 20px;
  border:1px solid var(--ink); border-radius:999px; line-height:1;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.btn:hover{background:var(--ink); color:#fff}
.btn svg{width:13px; height:13px}

/* ---------- barra de control ---------- */
.bar{flex:0 0 auto; padding:0 var(--gut) calc(14px + env(safe-area-inset-bottom)); position:relative}
.bar__inner{
  display:flex; align-items:center; gap:clamp(8px,1.6vw,20px); justify-content:space-between;
  border-top:1px solid var(--line); padding-top:12px;
}
.bar__nav{display:flex; align-items:center; gap:8px}
.nav-btn{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); transition:border-color .35s, opacity .35s;
}
.nav-btn:hover:not(:disabled){border-color:var(--ink)}
.nav-btn:disabled{opacity:.28; cursor:default}
.nav-btn svg{width:13px; height:13px}
.bar__label{display:flex; align-items:baseline; gap:12px; min-width:0; flex:1 1 auto; justify-content:center}
.bar__section{font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar__count{font-size:11px; letter-spacing:.14em; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.bar__tools{display:flex; align-items:center; gap:4px}
.tool{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:0 12px; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, background .3s;
}
.tool:hover:not(:disabled),.tool[aria-expanded="true"]{color:var(--ink); background:rgba(31,33,33,.05)}
.tool:disabled{opacity:.3; cursor:default}
.tool svg{width:14px; height:14px}
.tool[hidden]{display:none}
.tool--zoom{font-variant-numeric:tabular-nums; min-width:58px; padding:0 6px}

/* índice */
.menu{
  position:absolute; right:var(--gut); bottom:calc(100% + 4px); z-index:60;
  background:var(--paper); border:1px solid var(--line); padding:8px 0; min-width:min(360px,88vw);
  max-height:min(60vh,520px); overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.3s var(--ease);
  box-shadow:0 14px 44px rgba(31,33,33,.14);
}
.menu.open{opacity:1; visibility:visible; transform:none}
.menu button{display:block; width:100%; text-align:left; padding:12px 20px; transition:background .25s}
.menu button:hover,.menu button[aria-current="true"]{background:rgba(31,33,33,.05)}
.menu .m-t{display:block; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase}
.menu .m-s{display:block; font-size:11px; color:var(--muted); letter-spacing:.04em; margin-top:4px}
.menu .m-n{color:var(--accent); margin-right:9px}
/* libros de texto (el ensayo): titulos de capitulo largos, en minusculas y a tamano de lectura */
.libro--texto .menu .m-t{text-transform:none; letter-spacing:-.005em; font-size:14px; font-weight:400}

/* ---------- pie ---------- */
.foot{
  flex:0 0 auto; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
}
.foot a{display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid transparent; transition:border-color .3s}
.foot a:hover{border-color:var(--ink)}
.foot nav{display:flex; gap:22px; align-items:center}

/* ---------- incrustado: el ensayo dentro de la pagina del PFG (ensayo.html?incrustado) ----------
   El titulo, la descarga y el enlace a pantalla completa los pone esa pagina: aqui queda el libro con su barra.
   Nada desborda el marco, asi la rueda y el dedo siguen moviendo la pagina de fuera. */
.incrustado,.incrustado body{overflow:hidden}
.incrustado body{min-height:0}
.incrustado .top,.incrustado .foot{display:none}
.incrustado .reader__head span + span{display:none}

/* ---------- responsive ---------- */
@media (max-width:859px){
  /* el indice no se pega al borde de la pantalla aunque sus titulos sean largos */
  .menu{max-width:calc(100% - 2*var(--gut))}
  /* la descarga NO se esconde: es la unica via al PDF desde el movil.
     Pierde la etiqueta y se queda en un boton de 44 con la flecha. */
  .top nav .is-download .is-label{display:none}
  .top nav .is-download{min-width:44px; min-height:44px; padding:0; justify-content:center; gap:0}
  .top nav .is-download svg{width:15px; height:15px}
  .top nav .is-back{min-height:44px}
  .brand span{display:none}
  /* en el móvil la hoja manda: la cabecera del lector se reduce a una línea */
  .reader__head{padding-top:8px}
  .reader__head span + span{display:none}
  #hint{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .bar__label{order:-1; width:100%; justify-content:flex-start; flex:0 0 100%}
  .bar__inner{flex-wrap:wrap; row-gap:10px}
  .bar__tools{margin-left:auto}
  .foot{display:none}
}
@media (max-width:420px){
  .tool--label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .state__fill{transition:none}
  /* sin movimiento, el filete se queda quieto pero sigue avisando */
  .leaf.is-loading::before{background:var(--accent); opacity:.5}
}