/* Matrices: explicado fácil — estilos (mobile-first, sin dependencias externas) */
:root{
  --bg:#f7f8fb; --card:#ffffff; --ink:#151a2d; --muted:#5b6380; --line:#e3e6ef;
  --navy:#0b0e1a; --navy2:#141a33; --teal:#1aa6b7; --teal-d:#0e7f8d; --orange:#e8902a; --yellow:#f2c230;
  --green:#22a06b; --red:#d64545; --soft:#eef7f8; --memo:#fff7e8; --memo-line:#f1d29a;
  --r:14px; --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0b0e1a; --card:#121729; --ink:#e8ebf5; --muted:#9aa3c0; --line:#232a45;
    --soft:#0f2a30; --memo:#2a2210; --memo-line:#6b5420; --teal-d:#4fd1e0; --shadow:none; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--teal-d)}
img,video,iframe{max-width:100%}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}

/* barra superior */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:12px;height:54px}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .logo{display:inline-grid;grid-template-columns:repeat(2,10px);gap:3px;padding:4px 6px;border-left:2px solid #fff;border-right:2px solid #fff;border-radius:3px}
.brand .logo i{width:10px;height:10px;border-radius:2px;background:var(--teal)}
.brand .logo i:nth-child(2){background:var(--orange)}.brand .logo i:nth-child(3){background:var(--yellow)}
.top nav{margin-left:auto;display:flex;gap:4px}
.top nav a{white-space:nowrap;color:#cfd5ea;text-decoration:none;font-size:15px;padding:6px 10px;border-radius:8px}
.top nav a:hover,.top nav a[aria-current]{background:var(--navy2);color:#fff}

@media(max-width:520px){.brand .long{display:none}.top nav a{padding:6px 8px;font-size:14.5px}}
/* portada */
.hero{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:36px 0 40px}
.hero h1{font-size:clamp(30px,7vw,46px);line-height:1.1;margin:0 0 10px}
.hero h1 span{color:var(--yellow)}
.hero p{color:#cfd5ea;max-width:640px;margin:0 0 18px}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.overall{background:rgba(255,255,255,.07);border-radius:var(--r);padding:14px 16px;max-width:520px}
.overall .lbl{display:flex;justify-content:space-between;font-size:15px;color:#cfd5ea;margin-bottom:8px}
.bar{height:8px;background:rgba(127,127,127,.25);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--yellow));border-radius:99px;transition:width .6s}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:11px 18px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal-d);color:#fff}
.btn.ghost{background:transparent;color:var(--teal-d);border:1.5px solid var(--teal)}
.btn.ghost:hover{background:var(--soft)}
.hero .btn{margin-top:16px}

h2.sec{font-size:24px;margin:34px 0 14px}
.grid{display:grid;gap:14px}
@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
a.card:hover{border-color:var(--teal)}
.card .num{display:flex;align-items:center;justify-content:space-between}
.badge{font-size:13px;font-weight:700;color:var(--teal-d);letter-spacing:.6px;text-transform:uppercase}
.chip{font-size:12.5px;font-weight:650;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--teal-d);white-space:nowrap}
.chip.done{background:#e3f6ec;color:#16794a}
@media (prefers-color-scheme:dark){.chip.done{background:#10301f;color:#5fd69a}}
.card h3{margin:0;font-size:20px;line-height:1.25}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card .meta{font-size:14px;color:var(--muted);margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}
.card.final{border:1.5px solid var(--orange)}
.card.final .badge{color:var(--orange)}
.soon{list-style:none;padding:0;margin:0;display:grid;gap:8px}
@media(min-width:680px){.soon{grid-template-columns:1fr 1fr}}
.soon li{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);background:var(--card)}
.soon b{color:var(--ink);opacity:.55;min-width:26px}
.soon em{margin-left:auto;font-size:12.5px;font-style:normal;opacity:.8}

/* lección */
.lhead{background:var(--navy);color:#fff;padding:22px 0 18px}
.lhead h1{margin:2px 0 4px;font-size:clamp(26px,6vw,38px);line-height:1.15}
.lhead p{margin:0;color:#cfd5ea}
.player{background:#000;margin:0 -18px}
@media(min-width:720px){.player{margin:18px 0 0;border-radius:var(--r);overflow:hidden}}
.ratio{position:relative;aspect-ratio:16/9;width:100%}
.ratio iframe,.ratio video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.chapters{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
@media(min-width:680px){.chapters{grid-template-columns:1fr 1fr}}
.chapters button,.ts{font:inherit;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 12px;cursor:pointer;display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;font-size:15.5px}
.chapters button:hover,.ts:hover{border-color:var(--teal)}
.chapters button.on{border-color:var(--teal);background:var(--soft)}
.chapters time,.ts time{font-variant-numeric:tabular-nums;color:var(--teal-d);font-weight:700;font-size:14px;min-width:42px}
.ts{display:inline-flex;width:auto;padding:3px 10px;font-size:14px;vertical-align:middle;margin-left:6px}
.yt-link{font-size:14px;color:var(--muted);margin-top:8px}

.subnav{position:sticky;top:54px;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);margin-top:18px}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.subnav a{white-space:nowrap;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px;padding:7px 12px;border-radius:99px}
.subnav a:hover{background:var(--soft);color:var(--teal-d)}

section.block{padding:10px 0 8px}
section.block>h2{font-size:25px;margin:26px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
section.block>h2 .print{margin-left:auto;font-size:14px;padding:6px 12px}
.notes h3{font-size:19.5px;margin:26px 0 6px;color:var(--teal-d)}
.notes p,.notes li{margin:8px 0}
.notes ul,.notes ol{padding-left:22px}
.rule{background:var(--soft);border-left:4px solid var(--teal);padding:10px 14px;border-radius:0 10px 10px 0;margin:12px 0}
.tbl{border-collapse:collapse;width:100%;margin:10px 0;font-size:15.5px;display:block;overflow-x:auto}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle}
.tbl th{font-size:13.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 0}
.katex{font-size:1.08em}
.memo{background:var(--memo);border:1.5px solid var(--memo-line);border-radius:var(--r);padding:6px 18px 10px}
.memo ul{margin:6px 0;padding-left:20px}.memo li{margin:9px 0}
.full h3{font-size:18.5px;margin:24px 0 4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.full p{margin:8px 0;color:var(--ink)}
details.full-wrap>summary{cursor:pointer;color:var(--teal-d);font-weight:650;margin:6px 0}

/* examen */
.quiz .q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0}
.quiz .qn{margin:0 0 10px;font-weight:600}
.quiz .qn small{display:inline-block;font-weight:700;font-size:12px;color:var(--orange);text-transform:uppercase;letter-spacing:.6px;margin-right:6px}
.quiz label.opt{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin:6px 0;cursor:pointer}
.quiz label.opt:hover{border-color:var(--teal)}
.quiz label.opt input{width:18px;height:18px;flex:none;accent-color:var(--teal)}
.quiz input.num{font:inherit;width:100%;max-width:220px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.quiz input.num:focus{outline:2px solid var(--teal);border-color:transparent}
.quiz .hint{font-size:13.5px;color:var(--muted);margin-top:4px}
.quiz .fb{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:15.5px}
.quiz .q.right{border-color:var(--green)}.quiz .q.right .fb{background:rgba(34,160,107,.10)}
.quiz .q.wrong{border-color:var(--red)}.quiz .q.wrong .fb{background:rgba(214,69,69,.09)}
.quiz .q.right .verdict{color:var(--green)}.quiz .q.wrong .verdict{color:var(--red)}
.quiz label.opt.is-answer{border-color:var(--green);background:rgba(34,160,107,.08)}
.quiz .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.result{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 18px;margin:16px 0}
.result b{font-size:28px;color:var(--yellow)}
.result .best{color:#cfd5ea;font-size:15px}
.pager{display:flex;justify-content:space-between;gap:10px;margin:34px 0 10px;flex-wrap:wrap}
.pager a{flex:1 1 200px;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);background:var(--card)}
.pager a:hover{border-color:var(--teal)}
.pager small{display:block;color:var(--muted);font-size:13px}
.pager .next{text-align:right}
footer{color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:40px;padding:20px 0 40px}

/* imprimir: solo apuntes + memorizar */
@media print{
  :root{--ink:#000;--muted:#333;--bg:#fff;--card:#fff;--line:#bbb;--soft:#f1f1f1;--memo:#fff;--teal-d:#000}
  body{font-size:12pt;background:#fff;color:#000}
  .top,.player,.chapters,.yt-link,.subnav,#leccion,#examen,.pager,footer,.print,.noprint{display:none!important}
  .lhead{background:none;color:#000;padding:0}.lhead p{color:#333}
  .rule{border-left-color:#000}
  .memo{break-inside:avoid;border-color:#000}
  .notes h3{break-after:avoid}
  .katex-display{overflow:visible}
  a{color:#000;text-decoration:none}
}