/* Lector web de las ediciones GRIMORIUM — misma identidad que el PDF, pero digital y responsive.
   Tokens alineados con edicion_design.py. No imita A4: aprovecha el medio. */
:root{
  --paper:#faf5e9; --paper-2:#f5eeda; --ink:#241a0e; --ochre:#8a6a1e; --ochre-2:#7a5c1a;
  --ed:#9c8a5e; --meta:#6f6047; --line:#d8c79f; --line-soft:#e6dcc2;
  /* Alias del design-system del chrome → tokens del lector, para que el COMPONENTE compartido
     .langsw/.langtheme (CHROME_CSS, el MISMO pill de idioma+luna del resto del sitio) se pinte
     con la paleta pergamino del lector sin duplicar el componente. Siguen al tema por indirección. */
  --panel:var(--paper-2); --linea:var(--line); --oro:var(--ochre); --bg:var(--paper);
  --ink-soft:var(--meta); --sombra:rgba(0,0,0,.22);
}
/* MODO OSCURO (lectura nocturna). Por defecto sigue al SO; el toggle fija data-theme y gana.
   Solo se redefinen los tokens → todo el lector (texto, líneas, ocres) se adapta. */
:root[data-theme="dark"]{
  --paper:#15120c; --paper-2:#1d1810; --ink:#e8ddc6; --ochre:#d8b25a; --ochre-2:#e2c06e;
  --ed:#b6a577; --meta:#a99a7e; --line:#3d3425; --line-soft:#2a2317;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15120c; --paper-2:#1d1810; --ink:#e8ddc6; --ochre:#d8b25a; --ochre-2:#e2c06e;
    --ed:#b6a577; --meta:#a99a7e; --line:#3d3425; --line-soft:#2a2317;
  }
}
html,body{ margin:0; background:var(--paper); color:var(--ink); transition:background .18s ease, color .18s ease; }
/* Salto de accesibilidad: OCULTO fuera de pantalla hasta recibir foco por teclado (el lector carga
   reader.css, no estilo.css, por eso necesita su propia regla o el enlace se vería siempre). */
.skip-link{ position:absolute; left:8px; top:-52px; z-index:1000; background:var(--paper-2); color:var(--ochre-2);
  padding:9px 15px; border:1px solid var(--ochre); border-radius:5px; text-decoration:none; transition:top .16s ease; }
.skip-link:focus{ top:8px; outline:2px solid var(--ochre); outline-offset:2px; }
/* botón flotante «subir» (el tema y el idioma usan el componente compartido .langsw/.langtheme) */
.r-totop{ position:fixed; right:16px; bottom:16px; z-index:30; width:46px; height:46px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ochre-2); font-size:1.4rem; line-height:1;
  cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;
  transition:opacity .18s ease, transform .18s ease; }
.r-totop:hover{ border-color:var(--ochre); color:var(--ochre); transform:translateY(-2px); }
.r-totop[hidden]{ display:none; }
.reader{ max-width:1120px; margin:0 auto; padding:clamp(18px,4vw,56px);
  font-family:"EB Garamond",Georgia,serif; color:var(--ink); font-size:1.06rem; line-height:1.66;
  hyphens:auto; -webkit-hyphens:auto; }
.reader a{ color:var(--ochre-2); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.18em; text-decoration-color:color-mix(in srgb,var(--ochre) 34%,transparent);
  transition:text-decoration-color .15s ease, color .15s ease; }
.reader a:hover{ text-decoration-color:var(--ochre); }

/* cabecera: usa el CHROME compartido (.top/.topL/.backlink/.brand/.langsw), el MISMO header del
   resto del sitio (CHROME_CSS va inline en el lector). Aquí solo el margen inferior y la fila de
   descarga, que en las páginas de contenido no existe pero el lector sí ofrece. */
.reader .top{ margin:0 0 1em; }
.r-actions{ margin:.5em 0 .1em; }
.r-dl{ display:inline-block; font-size:.86rem; text-decoration:none; padding:.28em .8em;
  border:1px solid var(--ochre); border-radius:6px; color:var(--ochre-2); }
.r-dl:hover{ background:var(--ochre); color:var(--paper); }
.r-title{ font-family:"Cinzel",serif; font-weight:700; font-size:clamp(1.5rem,4vw,2.2rem);
  line-height:1.1; margin:.15em 0 .05em; }
.r-sub{ font-style:italic; color:var(--meta); margin:0 0 .2em; }
.r-ms{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--meta); }
.r-rule{ height:1px; background:var(--line); margin:1em 0 1.3em; }

/* toggle de idiomas */
.langbar{ display:flex; flex-wrap:wrap; gap:.4em; align-items:center; position:sticky; top:0; z-index:5;
  background:color-mix(in srgb,var(--paper) 92%, transparent); backdrop-filter:blur(3px);
  padding:.5em 0; margin:-.5em 0 1.1em; border-bottom:1px solid var(--line-soft); }
.langbar .lbl{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); margin-right:.2em; }
.langbtn{ font-family:"Cinzel",serif; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.36em .8em; border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--meta); cursor:pointer; }
.langbtn[aria-pressed="true"]{ background:var(--ochre); color:var(--paper); border-color:var(--ochre); }

/* un folio */
.folio{ padding:1.4em 0 1.2em; border-top:1px solid var(--line-soft); scroll-margin-top:4rem; }
.folio:first-of-type{ border-top:none; }
.fhead{ display:flex; align-items:baseline; gap:.7em; margin:0 0 .8em; }
.fhead .fnum{ font-family:"Cinzel",serif; font-weight:600; color:var(--ochre-2); font-size:1.15rem; }
.fhead .fcite{ margin-left:auto; font-size:.72rem; color:var(--meta); text-decoration:none;
  border-bottom:1px dotted var(--line); }

.folio-body{ display:block; }
@media (min-width:860px){
  .folio-body{ display:grid; grid-template-columns:minmax(240px,38%) 1fr; gap:2rem; align-items:start; }
  .facs{ position:sticky; top:4.2rem; }
}
/* edición solo-texto (sin facsímil): una sola columna, texto legible centrado */
.folio-body.nofacs{ display:block; }
.folio-body.nofacs .blocks{ max-width:44rem; margin:0 auto; }
/* nota de "solo-texto / facsímil pendiente" bajo el manuscrito */
.r-facsnote{ font-size:.8rem; font-style:italic; color:var(--meta); line-height:1.45;
  background:color-mix(in srgb,var(--ochre) 7%,transparent); border-left:2px solid var(--ochre);
  padding:.55em .8em; margin:.6rem 0 0; border-radius:2px; }
/* facsímil como lámina, clic para ampliar */
.facs figure{ margin:0; }
.facs img{ width:100%; height:auto; border:1px solid var(--line); box-shadow:0 1px 6px rgba(40,28,10,.12);
  cursor:zoom-in; display:block; }
.facs figcaption{ color:var(--meta); font-size:.68rem; font-style:italic; text-align:center; margin-top:.4em; }
.facs .zoomhint{ display:block; text-align:center; font-size:.64rem; color:var(--ochre); letter-spacing:.1em;
  text-transform:uppercase; margin-top:.2em; }

.blocks{ min-width:0; }
.lblock{ margin:0 0 1.15em; }
.lblock .lbl{ font-family:"Cinzel",serif; margin:0 0 .3em; border-bottom:1px dotted var(--line);
  padding-bottom:.12em; }
.lblock .lbl .kind{ font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); }
.lblock .lbl .lang{ font-style:italic; font-size:.78rem; color:var(--meta); margin-left:.55em; }
.lblock .text{ max-width:72ch; }
.lblock .text p{ margin:0 0 .5em; text-align:justify; }
.lblock .ed{ color:var(--ed); font-style:italic; }

/* toggle: mostrar/ocultar por idioma seleccionado */
.reader[data-show="orig"] .lblock:not([data-lang="orig"]){ display:none; }
.reader[data-show="es"]   .lblock:not([data-lang="es"]){ display:none; }
.reader[data-show="en"]   .lblock:not([data-lang="en"]){ display:none; }
/* si el bloque de un idioma está vacío se oculta siempre (lo marca el generador con .empty) */
.lblock.empty{ display:none !important; }

/* CATÁLOGO (Pseudomonarchia: entradas sin facsímil por ítem) */
.r-frontis{ max-width:330px; margin:.5em auto 1.8em; display:block; }
.r-frontis img{ width:100%; height:auto; border:1px solid var(--line); box-shadow:0 1px 6px rgba(40,28,10,.12); cursor:zoom-in; }
.r-frontis figcaption{ color:var(--meta); font-size:.68rem; font-style:italic; text-align:center; margin-top:.4em; }
.r-frontis .zoomhint{ display:block; text-align:center; font-size:.64rem; color:var(--ochre); letter-spacing:.1em; text-transform:uppercase; margin-top:.2em; }
.catalog{ max-width:74ch; margin:0 auto; }
.catalog .entry{ padding:1.1em 0; border-top:1px solid var(--line-soft); scroll-margin-top:4rem; }
.catalog .entry:first-child{ border-top:none; }
.catalog .ename{ font-family:"Cinzel",serif; font-weight:600; color:var(--ink); font-size:1.16rem; line-height:1.2; margin:0 0 .08em; }
.catalog .ename .enum{ color:var(--ochre); font-size:.82em; margin-right:.45em; }
.catalog .erank{ font-style:italic; color:var(--meta); font-size:.85rem; margin:0 0 .5em; }
.catalog .lblock{ margin:0 0 .55em; }
.catalog .lblock .elang{ display:block; font-family:"Cinzel",serif; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); margin:0 0 .2em; }

/* navegación entre folios */
.folio-nav{ display:flex; justify-content:space-between; gap:1em; margin:.6em 0 0; font-size:.85rem; }
.folio-nav a{ text-decoration:none; color:var(--ochre-2); }
.folio-nav a:hover{ border-bottom:1px solid var(--ochre-2); }

/* navegación entre páginas (libros grandes paginados, p.ej. Múnich) */
.pagenav{ display:flex; justify-content:space-between; align-items:center; gap:1em; margin:1.2em 0;
  padding:.55em 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.pagenav a{ color:var(--ochre-2); text-decoration:none; padding:.32em .85em; border:1px solid var(--line); border-radius:6px; }
.pagenav a:hover{ background:var(--ochre); color:var(--paper); }
.pagenav .pgn{ font-family:"Cinzel",serif; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--meta); }

.r-foot{ text-align:center; color:var(--meta); font-size:.8rem; margin:2.4em 0 0; border-top:1px solid var(--line);
  padding-top:.9em; }

/* modal de zoom del manuscrito */
.facsmodal{ position:fixed; inset:0; background:rgba(20,14,6,.92); z-index:50;
  display:flex; align-items:center; justify-content:center; overscroll-behavior:contain; }
.facsmodal[hidden]{ display:none; }
.facsmodal .stage{ width:100%; height:100%; overflow:auto; display:flex; align-items:center; justify-content:center;
  padding:2vh 2vw; }
.facsmodal img{ max-width:none; height:auto; box-shadow:0 6px 40px rgba(0,0,0,.5); cursor:grab;
  transition:width .12s ease; }
.facsmodal .closebtn{ position:fixed; top:.7rem; right:1rem; z-index:52; background:transparent; border:none;
  color:#f3ecd9; font-size:2rem; line-height:1; cursor:pointer; font-family:"Cinzel",serif; }
.facsmodal .hint{ position:fixed; bottom:.8rem; left:50%; transform:translateX(-50%); color:#e6dcc2;
  font-size:.72rem; letter-spacing:.05em; background:rgba(20,14,6,.6); padding:.3em .8em; border-radius:999px; }

/* ── Resaltar texto + Reanudar lectura (reader.js) ── */
.hlbar{position:absolute;transform:translateX(-50%);z-index:60}
.hlbtn{background:var(--paper-2);border:1px solid var(--oro);color:var(--oro);
  font:600 .82rem/1 system-ui,-apple-system,sans-serif;padding:9px 13px;border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);cursor:pointer;white-space:nowrap}
.hlbtn:hover{filter:brightness(1.12)}
mark.uhl{background:color-mix(in srgb,var(--oro) 32%,transparent);color:inherit;
  border-radius:2px;cursor:pointer;padding:.02em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.uhl:hover{background:color-mix(in srgb,var(--oro) 46%,transparent)}
.rd-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);background:var(--paper-2);
  border:1px solid var(--oro);color:var(--ink);padding:9px 14px;border-radius:11px;
  font-size:.86rem;display:flex;gap:12px;align-items:center;opacity:0;
  transition:opacity .35s,transform .35s;z-index:70}
.rd-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.rd-toast-top{background:transparent;border:1px solid var(--oro);color:var(--oro);
  padding:4px 10px;border-radius:7px;cursor:pointer;font-size:.8rem}
.rd-continue{position:fixed;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));
  background:var(--paper-2);border:1px solid var(--oro);color:var(--oro);
  padding:9px 14px;border-radius:999px;text-decoration:none;font-size:.86rem;
  box-shadow:0 4px 16px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);
  transition:opacity .3s,transform .3s;z-index:70}
.rd-continue.on{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.rd-toast,.rd-continue{transition:none}}