/* Marx XXI · lector web.
   Tema inspirado en marxxxi.com: Alegreya en todo, papel gris cálido #efecec, tinta #252525,
   cabecera y botones verde oscuro #2c332f, verde #3f5147, oliva #716a56, radios de 6-7 px, sin sombras.
   Cada volumen usa el color de su portada (--vol). */
:root{
  --bg:#efecec; --paper:#f6f4f4; --ink:#252525; --ink-2:#5b5a5a; --ink-3:#8a8686;
  --line:rgba(37,37,37,.13); --line-2:rgba(37,37,37,.06); --img:#e2dfdf;
  --accent:#2c332f; --olive:#716a56; --green:#3f5147; --green-soft:#dde3df; --olive-soft:#e6e2d8;
  --link:#505655; --head:#2c332f; --head-ink:#efecec; --btn:#2c332f; --btn-ink:#ffffff;
  --mark:#f1dd8a; --vol:#2c332f; --slate:#3c5a72;
  --f-body:"Alegreya",Georgia,serif;
  --f-sc:"Alegreya SC","Alegreya",Georgia,serif;
  --radius:7px; --bar-h:56px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
/* Colores de portada de cada volumen */
[data-vol="1"]{--vol:#4646dc} [data-vol="2"]{--vol:#b10a0a} [data-vol="3"]{--vol:#2a9f99}
[data-vol="4"]{--vol:#d39504} [data-vol="5"]{--vol:#7ea52a}

@media (prefers-color-scheme: dark){:root:not([data-theme]){
  --bg:#232925; --paper:#2c332f; --ink:#efecec; --ink-2:#c3c1bf; --ink-3:#8f948f;
  --line:rgba(239,236,236,.14); --line-2:rgba(239,236,236,.07); --img:#38413c;
  --accent:#efecec; --olive:#c9bf9f; --green:#a9bcb0; --green-soft:#33403a; --olive-soft:#3a3830;
  --link:#c3c9c6; --head:#1a1f1c; --head-ink:#efecec; --btn:#efecec; --btn-ink:#2c332f;
  --mark:#6b5c1c; --vol:#efecec; --slate:#8fb0c8; color-scheme:dark}}
:root[data-theme="dark"],.reader[data-theme="dark"]{
  --bg:#232925; --paper:#2c332f; --ink:#efecec; --ink-2:#c3c1bf; --ink-3:#8f948f;
  --line:rgba(239,236,236,.14); --line-2:rgba(239,236,236,.07); --img:#38413c;
  --accent:#efecec; --olive:#c9bf9f; --green:#a9bcb0; --green-soft:#33403a; --olive-soft:#3a3830;
  --link:#c3c9c6; --head:#1a1f1c; --head-ink:#efecec; --btn:#efecec; --btn-ink:#2c332f;
  --mark:#6b5c1c; --vol:#efecec; --slate:#8fb0c8; color-scheme:dark}
:root[data-theme="black"],.reader[data-theme="black"]{
  --bg:#000; --paper:#0b0d0c; --ink:#d6d3d3; --ink-2:#a8a5a5; --ink-3:#757a76;
  --line:rgba(239,236,236,.12); --line-2:rgba(239,236,236,.06); --img:#1a1f1c;
  --accent:#d6d3d3; --olive:#b8ae90; --green:#a9bcb0; --green-soft:#1d231f; --olive-soft:#24221c;
  --link:#b5bbb8; --head:#0b0d0c; --head-ink:#d6d3d3; --btn:#d6d3d3; --btn-ink:#000;
  --mark:#5a4d17; --vol:#d6d3d3; --slate:#8fb0c8; color-scheme:dark}
:root[data-theme="sepia"],.reader[data-theme="sepia"]{
  --bg:#f1e8d4; --paper:#f8f1e3; --ink:#3b2f22; --ink-2:#5e4d3a; --ink-3:#8a7760;
  --line:rgba(59,47,34,.15); --line-2:rgba(59,47,34,.07); --img:#e6dcc4;
  --accent:#4a3b2a; --olive:#716a56; --green:#4c5a46; --green-soft:#e1e0cc; --olive-soft:#e8dcbc;
  --link:#5e4d3a; --head:#4a3b2a; --head-ink:#f8f1e3; --btn:#4a3b2a; --btn-ink:#f8f1e3;
  --mark:#ecc76a; --vol:#4a3b2a; --slate:#4f6070; color-scheme:light}
/* el tema de lectura solo se aplica al modo lectura (en <html> mientras se lee) y a la vista previa de
   Ajustes (.reader con data-theme); «claro» explícito ahí aunque el sistema esté en oscuro */
.reader[data-theme="light"]{
  --bg:#efecec; --paper:#f6f4f4; --ink:#252525; --ink-2:#5b5a5a; --ink-3:#8a8686;
  --line:rgba(37,37,37,.13); --line-2:rgba(37,37,37,.06); --mark:#f1dd8a; color-scheme:light}
/* en los temas oscuros, aclarar un poco los colores de volumen para que contrasten */
:root[data-theme="dark"] [data-vol],:root[data-theme="black"] [data-vol]{--vol-l:1}
@media (prefers-color-scheme: dark){:root:not([data-theme]) [data-vol="1"]{--vol:#7b7bf0}}
:root[data-theme="dark"] [data-vol="1"],:root[data-theme="black"] [data-vol="1"]{--vol:#7b7bf0}
@media (prefers-color-scheme: dark){:root:not([data-theme]) [data-vol="2"]{--vol:#e0504a}}
:root[data-theme="dark"] [data-vol="2"],:root[data-theme="black"] [data-vol="2"]{--vol:#e0504a}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + var(--safe-t) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.6;letter-spacing:.02em;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-body);line-height:1.15;margin:0;text-wrap:balance;font-weight:400;letter-spacing:.02em;color:var(--ink)}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--btn);color:var(--btn-ink);padding:8px 12px;z-index:100;border-radius:var(--radius)}
.skip:focus{left:8px}
[hidden]{display:none!important}

/* ---------- barra superior (como la cabecera de la web) ---------- */
.appbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;height:calc(var(--bar-h) + var(--safe-t));padding:var(--safe-t) 8px 0;background:var(--head);color:var(--head-ink)}
.appbar .lead{display:flex;align-items:center;min-width:44px}
.brand{justify-self:center;font-family:var(--f-body);font-weight:400;font-size:25px;letter-spacing:.03em;color:var(--head-ink);text-decoration:none;white-space:nowrap}
.appbar-title{display:none}
.appbar-actions{display:flex}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;text-decoration:none;flex:none}
.icon-btn:hover{background:var(--line-2)}
.appbar .icon-btn{color:var(--head-ink)}
.appbar .icon-btn:hover{background:rgba(239,236,236,.1)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.on svg{fill:currentColor}
@media (max-width:420px){.appbar-actions .opt{display:none}}
body.reading .appbar{display:none}

/* ---------- vistas ---------- */
main{outline:none}
.wrap{max-width:820px;margin:0 auto;padding:16px 16px calc(48px + var(--safe-b))}
.eyebrow{font-family:var(--f-sc);font-size:15px;letter-spacing:.06em;text-transform:lowercase;color:var(--olive);font-weight:500}
.eyebrow.vol{color:var(--vol)} .eyebrow.muted{color:var(--ink-3)}
.muted{color:var(--ink-3)} .small{font-size:15px}
.sc{font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.04em}
.hero{padding:30px 0 22px;border-bottom:1px solid var(--line);margin-bottom:8px}
.hero h1{font-size:clamp(40px,8vw,58px);letter-spacing:.01em;margin-top:4px}
/* Párrafos de la app (resúmenes, píldoras, conceptos, tesis, conclusiones…) justificados; la última línea de cada
   párrafo (o la única) queda alineada a la izquierda, que es lo que hace text-align:justify. Especificidad 0 para que
   cualquier alineación explícita (centrados, a la derecha) siga mandando; el texto íntegro (.reader) lo decide el
   ajuste «Texto justificado» del modo lectura. */
:where(.wrap, .sheet-body) :where(p, dd, .steps li > div):where(:not(.reader, .reader *)){text-align:justify;text-align-last:auto;hyphens:auto;-webkit-hyphens:auto}
.hero .lede{font-size:19px;color:var(--ink-2);margin:14px 0 0;text-align:justify;hyphens:auto}
.hero .lede.sm{font-size:16.5px;line-height:1.55}
.hero .lede.sm p{margin:0 0 10px}
.hero .lede.sm p:first-child{font-size:18.5px}
.hero .lede.sm.col p{font-size:18.5px} /* portada de la colección: los dos párrafos al mismo tamaño */
.hero .lede.sm p:last-child{margin-bottom:0}
.hero .lede.sm .lede-cta{display:inline-flex;margin-left:6px;padding:2px 11px;font-size:14.5px;letter-spacing:.03em;line-height:1.5;vertical-align:baseline;background:var(--img);color:var(--ink);text-decoration:none;white-space:nowrap}
.hero .lede.sm .lede-cta:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.sec-title{margin:38px 0 14px;font-size:28px}
.prose p{font-size:18.5px}
.prose.indent p + p{text-indent:1.5em}
.card{display:block;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:16px 18px;color:inherit;text-decoration:none;position:relative}
a.card:hover{border-color:var(--ink-3)}
a.card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card h3{font-size:22px;margin:6px 0 4px}
.card + .card{margin-top:12px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid.vols{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid.vols .card + .card{margin-top:0}
/* portada de cada revista en el móvil: volúmenes y números de dos en dos, con la tarjeta más compacta */
@media (max-width:600px){
  /* de dos en dos mientras quepan dos de 150 px; en pantallas muy estrechas, una debajo de otra */
  .grid.vols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .grid.vols .vol-card .vc-body{padding:10px 12px 12px}
  .grid.vols .vol-card h3{font-size:17px;line-height:1.2}
  .grid.vols .vol-card .eyebrow{font-size:12px}
  .grid.vols .vol-card .meta{flex-wrap:wrap;gap:2px 10px;margin-top:6px;font-size:14px}
}

/* tarjeta de volumen con motivo de portada (fondo negro, triángulo de color y triángulo blanco) */
.vol-card{padding:0;overflow:hidden}
.vol-card .vc-body{padding:14px 18px 16px}
.vol-card h3{font-size:21px}
.cover{display:grid;place-items:center;background:var(--img);padding:24px 0}
.cover i{display:block;width:100px;height:136px;background:#000;position:relative;box-shadow:8px 10px 18px rgb(0 0 0 / .22)}
.cover i::before,.cover i::after{content:"";position:absolute;top:10%;bottom:10%;width:46%}
.cover i::before{left:0;background:var(--vol);clip-path:polygon(0 0,100% 50%,0 100%)}
.cover i::after{right:0;background:#f2f2f2;clip-path:polygon(100% 0,0 50%,100% 100%)}
.cover b{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:500 10px var(--f-sc);color:#cfcfcf;letter-spacing:.06em;text-transform:lowercase}
.vol-card .meta{display:flex;gap:14px;margin-top:8px;font-size:15.5px;color:var(--ink-2)}
.badge{display:inline-block;font-family:var(--f-body);font-size:14px;padding:2px 10px;border-radius:var(--radius);background:var(--btn);color:var(--btn-ink)}
.cover .badge{position:absolute;left:10px;bottom:10px}
.cover{position:relative}
.progress{height:4px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-top:10px}
.progress > i{display:block;height:100%;background:var(--vol);border-radius:2px}
/* barra de lectura con el porcentaje a la derecha */
.progress-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.progress-row .progress{flex:1;margin:0}
.progress-row .pct{flex:none;font-size:14px;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tool{display:flex;gap:12px;align-items:flex-start}
.tool svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.tool strong{font-family:var(--f-body);font-weight:400;font-size:19px;display:block;line-height:1.25}
.tool span{font-size:15px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius);padding:6px 12px;font-family:var(--f-body);font-size:16px;font-weight:400;color:var(--ink);background:var(--bg);text-decoration:none;cursor:pointer;line-height:1.2;letter-spacing:.02em}
.chip:hover{border-color:var(--ink-3)}
.chip.on,.chip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.chip.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.tag{display:inline-block;font-family:var(--f-sc);font-size:14px;letter-spacing:.04em;text-transform:lowercase;padding:0 8px;border-radius:var(--radius);background:var(--btn);color:var(--btn-ink)}
.tag.soft{background:var(--green-soft);color:var(--ink)} .tag.olive{background:var(--olive-soft);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius);padding:12px 24px;background:var(--btn);color:var(--btn-ink);font-family:var(--f-body);font-weight:400;font-size:17px;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:box-shadow .15s}
.btn:hover{box-shadow:0 0 0 2px var(--btn)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--btn)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--btn)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn.block{display:flex;width:100%}
.check{color:var(--green);font-size:15px}

/* ---------- pestañas ---------- */
.page-head{padding:20px 0 6px}
.page-head h1{font-size:clamp(30px,6vw,42px);margin:4px 0 6px}
.page-head .by{color:var(--ink-2);font-size:19px;font-style:italic}
.page-head .sub{color:var(--ink-2);font-size:17.5px;margin-top:6px}
.page-head .ph-subtitle{font-size:clamp(20px,3.6vw,24px);color:var(--ink-2);margin:-2px 0 4px}
.page-head .ph-subtitle .amp{color:var(--ink-3)}
.tabs{position:sticky;top:calc(var(--bar-h) + var(--safe-t));z-index:10;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--bg);border-bottom:1px solid var(--line);margin:10px -16px 18px;padding:0 10px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:12px 12px 9px;font-family:var(--f-body);font-size:17px;color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--vol)}

/* ---------- artículo ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 18px 46px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--vol);color:#fff;display:grid;place-items:center;font-family:var(--f-body);font-size:16px}
.steps li::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-size:21px;margin-bottom:4px}
.concepts{margin:0}
.concepts dt{font-family:var(--f-body);font-weight:700;font-size:20px;color:var(--ink);margin-top:16px}
.concepts dd{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line)}
blockquote.quote{margin:8px 0 24px;padding:4px 0 4px 18px;border-left:3px solid var(--vol);font-size:22px;font-style:italic;line-height:1.5}
blockquote.quote footer{font-style:normal;font-family:var(--f-sc);text-transform:lowercase;font-size:15px;color:var(--ink-3);margin-top:10px}
/* esquemas: diagram.css con las variables del tema de la página */
:root .dg{--d-bg:var(--paper);--d-paper:var(--bg);--d-ink:var(--ink);--d-ink2:var(--ink-2);--d-ink3:var(--ink-3);
  --d-soft:var(--line-2);--d-c1:var(--vol);--d-c2:var(--slate);--d-c3:var(--olive);--d-c4:var(--green);
  --d-font:var(--f-body);--d-font-sc:var(--f-sc)}
figure.diagram{margin:0 0 20px}
figure.diagram button{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);cursor:zoom-in;position:relative;color:inherit}
figure.diagram .dg{width:100%;background:none}
figure.diagram .dg[data-state="loading"]{background:linear-gradient(90deg,var(--line-2),transparent,var(--line-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:4px}
@keyframes shimmer{to{background-position:-200% 0}}
.dg-error{margin:0;padding:24px;color:var(--ink-3);text-align:center}
/* ampliar: una lupa con + en la esquina (caja del color del botón y el icono en su tinta) */
figure.diagram button::before,figure.diagram button::after{content:"";position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:6px}
figure.diagram button::before{background:color-mix(in srgb,var(--btn) 72%,var(--paper));opacity:.5} /* translúcida: deja ver el esquema */
figure.diagram button:hover::before{opacity:.75}
figure.diagram button::after{background:var(--btn-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3l5.2 5.2M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/19px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3l5.2 5.2M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/19px no-repeat}
figure.diagram figcaption{font-size:16px;color:var(--ink-2);margin-top:8px}
.fig-tag{font-weight:700;font-style:italic;color:var(--ink)} /* nombre de la figura: «Esquema MX1.14», «Mapa conceptual NC2» */
.neighbours{display:flex;justify-content:space-between;gap:12px;margin-top:36px;border-top:1px solid var(--line);padding-top:16px}
.neighbours a{flex:1;text-decoration:none;color:var(--ink);font-size:17px;line-height:1.3}
.neighbours a small{display:block;font-family:var(--f-sc);font-size:14px;color:var(--olive);text-transform:lowercase;letter-spacing:.05em}
.neighbours a.next{text-align:right}
.wrap.has-fab{padding-bottom:calc(110px + var(--safe-b))}
.fab{position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:15;box-shadow:0 4px 14px rgb(0 0 0 / .22)}
.empty{color:var(--ink-3);padding:24px 0}

/* ---------- listas ---------- */
.list-item{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.list-item:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.list-item h3{font-size:20px;margin:4px 0 2px}
.list-item p{margin:2px 0 0;font-size:16.5px;color:var(--ink-2)}
.list-item .src{font-family:var(--f-sc);text-transform:lowercase;font-size:14.5px;color:var(--ink-3);margin-top:6px;letter-spacing:.03em}
.list-item mark,.reader mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
.field{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--ink-3);border-radius:6px;padding:0 12px}
.field:focus-within{box-shadow:0 0 0 1px var(--ink)}
.field svg{width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.6;flex:none}
.field input{flex:1;border:0;background:none;padding:13px 0;font:inherit;font-size:18px;color:var(--ink);outline:none;min-width:0}
.sticky-tools{position:sticky;top:calc(var(--bar-h) + var(--safe-t));background:var(--bg);z-index:5;padding:10px 0 6px}
.row-actions{display:flex;align-items:center;gap:8px}
.row-actions .grow{flex:1}

/* ---------- lector ---------- */
body.reading{background:var(--paper)}
.reader-top,.reader-bottom{position:fixed;left:0;right:0;z-index:30;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .25s ease,opacity .25s ease}
.reader-top{top:0;padding-top:var(--safe-t);border-bottom:1px solid var(--line)}
.reader-bottom{bottom:0;padding-bottom:var(--safe-b);border-top:1px solid var(--line)}
body.chrome-hidden .reader-top{transform:translateY(-100%);opacity:0}
body.chrome-hidden .reader-bottom{transform:translateY(100%);opacity:0}
.reader-top .inner,.reader-bottom .inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:0 6px;min-height:var(--bar-h)}
.reader-top .titles{flex:1;min-width:0;line-height:1.2}
.reader-top .titles b{display:block;font-weight:400;font-size:17.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-top .titles span{font-family:var(--f-sc);text-transform:lowercase;font-size:14px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.reader-bottom .inner{flex-direction:column;align-items:stretch;padding:6px 14px}
.reader-bottom .seek{display:flex;align-items:center;gap:12px}
.reader-bottom input[type=range]{flex:1;accent-color:var(--vol)}
/* barra de posición: relleno sólido hasta el punto actual (--p) y translúcido hasta el máximo alcanzado (--m) */
#r-seek{--p:0;--m:0;--th:16px;-webkit-appearance:none;appearance:none;height:22px;background:none;margin:0;cursor:pointer;
  --pos:calc(var(--th) / 2 + (100% - var(--th)) * var(--p));--max:calc(var(--th) / 2 + (100% - var(--th)) * var(--m));
  --track:linear-gradient(to right,var(--vol) 0 var(--pos),color-mix(in srgb,var(--vol) 35%,transparent) var(--pos) var(--max),color-mix(in srgb,var(--ink-3) 30%,transparent) var(--max) 100%)}
#r-seek::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--track)}
#r-seek::-moz-range-track{height:5px;border-radius:3px;background:var(--track)}
#r-seek::-webkit-slider-thumb{-webkit-appearance:none;width:var(--th);height:var(--th);margin-top:-5.5px;border-radius:50%;background:var(--vol);border:0}
#r-seek::-moz-range-thumb{width:var(--th);height:var(--th);border-radius:50%;background:var(--vol);border:0}
#r-seek:focus-visible{outline:2px solid var(--vol);outline-offset:3px;border-radius:4px}
.reader-bottom .pct{font-size:14px;color:var(--ink-3);min-width:42px;text-align:right}
.reader-bottom .buttons{display:flex;justify-content:space-around}
/* «Subrayar»: despliega hacia arriba los cinco colores y, arriba y separado, los marcadores del texto */
.hl-tool{position:relative;display:flex}
.hl-pop{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 20px rgb(0 0 0 / .18);z-index:45}
.hl-pop[hidden]{display:none}
.hl-pop-marks{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.hl-pop-marks:hover{background:var(--line-2)}
.hl-pop-marks svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.hl-pop-sep{width:24px;height:1px;background:var(--line)}
/* la rueda dentada ocupa todo su recuadro: algo menor que los demás iconos para que pese lo mismo */
.hl-pop-marks svg.ico-gear{width:18px;height:18px}
.tab-ico svg.ico-gear{width:15px;height:15px;vertical-align:-2px}
.hl-pop-sws,.hl-sws{display:contents}
/* Leyenda de los subrayados */
.legend{display:grid;gap:6px}
.lg-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}
/* Marcadores: alto mínimo para que, con la barra de pestañas fija, cambiar de pestaña no la desfije */
.bm-panel{min-height:100dvh}
.tab-ico{display:inline}
.tab-ico svg{width:17px;height:17px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lg-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.lg-dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);background:var(--hl);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.lg-row.empty .lg-dot{background:none;border:2px dashed var(--ink-3);box-shadow:none}
.lg-dot[aria-expanded="true"]{box-shadow:0 0 0 3px var(--ink)}
.lg-cat{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.lg-cat input{flex:1;min-width:0;border:0;background:none;padding:8px 10px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.lg-cat input:disabled{color:var(--ink-3)}
.lg-cat{position:relative}
.lg-new{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;font-size:16px;color:var(--ink-3);pointer-events:none;white-space:nowrap}
.lg-new svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lg-pen{display:none;padding:0 2px;color:var(--ink-3)}
.lg-cat.is-default .lg-pen{display:grid;place-items:center} /* sin categoría propia: lápiz gris, se puede escribir */
.lg-cat.is-default input{color:var(--ink-2)}
.lg-pen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.lg-more{border:0;background:none;padding:0 10px;align-self:stretch;font-size:15px;color:var(--ink-2);cursor:pointer}
.lg-more:disabled{opacity:.4;cursor:default}
.lg-show{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.lg-show input{accent-color:var(--btn)} /* casilla marcada en el oscuro de los botones de la app */
.lg-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;padding:4px 2px 8px}
.lg-pick.lg-pick-colors{width:min(560px,100%)}
.lg-del{justify-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:inherit;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.lg-del i{width:20px;height:20px;border-radius:50%;border:2px dashed var(--ink-3)}
.lg-del:hover{border-color:var(--ink-3);color:var(--ink)}
.lg-pal{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;text-align:left}
.lg-pal i{width:20px;height:20px;border-radius:50%;background:var(--hl);flex:none}
.lg-pal[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* ventana de categorías de la leyenda (encima de todo) */
.lg-pick-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .25)}
.lg-pick{width:min(340px,100%);max-height:min(70vh,560px);overflow:auto;padding:8px;border-radius:10px;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 30px rgb(0 0 0 / .25);display:grid;gap:2px}
.lg-pick-head{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;font-size:14px;color:var(--ink-3);border-bottom:1px solid var(--line-2);margin-bottom:4px}
.lg-pick-head i{width:16px;height:16px;border-radius:50%;background:var(--hl)}
.lg-pick button{text-align:left;padding:8px 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:15.5px;color:var(--ink);cursor:pointer}
.lg-pick button:hover{background:var(--line-2)}
.lg-pick button[aria-selected="true"]{font-weight:700}
.data-tip{margin:6px 0 0}
.lg-cats{display:grid;gap:2px;padding:4px 0 10px 44px}
.lg-cats button{text-align:left;padding:7px 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.lg-cats button:hover{background:var(--line-2)}
/* activo: el botón marcado con el color elegido */
#r-hl.on{color:var(--ink);background:color-mix(in srgb,var(--hl) 55%,transparent);border-radius:10px}
#r-hl.on svg{stroke-width:2}
.reader.hl-mode{cursor:text}
/* subrayador táctil: arrastrar subraya (sin la selección ni el menú del sistema); en vertical, sigue desplazando */
@media (pointer:coarse){.reader.hl-mode{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
/* Safari (iPad, iPhone) no da posiciones del texto bajo el dedo en texto no seleccionable: reader.js lo vuelve
   seleccionable un instante para consultarlas */
.reader.hl-mode.hl-probe{-webkit-user-select:text;user-select:text}
/* subrayado en curso (reader.js): debajo del texto (z-index negativo: sobre el fondo de la página, bajo las letras)
   y con el mismo tono que el subrayado guardado */
.hl-draft{position:absolute;left:0;top:0;pointer-events:none;z-index:-1}
.hl-draft i{position:absolute;border-radius:2px;background:color-mix(in srgb,var(--hl) 45%,transparent)}
/* marcadores del texto (ventana del lector) */
.r-mark{display:block;margin-top:10px;padding:10px 12px;border-left:4px solid var(--hl);background:color-mix(in srgb,var(--hl) 12%,var(--paper));border-radius:0 6px 6px 0;color:var(--ink);text-decoration:none}
.r-mark-t{display:block;font-size:16px;line-height:1.45}
.r-mark-n{display:block;margin-top:6px;font-size:15px;font-style:italic;color:var(--ink-2)}
.bar-btn{display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:4px 14px;cursor:pointer;color:var(--ink);font-family:var(--f-sc);text-transform:lowercase;font-size:14px}
.bar-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.findbar{display:flex;align-items:center;gap:4px;flex:1}
.findbar input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--line);background:none;padding:8px 4px;font:inherit;font-size:17px;color:var(--ink);outline:none}
.findbar .count{font-size:14px;color:var(--ink-3);min-width:44px;text-align:center}

.reader{
  --r-size:20px; --r-lh:1.6; --r-gap:.8em; --r-margin:24px; --r-width:680px; --r-font:var(--f-body);
  max-width:calc(var(--r-width) + 2 * var(--r-margin));margin:0 auto;
  padding:calc(var(--bar-h) + var(--safe-t) + 28px) var(--r-margin) calc(160px + var(--safe-b));
  font-family:var(--r-font);font-size:var(--r-size);line-height:var(--r-lh);color:var(--ink);letter-spacing:.01em;
  overflow-wrap:break-word;
}
.reader.justify p,.reader.justify .note{text-align:justify}
.reader.hyphens{hyphens:auto;-webkit-hyphens:auto}
.reader p{margin:0 0 var(--r-gap)}
.reader.indent p{text-indent:1.5em}
.reader.indent p.first{text-indent:0}
.reader h2.sect{font-family:var(--r-font);font-weight:700;font-size:1.18em;margin:1.6em 0 .7em;line-height:1.25}
.reader .epi{font-style:italic;color:var(--ink-2);font-size:.92em;margin:0 0 .6em 2em;text-align:left}
.reader .note{font-size:.8em;line-height:1.45;color:var(--ink-3);border-left:2px solid color-mix(in srgb,var(--vol) 60%,transparent);padding-left:10px;margin:0 0 var(--r-gap)}
.reader.no-notes .note,.reader.no-notes .fn,.reader.no-notes .orphans{display:none}
.reader h3.sect{font-family:var(--r-font);font-weight:700;font-size:1.05em;margin:1.4em 0 .5em;line-height:1.25}
.reader h4.sect{font-family:var(--r-font);font-weight:400;font-style:italic;font-size:1em;margin:1.2em 0 .4em;line-height:1.3}
.reader .bq{font-size:.93em;margin:0 0 var(--r-gap) 1.6em;color:var(--ink-2);text-align:left}
.reader .bq .cite,.reader .epi .cite{display:block;font-style:normal;font-size:.85em;color:var(--ink-3);margin-top:.2em}
.reader p.li{margin-left:1.6em;text-indent:-1.6em;text-align:left}
.reader p.li .mk{display:inline-block;min-width:1.6em;text-indent:0;color:var(--vol);font-weight:700}
.reader p.cont{text-indent:0}
.reader .fn{font-size:.65em;line-height:0;vertical-align:baseline;position:relative;top:-.7em;margin:0 .08em 0 .06em}
.reader .fn-b{font:inherit;font-weight:700;color:var(--vol);background:none;border:0;padding:.35em .22em;margin:-.35em -.1em;cursor:pointer;border-radius:4px}
.reader .fn-b:hover,.reader .fn-b:focus-visible{background:color-mix(in srgb,var(--vol) 16%,transparent)}
.reader .orphans{margin-top:2.4em;padding-top:1em;border-top:1px solid var(--line)}
.reader .orphans h3{font-size:1em;margin:0 0 .3em}
.note-sheet{font-size:1.02em;line-height:1.55}
.note-sheet p{margin:0 0 .7em}
.toc-list a.sub1{padding-left:1.2em}.toc-list a.sub2{padding-left:2.2em;font-style:italic}
.reader .r-head{margin-bottom:2em;padding-bottom:1.2em;border-bottom:1px solid var(--line)}
.reader .r-head .eyebrow{font-size:15px;color:var(--vol)}
.reader .r-head h1{font-size:1.8em;margin:.25em 0 .25em;line-height:1.15}
.reader .r-head .by{font-style:italic;color:var(--ink-2)}
.reader .flash{animation:flash 1.6s ease}
@keyframes flash{0%,40%{background:var(--mark)}100%{background:transparent}}
.reader-end{text-align:center;margin-top:3em;display:grid;gap:12px;justify-items:center;font-family:var(--f-body)}
.reader-end .fleuron{font-size:28px;color:var(--vol)}
.loading{display:grid;place-items:center;min-height:60vh;color:var(--ink-3)}

/* ---------- hojas (dialog) ---------- */
dialog{color:var(--ink)}
dialog::backdrop{background:rgb(20 24 22 / .5)}
/* hoja flotante: un poco separada del borde inferior para que se vea entera (dvh: sin la barra del navegador
   ni la de gestos del móvil) y con el texto visible detrás */
.sheet{width:min(720px,calc(100% - 16px));max-height:84vh;max-height:calc(100dvh - 96px);margin:auto auto calc(12px + var(--safe-b));padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:none;flex-direction:column}
.sheet[open]{display:flex;animation:up .22s ease}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@media (min-width:900px){.sheet{margin:auto;border-radius:8px;max-height:84vh;max-height:84dvh}}
/* leyendo: las ventanas (guía, índice, leyenda, marcadores…) centradas en vertical en el hueco que queda bajo la barra
   del título; al crecer, nunca la tapan (la ventana es fixed con alto fit-content: los márgenes auto la centran
   entre top y bottom) */
body.reading .sheet{top:calc(var(--bar-h) + var(--safe-t) + 10px);bottom:calc(12px + var(--safe-b));margin:auto;
  max-height:calc(100vh - var(--bar-h) - var(--safe-t) - var(--safe-b) - 22px);
  max-height:calc(100dvh - var(--bar-h) - var(--safe-t) - var(--safe-b) - 22px)}
/* la guía de estudio del lector: siempre al alto máximo (todo el hueco bajo la barra del título) */
body.reading .sheet.sheet-max{height:calc(100vh - var(--bar-h) - var(--safe-t) - var(--safe-b) - 22px);
  height:calc(100dvh - var(--bar-h) - var(--safe-t) - var(--safe-b) - 22px)}
/* ventanas y menú: al abrirse reciben el foco ellas mismas (no su primer enlace o botón), sin recuadro */
dialog:focus,dialog:focus-visible{outline:none}
.sheet-head{display:flex;align-items:center;gap:8px;padding:12px 8px 6px 20px;border-bottom:1px solid var(--line)}
.sheet-head h2{flex:1;font-size:24px}
.sheet-body{overflow:auto;padding:12px 20px 24px}
.sheet-body .tabs{top:-12px;margin:-12px -20px 14px}
.set-group{margin:18px 0 6px;font-family:var(--f-sc);font-size:15px;letter-spacing:.06em;text-transform:lowercase;color:var(--olive)}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.swatch{display:grid;justify-items:center;gap:4px;background:none;border:0;cursor:pointer;font-size:14px;color:var(--ink-2)}
.swatch i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-style:normal;font-family:var(--f-body);font-size:16px}
.swatch[aria-pressed="true"] i{outline:3px solid var(--btn);outline-offset:1px}
.range-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;margin:10px 0}
.range-row label{font-size:17px}
.range-row output{font-size:15px;color:var(--ink-3)}
.range-row input{grid-column:1/-1;width:100%;accent-color:var(--btn)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:17px;cursor:pointer}
.switch-row input{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch-row input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgb(0 0 0 / .3)}
.switch-row input:checked{background:var(--btn)}
.switch-row input:checked::after{transform:translateX(18px);background:var(--btn-ink)}
.preview{border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.preview .reader{padding:18px var(--r-margin);max-width:none;background:var(--paper);color:var(--ink)}
.link-btn{background:none;border:0;color:var(--link);cursor:pointer;padding:10px 0;font-family:var(--f-body);font-size:17px;text-decoration:underline;text-underline-offset:3px}
.toc-list a{display:block;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:17.5px;line-height:1.3}
.toc-list a.mark{font-weight:400;font-size:16.5px;color:var(--ink-2)}
.toc-list a.mark::before{content:"▍";color:var(--vol);margin-right:4px}

/* ---------- visor de esquemas y mapas ---------- */
/* Siempre sobre blanco y con la paleta clara, también leyendo en oscuro, sepia o negro */
.zoom{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#252525;
  --bg:#fff;--paper:#fff;--ink:#252525;--ink-2:#5b5a5a;--ink-3:#8a8686;--line:rgba(37,37,37,.13);--line-2:rgba(37,37,37,.06);
  --slate:#3c5a72;--olive:#716a56;--green:#3f5147;--vol:#2c332f;color-scheme:light}
#zoom[data-vol="1"]{--vol:#4646dc} #zoom[data-vol="2"]{--vol:#b10a0a} #zoom[data-vol="3"]{--vol:#2a9f99}
#zoom[data-vol="4"]{--vol:#d39504} #zoom[data-vol="5"]{--vol:#7ea52a}
#zoom[data-vol^="n"]{--vol:#be2544} #zoom[data-vol="n2"]{--vol:#cf4868} #zoom[data-vol="n3"]{--vol:#e0658c} #zoom[data-vol="n4"]{--vol:#e8473f}
.zoom[open]{display:block}
/* con el visor abierto, la página de debajo no se desplaza ni muestra su barra de desplazamiento */
html:has(.zoom[open]){overflow:hidden}
/* con una ventana abierta, la página de detrás no se desplaza: lo impide app.js (sin tocar el overflow de la
   página, que al cambiar hacía parpadear la pantalla al abrir y cerrar el menú); dentro, sin encadenar el desplazamiento */
.sheet-body,.drawer-body,.lg-pick{overscroll-behavior:contain}
/* contenido del visor; girado («Girar a horizontal»), ocupa la pantalla a lo ancho y gira 90° */
.zoom-rot{position:absolute;inset:0}
.zoom.rot .zoom-rot{inset:auto;left:50%;top:50%;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
.zoom.rot .zoom-rot-btn svg{transform:scaleX(-1)} /* el botón pasa a ser el inverso: volver a vertical */
.zoom-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:grab;user-select:none;-webkit-user-select:none}
.zoom-stage.dragging{cursor:grabbing}
.zoom-stage .dg{position:absolute;left:0;top:0;margin:0;max-width:none;background:none} /* tamaño real, no transform: nítido */
/* vuelta del dibujo cuando la pantalla había quedado casi vacía: con un pequeño rebote */
.zoom-stage .dg.settle{transition:left .45s cubic-bezier(.22,1.3,.5,1),top .45s cubic-bezier(.22,1.3,.5,1)}
/* al cambiar de versión (S | D): vuelta rápida al ajuste, mientras se trae la otra */
.zoom-stage .dg.restore{transition:left .12s ease-out,top .12s ease-out,width .12s ease-out}
/* pie arriba, entero (el dibujo se ajusta al espacio que queda); si es muy largo, con desplazamiento */
.zoom-caption{position:absolute;left:0;right:0;top:0;margin:0;padding:calc(8px + var(--safe-t)) 44px 8px 16px;font-size:15px;line-height:1.35;color:var(--ink-2);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);max-height:38vh;overflow:auto}
.zoom-caption:empty{display:none}
@media (max-width:600px){.zoom-caption{font-size:13.5px}} /* en el móvil, el pie ocupa menos pantalla */
/* plegar el pie: queda solo el título (qué esquema es); doble flecha abajo a la derecha */
.zoom-fold{position:absolute;right:6px;bottom:2px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.zoom-fold:hover{background:var(--line-2);color:var(--ink)}
.zoom-fold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.zoom-caption.folded .zoom-fold svg{transform:rotate(180deg)}
.zoom-caption.folded .zc-desc{display:none}
.zoom-caption.folded{min-height:36px} /* plegado y sin título: queda la franja con la doble flecha */
/* icono en línea con el texto: la palabra queda en la misma línea base que las demás pestañas */
.tab-marks svg{width:16px;height:16px;margin-right:5px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
/* barra flotante inferior: anterior y siguiente, zoom y cerrar */
.zoom-bar{position:absolute;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:4px 6px;border-radius:999px;background:rgba(44,51,47,.94);color:#efecec;font-size:15px;box-shadow:0 6px 18px rgb(0 0 0 / .28);max-width:calc(100% - 20px)}
.zoom-bar .icon-btn{color:#efecec;width:42px;height:42px}
.zoom-bar .icon-btn:hover{background:rgba(255,255,255,.14)}
.zoom-sep{width:1px;height:24px;background:rgba(255,255,255,.28);margin:0 4px;flex:none}
#zoom-level{min-width:58px;height:42px;padding:0 6px;border:0;border-radius:21px;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}
#zoom-level:hover{background:rgba(255,255,255,.14)}
.zoom-pos{min-width:48px;height:42px;padding:0 6px;border:0;border-radius:21px;background:none;color:inherit;font:inherit;text-align:center;font-size:14px;opacity:.85;cursor:pointer}
.zoom-pos:hover{background:rgba(255,255,255,.14);opacity:1}
/* en pantallas táctiles no hay cursor: tras pulsar un botón del visor no queda marcado como si lo tuviera encima
   (la lupa abierta sí sigue marcada: .on) */
@media (hover:none){
  .zoom-bar .icon-btn:not(.on):hover,#zoom-level:hover,.zoom-pos:hover{background:none}
  .zoom-pos:hover{opacity:.85}
  .zoom-fold:hover{background:none;color:var(--ink-3)}
}
.zoom-pos svg{display:block;margin:auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* un solo esquema */
/* barra: zoom y girar a la izquierda, el paso entre esquemas en el centro y cerrar a la derecha */
.zoom-side,.zoom-mid{display:flex;align-items:center}
.zoom-side{justify-content:space-evenly;gap:4px} /* los botones de cada lado, repartidos en su espacio */
/* interruptor simplificada (S) / detallada (D): la opción vista, resaltada */
.zoom-full{display:inline-flex;align-items:center;padding:3px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:none;color:inherit;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;flex:none}
.zoom-bar{overflow:visible}
/* «Versión simplificada / detallada» (y «Restablecer el zoom»): sobre su botón de la barra, oscura como ella */
.zoom-full-tip{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:999px;
  background:rgba(44,51,47,.94);color:#efecec;font-size:13px;line-height:1.3;box-shadow:0 4px 12px rgb(0 0 0 / .25);pointer-events:none;
  animation:tipflash .9s linear both}
.zoom-full-tip[hidden]{display:none}
.zoom-full-tip.icon-only{padding:5px 9px}
.zoom-full-tip svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zoom-full-tip.at-switch::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(44,51,47,.94)}
@keyframes tipflash{0%{opacity:0}22.2%{opacity:1}66.7%{opacity:1}100%{opacity:0}} /* 0,2 s · 0,4 s · 0,3 s */
.zoom-full > span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;opacity:.7}
.zoom-full[aria-pressed="false"] > span:first-child,.zoom-full[aria-pressed="true"] > span:last-child{background:#efecec;color:#2c332f;opacity:1;font-weight:700}
.zoom-mid{margin:0 6px;padding:0 6px;border-left:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(255,255,255,.28)}
.zoom-zwrap{position:relative}
.zoom-bar .icon-btn.on{background:rgba(255,255,255,.18)}
/* control de zoom: se despliega hacia arriba sobre la lupa, en vertical, como el del volumen */
.zoom-slider{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 0 6px;width:52px;border-radius:26px;background:rgba(44,51,47,.94);box-shadow:0 6px 18px rgb(0 0 0 / .28)}
.zoom-slider[hidden]{display:none}
#zoom-range{writing-mode:vertical-lr;direction:rtl;width:24px;height:150px;margin:4px 0;accent-color:#efecec;cursor:pointer}
.zoom-slider #zoom-level{min-width:0;width:48px;height:30px;padding:0;font-size:12.5px}

.toast{position:fixed;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);z-index:60;background:var(--head);color:var(--head-ink);padding:10px 18px;border-radius:var(--radius);font-size:16px;box-shadow:0 6px 18px rgb(0 0 0 / .25)}

/* aviso de versión nueva: barra flotante con «Actualizar» (sw.js en espera; ver «actualización» en app.js) */
.update{position:fixed;left:50%;bottom:calc(80px + var(--safe-b));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);background:var(--head);color:var(--head-ink);padding:8px 8px 8px 18px;border-radius:var(--radius);font-size:16px;box-shadow:0 6px 18px rgb(0 0 0 / .25);animation:up .18s ease}
.update.fading{opacity:0;transition:opacity 1s ease}
/* texto arriba y los dos botones debajo, centrados */
.update{flex-direction:column;align-items:center;gap:10px;padding:12px 16px;text-align:center}
.update .btn.ghost{margin-left:0}
.update-btns{display:flex;gap:10px;justify-content:center}
.update .btn{padding:8px 16px;background:var(--head-ink);color:var(--head);flex:none}
.update .btn.ghost{background:none;color:var(--head-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--head-ink) 60%,transparent);margin-left:auto}
.update .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--head-ink)}
.update .btn + .btn{margin-left:0}
body.reading .update,body.about-page .update{display:none} /* leyendo no se molesta; en «Acerca de» el botón ya está en Instalar */
.install-new{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.install-new > svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--olive);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- pie ---------- */
.site-foot{margin-top:48px;padding:22px 0 8px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);text-align:center}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.appbar,.reader-top,.reader-bottom,.fab,.tabs{display:none!important}.reader{padding:0}}

/* ---------- aviso de IA y «Acerca de» ---------- */
.ai-note{display:flex;gap:8px;align-items:center;margin:28px 0 0;padding:10px 12px;border-radius:6px;background:var(--olive-soft);color:var(--ink-2);font-size:13.5px;line-height:1.45}
.ai-note svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--olive);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card.about{margin-top:16px}
.card.about h2{font-size:24px;margin-bottom:10px}
.card.about h3{font-size:19px;margin:18px 0 6px}
.card.about h2 + h3{margin-top:14px} /* aire entre el título de la sección y su primer subtítulo */
.card.about.ai h3{font-size:24px;margin:22px 0 10px} /* sin título propio: sus apartados, al tamaño de los títulos */
.card.about.ai h3:first-child{margin-top:0}
.card.about p{margin-bottom:.6em} /* párrafos de un mismo apartado, más juntos */
.card.about p:last-child{margin-bottom:0}
/* aviso sobre la guía: mismo amarillo suave que el recuadro «Acerca de» de inicio */
.card.about.ai{background:color-mix(in srgb,var(--mark) 16%,var(--bg));border:1px solid color-mix(in srgb,var(--mark) 40%,var(--line))}
/* «Acerca de»: texto algo menor que el general de la app (es largo y de consulta) */
body.about-page .card.about{font-size:16px;line-height:1.55}
body.about-page .card.about h2{font-size:22px}
body.about-page .card.about h3{font-size:17.5px}
body.about-page .card.about.ai h3{font-size:21px}
body.about-page .card.about li{font-size:inherit}
.card.about .btn{display:flex;width:fit-content;max-width:100%;margin:10px auto 0} /* botones de «Acerca de» centrados */
.credit-vol{padding:14px 0;border-top:1px solid var(--line)}
.credit-vol h3{font-size:20px;margin:2px 0 4px}
.credit-vol ul{margin:6px 0 0;padding-left:18px}
.credit-vol li{margin:3px 0;font-size:16.5px}
.credit-vol li a{color:var(--ink);text-decoration-color:var(--line)}

/* ---------- menú lateral (derecha) ---------- */
.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(380px,92vw);max-width:none;padding:0;border:0;
  background:var(--bg);color:var(--ink);box-shadow:-8px 0 30px rgb(0 0 0 / .25)}
.drawer[open]{display:flex;flex-direction:column}
.drawer::backdrop{background:rgb(20 24 22 / .45)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(6px + var(--safe-t)) 8px 6px 18px;background:var(--head);color:var(--head-ink)}
.drawer-head .icon-btn{color:var(--head-ink)}
.drawer-brand{font-size:24px;color:var(--head-ink);text-decoration:none;letter-spacing:.03em}
.drawer-body{flex:1;overflow:auto;padding:8px 0 calc(24px + var(--safe-b))}
.drawer-body{padding-top:10px} /* algo de aire entre la cabecera («Lector de Marx XXI») y «Biblioteca» */
/* desplegar y plegar las ramas del menú: animación breve de la altura, en app.js (animateDetails) para que funcione en
   todos los navegadores (Safari y los de iPad/iPhone no animan ::details-content) */
.m-group{margin:18px 18px 6px;font-family:var(--f-sc);font-size:15px;letter-spacing:.06em;text-transform:lowercase;color:var(--olive)}
.m-link{display:flex;align-items:center;gap:12px;padding:10px 18px;color:var(--ink);text-decoration:none;font-size:17.5px;line-height:1.25}
.m-link svg{width:21px;height:21px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m-link small,.m-vol summary small{display:block;font-size:14px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.m-link:hover,.m-art:hover{background:var(--line-2)}
.m-link[aria-current="page"]{background:var(--line-2);box-shadow:inset 3px 0 0 var(--vol)}
.drawer details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 18px;position:relative}
.drawer details > summary::-webkit-details-marker{display:none}
.drawer details > summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.drawer details[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.m-vol > summary{font-size:18px;line-height:1.2;padding-right:44px}
.m-dot{width:12px;height:16px;flex:none;background:var(--vol);clip-path:polygon(0 0,100% 50%,0 100%)}
/* el triángulo ocupa el mismo hueco que los iconos (21px): títulos de volumen alineados con «La publicación» y «Síntesis» */
.m-vol > summary .m-dot{margin:0 4.5px}
/* volumen en el menú: su color al pasar el cursor y, desplegado, solo en su título */
.drawer .m-vol > summary:hover,.drawer .m-vol[open] > summary,.drawer .m-vol > summary[aria-current="page"]{background:color-mix(in srgb,var(--vol) 12%,transparent)}
/* subapartados del volumen: color del volumen solo bajo el cursor */
.m-vol .m-sub .m-link:hover,.m-vol .m-arts > summary:hover,.m-vol .m-art:hover{background:color-mix(in srgb,var(--vol) 12%,transparent)}
.m-sub{padding:0 0 8px}
.m-sub .m-link{font-size:16.5px;padding:8px 18px 8px 51px}
.m-arts > summary{font-size:16.5px;padding:8px 44px 8px 51px}
.m-count{font-size:14px;color:var(--ink-3)}
.m-art{display:flex;align-items:flex-start;gap:4px;padding:2px 8px 2px 63px}
.m-art.on{box-shadow:inset 3px 0 0 var(--vol)}
.m-art-title{flex:1;padding:6px 0;color:var(--ink);text-decoration:none;font-size:15.5px;line-height:1.3}
.m-art-title b{color:var(--vol);font-weight:500}
.m-art-title small{display:block;color:var(--ink-3);font-size:13.5px;font-style:italic}
.m-art-read{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:6px;color:var(--ink-2)}
.m-art-read:hover{background:var(--line)}
.m-art-read svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* pestañas alineadas por la base del texto */
.tabs{align-items:flex-end;padding-top:6px}

/* ---------- ajustes de cabecera, pestaña principal, tarjetas y enlaces contiguos ---------- */
.brand{font-size:22px}
.brand-pre{color:color-mix(in srgb,currentColor 55%,transparent);font-size:.72em;letter-spacing:.04em}
@media (max-width:420px){.brand{font-size:19px}}
.appbar .lead{gap:0}
/* menú a la izquierda */
.drawer{margin:0 auto 0 0;box-shadow:8px 0 30px rgb(0 0 0 / .25)}
.drawer[open]{animation:drawer-in-left .2s ease}
@keyframes drawer-in-left{from{transform:translateX(-40px);opacity:.3}}
/* El oscurecido del fondo aparece a la vez que el menú: si se encendía de golpe, se veía a través del menú aún
   semitransparente y parpadeaba en negro. (Alternativa probada: el menú entra entero deslizándose desde el borde y
   también sale así, con transition + @starting-style; sin parpadeo, pero más lenta y solo en Chrome 117+.) */
.drawer[open]::backdrop{animation:backdrop-in .2s ease}
@keyframes backdrop-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.drawer[open],.drawer[open]::backdrop{animation:none}}
/* tarjeta de artículo: resumen + botones a la derecha */
/* Tarjeta de artículo: contenido + panel de acciones propio, teñido con el color del volumen */
.art-card{display:grid;grid-template-columns:1fr auto;padding:0;overflow:hidden}
.art-main{padding:16px 18px;min-width:0}
.art-sum{margin-top:8px;min-width:0}
.art-sum p{margin:0;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.art-actions{display:flex;flex-direction:column;justify-content:center;gap:14px;width:156px;padding:16px;border-left:1px solid var(--line)}
.btn.stack{flex-direction:row;gap:8px;padding:9px 12px;font-size:15px;line-height:1.15;letter-spacing:.02em;text-align:left;justify-content:flex-start}
.btn.stack svg{width:18px;height:18px;flex:none}
@media (max-width:600px){
  .art-card{grid-template-columns:1fr}
  .art-actions{flex-direction:row;width:auto;gap:12px;padding:12px 18px;border-left:0;border-top:1px solid var(--line)}
  .art-actions .btn{flex:1;justify-content:center}
}
/* enlaces anterior / siguiente */
.neighbours a{display:flex;flex-direction:column;gap:1px}
.neighbours a.next{align-items:flex-end}
.neighbours .nb-vol{font-family:var(--f-sc);font-size:13.5px;text-transform:lowercase;letter-spacing:.04em;color:var(--vol)}
.neighbours .nb-title{font-size:17px;line-height:1.25;color:var(--ink)}
.neighbours .nb-author{font-size:14.5px;font-style:italic;color:var(--ink-2)}

/* ---------- móvil: esquemas y objetivos táctiles ---------- */
@media (max-width:600px){

}
@media (pointer:coarse){
  .chip{min-height:44px;padding:8px 14px}
  .chips{gap:10px}
}

/* ---------- lector: volumen en la cabecera ---------- */
.reader .r-head a.r-vol{display:block;text-decoration:none}
.reader .r-head a.r-vol:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- subrayados ---------- */
.reader mark.hl{background:color-mix(in srgb,var(--hl) 45%,transparent);color:inherit;border-radius:2px;padding:0;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.reader mark.hl.has-note{border-bottom:2px dotted color-mix(in srgb,var(--hl) 80%,var(--ink))}
.reader mark.hl mark.hl{background:color-mix(in srgb,var(--hl) 55%,transparent)}
.hl-bar{position:fixed;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 20px rgb(0 0 0 / .22)}
.hl-bar[hidden]{display:none}
.hl-sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);background:var(--hl);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;flex:none}
.hl-sw:hover{transform:scale(1.08)}
.hl-add-note{display:grid;place-items:center;width:36px;height:36px;border:0;border-left:1px solid var(--line);border-radius:0;background:none;color:var(--ink);cursor:pointer;margin-left:2px;padding-left:4px}
.hl-add-note svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hl-quote{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--hl);background:color-mix(in srgb,var(--hl) 16%,transparent);border-radius:0 6px 6px 0;font-size:17px;line-height:1.5;max-height:30vh;overflow:auto}
.hl-colors{display:flex;gap:12px;margin:0 0 16px}
.hl-colors .hl-sw{width:40px;height:40px}
.hl-colors .hl-sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.hl-label{display:block;font-weight:700;margin-bottom:6px}
#hl-note{width:100%;box-sizing:border-box;font:inherit;font-size:17px;line-height:1.45;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);resize:vertical}
#hl-note:focus{outline:2px solid var(--btn);outline-offset:1px}
.hl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.toc-list a.mark::before{color:var(--hl,var(--vol))}
.toc-list a.mark.has-note::after{content:" ✎";color:var(--ink-3)}
/* Marcadores */
.hl-filter{margin:0 0 8px}
.hl-filter .chip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.hl-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--hl)}
.hl-group{margin-top:26px}
.hl-group-title{font-size:21px;margin:4px 0 2px}
/* cada texto, plegable: a la vista el volumen, el título, el autor y cuántos subrayados tiene */
.hl-group > summary{list-style:none;cursor:pointer;position:relative;padding-right:34px}
.hl-group > summary::-webkit-details-marker{display:none}
.hl-group > summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.hl-group[open] > summary::after{transform:translateY(-20%) rotate(-135deg)}
.hl-group-title .m-count{font-size:14px;color:var(--ink-3);font-weight:400;vertical-align:middle}
.hl-open{display:inline-block;margin-top:8px;color:var(--ink-2)}
.hl-item{display:flex;align-items:flex-start;gap:4px;margin-top:12px;border-left:4px solid var(--hl);background:color-mix(in srgb,var(--hl) 10%,var(--paper));border-radius:0 6px 6px 0}
.hl-link{flex:1;min-width:0;padding:10px 4px 10px 14px;color:inherit;text-decoration:none}
.hl-text{margin:0;font-size:17px;line-height:1.5}
.hl-own{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);font-style:italic;color:var(--ink-2);font-size:16px}
.hl-item .src{display:block;margin-top:6px;font-size:14px;color:var(--ink-3)}

/* ---------- biblioteca: Nuevo Ciclo ----------
   Mismo tema que Marx XXI. Como en Marx XXI, cada número usa el color de su portada (la franja inferior;
   en el #004, cuya franja es rosa pálido, el coral de la ilustración). data-vol="n1"… */
[data-vol^="n"]{--vol:#be2544}
[data-vol="n2"]{--vol:#cf4868} [data-vol="n3"]{--vol:#e0658c} [data-vol="n4"]{--vol:#e8473f}
@media (prefers-color-scheme: dark){:root:not([data-theme]) [data-vol="n1"]{--vol:#e2546f}}
:root[data-theme="dark"] [data-vol="n1"],:root[data-theme="black"] [data-vol="n1"]{--vol:#e2546f}

/* portadas: fotografía de cada volumen o número (img/mxxiN.webp, img/ncN.webp), recortada al mismo formato */
.cover.photo{padding:0;background:#ddd;display:block}
.cover.photo img{display:block;width:100%;aspect-ratio:7/5;object-fit:cover}

/* portada dibujada de un número (si falta la imagen): página blanca, «Nuevo Ciclo», #00N y el isotipo */
.cover.nc i{background:#fff;display:flex;flex-direction:column;align-items:center;padding-top:40px;gap:3px;color:#171b1e;font-style:normal}
.cover.nc i::before,.cover.nc i::after{content:none}
.cover.nc .nc-name{font:700 10.5px/1 var(--f-body);letter-spacing:.02em}
.cover.nc .nc-num{font:500 9.5px/1 var(--f-body)}
.cover.nc i img{position:absolute;left:50%;bottom:16px;width:24px;height:24px;transform:translateX(-50%)}

/* tarjetas de publicación (inicio) */
.grid.pubs{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid.pubs .card + .card{margin-top:0}
.pub-card{padding:0;overflow:hidden}
.pub-card .vc-body{padding:14px 18px 16px}
.pub-card h3{font-size:30px}
.pub-card .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:15.5px;color:var(--ink-2)}
.pub-covers{display:flex;justify-content:center;align-items:flex-end;gap:7px;padding:22px 12px 20px;background:var(--img);min-height:142px}
.pub-covers .cover{padding:0;background:none;display:block}
.pub-covers .cover i{width:52px;height:72px;box-shadow:4px 6px 10px rgb(0 0 0 / .2)}
.pub-covers .cover b,.pub-covers .cover .nc-name,.pub-covers .cover .badge{display:none}
.pub-covers .cover.nc i{padding-top:24px}
.pub-covers .cover.nc .nc-num{font-size:8px}
.pub-covers .cover.nc i img{width:14px;height:14px;bottom:9px}
.pub-desc{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pub-last{margin:8px 0 0}
.hero h1 .amp{color:var(--ink-3)}

/* volumen / número */
.vol-notes{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.vol-notes summary{cursor:pointer;font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.05em;color:var(--olive);font-size:15px}
.vol-notes p{margin:8px 0 0;max-width:70ch}

/* panel «Relacionado» */
.related{margin-top:30px;padding-top:14px;border-top:1px solid var(--line)}
.rel-title{display:flex;align-items:center;gap:8px;font-size:24px;margin-bottom:4px}
.rel-title svg{width:22px;height:22px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rel-item{border-left:3px solid var(--vol);padding-left:12px;margin-top:10px;border-bottom:0}
.rel-item h3{font-size:19px}

/* modo lectura: entrevistas y tabla */
.reader .r-head .by-sub{font-size:.8em;color:var(--ink-3);margin-top:.2em}
.reader p.qn{font-weight:700;color:var(--ink);margin-top:calc(var(--r-gap) + .6em);text-align:left}
.reader.indent p.qn{text-indent:0}
.reader p.sep{text-align:center;color:var(--vol);letter-spacing:.4em;text-indent:0;margin:1.4em 0}
.reader figure.tbl{margin:1.2em 0 calc(var(--r-gap) + .4em)}
.reader .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.reader .tbl table{border-collapse:collapse;width:100%;font-size:.72em;line-height:1.35;font-variant-numeric:tabular-nums}
.reader .tbl td,.reader .tbl th{padding:.35em .6em;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.reader .tbl td.num{text-align:right;white-space:nowrap}
.reader .tbl tr.thead th{background:var(--line-2);font-weight:700}
.reader .tbl tr.tsub th{font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.04em;font-weight:500;color:var(--vol);padding-top:.8em}
.reader .tbl-cap{font-size:.78em;color:var(--ink-3);margin:.5em 0 0;text-align:left;text-indent:0}

/* síntesis de la biblioteca */
.card.synth h3{font-size:21px;margin:6px 0 10px}
.synth-col{border-left:3px solid var(--vol);padding:2px 0 2px 14px;margin-top:12px}
.synth-col p{margin:4px 0 0;font-size:17px}
.synth-col .chips{margin-top:8px}
/* tesis comunes: fuentes de cada revista plegadas bajo su explicación */
.synth-src{margin-top:8px}
.synth-src > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--ink-2)}
.synth-src > summary::-webkit-details-marker{display:none}
.synth-src > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.synth-src[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.synth-src > summary:hover{color:var(--ink)}
.synth-align{margin:12px 0 0}
.synth-only .card{margin:0}
.only-item{padding:10px 0;border-bottom:1px solid var(--line-2)}
.only-item:last-child{border-bottom:0}
.only-item .chips{margin-top:6px}
.chip .m-dot{width:9px;height:12px}
.synth-method{margin-top:20px}
.synth-method summary{cursor:pointer;font-size:18px}
.synth-method p{margin:10px 0 0;color:var(--ink-2)}

/* autores */
.list-item.author h3{font-size:20px}
.au-text{display:flex;gap:10px;align-items:flex-start;padding:6px 0 2px;color:var(--ink);text-decoration:none;font-size:16.5px;line-height:1.3}
.au-text .m-dot{margin-top:4px;width:9px;height:12px}
.au-text small{display:block;font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.03em;color:var(--ink-3);font-size:14px}
.au-text:hover span{text-decoration:underline;text-underline-offset:3px}
.credit-pub{font-size:22px;margin:18px 0 2px}
/* listas largas de enlaces en la síntesis: chips compactos también en pantallas táctiles */
.synth-col .chips,.only-item .chips,.list-item .chips{gap:6px}
.synth-col .chip,.only-item .chip,.list-item .chip{min-height:0;padding:3px 10px;font-size:14.5px}

/* menú: título de cada revista plegable (abierto al abrir el menú); fecha de los números debajo del título */
.drawer details.m-pub > summary.m-group{display:flex;margin:0;padding:18px 44px 6px 18px}
.drawer details.m-pub.m-sep{border-top:1px solid var(--line);margin-top:8px}
/* desplegable dentro de un grupo del menú (Estudio › Síntesis): sus entradas, sangradas a la altura del texto */
.drawer details.m-subgroup > summary.m-link{padding-right:44px}
.m-subgroup > a.m-link{font-size:16.5px;padding:8px 18px 8px 51px}
.drawer details.m-pub > summary.m-group::after{top:auto;bottom:16px;transform:rotate(45deg)} /* a la altura del texto del grupo */
.drawer details.m-pub[open] > summary.m-group::after{transform:translateY(3px) rotate(-135deg)}
.drawer summary[data-href][aria-current="page"]{background:var(--line-2)}
.m-vol summary small{white-space:nowrap}
.m-vol[data-vol^="n"] > summary small{margin-top:1px}

/* inicio: tarjetas de herramientas a la misma altura (sin el margen de .card + .card) */
.grid.two .card + .card{margin-top:0}
/* «Acerca de» destacado: fila propia en amarillo suave; la tarjeta ocupa la primera columna y el aviso el resto */
.about-banner{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:12px;align-items:center;padding:12px;border-radius:6px;
  background:color-mix(in srgb,var(--mark) 16%,var(--bg));border:1px solid color-mix(in srgb,var(--mark) 40%,var(--line))}
.about-banner .card{background:color-mix(in srgb,var(--bg) 70%,transparent);align-self:stretch;
  align-items:center} /* icono y texto, centrados en vertical y alineados a la izquierda */
.about-banner p{grid-column:2/-1;margin:0;padding:6px 0;font-size:14px;line-height:1.42;letter-spacing:.01em;color:var(--ink-2);text-wrap:pretty;hyphens:auto}
.about-banner .p-gap{display:block;height:7px}
.about-banner .ab-toggle{display:none} /* «Menos.» / «Mostrar más…»: solo en móvil */
@media (max-width:540px){
  .about-banner{gap:10px;padding:10px}
  .about-banner .card{padding:10px 14px}
  .about-banner p{grid-column:1/-1;font-size:13.5px;padding:0 4px 2px}
  .about-banner .ab-toggle{display:inline;background:none;border:0;padding:0;font:inherit;font-size:12px;font-style:italic;color:var(--ink-3);text-decoration:none;
    cursor:pointer}
  /* a la derecha: en la última línea del texto si cabe; si no, en la siguiente (flotado al final del párrafo) */
  .about-banner .ab-less{float:right;margin:3px 0 0 12px}
  .about-banner p{display:flow-root}
  .about-banner .ab-more{display:none;grid-column:1/-1;justify-self:end;margin:-2px 4px 0}
  .about-banner.folded p{display:none}
  .about-banner.folded .ab-more{display:inline}
}

/* mapas conceptuales (#/mapas): galerías de mapas y esquemas por revista, volumen o número */
.dg-vol{margin-top:22px}
.dg-gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));margin-top:8px}
@media (max-width:420px){.dg-gallery{grid-template-columns:1fr}}
.dg-item{min-width:0}
.dg-title{display:block;margin-bottom:6px;color:var(--ink);text-decoration:none;font-size:16.5px;line-height:1.3}
.dg-title b{font-weight:500;color:var(--vol)}
.dg-title small{display:block;font-size:14px;font-style:italic;color:var(--ink-3)}
.dg-title:hover{text-decoration:underline;text-underline-offset:3px}
.dg-item figure.diagram{margin:0 0 10px}
.dg-item figcaption{display:none} /* el pie se ve al ampliar el esquema */
.dg-gallery.wide{grid-template-columns:1fr}
/* alto mínimo: con la barra de pestañas fija arriba, cambiar a una pestaña con pocos mapas no la desfija */
#maps-panel,#g-list-box{min-height:100dvh}
.page-head .g-search{margin-top:14px}
/* glosario con una sola revista: sin barra de pestañas encima */
.tabs.chip-tabs.solo{top:calc(var(--bar-h) + var(--safe-t));margin-top:0}
.maps-sub-nav{margin:10px 0 4px}
/* botones de volumen o número: una línea desplazable, fija debajo de la barra de pestañas */
.tabs.chip-tabs{top:calc(var(--bar-h) + var(--safe-t) + var(--maps-tabs-h, 47px));z-index:9;margin:-18px -16px 14px;padding:8px 10px;gap:6px;align-items:center}
.tabs.chip-tabs .chip{flex:none;margin:0}
.tabs.chip-tabs .chip[aria-pressed="true"]:not([data-vol]){background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.tabs.chip-tabs .chip[aria-pressed="true"] .m-count{color:inherit;opacity:.8}
/* filtros de marcadores: en la guía del artículo, bajo su barra de pestañas; en la ventana del lector, arriba de ella */
body.art-page .tabs.chip-tabs{margin-top:-30px;margin-bottom:18px}
.sheet-body .tabs.chip-tabs{top:-12px;margin:-12px -20px 12px;padding:8px 14px}
.tabs.chip-tabs .tabs-more,.tabs.chip-tabs .tabs-less{padding-bottom:2px}
/* Colección: el mapa de la colección a todo el ancho y debajo los cuatro de las revistas, en dos columnas
   también en el móvil */
.dg-gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.maps-coll > .dg-item:first-child{grid-column:1 / -1}

.dg-gallery.two > .dg-item:not(:first-child) figure.diagram button::before,.dg-gallery.two > .dg-item:not(:first-child) figure.diagram button::after{top:6px;right:6px;width:26px;height:26px}
.maps-sub-nav .chip[aria-pressed="true"][data-vol]{background:var(--vol);border-color:var(--vol);color:#fff}
.maps-pub{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 8px)}
#mapas-biblioteca{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 8px)}
div.dg-title{color:var(--ink)}

/* inicio: síntesis de la biblioteca (descripción, enlace y mapa) */
.synth-intro p{margin:0 0 14px}
/* enlace a la síntesis: como las tarjetas de herramientas, centrado y del tamaño de un botón */
.card.tool.synth-link{display:flex;align-items:center;width:fit-content;margin:4px auto 20px;padding:12px 24px}
.card.tool.synth-link svg{margin-top:0}
.card.tool.synth-link strong{font-size:18px}

/* mapas conceptuales: apartados plegables */
.maps-sec > summary,.maps-sub > summary{list-style:none;cursor:pointer;position:relative;padding-right:32px}
.maps-sec > summary::-webkit-details-marker,.maps-sub > summary::-webkit-details-marker{display:none}
.maps-sec > summary::after,.maps-sub > summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.maps-sec[open] > summary::after,.maps-sub[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.maps-sec{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 8px)}
.maps-sec > summary .sec-title{margin:30px 0 8px}
.maps-sub{border-top:1px solid var(--line);margin-top:4px}
.maps-sub > summary{display:flex;align-items:center;gap:10px;padding:12px 32px 12px 0;font-size:19px;line-height:1.25}
.maps-sub > summary .m-dot{width:11px;height:15px;flex:none}
.maps-sub > summary .m-count{margin-left:auto}
.maps-sub[open] > summary{color:var(--vol)}
.maps-sub > .dg-gallery{margin:4px 0 18px}
/* visor: anterior / siguiente */

/* síntesis: al saltar a una tesis (?t=N) queda por debajo de la cabecera y las pestañas fijas */
.card.synth{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 64px)}

/* cabecera de volumen, número y artículo: portada y paso anterior/siguiente a la derecha del título */
.page-head.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:"main cover" "main nav";column-gap:24px;align-items:start}
.page-head.with-aside .ph-main{grid-area:main;min-width:0}
.ph-cover{grid-area:cover;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.ph-cover .cover.photo img{aspect-ratio:4/5;transform:scale(1.1)}
.ph-cover .cover:not(.photo){padding:16px 0}
.ph-nav{grid-area:nav;display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px;align-self:start}
.page-head.with-aside:not(:has(.ph-cover)) .ph-nav{grid-row:1 / span 2;margin-top:4px}
.ph-nav a,.ph-nav .hn-off{display:flex;align-items:center;gap:4px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;background:var(--bg)}
.ph-nav a:hover{border-color:var(--ink-3)}
.ph-nav .hn-next{flex-direction:row-reverse;text-align:right}
.ph-nav .hn-off{opacity:.35;justify-content:center}
/* flecha dibujada (no un carácter «‹ ›», que queda más alto que el texto): centrada con él en el recuadro */
.hn-arrow{font-size:0;width:6px;height:6px;flex:none;border-left:1.6px solid var(--vol);border-bottom:1.6px solid var(--vol);transform:rotate(45deg);margin:0 1px 0 3px}
.hn-next .hn-arrow{transform:rotate(-135deg);margin:0 3px 0 1px}
/* fuera del recorrido de volúmenes o números (portada, síntesis): gris oscuro, sin el color del volumen */
.ph-nav a.hn-neutral b{color:var(--ink-2)}
.ph-nav a.hn-neutral .hn-arrow{border-color:var(--ink-2)}
.hn-text{min-width:0;line-height:1.2}
.hn-text small{display:block;font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.04em;font-size:13px;color:var(--vol)}
.hn-text span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.ph-nav .hn-off{padding:2px 8px}
@media (max-width:600px){
  /* portada mayor y fija a la altura del título (debajo de las dos líneas de revista y volumen), para que no
     se mueva al pasar de un volumen o número a otro aunque cambie el largo del texto */
  .page-head.with-aside{grid-template-columns:minmax(0,1fr) 128px;grid-template-areas:"main cover" "nav nav";column-gap:16px}
  .page-head.with-aside .ph-cover{align-self:start;margin-top:50px}
  .page-head.with-aside:not(:has(.ph-cover)){grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "nav"}
  .page-head.with-aside:not(:has(.ph-cover)) .ph-nav{grid-row:auto;grid-column:1 / -1}
  .ph-nav{margin-top:12px;grid-template-columns:1fr 1fr}
}

/* menú: «Artículos» / «Textos» (desplegable) con la misma altura que Presentación, Conclusiones, etc. */
.drawer .m-sub .m-arts > summary{padding:8px 44px 8px 51px;line-height:1.25;gap:8px}

/* pestaña principal (Artículos / Textos / Texto completo): como las demás, en negrita y un punto más grande */
.tabs a.primary{font-weight:700;font-size:18px;color:var(--ink)}

/* cabecera de volumen o número: revista (enlace a su portada) en su línea; a la derecha, arriba, el paso
   compacto (Vol. 1 · Vol. 3, Intro, Concl.) y debajo la portada */
.ph-pub{display:block;text-decoration:none;color:var(--ink-2);margin-bottom:2px}
.ph-pub:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* volumen o número encima del artículo: enlace que, como la revista, se subraya al pasar el cursor */
.ph-vol{display:block;text-decoration:none}
.ph-vol:hover{text-decoration:underline;text-underline-offset:3px}
.page-head.vol-head{grid-template-areas:"main nav" "main cover";grid-template-rows:auto 1fr}
.vol-head .ph-nav{grid-template-columns:1fr 1fr;margin:0 0 8px}
.vol-head .ph-cover{margin-top:0}
/* volumen o número con portada (escritorio): la portada, algo menor, arriba a la derecha, y el paso al anterior y
   siguiente, en pequeño, en la columna del texto, bajo la línea «Edición»; así la cabecera no queda más alta que el texto */
@media (min-width:601px){
  .page-head.vol-head:has(.ph-cover){grid-template-columns:minmax(0,1fr) 168px;grid-template-areas:"main cover" "nav cover";grid-template-rows:auto 1fr}
  .vol-head:has(.ph-cover) .ph-nav{grid-template-columns:repeat(2,96px);justify-content:start;gap:6px;margin:14px 0 0}
  .vol-head:has(.ph-cover) .ph-cover{margin-top:24px} /* a la altura de la segunda línea («Volumen 1 · c. 2021») */
  .vol-head:has(.ph-cover) .ph-nav a.hn-short{padding:3px 4px;gap:4px;min-height:28px}
  .vol-head:has(.ph-cover) .ph-nav .hn-short b{font-size:13px}
}
.ph-nav a.hn-short{justify-content:center;gap:6px;padding:5px 8px;min-height:34px}
.ph-nav .hn-short b{font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.04em;font-weight:500;font-size:15px;line-height:1;color:var(--vol);display:block;padding-bottom:1px}
@media (max-width:600px){
  .page-head.vol-head{grid-template-areas:"main cover" "nav nav";grid-template-rows:auto auto}
  .vol-head .ph-nav{margin:12px 0 0}
}

/* menú: el volumen o número de la pantalla actual queda teñido de su color aunque esté plegado */
.drawer .m-vol.here > summary{background:color-mix(in srgb,var(--vol) 12%,transparent);box-shadow:inset 3px 0 0 var(--vol)}

/* síntesis de cada revista: tesis plegables (Tesis N + enunciado; el desarrollo, dentro) */
.card.thesis{padding:0}
.card.thesis > summary{list-style:none;cursor:pointer;position:relative;padding:14px 46px 14px 18px}
.card.thesis > summary::-webkit-details-marker{display:none}
/* flecha del desplegable centrada en vertical respecto al título */
.card.thesis > summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.card.thesis[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.card.thesis > summary h3{margin:4px 0 0}
.card.thesis .thesis-body{padding:0 18px 16px}
.card.thesis{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 64px)}

/* cabeceras: revista, volumen y número de artículo como un bloque compacto encima del título */
.ph-main > .eyebrow{display:block;line-height:1.3;margin:0}
.ph-main > .eyebrow + .eyebrow{margin-top:3px}
.ph-main > .eyebrow + h1{margin-top:8px}
.ph-art{font-weight:700;letter-spacing:.07em}

/* guía de un artículo: para distinguirla de la página del volumen, la cabecera lleva una franja en color
   pastel del volumen (a todo el ancho) y el resto de la página un gris algo más oscuro que el habitual */
body.art-page{--art-bg:color-mix(in srgb,var(--bg) 97.5%,#000);background:var(--art-bg)}
/* debajo de la franja, la barra de pestañas (fija al bajar) en un gris algo más oscuro que la página */
body.art-page .wrap[data-vol]{--band:color-mix(in srgb,var(--vol) 13%,var(--art-bg))}
.art-band{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);
  margin-top:-16px;padding-top:36px;padding-bottom:6px;margin-bottom:0}
body.art-page .tabs{--tabs-bg:color-mix(in srgb,var(--bg) 92%,#000);background:var(--tabs-bg);box-shadow:0 0 0 100vmax var(--tabs-bg);clip-path:inset(0 -100vmax);margin-top:0;margin-bottom:30px;border-bottom-color:transparent}
/* paso entre artículos: botones pequeños y más traslúcidos, que dejen ver el color de la franja */
.art-band .ph-nav a,.art-band .ph-nav .hn-off{background:color-mix(in srgb,var(--paper) 35%,transparent);border-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.art-band .ph-nav{grid-template-columns:repeat(2,96px);justify-content:end;gap:6px}
.art-band .ph-nav a.hn-short{padding:3px 4px;gap:4px;min-height:28px}
.art-band .ph-nav .hn-short b{font-size:13px}
@media (max-width:600px){.art-band .ph-nav{justify-content:start}}
/* «Añadir a Mi lista»: en pantallas anchas, bajo el autor; en el móvil, en una línea con el paso entre artículos
   (a la derecha y algo más estrechos) */
.ph-navrow{display:contents}
.ph-navrow > .ph-list{display:none}
@media (max-width:600px){
  .ph-main > .ph-list{display:none}
  .page-head.art-band .ph-navrow{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
  .ph-navrow > .ph-list{display:inline-flex;margin-top:0;flex:none}
  .page-head.art-band .ph-navrow .ph-nav{margin:0;grid-template-columns:repeat(2,64px);gap:4px;justify-content:end;align-self:center}
}

/* barras de pestañas desplazables: flecha fija en el borde derecho mientras quedan pestañas por ver */
.tabs{--tabs-bg:var(--bg)}
.sheet-body .tabs{--tabs-bg:var(--bg)}
.tabs-more{display:none;position:sticky;right:-10px;margin-left:auto;flex:none;align-self:stretch;border:0;cursor:pointer;
  padding:0 10px 4px 44px;margin-right:-10px;font:inherit;font-size:32px;font-weight:700;line-height:1;color:var(--vol);
  background:linear-gradient(to right,color-mix(in srgb,var(--tabs-bg) 0%,transparent),var(--tabs-bg) 60%)}
.tabs.more-right .tabs-more{display:block}
/* flecha izquierda: superpuesta a la primera pestaña visible (no la desplaza al aparecer).
   left/right -10px: compensan el relleno lateral de la barra para que las flechas lleguen al borde */
.tabs-less{display:none;position:sticky;left:-10px;z-index:1;flex:none;align-self:stretch;border:0;cursor:pointer;
  width:54px;margin:0 -54px 0 -10px;padding:0 30px 4px 10px;text-align:left;font:inherit;font-size:32px;font-weight:700;line-height:1;color:var(--vol);
  background:linear-gradient(to left,color-mix(in srgb,var(--tabs-bg) 0%,transparent),var(--tabs-bg) 45%)}
.tabs.more-left .tabs-less{display:block}
/* esquema ampliado desde «Mapas conceptuales»: volumen o número, artículo y título antes de la descripción */
.zoom-label{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
.zoom-label .zl-hi{color:var(--vol)}
.zoom-label .zl-au{font-weight:400;font-style:italic;color:var(--ink-3)} /* autor del artículo, como en la página */
.zoom-full.locked{opacity:.5;cursor:default} /* por ahora, solo versión detallada: no hace nada */
/* ventana de confirmación propia (sustituye al confirm() del navegador) */
dialog.confirm{width:min(420px,calc(100% - 32px));margin:auto;padding:22px 22px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);overflow:visible;animation:up .18s ease}
dialog.confirm h2{margin:0;font-size:23px;font-weight:400;line-height:1.2}
dialog.confirm p{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--ink-2)}
.confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.confirm-actions .btn{padding:10px 18px;font-size:16px}
.btn.danger{background:#a3261d;color:#fff}
@media (max-width:420px){.confirm-actions .btn{flex:1}}
/* Acerca de › Instalar y usar sin conexión: botón centrado; tick verde si ya está instalada */
.install-area{margin-top:14px}
.install-area #install-app{display:flex;margin:0 auto}
.install-area #install-app + p{text-align:center;margin:8px 0 0}
.install-ok{display:flex;align-items:baseline;gap:8px}
.install-ok .tick{color:#2e8b4f;font-weight:700;font-size:1.15em}
#instalar,#datos{scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 70px)}
.data-actions{display:flex;justify-content:center;gap:8px;margin-top:6px} /* los dos juntos, en una línea */
.data-actions .btn{margin:0;flex:0 1 auto;min-width:0;padding:12px 16px;white-space:nowrap}
@media (max-width:420px){.data-actions .btn{flex:1 1 0;padding:11px 10px;gap:6px;font-size:16px;letter-spacing:.02em}}

/* Mi lista de lectura (#/lista): botón de la cabecera de la guía y lista numerada (Pendientes / Leídos) */
.ph-list{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 13px 6px 11px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--paper) 45%,transparent);color:var(--ink);font-family:var(--f-body);font-size:15.5px;letter-spacing:.02em;line-height:1.2;cursor:pointer}
.ph-list:hover{border-color:var(--vol)}
.ph-list svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ph-list[aria-pressed="true"]{background:color-mix(in srgb,var(--vol) 20%,var(--paper));border-color:var(--vol)}
.ph-list[aria-pressed="true"] svg{stroke:var(--vol)}
.rl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-4px 0 4px}
.rl-bar .chip{padding:5px 12px;font-size:15.5px}
.rl-hint{margin:0 0 4px}
.rl{list-style:none;margin:0;padding:0}
.rl-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.rl-num{flex:none;align-self:center;min-width:34px;text-align:center;font-family:var(--f-sc);font-size:17px;font-weight:500;white-space:nowrap;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.rl-main{flex:1;min-width:0;color:inherit;text-decoration:none}
.rl-main h3{font-size:20px;margin:3px 0 2px}
.rl-main:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rl-main .progress-row{margin-top:8px}
.rl-sum{margin:6px 0 0;color:var(--ink-2);line-height:1.4;text-align:left;hyphens:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rl-when{font-family:var(--f-sc);text-transform:lowercase;letter-spacing:.03em;font-size:14.5px;color:var(--ink-3);margin-top:6px}
.rl-actions{display:flex;flex:none;margin:-4px -8px 0 0}
.rl-actions .icon-btn{width:40px;height:40px}
.rl-actions .icon-btn[disabled]{opacity:.3;cursor:default;background:none}
.rl .rl-move{display:none}
.rl.reorder .rl-move{display:inline-grid}
.rl.reorder .rl-del{display:none}
.rl.reorder .rl-item{background:color-mix(in srgb,var(--vol) 5%,transparent);border-radius:6px;padding-left:8px;padding-right:4px;border-bottom-color:transparent;margin-top:4px}
@media (max-width:420px){.rl-actions{flex-direction:column;margin-right:-10px}}

/* ---------- al tocar: sin el recuadro azul de Chrome en Android; en su lugar, un leve oscurecido y encogido que
   respeta la forma de cada elemento (círculos, botones redondeados, pestañas, tarjetas) ---------- */
html{-webkit-tap-highlight-color:transparent}
:where(button,.btn,.chip,.icon-btn,.bar-btn,.tabs a,.m-link,.m-art-title,.m-art-read,summary,.card.tool,.ph-list,.ph-nav a,
  .hl-sw,.lg-dot,.lg-pal,.lg-del,.lg-more,.hl-pop-marks,.zoom-full,.zoom-pos,label.lg-show){transition:transform .08s ease,filter .08s ease}
:where(button,.btn,.chip,.icon-btn,.bar-btn,.tabs a,.m-link,.m-art-title,.m-art-read,.ph-list,.ph-nav a,
  .hl-sw,.lg-dot,.lg-pal,.lg-del,.lg-more,.hl-pop-marks,.zoom-full,.zoom-pos):active:not(:disabled){transform:scale(.95);filter:brightness(.9)}
/* las tarjetas y desplegables grandes, apenas: que no «salte» toda la fila */
:where(.card.tool,a.card,summary):active{transform:scale(.985);filter:brightness(.96)}
/* los enlaces dentro del texto: solo se atenúan */
:where(p,li,.sub,.muted) a:active{opacity:.6}