* { box-sizing: border-box; }
:root[data-reader-appearance="immersive"] { --stage:#0c0d10; --chrome:rgba(19,21,25,.94); --chrome-solid:#17191d; --reader-ink:#f4f5f2; --reader-muted:#92979f; --reader-line:rgba(255,255,255,.11); --reader-accent:#7c9cff; --page-bed:#111318; }
:root[data-reader-appearance="oled"] { --stage:#000; --chrome:rgba(5,5,6,.96); --chrome-solid:#09090a; --reader-ink:#fff; --reader-muted:#929292; --reader-line:rgba(255,255,255,.14); --reader-accent:#a7bcff; --page-bed:#000; }
:root[data-reader-appearance="warm"] { --stage:#292722; --chrome:rgba(47,44,37,.96); --chrome-solid:#353128; --reader-ink:#f5eddd; --reader-muted:#b9ad99; --reader-line:rgba(255,239,211,.16); --reader-accent:#e7bc72; --page-bed:#24221e; }
.chapter-reader { margin:0; padding:82px 0 86px; min-height:100vh; overflow-x:hidden; background:var(--stage); color:var(--reader-ink); font-family:Inter,"Segoe UI",system-ui,sans-serif; transition:background .25s ease; }
.chapter-reader::after { content:""; position:fixed; z-index:850; inset:0; pointer-events:none; background:rgba(0,0,0,var(--reader-dim,0)); }
.hidden { display:none !important; }
.reading-progress { position:fixed; z-index:1200; inset:0 0 auto; height:3px; background:rgba(255,255,255,.07); }
.reading-progress span { display:block; width:0; height:100%; background:var(--reader-accent); transition:width .12s linear; }
.reader-header,.reader-footer { position:fixed; z-index:1000; display:flex; align-items:center; border:1px solid var(--reader-line); background:var(--chrome); color:var(--reader-ink); box-shadow:0 16px 50px rgba(0,0,0,.28); backdrop-filter:blur(18px); }
.reader-header { inset:12px 16px auto; min-height:58px; display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr); gap:14px; padding:8px 10px; border-radius:12px; transition:opacity .24s ease,transform .24s ease; }
.reader-header.hidden-header:not(:hover) { opacity:0; transform:translateY(calc(-100% - 18px)); pointer-events:none; }
.reader-footer.hidden-footer:not(:hover) { opacity:0; transform:translateY(calc(100% + 18px)); pointer-events:none; }
.reader-keyboard-controls .reader-header.hidden-header:focus-within,.reader-keyboard-controls .reader-footer.hidden-footer:focus-within { opacity:1; transform:none; pointer-events:auto; }
.controls-pinned .reader-header.hidden-header,.controls-pinned .reader-footer.hidden-footer { opacity:1; transform:none; pointer-events:auto; }
.reader-control-sensor { position:fixed; z-index:999; left:0; width:100%; height:28px; }
.reader-control-sensor-top { top:3px; }.reader-control-sensor-bottom { bottom:0; }
.reader-header-left,.reader-header-center,.reader-header-right { display:flex; align-items:center; min-width:0; gap:7px; }
.reader-header-right { justify-content:flex-end; color:var(--reader-muted); font-size:.72rem; }
.reader-title { min-width:0; display:grid; gap:1px; }
.reader-title span { color:var(--reader-muted); font-size:.57rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.reader-title strong { overflow:hidden; color:var(--reader-ink); font-size:.8rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.reader-icon-button,.btn-nav { min-width:44px; min-height:44px; border:0; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:transparent; color:var(--reader-ink); font:700 .75rem/1 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:background .18s,color .18s,opacity .18s; }
.btn-nav { padding:0 14px; border:1px solid var(--reader-line); }
.btn-nav.primary { border-color:transparent; background:var(--reader-accent); color:#11151d; }
.reader-icon-button:hover,.btn-nav:hover { background:rgba(255,255,255,.1); }
.reader-icon-button:focus-visible,.btn-nav:focus-visible,#chapter-select:focus-visible,.reading-settings input:focus-visible,.page-load-error button:focus-visible { outline:2px solid var(--reader-accent); outline-offset:3px; }
.reader-icon-button:disabled,.btn-nav:disabled { opacity:.32; cursor:not-allowed; }
.reader-icon-button svg,.btn-nav svg { width:18px; height:18px; flex:0 0 auto; }
#chapter-select { width:clamp(190px,25vw,360px); height:44px; padding:0 34px 0 12px; border:1px solid var(--reader-line); border-radius:9px; outline:0; background:var(--chrome-solid); color:var(--reader-ink); font:650 .76rem Inter,system-ui,sans-serif; }
#chapter-label { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-label { min-width:40px; color:var(--reader-muted); font-variant-numeric:tabular-nums; text-align:center; }
.pages-container { display:flex; flex-direction:column; align-items:center; gap:0; min-height:70vh; line-height:0; }
.page-wrapper { position:relative; width:min(100%,960px); min-height:52vh; margin:0; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--page-bed); contain:layout paint; }
.reader-page { display:block; width:100%; height:100%; margin:0; padding:0; object-fit:contain; opacity:0; transition:opacity .22s ease; }
.reader-page.loaded { opacity:1; }
.page-spinner,.page-placeholder,.page-load-error { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:140px; color:var(--reader-muted); font:650 .7rem/1.4 Inter,system-ui,sans-serif; line-height:1.4; }
.page-spinner span { width:18px; height:18px; border:2px solid var(--reader-line); border-top-color:var(--reader-accent); border-radius:50%; animation:reader-spin .8s linear infinite; }
.page-load-error { flex-direction:column; padding:32px; text-align:center; }
.page-load-error svg { width:24px; }
.page-load-error button { min-height:40px; padding:0 15px; border:1px solid var(--reader-line); border-radius:8px; background:transparent; color:var(--reader-ink); cursor:pointer; }
.reader-loading,.reader-empty { padding:64px 24px; color:var(--reader-muted); font:600 .78rem/1.55 Inter,system-ui,sans-serif; line-height:1.55; text-align:center; }
.reader-footer { inset:auto 16px 12px; min-height:54px; justify-content:space-between; padding:5px 7px 5px 16px; border-radius:12px; color:var(--reader-muted); font-size:.75rem; transition:opacity .24s ease,transform .24s ease; }
.footer-nav { display:flex; gap:5px; }
.connection-status { position:fixed; z-index:1300; top:82px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #d9a343; border-radius:9px; background:#2b2111; color:#f6d99f; font:700 .7rem Inter,sans-serif; }
.connection-status svg { width:16px; }
.reader-error,.locked-screen { width:min(92%,560px); margin:10vh auto; padding:clamp(28px,6vw,54px); display:flex; flex-direction:column; align-items:center; gap:12px; border:1px solid var(--reader-line); border-radius:18px; background:var(--chrome-solid); color:var(--reader-ink); line-height:1.5; text-align:center; }
.reader-error > svg { width:34px; color:#e47a72; }
.reader-error h2,.locked-screen h2 { margin:6px 0 0; font-size:1.55rem; line-height:1.15; }
.reader-error p,.locked-screen p { margin:0; color:var(--reader-muted); }
.locked-screen > span,.chapter-complete > span { color:var(--reader-accent); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.locked-screen > div:last-child,.chapter-complete > div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.lock-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:13px; background:var(--reader-accent); color:#15130f; }
.lock-icon svg { width:23px; }
.chapter-complete,.chapter-conversation { width:min(880px,calc(100% - 2rem)); margin:4rem auto 1.5rem; padding:clamp(1.3rem,4vw,2.3rem); border:1px solid var(--reader-line); border-radius:18px; background:var(--chrome-solid); color:var(--reader-ink); }
.chapter-complete { position:relative; text-align:center; box-shadow:0 22px 65px rgba(0,0,0,.22); }
.chapter-complete::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:18px 0 0 18px; background:var(--reader-accent); }
.chapter-complete h2 { margin:.35rem 0; font-size:1.8rem; }
.chapter-complete p { max-width:620px; margin:0 auto; color:var(--reader-muted); font-size:.8rem; line-height:1.6; }
.chapter-conversation-head span { color:var(--reader-accent); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.chapter-conversation-head h2 { margin:.35rem 0; font-size:1.55rem; }
.chapter-conversation-head p { margin:0 0 1.2rem; color:var(--reader-muted); font-size:.76rem; }
.spoiler-check { display:flex; align-items:center; gap:7px; color:var(--reader-muted); font-size:.72rem; }
.spoiler-check input { accent-color:var(--reader-accent); }
.form-status { min-height:1.2rem; margin:.5rem 0 0; color:var(--reader-muted); font-size:.7rem; }
.chapter-comments-list { display:grid; gap:.65rem; margin-top:1.5rem; }
.reader-comment { padding:1rem 0; border-top:1px solid var(--reader-line); }
.reader-comment > div { display:flex; justify-content:space-between; gap:1rem; }
.reader-comment strong { font-size:.76rem; }
.reader-comment time { color:var(--reader-muted); font-size:.62rem; }
.reader-comment p { color:var(--reader-muted); font-size:.78rem; line-height:1.6; }
.reader-comment.is-spoiler > p { filter:blur(9px); user-select:none; }
.reader-comment.spoiler-revealed > p { filter:none; user-select:text; }
.spoiler-curtain { display:flex; align-items:center; gap:7px; width:100%; min-height:44px; margin:.55rem 0; padding:.65rem; border:1px solid var(--reader-line); border-radius:9px; background:var(--stage); color:var(--reader-ink); cursor:pointer; }
.spoiler-curtain small { margin-left:auto; color:var(--reader-muted); }
.spoiler-revealed .spoiler-curtain { display:none; }
.report-comment { min-height:40px; border:0; background:transparent; color:var(--reader-muted); cursor:pointer; }
.chapter-reader .reading-settings { position:fixed !important; inset:0 !important; width:min(560px,calc(100vw - 2rem)) !important; min-width:min(560px,calc(100vw - 2rem)); max-width:560px !important; height:max-content; max-height:calc(100dvh - 2rem); margin:auto !important; overflow:auto; border:1px solid var(--reader-line); border-radius:18px; padding:0 !important; background:var(--chrome-solid); color:var(--reader-ink); box-shadow:0 28px 90px rgba(0,0,0,.55); }
.reading-settings::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.reading-settings form { display:grid; gap:1rem; padding:1.35rem; }
.settings-heading { position:relative; }
.settings-heading span { color:var(--reader-accent); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.reading-settings h2 { margin:.25rem 0 0; font-size:1.45rem; }
.chapter-jump { display:grid; gap:7px; }
.chapter-jump > label { color:var(--reader-muted); font-size:.68rem; font-weight:700; }
.chapter-jump > div:first-of-type { position:relative; }
.chapter-jump > div:first-of-type svg { position:absolute; left:11px; top:50%; width:16px; transform:translateY(-50%); color:var(--reader-muted); }
.chapter-jump input { width:100%; min-height:44px; padding:0 12px 0 35px; border:1px solid var(--reader-line); border-radius:9px; background:var(--stage); color:var(--reader-ink); }
.chapter-jump-results { display:grid; gap:4px; max-height:176px; overflow:auto; }
.chapter-jump-results button { min-height:40px; padding:7px 10px; border:0; border-radius:7px; background:transparent; color:var(--reader-ink); text-align:left; cursor:pointer; }
.chapter-jump-results button:hover { background:rgba(255,255,255,.08); }
.chapter-jump-results button:disabled { color:var(--reader-muted); opacity:.55; cursor:not-allowed; }
.chapter-jump-results p { margin:8px; color:var(--reader-muted); font-size:.68rem; }
.settings-heading > button { position:absolute; top:0; right:0; width:44px; height:44px; border:0; background:transparent; color:var(--reader-muted); cursor:pointer; }
.reading-settings fieldset { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; border:0; padding:0; }
.reading-settings legend { width:100%; margin-bottom:7px; color:var(--reader-muted); font-size:.68rem; font-weight:700; }
.reading-settings fieldset label { min-height:58px; display:grid; place-items:center; gap:4px; padding:7px 3px; border:1px solid var(--reader-line); border-radius:9px; color:var(--reader-muted); font-size:.65rem; font-weight:700; cursor:pointer; }
.reading-settings fieldset label:has(input:checked) { border-color:var(--reader-accent); color:var(--reader-ink); background:color-mix(in srgb,var(--reader-accent) 12%,transparent); }
.reading-settings input { accent-color:var(--reader-accent); }
.reader-dim-control { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:var(--reader-muted); font-size:.7rem; }
.reader-controls-check { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--reader-muted); font-size:.7rem; }
.reader-mobile-actions { display:none; grid-template-columns:1fr 1fr; gap:7px; }
.reader-mobile-actions button { position:static !important; width:auto !important; height:auto !important; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--reader-line); border-radius:9px; background:transparent; color:var(--reader-ink); }
.reader-mobile-actions button svg { width:17px; }
.reading-settings form > p { margin:0; color:var(--reader-muted); font-size:.63rem; }
.mobile-reader-menu { display:none; }
@media(min-width:761px) and (max-width:1100px){
  .reader-header{grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .reader-header-left{grid-column:1;grid-row:1}
  .reader-header-right{grid-column:2;grid-row:1}
  .reader-header-center{grid-column:1/-1;grid-row:2;justify-content:center}
  .chapter-reader{padding-top:128px}
  .reader-crumb-chapter,.reader-crumb-sep{display:none}
}
.chapter-reader[data-reader-gap="breathing"] .page-wrapper { margin-bottom:14px; }
.chapter-reader[data-reader-gap="seamless"] .page-wrapper { margin-bottom:0; }
@keyframes reader-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
  .chapter-reader { padding:112px 0 78px; }
  .reader-header { inset:7px 7px auto; grid-template-columns:1fr auto; gap:5px; border-radius:10px; padding:6px; }
  .reader-header-center { grid-column:1/-1; justify-content:center; }
  .reader-header-right { display:none; }
  #chapter-select { width:calc(100vw - 116px); }
  .reader-footer { inset:auto 7px 7px; padding:5px; border-radius:10px; }
  .reader-footer > span { display:none; }
  .footer-nav { width:100%; }
  .footer-nav .btn-nav { flex:1; }
  .mobile-reader-menu { position:fixed; z-index:1050; right:12px; bottom:72px; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--reader-line); border-radius:12px; background:var(--chrome-solid); color:var(--reader-ink); box-shadow:0 10px 30px rgba(0,0,0,.35); }
  .mobile-reader-menu svg { width:19px; }
  .chapter-reader .theme-toggle { right:68px !important; bottom:72px !important; width:48px !important; height:48px !important; }
  .page-wrapper { min-height:55vh; }
  .chapter-complete,.chapter-conversation { width:calc(100% - 1rem); margin-top:2.5rem; border-radius:13px; }
  .chapter-reader .reading-settings { inset:auto 0 0 !important; width:100% !important; min-width:0; max-width:none !important; max-height:min(86dvh,760px); margin:auto auto 0 !important; border-radius:18px 18px 0 0; }
  .reading-settings fieldset label,.reader-controls-check { color:#b8b8b2; }
  .reading-settings fieldset { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .reader-mobile-actions { display:grid; }
}
@media (prefers-reduced-motion:reduce) {
  .reader-header,.reader-footer,.reader-page,.reading-progress span,.chapter-reader { transition:none !important; }
  .page-spinner span { animation:none; border-top-color:var(--reader-line); }
  * { scroll-behavior:auto !important; }
}

/* ============================================================
   REDISEÑO INSANOS — CONTADOR HOLOGRÁFICO, DOTS, ZONAS Y PANEL
   ============================================================ */
.reader-page-counter{display:flex;flex-direction:column;align-items:center;gap:3px;margin-right:.2rem}
.reader-page-num{font:700 .68rem var(--in-display);color:var(--in-cyan);letter-spacing:.1em;text-shadow:0 0 8px rgba(0,229,255,.55)}
.reader-page-track{width:72px;height:2px;background:rgba(0,229,255,.12);overflow:hidden;border-radius:2px}
.reader-page-track i{display:block;height:100%;width:0;background:var(--in-cyan);box-shadow:0 0 6px var(--in-cyan);transition:width .3s ease}
.reader-crumb-sep{display:inline-flex;color:var(--in-muted)}
.reader-crumb-sep svg{width:11px;height:11px}
.reader-crumb-chapter{font-size:.78rem;font-weight:700;color:var(--in-text);max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Puntos de página del pie */
.footer-dots{flex:1;display:flex;justify-content:center;align-items:center;min-width:0}
#page-dots{display:flex;gap:3px;flex:1;max-width:520px}
#page-dots button{flex:1;height:4px;min-width:2px;min-height:4px;padding:0;border:0;background:rgba(255,255,255,.07);cursor:pointer;transition:background .15s;border-radius:2px}
#page-dots button.read{background:rgba(255,0,110,.45)}
#page-dots button.cur{background:var(--in-cyan);box-shadow:0 0 6px var(--in-cyan)}
#page-dots button:hover{background:rgba(255,0,110,.35)}

/* Toggle de modo + zonas de navegación paginada */
.reader-mode-toggle{display:flex;gap:.4rem;margin-left:.6rem}
.reader-mode-toggle .btn-nav[aria-pressed="true"]{border-color:var(--in-purple);color:#c78bff;background:rgba(144,0,255,.1)}
.reader-zone{position:fixed;top:96px;bottom:80px;width:32%;z-index:40;display:none;align-items:center;cursor:pointer}
.reader-zone-left{left:0;justify-content:flex-start;padding-left:1rem}
.reader-zone-right{right:0;justify-content:flex-end;padding-right:1rem}
.reader-zone-icon{width:44px;height:44px;min-width:44px;display:grid;place-items:center;background:rgba(255,0,110,.14);border:1px solid rgba(255,0,110,.3);color:var(--in-pink);opacity:0;transition:opacity .18s}
.reader-zone-icon svg{width:18px;height:18px}
.reader-zone:hover .reader-zone-icon,.reader-zone:focus-visible .reader-zone-icon{opacity:1}
body[data-reader-mode="paginated"] .reader-zone{display:flex}

/* Modo página a página: solo la página actual ocupa el escenario */
body[data-reader-mode="paginated"] .pages-container{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 200px)}
body[data-reader-mode="paginated"] .page-wrapper{display:none}
body[data-reader-mode="paginated"] .page-wrapper.is-current{display:flex;aspect-ratio:auto!important;min-height:0;justify-content:center;align-items:center}
body[data-reader-mode="paginated"] .page-wrapper.is-current .reader-page{height:auto;max-height:calc(100dvh - 170px);width:100%;max-width:100%}

/* El panel se superpone al borde sin recalcular el ancho de las páginas. */
body.chapter-reader #reading-settings{position:fixed!important;inset:64px 0 0 auto!important;width:min(400px,100vw)!important;min-width:0!important;max-width:400px!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important;margin:0!important;transform:translateX(105%);transition:transform .28s ease;z-index:2000;border:1px solid var(--in-line)!important;border-radius:0!important;background:rgba(8,8,15,.97)!important;backdrop-filter:blur(22px);overflow-y:auto;box-shadow:-30px 0 80px rgba(0,0,0,.5)!important;display:block}
body.chapter-reader #reading-settings.open{transform:translateX(0)}
body.chapter-reader #reading-settings .settings-heading{padding:1rem 3.6rem 1rem 1.05rem}
body.chapter-reader #reading-settings .settings-heading>button{top:.75rem;right:.65rem}
body.chapter-reader:has(#reading-settings.open) .music-fab,body.chapter-reader:has(#reading-settings.open) .mobile-reader-menu{visibility:hidden;pointer-events:none}
.reader-settings-body{padding:0 1.05rem 1.2rem;display:grid;gap:.9rem}
.reader-keys{display:grid;gap:.35rem;border:1px solid rgba(255,255,255,.06);padding:.7rem .8rem}
.reader-keys div{display:flex;justify-content:space-between;font-size:.68rem;color:var(--in-muted)}
.reader-keys kbd{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);padding:.05rem .4rem;font-family:var(--in-display);font-size:.56rem;color:var(--in-text)}

@media(max-width:900px){
  body.chapter-reader #reading-settings{inset:0 0 0 auto!important;height:100dvh!important;max-height:100dvh!important}
  .reader-crumb-chapter{display:none}
  .footer-dots{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.chapter-reader #reading-settings{transition:none!important}
  .reader-page-track i{transition:none!important}
}

/* ============================================================
   CONTROLES Y APARIENCIA DEL LECTOR
   ============================================================ */

/* El encabezado ocupa el ancho disponible; el pie limita su ancho y se adapta al área segura. */
body.chapter-reader .reader-header{inset:0 0 auto!important;min-height:50px!important;border-radius:0!important;padding:0 1.2rem!important;border-left:0!important;border-right:0!important;border-top:0!important}
body.chapter-reader .reader-footer{inset:auto 16px calc(12px + env(safe-area-inset-bottom,0px))!important;width:min(960px,calc(100% - 32px));margin-inline:auto;min-height:62px!important;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;border-radius:0!important;padding:8px 10px 8px 18px!important;border:1px solid var(--reader-line)!important;box-shadow:0 10px 36px rgba(0,0,0,.3)}
.reader-footer-context{display:flex;align-items:center;gap:24px;min-width:0}
.reader-pet-tools{width:min(960px,calc(100% - 2rem));margin:0 auto 2rem}
.reader-footer-context #footer-info{flex:0 0 auto;color:var(--reader-muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.reader-footer-context #page-dots{width:100%;max-width:300px;margin-left:auto;gap:4px}
body.chapter-reader .footer-nav{display:flex;align-items:center;gap:8px;width:auto!important;min-width:0}
body.chapter-reader .footer-nav>.btn-nav{flex:0 0 auto!important;min-height:44px;padding:0 18px;gap:8px;white-space:nowrap;font-size:.85rem;line-height:1.2;letter-spacing:.02em;border-color:var(--reader-line);background:rgba(255,255,255,.025);color:var(--reader-ink)}
body.chapter-reader .footer-nav>.reader-next{border-color:var(--reader-accent);background:color-mix(in srgb,var(--reader-accent) 13%,transparent);color:var(--reader-ink)}
body.chapter-reader .footer-nav>.btn-nav:disabled{opacity:.38}
@media(max-width:700px){
  body.chapter-reader .reader-footer{inset:auto 10px calc(10px + env(safe-area-inset-bottom,0px))!important;width:calc(100% - 20px);min-height:58px!important;grid-template-columns:minmax(0,1fr);gap:0;padding:6px!important}
  body.chapter-reader .reader-footer-context{display:none}
  body.chapter-reader .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%!important;gap:8px}
  body.chapter-reader .footer-nav>.btn-nav{width:100%;min-width:0;padding:0 12px}
}

/* En escritorio nombramos el retorno; en móvil queda el icono para liberar espacio. */
body.chapter-reader #reader-back{gap:.4rem}
body.chapter-reader #reader-back::after{content:"Volver";font:600 .72rem Rajdhani,system-ui,sans-serif;letter-spacing:.05em}
@media(max-width:700px){body.chapter-reader #reader-back::after{content:none}}


body.chapter-reader .reader-icon-button:hover,body.chapter-reader .btn-nav:hover{color:var(--in-pink)!important;background:rgba(255,0,110,.06)!important;border-color:rgba(255,0,110,.3)!important}
body.chapter-reader .reader-icon-button.active{color:var(--in-pink)}

/* El violeta distingue la opción elegida del rosa usado para pasar el puntero. */
body.chapter-reader .reading-settings fieldset label:has(input:checked){border-color:#9000FF!important;background:rgba(144,0,255,.08)!important}
body.chapter-reader .reading-settings fieldset label:has(input:checked) span{color:#c78bff}

/* La textura es decorativa: deja pasar los clics y se retira con movimiento reducido. */
body.chapter-reader .reader-scanlines{position:fixed;inset:0;z-index:840;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px)}
@media(prefers-reduced-motion:reduce){body.chapter-reader .reader-scanlines{display:none}}

/* Los laterales reservan un centro libre para interactuar sin cambiar de página. */
body.chapter-reader .reader-zone{width:35%!important}
/* En modo scroll las zonas también funcionan: llevan a la página siguiente/anterior */
body[data-reader-mode="scroll"] .reader-zone{display:flex}
body[data-reader-mode="scroll"] .reader-zone-left{justify-content:flex-start}
body[data-reader-mode="scroll"] .reader-zone-right{justify-content:flex-end}


:root[data-reader-appearance="oled"]{--reader-accent:#00E5FF;--reader-line:rgba(0,229,255,.14)}
:root[data-reader-appearance="warm"]{--reader-accent:#FFD600;--reader-line:rgba(255,214,0,.16)}
:root[data-reader-appearance="immersive"]{--reader-accent:#FF006E;--reader-line:rgba(255,0,110,.2)}
/* El ambiente del lector prevalece sobre el fondo del tema general. */
body.chapter-reader{background:var(--stage)!important;color:var(--reader-ink)!important}
body.chapter-reader .reader-header,body.chapter-reader .reader-footer{background:var(--chrome)!important;color:var(--reader-ink)!important;border-color:var(--reader-line)!important}
body.chapter-reader #reading-settings{background:var(--chrome-solid)!important}

/* Los controles mantienen la tipografía INSANOS aunque hereden estilos generales. */
body.chapter-reader .btn-nav,body.chapter-reader #chapter-select,body.chapter-reader .reader-loading,body.chapter-reader .reader-empty,body.chapter-reader .page-spinner,body.chapter-reader .page-placeholder,body.chapter-reader .page-load-error,body.chapter-reader .connection-status{font-family:Rajdhani,system-ui,sans-serif!important}

/* Los componentes compartidos no deben reintroducir esquinas redondas en el lector. */
body.chapter-reader .connection-status,body.chapter-reader .reader-error,body.chapter-reader .locked-screen,body.chapter-reader .lock-icon,body.chapter-reader .page-load-error button,body.chapter-reader .chapter-jump input,body.chapter-reader .reading-settings fieldset label,body.chapter-reader .mobile-reader-menu,body.chapter-reader .chapter-jump-results button{border-radius:0!important}

/* El zoom escala el tamaño ya ajustado a la pantalla, también en móvil. */
body.chapter-reader{--reader-zoom:1;--reader-page-limit:1080px;--reader-page-span:94%;--reader-page-height:max(180px,calc(100dvh - 170px))}
body.chapter-reader[data-reader-width="focused"]{--reader-page-limit:760px;--reader-page-span:86%}
body.chapter-reader[data-reader-width="wide"]{--reader-page-limit:1440px;--reader-page-span:100%}
body.chapter-reader .pages-container{width:100%;overflow-x:auto;align-items:stretch}
body.chapter-reader .page-wrapper{width:calc(min(var(--reader-page-span),var(--reader-page-limit)) * var(--reader-zoom));margin-inline:auto;flex-shrink:0}
body.chapter-reader .page-wrapper .reader-page{max-width:100%!important}
/* En paginado se escala el tamaño que cabe al 100%. El exceso de zoom puede
   recorrerse dentro del escenario sin ensanchar el documento. */
body.chapter-reader[data-reader-mode="paginated"] .page-wrapper.is-current{width:calc(min(var(--reader-page-span),var(--reader-page-limit),calc(var(--reader-page-height) * var(--reader-page-ratio,.75))) * var(--reader-zoom))}
body.chapter-reader[data-reader-mode="paginated"] .page-wrapper.is-current .reader-page{max-height:none}