/* Mismo estilo que la web del máster (grabia/infra/study/static/app.css?v=a85f4e1c21); añade --c-rite y --c-rebt. */
:root {
  --paper: #eef2f4; --sheet: #ffffff; --ink: #17212b; --muted: #55626e; --rule: #d5dde3;
  --accent: #0b6b78; --accent-ink: #ffffff; --today: #e3f1f2; --warn: #fff4e0; --warn-ink: #7a4a00; --done: #2f7a3d;
  --c-rite: #c0501f; --c-rebt: #2952a3; --c-a19: #2952a3; --c-a5: #6a3fa0; --c-a13: #85500a; --c-a6: #a53a5a; --c-a8: #2f7a3d; --c-a3: #1f6f8b; --c-a7: #7a5c00;
  --c-a9: #8a3b12; --c-a10: #3b5b2a; --c-a4: #5b4a8a; --c-tfm: #4a5866; --c-misc: #4a5866;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f161c; --sheet: #172129; --ink: #e6edf1; --muted: #9aa8b3; --rule: #2a3742;
    --accent: #4fc0c9; --accent-ink: #062226; --today: #16323a; --warn: #33270f; --warn-ink: #f3c879; --done: #86cf91;
    --c-rite: #f2a27a; --c-rebt: #8fb0ff; --c-a19: #8fb0ff; --c-a5: #c3a2f2; --c-a13: #f0b45a; --c-a6: #f08fae; --c-a8: #86cf91; --c-a3: #7fd0ea; --c-a7: #e8c96a;
    --c-a9: #f2a27a; --c-a10: #a9d38e; --c-a4: #b9a8f0; --c-tfm: #a9b6c2; --c-misc: #a9b6c2;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
.bar { position: sticky; top: 0; z-index: 20; background: var(--ink); color: var(--paper); padding-top: env(safe-area-inset-top, 0px); }
.bar-in { max-width: 820px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { font: 800 18px var(--display); color: var(--paper); text-decoration: none; }
.bar nav { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { flex: none; color: var(--paper); opacity: .8; text-decoration: none; font-weight: 700; font-size: 14px; padding: 6px 0; border-bottom: 2px solid transparent; }
.bar nav a[aria-current="page"] { opacity: 1; border-color: var(--paper); }
.wrap { max-width: 820px; margin: 0 auto; padding-block: var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 46px); z-index: 10; background: var(--paper); padding-block: var(--s2); border-bottom: 1px solid var(--rule); }
.weeks { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.weeks::-webkit-scrollbar { display: none; }
.chip { flex: none; display: grid; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 10px; padding: 6px 10px; font: 500 13px var(--mono); text-decoration: none; }
.chip small { font: 400 11px var(--body); color: var(--muted); }
.chip[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-current="page"] small { color: var(--paper); }
.head { display: grid; gap: var(--s2); }
.eyebrow { margin: 0; font: 500 12px var(--mono); color: var(--muted); letter-spacing: .02em; }
h1 { margin: 0; font: 800 clamp(26px, 7vw, 38px)/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
h1 span { display: block; font: 600 16px var(--body); color: var(--muted); margin-top: var(--s1); }
.sub { margin: 0; color: var(--muted); font-size: 14px; }
.progress { height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); }
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: var(--s3) var(--s4); }
.panel h2 { margin: 0; font: 600 17px var(--display); display: inline; }
.panel > h2 { display: block; margin-bottom: var(--s2); }
.panel summary { cursor: pointer; }
.panel.warn { background: var(--warn); border-color: transparent; }
.panel.warn h2 { color: var(--warn-ink); }
.events { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.events li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); font-size: 15px; }
.events li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.events small { display: block; color: var(--muted); font-size: 12px; }
.when { font: 500 12px/1.9 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.days { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.day { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; scroll-margin-top: 120px; }
.day.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.day.is-today .day-head { background: var(--today); }
.day-head h3 { margin: 0; font: 600 19px var(--display); }
.day-head h3::first-letter { text-transform: uppercase; }
.total { font: 500 13px var(--mono); color: var(--muted); white-space: nowrap; }
.pill { font: 700 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 2px 8px; margin-left: var(--s2); vertical-align: middle; }
.empty { margin: 0; padding: var(--s3) var(--s4); color: var(--muted); }
ol.items { list-style: none; margin: 0; padding: 0; }
.panel ol.items { margin-top: var(--s2); background: var(--sheet); border-radius: 12px; }
.item { display: grid; grid-template-columns: 4px 44px 1fr; border-top: 1px solid var(--rule); scroll-margin-top: 120px; }
.item:first-child { border-top: 0; }
.stripe { background: var(--subject); }
.check { align-self: start; margin: var(--s3) 0 0 var(--s2); width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--muted); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.check[aria-pressed="true"] { background: var(--done); border-color: var(--done); }
.check[aria-pressed="true"] span::before { content: "✓"; color: var(--sheet); font-weight: 700; }
.item .body { padding: var(--s3) var(--s4) var(--s3) var(--s2); display: grid; gap: 6px; min-width: 0; }
.item.is-done .title { text-decoration: line-through; color: var(--muted); }
.item.is-done .links { display: none; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); }
.code { font: 700 12px var(--mono); color: var(--subject, var(--accent)); }
.kind { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.mins { margin-left: auto; font: 500 12px var(--mono); }
.title { font-weight: 700; overflow-wrap: anywhere; }
.note { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; }
.links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.links.col { flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.links a { font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.links a.study { color: var(--sheet); background: var(--accent); border: 0; border-radius: 8px; padding: 2px 8px; }
.btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: 99px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); font: 700 14px var(--body); text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check-wide[aria-pressed="true"] { background: var(--done); border-color: var(--done); color: var(--sheet); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.back { margin: 0; font-size: 14px; }
.back a { text-decoration: none; font-weight: 700; }
.tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--rule); }
.tabs button { border: 0; background: none; font: 700 16px var(--body); color: var(--muted); padding: var(--s2) 0; border-bottom: 3px solid transparent; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.prose { font-size: 16px; max-width: 68ch; overflow-wrap: anywhere; }
.prose h2, .prose h3, .prose h4, .prose h5 { font-family: var(--display); font-weight: 600; margin: var(--s5) 0 var(--s1); line-height: 1.25; text-wrap: balance; }
.prose h2 { font-size: 21px; } .prose h3 { font-size: 18px; } .prose h4, .prose h5 { font-size: 16px; }
.prose p, .prose ul { margin: var(--s2) 0; }
.prose ul { padding-left: 1.2em; }
.prose details.answer { margin: var(--s2) 0 var(--s4); padding: var(--s2) var(--s3); background: var(--paper); border-radius: 10px; }
.prose details.answer summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.prose code { font: 500 14px var(--mono); }
.table { overflow-x: auto; margin: var(--s3) 0; }
table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; }
.subjects { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.subject { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--subject); border-radius: 12px; color: var(--ink); text-decoration: none; }
.subject .name { font: 600 17px var(--display); }
.subject .count { font-size: 13px; color: var(--muted); }
.task, .docs { border-top: 1px solid var(--rule); padding: var(--s2) 0; }
.task summary, .docs summary { cursor: pointer; font-weight: 700; }
.videos li { grid-template-columns: 64px 1fr; }
.videos strong { display: block; }
.accounts { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.account { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: var(--s3) var(--s4); display: grid; gap: var(--s1); align-content: start; }
.account h2 { margin: 0; font: 600 18px var(--display); }
.account p { margin: 0; font-size: 14px; }
.account .who { font: 500 13px var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.account .secret { color: var(--muted); }
.account .btn { justify-self: start; margin-top: var(--s2); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.review ol { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s3); }
.review li { display: grid; gap: 2px; font-size: 15px; }
.review q { font-style: italic; color: var(--warn-ink); }
.reviewed { margin: 0; font-size: 13px; color: var(--muted); }
.prose mark { background: var(--today); color: var(--ink); border-bottom: 2px solid var(--accent); padding: 0 2px; }
.original { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.original summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.badge { font: 700 12px var(--body); padding: 1px 8px; border-radius: 999px; background: var(--rule); color: var(--ink); }
.badge.is-late { background: #b3261e; color: #fff; }
.badge.is-now { background: var(--warn-ink); color: var(--warn); }
.badge.is-soon { background: var(--accent); color: var(--accent-ink); }
.when-line { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.panel h2 small { font: 400 13px var(--body); color: var(--muted); margin-left: var(--s2); }
.panel > .sub { margin-bottom: var(--s2); }
.brand { white-space: nowrap; flex: none; }
.badge.is-waiting { background: var(--rule); color: var(--muted); }
.muted-link { color: var(--muted); font-size: 14px; }
.scoreboard { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 46px); z-index: 10; display: flex; gap: var(--s4); align-items: center; padding: var(--s2) var(--s3); background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; font: 500 14px var(--mono); }
.scoreboard b { font-weight: 700; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; }
.timer.is-over { color: #b3261e; }
.quiz { display: grid; gap: var(--s4); }
.q { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: var(--s3) var(--s4); scroll-margin-top: 110px; }
.q.was-right { border-color: var(--done); }
.q.was-missed { border-color: #b3261e; }
.q-meta { margin: 0; font-size: 13px; color: var(--muted); }
.was-wrong { color: var(--warn-ink); font-weight: 700; }
.q-text { margin: var(--s2) 0 var(--s3); font: 700 17px/1.4 var(--body); overflow-wrap: anywhere; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.opt { width: 100%; text-align: left; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 15px/1.4 var(--body); cursor: pointer; overflow-wrap: anywhere; }
.opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt:disabled { cursor: default; opacity: .75; }
.opt.is-right { opacity: 1; background: var(--done); border-color: var(--done); color: var(--sheet); font-weight: 700; }
.opt.is-wrong { opacity: 1; background: #b3261e; border-color: #b3261e; color: #fff; }
.q-after { margin-top: var(--s3); }
.expl { margin: 0; font-size: 14px; color: var(--muted); }
.result .big { font: 700 20px var(--display); margin: var(--s2) 0 var(--s3); }
.bank summary { display: grid; gap: 2px; }
.bank summary small { color: var(--muted); font-size: 13px; }
.bank-list { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
.bank-list > li { border-top: 1px solid var(--rule); padding-top: var(--s3); display: grid; gap: var(--s2); }
.bank-list .q-text { margin: 0; font-size: 15px; }
.answers { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: 14px; }
.answers .is-right { color: var(--done); font-weight: 700; }
.answers .is-wrong { color: #b3261e; text-decoration: line-through; }
.q-stats { margin: 0; font: 500 12px var(--mono); color: var(--muted); }
.q-img { display: block; width: 100%; height: auto; margin: var(--s2) 0 var(--s3); border-radius: 8px; background: #fff; }
.q-data { margin: var(--s2) 0 var(--s3); padding: var(--s3); background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 8px; font: 400 12.5px/1.45 var(--mono); white-space: pre-wrap; overflow-x: auto; overflow-wrap: break-word; color: var(--ink); }
.q-figure { max-width: 520px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pending { font-size: 14px; color: var(--muted); }
.chuleta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; }
.chuleta .panel h3 { font: 600 16px var(--display); margin: var(--s4) 0 var(--s1); }
.chuleta .panel p, .chuleta .panel li { font-size: 15px; overflow-wrap: anywhere; }
.chuleta .panel ul, .chuleta .panel ol { padding-left: 1.2em; margin: var(--s2) 0; display: grid; gap: 4px; }
.chuleta section { scroll-margin-top: 70px; }
.toc ol { columns: 1; }
.averias .faults { padding-left: 0; list-style: none; display: grid; gap: var(--s3); }
.averias .faults > li { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.averias .table td:first-child { min-width: 92px; }
@media (pointer: coarse), (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), select, textarea { font-size: 16px !important; }
  a, button, summary, select, label, input, [role="button"], [role="tab"] { touch-action: manipulation; }
  summary { min-height: 44px; padding-block: 10px; }
}