:root{
  --bg:#dbe8f2; --panel:#eff5fa; --paper:#f6f3ee; --ink:#1e2830; --maroon:#7ea8c5; --gold:#b89a55; --muted:#8b9caf;
  --shadow:0 28px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:#183042;font-family:Inter,Segoe UI,Arial,sans-serif}
body{overflow:hidden}
button,a{font:inherit}
button{border:0}
svg{display:block;width:1.2rem;height:1.2rem;fill:currentColor}
.app-shell{height:100dvh;display:grid;grid-template-rows:64px 1fr 48px;background:radial-gradient(circle at 50% 20%,#eef6fb 0,#d8e6f1 45%,#bfd1e0 100%)}
.topbar,.bottombar{display:flex;align-items:center;gap:16px;padding:0 max(16px,env(safe-area-inset-left));background:rgba(234,242,248,.88);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.08);z-index:20}
.topbar{justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
.bottombar{border-top:1px solid rgba(255,255,255,.07);justify-content:center}
.publication-meta{display:flex;flex-direction:column;min-width:0}.publication-meta strong{font-family:Georgia,'Times New Roman',serif;font-size:18px;letter-spacing:.2px}.publication-meta span{font-size:12px;color:#5d7285;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:8px}.icon-button,.share-button,.zoom-control{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#f7fbff;background:#7ea8c5;border:1px solid rgba(255,255,255,.35);transition:.18s ease}
.icon-button{width:40px;height:40px;border-radius:12px}.icon-button:hover,.share-button:hover{background:#6997b6}.icon-button:active,.share-button:active{transform:translateY(1px)}
.icon-button.light{background:#ffffff;color:#355067;border-color:#d4dee7}.icon-button.light:hover{background:#fff}
.share-button{gap:8px;height:40px;border-radius:12px;padding:0 14px}.share-button span{font-size:13px;font-weight:700}
.sound-off{display:none}.sound-muted .sound-on{display:none}.sound-muted .sound-off{display:block}
.reader{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:22px 70px 18px;overflow:hidden}
.stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:2600px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book{position:relative;width:min(78vw,1120px);aspect-ratio:2110/1491;max-height:calc(100dvh - 160px);transform-style:preserve-3d;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2));transition:width .25s ease,aspect-ratio .25s ease}
.book.mobile{width:min(86vw,560px);aspect-ratio:1055/1491}
.page-slot,.flip-leaf{position:absolute;top:0;height:100%;background:#efe9df;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(47,35,38,.08)}
.page-slot{width:50%}.book.mobile .page-slot{width:100%}.page-slot.left{left:0;border-radius:5px 0 0 5px}.page-slot.right{right:0;border-radius:0 5px 5px 0}.book.mobile .page-slot.left{display:none}.book.mobile .page-slot.right{left:0;right:auto;border-radius:5px}
.page-slot.blank{background:linear-gradient(100deg,#ece6dc,#faf7f1)}
.page-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.spine{position:absolute;z-index:8;left:50%;top:0;width:22px;height:100%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(20,12,14,.16),rgba(255,255,255,.09) 40%,rgba(20,12,14,.18));opacity:.7;mix-blend-mode:multiply}.book.mobile .spine{display:none}
.flip-leaf{z-index:12;width:50%;right:0;transform-origin:left center;transform-style:preserve-3d;overflow:visible;background:transparent;will-change:transform}.book.mobile .flip-leaf{width:100%;left:0;right:auto}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f5f1e8;overflow:hidden;box-shadow:0 0 0 1px rgba(80,60,64,.08)}
.flip-face.front{transform:rotateY(0deg)}.flip-face.back{transform:rotateY(180deg)}
.flip-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 12%,transparent 84%,rgba(0,0,0,.1));opacity:.12}
.flip-next{transition:transform .82s cubic-bezier(.32,.02,.18,1);transform:rotateY(-180deg)}
.flip-prev{transition:transform .82s cubic-bezier(.32,.02,.18,1);transform:rotateY(0deg)!important}
.book.mobile .flip-leaf.next-mobile{transform-origin:left center}.book.mobile .flip-leaf.prev-mobile{transform-origin:right center}
.book.mobile .flip-leaf.prev-mobile.flip-prev-out{transition:transform .74s cubic-bezier(.32,.02,.18,1);transform:rotateY(180deg)}
.gesture-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.48);letter-spacing:.03em;pointer-events:none;opacity:0;transition:opacity .25s ease}.gesture-hint.show{opacity:1}
.nav-arrow{position:absolute;top:50%;z-index:15;transform:translateY(-50%);width:50px;height:64px;border-radius:14px;display:grid;place-items:center;background:rgba(126,168,197,.82);color:#163047fff;border:1px solid rgba(255,255,255,.24);cursor:pointer;backdrop-filter:blur(10px);transition:.18s ease}.nav-arrow:hover{background:rgba(85,130,162,.92);transform:translateY(-50%) scale(1.03)}.nav-arrow:disabled{opacity:.22;pointer-events:none}.nav-prev{left:12px}.nav-next{right:12px}.nav-arrow svg{width:30px;height:30px}
.page-status{min-width:74px;text-align:center;font-size:12px;color:#31526d;font-weight:700}.progress-track{width:min(420px,48vw);height:4px;border-radius:99px;background:rgba(49,82,109,.12);overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--maroon),#5d8cae);transition:width .25s ease}.download-link{margin-left:8px;text-decoration:none;color:#31526d;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px}.download-link:hover{color:#163047}.download-link svg{width:16px;height:16px}
.drawer{position:fixed;inset:0;z-index:80;pointer-events:none}.drawer.open{pointer-events:auto}.drawer-backdrop,.zoom-backdrop{position:absolute;inset:0;background:rgba(22,48,71,.32);opacity:0;transition:.24s ease;backdrop-filter:blur(4px)}.drawer.open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;top:0;right:0;width:min(420px,92vw);height:100%;background:#f8fbfe;color:#203244;transform:translateX(102%);transition:.28s ease;box-shadow:-24px 0 60px rgba(0,0,0,.3);display:flex;flex-direction:column}.drawer.open .drawer-panel{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid #d8cfc6}.drawer-head div{display:flex;flex-direction:column}.drawer-head strong{font-family:Georgia,serif;font-size:24px;color:#4b7b9e}.drawer-head span{font-size:12px;color:#746a6c;margin-top:4px}.thumb-grid{overflow:auto;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.thumb-card{padding:0;background:transparent;color:#2b2325;text-align:left;cursor:pointer;border-radius:8px}.thumb-card .thumb-frame{border:1px solid #d8cec7;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 5px 16px rgba(42,28,31,.08);transition:.18s ease}.thumb-card:hover .thumb-frame{transform:translateY(-2px);box-shadow:0 8px 24px rgba(42,28,31,.14)}.thumb-card.active .thumb-frame{outline:3px solid #7ea8c5;outline-offset:2px}.thumb-card img{width:100%;display:block;aspect-ratio:1055/1491;object-fit:contain;background:#f5f1ea}.thumb-card span{display:block;font-size:12px;font-weight:700;margin-top:7px}.thumb-card small{display:block;font-size:11px;color:#817679;margin-top:2px}
.zoom-modal{position:fixed;inset:0;z-index:90;display:none}.zoom-modal.open{display:block}.zoom-modal.open .zoom-backdrop{opacity:1}.zoom-toolbar{position:absolute;z-index:3;right:18px;top:18px;display:flex;gap:6px;align-items:center;background:rgba(227,237,245,.95);padding:7px;border-radius:12px;backdrop-filter:blur(10px)}.zoom-control{width:36px;height:36px;border-radius:8px;font-size:20px}.zoom-toolbar span{min-width:58px;text-align:center;font-size:12px;font-weight:700}.zoom-viewport{position:absolute;z-index:2;inset:0;overflow:auto;padding:76px 30px 30px;display:flex;align-items:flex-start;justify-content:center}.zoom-viewport img{display:block;width:min(92vw,860px);height:auto;transform-origin:top center;transition:width .12s ease;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#fff;user-select:none}
.toast{position:fixed;left:50%;bottom:66px;z-index:120;transform:translate(-50%,16px);background:#edf5fb;color:#26435a;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.22s ease;box-shadow:0 10px 30px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
  .app-shell{grid-template-rows:56px 1fr 46px}.topbar{padding:0 10px}.publication-meta strong{font-size:15px}.publication-meta span{font-size:10px}.top-actions{gap:5px}.icon-button{width:36px;height:36px;border-radius:10px}.share-button{width:36px;padding:0}.share-button span{display:none}.reader{padding:12px 42px 10px}.nav-arrow{width:38px;height:52px;border-radius:11px}.nav-arrow svg{width:24px;height:24px}.nav-prev{left:3px}.nav-next{right:3px}.gesture-hint{font-size:10px;bottom:0}.bottombar{padding:0 10px;gap:9px}.progress-track{width:38vw}.download-link{margin-left:0}.zoom-viewport{padding:66px 10px 20px}.zoom-viewport img{width:96vw}
}
@media (max-width:520px){.top-actions #fullscreenBtn{display:none}.publication-meta span{max-width:128px}.reader{padding-left:36px;padding-right:36px}.thumb-grid{gap:10px;padding:12px}.drawer-head{padding:16px}}
@media (prefers-reduced-motion:reduce){.flip-next,.flip-prev,.flip-prev-out,.drawer-panel,.drawer-backdrop,.progress-fill{transition-duration:.01ms!important}}

/* Sello editorial discreto; no interfiere con los controles del visor. */
.edition-seal{margin:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 13px;border:1px solid rgba(126,168,197,.48);border-radius:100px;color:#4d7ea1;background:rgba(126,168,197,.12);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.edition-seal:before{content:'';width:6px;height:6px;border-radius:50%;background:#7ea8c5;box-shadow:0 0 0 3px rgba(126,168,197,.16)}
@media(max-width:820px){.edition-seal{display:none}}