/* Cuaderno de mates: papel cuadriculado, tinta azul y un color de rotulador por módulo */
:root {
  --paper: #F3F5FB; --card: #FFFFFF; --ink: #141C33; --ink2: #47516B; --line: #D3DAEA; --grid: #E4E9F4;
  --acc: #2740D8; --acc-ink: #FFFFFF; --soft: #EBEFFA;
  --h1: #FFDDDD; --h2: #D9E4FF; --h3: #D3F4E5; --h4: #FFEDBD;
  --good: #0B7A55; --bad: #BE2B35; --warnc: #A35A00;
  --on-m: #FFFFFF;
  --m1: #D7373F; --m2: #C2540A; --m3: #0B8A5F; --m4: #0B7A8F; --m5: #2F4CDD; --m6: #7A3FD1; --m7: #C42A7A; --m8: #5B7B12;
  --shadow: 0 1px 0 rgba(20,28,51,.05), 0 8px 24px -12px rgba(20,28,51,.18);
  --f-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-math: 'STIX Two Text', 'Cambria Math', Georgia, 'Times New Roman', serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1428; --card: #161E3A; --ink: #EAEEFC; --ink2: #A5B0D2; --line: #2B3558; --grid: #151D38;
    --acc: #8EA0FF; --acc-ink: #0E1428; --soft: #1B2547;
    --h1: #5A2A33; --h2: #2B3C7C; --h3: #1D5444; --h4: #5E4B17;
    --good: #5CE0B0; --bad: #FF8A91; --warnc: #FFB454;
    --on-m: #0E1428;
    --m1: #FF7A80; --m2: #FFA24D; --m3: #3DD6A0; --m4: #4CCBE0; --m5: #8EA0FF; --m6: #B58CFF; --m7: #FF7FC0; --m8: #B6D84B;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1428; --card: #161E3A; --ink: #EAEEFC; --ink2: #A5B0D2; --line: #2B3558; --grid: #151D38;
  --acc: #8EA0FF; --acc-ink: #0E1428; --soft: #1B2547;
  --h1: #5A2A33; --h2: #2B3C7C; --h3: #1D5444; --h4: #5E4B17;
  --good: #5CE0B0; --bad: #FF8A91; --warnc: #FFB454;
  --on-m: #0E1428;
  --m1: #FF7A80; --m2: #FFA24D; --m3: #3DD6A0; --m4: #4CCBE0; --m5: #8EA0FF; --m6: #B58CFF; --m7: #FF7FC0; --m8: #B6D84B;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background-color: var(--paper); color: var(--ink);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  font-family: var(--f-body); font-size: 17px; line-height: 1.6; font-weight: 450;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--card); }
img, svg { max-width: 100%; }
a { color: var(--acc); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 .9em; max-width: 68ch; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; max-width: 68ch; }
strong { font-weight: 700; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- matemáticas ---------- */
.m { font-family: var(--f-math); font-size: 1.1em; font-weight: 400; letter-spacing: .01em; }
.m i { font-style: italic; }
sup { font-size: .68em; line-height: 0; vertical-align: .55em; }
sub { font-size: .68em; line-height: 0; }
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.15; margin: 0 .15em; font-size: .92em; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .25em .06em; }
.fr > span:last-child { padding: .06em .25em 0; }
.hl { border-radius: 5px; padding: 0 .22em; color: var(--ink); }
.hl.h1 { background: var(--h1); } .hl.h2 { background: var(--h2); } .hl.h3 { background: var(--h3); } .hl.h4 { background: var(--h4); }
.big-eq { font-size: 1.35rem; margin: .4rem 0 1.1rem; padding: .7rem 1rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; display: inline-block; max-width: 100%; overflow-x: auto; }
.chk { padding: .6rem .9rem; background: var(--h3); border-radius: 10px; display: inline-block; max-width: 100%; }

/* ---------- barra superior ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--card); border-bottom: 1.5px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-block: 10px; }
.brand { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: .35em; margin-right: auto; }
.brand .m { color: var(--acc); font-size: 1.15em; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--ink2); font-weight: 600; font-size: .95rem; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--card); }

/* ---------- cabecera de página ---------- */
.pagehead { padding-block: 34px 18px; }
.crumbs { font-size: .9rem; color: var(--ink2); margin-bottom: 10px; font-weight: 600; }
.crumbs a { color: var(--ink2); }
.lead { font-size: 1.15rem; color: var(--ink2); max-width: 60ch; margin-top: 12px; }

/* ---------- portada ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding-block: 44px 28px; }
.hero h1 .m { color: var(--acc); font-weight: 400; font-style: italic; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn { appearance: none; border: 2px solid var(--ink); background: var(--ink); color: var(--card); font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 12px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.acc { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.plot { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); }
.plot svg { display: block; width: 100%; height: auto; }
.plot .ax { stroke: var(--ink2); stroke-width: 1.4; }
.plot .gr { stroke: var(--grid); stroke-width: 1; }
.plot .cv { fill: none; stroke: var(--acc); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.plot .rt { fill: var(--m1); stroke: var(--card); stroke-width: 2.5; }
.plot text { fill: var(--ink); font-family: var(--f-math); font-size: 15px; }
.plot .cap { font-family: var(--f-body); font-size: 12.5px; fill: var(--ink2); }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 8px; padding: 0; list-style: none; max-width: none; counter-reset: how; }
.how li { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; counter-increment: how; }
.how li::before { content: counter(how); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card); font-family: var(--f-display); font-weight: 800; margin-bottom: 8px; }
.how b { display: block; font-family: var(--f-display); font-size: 1.1rem; }
.how span { color: var(--ink2); font-size: .95rem; }
.sec-title { margin: 34px 0 14px; }
.mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.modcard:hover { border-color: var(--ink2); transform: translateY(-1px); }
.modcard .num { grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; background: var(--mc); color: var(--on-m); }
.modcard h3 { font-size: 1.12rem; }
.modcard .sub { color: var(--ink2); font-size: .93rem; line-height: 1.4; }
.modcard .status { font-size: .85rem; font-weight: 700; color: var(--ink2); }
.status.done { color: var(--good); }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; text-decoration: none; color: var(--ink); display: block; }
.tool:hover { border-color: var(--ink2); }
.tool b { font-family: var(--f-display); font-size: 1.2rem; display: block; margin-bottom: 4px; }
.tool span { color: var(--ink2); font-size: .95rem; line-height: 1.45; display: block; }
.foot { margin-top: 56px; padding-block: 26px 40px; border-top: 1.5px solid var(--line); color: var(--ink2); font-size: .92rem; background: var(--card); }
.foot p { margin: 0 0 .4em; }

/* ---------- módulo ---------- */
.mod-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.mod-num { width: 76px; height: 76px; border-radius: 20px; background: var(--mc); color: var(--on-m); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 2.8rem; grid-row: 1 / span 2; }
.mod-head .lead { margin: 0; }
.modstrip { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 4px; padding: 0; list-style: none; max-width: none; }
.modstrip a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--f-display); font-weight: 800; text-decoration: none; }
.modstrip a:hover { border-color: var(--mc); }
.modstrip a[aria-current="page"] { background: var(--mc); border-color: var(--mc); color: var(--on-m); }
.goals { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 22px 0 0; }
.goals h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin-bottom: 8px; }
.goals ul { margin: 0; padding-left: 1.2em; }
.mod-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 26px; }
.prose { min-width: 0; }
.toc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0; }
.toc a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink2); font-weight: 600; font-size: .9rem; }
.toc a:hover { border-color: var(--mc); color: var(--ink); }
.toc .toc-t { display: none; }
.prose section { margin-bottom: 40px; scroll-margin-top: 90px; }
.prose h2 { margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
.prose h2::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--mc); transform: translateY(1px); }
.modnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.modnav a { display: block; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 18px; text-decoration: none; color: var(--ink); }
.modnav a:hover { border-color: var(--ink2); }
.modnav small { display: block; color: var(--ink2); font-weight: 600; }
.modnav b { font-family: var(--f-display); }
.modnav .next { text-align: right; grid-column: 2; }
.todo { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--ink); color: var(--card); border-radius: 16px; padding: 18px 22px; margin-top: 12px; }
.todo b { font-family: var(--f-display); font-size: 1.15rem; }
.todo .btn { background: var(--card); color: var(--ink); border-color: var(--card); }

/* ---------- componentes ---------- */
.callout { display: grid; gap: 4px; padding: 14px 18px 14px; border-radius: 14px; margin: 16px 0; max-width: 72ch; }
.callout .ctag { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.callout p:last-child { margin-bottom: 0; }
.callout.idea { background: var(--h2); } .callout.warn { background: var(--h1); } .callout.tip { background: var(--h3); }
.callout.idea .ctag { color: var(--acc); } .callout.warn .ctag { color: var(--bad); } .callout.tip .ctag { color: var(--good); }
.callout { color: var(--ink); }
.steps { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 10px; margin: 14px 0 18px; }
.steps > li { counter-increment: st; position: relative; padding: 12px 16px 12px 56px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; max-width: 72ch; min-width: 0; overflow-wrap: anywhere; }
.steps > li::before { content: counter(st); position: absolute; left: 14px; top: 11px; width: 29px; height: 29px; border-radius: 50%; background: var(--mc, var(--ink)); color: var(--on-m); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: .95rem; }
.steps .tbl-wrap, .steps .ruf-wrap, .steps .ldiv { margin-top: 8px; }
.mini { margin: 6px 0 0; padding-left: 1.1em; }
.mini li { margin: 2px 0; }
.bl { padding-left: 1.2em; }
.bl li { margin-bottom: .45em; }
.bl li::marker { color: var(--mc, var(--acc)); }
.tbl-wrap { overflow-x: auto; max-width: 100%; margin: 12px 0 16px; border-radius: 12px; }
.tbl { border-collapse: collapse; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; min-width: 100%; }
.tbl th, .tbl td { padding: 8px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl th { background: var(--soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.tbl.center td, .tbl.center th { text-align: center; }
.tbl tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.chip.yes { background: var(--h3); color: var(--good); } .chip.no { background: var(--h1); color: var(--bad); }
.wr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.wr > div { padding: 12px 14px; border-radius: 12px; min-width: 0; overflow-wrap: anywhere; }
.wr-bad { background: var(--h1); } .wr-ok { background: var(--h3); }
.wr-tag { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.wr-bad .wr-tag { color: var(--bad); } .wr-ok .wr-tag { color: var(--good); }
.wr-why { grid-column: 1 / -1; margin: 0; color: var(--ink2); font-size: .95rem; max-width: none; }
.quick { border: 2px dashed var(--mc, var(--ink2)); border-radius: 16px; padding: 14px 18px; margin: 16px 0; background: var(--card); }
.qtag { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mc, var(--acc)); display: block; margin-bottom: 4px; }
details.sol { margin-top: 8px; }
details.sol > summary { cursor: pointer; font-weight: 700; color: var(--acc); padding: 6px 0; list-style: none; }
details.sol > summary::before { content: "\25B8\00a0"; }
details.sol[open] > summary::before { content: "\25BE\00a0"; }
details.sol > summary::-webkit-details-marker { display: none; }
.sol-body { padding-top: 6px; }
.ans { background: var(--h4); padding: 8px 14px; border-radius: 10px; display: inline-block; max-width: 100%; margin: 6px 0 0; }

/* anatomía del monomio */
.anat { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; margin: 16px 0; max-width: 560px; }
.anat-big { font-size: clamp(2.6rem, 9vw, 4rem); display: flex; justify-content: center; align-items: baseline; gap: .04em; line-height: 1.1; }
.anat-big span, .anat-big sup { padding: 0 .1em; border-radius: 8px; }
.anat-big sup { font-size: .5em; vertical-align: baseline; position: relative; top: -.95em; line-height: 0; }
.anat-lab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; text-align: center; font-size: .85rem; font-weight: 700; line-height: 1.25; }
.anat-lab span { padding: 6px 4px; border-radius: 8px; }
.a1 { background: var(--h1); } .a2 { background: var(--h4); } .a3 { background: var(--h2); } .a4 { background: var(--h3); }

/* tablas por grado */
.coltbl { border-collapse: separate; border-spacing: 4px; }
.coltbl th, .coltbl td { padding: 8px 14px; text-align: center; border-radius: 8px; min-width: 56px; font-variant-numeric: tabular-nums; }
.coltbl th.lab { text-align: left; background: transparent; font-weight: 700; white-space: nowrap; }
.coltbl thead th { background: transparent; color: var(--ink2); font-family: var(--f-math); }
.coltbl .d0 { background: var(--h1); } .coltbl .d1 { background: var(--h2); } .coltbl .d2 { background: var(--h3); } .coltbl .d3 { background: var(--h4); }
.coltbl thead .d0, .coltbl thead .d1, .coltbl thead .d2, .coltbl thead .d3 { background: transparent; }
.coltbl tr.res td { font-weight: 800; outline: 2px solid var(--ink); outline-offset: -2px; }
.coltbl tr.flip td { color: var(--bad); font-weight: 800; }
.box { border-collapse: separate; border-spacing: 5px; background: transparent; }
.box th { padding: 8px 14px; text-align: center; background: var(--soft); border-radius: 8px; font-weight: 400; }
.box th.corner { background: transparent; color: var(--ink2); }
.box td { padding: 8px 14px; text-align: center; border-radius: 8px; min-width: 70px; }
.box .d0 { background: var(--h1); } .box .d1 { background: var(--h2); } .box .d2 { background: var(--h3); } .box .d3 { background: var(--h4); }

/* figura cuadrado */
.fig { margin: 14px 0 18px; }
.fig svg { width: min(100%, 320px); height: auto; display: block; }
.fig figcaption { color: var(--ink2); font-size: .92rem; margin-top: 6px; max-width: 56ch; }
.sq-a2 { fill: var(--h2); stroke: var(--ink2); stroke-width: 1.5; }
.sq-ab { fill: var(--h4); stroke: var(--ink2); stroke-width: 1.5; }
.sq-b2 { fill: var(--h1); stroke: var(--ink2); stroke-width: 1.5; }
.sq-t { fill: var(--ink); font-family: var(--f-math); }
.sq-t.big { font-size: 30px; }
.sq-d { fill: var(--ink2); font-family: var(--f-math); font-size: 22px; }

/* división larga */
.ldiv { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; align-items: start; margin: 12px 0 14px; }
.ld-wrap { overflow-x: auto; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; min-width: 0; }
.ldiv-t { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ldiv-t th, .ldiv-t td { padding: 6px 10px; text-align: right; min-width: 52px; }
.ldiv-t thead th { color: var(--ink2); font-family: var(--f-math); font-weight: 400; border-bottom: 1.5px solid var(--line); }
.ldiv-t th.lab { text-align: left; font-weight: 600; font-size: .85rem; color: var(--ink2); white-space: nowrap; padding-right: 16px; }
.ldiv-t tr.sub td { color: var(--bad); font-weight: 700; }
.ldiv-t tr.rest td { border-top: 2px solid var(--ink); font-weight: 700; }
.ldiv-t tr.rest:last-child td { background: var(--h4); }
.ldiv-t tr.dd td { background: var(--soft); font-weight: 700; }
.ld-side { display: grid; gap: 8px; }
.ld-box { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; overflow-x: auto; min-width: 0; }
.ld-box.q { background: var(--h3); border-color: transparent; } .ld-box.r { background: var(--h4); border-color: transparent; }
.ld-cap { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.rounds { padding-left: 1.2em; }
.rounds li { margin-bottom: .6em; }

/* Ruffini */
.ruf-wrap { overflow-x: auto; margin: 10px 0 14px; max-width: 100%; }
.ruf { border-collapse: collapse; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--f-math); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ruf td { padding: 8px 16px; text-align: center; min-width: 56px; height: 46px; }
.ruf td.a { border-right: 2.5px solid var(--ink); font-weight: 700; color: var(--acc); }
.ruf td.p { color: var(--ink2); }
.ruf tr.res td { border-top: 2.5px solid var(--ink); font-weight: 700; }
.ruf td.rq { background: var(--h3); }
.ruf td.rr { background: var(--h4); outline: 2px solid var(--ink); outline-offset: -2px; }
.ruf td.hid { visibility: hidden; }
.ruf td.cur { background: var(--acc); color: var(--acc-ink); }
.rstep { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; max-width: 720px; }
.rs-form { display: grid; gap: 6px; max-width: 420px; }
.rs-form label { font-weight: 600; font-size: .92rem; color: var(--ink2); margin-top: 6px; }
.rs-form input { font: inherit; font-family: var(--f-math); font-size: 1.15rem; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.rs-form .btn { margin-top: 10px; justify-self: start; }
.rs-err { color: var(--bad); font-weight: 700; margin: 10px 0 0; }
.rs-msg { min-height: 3.2em; padding: 10px 14px; background: var(--h2); border-radius: 10px; margin: 8px 0 12px; }
.rs-ctl { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- ejercicios ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.fchip { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.progress { height: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; max-width: 420px; }
.progress > i { display: block; height: 100%; background: var(--good); width: 0; transition: width .3s; }
.pg-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-weight: 700; color: var(--ink2); }
.exmod { margin-top: 36px; scroll-margin-top: 90px; }
.exmod h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.exmod h2 .num { width: 40px; height: 40px; border-radius: 10px; background: var(--mc); color: var(--on-m); display: grid; place-items: center; font-weight: 800; }
.exmod h2 a { font-size: .9rem; font-family: var(--f-body); font-weight: 600; margin-left: auto; }
.ex { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-top: 14px; scroll-margin-top: 90px; --mc: inherit; }
.ex-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ex-id { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; }
.lvl { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--ink2); }
.lvl.l2 { background: var(--h4); color: var(--ink); } .lvl.l3 { background: var(--h1); color: var(--ink); }
.ex-done { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: .92rem; cursor: pointer; }
.ex-done input { width: 20px; height: 20px; accent-color: var(--good); }
.ex-prompt { margin-bottom: 4px; }

/* ---------- quiz ---------- */
.qz { max-width: 760px; }
.qz-setup { display: grid; gap: 12px; }
.qz-opt { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; appearance: none; font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 14px 18px; cursor: pointer; }
.qz-opt:hover { border-color: var(--ink2); }
.qz-opt b { font-family: var(--f-display); font-size: 1.1rem; display: block; }
.qz-opt span { color: var(--ink2); font-size: .93rem; }
.qz-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qz-blk { appearance: none; font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.qz-blk:hover { border-color: var(--mc); }
.qz-blk i { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 8px; background: var(--mc); color: var(--on-m); display: grid; place-items: center; font-style: normal; font-weight: 800; font-family: var(--f-display); }
.qz-blk b { font-size: .95rem; line-height: 1.25; } .qz-blk small { color: var(--ink2); font-weight: 600; }
.qz-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 700; color: var(--ink2); }
.qz-bar .progress { flex: 1; max-width: none; }
.qz-bar .progress > i { background: var(--acc); }
.qz-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); }
.qz-mod { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--mc); color: var(--on-m); font-weight: 800; font-size: .82rem; margin-bottom: 8px; }
.qz-q { font-size: 1.2rem; font-weight: 600; margin-bottom: 14px; max-width: none; }
.qz-answers { display: grid; gap: 10px; }
.qz-a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; appearance: none; font: inherit; color: var(--ink); text-align: left; background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.qz-a:hover:not(:disabled) { border-color: var(--acc); }
.qz-a .ltr { width: 28px; height: 28px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.qz-a:disabled { cursor: default; }
.qz-a.ok { border-color: var(--good); background: var(--h3); }
.qz-a.bad { border-color: var(--bad); background: var(--h1); }
.qz-a.dim { opacity: .65; }
.qz-fb { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--soft); }
.qz-fb strong.ok { color: var(--good); } .qz-fb strong.bad { color: var(--bad); }
.qz-next { margin-top: 14px; display: flex; justify-content: flex-end; }
.res-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 24px; }
.res-score { font-family: var(--f-display); font-weight: 800; font-size: 3.2rem; line-height: 1; }
.res-score small { font-size: 1.2rem; color: var(--ink2); }
.bars { display: grid; gap: 8px; margin: 14px 0 6px; }
.bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.bar > i { width: 30px; height: 30px; border-radius: 8px; background: var(--mc); color: var(--on-m); display: grid; place-items: center; font-style: normal; font-weight: 800; font-family: var(--f-display); }
.bar .tr { height: 12px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.bar .tr > b { display: block; height: 100%; background: var(--mc); border-radius: 999px; }
.bar small { font-weight: 800; white-space: nowrap; }
.bar .lab { font-weight: 600; font-size: .92rem; margin-bottom: 3px; line-height: 1.25; }
.badge { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; }
.badge.hi { background: var(--h1); color: var(--bad); } .badge.mid { background: var(--h4); color: var(--warnc); } .badge.ok { background: var(--h3); color: var(--good); }
.plan { display: grid; gap: 14px; margin-top: 12px; }
.session { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 20px; }
.session h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.session ol { margin: 0; padding-left: 1.2em; }
.session li { margin-bottom: .5em; }
.watch { padding-left: 1.2em; }
.watch li { margin-bottom: .4em; }
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- hoja de consulta ---------- */
.sheet-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 14px 0 22px; }
.sheet { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.sheet-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sheet-title b { font-family: var(--f-display); font-size: 1.3rem; }
.sheet-title span { color: var(--ink2); font-size: .85rem; font-weight: 600; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 11px 9px; font-size: .92rem; line-height: 1.38; break-inside: avoid; min-width: 0; overflow-wrap: anywhere; background: var(--card); }
.sc.wide { grid-column: 1 / -1; }
.sc h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 1rem; }
.sc h4 i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; background: var(--mc); color: var(--on-m); display: grid; place-items: center; font-size: .8rem; flex: none; }
.sc p { margin: 0 0 3px; max-width: none; }
.sc ul { margin: 2px 0 3px; padding-left: 1.1em; } .sc li { margin: 0; }
.sc .eq { display: block; margin: 2px 0; padding: 2px 8px; background: var(--soft); border-radius: 6px; width: fit-content; max-width: 100%; }
.sc .err { color: var(--bad); font-weight: 700; }
.sc .okc { color: var(--good); font-weight: 700; }
.sc table.mt { border-collapse: collapse; margin: 3px 0; font-size: .95em; }
.sc table.mt td, .sc table.mt th { padding: 1px 8px; border: 1px solid var(--line); text-align: center; }
.sc .ruf { font-size: 1rem; } .sc .ruf td { padding: 3px 10px; height: auto; min-width: 38px; }
.sc .ruf-wrap { margin: 3px 0; }
.print-note { color: var(--ink2); font-size: .92rem; }

@media (min-width: 920px) {
  .mod-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 44px; }
  .toc { flex-direction: column; overflow: visible; position: sticky; top: 84px; align-self: start; gap: 4px; }
  .toc .toc-t { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
  .toc a { border: 0; background: transparent; border-radius: 8px; white-space: normal; padding: 5px 10px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .how, .tools { grid-template-columns: minmax(0, 1fr); }
  .mods { grid-template-columns: minmax(0, 1fr); }
  .ldiv { grid-template-columns: minmax(0, 1fr); }
  .ld-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wr { grid-template-columns: minmax(0, 1fr); }
  .ld-side { grid-template-columns: minmax(0, 1fr); }
  .mod-num { width: 58px; height: 58px; font-size: 2.1rem; border-radius: 16px; }
  .nav a { padding: 5px 9px; font-size: .88rem; }
  .steps > li { padding-left: 50px; }
  .modnav { grid-template-columns: minmax(0, 1fr); }
  .modnav .next { grid-column: auto; }
  .anat-lab { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .btn:hover, .modcard:hover { transform: none; } }

/* ---------- impresión (hoja de consulta en A4) ---------- */
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --paper: #fff; --card: #fff; --ink: #141C33; --ink2: #47516B; --line: #C9D0E2; --grid: #fff; --soft: #EEF1FA;
    --h1: #FFDDDD; --h2: #D9E4FF; --h3: #D3F4E5; --h4: #FFEDBD; --acc: #2740D8; --good: #0B7A55; --bad: #BE2B35; --warnc: #A35A00; --on-m: #fff;
    --m1: #D7373F; --m2: #C2540A; --m3: #0B8A5F; --m4: #0B7A8F; --m5: #2F4CDD; --m6: #7A3FD1; --m7: #C42A7A; --m8: #5B7B12;
    color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; font-size: 9.2pt; line-height: 1.3; }
  body::before, .topbar, .foot, .no-print, .sheet-tools { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .pagehead { padding: 0 0 2mm; }
  .sheet { border: 0; padding: 0; margin: 0; border-radius: 0; break-after: page; }
  .sheet:last-of-type { break-after: auto; }
  .sheet-title b { font-size: 14pt; }
  .sgrid { gap: 3.4mm; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sc { padding: 2.6mm 3.4mm; font-size: 10.6pt; line-height: 1.4; }
  .sc h4 { font-size: 12pt; margin-bottom: 2mm; }
  .sc .ruf { font-size: 12pt; } .sc .ruf td { padding: 4px 12px; }
  .sheet-title b { font-size: 17pt; }
}

/* ---- Biologia: diagrames ---- */
.dgm { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; margin: 18px 0 22px; box-shadow: var(--shadow); }
.dgm svg { display: block; width: 100%; height: auto; max-width: 620px; margin: 0 auto; }
.dgm figcaption { color: var(--ink2); font-size: .92rem; margin-top: 10px; }
.dg text { fill: var(--ink); font-family: var(--f-body); font-size: 13px; }
.dg .s { fill: var(--ink2); font-size: 12px; }
.dg .b { font-weight: 700; }
.dg .big { font-size: 22px; }
.dg .w { fill: #fff; }
.dg .hl, .dg tspan.hl { fill: var(--bad); }
.dg .num { font-size: 10.5px; }
.dg .ln { stroke: var(--ink2); stroke-width: 1.8; fill: none; }
.dg .dash { stroke-dasharray: 5 4; }
.dg .lnk { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.dg .lnk.thick { stroke-width: 4.5; }
.dg .lnk.bond { stroke: var(--bad); stroke-width: 2.6; }
.dg .arh { fill: var(--ink2); }
.dg .big { stroke-width: 4; }
.dg line.big { stroke: var(--mc); stroke-width: 5; }
.dg .arrowbig { fill: var(--mc); }
.dg .bx { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.dg .bg { fill: var(--card); }
.dg .tint { fill: var(--mc); fill-opacity: .14; stroke: var(--mc); stroke-width: 1.6; }
.dg .gr { stroke: var(--grid); stroke-width: 1; }
.dg .cv { fill: none; stroke: var(--mc); stroke-width: 3; stroke-linejoin: round; }
.dg .pt { fill: var(--mc); stroke: var(--card); stroke-width: 2; }
.dg .mark { fill: none; stroke: var(--bad); stroke-width: 2.4; }
.dg .bar.p { fill: var(--m2); } .dg .bar.s { fill: var(--m4); } .dg .bar.o { fill: var(--m6); }
.dg .atO { fill: #D7373F; } .dg .atH { fill: var(--card); stroke: var(--ink2); stroke-width: 1.5; } .dg .atC { fill: #3A4562; }
.dg .hb { stroke: var(--mc); stroke-width: 2.2; stroke-dasharray: 4 3; }
.dg .dl { fill: #D7373F; } .dg .dp { fill: #2F4CDD; }
.dg .memb { stroke: var(--ink2); stroke-width: 3; stroke-dasharray: 10 6; }
.dg .sol { fill: var(--m2); } .dg .wat { fill: #2F86D9; }
.dg .cell { fill: #F7B7B9; stroke: #C2414A; stroke-width: 1.8; }
.dg .wall { fill: none; stroke: #5B7B12; stroke-width: 5; }
.dg .vac { fill: #BFE3FF; stroke: #2F86D9; stroke-width: 1.2; }
.dg .tail { fill: none; stroke: var(--m2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.dg .tail.thin { stroke-width: 1.8; }
.dg .head { fill: var(--m4); stroke: var(--card); stroke-width: 1; }
.dg .grpN { fill: var(--m5); fill-opacity: .2; stroke: var(--m5); } .dg .grpC { fill: var(--m1); fill-opacity: .2; stroke: var(--m1); } .dg .grpR { fill: var(--m3); fill-opacity: .2; stroke: var(--m3); }
.dg .pb { fill: var(--bad); fill-opacity: .15; stroke: var(--bad); stroke-width: 1.6; }
.dg .bead.k0 { fill: var(--m1); } .dg .bead.k1 { fill: var(--m3); } .dg .bead.k2 { fill: var(--m5); } .dg .bead.k3 { fill: var(--m2); }
.dg .sub.k0 { fill: var(--m1); fill-opacity: .7; } .dg .sub.k1 { fill: var(--m3); fill-opacity: .7; } .dg .sub.k2 { fill: var(--m5); fill-opacity: .7; } .dg .sub.k3 { fill: var(--m2); fill-opacity: .7; }
.dg .helix { fill: none; stroke: var(--mc); stroke-width: 3.4; stroke-linecap: round; }
.dg .phos { fill: #F2B54A; stroke: #A35A00; stroke-width: 1.5; } .dg .phos.sm { stroke-width: 1; }
.dg .sugar { fill: #FFD9E8; stroke: #C42A7A; stroke-width: 1.6; }
.dg .base { fill: var(--m5); fill-opacity: .18; stroke: var(--m5); stroke-width: 1.6; }
.dg .brace { fill: none; stroke: var(--ink2); stroke-width: 1.4; }
.dg .backbone { stroke: #C42A7A; stroke-width: 6; stroke-linecap: round; }
.dg .pur { fill: var(--m5); fill-opacity: .28; stroke: var(--m5); stroke-width: 1.4; } .dg .pyr { fill: var(--m3); fill-opacity: .28; stroke: var(--m3); stroke-width: 1.4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg .atC { fill: #8A96B8; } :root:not([data-theme="light"]) .dg .cell { fill: #6B2E36; stroke: #FF8A91; } :root:not([data-theme="light"]) .dg .vac { fill: #1E4466; } :root:not([data-theme="light"]) .dg .sugar { fill: #5A2442; } :root:not([data-theme="light"]) .dg .phos { fill: #8A5A10; stroke: #FFB454; } :root:not([data-theme="light"]) .dg .wall { stroke: #B6D84B; } }
:root[data-theme="dark"] .dg .atC { fill: #8A96B8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg .dp { fill: #8EA0FF; } :root:not([data-theme="light"]) .dg .dl { fill: #FF8A91; } }
.ladder { list-style: none; counter-reset: lv; padding: 0; margin: 16px 0; display: grid; gap: 6px; }
.ladder li { counter-increment: lv; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: baseline; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ladder li::before { content: counter(lv); grid-row: span 2; font-family: var(--f-display); font-weight: 800; color: var(--mc); font-size: 1.2rem; }
.ladder li span { color: var(--ink2); font-size: .92rem; }
.ladder li.vida { border-color: var(--mc); background: var(--soft); }
.ord-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.prose h3 { font-family: var(--f-display); margin: 26px 0 6px; }
.hero h1 .m { font-family: var(--f-display); font-style: normal; font-weight: 800; }
.plot .hz text { fill: var(--ink); font-family: var(--f-body); font-size: 15px; }
.plot .hz .s { fill: var(--ink2); font-size: 13.5px; }
.plot .hz .b { font-weight: 700; }