:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; background:#181818; color:#ecebe7; --muted:#a09f99; --line:#ffffff1c; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border:0; cursor:pointer; background:transparent; padding:0; }
a { color:inherit; text-decoration:none; }
button:disabled, a[aria-disabled="true"] { opacity:.22; cursor:default; pointer-events:none; }
button:not(:disabled):hover, .download:hover { background:#ffffff0c; color:#fff; }
:focus-visible { outline:1px solid #dfdbcf; outline-offset:4px; }
[hidden] { display:none!important; }
svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#app { height:100%; height:100dvh; display:grid; grid-template-rows:88px minmax(0,1fr) 84px; background:#181818; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin:0 42px; border-bottom:1px solid var(--line); gap:20px; }
.wordmark { font-size:29px; letter-spacing:.025em; font-weight:500; position:relative; line-height:1; }
.wordmark span { position:absolute; font-size:9px; right:-10px; top:-2px; }
.edition { font-size:10px; letter-spacing:.22em; color:var(--muted); display:flex; align-items:center; gap:18px; }
#demoBadge { font-size:8px; letter-spacing:.12em; border:1px solid #ffffff24; padding:5px 7px; }
.download { display:flex; align-items:center; gap:11px; font-size:11px; letter-spacing:.03em; min-height:44px; padding:0 10px; margin-right:-10px; }
#stage { position:relative; min-height:0; }
#viewerContainer { position:absolute; inset:26px 88px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#555 #181818; outline-offset:3px; }
#viewer { width:max-content; min-width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; padding:0; --page-bg-color:#fff; }
#viewer .spread { display:flex; align-items:center; justify-content:center; margin:0; }
#viewer .page { flex-shrink:0; margin:0; border:0; }
/* PDF.js EVEN forma la pareja 2–3. El espacio invisible reserva la izquierda de la portada. */
#viewer[data-spread="true"] .spread:has(.page[data-page-number="1"])::before { content:""; width:var(--single-width,0px); flex-shrink:0; }
#viewer[data-last-even="true"] .spread::after { content:""; width:var(--single-width,0px); flex-shrink:0; }
.side-nav { width:48px; height:64px; position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; }
.side-nav.previous { left:23px; } .side-nav.next { right:23px; }
.side-nav svg { width:25px; height:25px; }
.status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:#181818; }
.eyebrow { font-size:9px; letter-spacing:.24em; color:var(--muted); }
.status h1 { font-size:25px; font-weight:400; margin:22px 0 4px; letter-spacing:-.025em; }
.status p { color:var(--muted); font-size:13px; line-height:1.6; max-width:430px; }
progress { width:180px; height:2px; border:0; margin-top:20px; accent-color:#dedbd0; }
progress::-webkit-progress-bar { background:#393934; } progress::-webkit-progress-value { background:#dedbd0; }
#retry { border:1px solid #ffffff40; padding:12px 18px; font-size:12px; margin-top:16px; }
.toolbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin:0 42px; border-top:1px solid var(--line); }
.reading-hint { font-size:9px; letter-spacing:.14em; color:var(--muted); }
.pagination, .tools { display:flex; align-items:center; }
.pagination button, .tools button { min-width:44px; height:44px; display:grid; place-items:center; }
.pagination { gap:7px; }
#pageCounter { min-width:98px; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.09em; text-align:center; }
.tools { justify-self:end; }
.tools .zoom-value { font-size:10px; min-width:50px; font-variant-numeric:tabular-nums; }
.divider { height:16px; border-left:1px solid var(--line); margin:0 14px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-script { position:fixed; inset:40% 10%; background:#181818; text-align:center; padding:32px; }
#app.immersive { position:fixed; inset:0; z-index:2147483647; }
#app.immersive, #app:fullscreen { grid-template-rows:64px minmax(0,1fr) 66px; }
@media (max-width:959px), (orientation:portrait) {
  #app { grid-template-rows:72px minmax(0,1fr) 112px; }
  .topbar { margin:0 20px; }
  .wordmark { font-size:25px; }
  .edition { font-size:9px; gap:8px; }
  #demoBadge { display:none; }
  .download { padding:0 8px; } .download span { display:none; }
  #viewerContainer { inset:18px 18px; }
  .side-nav, .reading-hint { display:none; }
  .toolbar { margin:0 18px; gap:0; grid-template-columns:1fr; justify-items:center; align-content:center; }
  .tools { justify-self:center; }
  .pagination { gap:18px; }
  .divider { margin:0 12px; }
  #app.immersive, #app:fullscreen { grid-template-rows:56px minmax(0,1fr) 100px; }
}
@media (max-height:540px) and (orientation:landscape) {
  #app { grid-template-rows:48px minmax(0,1fr) 52px; }
  .toolbar { display:flex; justify-content:space-between; }
  .reading-hint { display:none; }
  #viewerContainer { inset:8px 60px; }
  .topbar, .toolbar { margin-inline:20px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }