/* Layout: tres columnas tipo app de idiomas (navegación · ruta de unidades · panel de progreso).
   Identidad PJC Scout: tinta #0E100F, dorado #BB9448, crema #F4F1E9. Barlow Condensed + Barlow. */
:root {
  --bg: #F4F1E9;
  --surface: #FBF9F4;
  --surface-2: #EAE5D8;
  --line: #D9D2C0;
  --fg: #0E100F;
  --muted: #6B665B;
  --pitch: #BB9448;
  --pitch-deep: #8C6C2A;
  --pitch-soft: #EFE3C8;
  --on-pitch: #0E100F;
  --ink: #0E100F;
  --gold: #E0B34F;
  --gold-deep: #9A7424;
  --gold-soft: #F6EACB;
  --red: #B5473F;
  --red-deep: #8E342E;
  --red-soft: #F5DEDA;
  --blue: #4E6A86;
  --blue-deep: #38506A;
  --blue-soft: #DDE5EE;
  --violet: #7A756A;
  --violet-deep: #5A564D;
  --lock: #E3DDCE;
  --lock-deep: #CFC8B5;
  --lock-ink: #9A9486;
  --done-bg: #0E100F; --done-ink: #BB9448; --done-deep: #000000;
  --chalk: #ffffff;
  --shadow: 0 1px 0 rgba(14, 16, 15, .04), 0 8px 24px rgba(14, 16, 15, .07);
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E100F; --surface: #171917; --surface-2: #202320; --line: #33362F;
    --fg: #F4F1E9; --muted: #A39E90;
    --pitch: #CDA45B; --pitch-deep: #8F7036; --pitch-soft: #2B2415; --on-pitch: #0E100F; --ink: #F4F1E9;
    --gold: #E2B957; --gold-deep: #BB9448; --gold-soft: #302811;
    --red: #E0645B; --red-deep: #A4403A; --red-soft: #3A1E1C;
    --blue: #7E9BBA; --blue-deep: #4E6A86; --blue-soft: #1B2733;
    --violet: #A8A397; --violet-deep: #7A756A;
    --lock: #232623; --lock-deep: #181A18; --lock-ink: #6B685F;
    --done-bg: #F4F1E9; --done-ink: #0E100F; --done-deep: #B8B2A0;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E100F; --surface: #171917; --surface-2: #202320; --line: #33362F;
  --fg: #F4F1E9; --muted: #A39E90;
  --pitch: #CDA45B; --pitch-deep: #8F7036; --pitch-soft: #2B2415; --on-pitch: #0E100F; --ink: #F4F1E9;
  --gold: #E2B957; --gold-deep: #BB9448; --gold-soft: #302811;
  --red: #E0645B; --red-deep: #A4403A; --red-soft: #3A1E1C;
  --blue: #7E9BBA; --blue-deep: #4E6A86; --blue-soft: #1B2733;
  --violet: #A8A397; --violet-deep: #7A756A;
  --lock: #232623; --lock-deep: #181A18; --lock-ink: #6B685F;
  --done-bg: #F4F1E9; --done-ink: #0E100F; --done-deep: #B8B2A0;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr) 330px; min-height: 100%; max-width: 1280px; margin: 0 auto; }
.side { position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; border-right: 2px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-family: var(--font-display); font-weight: 800; font-size: 28px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; color: var(--pitch-deep); line-height: 1; }
.brand .ic { width: 34px; height: 34px; color: var(--fg); }
.brand small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 2px solid transparent; border-radius: 14px; background: none; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.nav button .ic { width: 26px; height: 26px; }
.nav button:hover { background: var(--surface-2); }
.nav button[aria-current="page"] { background: var(--pitch-soft); border-color: var(--pitch); color: var(--pitch-deep); }
:root[data-theme="dark"] .nav button[aria-current="page"] { color: var(--pitch); }
.credit { margin-top: auto; padding: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.main { min-width: 0; padding: 0 28px 120px; }
.topstats { display: none; }
.rail { position: sticky; top: 0; align-self: start; padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; max-height: 100dvh; overflow: auto; }

/* ---------- Tarjetas del panel ---------- */
.card { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); font-weight: 800; font-variant-numeric: tabular-nums; }
.pill .ic { width: 20px; height: 20px; }
.pill.flame { color: #e8731a; }
.pill.xp { color: var(--gold-deep); }
:root[data-theme="dark"] .pill.xp, :root:not([data-theme="light"]) .pill.xp { color: var(--gold); }
.pill.heart { color: var(--red); }
.goal { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: var(--surface-2); }
.ring .fg { stroke: var(--pitch); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 84px; margin-top: 12px; }
.week div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11px; font-weight: 800; color: var(--muted); }
.week i { display: block; width: 100%; min-height: 6px; border-radius: 6px; background: var(--surface-2); }
.week i.on { background: var(--pitch); }
.week div.today { color: var(--fg); }
.rail .cta-card { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Ruta de unidades ---------- */
.unit { --hue: var(--pitch); --hue-deep: var(--pitch-deep); --hue-ink: var(--on-pitch); padding-top: 28px; }
.unit[data-hue="blue"] { --hue-ink: #fff; --hue: var(--blue); --hue-deep: var(--blue-deep); }
.unit[data-hue="red"] { --hue-ink: #fff; --hue: var(--red); --hue-deep: var(--red-deep); }
.unit[data-hue="gold"] { --hue: var(--done-bg); --hue-deep: var(--done-deep); --hue-ink: var(--done-ink); }
.unit[data-hue="violet"] { --hue-ink: #fff; --hue: var(--violet); --hue-deep: var(--violet-deep); }
.unit-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--hue); color: var(--hue-ink); box-shadow: 0 5px 0 var(--hue-deep); }
.unit-head small { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; opacity: .9; }
.unit-head h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px); line-height: 1.05; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.unit-head p { font-size: 14px; font-weight: 600; opacity: .92; }
.unit-meter { flex: none; font-family: var(--font-display); font-size: 28px; font-weight: 700; padding: 6px 12px; border: 2px solid currentColor; border-radius: 12px; font-variant-numeric: tabular-nums; }
.path { list-style: none; margin: 0; padding: 26px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.path::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 3px dashed var(--line); z-index: 0; }
.stripes { background: repeating-linear-gradient(90deg, transparent 0 72px, color-mix(in srgb, var(--pitch) 5%, transparent) 72px 144px); border-radius: 18px; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; --off: var(--off-d, 0px); transform: translateX(var(--off, 0px)); width: 130px; }
.node { position: relative; width: 78px; height: 78px; border: 0; border-radius: 50%; background: var(--hue); color: var(--hue-ink); display: grid; place-items: center; box-shadow: 0 7px 0 var(--hue-deep); transition: transform .08s ease, box-shadow .08s ease; }
.node .ic { width: 34px; height: 34px; }
.node:hover { filter: brightness(1.06); }
.node:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--hue-deep); }
.node.done { background: var(--done-bg); color: var(--done-ink); box-shadow: 0 7px 0 var(--done-deep); }
.node.locked { background: var(--lock); color: var(--lock-ink); box-shadow: 0 7px 0 var(--lock-deep); cursor: not-allowed; }
.node.pro { background: var(--pitch-soft); color: var(--pitch-deep); box-shadow: 0 7px 0 var(--pitch); }
:root[data-theme="dark"] .node.pro { color: var(--pitch); }
.node.boss { width: 92px; height: 92px; }
.node.boss .ic { width: 42px; height: 42px; }
.node.active::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 4px solid var(--hue); opacity: .45; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1.22); opacity: 0; } }
.bubble { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); color: var(--hue-deep); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; animation: bob 1.6s ease-in-out infinite; z-index: 2; }
:root[data-theme="dark"] .bubble { color: var(--hue); }
.bubble::after { content: ''; position: absolute; top: 100%; left: 50%; width: 12px; height: 12px; background: var(--surface); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translate(-50%, -6px) rotate(45deg); }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
.step-title { text-align: center; font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--fg); text-wrap: balance; }
.step-title.locked { color: var(--muted); }
.stars { display: flex; gap: 2px; height: 14px; }
.stars .ic { width: 14px; height: 14px; color: var(--line); }
.stars .ic.on { color: var(--gold-deep); }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.step.shake { animation: none; }
.step.shake .node { animation: shake .35s; }

/* ---------- Vistas secundarias ---------- */
.view-head { padding-top: 28px; padding-bottom: 6px; }
.view-head h1 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 46px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.view-head p { color: var(--muted); font-weight: 600; margin-top: 6px; max-width: 60ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 20px; }
.tile { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 18px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 18px; transition: transform .1s; }
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pitch); }
.tile:disabled { opacity: .55; cursor: not-allowed; }
.tile .ic { width: 34px; height: 34px; color: var(--pitch); }
.tile h3 { font-family: var(--font-display); font-size: 25px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.tile p { color: var(--muted); font-weight: 600; font-size: 14.5px; }
.tile .count { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--fg); font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); margin-top: 16px; flex-wrap: wrap; }
.seg button { padding: 8px 14px; border: 0; border-radius: 10px; background: none; font-weight: 800; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tools input, .tools select { min-width: 0; flex: 1 1 200px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; }
.glist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.grow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.grow .txt { min-width: 0; flex: 1; }
.grow .en { font-weight: 900; font-size: 16.5px; overflow-wrap: anywhere; }
.grow .es { color: var(--muted); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.grow .pron { color: var(--blue); font-style: italic; font-weight: 700; font-size: 13.5px; }
.tag { flex: none; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--blue); }
.icon-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.icon-btn .ic { width: 22px; height: 22px; }
.gram { display: grid; gap: 14px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gram .card h3 { font-size: 24px; }
.gram .tag { margin-bottom: 8px; display: inline-block; }
.rule { margin-top: 10px; font-weight: 600; }
.ex { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px; }
.ex b { display: block; font-weight: 900; }
.ex span { color: var(--muted); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.stat { padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); }
.stat b { display: block; font-family: var(--font-display); font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.settings { margin-top: 18px; display: grid; gap: 10px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); flex-wrap: wrap; }
.setrow b { font-weight: 900; }
.setrow small { display: block; color: var(--muted); font-weight: 600; }
.level { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--pitch); color: var(--on-pitch); box-shadow: 0 5px 0 var(--pitch-deep); }
.level .ic { width: 52px; height: 52px; }
.level b { display: block; font-family: var(--font-display); font-size: 34px; text-transform: uppercase; line-height: 1; letter-spacing: .02em; }
.level .lbar { height: 10px; border-radius: 6px; background: rgba(14, 16, 15, .2); margin-top: 10px; overflow: hidden; }
.level .lbar i { display: block; height: 100%; background: var(--on-pitch); border-radius: 6px; }
.level > div { min-width: 0; flex: 1; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: 14px; background: var(--pitch); color: var(--on-pitch); font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 0 var(--pitch-deep); text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pitch-deep); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.danger { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-deep); }
.btn:disabled { background: var(--lock); color: var(--lock-ink); box-shadow: 0 4px 0 var(--lock-deep); cursor: not-allowed; }
.btn.wide { width: 100%; }

/* ---------- Navegación móvil ---------- */
.bottomnav { display: none; }

/* ---------- Lección ---------- */
.lesson { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.lesson[hidden] { display: none; }
.ltop { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 8px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.xbtn { border: 0; background: none; color: var(--muted); padding: 6px; border-radius: 10px; }
.xbtn .ic { width: 28px; height: 28px; }
.pbar { flex: 1; height: 16px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--pitch); border-radius: 10px; transition: width .35s ease; position: relative; }
.pbar i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.lhearts { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; }
.lhearts .ic { width: 26px; height: 26px; }
.xscroll { flex: 1; overflow-y: auto; }
.xmain { width: 100%; max-width: 680px; margin: 0 auto; padding: 18px 16px 32px; display: flex; flex-direction: column; gap: 18px; }
.prompt { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 38px); line-height: 1.08; letter-spacing: .01em; text-wrap: balance; }
.prompt.q { font-family: var(--font-body); font-weight: 900; font-size: clamp(21px, 4vw, 26px); }
.bigcard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; }
.bigcard .t { flex: 1; min-width: 0; }
.bigcard .big { display: block; font-weight: 900; font-size: clamp(22px, 5vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
.bigcard .big.long { font-size: clamp(19px, 4vw, 23px); }
.pron { display: block; color: var(--blue); font-style: italic; font-weight: 700; font-size: 15px; margin-top: 2px; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; font-weight: 800; font-size: 17px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; overflow-wrap: anywhere; }
.opt kbd { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line); font: 800 14px var(--font-body); color: var(--muted); }
.opt:hover:not(:disabled) { background: var(--surface-2); }
.opt.sel { border-color: var(--blue); background: var(--blue-soft); }
.opt.sel kbd { border-color: var(--blue); color: var(--blue); }
.opt.ok { border-color: var(--pitch); background: var(--pitch-soft); }
.opt.bad { border-color: var(--red); background: var(--red-soft); }
.opt:disabled { cursor: default; }
.long-opts .opt { font-size: 15.5px; font-weight: 700; }
.listen { display: flex; gap: 12px; align-items: center; }
.bigspeak { width: 96px; height: 96px; border-radius: 22px; border: 2px solid var(--line); border-bottom-width: 6px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.bigspeak .ic { width: 44px; height: 44px; }
.bigspeak:active { transform: translateY(3px); border-bottom-width: 3px; }
.slowbtn { padding: 12px 16px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; color: var(--blue); }
.aline { min-height: 70px; padding: 8px 4px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: repeating-linear-gradient(transparent 0 61px, var(--line) 61px 63px); }
.bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { padding: 10px 14px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 13px; font-weight: 800; font-size: 17px; }
.chip:active { transform: translateY(2px); border-bottom-width: 2px; }
.chip.ghost { visibility: visible; background: var(--surface-2); color: transparent; border-color: var(--surface-2); pointer-events: none; }
.aline .chip { border-color: var(--line); }
.aline.ok .chip { border-color: var(--pitch); background: var(--pitch-soft); }
.aline.bad .chip { border-color: var(--red); background: var(--red-soft); }
.typebox { width: 100%; padding: 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 800 20px var(--font-body); }
.typebox:focus { border-color: var(--blue); outline: none; }
.typebox.ok { border-color: var(--pitch); background: var(--pitch-soft); }
.typebox.bad { border-color: var(--red); background: var(--red-soft); }
.hint { color: var(--muted); font-weight: 700; font-size: 14px; }
.fillline { font-weight: 800; font-size: clamp(20px, 4.5vw, 26px); line-height: 1.8; overflow-wrap: anywhere; }
.slot { display: inline-block; min-width: 96px; padding: 0 10px; margin: 0 4px; border-bottom: 4px solid var(--line); text-align: center; color: var(--blue); }
.slot.ok { border-color: var(--pitch); color: var(--pitch-deep); }
.slot.bad { border-color: var(--red); color: var(--red-deep); }
.fillopts { display: flex; flex-wrap: wrap; gap: 10px; }
.matchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.matchgrid .col { display: grid; gap: 10px; align-content: start; }
.mbtn { padding: 14px 12px; min-height: 60px; text-align: center; font-weight: 800; font-size: 15.5px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 14px; overflow-wrap: anywhere; }
.mbtn.sel { border-color: var(--blue); background: var(--blue-soft); }
.mbtn.done { border-color: var(--pitch); background: var(--pitch-soft); color: var(--pitch-deep); opacity: .6; cursor: default; }
.mbtn.bad { border-color: var(--red); background: var(--red-soft); animation: shake .35s; }
.learn { display: grid; gap: 10px; }
.lcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.lcard .t { flex: 1; min-width: 0; }
.lcard b { font-weight: 900; font-size: 19px; overflow-wrap: anywhere; display: block; }
.lcard .es { color: var(--muted); font-weight: 700; font-size: 15px; }
.gcard { padding: 16px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; }
.gcard p { font-weight: 700; font-size: 16.5px; }
.gcard .ex { margin-top: 10px; }
.dlg { display: grid; gap: 10px; }
.line { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.line.r { align-self: flex-end; align-items: flex-end; }
.line .who { font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.line .bub { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); font-weight: 700; }
.line.r .bub { background: var(--blue-soft); border-color: var(--blue); }
.line .bub .tx { min-width: 0; overflow-wrap: anywhere; }
.line .bub .tr { display: block; color: var(--muted); font-weight: 600; font-size: 14px; margin-top: 3px; }
.line .bub .icon-btn { width: 34px; height: 34px; border-bottom-width: 3px; }
.line .bub .icon-btn .ic { width: 18px; height: 18px; }
.dlgtools { display: flex; gap: 10px; flex-wrap: wrap; }
.mascot { display: block; margin: 0 auto; }

/* ---------- Barra inferior de la lección ---------- */
.bar { border-top: 2px solid var(--line); background: var(--bg); padding-bottom: env(safe-area-inset-bottom, 0px); transition: background .2s; }
.bar.good { background: var(--pitch-soft); border-color: var(--pitch); }
.bar.bad { background: var(--red-soft); border-color: var(--red); }
.bar-in { width: 100%; max-width: 680px; margin: 0 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fb { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.fb .badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); }
.bar.good .badge { color: var(--pitch); }
.bar.bad .badge { color: var(--red); }
.fb .badge .ic { width: 26px; height: 26px; stroke-width: 3; }
.fb b { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .02em; }
.bar.good b { color: var(--pitch-deep); }
.bar.bad b { color: var(--red-deep); }
:root[data-theme="dark"] .bar.good b { color: var(--pitch); }
:root[data-theme="dark"] .bar.bad b { color: var(--red); }
.fb p { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.cta { flex: none; min-width: 150px; padding: 14px 24px; border: 0; border-radius: 14px; background: var(--pitch); color: var(--on-pitch); font-weight: 900; font-size: 15.5px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 0 var(--pitch-deep); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pitch-deep); }
.cta:disabled { background: var(--lock); color: var(--lock-ink); box-shadow: 0 4px 0 var(--lock-deep); cursor: not-allowed; }
.bar.bad .cta { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-deep); }
.skip { padding: 14px 18px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); color: var(--muted); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.rate { display: flex; gap: 10px; width: 100%; }
.rate > * { flex: 1; }
.bar.idle .bar-in { justify-content: space-between; }

/* ---------- Pantallas finales ---------- */
.end { flex: 1; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; position: relative; }
.end-in { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.end h1 { font-family: var(--font-display); font-size: clamp(40px, 8vw, 58px); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .02em; text-wrap: balance; }
.end p { color: var(--muted); font-weight: 700; }
.bigstars { display: flex; gap: 8px; }
.bigstars .ic { width: 54px; height: 54px; color: var(--line); }
.bigstars .ic.on { color: var(--gold); filter: drop-shadow(0 4px 0 var(--gold-deep)); }
.endstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.endstats div { padding: 12px 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.endstats b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.endstats span { font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.endstats .x b { color: var(--gold-deep); }
.endbar { width: 100%; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--line); }
.endbar .in { max-width: 520px; margin: 0 auto; display: grid; gap: 10px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .9; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 12, .55); }
.modal[hidden] { display: none; }
.modal .box { width: 100%; max-width: 420px; padding: 24px; background: var(--surface); border-radius: 22px; border: 2px solid var(--line); display: grid; gap: 14px; text-align: center; }
.modal h2 { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; line-height: 1; }
.modal p { color: var(--muted); font-weight: 700; }
.modal .typebox { text-align: center; font-size: 18px; letter-spacing: .04em; }
.modal .msg { min-height: 20px; font-size: 14px; }
.modal .msg.err { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; padding: 12px 18px; border-radius: 14px; background: var(--fg); color: var(--bg); font-weight: 800; max-width: calc(100% - 32px); text-align: center; }
.toast[hidden] { display: none; }
.empty { margin-top: 24px; padding: 26px; text-align: center; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); font-weight: 700; }
.promo { margin: 22px 0 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--pitch); background: var(--pitch-soft); }
.promo .ic { width: 34px; height: 34px; color: var(--pitch-deep); }
.promo div { flex: 1; min-width: 0; }
.promo b { display: block; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.promo span { color: var(--muted); font-weight: 700; font-size: 14px; }

/* ---------- Adaptación ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .rail { display: none; }
  .topstats { display: flex; justify-content: flex-end; padding-top: 14px; }
  .topstats .brand { display: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .main { padding: 0 16px 110px; }
  .topstats { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; background: var(--bg); border-bottom: 2px solid var(--line); margin-inline: -16px; padding-inline: 16px; }
  .topstats { justify-content: space-between; padding-top: 10px; }
  .topstats .brand { display: flex; padding: 0; font-size: 22px; gap: 6px; }
  .topstats .brand .ic { width: 26px; height: 26px; }
  .topstats .brand small { display: none; }
  .unit-head { top: 60px; }
  .bottomnav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 2px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .bottomnav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border: 0; background: none; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .bottomnav button[aria-current="page"] { color: var(--pitch); }
  .bottomnav .ic { width: 26px; height: 26px; }
}
@media (max-width: 520px) {
  .step { --off: calc(var(--off-m, 0) * 1px); }
  .cta { min-width: 0; padding-inline: 18px; }
  .fb b { font-size: 23px; }
  .bar-in { gap: 10px; }
  .skip { padding-inline: 12px; }
  .endstats b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.mini-bar { height: 12px; border-radius: 8px; background: var(--surface-2); margin-top: 12px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--pitch); border-radius: 8px; }