/* ══════════════════════════════════════════════════════════════
   Probabilidad 9° — Laboratorio del Azar
   Estilos. Tema oscuro por defecto (clave compartida edu-theme).
   ══════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
	--bg: #0b1020;
	--bg2: #0f1630;
	--panel: #141c3a;
	--panel2: #1a2450;
	--panel3: #212d60;
	--line: rgba(148, 163, 255, .16);
	--line2: rgba(148, 163, 255, .28);
	--text: #e9ecff;
	--muted: #a3add6;
	--faint: #6f7aa8;
	--accent: #8b6cff;
	--accent-2: #22d3ee;
	--accent-ink: #ffffff;
	--warm: #fbbf24;
	--ok: #34d399;
	--ok-bg: rgba(52, 211, 153, .13);
	--bad: #fb7185;
	--bad-bg: rgba(251, 113, 133, .13);
	--info: #60a5fa;
	--info-bg: rgba(96, 165, 250, .12);
	--warm-bg: rgba(251, 191, 36, .12);
	--shadow: 0 10px 30px rgba(0, 0, 0, .35);
	--grid: rgba(139, 108, 255, .06);
	--c-cara: #fbbf24;
	--c-sello: #94a3b8;
	--c1: #8b6cff; --c2: #22d3ee; --c3: #fbbf24; --c4: #34d399; --c5: #fb7185; --c6: #f472b6;
	--ball-r: #ef4444; --ball-b: #3b82f6; --ball-g: #22c55e; --ball-y: #eab308; --ball-p: #a855f7; --ball-o: #f97316;
	color-scheme: dark;
}
[data-theme="light"] {
	--bg: #f4f6ff;
	--bg2: #eaeefc;
	--panel: #ffffff;
	--panel2: #f3f5ff;
	--panel3: #e7ebfd;
	--line: rgba(40, 50, 120, .13);
	--line2: rgba(40, 50, 120, .24);
	--text: #151a33;
	--muted: #4f587c;
	--faint: #7d86a8;
	--accent: #5b3df5;
	--accent-2: #0e7490;
	--accent-ink: #ffffff;
	--warm: #b45309;
	--ok: #047857;
	--ok-bg: rgba(4, 120, 87, .09);
	--bad: #be123c;
	--bad-bg: rgba(190, 18, 60, .08);
	--info: #1d4ed8;
	--info-bg: rgba(29, 78, 216, .08);
	--warm-bg: rgba(180, 83, 9, .09);
	--shadow: 0 8px 24px rgba(30, 40, 90, .10);
	--grid: rgba(91, 61, 245, .05);
	--c-cara: #d97706;
	--c-sello: #64748b;
	--c1: #5b3df5; --c2: #0891b2; --c3: #d97706; --c4: #059669; --c5: #e11d48; --c6: #db2777;
	color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
	font-family: 'Sora', 'Outfit', 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
	font-size: calc(16px * var(--z, 1));
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 28px 28px;
	overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; letter-spacing: -.02em; }
h2 { font-size: 1.45rem; letter-spacing: -.01em; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.mono, .math { font-family: 'Cambria Math', 'Cambria', 'Times New Roman', serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

/* ── Estructura ─────────────────────────────────────────────── */
.top {
	position: fixed; inset: 0 0 auto 0; height: 60px; z-index: 50;
	display: flex; align-items: center; gap: 12px; padding: 0 16px;
	background: color-mix(in srgb, var(--bg2) 88%, transparent);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.brand-ico {
	width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 4px 14px rgba(139, 108, 255, .35);
}
.brand b { display: block; font-size: 1.02rem; white-space: nowrap; }
.brand small { display: block; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.top-sp { flex: 1; }
.tb {
	border: 1px solid var(--line); background: var(--panel); color: var(--text);
	height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .92rem;
}
.tb:hover { border-color: var(--line2); background: var(--panel2); }
#btnMenu { display: none; }
.xpchip {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
	background: var(--panel); border: 1px solid var(--line); cursor: pointer; color: var(--text);
}
.xpchip .lv {
	width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
	background: conic-gradient(var(--accent-2) var(--p, 0%), var(--panel3) 0);
	position: relative;
}
.xpchip .lv::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel); }
.xpchip .lv span { position: relative; }
.xpchip .xpt { font-size: .82rem; line-height: 1.1; text-align: left; }
.xpchip .xpt small { display: block; color: var(--muted); font-size: .7rem; }

.prog { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.prog-b { width: 150px; height: 10px; border-radius: 99px; background: var(--panel3); overflow: hidden; border: 1px solid var(--line); }
.prog-b i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s ease; }
.prog b { color: var(--text); font-weight: 700; }

.lay { position: fixed; inset: 60px 0 0 0; display: flex; }
nav#nav {
	width: 270px; flex: 0 0 270px; overflow-y: auto; padding: 14px 10px 30px;
	border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 92%, transparent);
}
.nav-sec { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 16px 10px 6px; font-weight: 700; }
.nav-it {
	width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
	border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text);
	font-size: .9rem; margin-bottom: 2px;
}
.nav-it:hover { background: var(--panel); }
.nav-it.on { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-it .ni {
	width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center;
	background: var(--panel2); border: 1px solid var(--line); font-size: .95rem;
}
.nav-it .nt { flex: 1; min-width: 0; line-height: 1.2; }
.nav-it .nt small { display: block; color: var(--muted); font-size: .72rem; }
.nav-it .ns { font-size: .85rem; }
.nav-it.lock { opacity: .55; }
.nav-it.done .ni { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }

main#main { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 26px 26px 80px; }
#velo { display: none; }

/* ── Tarjetas y botones ─────────────────────────────────────── */
.card {
	background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
	box-shadow: var(--shadow); margin-bottom: 18px;
}
.card.flat { box-shadow: none; }
.card.soft { background: var(--panel2); box-shadow: none; }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card-t { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-t h3 { margin: 0; }
.card-t .sp { flex: 1; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gauto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.sp { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer; font-weight: 650; font-size: .95rem;
	border: 1px solid var(--line2); background: var(--panel2); color: var(--text);
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
	text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-p { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2))); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-p:hover { filter: brightness(1.08); border-color: transparent; }
.btn-c { background: color-mix(in srgb, var(--accent-2) 16%, var(--panel)); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.btn-w { background: var(--warm-bg); border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.btn-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.btn-g { background: transparent; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: .85rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1.05rem; border-radius: 14px; }
.btn-x { min-width: 44px; padding: 0; }

.chip {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650;
	background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
}
.chip.n1 { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-bg); }
.chip.n2 { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 40%, transparent); background: var(--warm-bg); }
.chip.n3 { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-bg); }
.chip.ac { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }

input.inp, select.inp, textarea.inp {
	min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line2);
	background: var(--bg2); color: var(--text); font-size: 1rem; max-width: 100%;
}
input.inp:focus, select.inp:focus, textarea.inp:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 25%, transparent); }
input.inp.big { font-size: 1.25rem; font-family: 'Cambria Math', Cambria, serif; min-width: 180px; text-align: center; }
input[type=range] { accent-color: var(--accent); width: 100%; }
label.lbl { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; }

/* ── Hero / cabecera de módulo ─────────────────────────────── */
.hero {
	position: relative; overflow: hidden; border-radius: 24px; padding: 34px 32px; margin-bottom: 22px;
	background:
		radial-gradient(600px 240px at 90% 10%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%),
		radial-gradient(500px 260px at 0% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
		var(--panel);
	border: 1px solid var(--line);
}
.hero h1 { font-size: 2.2rem; max-width: 640px; }
.hero p { max-width: 620px; color: var(--muted); font-size: 1.05rem; }
.hero .deco { position: absolute; right: 22px; top: 18px; width: 250px; height: 200px; opacity: .95; pointer-events: none; }
.kicker { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); font-weight: 800; margin-bottom: 6px; }
.modhead { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.modnum {
	width: 60px; height: 60px; border-radius: 18px; flex: 0 0 60px; display: grid; place-items: center; font-size: 1.7rem;
	background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.modhead h1 { margin-bottom: 4px; font-size: 1.8rem; }
.qa4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.qa4 > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: .85rem; }
.qa4 b { display: block; font-size: .72rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }

.idea {
	border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-radius: 12px;
	padding: 12px 16px; margin: 12px 0;
}
.idea.c { border-left-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, var(--panel)); }
.idea.w { border-left-color: var(--warm); background: var(--warm-bg); }
.formula {
	display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
	font-family: 'Cambria Math', Cambria, serif; font-size: 1.45rem; padding: 18px; border-radius: 16px;
	background: var(--bg2); border: 1px dashed var(--line2); margin: 12px 0;
}

/* Fracciones */
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .15em; font-family: 'Cambria Math', Cambria, serif; line-height: 1.1; }
.fr > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .25em .05em; }
.fr > span:last-child { padding: .05em .25em 0; }
.fr.lg { font-size: 1.35em; }
.eqn { font-family: 'Cambria Math', Cambria, serif; font-size: 1.12rem; }
.hl { color: var(--accent-2); font-weight: 700; }
.hl2 { color: var(--warm); font-weight: 700; }
.okc { color: var(--ok); font-weight: 700; }
.badc { color: var(--bad); font-weight: 700; }

/* Tres representaciones */
.rep3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.rep3 > div { text-align: center; padding: 14px 8px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.rep3 small { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.rep3 b { font-size: 1.5rem; font-family: 'Cambria Math', Cambria, serif; }

/* ── Retroalimentación ─────────────────────────────────────── */
.fb { border-radius: 14px; padding: 12px 16px; margin: 12px 0; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.fb .fi { font-size: 1.3rem; line-height: 1.2; }
.fb.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.fb.bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.fb.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.fb.warn { background: var(--warm-bg); border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.fb b.t { display: block; }

/* ── Ejercicio ──────────────────────────────────────────────── */
.ex { position: relative; }
.ex-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ex-ctx { width: 46px; height: 46px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.5rem; }
.ex-h h3 { margin: 0; flex: 1; min-width: 160px; }
.ex-enun { font-size: 1.05rem; }
.ex-vis { margin: 10px 0; }
.ex-datos { margin: 8px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-size: .93rem; }
.ex-datos ul { margin: 4px 0 0; padding-left: 20px; }
.ex-preg { font-weight: 700; font-size: 1.06rem; margin: 10px 0; }
.ex-ans { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.ex-tip { font-size: .8rem; color: var(--muted); }
.ex-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); width: 100%; }
.opt {
	text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg2); cursor: pointer;
	display: flex; gap: 10px; align-items: center; min-height: 48px; color: var(--text);
}
.opt .ol { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--panel3); font-weight: 800; font-size: .8rem; flex: 0 0 26px; }
.opt:hover { border-color: var(--accent); }
.opt.sel { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--bg2)); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.right .ol::after { content: ''; }
.opts.locked .opt { cursor: default; }

.hints { margin-top: 10px; }
.hint { border-radius: 12px; padding: 10px 14px; margin-top: 8px; background: var(--warm-bg); border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent); animation: aparece .3s ease; }
.hint b { color: var(--warm); }

.pasos { margin-top: 14px; border-radius: 16px; border: 1px solid var(--line2); background: var(--bg2); padding: 14px; }
.pasos-t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pasos-t h4 { margin: 0; font-size: 1.05rem; flex: 1; }
.paso { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px dashed var(--line); animation: aparece .35s ease; }
.paso:first-of-type { border-top: 0; }
.paso .pn {
	width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .88rem;
	background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.paso .pb { flex: 1; min-width: 0; }
.paso .pb > b:first-child { display: block; margin-bottom: 4px; }
.paso .pb .scrollx { overflow-x: auto; }

.space { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.oc {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 34px; padding: 0 9px; border-radius: 9px;
	background: var(--panel2); border: 1px solid var(--line2); font-weight: 700; font-family: 'Cambria Math', Cambria, serif;
}
.oc.fav { background: color-mix(in srgb, var(--ok) 20%, var(--panel)); border-color: var(--ok); }
.oc.fav::after { content: '✓'; font-size: .7rem; margin-left: 4px; color: var(--ok); }
button.oc { cursor: pointer; color: var(--text); }
button.oc.sel { background: color-mix(in srgb, var(--accent-2) 22%, var(--panel)); border-color: var(--accent-2); }
button.oc.sel::after { content: '✓'; font-size: .7rem; margin-left: 4px; color: var(--accent-2); }
.oc.miss { border-style: dashed; border-color: var(--warm); }
.oc.extra { border-color: var(--bad); text-decoration: line-through; }

/* Tabla */
.tbl { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: center; }
.tbl th { background: var(--panel2); font-weight: 700; font-size: .82rem; }
.tbl td.l, .tbl th.l { text-align: left; }
.tbl tr.hi td { background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.tscroll { overflow-x: auto; max-width: 100%; }
.dtab td { width: 44px; height: 36px; font-weight: 700; cursor: default; }
.dtab td.on { background: color-mix(in srgb, var(--ok) 26%, transparent); outline: 2px solid var(--ok); outline-offset: -2px; }
.dtab th { width: 44px; }

/* ── Simuladores ────────────────────────────────────────────── */
.simbox { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.stage {
	border-radius: 18px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 16%, var(--bg2)), var(--bg2) 70%);
	border: 1px solid var(--line); min-height: 220px; display: grid; place-items: center; position: relative; padding: 16px;
}
.stage .res { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 1.1rem; }
.batch { display: flex; flex-wrap: wrap; gap: 6px; }
.batch .btn { min-width: 58px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.stat small { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 1.35rem; font-family: 'Cambria Math', Cambria, serif; }
.stat .sub { font-size: .8rem; color: var(--muted); }

/* Moneda 3D */
.coin { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, 1.4, .5, 1); }
.coin .face {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.coin .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coin .face.s { transform: rotateY(180deg); }

/* Dado */
.die {
	width: 96px; height: 96px; border-radius: 20px; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
	background: linear-gradient(145deg, #ffffff, #dfe4f5); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 10px 22px rgba(0, 0, 0, .35);
}
.die i { width: 18px; height: 18px; border-radius: 50%; background: #1e1b4b; place-self: center; visibility: hidden; }
.die i.v { visibility: visible; }
.die.sm { width: 40px; height: 40px; border-radius: 9px; padding: 5px; }
.die.sm i { width: 7px; height: 7px; }
.die.roll { animation: rodar .6s ease; }
@keyframes rodar { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(160deg) scale(.85); } 60% { transform: rotate(300deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
.dicegrid { display: flex; flex-wrap: wrap; gap: 5px; max-height: 96px; overflow: hidden; }

/* Bolas */
.balls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ball {
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 900; color: rgba(255, 255, 255, .9);
	box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .35), inset 4px 4px 8px rgba(255, 255, 255, .35); position: relative;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.ball.sm { width: 22px; height: 22px; font-size: .55rem; }
.ball.lg { width: 48px; height: 48px; font-size: .85rem; }
.ball.out { opacity: .25; transform: scale(.85); }
.ball.pick { animation: salta .6s ease; outline: 3px solid var(--accent-2); outline-offset: 2px; }
@keyframes salta { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) scale(1.1); } 100% { transform: translateY(0); } }
.bag {
	position: relative; width: 230px; min-height: 170px; margin: 0 auto; padding: 36px 18px 18px; border-radius: 26px 26px 60px 60px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--warm) 22%, var(--panel2)), color-mix(in srgb, var(--warm) 10%, var(--panel2)));
	border: 2px solid color-mix(in srgb, var(--warm) 45%, transparent);
}
.bag::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--warm) 45%, transparent); border-bottom: 0; }
.colorrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.colorrow .nm { flex: 1; font-weight: 600; }
.colorrow .ct { width: 34px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.colorrow .pp { width: 150px; text-align: right; font-size: .85rem; color: var(--muted); }

/* Ruleta */
.wheel-w { position: relative; width: 230px; height: 230px; }
.wheel-w svg.wh { width: 100%; height: 100%; transition: transform 2.2s cubic-bezier(.12, .8, .2, 1); }
.wheel-w .ptr { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--text); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); z-index: 2; }

/* Cartas */
.pcard {
	width: 70px; height: 100px; border-radius: 10px; background: #fff; color: #111; display: flex; flex-direction: column; justify-content: space-between;
	padding: 6px 7px; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); font-family: Georgia, serif; border: 1px solid #d4d4d8;
}
.pcard.red { color: #dc2626; }
.pcard .c { font-size: 1.9rem; text-align: center; line-height: 1; }
.pcard .b { transform: rotate(180deg); }
.pcard.back { background: repeating-linear-gradient(45deg, #5b3df5 0 6px, #7c5cff 6px 12px); border-color: #3b2a99; }
.pcard.flip { animation: voltea .5s ease; }
@keyframes voltea { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.deckmini { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.deckmini span { font-size: .7rem; text-align: center; border-radius: 4px; padding: 2px 0; background: #fff; color: #111; border: 1px solid #d4d4d8; font-weight: 700; }
.deckmini span.r { color: #dc2626; }
.deckmini span.on { outline: 2px solid var(--ok); background: #dcfce7; }

/* ── Gráficas SVG ───────────────────────────────────────────── */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.chart .ax { stroke: var(--line2); }
.chart .gl { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .theo { stroke: var(--warm); stroke-width: 2.2; stroke-dasharray: 6 4; fill: none; }
.chart .val { fill: var(--text); font-weight: 700; font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend i.dash { height: 0; border-top: 2px dashed var(--warm); border-radius: 0; width: 16px; vertical-align: 3px; }

/* Escala de probabilidad */
.scale { position: relative; margin: 34px 8px 50px; }
.scale .bar { height: 18px; border-radius: 99px; background: linear-gradient(90deg, #64748b, #f43f5e 12%, #fbbf24 50%, #22c55e 88%, #10b981); }
.scale .tick { position: absolute; top: 24px; transform: translateX(-50%); font-size: .78rem; color: var(--muted); text-align: center; white-space: nowrap; }
.scale .tick b { display: block; color: var(--text); font-size: .85rem; }
.scale .mk { position: absolute; top: -30px; transform: translateX(-50%); transition: left .5s ease; text-align: center; }
.scale .mk span { display: inline-block; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 2px 7px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.scale .mk::after { content: ''; display: block; width: 2px; height: 12px; background: var(--text); margin: 0 auto; }
.zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.zone {
	min-height: 64px; border-radius: 12px; border: 2px dashed var(--line2); padding: 6px; font-size: .78rem; text-align: center; cursor: pointer; background: var(--bg2);
	display: flex; flex-direction: column; gap: 4px; align-items: stretch; color: var(--text);
}
.zone:hover, .zone.over { border-color: var(--accent-2); }
.zone > b { font-size: .78rem; color: var(--muted); }
.token {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--panel2); border: 1.5px solid var(--line2);
	cursor: grab; font-size: .86rem; font-weight: 600; user-select: none; touch-action: manipulation; color: var(--text); text-align: left;
}
.token.sel { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 30%, transparent); }
.token.right { border-color: var(--ok); background: var(--ok-bg); }
.token.wrong { border-color: var(--bad); background: var(--bad-bg); }
.pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 10px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.bucket { min-height: 110px; border-radius: 14px; border: 2px dashed var(--line2); padding: 10px; background: var(--bg2); display: flex; flex-direction: column; gap: 6px; cursor: pointer; color: var(--text); text-align: left; }
.bucket > b { font-size: .85rem; }
.bucket.over { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, var(--bg2)); }

/* Árbol */
.tree svg { width: 100%; height: auto; display: block; }
.tree .br { stroke: var(--line2); stroke-width: 2.2; fill: none; transition: stroke .2s; }
.tree .br.on { stroke: var(--ok); stroke-width: 3.4; }
.tree .nd { fill: var(--panel2); stroke: var(--accent); stroke-width: 2; }
.tree .nd.root { fill: var(--accent); }
.tree .lf { cursor: pointer; }
.tree .lf rect { fill: var(--panel2); stroke: var(--line2); stroke-width: 1.5; }
.tree .lf.on rect { fill: color-mix(in srgb, var(--ok) 22%, var(--panel)); stroke: var(--ok); stroke-width: 2.2; }
.tree .lf:focus { outline: none; }
.tree .lf:focus rect { stroke: var(--accent-2); stroke-width: 3; }
.tree text { fill: var(--text); font-size: 13px; font-family: inherit; }
.tree text.pb { fill: var(--warm); font-size: 11.5px; font-weight: 700; font-family: 'Cambria Math', Cambria, serif; }
.tree text.lbl { font-weight: 700; }
.tree text.sm { font-size: 11px; fill: var(--muted); }
.tree .grow { animation: aparece .5s ease both; }

/* Combinaciones de ropa */
.combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.combo { border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); padding: 8px 4px; text-align: center; font-size: .72rem; animation: aparece .3s ease both; cursor: pointer; color: var(--text); }
.combo.on { border-color: var(--accent-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 40%, transparent); }
.combo svg { width: 60px; height: 70px; display: block; margin: 0 auto 2px; }
.cnt { display: inline-flex; align-items: center; gap: 6px; }
.cnt b { min-width: 26px; text-align: center; font-size: 1.15rem; }

/* Lluvia / cuadrícula 10×10 */
.grid100 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 320px; }
.grid100 span { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; font-size: .8rem; }
.grid100 span.a { background: color-mix(in srgb, var(--info) 35%, transparent); }
.grid100 span.b { background: color-mix(in srgb, var(--warm) 30%, transparent); }
.splitbar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; font-weight: 800; font-size: .95rem; margin: 10px 0; border: 1px solid var(--line); }
.splitbar > div { display: grid; place-items: center; transition: width .4s ease; white-space: nowrap; overflow: hidden; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.splitbar .a { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.splitbar .b { background: linear-gradient(90deg, #d97706, #fbbf24); }

/* ── Evaluaciones ──────────────────────────────────────────── */
.qprog { display: flex; gap: 4px; margin: 6px 0 14px; flex-wrap: wrap; }
.qprog i { flex: 1; min-width: 12px; height: 8px; border-radius: 99px; background: var(--panel3); }
.qprog i.cur { background: var(--accent-2); }
.qprog i.ok { background: var(--ok); }
.qprog i.bad { background: var(--bad); }
.qprog i.done { background: var(--accent); }
.timer { height: 10px; border-radius: 99px; background: var(--panel3); overflow: hidden; margin: 6px 0 12px; }
.timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--warm), var(--bad)); background-size: 300% 100%; transition: width 1s linear; }
.bigscore { text-align: center; padding: 10px 0 4px; }
.bigscore .n { font-size: 3.2rem; font-weight: 900; font-family: 'Cambria Math', Cambria, serif; line-height: 1; }
.bigscore .p { font-size: 1.1rem; color: var(--muted); }
.mastery { display: grid; gap: 8px; }
.mrow { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 52px; gap: 10px; align-items: center; font-size: .88rem; }
.mbar { height: 12px; border-radius: 99px; background: var(--panel3); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 99px; }
.lockbox { text-align: center; padding: 40px 20px; }
.lockbox .ic { font-size: 3rem; }

/* Insignias */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bdg { text-align: center; padding: 16px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.bdg .bi { font-size: 2.3rem; display: block; filter: grayscale(1); opacity: .35; }
.bdg.got .bi { filter: none; opacity: 1; }
.bdg.got { border-color: color-mix(in srgb, var(--warm) 50%, transparent); background: linear-gradient(180deg, var(--warm-bg), var(--panel)); }
.bdg b { display: block; font-size: .9rem; margin-top: 4px; }
.bdg small { color: var(--muted); font-size: .75rem; display: block; }

/* Inicio: ruta */
.route { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rstep {
	display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
	cursor: pointer; text-align: left; color: var(--text); transition: transform .15s ease, border-color .15s;
}
.rstep:hover { transform: translateY(-2px); border-color: var(--accent); }
.rstep .rn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: var(--panel2); flex: 0 0 44px; border: 1px solid var(--line); }
.rstep.done .rn { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.rstep.lock { opacity: .55; }
.rstep small { color: var(--muted); display: block; font-size: .78rem; }
.rstep .st { margin-left: auto; font-size: 1rem; }

/* Video */
.vbox { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.vbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vfacade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #111 center/cover no-repeat; display: grid; place-items: center; }
.vfacade .play { width: 84px; height: 60px; border-radius: 16px; background: #e11d48; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.vfacade .play::after { content: ''; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 6px; }
.vfacade .vt { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); text-align: left; }
.vfacade .vt small { display: block; font-weight: 500; opacity: .85; }

/* Toast / modal */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
	pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line2);
	box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; animation: entra .35s ease;
}
.toast .ti { font-size: 1.6rem; }
.toast.badge { border-color: var(--warm); background: linear-gradient(135deg, var(--warm-bg), var(--panel)); }
@keyframes entra { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal-bg { position: fixed; inset: 0; background: rgba(5, 8, 20, .6); z-index: 150; display: none; place-items: center; padding: 16px; }
.modal-bg.open { display: grid; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.xpfloat { position: fixed; z-index: 210; pointer-events: none; font-weight: 900; color: var(--warm); font-size: 1.1rem; animation: sube 1.2s ease forwards; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
@keyframes sube { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-50px); } }

.foot { text-align: center; color: var(--faint); font-size: .78rem; padding: 24px 0 0; }
.nextbar { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 8px 14px; border-radius: 12px; cursor: pointer; font-weight: 650; font-size: .88rem; }
.tabs button.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
details.acc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
details.acc summary { cursor: pointer; font-weight: 700; }
.demo-card { text-align: center; cursor: pointer; padding: 16px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: transform .15s ease, border-color .15s; }
.demo-card:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.demo-card .de { font-size: 2.2rem; display: block; }
.demo-card .dr { display: block; min-height: 26px; font-weight: 800; color: var(--accent-2); margin-top: 4px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.qa4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	#btnMenu { display: inline-flex; }
	nav#nav {
		position: fixed; top: 60px; bottom: 0; left: 0; z-index: 60; width: 290px; transform: translateX(-105%);
		transition: transform .25s ease; background: var(--bg2); box-shadow: var(--shadow);
	}
	nav#nav.open { transform: none; }
	#velo.open { display: block; position: fixed; inset: 60px 0 0 0; background: rgba(5, 8, 20, .5); z-index: 55; }
	.simbox { grid-template-columns: minmax(0, 1fr); }
	.simbox > * { min-width: 0; }
	.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prog-b { width: 90px; }
	.hero .deco { display: none; }
}
@media (max-width: 640px) {
	body { font-size: calc(15px * var(--z, 1)); }
	.zoom { display: none; }
	.wrap { padding: 16px 16px 70px; }
	.g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
	.btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
	.qa4 { grid-template-columns: 1fr 1fr; }
	.hero { padding: 24px 18px; }
	.hero h1 { font-size: 1.6rem; }
	.modhead h1 { font-size: 1.4rem; }
	.modnum { width: 48px; height: 48px; flex-basis: 48px; font-size: 1.3rem; }
	.brand > span:last-child, .prog > span:first-child, .xpchip .xpt { display: none; }
	.top { gap: 8px; padding: 0 10px; }
	.prog { flex: 1; justify-content: center; }
	.prog-b { width: 100%; max-width: 140px; }
	.rep3 b { font-size: 1.15rem; }
	.zones { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
	.zone { font-size: .66rem; padding: 4px 2px; }
	.mrow { grid-template-columns: 1fr 1fr 44px; }
	.card { padding: 16px; border-radius: 16px; }
	.colorrow .pp { width: auto; }
	.deckmini { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 1px; }
	.deckmini span { font-size: .55rem; }
	.formula { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
	.top, nav#nav, #velo, .ex-btns, #toasts { display: none !important; }
	.lay { position: static; }
	main#main { overflow: visible; }
	body { overflow: visible; background: #fff; color: #000; }
}

/* ── Conceptualización y glosario ───────────────────────────── */
.zoom { display: inline-flex; gap: 4px; }
.teoria details.acc { background: var(--panel2); }
.teoria details.acc > summary { font-size: 1.02rem; padding: 4px 0; }
.teoria details.acc[open] > summary { margin-bottom: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.acc-b { padding-top: 4px; }
.acc-b p, .acc-b li { max-width: 78ch; }
.acc-b ul, .acc-b ol { padding-left: 22px; margin: 0 0 .8em; }
.acc-b li { margin-bottom: 4px; }
.acc-b h4 { margin: 14px 0 4px; font-size: .98rem; color: var(--accent-2); }
.acc-b .tbl td:first-child { text-align: left; }
.acc-b .tbl { font-size: .9rem; margin: 8px 0 12px; }
.acc-b .grid { margin: 8px 0; }
dl.glos { margin: 0; display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 8px 16px; }
dl.glos dt { font-weight: 800; }
dl.glos dd { margin: 0; color: var(--muted); }
@media (max-width: 640px) { dl.glos { grid-template-columns: 1fr; gap: 2px; } dl.glos dd { margin-bottom: 8px; } }
@media print { .zoom, .teoria .card-t .btn { display: none !important; } details.acc:not([open]) > .acc-b { display: block; } }