/* =====================================================================
   LECTURIA WEB — estilos base
   Estética: blanca, tipográfica (Montserrat + DM Mono + Lato), acento
   verde #6ABF1F. Tema claro/oscuro por variables CSS.
   ===================================================================== */

:root{
  --bg:#FFFFFF; --ink:#1C1C1C; --ink-soft:#5c5c5c; --ink-faint:#9b9b9b;
  --line:#E6E6E6; --panel:#F4F4F2; --card:#FFFFFF;
  --moss:#6ABF1F;      /* acento vivo: rellenos y elementos grandes */
  --moss-tx:#4E8F14;   /* verde legible: textos finos sobre blanco */
  --moss-soft:#EEF7E2;
  --danger:#b23a3a;
}
:root[data-theme="dark"]{
  --bg:#121311; --ink:#F2F2EF; --ink-soft:#AAAAA4; --ink-faint:#6f7268;
  --line:#2A2C27; --panel:#1A1B18; --card:#1A1B18;
  --moss:#7FD42A; --moss-tx:#8FDB45; --moss-soft:#1C2712;
  --danger:#d98a8a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Lato',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;transition:background .35s,color .35s}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.mono{font-family:'DM Mono',monospace;font-weight:300}
[hidden]{display:none !important}

/* ---------- barra superior ---------- */
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px)}
.bar{display:flex;align-items:center;height:96px;padding-top:14px}
.brand{font-family:'Lato';font-weight:700;font-size:17px}
.brand .b{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink);margin-right:6px;vertical-align:middle}
/* ---- logo (una sola pieza, del PSD): claro / oscuro ---- */
.logo{display:flex;align-items:center}
.logo .logo-img{height:34px;width:auto;display:block}
.logo .logo-dark{display:none}
:root[data-theme="dark"] .logo .logo-light{display:none}
:root[data-theme="dark"] .logo .logo-dark{display:block}
.spacer{flex:1}
nav.top{display:flex;align-items:center;gap:24px}
nav.top a{color:var(--ink);text-decoration:none;font-size:15px;cursor:pointer;background:none;border:none;font-family:inherit}
nav.top a.active{font-weight:700}
.help-link{font-family:'DM Mono',monospace;font-size:13px;border:1.5px solid var(--ink);padding:7px 14px;border-radius:100px;cursor:pointer;transition:.2s;background:none;color:var(--ink)}
.help-link:hover{background:var(--ink);color:var(--bg)}
.theme-btn{width:38px;height:38px;border:1.5px solid var(--ink);background:transparent;border-radius:50%;cursor:pointer;color:var(--ink);font-size:15px;display:grid;place-items:center;transition:.2s;margin-left:6px}
.theme-btn:hover{background:var(--ink);color:var(--bg)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center;padding:46px 0 20px}
.hero h1{font-family:'Montserrat';font-weight:900;font-size:clamp(46px,7vw,88px);line-height:.96;letter-spacing:-.02em}
.hero .sub{margin-top:24px;font-size:16px}
.hero .char{width:100%;display:block;mix-blend-mode:multiply}
:root[data-theme="dark"] .hero .char{mix-blend-mode:screen;filter:invert(1)}

.voicebox{display:inline-flex;align-items:center;gap:14px;margin-top:26px;background:var(--moss-soft);
  border:1.5px solid var(--moss);border-radius:16px;padding:14px 20px;cursor:pointer}
.voicebox .mic{width:40px;height:40px;border-radius:50%;background:var(--moss);display:grid;place-items:center;flex:none}
.voicebox .mic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .voicebox .mic svg{stroke:#121311}
.voicebox .txt{font-family:'DM Mono',monospace;font-size:13px;color:var(--moss-tx);line-height:1.4}
.voicebox .txt b{font-weight:500;display:block;font-size:14px}

/* ---------- cómo funciona ---------- */
.how{padding:44px 0 30px}
.how .eyebrow{font-family:'DM Mono',monospace;font-size:13px;color:var(--moss-tx);margin-bottom:8px}
.how h2{font-family:'Montserrat';font-weight:900;font-size:38px;margin-bottom:34px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step .num{font-family:'Montserrat';font-weight:900;font-size:40px;color:var(--moss);line-height:1;margin-bottom:12px}
.step h3{font-family:'Montserrat';font-weight:800;font-size:20px;margin-bottom:8px}
.step p{font-size:15px;line-height:1.65;max-width:34ch}
.step p .cmd{font-family:'DM Mono',monospace;color:var(--moss-tx);font-weight:500}

/* ---------- CTA ---------- */
.cta{margin:22px 0 40px;display:flex;justify-content:center}
.cta button{font-family:'Montserrat';font-weight:800;font-size:25px;color:var(--moss-tx);background:transparent;border:none;cursor:pointer;padding:22px 58px;position:relative;transition:color .2s}
.cta button>span:not(.pill){position:relative;z-index:1}
.cta .pill{position:absolute;inset:0;border:3px solid var(--moss);border-radius:60px;transition:background .2s}
.cta button:hover{color:#fff}
.cta button:hover .pill{background:var(--moss)}
:root[data-theme="dark"] .cta button:hover{color:#0d0d0b}


/* ---------- biblioteca ---------- */
.lib-head{display:flex;align-items:flex-end;gap:16px;padding:10px 0 6px}
.lib-head h2{font-family:'Montserrat';font-weight:900;font-size:40px}
.lib-head h2 .exq{color:var(--moss)}
.lib-head .sub{margin-bottom:7px}
.filters{display:flex;gap:10px;padding:18px 0 26px;flex-wrap:wrap;align-items:center}
.filters button{font-family:'DM Mono',monospace;font-size:13px;background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);padding:8px 16px;border-radius:100px;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters .n{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-faint)}
.filters .filters-spacer{margin-left:auto}
.filters .add-btn{font-family:'DM Mono',monospace;font-size:13px;background:var(--moss);border:1.5px solid var(--moss);color:#fff;padding:8px 16px;border-radius:100px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:5px}
.filters .add-btn:hover{filter:brightness(1.06)}
:root[data-theme="dark"] .filters .add-btn{color:#0d0d0b}
.filters .add-btn .add-plus{font-size:16px;line-height:1;font-weight:700}
.filters .add-btn.ghost{background:transparent;border-color:var(--moss);color:var(--moss-tx)}
.filters .add-btn.ghost:hover{background:var(--moss-soft);filter:none}

.subhead{font-family:'Montserrat';font-weight:800;font-size:16px;margin:26px 0 16px;display:flex;gap:10px;align-items:baseline}
.subhead .tag{font-family:'DM Mono',monospace;font-weight:300;font-size:12px;color:var(--ink-faint)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:30px 24px}
.book{cursor:pointer}
.book .cov{position:relative;aspect-ratio:3/4.3;border-radius:4px;overflow:hidden;border:1.5px solid var(--ink);transition:transform .2s;background:var(--panel)}
.book:hover .cov{transform:translateY(-4px)}
.book .cov img{width:100%;height:100%;object-fit:cover;display:block}
.book .art{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center}
.book .art .t{font-family:'Montserrat';font-weight:800;font-size:19px;line-height:1.08}
.book .art .s{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:8px}
.book .badge{position:absolute;top:8px;left:8px;font-family:'DM Mono',monospace;font-size:9px;background:var(--ink);color:var(--bg);padding:2px 7px;border-radius:3px}
.book .pct{position:absolute;bottom:0;left:0;right:0;height:5px;background:rgba(0,0,0,.10)}
.book .pct i{display:block;height:100%;background:var(--moss)}
.book .cap{margin-top:11px;font-weight:700;font-size:15px}
.book .meta{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-faint);margin-top:3px}

/* zona vacía / arrastrar */
.empty{border:2px dashed var(--line);border-radius:16px;padding:50px 30px;text-align:center;color:var(--ink-faint);margin:10px 0 30px}
.empty.drag{border-color:var(--moss);background:var(--moss-soft)}
.empty h3{font-family:'Montserrat';font-weight:800;font-size:20px;color:var(--ink);margin-bottom:8px}
.empty p{font-size:14px;max-width:44ch;margin:0 auto 18px}
.empty .btn{font-family:'Montserrat';font-weight:700;font-size:15px;background:var(--moss);color:#08110a;border:none;
  border-radius:100px;padding:12px 26px;cursor:pointer}
:root[data-theme="dark"] .empty .btn{color:#08110a}

footer.foot{border-top:1px solid var(--line);margin-top:56px;padding:28px 0}
footer.foot .in{display:flex;gap:24px;justify-content:center;font-family:'DM Mono',monospace;font-size:13px;color:var(--ink-soft);align-items:center;flex-wrap:wrap}
footer.foot .in a{color:var(--ink-soft);cursor:pointer;text-decoration:none;background:none;border:none;font-family:inherit;font-size:13px}

/* ---------- panel de ayuda ---------- */
.help-overlay{position:fixed;inset:0;background:rgba(20,20,18,.55);backdrop-filter:blur(3px);z-index:60;padding:40px 20px;overflow:auto}
.help-panel{max-width:920px;margin:0 auto;background:var(--bg);border:1.5px solid var(--ink);border-radius:16px;padding:36px 40px}
.help-panel .hh{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.help-panel h2{font-family:'Montserrat';font-weight:900;font-size:34px}
.help-panel h2 .exq{color:var(--moss)}
.help-panel .hclose{margin-left:auto;width:40px;height:40px;border:1.5px solid var(--ink);background:transparent;border-radius:50%;cursor:pointer;font-size:17px;color:var(--ink)}
.help-panel .hsub{font-family:'DM Mono',monospace;font-size:13px;color:var(--ink-soft);margin-bottom:26px}
.hgroup{margin-bottom:24px}
.hgroup h3{font-family:'Montserrat';font-weight:800;font-size:15px;color:var(--moss-tx);margin-bottom:12px}
.hrow{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.hrow .voice{font-family:'DM Mono',monospace;font-size:13px;color:var(--ink);font-weight:500}
.hrow .desc{font-size:13.5px;color:var(--ink-soft)}
.hrow .key{font-family:'DM Mono',monospace;font-size:12px;border:1.5px solid var(--line);border-radius:6px;padding:3px 9px;color:var(--ink-soft);justify-self:end;white-space:nowrap}
@media(max-width:640px){.hrow{grid-template-columns:1fr;gap:2px}.hrow .key{justify-self:start}}

/* ---------- visor ---------- */
.view{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column}
.rtop{display:flex;align-items:center;gap:16px;height:64px;padding:0 26px;border-bottom:1px solid var(--line)}
.rtop .rtitle{font-family:'Montserrat';font-weight:800;font-size:16px}
.rtop .rmeta{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-faint)}
.icon-btn{width:40px;height:40px;border:1.5px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;color:var(--ink);display:grid;place-items:center;font-size:15px;transition:.2s}
.icon-btn:hover{border-color:var(--ink)}
.rstage{flex:1;display:grid;place-items:center;padding:30px;overflow:auto;background:var(--panel)}
.rstage .placeholder{color:var(--ink-faint);font-family:'DM Mono',monospace;font-size:13px;text-align:center;max-width:40ch}
.rbottom{display:flex;align-items:center;justify-content:center;gap:22px;height:66px;border-top:1px solid var(--line)}
.pagecount{font-family:'DM Mono',monospace;font-size:14px;min-width:80px;text-align:center;color:var(--ink-soft)}
.voice-hint{display:inline-flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:13px;color:var(--moss-tx)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--moss);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--moss);opacity:.5;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.6);opacity:0}}

/* aviso / toast */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:var(--bg);font-family:'DM Mono',monospace;font-size:13px;padding:12px 20px;border-radius:100px;
  z-index:80;transition:opacity .25s,transform .25s;pointer-events:none;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:820px){
  .wrap{padding:0 22px}
  .hero{grid-template-columns:1fr;gap:10px}.hero .charwrap{order:-1;max-width:420px;margin:0 auto}
  .steps{grid-template-columns:1fr;gap:26px}
  nav.top a:not(.active){display:none}
}

/* =====================================================================
   FASE 2 — Visor: escenario, páginas, encuadre, miniaturas
   ===================================================================== */

/* el escenario ocupa todo el alto entre barra superior e inferior */
.rstage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--panel)}
:root[data-theme="dark"] .rstage{background:#0d0e0c}

.stage-scroll{position:absolute;inset:0;overflow:auto;display:flex;
  align-items:center;justify-content:center;padding:24px}
.stage-scroll.cropping{cursor:crosshair}

.page-holder{display:flex;gap:14px;align-items:flex-start;justify-content:center;
  transition:transform .18s ease-out;will-change:transform}
.page-holder.two{gap:6px}

.pg{background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.14);line-height:0;border-radius:2px;overflow:hidden}
:root[data-theme="dark"] .pg{box-shadow:0 6px 34px rgba(0,0,0,.5)}
.pg canvas,.pg img{display:block;max-width:none}

/* placeholder / error dentro del escenario */
.rstage .placeholder{margin:auto;max-width:520px;text-align:center;color:var(--ink-soft);
  font-family:'DM Mono',monospace;font-size:14px;line-height:1.7;padding:40px}
.rstage .placeholder.err{color:var(--danger)}

/* rectángulo de encuadre mientras se arrastra */
.crop-rect{position:absolute;border:2px solid var(--moss);background:color-mix(in srgb,var(--moss) 14%,transparent);
  pointer-events:none;z-index:5;border-radius:2px}
.crop-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;
  background:var(--ink);color:var(--bg);font-family:'DM Mono',monospace;font-size:12px;
  padding:8px 14px;border-radius:100px;opacity:.92}

/* botón de icono en estado activo (marcado, vista doble) */
.icon-btn.on{background:var(--moss);color:#fff;border-color:var(--moss)}
:root[data-theme="dark"] .icon-btn.on{color:#121311}

/* ---------- índice de miniaturas ---------- */
.thumbs{position:absolute;inset:0;z-index:20;overflow:auto;padding:24px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;align-content:start}
.thumbs-loading{grid-column:1/-1;text-align:center;color:var(--ink-soft);
  font-family:'DM Mono',monospace;font-size:13px;padding:40px}
.thumb{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:8px;
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px;font:inherit}
.thumb:hover{border-color:var(--moss);transform:translateY(-2px)}
.thumb.on{border-color:var(--moss);box-shadow:0 0 0 2px var(--moss)}
.thumb .tn{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-soft);text-align:center}
.thumb .tc{min-height:80px;display:grid;place-items:center;background:var(--panel);border-radius:4px;overflow:hidden}
.thumb .tc canvas,.thumb .tc img{width:100%;height:auto;display:block}

/* =====================================================================
   Cambios visuales: selector de idioma + fade de carga
   ===================================================================== */

/* ---------- selector de idioma (en el menú, tras "ayuda") ---------- */
.lang{display:inline-flex;align-items:center;gap:4px;font-family:'DM Mono',monospace;font-size:13px;
  border:1.5px solid var(--line);border-radius:100px;padding:5px 12px}
.lang-opt{background:none;border:none;font-family:inherit;font-size:13px;cursor:pointer;
  color:var(--ink-faint);padding:0 2px;transition:color .18s}
.lang-opt:hover{color:var(--ink)}
.lang-opt.on{color:var(--moss-tx);font-weight:500}
.lang-sep{color:var(--ink-faint)}

/* ---------- fade de carga inicial ---------- */
/* Antes de que arranque el JS, el contenido está oculto y ligeramente
   desplazado; al cargar, se revela en cascada suave. */
body.preload .hero,
body.preload .how,
body.preload .cta,
body.preload .lib-head,
body.preload .filters,
body.preload #empty,
body.preload .foot{opacity:0}

body.loaded .hero,
body.loaded .how,
body.loaded .cta,
body.loaded .lib-head,
body.loaded .filters,
body.loaded #empty,
body.loaded .foot{
  animation:fadeUp .7s cubic-bezier(.22,.61,.36,1) both}
body.loaded header{animation:fadeDown .6s cubic-bezier(.22,.61,.36,1) both}

/* escalonado */
body.loaded .hero{animation-delay:.05s}
body.loaded .how{animation-delay:.18s}
body.loaded .cta{animation-delay:.28s}
body.loaded .lib-head{animation-delay:.34s}
body.loaded .filters{animation-delay:.40s}
body.loaded #empty{animation-delay:.44s}
body.loaded .foot{animation-delay:.5s}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* respeto por quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  body.preload .hero,body.preload .how,body.preload .cta,body.preload .lib-head,
  body.preload .filters,body.preload #empty,body.preload .foot{opacity:1}
  body.loaded .hero,body.loaded .how,body.loaded .cta,body.loaded .lib-head,
  body.loaded .filters,body.loaded #empty,body.loaded .foot,body.loaded header{animation:none}
}

/* =====================================================================
   Fase 3 — estados visuales de voz
   ===================================================================== */
/* hint del visor convertido en botón */
.voice-hint{margin-left:10px;background:transparent;border:1.5px solid var(--line);
  border-radius:100px;padding:6px 14px;cursor:pointer;transition:.2s}
.voice-hint:hover{border-color:var(--moss)}
.voice-hint .pulse{opacity:.35;transition:opacity .2s}
.voice-hint.live{border-color:var(--moss);color:var(--moss-tx)}
.voice-hint.live .pulse{opacity:1}
/* cuando la voz está activa, la píldora del hero se resalta */
.voicebox{transition:.2s}
.voicebox.on{background:var(--moss);border-color:var(--moss)}
.voicebox.on .txt,.voicebox.on .txt b{color:#fff}
:root[data-theme="dark"] .voicebox.on .txt,:root[data-theme="dark"] .voicebox.on .txt b{color:#0d0d0b}
.voicebox.on .mic{background:#fff}
.voicebox.on .mic svg{stroke:var(--moss)}
/* estado de carga: micro parpadeando */
body.voice-loading .voicebox .mic{animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.4}}

/* aviso de micrófono bloqueado */
.mic-help{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 45%,transparent);backdrop-filter:blur(3px);padding:20px}
.mic-help.show{display:flex}
.mic-help-in{background:var(--card);border:1.5px solid var(--line);border-radius:16px;max-width:440px;padding:28px 30px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mic-help-in strong{font-family:'Montserrat';font-weight:800;font-size:19px;display:block;margin-bottom:10px}
.mic-help-in p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:20px}
.mic-help-close{font-family:'DM Mono',monospace;font-size:14px;background:var(--moss);border:none;color:#fff;padding:11px 22px;border-radius:100px;cursor:pointer}
:root[data-theme="dark"] .mic-help-close{color:#0d0d0b}
.mic-help-close:hover{filter:brightness(1.06)}
.mic-help-actions{display:flex;gap:10px;justify-content:flex-end}
.mic-help-close.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft)}
.mic-help-close.ghost:hover{border-color:var(--ink);filter:none}
.mic-help-in p b{color:var(--moss-tx);font-weight:700}