/* reader.css — navegación compartida de los lectores de literatura: · barra de progreso de lectura (arriba) · menú de capítulos flotante (☰) que salta a cualquier sección o a la portada La interfaz (etiquetas) sigue el idioma del sitio vía js/reader.js. Usa --accent / --accent-rgb del tema de cada lector. */ .reader-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.55);transition:width .08s linear;pointer-events:none;} .reader-menu-fab{position:fixed;right:20px;bottom:20px;z-index:48;width:54px;height:54px;border-radius:50%; border:none;cursor:pointer;background:var(--accent);color:#fff;font-size:1.35rem;line-height:1;display:flex; align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.42);transition:transform .15s,box-shadow .15s;} .reader-menu-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.5);} /* botón flotante "volver arriba" — aparece al bajar, sobre el menú ☰ */ .reader-top{position:fixed;right:20px;bottom:84px;z-index:48;width:46px;height:46px;border-radius:50%; border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--off);font-size:1.15rem;line-height:1; display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s,border-color .15s;} .reader-top.is-shown{opacity:1;transform:none;pointer-events:auto;} .reader-top:hover{border-color:var(--accent);color:var(--accent);} /* el ícono queda centrado; la etiqueta es un chip que aparece al costado al hover. Los .reader-fab ya son position:fixed, así que anclan la etiqueta absoluta. */ .reader-fab__ico{display:block;} .reader-fab__label{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(8px); white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px; font-family:"Share Tech Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--off); box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;} .reader-fab:hover .reader-fab__label,.reader-fab:focus-visible .reader-fab__label{opacity:1;transform:translateY(-50%) translateX(0);} .reader-menu-fab:hover{transform:translateY(-2px) translateX(-2px);} /* foco visible y accesible en todos los controles del lector */ .reader-menu-fab:focus-visible,.reader-top:focus-visible,.reader-menu__close:focus-visible, .reader-menu__top:focus-visible,.reader-menu__list a:focus-visible,.reader-lang__sel:focus-visible, .top a.back:focus-visible,.lights-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* selector "Traducir" — aparece en la barra superior solo si el libro trae traducciones (data-book-langs). Sin traducciones no existe. */ .reader-lang{display:inline-flex;align-items:center;gap:7px;cursor:pointer;} .reader-lang__cap{font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .reader-lang__sel{font-family:"Rajdhani","Share Tech Mono",sans-serif;font-size:.82rem;color:var(--off);background:var(--surface); border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;} .reader-lang__sel:hover{border-color:var(--accent);} @media(max-width:600px){.reader-lang__cap{display:none;}} /* consejo del día: rota uno de los 31 según la fecha */ .consejo-dia{display:block;margin:26px 0 0;} .consejo-dia__link{display:block;text-decoration:none;border:1px solid rgba(var(--accent-rgb),.35); border-left:3px solid var(--accent);border-radius:0 14px 14px 0;padding:18px 20px; background:radial-gradient(circle at 0% 0%,rgba(var(--accent-rgb),.09),transparent 72%); transition:border-color .18s,background .18s;} .consejo-dia__link:hover{border-color:var(--accent);background:radial-gradient(circle at 0% 0%,rgba(var(--accent-rgb),.16),transparent 72%);} .consejo-dia__lbl{font-family:"Share Tech Mono",monospace;font-size:.58rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);} .consejo-dia__v{font-family:"Lora",Georgia,serif;font-style:italic;font-size:1.04rem;line-height:1.6; color:var(--off);margin:10px 0 0;} .consejo-dia__cta{display:inline-block;margin-top:12px;font-family:"Rajdhani",sans-serif;font-weight:700; font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);} /* copiar el enlace de un consejo */ .consejo{position:relative;} .consejo__copy{position:absolute;right:10px;bottom:8px;background:none;border:none;cursor:pointer; color:var(--muted);font-size:.85rem;line-height:1;padding:5px 7px;border-radius:8px; opacity:0;transition:opacity .15s,color .15s,background .15s;} .consejo:hover .consejo__copy,.consejo__copy:focus-visible{opacity:1;} .consejo__copy:hover{color:var(--accent);background:rgba(var(--accent-rgb),.12);} .consejo__copy.is-done{opacity:1;color:var(--accent);} .consejo__copy.is-done::after{content:" ✓";} @media print{.consejo__copy,.consejo-dia{display:none;}} /* pie global: estas páginas son hojas, conviene que tengan salida propia */ .site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px; margin-top:16px;padding-top:14px;border-top:1px solid var(--line);} .site-nav a{font-family:"Share Tech Mono",monospace;font-size:.62rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s;} .site-nav a:hover{color:var(--accent);} .site-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .site-nav__sep{color:var(--line);font-size:.62rem;} @media print{.site-nav{display:none;}} /* tamaño de letra A− / A+ (lectura larga) */ .reader-size{display:inline-flex;gap:4px;margin-left:auto;margin-right:10px;} .reader-size__btn{font-family:"Share Tech Mono",monospace;font-size:.66rem;letter-spacing:.06em; color:var(--lights-chip-text,var(--off));background:var(--lights-chip-bg,var(--surface)); border:1px solid var(--lights-chip-border,var(--line));border-radius:999px;padding:5px 9px;cursor:pointer; line-height:1;transition:border-color .15s,color .15s,opacity .15s;} .reader-size__btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);} .reader-size__btn:disabled{opacity:.35;cursor:default;} .reader-size__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @media(max-width:560px){.reader-size{margin-right:6px;}.reader-size__btn{padding:5px 7px;font-size:.6rem;}} @media print{.reader-size{display:none;}} /* «seguir leyendo»: barrita discreta bajo la barra superior, no un modal. Aparece solo si hay posición guardada; se va sola a los 12 s. */ .reader-resume{position:fixed;top:58px;left:50%;z-index:45;display:flex;align-items:center;gap:12px; max-width:min(560px,92vw);padding:9px 10px 9px 16px;border-radius:999px; background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.45); opacity:0;transform:translateX(-50%) translateY(-8px);pointer-events:none; transition:opacity .25s ease,transform .25s ease;} .reader-resume.is-shown{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .reader-resume__txt{font-family:"Rajdhani","Share Tech Mono",sans-serif;font-size:.92rem;color:var(--desc); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .reader-resume__txt b{color:var(--off);font-weight:600;} .reader-resume__go{flex-shrink:0;font-family:"Rajdhani",sans-serif;font-weight:700;font-size:.82rem; letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.45);border-radius:999px;padding:6px 14px;cursor:pointer; transition:background .15s,border-color .15s;} .reader-resume__go:hover{background:rgba(var(--accent-rgb),.22);border-color:var(--accent);} .reader-resume__no{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:.95rem; line-height:1;padding:6px 8px;cursor:pointer;border-radius:50%;} .reader-resume__no:hover{color:var(--off);} .reader-resume__go:focus-visible,.reader-resume__no:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @media(max-width:560px){.reader-resume{top:52px;padding-left:13px;gap:8px;} .reader-resume__txt{font-size:.84rem;}.reader-resume__go{padding:6px 11px;font-size:.76rem;}} @media(prefers-reduced-motion:reduce){.reader-resume{transition:none;}} /* ficha del estante con lectura empezada */ .book--resume .book__cta{color:var(--accent);} /* versiones de texto por idioma: ocultas hasta que reader.js marque la activa. Solo aplica cuando la traducción está activa (data-book-lang lo pone el JS); si el JS no corre, el texto queda visible (no se rompe). */ [data-book-lang] .tx{display:none;} [data-book-lang] .tx.is-shown{display:revert;} /* botón "volver / página anterior" de la barra superior — botón real, no solo texto */ .top a.back{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; border:1px solid var(--line);transition:border-color .15s,color .15s,background .15s;} .top a.back:hover{border-color:var(--accent);} /* toggle de luz — MISMO componente que el resto del sitio (bombita SVG) */ :root{--lights-chip-bg:#242420;--lights-chip-border:#3A3A34;--lights-chip-text:#C8C6BC;--lights-off:#6A6A62;--lights-on:#EF9F27;} :root[data-theme="light"]{--lights-chip-bg:#EBE9E2;--lights-chip-border:#CDCAC0;--lights-chip-text:#1F1F1C;} .lights-toggle{display:inline-flex;align-items:center;gap:6px;font-family:"Share Tech Mono",monospace;font-size:.66rem;letter-spacing:.14em;color:var(--lights-chip-text);background:var(--lights-chip-bg);border:1px solid var(--lights-chip-border);padding:5px 11px;border-radius:999px;cursor:pointer;text-transform:uppercase;line-height:1;transition:background .15s,border-color .15s;} .lights-toggle:hover{background:#2E2E28;border-color:#4A4A42;} :root[data-theme="light"] .lights-toggle:hover{background:#DEDBD2;border-color:#BCB9AE;} .lights-toggle[aria-pressed="true"]{border-color:var(--lights-on);} .lights-ico{flex-shrink:0;} .lights-ico__glass{fill:none;stroke:var(--lights-off);stroke-width:1.6;transition:fill .2s,stroke .2s,filter .2s;} .lights-ico__base{fill:none;stroke:var(--lights-off);stroke-width:1.6;stroke-linecap:round;transition:stroke .2s;} .lights-toggle[aria-pressed="true"] .lights-ico__glass{fill:var(--lights-on);stroke:var(--lights-on);filter:drop-shadow(0 0 3px rgba(239,159,39,.85));} .lights-toggle[aria-pressed="true"] .lights-ico__base{stroke:var(--lights-on);} @media(max-width:768px){.lights-toggle__txt{display:none;}.lights-toggle{padding:5px 7px;}} .reader-menu{position:fixed;inset:0;z-index:60;display:none;background:rgba(0,0,0,.5);} .reader-menu.is-open{display:block;} .reader-menu__panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:var(--black); border-left:1px solid var(--line);box-shadow:-14px 0 44px rgba(0,0,0,.55);display:flex;flex-direction:column; animation:reader-slide .22s ease;} @keyframes reader-slide{from{transform:translateX(100%);}to{transform:none;}} .reader-menu__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px; border-bottom:1px solid var(--line);flex-shrink:0;} .reader-menu__title{font-family:"Share Tech Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);} .reader-menu__close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:2px 8px;} .reader-menu__close:hover{color:var(--off);} .reader-menu__top{display:block;padding:12px 18px;font-family:"Share Tech Mono",monospace;font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);} .reader-menu__top:hover{color:var(--accent);} .reader-menu__top::before{content:"↑ ";} .reader-menu__list{overflow-y:auto;flex:1;padding:8px 8px 30px;} .reader-menu__list ol{list-style:none;margin:0;padding:0;} .reader-menu__list a{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:8px;text-decoration:none;} .reader-menu__list a:hover{background:rgba(var(--accent-rgb),.12);} .reader-menu__list .toc__part{font-family:"Share Tech Mono",monospace;font-size:.58rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);opacity:.85;padding:12px 12px 4px;} .reader-menu__list .toc__num{font-family:"Share Tech Mono",monospace;font-size:.68rem;color:var(--accent);min-width:2.6em;} .reader-menu__list .toc__ttl{font-family:"Lora",Georgia,serif;font-size:.95rem;color:var(--desc);} @media(max-width:720px){.reader-menu-fab{right:16px;bottom:16px;}.reader-top{right:16px;bottom:80px;}} @media(prefers-reduced-motion:reduce){.reader-menu__panel{animation:none;}.reader-progress{transition:none;}html{scroll-behavior:auto;}} /* Portada como página de título: el título solo y centrado, con aire, y un divisor que lo separa claramente de la introducción. (reader.css se carga DESPUÉS del