/* DSK MD - PWA lector de Markdown (mobile-first) */
*{box-sizing:border-box;}
button,a,.icon-btn,.fab,.item,input,textarea,select,[role=button]{-webkit-tap-highlight-color:transparent;}
:root{
  /* D7: los botones flotantes en reposo, más legibles que antes (.3) */
  --fab-dim:.45;      /* transparencia botones ⋯ ↑ y pantalla completa en documentos */
  --fab-dim-epub:.45; /* transparencia botones ⋯ ↑ y pantalla completa en libros EPUB */

  /* D3: escalas de diseño — radios, tipografía y espaciado */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:999px;
  --t-xs:11px;--t-sm:13px;--t-md:15px;--t-lg:17px;--t-xl:22px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;

  /* D4: elevación Material 3 */
  --e1:0 1px 2px #0000004d,0 1px 3px 1px #00000026;
  --e2:0 1px 2px #0000004d,0 2px 6px 2px #00000026;
  --e3:0 4px 8px 3px #00000026,0 1px 3px #0000004d;

  /* D5: movimiento unificado */
  --mo-fast:120ms;--mo-med:220ms;--mo-slow:320ms;
  --mo-ease:cubic-bezier(.2,0,0,1);

  --bg:#ffffff;--fg:#1f2328;--muted:#59636e;--link:#0969da;--accent:#0969da;
  --border:#d1d9e0;--border-soft:#d1d9e0b3;--code-bg:#818b981f;--pre-bg:#f6f8fa;
  --quote-fg:#59636e;--table-alt:#f6f8fa;--table-head:#f6f8fa;--hr:#d1d9e0;
  --kbd-bg:#f6f8fa;--kbd-fg:#1f2328;--note:#0969da;--tip:#1a7f37;--warn:#9a6700;
  --danger:#cf222e;--sel:#b3d4fc;--bar:#f6f8faf2;--toc-bg:#f6f8fa;--mark:#fff3b0;--mark-cur:#ffb347;
  --tok-comment:#6e7781;--tok-key:#cf222e;--tok-str:#0a3069;--tok-num:#0550ae;
  --tok-fn:#8250df;--tok-built:#6639ba;--tok-type:#953800;--tok-tag:#116329;--tok-meta:#0550ae;
}
body.theme-dark,.theme-dark{
  --bg:#0d1117;--fg:#e6edf3;--muted:#9198a1;--link:#4493f8;--accent:#4493f8;
  --border:#3d444d;--border-soft:#3d444db3;--code-bg:#656c7633;--pre-bg:#161b22;
  --quote-fg:#9198a1;--table-alt:#151b23;--table-head:#161b22;--hr:#3d444d;
  --kbd-bg:#161b22;--kbd-fg:#e6edf3;--note:#4493f8;--tip:#3fb950;--warn:#d29922;
  --danger:#f85149;--sel:#234876;--bar:#0d1117f2;--toc-bg:#161b22;--mark:#bb8009;--mark-cur:#e3a008;
  --tok-comment:#8b949e;--tok-key:#ff7b72;--tok-str:#a5d6ff;--tok-num:#79c0ff;
  --tok-fn:#d2a8ff;--tok-built:#ffa657;--tok-type:#ff7b72;--tok-tag:#7ee787;--tok-meta:#79c0ff;
}
html{margin:0;padding:0;background:var(--bg);color:var(--fg);min-height:100%;}
body{margin:0;padding:0;background:var(--bg);color:var(--fg);min-height:100dvh;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,
  "Apple Color Emoji","Segoe UI Emoji";line-height:1.6;font-size:16px;
  -webkit-text-size-adjust:100%;transition:background .15s,color .15s;}
::selection{background:var(--sel);}

/* App bar */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;
  padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
  background:var(--bar);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
  max-height:120px;overflow:hidden;
  transition:opacity .2s ease,max-height .22s ease,padding .22s ease,border-color .22s ease;
  user-select:none;-webkit-user-select:none;}
.appbar-title{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;}
.appbar-title .brand{font-weight:300;font-size:17px;letter-spacing:1px;white-space:nowrap;flex:0 0 auto;}
.appbar-title .sep{color:var(--muted);font-weight:300;flex:0 0 auto;}
.appbar-title .credit{font-size:11px;line-height:1.2;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appbar-title .credit a{color:var(--link);text-decoration:none;}
.icon-btn{width:40px;height:40px;border:none;background:none;color:var(--fg);cursor:pointer;
  border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.icon-btn:active{background:var(--code-bg);}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

main{display:block;}

/* Contenido markdown (estilo GitHub) */
.markdown-body{max-width:840px;margin:0 auto;padding:20px 18px 120px;
  overflow-wrap:break-word;word-break:break-word;
  font-family:var(--md-font, inherit);
  font-size:var(--md-size, 16px);
  line-height:var(--md-lh, 1.6);}
.markdown-body[hidden]{display:none;}
.read-custom #content.markdown-body:not(.pdf){color:var(--read-fg);background:var(--read-bg);}
.read-custom #content.markdown-body:not(.pdf) :is(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,span){color:inherit;}
#content img,#content canvas,.pdf-pages img,.pdf-pages canvas,.imgv-stage img{
  -webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;}
.markdown-body>*:first-child{margin-top:0;}
.markdown-body :is(h1,h2,h3,h4,h5,h6){margin:24px 0 16px;font-weight:600;line-height:1.25;
  scroll-margin-top:64px;}
.markdown-body h1{font-size:1.9em;padding-bottom:.3em;border-bottom:1px solid var(--hr);}
.markdown-body h2{font-size:1.45em;padding-bottom:.3em;border-bottom:1px solid var(--hr);}
.markdown-body h3{font-size:1.2em;}
.markdown-body h4{font-size:1em;}
.markdown-body h5{font-size:.9em;}
.markdown-body h6{font-size:.85em;color:var(--muted);}
.markdown-body p,.markdown-body ul,.markdown-body ol,
.markdown-body blockquote,.markdown-body table,.markdown-body pre{margin:0 0 16px;}
.markdown-body a{color:var(--link);text-decoration:none;}
.markdown-body a:hover{text-decoration:underline;}
.markdown-body ul,.markdown-body ol{padding-left:1.7em;}
.markdown-body li{margin:.25em 0;}
.markdown-body li.task-list-item,.markdown-body li:has(>input[type=checkbox]){list-style:none;margin-left:-1.4em;}
.markdown-body li input[type=checkbox]{margin:0 .5em 0 0;vertical-align:middle;}
.markdown-body blockquote{padding:0 1em;color:var(--quote-fg);border-left:.25em solid var(--border);}
.markdown-body code,.markdown-body kbd,.markdown-body tt{
  font-family:"Cascadia Code",ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:85%;}
.markdown-body :not(pre)>code{background:var(--code-bg);padding:.2em .4em;border-radius:6px;}
.markdown-body kbd{background:var(--kbd-bg);color:var(--kbd-fg);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-size:11px;}
.markdown-body pre{background:var(--pre-bg);padding:14px;border-radius:8px;overflow:auto;
  font-size:85%;line-height:1.45;-webkit-overflow-scrolling:touch;}
.markdown-body pre code{background:transparent!important;padding:0;font-size:100%;}
.markdown-body pre code.hljs{background:transparent;padding:0;}
.markdown-body pre.wrap{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;overflow-x:hidden;}
.markdown-body pre.wrap code{white-space:inherit;}
.markdown-body table{border-collapse:collapse;display:block;overflow:auto;width:max-content;max-width:100%;}
.markdown-body th,.markdown-body td{padding:6px 13px;border:1px solid var(--border);}
.markdown-body th{background:var(--table-head);font-weight:600;}
.markdown-body tr:nth-child(2n){background:var(--table-alt);}
.markdown-body img{max-width:100%;height:auto;border-radius:6px;}
.markdown-body hr{height:1px;border:0;background:var(--hr);margin:24px 0;}
.markdown-body .admonition{border:1px solid var(--border);border-left:.3em solid var(--note);
  border-radius:6px;padding:.6em 1em;margin:0 0 16px;background:var(--pre-bg);}
.markdown-body .admonition-title{font-weight:700;}
.mermaid{margin:0 0 16px;text-align:center;}
.katex-display{overflow:auto hidden;}
mark.find-hit{background:var(--mark);color:inherit;border-radius:3px;}
mark.find-hit.current{background:var(--mark-cur);}

/* highlight.js tokens */
.hljs-comment,.hljs-quote{color:var(--tok-comment);font-style:italic;}
.hljs-keyword,.hljs-selector-tag,.hljs-deletion{color:var(--tok-key);}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:var(--tok-str);}
.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-attr,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--tok-num);}
.hljs-title,.hljs-title.function_,.hljs-section{color:var(--tok-fn);}
.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_,.hljs-symbol,.hljs-bullet{color:var(--tok-built);}
.hljs-type,.hljs-params{color:var(--tok-type);}
.hljs-name,.hljs-tag,.hljs-selector-id,.hljs-selector-class{color:var(--tok-tag);}
.hljs-meta{color:var(--tok-meta);}
.hljs-emphasis{font-style:italic;}.hljs-strong{font-weight:700;}
.hljs-link{text-decoration:underline;}

/* Welcome */
/* Cabecera fija (logo + subtítulo + botones); solo "Recientes" hace scroll. */
#welcome{max-width:840px;margin:0 auto;padding:12px 18px 0;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;}
#welcome[hidden]{display:none;}
#welcome>*{flex:0 0 auto;}
#welcomeLogo{display:block;max-width:140px;width:36%;min-width:104px;height:auto;
  margin:2px auto 8px;}
#welcome>p[data-i18n="w_sub"]{text-align:center;}
#welcome p{color:var(--muted);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--border);
  border-radius:10px;background:var(--toc-bg);color:var(--fg);font-weight:600;cursor:pointer;font-size:15px;}
.btn:active{border-color:var(--accent);color:var(--accent);}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px;}
.btn-col{display:flex;flex-direction:column;gap:10px;margin:18px auto 8px;max-width:320px;}
.btn-col .btn{width:100%;justify-content:center;}
.btn-row3{display:flex;gap:8px;margin:14px 0 6px;}
.btn-row3 .btn{flex:1;justify-content:center;padding:9px 6px;font-size:13px;gap:5px;font-weight:600;}
.btn-row3 .ic{font-size:15px;}
ul.recent{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;}
/* sin flex-shrink: si no, los items se aplastan unos sobre otros */
ul.recent>li{flex:0 0 auto;}
#welcome ul.recent{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
ul.recent button{background:none;color:var(--fg);cursor:pointer;border:none;text-align:left;}
.empty{color:var(--muted);}

/* FABs */
/* en el inicio no hay ninguno, ni el de "⋯" */
body.home .fabs{display:none;}
.fabs{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;transition:opacity .2s ease;}
.fab{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--toc-bg);
  color:var(--fg);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 14px #00000055;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s,transform .2s,border-color .15s,color .15s;}
.fab:active{border-color:var(--accent);color:var(--accent);}
.fab[hidden]{display:none;}
/* ocultar pista de arrastrar en pantallas táctiles (móvil) */
@media (hover:none) and (pointer:coarse){
  #welcome p[data-i18n="w_hint"]{display:none;}
}
.fab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
#fabView{font-size:15px;font-weight:700;}
.htmlframe{width:100%;border:0;background:#fff;display:block;
  min-height:calc(100vh - var(--appbar-h,52px) - 8px);}
.savebox .fmtgrid{display:flex;flex-wrap:wrap;gap:6px;max-height:148px;overflow:auto;
  padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--pre-bg);}
.savebox .fmtgrid button{flex:0 0 auto;padding:6px 10px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);color:var(--fg);font-size:13px;font-weight:600;
  cursor:pointer;font-family:ui-monospace,Consolas,monospace;}
.savebox .fmtgrid button.sel{border-color:var(--accent);color:#fff;background:var(--accent);}
#fabTop{opacity:0;pointer-events:none;transform:translateY(10px);}
#fabTop.show{opacity:1;pointer-events:auto;transform:none;}
/* En reposo, el botón "volver arriba" va semitransparente (como el ⋯).
   En inmersivo lo atenúa el contenedor .fabs, así que aquí lo dejamos opaco. */
body:not(.immersive):not(.epub-open) #fabTop.show{opacity:var(--fab-dim);}
body:not(.immersive):not(.epub-open) #fabTop.show:active{opacity:1;}
body:not(.immersive).epub-open #fabTop.show{opacity:var(--fab-dim-epub);}
body:not(.immersive).epub-open #fabTop.show:active{opacity:1;}

/* Overlays / modales */
.overlay{position:fixed;inset:0;z-index:60;display:none;background:#00000077;}
.overlay.open{display:block;}
.sheet{position:fixed;left:0;top:0;bottom:0;width:min(82vw,330px);background:var(--toc-bg);
  border-right:1px solid var(--border);box-shadow:6px 0 28px #00000066;
  padding:max(14px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom));
  padding-left:max(8px,env(safe-area-inset-left));
  transform:translateX(-100%);transition:transform .22s ease;overflow:auto;
  display:flex;flex-direction:column;gap:1px;}
.overlay.open .sheet{transform:none;}
.sheet h3{margin:6px 12px 2px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.sheet button.item{width:100%;text-align:left;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:none;background:none;color:var(--fg);font-size:16px;cursor:pointer;border-radius:10px;}
.sheet button.item:active{background:var(--code-bg);}
.sheet button.item .ic{flex:0 0 auto;width:22px;text-align:center;}
.btn-row .ic{margin-right:4px;}
.sheet .grip{display:none;}

.side{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--bg);
  border-left:1px solid var(--border);box-shadow:-6px 0 28px #00000066;overflow:auto;
  padding:16px 18px;transform:translateX(100%);transition:transform .22s ease;}
.overlay.open .side{transform:none;}
.side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
  border-bottom:1px solid var(--border);padding-bottom:8px;}
.side-head b{font-size:16px;}
.x{border:none;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--fg);}
#tocList{list-style:none;padding:0;margin:0;}
#tocList a{display:block;color:var(--muted);text-decoration:none;padding:7px 4px;border-radius:6px;}
#tocList a:active{color:var(--accent);}
#tocList .lv2{padding-left:14px;}
#tocList .lv3{padding-left:28px;font-size:.95em;}
#tocList .lv4{padding-left:42px;font-size:.9em;}

/* Paste modal */
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;
  width:min(92vw,640px);max-height:80vh;background:var(--bg);border:1px solid var(--border);
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:opacity .18s,transform .18s;}
.overlay.open .dialog{opacity:1;transform:translate(-50%,-50%);}
.dialog textarea{width:100%;min-height:40vh;resize:vertical;border:1px solid var(--border);
  border-radius:10px;background:var(--pre-bg);color:var(--fg);padding:10px;font-family:ui-monospace,Consolas,monospace;font-size:14px;}
.dialog .row{display:flex;gap:10px;justify-content:flex-end;}
.dialog .msg{color:var(--fg);white-space:pre-wrap;line-height:1.5;}
.dialog .msg a{color:var(--link);}
/* bloqueo de scroll cuando hay un overlay abierto */
html.locked,body.locked{overflow:hidden;}

/* ---------- Editor de texto ---------- */
#editor{position:fixed;left:0;right:0;top:var(--appbar-h,52px);bottom:0;
  display:flex;flex-direction:column;background:var(--bg);}
#editor[hidden]{display:none;}
.ed-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-bottom:1px solid var(--border);background:var(--toc-bg);overflow-x:auto;}
.ed-fmt{display:flex;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.ed-fmt button{border:none;background:var(--bg);color:var(--muted);padding:6px 10px;
  font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;}
.ed-fmt button.sel{background:var(--accent);color:#fff;}
.ed-undo{display:flex;flex:0 0 auto;gap:4px;}
.ed-undo button{width:36px;height:34px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--fg);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.ed-undo button:active{border-color:var(--accent);color:var(--accent);}
.ed-undo button:disabled{opacity:.4;}
.ed-tools{display:flex;flex:1;gap:4px;align-items:center;min-width:0;overflow-x:auto;}
.ed-tools button{flex:0 0 auto;min-width:36px;height:34px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);color:var(--fg);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.ed-tools button:active{border-color:var(--accent);color:var(--accent);}
.ed-tools[hidden]{display:none;}
.ed-save{flex:0 0 auto;margin-left:auto;width:40px;height:40px;border:none;background:none;cursor:pointer;
  font-size:20px;border-radius:10px;}
.ed-save:active{background:var(--code-bg);}
/* diálogo de guardado */
.savebox{display:flex;flex-direction:column;gap:12px;}
.savebox label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px;}
.savebox input{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--pre-bg);
  color:var(--fg);padding:10px;font-size:15px;}
.savebox .fmtsel{display:flex;gap:8px;}
.savebox .fmtsel button{flex:1;padding:9px;border:1px solid var(--border);border-radius:9px;
  background:var(--bg);color:var(--fg);font-weight:700;cursor:pointer;}
.savebox .fmtsel button.sel{border-color:var(--accent);color:var(--accent);}
.savebox .hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
/* páginas PDF */
#content.pdf{padding:0;position:fixed;left:0;right:0;top:var(--appbar-h,52px);bottom:0;
  overflow:hidden;touch-action:none;background:var(--bg);}
.pdf-pages{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;}
.pdf-pages .pdf-wrap:last-child{margin-bottom:40px;}
/* modo página: las planas se ponen en fila y se pasan de lado (como el ePub) */
#content.pdf-paged .pdf-pages{display:flex;flex-direction:row;align-items:flex-start;width:max-content;}
#content.pdf-paged .pdf-wrap{flex:0 0 auto;margin:0 12px 0 0;}
#content.pdf-paged .pdf-pages .pdf-wrap:last-child{margin:0;}
.pdf-page{display:block;margin:0 auto 12px;max-width:100%;height:auto;
  box-shadow:0 2px 10px #00000066;background:#fff;border-radius:4px;}
.pdf-info{max-width:840px;margin:0 auto;padding:6px 18px 0;color:var(--muted);font-size:12px;text-align:center;}
/* PDF: contenedor pagina + capa de texto seleccionable/buscable.
   B4: content-visibility evita pintar páginas fuera de pantalla; la altura
   la reserva contain-intrinsic-size, que fija el JS por página. */
.pdf-wrap{position:relative;margin:0 auto 12px;box-shadow:0 2px 10px #00000066;background:#fff;border-radius:4px;
  content-visibility:auto;}
.pdf-wrap canvas{display:block;width:100%;height:auto;border-radius:4px;}
.textLayer{position:absolute;inset:0;overflow:hidden;line-height:1;opacity:1;}
.textLayer span,.textLayer br{color:transparent;position:absolute;white-space:pre;
  cursor:text;transform-origin:0 0;}
.textLayer ::selection{background:#0969da55;}
.textLayer mark.find-hit{background:var(--mark);color:transparent;}
.textLayer mark.find-hit.current{background:var(--mark-cur);}
/* recientes: tarjeta compacta de una fila con badge + eliminar a la derecha */
ul.recent li.card{display:flex;flex-direction:row;align-items:stretch;
  border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;}
ul.recent button.open{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;
  gap:10px;padding:10px 12px;}
ul.recent button.open:active{background:var(--pre-bg);}
ul.recent .badge{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.5px;
  padding:3px 7px;border-radius:6px;background:var(--accent);color:#fff;}
ul.recent .badge.pdf{background:var(--danger);}
ul.recent .badge.epub{background:var(--tip);}
ul.recent .badge.docx{background:var(--note);}
ul.recent .info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
ul.recent .info .name{font-weight:600;}
ul.recent .info .name,ul.recent .info .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
ul.recent .info .meta{font-size:12px;color:var(--muted);}
ul.recent button.del{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:0 14px;border-left:1px solid var(--border-soft);color:var(--muted);}
ul.recent button.del svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
ul.recent button.del span{display:none;}
ul.recent button.del:active{color:var(--danger);background:var(--pre-bg);}
/* selector de idioma */
.langlist{display:flex;flex-direction:column;gap:8px;}
.langlist button{padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--fg);text-align:left;cursor:pointer;}
.langlist button.sel{border-color:var(--accent);color:var(--accent);font-weight:600;}
/* controles de lectura (modal de lectura) */
.fontctl{display:flex;flex-direction:column;gap:14px;}
.fontctl .grp{display:flex;flex-direction:column;gap:6px;}
.fontctl .lbl{font-size:13px;color:var(--muted);}
.fontctl .fonts{display:flex;flex-wrap:wrap;gap:8px;}
.fontctl .fonts button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--fg);cursor:pointer;}
.fontctl .fonts button.sel{border-color:var(--accent);color:var(--accent);}
.fontctl .stepper{display:flex;align-items:center;gap:14px;}
.fontctl .stepper button{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--fg);font-size:20px;cursor:pointer;}
.fontctl .stepper .val{min-width:64px;text-align:center;font-weight:600;}

/* Find bar */
.findbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:6px;
  padding:8px 10px;background:var(--bar);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.findbar[hidden]{display:none;}
.findbar input{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--fg);padding:9px 11px;font-size:15px;}
.findbar .count{font-size:13px;color:var(--muted);min-width:74px;text-align:center;}
.findbar .count.none{color:var(--danger);font-weight:600;}
.findbar button{width:38px;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--fg);font-size:16px;cursor:pointer;flex:0 0 auto;}

/* Drop hint */
.drop-hint{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:#0969da22;border:3px dashed var(--accent);color:var(--accent);font-size:22px;font-weight:700;}
.drop-hint[hidden]{display:none;}

.src-note{max-width:840px;margin:0 auto;padding:10px 18px 0;color:var(--muted);font-size:12px;}
.src-note[hidden]{display:none;}

/* ---------- NUEVO: toast de página (PDF/EPUB) ---------- */
.page-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);z-index:55;
  background:var(--toc-bg);color:var(--fg);border:1px solid var(--border);
  border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;
  box-shadow:0 3px 14px #00000055;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;white-space:nowrap;}
.page-toast.show{opacity:1;transform:translateX(-50%);}
.page-toast[hidden]{display:none;}

/* ---------- NUEVO: lector EPUB ---------- */
#epub{position:fixed;left:0;right:0;top:var(--appbar-h,52px);bottom:0;
  background:var(--ep-bg,var(--bg));}
#epub[hidden]{display:none;}
.epub-viewer{position:absolute;top:0;left:0;right:0;
  bottom:calc(34px + env(safe-area-inset-bottom,0px));}
.epub-edge{position:absolute;top:0;bottom:0;width:18%;border:none;background:none;
  color:var(--muted);font-size:34px;opacity:0;cursor:pointer;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.epub-edge.prev{left:0;justify-content:flex-start;padding-left:6px;}
.epub-edge.next{right:0;justify-content:flex-end;padding-right:6px;}
.epub-edge:active{opacity:.35;}
/* Solo una franja fina (24px) sigue capturando el toque, para no perder el
   tap de pasar página ni el gesto de abrir el menú deslizando desde el borde
   izquierdo. El resto de la franja deja pasar el toque al texto de debajo
   para poder seleccionarlo (el paso de página ahí lo gestiona el tap
   detectado en epubTouch). */
.epub-edge.prev::before,.epub-edge.next::before{content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:auto;}
.epub-edge.prev::before{left:0;}
.epub-edge.next::before{right:0;}

/* ---------- NUEVO: editor con resaltado (overlay pre + textarea) ---------- */
.ed-wrap{position:relative;flex:1;min-height:0;overflow:hidden;}
.ed-wrap .ed-hl,#editor .ed-wrap #edArea{
  margin:0;border:0;width:100%;height:100%;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  font-family:ui-monospace,Consolas,"Cascadia Code",monospace;font-size:15px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;tab-size:2;}
.ed-wrap .ed-hl{position:absolute;inset:0;overflow:auto;background:var(--bg);
  pointer-events:none;color:var(--fg);z-index:1;}
.ed-wrap .ed-hl code{font:inherit;background:none;padding:0;display:block;}
#editor .ed-wrap #edArea{position:absolute;inset:0;resize:none;outline:none;z-index:2;
  background:transparent;color:transparent;caret-color:var(--fg);-webkit-text-fill-color:transparent;}
#editor .ed-wrap #edArea::selection{background:var(--sel);-webkit-text-fill-color:transparent;}
/* sin resaltado (txt): texto normal visible */
.ed-wrap.plain .ed-hl{display:none;}
#editor .ed-wrap.plain #edArea{color:var(--fg);-webkit-text-fill-color:var(--fg);background:var(--bg);}

/* ---------- NUEVO: marcadores ---------- */
.tabs{display:flex;gap:8px;margin:2px 0 12px;}
.tabs .tab-btn{flex:1;border:1px solid var(--border-soft);background:none;color:var(--muted);
  border-radius:10px;padding:8px 6px;font-size:13px;cursor:pointer;}
.tabs .tab-btn.sel{color:var(--fg);border-color:var(--accent);background:var(--pre-bg);}
.bm-add{width:100%;justify-content:center;margin:6px 0 12px;}
#bmList,.bmlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
#bmList[hidden],.bmlist[hidden]{display:none;}
#bmList li,.bmlist li{border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;}
#bmList .go,.bmlist .go{flex:1;min-width:0;text-align:left;background:none;border:none;color:var(--fg);
  cursor:pointer;padding:10px 12px;display:flex;flex-direction:column;gap:3px;}
#bmList .go:active,.bmlist .go:active{background:var(--pre-bg);}
#bmList .go .lbl,.bmlist .go .lbl{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#bmList .go .note,.bmlist .go .note{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;}
#bmList .go .pct,.bmlist .go .pct{font-size:11px;color:var(--accent);}
#bmList .rm,.bmlist .rm{flex:0 0 auto;border:none;border-left:1px solid var(--border-soft);background:none;
  color:var(--muted);padding:0 14px;cursor:pointer;font-size:18px;}
#bmList .rm:active,.bmlist .rm:active{color:var(--danger);background:var(--pre-bg);}
#bmList .empty,.bmlist .empty{border:none;color:var(--muted);padding:8px 2px;}
.bmlist .go .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;}

/* ---------- NUEVO: ajustes de lectura — colores ---------- */
.fontctl .colors{display:flex;flex-wrap:wrap;gap:8px;}
.fontctl .swatch{width:38px;height:38px;border-radius:9px;border:2px solid var(--border);
  cursor:pointer;position:relative;padding:0;}
.fontctl .swatch.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.fontctl .swatch .nm{position:absolute;left:0;right:0;bottom:-16px;font-size:9px;
  color:var(--muted);text-align:center;white-space:nowrap;}
.fontctl .colors{margin-bottom:14px;}
.fontctl .pickrow{display:flex;align-items:center;gap:10px;}
.fontctl .pickrow label{font-size:13px;color:var(--muted);flex:1;}
.fontctl .pickrow input[type=color]{width:42px;height:34px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);cursor:pointer;padding:2px;}

/* Índice solo para impresión: oculto en pantalla */
#printToc{display:none;}

@media print {

/* Define el tamaño A4 y los márgenes físicos del papel */
  @page {
      size: A4;
      margin: 2.5cm;

      /* Estándar CSS para números de página (soporte muy limitado en navegadores web) */
      @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #59636e;
      }
    }

  /* 1. Forzar todas las variables al tema claro para la impresión (PDF) */
  :root, body.theme-dark, .theme-dark {
    --bg: #ffffff !important;
    --fg: #1f2328 !important;
    --muted: #59636e !important;
    --link: #0969da !important;
    --border: #d1d9e0 !important;
    --code-bg: #818b981f !important;
    --pre-bg: #f6f8fa !important;
    --quote-fg: #59636e !important;
    --table-alt: #f6f8fa !important;
    --table-head: #f6f8fa !important;
    --hr: #d1d9e0 !important;
    --tok-comment: #6e7781 !important;
    --tok-key: #cf222e !important;
    --tok-str: #0a3069 !important;
    --tok-num: #0550ae !important;
    --tok-fn: #8250df !important;
    --tok-built: #6639ba !important;
    --tok-type: #953800 !important;
    --tok-tag: #116329 !important;
    --tok-meta: #0550ae !important;
  }

  /* 2. Asegurar que los bloques de código y código en línea tengan el contraste correcto */
  .markdown-body pre {
    background: #f6f8fa !important;
    color: #1f2328 !important;
    border: 1px solid #d1d9e0; /* Un borde fino ayuda a delimitar el código en el PDF */
  }
  .markdown-body :not(pre) > code {
    background: #818b981f !important;
    color: #1f2328 !important;
  }

  /* 3. Tus reglas de impresión existentes */
  .appbar,.fabs,.overlay,.findbar,.drop-hint,#welcome,.src-note{display:none!important;}
  body{background:#fff;color:#000;}
  .markdown-body{max-width:none;padding:0;}


  /* Contenedor principal del Índice en el PDF */
    #printToc {
        display: block;
        border-bottom: 1px solid #d1d9e0;
        padding-bottom: 20px;
        margin-bottom: 30px;

        /* FORZAR SALTO DE PÁGINA DESPUÉS DEL ÍNDICE */
        break-after: page;
        page-break-after: always;
      }

    /* Título de "Índice" */
    #printToc .t {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px;
      color: #1f2328;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Fuerza a que el contenedor alinee los enlaces verticalmente */
    #printToc div:last-child {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Estilo base de cada fila del índice */
    #printToc a {
      display: block;
      color: #1f2328 !important;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.5;
    }

    /* Sangrías y pesos visuales según la jerarquía (clases lv1, lv2, lv3 generadas por JS) */
    #printToc a.lv1 {
      font-weight: 700;
      margin-top: 6px;
      padding-left: 0;
    }

    #printToc a.lv2 {
      font-weight: 500;
      padding-left: 16px;
      color: #3b3b3b !important;
    }

    #printToc a.lv3 {
      font-weight: 400;
      padding-left: 32px;
      font-size: 13px;
      color: #59636e !important;
    }

    #printToc a.lv4 {
      font-weight: 400;
      padding-left: 48px;
      font-size: 13px;
      color: #6e7781 !important;
    }
    .markdown-body :is(h1,h2,h3,h4,h5,h6){break-after:avoid;page-break-after:avoid;break-inside:avoid;}
  table,figure,pre,blockquote,img,.admonition,.mermaid,tr,thead{break-inside:avoid;page-break-inside:avoid;}
  p,li{orphans:3;widows:3;}
}
@media (min-width:900px){
  .markdown-body,#welcome{padding-left:24px;padding-right:24px;}
}
/* ---------- NUEVO: FAB de colapsar + modo inmersivo ---------- */
.fab-toggle{display:none;font-size:22px;}
body.collapsible .fab-toggle{display:flex;}
body.collapsible.fabs-collapsed .fabs .fab:not(.fab-toggle):not(#fabTop):not(#fabTts.tts-on){display:none !important;}
body.collapsible.fabs-collapsed #fabTop:not(.show){display:none !important;}

/* fabTts: solo semitransparente cuando actúa como control play/pausa en colapsado
   (clase .tts-on). Como botón normal de abrir modal se comporta como los demás. */
body:not(.immersive):not(.epub-open).collapsible.fabs-collapsed #fabTts.tts-on{opacity:var(--fab-dim);}
body:not(.immersive):not(.epub-open).collapsible.fabs-collapsed #fabTts.tts-on:active{opacity:1;}
body:not(.immersive).epub-open.collapsible.fabs-collapsed #fabTts.tts-on{opacity:var(--fab-dim-epub);}
body:not(.immersive).epub-open.collapsible.fabs-collapsed #fabTts.tts-on:active{opacity:1;}

/* Resaltado TTS en documentos */
.tts-hl{background:rgba(58,160,255,.22);border-radius:4px;transition:background .3s;}
.tts-hl-page{outline:3px solid var(--accent);outline-offset:-3px;border-radius:6px;}

/* Panel TTS */
.tts-side{width:min(92vw,380px);}
.tts-body{padding:4px 0 80px;display:flex;flex-direction:column;gap:14px;}
.tts-grp{display:flex;flex-direction:column;gap:6px;}
.tts-lbl{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;}
.tts-sel{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--code-bg);color:var(--fg);font-size:13px;appearance:none;}
.tts-range{width:100%;accent-color:var(--accent);}
.tts-voice-btn{text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tts-vp{display:flex;flex-direction:column;gap:8px;width:100%;}
.tts-vp-lbl{font-size:12px;color:var(--muted);}
.tts-vp-sel{appearance:auto;}
.tts-vp-list{display:flex;flex-direction:column;gap:4px;max-height:46vh;overflow-y:auto;
  border-top:1px solid var(--border);padding-top:8px;}
.tts-vp-item{text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--code-bg);color:var(--fg);font-size:13px;cursor:pointer;}
.tts-vp-item.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);}
.tts-vp-empty{color:var(--muted);font-size:13px;padding:8px 0;}
.tts-btn-ico{display:inline-flex;vertical-align:middle;margin-right:5px;}
.tts-test{margin-top:4px;padding:6px 12px;border-radius:20px;border:1px solid var(--border);
  background:none;color:var(--muted);font-size:12px;cursor:pointer;align-self:flex-start;}
.tts-test:active{color:var(--accent);border-color:var(--accent);}
.tts-reset{align-self:flex-start;padding:6px 12px;border-radius:20px;border:1px solid var(--border);
  background:none;color:var(--muted);font-size:12px;cursor:pointer;}
.tts-reset:active{color:var(--accent);border-color:var(--accent);}
.tts-controls{display:flex;gap:10px;margin-top:4px;}
.tts-btn{flex:1;padding:10px 0;font-size:14px;border-radius:10px;}
.tts-stop{background:none;border:1px solid var(--border);color:var(--muted);}
.tts-stop:active{color:var(--accent);border-color:var(--accent);}

/* Grabación MP3 */
.tts-rec{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.tts-rec-head{display:flex;justify-content:space-between;align-items:center;}
.tts-rec-lbl{font-size:13px;font-weight:600;color:var(--fg);}
.tts-rec-time{font-size:15px;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600;}
.tts-rec-status{font-size:12px;color:var(--muted);min-height:14px;}
.tts-rec-row{display:flex;gap:10px;}
.tts-rec-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 0;font-size:13px;border-radius:10px;border:1px solid var(--border);
  background:var(--code-bg);color:var(--fg);cursor:pointer;}
.tts-rec-btn:active{border-color:var(--accent);color:var(--accent);}
.tts-rec-btn:disabled{opacity:.4;pointer-events:none;}
.tts-btn:disabled,.tts-test:disabled,.tts-reset:disabled,.tts-sel:disabled,.tts-range:disabled{opacity:.4;pointer-events:none;}
/* Botón ⋯ semitransparente en reposo — doc y libro por separado */
body:not(.immersive):not(.epub-open).collapsible.fabs-collapsed .fab-toggle{opacity:var(--fab-dim);}
body:not(.immersive):not(.epub-open).collapsible.fabs-collapsed .fab-toggle:active{opacity:1;}
body:not(.immersive).epub-open.collapsible.fabs-collapsed .fab-toggle{opacity:var(--fab-dim-epub);}
body:not(.immersive).epub-open.collapsible.fabs-collapsed .fab-toggle:active{opacity:1;}

/* modo inmersivo (horizontal en PDF/EPUB): sin cabecera, visor a pantalla completa */
body.immersive .appbar{opacity:0;max-height:0;padding-top:0;padding-bottom:0;
  border-color:transparent;pointer-events:none;}
body.immersive #content.pdf{top:0 !important;}
body.immersive #epub{top:0 !important;}
body.immersive:not(.epub-open) .fabs{opacity:var(--fab-dim);}
body.immersive.epub-open .fabs{opacity:var(--fab-dim-epub);}
body.immersive .fabs:active,body.immersive.fabs-open .fabs{opacity:1;}

/* fix: diálogo con scroll interno y adaptado a horizontal */
.dialog{overflow-y:auto;-webkit-overflow-scrolling:touch;}
@media (orientation:landscape) and (max-height:600px){
  /* diálogo más ancho, menos alto, pegado arriba con scroll interno */
  .dialog{top:6px;transform:translate(-50%,0) scale(.97);max-height:calc(100dvh - 12px);
    width:min(96vw,860px);padding:12px 14px;gap:6px;}
  .overlay.open .dialog{transform:translate(-50%,0);}
  .dialog>b{font-size:15px;}
  /* botones del modal fijos al fondo para no perderlos */
  .dialog .row{position:sticky;bottom:-12px;background:var(--bg);padding-top:8px;margin-top:2px;
    border-top:1px solid var(--border-soft);}
  /* ajustes de lectura en rejilla compacta de 2 columnas por áreas */
  .fontctl{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-items:start;}
  .fontctl .grp{gap:4px;}
  .fontctl .grp.g-font{grid-column:1 / -1;}
  .fontctl .grp.g-color{grid-column:1 / -1;}
  .fontctl .lbl{font-size:12px;}
  .fontctl .fonts button{padding:6px 12px;}
  /* steppers más pequeños y en una fila estrecha */
  .fontctl .stepper{gap:10px;}
  .fontctl .stepper button{width:36px;height:36px;font-size:18px;}
  .fontctl .stepper .val{min-width:54px;}
  /* swatches de color un poco menores */
  .fontctl .swatch{width:34px;height:34px;}
  .fontctl .pickrow input[type=color]{height:30px;}
}

/* ---------- NUEVO: visor de imagen a pantalla completa ---------- */
.imgviewer{background:#000;display:none;align-items:stretch;justify-content:stretch;padding:0;}
.imgviewer.open{display:flex;flex-direction:column;}
.imgv-top{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;justify-content:flex-end;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;z-index:2;
  background:linear-gradient(#000a,#0000);}
.imgv-btn{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff1a;
  color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.imgv-btn:active{background:#ffffff33;}
.imgv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;}
.imgv-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  -webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;}

/* ===================================================================
   Rediseño: tokens, elevación, movimiento y componentes nuevos
   =================================================================== */

/* ---------- D11: negro puro para pantallas OLED ---------- */
body.amoled,.amoled{
  --bg:#000000;--pre-bg:#0a0a0a;--toc-bg:#0a0a0a;--table-alt:#0a0a0a;--table-head:#0a0a0a;
  --kbd-bg:#0a0a0a;--bar:#000000f2;--border:#2a2f36;--border-soft:#2a2f3699;--code-bg:#656c7626;
}

/* ---------- D2: iconos del menú, un único juego de trazo ---------- */
.sheet button.item .ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  color:var(--muted);}
.sheet button.item .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.sheet button.item:active .ic{color:var(--accent);}
.tabs[hidden]{display:none;}

/* ---------- D4: elevación ---------- */
.fab{box-shadow:var(--e2);}
.sheet,.side{box-shadow:var(--e3);}
.dialog{box-shadow:var(--e3);border-radius:var(--r-lg);}
.page-toast{box-shadow:var(--e2);border-radius:var(--r-full);}

/* ---------- D5: movimiento unificado ---------- */
.fab,.icon-btn,.btn,.sheet,.side,.dialog,.page-toast,.snackbar,.appbar{
  transition-duration:var(--mo-med);transition-timing-function:var(--mo-ease);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---------- D12: de borde a borde ----------
   La ventana ya no encaja las barras del sistema, así que el contenido
   reserva su propio hueco con los safe-area-inset. */
.markdown-body{padding-bottom:calc(120px + env(safe-area-inset-bottom));}
/* #welcome reserva su hueco en ul.recent; el scroll, si hace falta, es de #welcome. */

/* ---------- D13: progreso de lectura (2 px bajo la cabecera) ---------- */
.readbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;
  pointer-events:none;overflow:hidden;}
.readbar[hidden]{display:none;}
.readbar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width var(--mo-med) var(--mo-ease);}

/* ---------- D9: carga con esqueleto + progreso real ---------- */
.loading{position:fixed;inset:0;z-index:70;background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4) var(--sp-4);}
.loading[hidden]{display:none;}
.ld-skel{display:flex;flex-direction:column;gap:var(--sp-3);max-width:840px;width:100%;margin:0 auto;}
.ld-skel .sk{display:block;height:14px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--pre-bg) 25%,var(--code-bg) 37%,var(--pre-bg) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;}
.ld-skel .sk-t{height:26px;width:55%;margin-bottom:var(--sp-2);}
.ld-skel .sk-s{width:70%;margin-bottom:var(--sp-4);}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.ld-box{margin:auto auto 0;padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));
  max-width:840px;width:100%;display:flex;flex-direction:column;gap:var(--sp-2);}
.ld-name{font-size:var(--t-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-bar{height:4px;border-radius:var(--r-full);background:var(--code-bg);overflow:hidden;}
.ld-bar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width var(--mo-fast) linear;}
.ld-pct{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums;min-height:14px;}

/* ---------- D10: snackbar ---------- */
.snackbar{position:fixed;left:var(--sp-3);right:var(--sp-3);
  bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));z-index:65;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--fg);color:var(--bg);box-shadow:var(--e3);
  font-size:var(--t-sm);opacity:0;transform:translateY(12px);
  transition:opacity var(--mo-med) var(--mo-ease),transform var(--mo-med) var(--mo-ease);}
.snackbar.show{opacity:1;transform:none;}
.snackbar[hidden]{display:none;}
.snackbar .sn-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snackbar .sn-act{flex:0 0 auto;border:none;background:none;color:var(--accent);
  font-weight:700;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.4px;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;}
.snackbar .sn-act[hidden]{display:none;}
@media (min-width:600px){.snackbar{right:auto;min-width:320px;max-width:560px;}}

/* ---------- Salto rápido de página (PDF y cómics) ---------- */
.pageslider{position:fixed;left:var(--sp-4);right:86px;
  bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));z-index:38;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-full);
  background:var(--bar);backdrop-filter:blur(8px);border:1px solid var(--border-soft);
  box-shadow:var(--e1);opacity:.55;transition:opacity var(--mo-med) var(--mo-ease);}
.pageslider:active,.pageslider:focus-within{opacity:1;}
.pageslider[hidden]{display:none;}
.pageslider input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:20px;}
.pageslider .pl-lbl{flex:0 0 auto;font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
body.fabs-collapsed .pageslider{opacity:0;pointer-events:none;}

/* ---------- D6/D7: FABs con etiqueta y halo al desplegar ---------- */
.fab{position:relative;}
.fab[data-lbl]::after{content:attr(data-lbl);position:absolute;right:calc(100% + 10px);
  padding:5px 10px;border-radius:var(--r-sm);
  /* Mismo tono que el propio FAB: no deslumbra al leer de noche. */
  background:var(--toc-bg);color:var(--fg);border:1px solid var(--border);box-shadow:var(--e2);
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(6px);
  transition:opacity var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease);}
body.fabs-open .fab[data-lbl]:not(.fab-toggle)::after{opacity:1;transform:none;}
/* Halo tras la pila desplegada, para que los iconos se lean sobre cualquier página (D7) */
body.collapsible.fabs-open .fabs::before{content:"";position:absolute;
  inset:-16px -12px -12px -170px;border-radius:var(--r-xl);
  background:radial-gradient(120% 100% at 100% 100%,#00000059,#0000);
  pointer-events:none;z-index:-1;}

/* ---------- D8: "Continuar leyendo" ---------- */
#welcome .continue{width:100%;justify-content:flex-start;gap:var(--sp-3);
  margin:var(--sp-4) 0 var(--sp-2);padding:var(--sp-3);text-align:left;
  border-color:var(--accent);box-shadow:var(--e1);}
#welcome .continue[hidden]{display:none;}
.continue .cont-ic{flex:0 0 auto;width:40px;height:54px;border-radius:6px;overflow:hidden;
  background:var(--pre-bg);display:flex;align-items:center;justify-content:center;font-size:20px;}
.continue .cont-ic img{width:100%;height:100%;object-fit:cover;display:block;}
.continue .cont-ic img[hidden],.continue .cont-fallback[hidden]{display:none;}
.continue .cont-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.continue .cont-txt b{font-size:var(--t-md);color:var(--accent);}
.continue .cont-txt small{font-size:var(--t-xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Portadas en la lista de recientes ---------- */
ul.recent .badge.cover{width:34px;height:46px;padding:0;background-size:cover;
  background-position:center;border-radius:5px;color:transparent;box-shadow:var(--e1);}

/* ---------- Ajustes de lectura: interruptores, filas y contador ---------- */
.fontctl .optrow{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) 0;cursor:pointer;}
.fontctl .optrow input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto;margin:0;}
.fontctl .optrow span{font-size:var(--t-sm);}
.fontctl .row2{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-1) 0;}
.dialog .wc-line{font-size:var(--t-xs);color:var(--muted);text-align:center;
  padding-top:var(--sp-2);border-top:1px solid var(--border-soft);}
.dialog .wc-line:empty{display:none;}

/* ---------- Buscar y reemplazar (editor) ---------- */
.findbar{flex-direction:column;align-items:stretch;}
.findbar .findrow{display:flex;align-items:center;gap:6px;width:100%;}
.findbar .findrep{margin-top:6px;}
.findbar .findrep[hidden]{display:none;}
.findbar .findrep button{width:auto;padding:0 12px;font-size:var(--t-sm);font-weight:600;height:38px;}

/* ---------- PDF: modo noche y recorte de márgenes ---------- */
#content.pdf-night .pdf-wrap{background:#111;}
#content.pdf-night .pdf-wrap canvas{filter:invert(1) hue-rotate(180deg);}
#content.pdf-crop .pdf-wrap{overflow:hidden;}
#content.pdf-crop .pdf-wrap canvas,#content.pdf-crop .pdf-wrap img{
  transform:scale(1.13);transform-origin:center center;}

/* ---------- TTS: presets de velocidad y opción de retomar ---------- */
.tts-presets{display:flex;gap:6px;}
.tts-presets button{flex:1;padding:7px 0;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--code-bg);color:var(--fg);font-size:var(--t-xs);font-weight:600;cursor:pointer;}
.tts-presets button.sel{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,transparent);}
.tts-check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-sm);cursor:pointer;}
.tts-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin:0;}