/* Concordancia de folios y loci · estética del Lexicon y utillaje de estudio.

   Fondo oscuro por defecto, como el Lexicon, para que el facsímil se lea sobre
   un entorno que no compita con el pergamino. Los nueve fondos de la botonera
   del Lexicon escriben --lxp-bg y --lxp-ink; todo lo de aquí los respeta. */

:root{--ce-panel:rgba(255,255,255,.045);--ce-line:rgba(255,255,255,.17);
 --ce-soft:rgba(255,255,255,.72);--ce-mark:rgba(255,214,0,.38)}
html[data-theme=light]{--ce-panel:rgba(0,0,0,.035);--ce-line:rgba(0,0,0,.17);
 --ce-soft:rgba(0,0,0,.68);--ce-mark:rgba(255,206,0,.55)}

/* --- Taller de tres paneles, con anchos que el lector reparte --- */
.folio-workspace{grid-template-columns:var(--ce-cols,1.05fr 14px .98fr 14px 1fr)!important;
 align-items:stretch;gap:0!important}
.folio-workspace>.folio-panel{min-width:0}
/* Divisor de pantalla partida: se arrastra de costado; doble clic restablece. */
.ce-split{cursor:col-resize;background:transparent;border:0;padding:0;position:relative;touch-action:none;
 display:flex;align-items:center;justify-content:center}
.ce-split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
 background:var(--ce-line);transition:background .15s,width .15s}
.ce-split::after{content:"⋮";position:relative;z-index:1;display:grid;place-items:center;width:14px;height:46px;
 border-radius:7px;background:#26272b;border:1px solid rgba(255,255,255,.3);color:#cfc6b6;font:700 16px/1 system-ui}
.ce-split:hover::before,.ce-split:focus-visible::before,.ce-split:active::before{background:#c9a24a;width:4px}
.ce-split:hover::after,.ce-split:focus-visible::after{border-color:#c9a24a;color:#c9a24a}
.ce-split:focus-visible{outline:none}
@media(max-width:1130px){.folio-workspace{grid-template-columns:1fr!important}
 .ce-split{display:none}}

/* --- Barra de estudio: prefacio, voz capital, lupa --- */
.ce-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:18px 0 4px;
 padding:14px 16px;background:var(--ce-panel);border:1px solid var(--ce-line);border-radius:10px}
.ce-bar label{display:grid;gap:5px;font:600 12px system-ui,sans-serif;letter-spacing:.02em}
.ce-bar select{min-width:210px;max-width:100%;padding:9px 10px;border-radius:7px;
 border:1px solid var(--ce-line);background:rgba(0,0,0,.25);color:inherit;font:14px/1.3 Georgia,serif}
html[data-theme=light] .ce-bar select{background:rgba(255,255,255,.85)}
.ce-bar .ce-hint{flex:1 1 260px;margin:0;font:12px/1.55 system-ui,sans-serif;color:var(--ce-soft)}
.ce-bar button{min-height:40px;padding:9px 13px;border-radius:7px;border:1px solid var(--ce-line);
 background:rgba(0,0,0,.25);color:inherit;font:600 12px system-ui,sans-serif;cursor:pointer}
.ce-bar button[aria-pressed=true]{background:#c9a24a;color:#1a1409;border-color:#c9a24a}

/* --- Lupa sobre el facsímil --- */
.ce-lens{position:absolute;width:230px;height:230px;border-radius:50%;pointer-events:none;
 border:2px solid rgba(201,162,74,.9);box-shadow:0 6px 26px rgba(0,0,0,.5);
 background-repeat:no-repeat;background-color:#efe7d6;display:none;z-index:5}
.ce-lens.ce-on{display:block}
#f-image-box{position:relative}

/* --- Subrayado de rúbricas, reutilizado aquí --- */
.ce-rubrica-wrap{position:relative;display:block;line-height:0}
.ce-rubrica-layer{position:absolute;inset:0;pointer-events:none}
.ce-rubrica-mark{position:absolute;background:rgba(255,214,0,.42);mix-blend-mode:multiply;
 border-radius:3px;box-shadow:0 0 0 1px rgba(190,150,0,.4)}

/* --- Resalte de la voz capital en latín y traducción --- */
.folio-paragraphs mark.ce-verbum{background:var(--ce-mark);color:inherit;border-radius:2px;
 padding:0 1px;box-shadow:0 1px 0 rgba(160,120,0,.5)}

/* --- Lectura semidiplomática del folio --- */
.ce-diplomatica{margin:0;padding:14px 16px;border-top:1px solid var(--ce-line);
 font:14px/1.75 "Iowan Old Style",Georgia,serif;white-space:pre-wrap}
.ce-diplomatica b{display:block;font:600 11px system-ui,sans-serif;letter-spacing:.09em;
 text-transform:uppercase;margin-bottom:7px;color:var(--ce-soft)}
.ce-diplomatica .ce-rubrica-linea{color:#b4472f;font-variant-caps:small-caps;letter-spacing:.04em}
html[data-theme=dark] .ce-diplomatica .ce-rubrica-linea{color:#e08a6e}

@media print{.ce-bar,.ce-split,.ce-lens{display:none!important}}

/* El título de la página vive ahora en el masthead; el rótulo interior queda
   como encabezado de sección y no debe competir con la marca. */
.folio-main .folio-title{font:400 clamp(24px,2.4vw,34px)/1.22 Georgia,serif;margin:6px 0 14px}

/* --- Botonera del encabezado, con el aspecto de la del Lexicon ---
   Los controles los montan theme.js (tema), global-language.js (idioma),
   site-bar.js (Aa) y lexicon-palette.js (Fondo); aquí sólo se ordenan y se
   visten igual, en el mismo orden que el Lexicon. */
.ce-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.ce-tools>.ce-lab{order:1}
.ce-tools>.lxp-palette{order:2}
.ce-tools>.site-global-language{order:3}
.ce-tools>.theme-switch{order:4}
.ce-tools>.site-typeface-tool{order:5}
.ce-tools .ce-lab,.ce-tools .lxp-palette>summary,.ce-tools .site-global-language select,
.ce-tools .theme-switch,.ce-tools .site-typeface-button{
 display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
 border:1px solid rgba(255,255,255,.28);border-radius:12px;background:#26272b;color:#f2efe9;
 font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;cursor:pointer;
 position:static!important;box-shadow:none}
.ce-tools .theme-switch,.ce-tools .site-typeface-button{min-width:48px;justify-content:center;padding:0 12px}
.ce-tools .site-global-language select{padding-right:34px}
.ce-tools .ce-lab:hover,.ce-tools .lxp-palette>summary:hover,.ce-tools .theme-switch:hover,
.ce-tools .site-typeface-button:hover{background:#34363c}
html[data-theme=light] .ce-tools .ce-lab,html[data-theme=light] .ce-tools .lxp-palette>summary,
html[data-theme=light] .ce-tools .site-global-language select,html[data-theme=light] .ce-tools .theme-switch,
html[data-theme=light] .ce-tools .site-typeface-button{background:#fff;color:#1f1f1f;border-color:rgba(0,0,0,.25)}
.ce-diplomatica .ce-cotejo{display:block;margin:10px 0 4px;font:12px/1.55 system-ui,sans-serif;color:var(--ce-soft);white-space:normal}
.ce-diplomatica .ce-dif{font:13px/1.6 ui-monospace,Menlo,monospace}
.folio-more{display:block;margin:14px auto 4px;min-height:42px;padding:9px 18px;border-radius:10px;
 border:1px solid rgba(255,255,255,.28);background:#26272b;color:#f2efe9;font:600 13px system-ui,sans-serif;cursor:pointer}
.folio-more:hover{border-color:#c9a24a}

/* ===== Botonera en una sola línea, en el orden del Lexicon ===== */
.on-navtools.ce-tools{flex-wrap:nowrap!important;gap:8px}
.ce-tools #vitruvius-secondary-toolbar,.ce-tools #vitruvius-secondary-toolbar label{display:contents!important}
.ce-tools #vitruvius-secondary-toolbar{position:static!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.ce-tools>.ce-lab{order:1}.ce-tools>.lxp-palette{order:2}
.ce-tools #secondary-language{order:3}.ce-tools #secondary-theme{order:4}.ce-tools>.site-typeface-tool{order:5}
.ce-tools :is(.ce-lab,.lxp-palette>summary,#secondary-language,#secondary-theme,.site-typeface-button){
 height:44px!important;min-height:44px!important;padding:0 16px!important;border-radius:11px!important;
 border:1px solid rgba(255,255,255,.3)!important;background:#26272b!important;color:#f2efe9!important;
 font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;box-shadow:none!important}
.ce-tools #secondary-language{padding-right:30px!important}
.ce-tools :is(#secondary-theme,.site-typeface-button){min-width:48px;padding:0 13px!important}
.ce-tools .vitruvius-secondary-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:1100px){.on-navtools.ce-tools{flex-wrap:wrap!important}}

/* ===== Del azul antiguo al negro: paneles negros, títulos en grises ===== */
html[data-theme=dark] body{background:var(--lx-bg,#0e0f11)}
html[data-theme=dark] :is(.folio-panel,.folio-paragraphs,.folio-search,.folio-notes){background:#141518;color:#e6e3dd;border-color:#2c2e33}
html[data-theme=dark] .folio-panel h2{background:#1b1c1f;color:#d4d1ca;border-bottom:1px solid #2c2e33}
html[data-theme=dark] :is(.folio-meta,.folio-tools){background:#18191c;color:#b9b6af;border-color:#2c2e33}
html[data-theme=dark] .folio-key{background:#18191c;color:#cfccc5;border-left-color:#6b6e74}
html[data-theme=dark] .folio-paragraphs h3,html[data-theme=dark] .folio-paragraphs .message{color:#a9a6a0}
html[data-theme=dark] .folio-paragraphs .latin{color:#ece9e3}
html[data-theme=dark] :is(.folio-panel select,.folio-search input,.folio-result button,.ce-bar select){background:#1f2024;color:#f2efe9;border-color:#3a3c41}
html[data-theme=dark] :is(.folio-tools a,.folio-tools button){background:#26272b;color:#f2efe9;border-color:#45474d}
html[data-theme=dark] :is(.folio-tools a,.folio-tools button):hover{background:#33353a;border-color:#c9a24a}
html[data-theme=dark] .folio-search button[type=submit]{background:#26272b!important;border-color:#45474d!important}
html[data-theme=dark] .folio-result{border-color:#2a2c30}
html[data-theme=dark] .folio-result:hover{background:#1c1d21}
html[data-theme=dark] .folio-result small{color:#a9a6a0}
html[data-theme=dark] .folio-badge{background:#1f2024;color:#c9c6bf;border-color:#3a3c41}
html[data-theme=dark] .folio-image{background:#0e0f11}
html[data-theme=dark] .folio-main :is(h1,h2){color:#dedbd4}
html[data-theme=dark] .ce-bar{background:#141518;border-color:#2c2e33}
/* En claro, los títulos de panel también en gris, sin el azul. */
html[data-theme=light] .folio-panel h2{background:#e6e5e2;color:#26282b;border-bottom:1px solid #cfcdc8}
html[data-theme=light] :is(.folio-tools a,.folio-tools button){background:#2b2d31;color:#fff;border-color:#2b2d31}

/* ===== Herramientas del visor I ===== */
.ce-visor-tools{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:9px 12px;
 background:#18191c;border-top:1px solid #2c2e33;border-bottom:1px solid #2c2e33;font:600 12px system-ui,sans-serif;color:#cfccc5}
html[data-theme=light] .ce-visor-tools{background:#eceae6;border-color:#d4d2cd;color:#26282b}
.ce-visor-tools .ce-grupo{display:inline-flex;gap:0}
.ce-visor-tools :is(button,select){min-height:34px;padding:0 11px;border:1px solid #45474d;background:#26272b;color:#f2efe9;
 font:600 12px system-ui,sans-serif;cursor:pointer;border-radius:8px}
.ce-visor-tools .ce-grupo>:is(button,select){border-radius:0}
.ce-visor-tools .ce-grupo>:first-child{border-radius:8px 0 0 8px}
.ce-visor-tools .ce-grupo>:last-child{border-radius:0 8px 8px 0}
.ce-visor-tools .ce-grupo>:not(:first-child){border-left:0}
.ce-visor-tools #ce-zoom-menos,.ce-visor-tools #ce-zoom-mas{min-width:36px;font-size:17px}
.ce-visor-tools #ce-zoom-val{min-width:64px}
.ce-visor-tools button[aria-pressed=true]{background:#c9a24a;color:#1a1409;border-color:#c9a24a}
.ce-visor-tools :is(button,select):hover{border-color:#c9a24a}
.ce-rango{display:inline-flex;align-items:center;gap:7px}
.ce-rango input{width:96px;accent-color:#c9a24a}
.folio-image.ce-lupa-on{cursor:crosshair}
.folio-image .ce-rubrica-wrap{max-width:none}

/* ===== Voz capital: subrayado en el facsímil y recuadro de definición ===== */
.ce-verbum-mark{position:absolute;background:rgba(255,214,0,.48);mix-blend-mode:multiply;border-radius:3px;
 box-shadow:0 0 0 2px rgba(214,160,0,.75);animation:ce-latido 1.6s ease-out 1}
@keyframes ce-latido{0%{box-shadow:0 0 0 10px rgba(255,214,0,.0)}30%{box-shadow:0 0 0 6px rgba(255,214,0,.6)}100%{box-shadow:0 0 0 2px rgba(214,160,0,.75)}}
.folio-paragraphs mark.ce-verbum{background:rgba(255,214,0,.85);color:#1a1409;border-radius:3px;padding:0 2px;box-shadow:none}
.ce-verbum-panel{flex:1 1 100%;order:10;margin-top:4px;padding:12px 14px;border-top:1px solid #2c2e33;
 font:13px/1.6 system-ui,sans-serif;color:#cfccc5}
.ce-verbum-panel[hidden]{display:none}
.ce-oc-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.ce-oc-btn{min-height:34px!important;min-width:40px;padding:0 10px!important}
.ce-oc-pos{font:600 14px Georgia,serif;color:#f2efe9}
.ce-oc-cuenta{color:#a9a6a0;font-size:12px}
.ce-oc-def{margin:0;max-width:110ch}
.ce-oc-def b{color:#f2efe9}
.ce-oc-def .ce-pag{color:#c9a24a}
html[data-theme=light] .ce-verbum-panel{color:#26282b;border-color:#d4d2cd}
html[data-theme=light] :is(.ce-oc-pos,.ce-oc-def b){color:#111}
/* Un solo control de idioma y uno de tema: cuando llega la caja común de
   idioma y tema, se ocultan los que montan por su cuenta theme.js y
   global-language.js en la misma botonera. */
.ce-tools:has(#vitruvius-secondary-toolbar) :is(.site-global-language,.theme-switch){display:none!important}

/* ===== Enviar o guardar el pasaje ===== */
.ce-compartir{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;padding:12px 16px;
 background:#141518;border:1px solid #2c2e33;border-radius:10px}
.ce-compartir-rot{font:600 12px system-ui,sans-serif;letter-spacing:.04em;color:#a9a6a0;margin-right:6px}
.ce-share{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;
 border:1px solid #45474d;background:#26272b;color:#f2efe9;font:600 14px system-ui,sans-serif;cursor:pointer}
.ce-share:hover{border-color:#c9a24a;color:#fff}
.ce-share.ce-wa:hover{border-color:#25d366}
html[data-theme=light] .ce-compartir{background:#f4f3f0;border-color:#d4d2cd}
html[data-theme=light] .ce-share{background:#2b2d31;color:#fff;border-color:#2b2d31}
.ce-print-pie{display:none}

/* ===== Hoja para PDF: folio, latín y traducción, con la cita al pie ===== */
@media print{
 html[data-ce-imprimir] body{background:#fff!important;color:#000!important}
 html[data-ce-imprimir] :is(.site-bar,.on-shell,.folio-nav,.folio-key,.ce-bar,.ce-visor-tools,.ce-compartir,
  .folio-search,.folio-notes,.folio-tools,.ce-split,.ce-lens,.folio-meta select,#vitruvius-secondary-toolbar,
  .research-folder-fab,.site-typeface-tool,.lxp-palette,.ce-diplomatica){display:none!important}
 html[data-ce-imprimir] .folio-workspace{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
 html[data-ce-imprimir] .folio-workspace>.folio-panel:first-of-type{grid-column:1/-1}
 html[data-ce-imprimir] .folio-panel{background:#fff!important;color:#000!important;border:1px solid #999!important;break-inside:avoid}
 html[data-ce-imprimir] .folio-panel h2{background:#eee!important;color:#000!important;font-size:15px!important;padding:6px 10px!important}
 html[data-ce-imprimir] :is(.folio-meta,.folio-paragraphs){background:#fff!important;color:#000!important;min-height:0!important}
 html[data-ce-imprimir] .folio-paragraphs{font-size:11.5pt!important}
 html[data-ce-imprimir] .folio-paragraphs .latin{color:#000!important}
 html[data-ce-imprimir] .folio-image{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;background:#fff!important}
 html[data-ce-imprimir] .folio-image .ce-rubrica-wrap{width:62%!important;margin:0 auto}
 html[data-ce-imprimir] .folio-image img{filter:none!important}
 html[data-ce-imprimir] .ce-print-pie{display:block!important;margin-top:10px;font:9pt/1.4 Georgia,serif;color:#333}
 html[data-ce-imprimir] .folio-title{font-size:16pt!important;margin:0 0 6px!important;color:#000!important}
 html[data-ce-imprimir] .folio-intro{display:none!important}
}
@media print{
 html[data-ce-imprimir] :is(a.skip,.skip-link,[class*="skip"],.button-press-feedback,[class*="fab"],[class*="floating"]){display:none!important}
 html[data-ce-imprimir] .folio-image .ce-rubrica-wrap{width:44%!important}
 html[data-ce-imprimir] .folio-meta{font-size:8.5pt!important;padding:6px 10px!important}
 html[data-ce-imprimir] .folio-paragraphs{padding:8px 10px!important;font-size:10.5pt!important;line-height:1.5!important}
}
@media print{
 html[data-ce-imprimir] .folio-workspace>.folio-panel:not(:first-of-type){break-inside:auto!important}
 html[data-ce-imprimir] .folio-image .ce-rubrica-wrap{width:36%!important}
 html[data-ce-imprimir] .folio-workspace{break-before:avoid}
}
/* Marcas dentro de la lupa, ampliadas con la imagen. */
.ce-lens{overflow:hidden}
.ce-lens-capa{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.ce-lens-capa>span{animation:none!important}