:root {
  --bg:        #080808;
  --bg-alt:    #111111;
  --bg-deep:   #000000;
  --page:      #0d0d0d;

  --ink:       #f5f5f5;
  --ink-soft:  #d0d0d0;
  --ink-muted: #8a8a8a;
  --ink-ghost: #505050;

  --rule:      #292929;

  --mark:      #3b82f6;
  --mark-lt:   #60a5fa;
  --mark-dk:   #1d4ed8;
  --mark-bg:   rgba(59,130,246,0.10);
  --mark-bg2:  rgba(59,130,246,0.18);
  --mark-bg-h: rgba(59,130,246,0.10);
  --mark-bg-p: rgba(59,130,246,0.18);

  --green:     #22c55e;
  --green-lt:  #4ade80;
  --green-bg-h: rgba(34,197,94,0.12);
  --green-bg-p: rgba(34,197,94,0.20);
  --red:       #ef4444;
  --red-lt:    #f87171;
  --red-bg-h:  rgba(239,68,68,0.12);
  --red-bg-p:  rgba(239,68,68,0.20);
  /* Traído del PR #3: un color por tipo de acción (hojear = violeta). */
  --violet:    #a78bfa;
  --violet-lt: #c4b5fd;
  --violet-bg-h: rgba(167,139,250,0.14);
  --violet-bg-p: rgba(167,139,250,0.22);
  --emergente: #60a5fa;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius:    3px;
  --nav-h:     52px;

  /* Defaults de layout — antes solo se definían dentro del media
     query de pantallas angostas, así que en desktop (>1100px)
     quedaban sin valor. Corregido: estos son los valores base. */
  --col-pg:    640px;
  --col-w:     260px;
  --col-pad:   64px;
  --body-sz:   16px;   /* párrafo estándar: 12 pt */
  --sep:       var(--ink-muted);
  --page-edge: #151515;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--mark-lt);}
.top-nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);padding:14px 30px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--ink-soft);}
.top-nav .left,.top-nav .right{display:flex;gap:20px;align-items:center;}
.book-title{color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:0.16em;font-size:11px;position:relative;padding-left:14px;}
.book-title::before{content:'';position:absolute;left:0;top:50%;width:7px;height:1px;background:var(--mark);transform:translateY(-50%) rotate(-38deg);}
.chapter-label{color:var(--ink-muted);text-transform:uppercase;}
.nav-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--rule);color:var(--ink-soft);transition:all 0.15s;border-radius:2px;}
.nav-btn:hover{border-color:var(--ink-soft);color:var(--ink);}
.nav-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* Back-bar — pila de "volver a" cuando se llega desde una diagonal
   que cruzó de obra (navegación real de página, no SPA). Vive en
   sessionStorage porque cruzar de obra es un load nuevo del documento;
   sin esto, la vuelta se pierde en cada salto. */
.back-bar{position:sticky;top:var(--nav-h);z-index:48;background:var(--mark-dk);color:#fff;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;padding:8px 28px;display:none;align-items:center;gap:10px;cursor:pointer;}
.back-bar.active{display:flex;}
.back-bar:hover{background:#1a44b8;}
.back-bar::before{content:"←";}

.layout{display:grid;grid-template-columns:1fr var(--col-pg) 1fr;min-height:calc(100vh - 47px);position:relative;}
.wing{background:var(--bg);position:relative;min-width:var(--col-w);}
.wing-content{position:absolute;width:calc(100% - 48px);padding:0 24px;opacity:0;transition:opacity 0.25s ease,transform 0.25s ease;pointer-events:none;transform:translateY(6px);max-height:calc(100vh - var(--nav-h) - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;}
.wing-content::-webkit-scrollbar{width:5px;}
.wing-content::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px;}

/* AGREGADO (excerpt + leer completo): los emergentes son de largo ensayístico
   (5.000+ caracteres) y el ala nunca da más de ~150-590px de medida. En el ala
   queda un excerpt con degradado; el texto completo se abre en una columna de
   lectura de verdad. */
/* AGREGADO (corte de palabra): en las alas la medida baja de 150px y las
   palabras largas se salian del borde recortadas en vez de partirse. */
.wing-content .accion-text,.wing-content .diagonal-emergente,.wing-content .diagonal-resumen,.wing-content .diagonal-cita-text,.wing-content .accion-pending,.wing-content .diagonal-instrumento{overflow-wrap:anywhere;hyphens:auto;}
/* AGREGADO (fijado multiple): con algo fijado las alas dejan de colgar del
   fragmento y pasan a columna pegajosa, para que lo fijado acompanie la
   lectura en vez de quedarse atras. */
.wing-content.apilado{position:sticky;top:calc(var(--nav-h) + var(--subnav-h, 0px) + 20px);max-height:calc(100vh - var(--nav-h) - var(--subnav-h, 0px) - 40px);}
.wing-left .wing-content.apilado{margin-left:auto;}
.grupo + .grupo{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);}
.grupo.es-hover{opacity:0.82;}
.grupo-cab{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;}
.grupo-cab q{flex:1;font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;color:var(--ink-ghost);font-style:normal;line-height:1.5;quotes:"\201C" "\201D";}
.grupo-quitar{cursor:pointer;color:var(--ink-ghost);font-size:13px;line-height:1;padding:0 2px;flex-shrink:0;}
.grupo-quitar:hover{color:var(--ink);}

/* Cuando se amontonan, cada tarjeta cede altura por pasos: es mejor ver que
   hay cuatro cosas fijadas, recortadas, que ver una entera y perder el resto. */
.wing-content.dens-2 .accion-text,.wing-content.dens-2 .diagonal-emergente{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;max-height:none;}
.wing-content.dens-3 .accion-text,.wing-content.dens-3 .diagonal-emergente{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;max-height:none;}
.wing-content.dens-4 .accion-text,.wing-content.dens-4 .diagonal-emergente{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:none;}
.wing-content.dens-2 .texto-largo.clamp::after,.wing-content.dens-3 .texto-largo.clamp::after,.wing-content.dens-4 .texto-largo.clamp::after{display:none;}
.wing-content.dens-3 .diagonal-cita,.wing-content.dens-4 .diagonal-cita,.wing-content.dens-4 .diagonal-instrumento{display:none;}

.texto-largo{position:relative;}
.texto-largo.clamp{max-height:16em;overflow:hidden;}
.texto-largo.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5em;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;}
.diagonal-emergente p,.accion-text p{margin:0 0 0.75em;}
.diagonal-emergente p:last-child,.accion-text p:last-child{margin-bottom:0;}
.leer-completo{margin:10px 0 14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mark-lt);border-bottom:1px dotted var(--mark-lt);cursor:pointer;display:inline-block;transition:color 0.15s,border-color 0.15s;}
.leer-completo:hover{color:var(--ink);border-bottom-color:var(--ink);}
.accion-card .leer-completo{color:var(--ink-muted);border-bottom-color:var(--ink-muted);}
.accion-card.nota .leer-completo{color:var(--green-lt);border-bottom-color:var(--green-lt);}
.accion-card.marginalia .leer-completo{color:var(--red-lt);border-bottom-color:var(--red-lt);}

.lectura-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.68);backdrop-filter:blur(3px);z-index:95;opacity:0;pointer-events:none;transition:opacity 0.18s;}
.lectura-overlay.open{opacity:1;pointer-events:auto;}
.lectura-modal{position:fixed;top:7vh;left:50%;transform:translateX(-50%) translateY(-10px);width:min(760px,92vw);max-height:84vh;background:var(--page);border:1px solid var(--rule);border-radius:6px;box-shadow:0 28px 90px rgba(0,0,0,0.6);z-index:96;opacity:0;pointer-events:none;transition:opacity 0.18s,transform 0.18s;display:flex;flex-direction:column;overflow:hidden;}
.lectura-modal.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.lectura-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-muted);background:var(--bg-alt);}
.lectura-modal-body{padding:36px 46px 48px;overflow-y:auto;}
.lectura-modal-body p{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:0 0 1.05em;text-wrap:pretty;}
.lectura-modal-body p:last-child{margin-bottom:0;}
.lectura-tipo{font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--acento,var(--ink-muted));margin-bottom:14px;}

/* AGREGADO (color + detalles en la columna de lectura): la ventana hereda el
   color de la accion que la abrio, y arriba del texto quedan los datos que
   antes solo estaban en la tarjeta del ala. */
.lectura-modal{--acento:var(--ink-ghost);border-top:2px solid var(--acento);}
.lectura-modal.tipo-diagonal{--acento:var(--mark);}
.lectura-modal.tipo-nota{--acento:var(--green);}
.lectura-modal.tipo-marginalia{--acento:var(--red);}
.lectura-modal.tipo-hojear{--acento:var(--violet);}
.lectura-modal-head #lectura-modal-label{color:var(--acento);}
.lectura-meta-wrap{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:16px;}
.lectura-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;}
.lectura-meta dt{color:var(--ink-ghost);text-transform:uppercase;letter-spacing:0.14em;font-size:9px;padding-top:1px;}
.lectura-meta dd{margin:0;color:var(--ink-soft);}
.lectura-cita{border-left:2px solid var(--acento);padding-left:16px;}
.lectura-cita-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-ghost);margin-bottom:7px;}
.lectura-cita q{display:block;font-style:italic;font-size:14.5px;line-height:1.6;color:var(--ink-soft);quotes:"\201C" "\201D";}
.lectura-ir{align-self:flex-start;}
.lectura-sep{border:none;border-top:1px solid var(--rule);margin:30px 0;}

.wing-content.active{opacity:1;pointer-events:auto;transform:translateY(0);}
.wing-left .wing-content{right:0;}
.wing-right .wing-content{left:0;}
.book-page{background:var(--page);padding:84px var(--col-pad) 130px;box-shadow:-1px 0 0 var(--page-edge),1px 0 0 var(--page-edge);min-height:calc(100vh - 47px);}
.page-header{margin-bottom:60px;text-align:center;position:relative;}
.chapter-number{font-family:var(--font-mono);font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:18px;}
.chapter-title{font-weight:400;font-style:italic;font-size:36px;line-height:1.16;color:var(--ink);letter-spacing:-0.014em;text-wrap:balance;}
.chapter-rule{width:34px;height:1px;background:var(--mark);margin:26px auto 0;transform:rotate(-8deg);}
.text-body{font-family:'EB Garamond', Garamond, Georgia, serif;font-size:var(--body-sz);line-height:1.5;color:var(--ink);hyphens:auto;text-wrap:pretty;text-align:justify;}
/* Título / Subtítulo del taller (mismos valores que .rte-body h2/h3) */
.text-body h2,.text-body h3{font-family:'Newsreader', Georgia, serif;font-weight:700;font-style:normal;line-height:1.68;text-align:left;color:var(--ink);letter-spacing:0;text-transform:none;border:none;padding:0;scroll-margin-top:calc(var(--nav-h) + 56px);}
.text-body h2{font-size:26px;margin:1.4em 0 0.5em;}
.text-body h3{font-size:18px;margin:1.2em 0 0.4em;}
.text-body > h2:first-child,.text-body > h3:first-child{margin-top:0;}
/* Separadores: más contraste; los editados en el taller traen su estilo */
.text-body hr{border:none;border-top:1px solid var(--sep);margin:28px auto;width:100%;}
/* Párrafos con fórmulas: corte de línea normal. Con text-wrap:pretty y
   KaTeX, el capítulo "ci:TA" de no teoría hacía caer la pestaña en Chromium. */
.text-body :has(.katex){text-wrap:wrap;}
/* Sin sangría automática (decisión explícita, no revertir) — el
   espaciado entre párrafos es por margin-bottom, sincronizado con
   .rte-body p del taller (uploader-v1.html). > div cubre párrafos
   viejos guardados como <div> por comportamiento de navegador. */
.text-body p, .text-body > div{text-indent:0;margin-bottom:0.8em;}
.text-body blockquote{border-left:2px solid var(--mark);padding-left:18px;margin:20px 0;font-style:italic;color:var(--ink-soft);}

/* ── Acción — marca unificada ──
   Toda intervención (ancla/nota/hojear/marginalia/diagonal) queda
   embebida en el body como <span class="accion-mark" data-accion="id"
   o "id1,id2"> (coma = ids superpuestos e independientes en el mismo
   fragmento). El estilo visual es el "tipo dominante" entre los tipos
   agrupados bajo esos ids — diagonal > hojear > marginalia/nota — pero
   el hover/click siempre muestra TODOS los tipos agrupados, no solo
   el dominante. Una acción cuyo único tipo es "ancla" no recibe clase
   visual ni listeners: es un marcador puro, invisible, sin popup —
   solo existe para que otras acciones puedan apuntarle. */
.accion-mark{padding:0 1px;transition:background 0.15s,text-decoration-color 0.15s;border-radius:2px;}
.accion-mark[data-visual="ancla"]{cursor:default;}
/* AGREGADO (marcas en segundo plano): el texto de la marca se queda en el color
   de la tinta — colorearlo lo traia al primer plano y competia con la lectura.
   La senal pasa a ser una linea de un pixel en el color del tipo de accion,
   bajada de la base y con skip-ink, asi que no toca las descendentes ni corta
   el renglon justificado como hacia el border-bottom pegado a la caja. El peso
   aparece recien al pasar por encima o al fijar, que es cuando hace falta. */
/* El cuerpo corre medio tono por debajo de la tinta plena y lo marcado sube a
   blanco: la accion se distingue por ser lo mas claro del renglon, sin color,
   y sostiene la linea de su tipo como segunda senal. */
.accion-mark[data-visual]:not([data-visual="ancla"]){color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:0.24em;text-decoration-skip-ink:auto;border-bottom:none;}

/* AGREGADO: un fragmento con mas de una accion parte la linea en tantos
   segmentos como acciones tenga, cada uno del color de su tipo. Se lee de un
   vistazo cuantas hay y de que clase, sin agregar nada al renglon. */
.accion-mark[data-multi]{text-decoration-line:none;background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;padding-bottom:0.2em;}
.accion-mark[data-visual="diagonal"]{cursor:pointer;text-decoration-color:color-mix(in oklab,var(--mark) 50%,transparent);}
.accion-mark[data-visual="diagonal"]:hover{background-color:var(--mark-bg-h);text-decoration-color:var(--mark);}
.accion-mark[data-visual="diagonal"].pinned{background-color:var(--mark-bg-p);text-decoration-color:var(--mark);}
/* AGREGADO: contraste por tipo — hojear=violeta, nota=verde, marginalia=rojo (antes las 3 compartían mark/ink-ghost) */
/* Hojear se distingue por la forma de la linea (punteada), no por el color del
   texto; la flechita baja de tamano y de opacidad para no pesar en el renglon. */
.accion-mark[data-visual="hojear"]{cursor:pointer;text-decoration-style:dotted;text-decoration-color:color-mix(in oklab,var(--violet) 55%,transparent);}
.accion-mark[data-visual="hojear"]:hover{background-color:var(--violet-bg-h);text-decoration-color:var(--violet);}
.accion-mark[data-visual="hojear"].pinned{background-color:var(--violet-bg-p);text-decoration-color:var(--violet);}
.accion-mark[data-visual="hojear"]::after{content:" ↗";font-size:0.62em;color:color-mix(in oklab,var(--violet) 70%,transparent);vertical-align:super;}
.accion-mark[data-visual="nota"]{cursor:pointer;text-decoration-color:color-mix(in oklab,var(--green) 50%,transparent);}
.accion-mark[data-visual="nota"]:hover{background-color:var(--green-bg-h);text-decoration-color:var(--green);}
.accion-mark[data-visual="nota"].pinned{background-color:var(--green-bg-p);text-decoration-color:var(--green);}
.accion-mark[data-visual="marginalia"]{cursor:pointer;text-decoration-color:color-mix(in oklab,var(--red) 50%,transparent);}
.accion-mark[data-visual="marginalia"]:hover{background-color:var(--red-bg-h);text-decoration-color:var(--red);}
.accion-mark[data-visual="marginalia"].pinned{background-color:var(--red-bg-p);text-decoration-color:var(--red);}
/* llegada por hipervínculo con id específico — se activa ese fragmento
   sin depender de hover/click del lector */
.accion-mark.arrival-flash{animation:arrival-flash 1.6s ease;}
@keyframes arrival-flash{0%{background:var(--mark-bg2);}100%{background:transparent;}}

/* Ala izquierda — nota / marginalia / hojear. Varias acciones pueden
   apilarse bajo un mismo id (Agregar acción) o coexistir por ids
   superpuestos: cada una es una tarjeta separada, apiladas. */
.accion-card{position:relative;padding-left:14px;}
.accion-card::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--ink-ghost);}
.accion-card.nota::before{background:var(--green);}
.accion-card.marginalia::before{background:var(--red);}
.accion-card.hojear::before{background:var(--violet);}
.accion-card.nota .accion-label{color:var(--green-lt);}
.accion-card.hojear .accion-label{color:var(--violet-lt);}
.accion-card + .accion-card{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);}
.accion-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px;}
.accion-text{font-style:italic;font-size:14.5px;line-height:1.58;color:var(--ink-soft);}
.accion-goto{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--mark-lt);border-bottom:1px dotted var(--mark-lt);display:inline-block;cursor:pointer;transition:color 0.15s,border-color 0.15s;}
.accion-goto:hover{color:var(--ink);border-bottom-color:var(--ink);}
.accion-goto::before{content:"↗ ";}
.accion-pending{font-family:var(--font-mono);font-size:10px;color:var(--ink-ghost);font-style:italic;}

/* Ala derecha — diagonal, siempre. Varias diagonales bajo un mismo id
   (multi-destino desde un mismo origen) se apilan igual que a la
   izquierda. */
.diagonal-card{position:relative;padding-left:14px;}
.diagonal-card::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--mark);}
.diagonal-card + .diagonal-card{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule);}
.diagonal-fuente{font-family:var(--font-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.diagonal-fuente::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emergente);}
.diagonal-categoria{font-family:var(--font-mono);font-size:9px;color:var(--ink-ghost);margin-bottom:10px;}
.dg-destinos{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;}
.dg-dest{border-left:1px solid var(--rule);padding-left:10px;font-size:13px;}
.dg-dest-cita{font-style:italic;color:var(--ink-soft);margin:3px 0 4px;font-size:13.5px;}
.dg-dest .diagonal-ira{margin-top:2px;}
.diagonal-emergente{font-size:14.5px;line-height:1.58;color:var(--ink);margin-bottom:14px;font-style:italic;}
.diagonal-cita{border-left:2px solid var(--ink-muted);padding:2px 0 2px 14px;margin-bottom:14px;}
.diagonal-cita-text{font-style:italic;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.bloque-toggle{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px dotted var(--ink-muted);cursor:pointer;display:inline-block;margin-bottom:10px;}
.bloque-toggle:hover{color:var(--ink);border-bottom-color:var(--ink);}
.bloque-content{display:none;font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:10px;}
.bloque-content.open{display:block;}
.diagonal-ira{margin-top:8px;}

/* Modo poesía — conserva los saltos de línea exactos tal como se
   tipearon, sin el reflow en párrafos del modo normal. */
.poesia-body{white-space:pre-wrap;}
.poesia-body p{text-indent:0;}

/* Desplazamiento lateral (hojear) — deliberadamente distinto de la
   navegación secuencial de abajo, que no anima. */
.book-page{transition:transform 0.22s ease,opacity 0.22s ease;}
.book-page.slide-out-left{transform:translateX(-40px);opacity:0;}
.book-page.slide-out-right{transform:translateX(40px);opacity:0;}
.book-page.slide-in-left{animation:slide-in-from-left 0.26s ease;}
.book-page.slide-in-right{animation:slide-in-from-right 0.26s ease;}
@keyframes slide-in-from-left{from{transform:translateX(-40px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slide-in-from-right{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@media (prefers-reduced-motion: reduce){.book-page.slide-in-left,.book-page.slide-in-right{animation:none;}}

.pin-indicator{font-family:var(--font-mono);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--mark-lt);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.pin-indicator::before{content:"";width:9px;height:9px;border:1.4px solid var(--mark-lt);transform:rotate(45deg);flex-shrink:0;}
.pin-clear{margin-left:auto;cursor:pointer;color:var(--ink-muted);border-bottom:1px dotted var(--ink-muted);font-family:var(--font-mono);}
.pin-clear:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* Sub-navegación dentro de un capítulo largo — solo aparece si el
   cuerpo tiene <h3> (subtítulos principales). Sticky justo debajo
   del top-nav (o de la back-bar, si está activa). Los <h3> mismos
   hacen de barra divisora entre subtítulos; los <h4> son subtítulos
   internos, sin entrada propia en esta barra (evita saturarla). */
.chapter-subnav{position:sticky;top:var(--nav-h);z-index:40;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:10px 28px;display:none;gap:4px;flex-wrap:wrap;align-items:center;}
.chapter-subnav.active{display:flex;}
.subnav-pill{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;padding:5px 12px 6px;border:none;border-bottom:2px solid transparent;color:var(--ink-muted);cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.subnav-pill:hover{color:var(--ink-soft);}
.subnav-pill.active{color:var(--ink);border-bottom-color:var(--mark);}
.text-body h4{font-family:var(--font-body);font-style:italic;font-size:20px;font-weight:400;color:var(--ink-soft);margin:34px 0 14px;scroll-margin-top:calc(var(--nav-h) + 66px);}
.chapter-nav{margin-top:90px;padding-top:30px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:24px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;}
.chapter-nav button{color:var(--ink-muted);border-bottom:1px dotted var(--ink-muted);padding-bottom:2px;transition:color 0.15s,border-color 0.15s;}
.chapter-nav button:hover{color:var(--ink);border-bottom-color:var(--ink);}
.index-panel{position:fixed;top:0;left:0;bottom:0;width:360px;background:var(--bg);border-right:1px solid var(--rule);padding:64px 32px 28px;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(.22,.61,.36,1);z-index:70;overflow-y:auto;box-shadow:4px 0 40px rgba(0,0,0,.35);}
.index-panel.active{transform:translateX(0);}
.index-title{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--rule);}
.index-item{display:block;padding:12px 0;color:var(--ink-soft);border-bottom:1px solid var(--rule);cursor:pointer;transition:color 0.15s,padding-left 0.15s;}
.index-item:hover{color:var(--ink);padding-left:5px;}
.index-item.active{color:var(--ink);font-weight:500;}
.index-item .num{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:0.08em;margin-right:10px;}
.index-item .name{font-style:italic;font-size:15px;}
.overlay-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:65;}
.overlay-bg.active{opacity:1;pointer-events:auto;}
.legend{position:fixed;bottom:22px;left:22px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;color:var(--ink-muted);background:var(--page);padding:11px 15px;border:1px solid var(--rule);border-radius:2px;z-index:40;line-height:1.7;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.legend strong{color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:0.14em;display:block;margin-bottom:6px;font-size:9px;}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle;}
.dot.diagonal{background:var(--mark);}
.dot.hojear{background:var(--mark-lt);}
.dot.nota{background:var(--ink-ghost);}

/* ─── Modos alternativos — reemplazan el viejo toggle oscuro/claro
   (el claro quedó como residuo sin CSS propia, nunca cambiaba nada).
   Ahora #btn-theme cicla oscuro → alto-contraste → manuscrito. ─── */
html[data-modo="alto-contraste"]{
  --bg:#000; --bg-alt:#000; --bg-deep:#000; --page:#000; --page-edge:#000;
  --ink:#fff; --ink-soft:#f4f4f4; --ink-muted:#d0d0d0; --ink-ghost:#8f8f8f;
  --rule:#5c5c5c;
  --mark:#6fb0ff; --mark-lt:#9cc9ff; --mark-dk:#3b82f6;
  --mark-bg-h: rgba(111,176,255,0.22); --mark-bg-p: rgba(111,176,255,0.34);
  --emergente:#9cc9ff;
}
html[data-modo="manuscrito"]{
  --bg:#14100a; --bg-alt:#1c150d; --bg-deep:#0c0906; --page:#19130c; --page-edge:#251a10;
  --ink:#ecdfc4; --ink-soft:#cbb896; --ink-muted:#96805f; --ink-ghost:#5c4d38;
  --rule:#332918;
  --mark:#c9932f; --mark-lt:#e0b158; --mark-dk:#a3741f;
  --mark-bg-h: rgba(201,147,47,0.14); --mark-bg-p: rgba(201,147,47,0.24);
  --emergente:#e0b158;
}
/* ─── Glosa — la página del Talmud y la Glossa ordinaria: papel, tinta,
   rúbrica roja en vez del azul, EB Garamond para el texto e IM Fell
   para rótulos e inicial; las alas se leen como glosas al margen,
   separadas por la línea de pautado. (propuestas-visuales/esteticas/
   glosa.html) ─── */
html[data-modo="glosa"]{
  --bg:#e9e1d1; --bg-alt:#e2d8c4; --bg-deep:#ddd2bc; --page:#efe8da; --page-edge:rgba(142,44,22,.22);
  --ink:#1c1814; --ink-soft:#4a4036; --ink-muted:#7d6f5f; --ink-ghost:#a4937c;
  --rule:rgba(142,44,22,.24);
  --mark:#8e2c16; --mark-lt:#8e2c16; --mark-dk:#6f2210;
  --mark-bg:rgba(142,44,22,.07); --mark-bg2:rgba(142,44,22,.13);
  --mark-bg-h:rgba(142,44,22,.10); --mark-bg-p:rgba(142,44,22,.18);
  --green:#4f6b3a; --green-lt:#4f6b3a; --green-bg-h:rgba(79,107,58,.12); --green-bg-p:rgba(79,107,58,.2);
  --red:#9a5a1c; --red-lt:#9a5a1c; --red-bg-h:rgba(154,90,28,.12); --red-bg-p:rgba(154,90,28,.2);
  --violet:#5b4a7a; --violet-lt:#5b4a7a; --violet-bg-h:rgba(91,74,122,.12); --violet-bg-p:rgba(91,74,122,.2);
  --emergente:#6f2210;
  --font-body:'EB Garamond', Garamond, Georgia, serif;
  --font-rubro:'IM Fell English SC', 'EB Garamond', serif;
}
html[data-modo="glosa"] body{background:var(--bg);}
html[data-modo="glosa"] .top-nav{background:color-mix(in oklab,var(--bg) 94%,transparent);}
html[data-modo="glosa"] .book-title,
html[data-modo="glosa"] .chapter-number{font-family:var(--font-rubro);text-transform:none;letter-spacing:.06em;font-size:14px;color:var(--mark);}
html[data-modo="glosa"] .chapter-title{font-family:var(--font-rubro);font-style:normal;color:var(--mark);font-size:40px;letter-spacing:.03em;}
html[data-modo="glosa"] .chapter-rule{transform:none;width:60px;background:var(--rule);}
html[data-modo="glosa"] .text-body{text-align:justify;}
html[data-modo="glosa"] .text-body > p:first-of-type::first-letter{font-family:var(--font-rubro);float:left;font-size:3.6em;line-height:.82;padding:.08em .12em 0 0;color:var(--mark);}
html[data-modo="glosa"] .wing-left{border-right:1px solid var(--rule);}
html[data-modo="glosa"] .wing-right{border-left:1px solid var(--rule);}
html[data-modo="glosa"] .wing-left .wing-content{text-align:right;}
html[data-modo="glosa"] .accion-label,
html[data-modo="glosa"] .diagonal-fuente,
html[data-modo="glosa"] .ala-label{font-family:var(--font-rubro);text-transform:none;letter-spacing:.05em;font-size:12.5px;}
html[data-modo="glosa"] .accion-text,
html[data-modo="glosa"] .diagonal-emergente{font-style:italic;}
html[data-modo="glosa"] .accion-card::before{display:none;}
html[data-modo="glosa"] .accion-card{padding-left:0;}
html[data-modo="glosa"] .legend{background:var(--page);}
/* La sombra del índice cerrado asoma sobre el papel: solo con el panel abierto. */
.index-panel:not(.active){box-shadow:none;}
@media(max-width:700px){html[data-modo="glosa"] .text-body{text-align:left;}}

#btn-recorrido.active{background:var(--mark-bg);border-color:var(--mark);color:var(--mark-lt);}
.recorrido-nav{display:flex;flex-direction:column;gap:10px;}
.recorrido-link{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--mark-lt);border:1px solid color-mix(in oklab, var(--mark) 40%, var(--rule));padding:12px 16px;border-radius:var(--radius);transition:all 0.15s;background:var(--mark-bg);}
.recorrido-link:hover{border-color:var(--mark);background:var(--mark-bg2);color:var(--ink);}
.recorrido-empty{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);display:flex;flex-direction:column;gap:14px;letter-spacing:0.02em;}
.recorrido-empty button{align-self:flex-start;color:var(--ink-muted);border-bottom:1px dotted var(--ink-muted);text-transform:uppercase;letter-spacing:0.1em;font-size:10.5px;}
.diagonal-lemas{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;color:var(--emergente);margin:-8px 0 12px;}
.diagonal-panel{border-left:1px solid var(--rule);padding-left:10px;margin-bottom:14px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
.diagonal-panel-detalle{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px;}
.diagonal-panel-parrafo{margin-bottom:6px;}
.diagonal-panel-cita{font-style:italic;margin-bottom:6px;}
.diagonal-panel-abajo{font-size:12px;color:var(--ink-muted);}
.diagonal-instrumento{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.05em;color:var(--ink-ghost);margin-top:-6px;margin-bottom:14px;}
.diag-dato{display:grid;grid-template-columns:92px 1fr;gap:8px;margin:0 0 7px;font-family:var(--font-mono);font-size:10.5px;line-height:1.45;}
.diag-k{color:var(--ink-ghost);text-transform:uppercase;letter-spacing:.12em;font-size:9px;padding-top:2px;}
.diag-v{color:var(--ink);}
.diag-v small{color:var(--ink-muted);font-size:inherit;}
.diag-nodos span+span::before{content:' · ';color:var(--ink-ghost);}
.diag-nodos{color:var(--emergente);}
.diagonal-resumen{font-size:14.5px;line-height:1.58;color:var(--ink);margin:12px 0 14px;font-style:italic;}
.diagonal-resumen p{margin:0 0 .7em;}
.diagonal-resumen p:last-child{margin-bottom:0;}

/* ─── Mini-mapa de subgrafo embebido por obra ─── */
.mapa-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);z-index:80;opacity:0;pointer-events:none;transition:opacity 0.18s;}
.mapa-overlay.open{opacity:1;pointer-events:auto;}
.mapa-modal{position:fixed;top:10vh;left:50%;transform:translateX(-50%) translateY(-10px);width:min(460px,92vw);max-height:76vh;background:var(--page);border:1px solid var(--rule);border-radius:6px;box-shadow:0 24px 80px rgba(0,0,0,0.5);z-index:90;opacity:0;pointer-events:none;transition:opacity 0.18s, transform 0.18s;overflow:hidden;display:flex;flex-direction:column;}
.mapa-modal.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mapa-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-muted);}
.mapa-close{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--rule);padding:4px 9px;border-radius:2px;cursor:pointer;transition:all 0.14s;}
.mapa-close:hover{color:var(--ink);border-color:var(--ink-soft);}
.mapa-modal-body{padding:22px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
.mapa-svg{width:100%;height:auto;max-width:320px;}
.mapa-label{font-family:var(--font-mono);font-size:8px;fill:var(--ink-soft);}
.mapa-label-sitio{font-size:9px;fill:var(--mark-lt);}
.mapa-node rect{fill:var(--page);stroke-width:1.4;}
.mapa-node.confirmado rect{stroke:var(--green);}
.mapa-node.declarado rect{stroke:var(--ink-ghost);stroke-dasharray:2 2;}
.mapa-edge{stroke-width:1.2;}
.mapa-edge.confirmado{stroke:var(--green);opacity:0.7;}
.mapa-edge.declarado{stroke:var(--ink-ghost);stroke-dasharray:2 3;opacity:0.5;}
.mapa-legend{font-family:var(--font-mono);font-size:9px;color:var(--ink-muted);display:flex;align-items:center;gap:16px;}
.mapa-legend .dot{display:inline-block;width:7px;height:7px;margin-right:4px;vertical-align:middle;}
.mapa-empty{font-family:var(--font-mono);font-size:11px;color:var(--ink-ghost);font-style:italic;padding:24px 0;text-align:center;}

/* ─── Comparar una diagonal (dirección "transpunto", Xanadu): los dos
   textos en paralelo, sin nada más, y la banda que une los fragmentos. ─── */
.comparar-btn{margin-left:14px;}
.comparar{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column;}
.comparar.open{display:flex;}
.comparar-cab{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-muted);}
.comparar-cab b{color:var(--ink);font-weight:500;}
.comparar-cuerpo{position:relative;flex:1;display:grid;grid-template-columns:minmax(210px,27%) minmax(0,1fr) minmax(210px,27%);grid-template-rows:minmax(0,1fr);gap:clamp(40px,6vw,110px);padding:20px 28px 22px;min-height:0;}
.comparar-col,.comparar-centro{position:relative;z-index:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--page);border:1px solid var(--rule);}
.comparar-col h3{font-family:var(--font-mono);font-weight:400;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-ghost);padding:14px 20px 12px;border-bottom:1px solid var(--rule);}
.comparar-col h3 i{display:block;font-family:var(--font-body);font-style:italic;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink);margin-top:4px;}
.cmp-orden{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--rule);border-radius:2px;padding:2px 6px;}
.comparar-texto{position:relative;flex:1;min-height:0;overflow-y:auto;padding:12px 20px 24px;font-size:15px;line-height:1.65;color:var(--ink-muted);overscroll-behavior:contain;}
.comparar-texto p{margin-bottom:0.8em;}
.comparar-texto .accion-mark{color:inherit;text-decoration:none;background:none;}
.cmp-bloque{margin-bottom:.4em;}
.cmp-extra{opacity:.6;}
.comparar-texto .cmp-frag{color:var(--ink);background:color-mix(in oklab,var(--mark) 13%,transparent);box-shadow:inset 0 -1px 0 color-mix(in oklab,var(--mark) 45%,transparent);}
.comparar-texto .cmp-refto{color:var(--ink);background:color-mix(in oklab,var(--emergente) 22%,transparent);box-shadow:inset 0 -1px 0 var(--emergente);}
.cmp-mas{display:flex;gap:14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-muted);margin:2px 0 10px;}
.cmp-mas button{all:unset;cursor:pointer;border-bottom:1px dotted var(--ink-ghost);}
.cmp-mas button:hover{color:var(--ink);}
.comparar svg.cmp-banda{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.comparar-centro{overflow-y:auto;padding:18px 26px 28px;}
.cmp-cen-cab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mark-lt);}
.cmp-diag-titulo{font-family:var(--font-body);font-style:italic;font-weight:500;font-size:22px;line-height:1.25;color:var(--ink);margin:8px 0 12px;}
.cmp-rel{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;}
.cmp-rel dt{color:var(--ink-ghost);text-transform:uppercase;letter-spacing:.12em;font-size:9px;padding-top:2px;}
.cmp-rel dd{color:var(--ink-soft);margin:0;}
.cmp-rel dd small{color:var(--ink-muted);}
.cmp-em-texto{font-style:italic;font-size:15.5px;line-height:1.65;color:var(--ink-soft);}
.cmp-em-texto p{margin-bottom:.8em;}
.cmp-ref{cursor:pointer;border-bottom:1px dashed var(--emergente);color:var(--ink);}
.cmp-ref:hover,.cmp-ref.activa{background:color-mix(in oklab,var(--emergente) 18%,transparent);}
.cmp-gloss{margin-top:14px;border-left:2px solid var(--emergente);padding:6px 0 6px 12px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);display:none;}
.cmp-gloss.open{display:block;}
.cmp-gloss b{font-family:var(--font-mono);font-weight:400;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-top:6px;}
.comparar-cargando{padding:30px 26px;font-family:var(--font-mono);font-size:11px;color:var(--ink-ghost);}
@media(max-width:900px){
  .comparar-cuerpo{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 12px 12px;overflow-y:auto;}
  .comparar svg.cmp-banda{display:none;}
  .comparar-col h3{padding:10px 14px 8px;}
  .comparar-texto{padding:8px 14px 16px;font-size:15px;}
}
@media(max-width:1100px){:root{--col-pg:560px;--col-w:200px;--body-sz:16px;}}
@media(max-width:900px){.layout{grid-template-columns:1fr;}.wing{display:none;}.book-page{padding:50px 32px 80px;}.legend{display:none;}}
/* El recuadro "Lectura" se corre cuando hay un ala abierta (tapaba el
   final de las marginalias largas) y se puede cerrar. */
body.alas-activas .legend{opacity:0;pointer-events:none;}
.legend{transition:opacity .2s;}
body.hay-marg-fijas .legend{left:auto;right:22px;}
.legend-cerrar{position:absolute;top:6px;right:8px;color:var(--ink-ghost);font-size:11px;line-height:1;}
.legend-cerrar:hover{color:var(--ink);}
@media(max-width:700px){
  .top-nav{padding:10px 12px;gap:6px;}
  .top-nav .left,.top-nav .right{gap:6px;}
  .nav-btn{padding:6px 8px;font-size:11px;letter-spacing:0;}
  .nav-btn .lbl,.book-title,.chapter-label,#btn-pdf{display:none;}
  .book-page{padding:36px 20px 80px;}
}
/* Mapa de la obra: sus diagonales, leídas de lo que ya trae la página. */
.mapa-lista{width:100%;display:flex;flex-direction:column;gap:12px;}
.mapa-item{border-left:2px solid var(--mark);padding:2px 0 2px 12px;cursor:pointer;}
.mapa-item:hover .mapa-frag{color:var(--ink);}
.mapa-frag{font-style:italic;font-size:14px;color:var(--ink-soft);line-height:1.45;}
.mapa-dest{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-muted);margin-top:4px;}
.mapa-resumen{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);align-self:flex-start;}

/* ─── Exportar PDF limpio ─── mientras imprime, se reemplaza el cuerpo
   por TODOS los capítulos concatenados, sin marcas ni cromado. */
@media print{
  .top-nav,.back-bar,.chapter-subnav,.index-panel,.overlay-bg,.wing,.legend,.chapter-nav{display:none!important;}
  html,body{background:#fff!important;}
  .book-page{box-shadow:none!important;padding:0!important;min-height:0!important;}
  .layout{display:block!important;}
  .text-body,.chapter-title,.chapter-number,.page-header,body{color:#000!important;}
  .accion-mark{border:none!important;background:none!important;}
  .print-chapter{break-inside:avoid-page;margin-bottom:2.2em;}
  .print-chapter-head{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.7em;color:#000;border-bottom:1px solid #ccc;padding-bottom:0.4em;}
}
/* ── Opciones de lectura (traídas del laboratorio) ── */
.lect-panel{position:fixed;top:calc(var(--nav-h,52px) + 8px);right:16px;z-index:60;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - var(--nav-h,52px) - 24px);overflow-y:auto;background:var(--page,var(--bg));border:1px solid var(--rule);border-radius:4px;padding:14px 14px 10px;box-shadow:0 18px 50px rgba(0,0,0,.35);font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);display:none;}
.lect-panel.open{display:block;}
.lect-panel .lect-tit{letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-bottom:10px;display:flex;justify-content:space-between;}
.lect-ops{display:flex;flex-wrap:wrap;gap:6px;}
.lect-sub{letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;color:var(--ink-muted);margin:4px 0 8px;}
.lect-sub i{font-style:normal;text-transform:none;letter-spacing:0;}
.lect-sub a{text-transform:none;letter-spacing:0;color:var(--ink-soft);}
.lect-medida{margin-top:14px;}
.lect-int{display:flex;flex-direction:column;gap:5px;}
.lect-int-op{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font-family:var(--font-mono);font-size:10.5px;padding:7px 10px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--ink-soft);cursor:pointer;}
.lect-int-op b{font-weight:500;color:var(--ink);}
.lect-int-op span{font-size:10px;opacity:.75;line-height:1.4;}
.lect-int-op:hover{border-color:var(--ink-muted);}
.lect-int-op[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 2px 0 0 var(--ink);}
.lect-op{font-family:var(--font-mono);font-size:10.5px;padding:6px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-soft);background:transparent;cursor:pointer;}
.lect-op[aria-pressed="true"]{color:var(--bg);background:var(--ink);border-color:var(--ink);}
.lect-sel{display:flex;gap:8px;align-items:center;margin-top:8px;}
.lect-sel select{font-family:var(--font-mono);font-size:10.5px;background:var(--bg);color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:4px 6px;max-width:100%;}
.lect-ayuda{margin-top:10px;font-size:10px;line-height:1.5;opacity:.75;}
.lect-sel label{min-width:84px;}
/* letra e interlineado del cuerpo, elegidos en «lectura» */
html[data-letra="s"] .text-body{font-size:calc(var(--body-sz) * .9);}
html[data-letra="l"] .text-body{font-size:calc(var(--body-sz) * 1.15);}
html[data-letra="xl"] .text-body{font-size:calc(var(--body-sz) * 1.3);}
html[data-renglon="justo"] .text-body{line-height:1.38;}
html[data-renglon="amplio"] .text-body{line-height:1.8;}
/* notas y diagonales apagadas: solo quedan las marginalias, como lápiz */
body.sin-inter .accion-mark[data-visual]:not([data-lapiz]){text-decoration:none;background:none!important;cursor:auto;}
body.sin-inter .accion-mark[data-visual]:not([data-lapiz])::after{display:none;}
body.sin-inter .accion-mark[data-lapiz]{text-decoration-color:color-mix(in oklab,var(--red) 50%,transparent);cursor:auto;}
/* desvanecer lejos del centro */
.accion-mark[data-visual="diagonal"]{--col:var(--mark);} .accion-mark[data-visual="nota"]{--col:var(--green);}
.accion-mark[data-visual="marginalia"]{--col:var(--red);} .accion-mark[data-visual="hojear"]{--col:var(--violet);}
body.centro .accion-mark[data-visual]:not([data-visual="ancla"]):not(:hover):not(.pinned){text-decoration-color:color-mix(in oklab,var(--col) calc(var(--a,1) * 60%),transparent);}
body.centro .accion-mark[data-multi]:not(:hover):not(.pinned){opacity:calc(.55 + var(--a,1) * .45);}
/* color sintético: la marca con dos interacciones pasa letra por letra de un color al otro */
body.sint .accion-mark[data-multi] .ch{color:color-mix(in oklab,var(--c) calc(var(--a,1) * 100%),var(--ink));}
/* retrolegibilidad: todavía no se abre */
.accion-mark.cerrada{text-decoration-style:dashed!important;cursor:help!important;}
.aviso-umbral{position:fixed;z-index:70;background:var(--page,var(--bg));border:1px solid var(--rule);color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;padding:8px 10px;border-radius:4px;max-width:280px;box-shadow:0 10px 30px rgba(0,0,0,.4);}
/* palabras de a una */
.pal{opacity:0;transition:opacity .35s;} .pal.v{opacity:1;}
@media (prefers-reduced-motion:reduce){.pal{opacity:1;transition:none;}}
/* tarjetas justificadas */
.wing-content .accion-text,.wing-content .diagonal-emergente,.lectura-modal-body p{text-align:justify;hyphens:auto;}
/* marginalias fijas: a la izquierda, alineadas con su fragmento */
.marg-fijas{position:absolute;top:0;left:0;right:0;pointer-events:none;}
.marg-fija{position:absolute;left:24px;right:24px;pointer-events:auto;font-size:14.5px;line-height:1.6;font-style:italic;color:var(--ink-soft);text-align:justify;hyphens:auto;border-right:2px solid color-mix(in oklab,var(--red) 70%,transparent);padding-right:12px;transition:background .3s;}
.marg-fija.activa{background:var(--red-bg-p,rgba(248,113,113,.12));}
.marg-lista{margin:.2em 0 1.2em;padding:10px 14px;border-left:2px solid var(--red);background:color-mix(in oklab,var(--red) 6%,transparent);font-size:.82em;line-height:1.55;color:var(--ink-soft);text-align:justify;hyphens:auto;font-style:italic;}
.marg-lista[hidden]{display:none;}
.marg-lista .q{font-family:var(--font-mono);font-size:10px;display:block;margin-bottom:4px;font-style:normal;opacity:.8;}
.marg-lista div+div{margin-top:10px;}
.marg-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;border-radius:50%;border:1px solid var(--red);color:var(--red);font-family:var(--font-mono);font-size:11px;vertical-align:middle;line-height:1;cursor:pointer;background:none;}
.marg-btn[aria-expanded="true"]{background:var(--red);color:var(--bg);}
/* estela */
.estela{position:fixed;z-index:0;pointer-events:none;font-family:var(--font-body);font-style:italic;color:var(--ink);opacity:.045;white-space:nowrap;}
/* Expandir: colación texto base · emergente · citado */
.expandir-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--mark);color:var(--bg);padding:3px 8px;border-radius:3px;cursor:pointer;margin-right:8px;}

/* Homofonías: la palabra cambia por su homófono al pasar el tercio
   superior de la pantalla; ocupa siempre el ancho de la más larga. */
.homo{display:inline-block;white-space:nowrap;text-align:left;text-indent:0;}

/* Transición entre páginas del sitio (al seguir una diagonal a otro texto,
   al volver al corpus): un fundido corto. Solo donde el navegador la
   soporta y si no se pidió menos movimiento; si no, todo sigue igual. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:p314b-sale .18s ease-in both;}
  ::view-transition-new(root){animation:p314b-entra .32s ease-out both;}
}
@keyframes p314b-sale{to{opacity:0;}}
@keyframes p314b-entra{from{opacity:0;transform:translateY(10px);}}

/* «Saltar al texto»: invisible hasta que se llega con Tab. */
.saltar{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 14px;font-family:var(--font-mono);font-size:13px;text-decoration:none;border-radius:3px;}
.saltar:focus{top:10px;}
#textos:focus,#book-page:focus,#pdf-centro:focus{outline:none;}
/* transclusión: el pasaje de otro lado, debajo del párrafo que lo convoca */
.accion-mark[data-visual="transclusion"]{text-decoration:underline dotted color-mix(in oklab,var(--ink) 45%,transparent) 1.5px;text-underline-offset:.3em;}
.transclusion{margin:.2em 0 1.4em 1.6em;padding:.6em 0 .6em 1em;border-left:1px dashed color-mix(in oklab,var(--ink) 35%,transparent);font-size:.92em;color:var(--ink-soft);}
.transclusion mark{background:none;color:var(--ink);text-decoration:underline dotted var(--violet) 1.5px;text-underline-offset:.25em;}
.transclusion .tr-de{display:block;margin-top:.4em;background:none;border:0;padding:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-muted);cursor:pointer;text-align:left;}
.transclusion .tr-de:hover{color:var(--ink);}
.transclusion.activa{border-left-color:var(--violet);}
.transclusion .tr-pend{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted);}
/* voz de lector: una frase que alguien dejó y la autora sumó */
.marg-fija.lector,.marg-lista>div.lector{font-style:italic;}
.voz-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;font-style:normal;letter-spacing:.06em;color:var(--ink-soft);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:4px 11px;cursor:pointer;}
.voz-btn:hover,.voz-btn.sonando{color:var(--ink);border-color:var(--ink-soft);}
.voz-btn .voz-barra{display:inline-block;width:46px;height:2px;background:var(--rule);position:relative;overflow:hidden;}
.voz-btn .voz-barra i{position:absolute;left:0;top:0;bottom:0;width:var(--voz-p,0%);background:var(--ink-soft);}
.marg-fija.lector::before,.marg-lista>div.lector::before{content:'lector · ';font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-muted);}
.lector-btn{position:absolute;z-index:70;transform:translate(-50%,-100%);margin-top:-34px;font-family:var(--font-mono);font-size:11px;padding:5px 9px;border:1px solid var(--rule);border-radius:3px;background:var(--page);color:var(--ink);cursor:pointer;}
.lector-form{position:fixed;z-index:9600;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 24px));background:var(--page);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);font-family:var(--font-mono);font-size:12px;}
.lector-form q{display:block;font-family:var(--font-body);font-size:15px;color:var(--ink-soft);margin:6px 0 12px;}
.lector-form textarea,.lector-form input{width:100%;box-sizing:border-box;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:8px;font:inherit;font-size:13px;margin:4px 0 10px;}
.lector-form textarea{min-height:90px;font-family:var(--font-body);font-size:16px;}
.lector-form .lf-acc{display:flex;gap:8px;justify-content:flex-end;}
.lector-form button{font-family:var(--font-mono);font-size:12px;padding:6px 10px;border:1px solid var(--rule);border-radius:3px;background:transparent;color:var(--ink);cursor:pointer;}
.lector-form .lf-nota{color:var(--ink-muted);font-size:10.5px;line-height:1.5;}
/* Estándar de controles (propuesta 30/09): 4 niveles, bordes ≥3:1, texto ≥4.5:1. Va al final para ganar sin tocar lo anterior. */
:root{--line-ctl:color-mix(in oklab,var(--ink) 42%,var(--bg));--ctl-sz:13px;}
.nav-volver,.nav-logo[href]{text-decoration:none;}
:root{--ink-ghost:#7a7a7a;}

.nav-btn{font-size:var(--ctl-sz);letter-spacing:0;text-transform:none;padding:7px 11px;min-height:34px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:none;border:1px solid var(--line-ctl);color:var(--ink);border-radius:3px;text-decoration:none;}
.nav-btn:hover{border-color:var(--ink);background:color-mix(in oklab,var(--ink) 8%,transparent);}
.nav-btn:focus-visible{outline:2px solid var(--mark-lt,var(--mark));outline-offset:2px;}
.nav-btn.active,.nav-btn[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.top-nav .left .nav-volver{margin-right:6px;}
.top-nav .left,.top-nav .right{gap:8px;}
.top-nav .book-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.top-nav .chapter-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24ch;min-width:0;}
.top-nav .left{min-width:0;}
/* Justificado solo donde rinde: en una columna angosta deja ríos entre
   palabras. En móvil, todo el cuerpo y las tarjetas largas van en bandera
   (antes solo el modo glosa). */
@media (max-width:700px){
  .text-body,html[data-modo="glosa"] .text-body,.lectura-modal-body p,.marg-lista{text-align:left;}
  /* Párrafos que traen el justificado escrito en el texto: en móvil
     también van en bandera. Centrados y demás alineaciones no se tocan. */
  .text-body [style*="text-align: justify"],.text-body [style*="text-align:justify"]{text-align:left!important;}
}
@media (max-width:760px){
  /* Móvil: la barra ya no se desliza a escondidas (dejaba marcas, lectura
     y modo fuera de la pantalla). Botones con su ícono, el nombre queda
     para lectores de pantalla, y si no entran pasan a una segunda fila. */
  .top-nav{overflow-x:visible;flex-wrap:wrap;row-gap:6px;}
  .top-nav .left,.top-nav .right{flex:none;}
  .top-nav .right{margin-left:auto;}
  .nav-btn{min-height:44px;min-width:44px;justify-content:center;padding:8px 10px;font-size:12px;white-space:nowrap;}
  .nav-btn .lbl{display:inline!important;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .chapter-subnav{padding:8px 12px;}
  .subnav-pill{white-space:normal;max-width:100%;}
}

/* Paso 3 · marcas por forma, no solo por color; interruptor de marcas; teclado */
.accion-mark[data-visual]:not([data-visual="ancla"]):not([data-multi]){text-decoration-thickness:2px;}
.accion-mark[data-visual="diagonal"]:not([data-multi]){text-decoration-style:solid;text-decoration-color:color-mix(in oklab,var(--mark) 85%,transparent);}
.accion-mark[data-visual="nota"]:not([data-multi]){text-decoration-style:dashed;text-decoration-color:color-mix(in oklab,var(--green) 85%,transparent);}
.accion-mark[data-visual="marginalia"]:not([data-multi]){text-decoration-style:wavy;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in oklab,var(--red) 85%,transparent);}
.accion-mark[data-visual="hojear"]:not([data-multi]){text-decoration-style:dotted;text-decoration-color:color-mix(in oklab,var(--violet) 85%,transparent);}
.accion-mark[data-multi]{background-size:100% 2px;}
.leyenda-tipos{display:inline-flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0;}
.accion-mark.foco-teclado{outline:2px solid var(--mark-lt,var(--mark));outline-offset:2px;border-radius:2px;}
html[data-marcas="ninguna"] .accion-mark[data-visual],
html[data-marcas="diagonales"] .accion-mark[data-visual]:not([data-visual="diagonal"]){text-decoration:none!important;background-image:none!important;background-color:transparent!important;cursor:text;pointer-events:none;}
html[data-marcas="ninguna"] .accion-mark[data-visual]::after,
html[data-marcas="diagonales"] .accion-mark[data-visual]:not([data-visual="diagonal"])::after{content:none!important;}
html[data-marcas="ninguna"] .accion-mark .ch,html[data-marcas="diagonales"] .accion-mark:not([data-visual="diagonal"]) .ch{color:inherit!important;}

.riel-marcas{position:fixed;top:var(--nav-h,52px);right:0;bottom:0;width:10px;z-index:40;pointer-events:none;}
.riel-marcas i{position:absolute;right:1px;width:8px;height:3px;border-radius:1px;pointer-events:auto;cursor:pointer;opacity:.9;}
.riel-marcas i:hover{width:10px;opacity:1;}
html[data-marcas="ninguna"] .riel-marcas{display:none;}
@media print{.riel-marcas{display:none;}}

/* Lámina: un PDF propio de la obra (Archivo/laminas/) que se abre con un
   clic en el ala izquierda, sin salir del texto. El hover solo avisa. */
.accion-mark[data-visual="lamina"]{cursor:pointer;text-decoration-style:double;text-decoration-color:color-mix(in oklab,var(--mark-lt) 70%,transparent);}
.accion-mark[data-visual="lamina"]:hover{background-color:var(--mark-bg-h);text-decoration-color:var(--mark-lt);}
.accion-mark[data-visual="lamina"].lamina-abierta{background-color:var(--mark-bg-p);text-decoration-color:var(--mark-lt);}
.accion-mark[data-visual="lamina"]::after{content:" ◫";font-size:0.62em;color:color-mix(in oklab,var(--mark-lt) 75%,transparent);vertical-align:super;}
.lamina-panel{position:fixed;left:0;top:var(--nav-h,52px);bottom:0;z-index:45;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--rule);box-shadow:4px 0 30px rgba(0,0,0,.35);}
.lamina-panel[hidden]{display:none;}
.lamina-panel.completa{left:0;right:0;width:auto !important;z-index:95;}
.lamina-barra{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);}
.lamina-barra .tit{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
.lamina-barra button{font:inherit;color:var(--ink);background:none;border:1px solid var(--line-ctl,var(--rule));border-radius:3px;min-width:30px;min-height:30px;cursor:pointer;}
.lamina-barra button:hover{border-color:var(--ink);}
.lamina-visor{flex:1;overflow:auto;}
/* Hojear: el destino se abre en el ala, en un marco (sin dejar este texto). */
.lamina-panel.modo-hojear #lamina-menos,.lamina-panel.modo-hojear #lamina-mas,.lamina-panel.modo-hojear #lamina-pag{display:none;}
.lamina-panel:not(.modo-hojear) #lamina-ir{display:none;}
.lamina-panel #lamina-ir{padding:0 8px;}
.lamina-visor .hojear-marco{display:block;width:100%;height:100%;border:0;background:var(--bg);}
.accion-mark.hojear-abierta{background-color:var(--violet-bg-p);}
/* Esta página dentro del ala de otra: sin barra, sin volver, sin pie. */
html.en-panel{--nav-h:0px;}
html.en-panel .top-nav,html.en-panel .back-bar,html.en-panel .p314b-licencia,html.en-panel .riel-marcas{display:none !important;}
.lamina-panel .pvcore-wrap{display:flex;flex-direction:column;align-items:center;padding:16px 10px 40px;}
.lamina-panel .pvcore-page{position:relative;margin-bottom:12px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);}
.lamina-panel .pvcore-page canvas{display:block;}
.lamina-panel .pvcore-page-label{position:absolute;top:6px;right:8px;font-family:var(--font-mono);font-size:9px;color:#8a8a8a;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:2px;}
.lamina-panel .pvcore-textlayer{position:absolute;inset:0;overflow:hidden;line-height:1;transform-origin:0 0;z-index:2;}
.lamina-panel .pvcore-textlayer span{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%;}
.lamina-msg{margin:auto;padding:30px;font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);text-align:center;}

/* Guía «cómo leer las marcas»: qué hace cada marca al tocarla. */
.guia-marcas{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100vh - 32px);overflow:auto;max-width:min(520px,calc(100vw - 32px));width:100%;padding:0;border:1px solid var(--rule);border-radius:4px;background:var(--page,var(--bg));color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55);}
.guia-marcas::backdrop{background:rgba(0,0,0,.6);}
.guia-cab{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);}
.guia-cab button{font-family:var(--font-mono);font-size:12px;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:3px;padding:4px 10px;cursor:pointer;}
.guia-cuerpo{padding:16px 18px 20px;font-family:var(--font-body);font-size:16px;line-height:1.5;}
.guia-cuerpo dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;}
.guia-cuerpo dt{font-family:var(--font-mono);font-size:13px;padding-top:2px;text-underline-offset:.3em;white-space:nowrap;}
.guia-cuerpo dd{margin:0;color:var(--ink-soft);}
.guia-cuerpo p{margin:14px 0 0;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--ink-muted);}
.guia-abrir{font:inherit;color:inherit;background:none;border:0;padding:0;margin-top:4px;text-decoration:underline dotted;text-underline-offset:.25em;cursor:pointer;}
.guia-abrir:hover{color:var(--ink);}

/* pasaje encontrado desde el buscador del índice */
mark.hallazgo{background:color-mix(in oklab,var(--mark) 38%,transparent);color:inherit;border-radius:2px;box-shadow:0 0 0 2px color-mix(in oklab,var(--mark) 38%,transparent);transition:background 1.2s,box-shadow 1.2s;}
mark.hallazgo.hallazgo-fin{background:transparent;box-shadow:none;}
/* Pasaje citado (#capitulo=…&cita=…): queda marcado mientras se lee. */
mark.cita{background:color-mix(in oklab,var(--mark) 22%,transparent);color:inherit;border-bottom:2px solid var(--mark);}
/* Citar: botón flotante sobre el texto seleccionado. */
.cita-btn{position:absolute;z-index:70;transform:translate(-50%,-100%);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;background:var(--ink);color:var(--bg);border:0;border-radius:3px;padding:7px 11px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;}
.cita-btn[hidden]{display:none;}
.cita-btn:focus-visible{outline:2px solid var(--mark-lt);outline-offset:2px;}
.aviso-copiado{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;font-family:var(--font-mono);font-size:12px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:3px;pointer-events:none;}
.dg-copiar{margin-left:14px;}
.dg-copiar::before{content:"⧉ ";}
/* Lectura inmersiva: la barra se esconde al bajar y vuelve al subir;
   una línea arriba muestra cuánto falta del capítulo. */
.top-nav,.chapter-subnav,.back-bar{transition:transform .25s ease;}
html.barra-oculta .top-nav{transform:translateY(-100%);}
html.barra-oculta .chapter-subnav,html.barra-oculta .back-bar{transform:translateY(calc(-1 * var(--nav-h)));}
.progreso-lectura{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--mark);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;}
@media (prefers-reduced-motion: reduce){.top-nav,.chapter-subnav,.back-bar{transition:none;}}
@media print{.progreso-lectura,.rec-barra,.cita-btn{display:none!important;}}