/* Ruta de Impacto · sistema de diseño de la app del alumno (familia Vorka: tinta, marfil, morado y oro).
   Todo sale de los tokens: colores (claro y oscuro), letra, espacios, radios, sombras y tiempos. Celular primero.
   El tema lo pone /ruta/tema.js en <html data-tema="claro|oscuro"> antes de pintar. Contraste AA en todo el texto:
   el oro solo va de adorno o como fondo con texto de tinta encima. */
:root {
  --fs-xs: 12.5px; --fs-s: 14.5px; --fs-m: 17px; --fs-l: 20px; --fs-xl: 24px; --fs-2xl: clamp(26px, 5.4vw, 34px);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 32px; --e8: 48px;
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 26px; --r: var(--r-l);
  --t-rap: 120ms; --t-med: 200ms; --t-len: 320ms; --ease: cubic-bezier(.2, .8, .2, 1); --rebote: cubic-bezier(.3, 1.4, .5, 1);
  --fx: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f: #fbfaf8; --s: #ffffff; --s2: #f4f2ef; --s3: #eceae6;
  --t: #141114; --t2: #5f5b60; --t3: #6c686d;
  --l: #e7e5e7; --l2: #d6d3d6;
  --a: #6b2a85; --a2: #f3ecf6; --a3: #e4d3ec; --on: #ffffff; --oro: #c8a45c; --oro-s: #f7efdc; --sobre-oro: #141114;
  --ok: #2b6a4e; --ok-s: #e9f2ec; --ok-b: #bcd8c7; --er: #9e4129; --er-s: #f8ece6; --er-b: #ecc7b8; --av: #8a5800; --av-s: #fbf1dc;
  --campo: #ffffff; --velo: rgba(23, 22, 26, .42); --bloq: #c9c5c9;
  --sombra: 0 1px 2px rgba(23, 22, 26, .04), 0 6px 18px -10px rgba(23, 22, 26, .14);
  --sombra-2: 0 2px 6px rgba(23, 22, 26, .06), 0 28px 60px -20px rgba(23, 22, 26, .28);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --f: #0f0d10; --s: #171519; --s2: #1e1b20; --s3: #262228; --t: #f4f2f5; --t2: #b4afb6; --t3: #9a959c; --l: #2a262c; --l2: #3a353d;
  --a: #c59bd9; --a2: #2a1c31; --a3: #3a2645; --on: #0f0d10; --oro: #e6cf96; --oro-s: #2b2416; --sobre-oro: #141114;
  --ok: #93c9ab; --ok-s: #142219; --ok-b: #2a4a38; --er: #e7a48e; --er-s: #2a1812; --er-b: #5a3226; --av: #e9c77f; --av-s: #282112;
  --campo: #131115; --velo: rgba(0, 0, 0, .62); --bloq: #4a454c;
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 36px -24px rgba(0, 0, 0, .8);
  --sombra-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px -20px rgba(0, 0, 0, .85);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) { --f: #0f0d10; --s: #171519; --s2: #1e1b20; --s3: #262228; --t: #f4f2f5; --t2: #b4afb6; --t3: #9a959c; --l: #2a262c; --l2: #3a353d;
    --a: #c59bd9; --a2: #2a1c31; --a3: #3a2645; --on: #0f0d10; --oro: #e6cf96; --oro-s: #2b2416; --ok: #93c9ab; --ok-s: #142219; --ok-b: #2a4a38; --er: #e7a48e; --er-s: #2a1812; --er-b: #5a3226;
    --campo: #131115; --velo: rgba(0, 0, 0, .62); --bloq: #4a454c; color-scheme: dark; }
}
html.tema-cambio, html.tema-cambio * { transition: background-color var(--t-len) var(--ease), color var(--t-len) var(--ease), border-color var(--t-len) var(--ease) !important; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--f); color: var(--t); font: var(--fs-m)/1.5 var(--fx); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--a); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nota { color: var(--t2); font-size: var(--fs-s); }
.pag { max-width: 760px; margin: 0 auto; padding: var(--e5) var(--e4) 120px; animation: entra var(--t-med) var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* ---------- logotipo: la ruta con nodos + la palabra ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; font-size: 19px; letter-spacing: -.045em; white-space: nowrap; color: var(--t); }
.logo .ruta-svg { flex: none; color: var(--t); }
.logo.grande { font-size: clamp(30px, 8vw, 44px); gap: 12px; } .logo.grande .ruta-svg { height: 36px; width: auto; }

/* ---------- barra, pestañas y menú lateral ---------- */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e4); padding-top: max(10px, env(safe-area-inset-top)); min-height: 60px;
  background: color-mix(in srgb, var(--f) 88%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--l); }
.barra .esp { flex: 1; } .barra .titulo { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-top { display: flex; gap: 6px; align-items: center; }
.chip-s { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: var(--s2); font-weight: 650; font-size: 15px; text-decoration: none; }
.chip-s svg { width: 18px; height: 18px; } .chip-s.fuego { color: var(--av); } .chip-s.fuego.viva { background: var(--oro-s); }
.chip-s.xp { color: var(--a); }
.ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; text-decoration: none; flex: none; }
.ico:hover { background: var(--s2); } .ico svg { width: 22px; height: 22px; }
.tabs { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--s) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--l); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { display: grid; justify-items: center; gap: 3px; min-height: 60px; padding: 8px 2px; text-decoration: none; font-size: 12.5px; font-weight: 500; color: var(--t3); }
.tabs a svg { width: 24px; height: 24px; } .tabs a[aria-current="page"] { color: var(--a); font-weight: 650; }
.lateral, .derecha { display: none; }
@media (min-width: 980px) {
  .tabs { display: none; } .con-menu { margin-left: 248px; }
  .lateral { display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 35; inset: 0 auto 0 0; width: 248px; padding: 20px 14px; background: var(--s); border-right: 1px solid var(--l); }
  .lateral .logo { padding: 4px 10px 22px; }
  .lateral a.nav { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-m); text-decoration: none; font-weight: 600; color: var(--t2); }
  .lateral a.nav svg { width: 22px; height: 22px; } .lateral a.nav:hover { background: var(--s2); color: var(--t); }
  .lateral a.nav[aria-current="page"] { background: var(--a2); color: var(--a); }
  .lateral .curso-l { margin-top: auto; font-size: 13px; color: var(--t3); padding: 0 12px; }
  .con-derecha { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .con-derecha > .pag { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
  .derecha { display: block; padding-top: 24px; } .derecha > * { position: sticky; top: 84px; }
  .solo-cel { display: none !important; }
}

/* ---------- botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 50px; padding: 10px 20px; border-radius: var(--r-m); border: 1px solid transparent;
  background: var(--s2); color: var(--t); font-weight: 650; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform var(--t-rap) var(--ease), background-color var(--t-rap), box-shadow var(--t-rap);
  -webkit-tap-highlight-color: transparent; user-select: none; }
.btn:hover { background: var(--s3); } .btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.prim { background: var(--t); color: var(--f); box-shadow: 0 4px 0 color-mix(in srgb, var(--t) 70%, var(--a)); } .btn.prim:hover { background: color-mix(in srgb, var(--t) 88%, var(--a)); }
.btn.morado { background: var(--a); color: var(--on); box-shadow: 0 4px 0 color-mix(in srgb, var(--a) 65%, #000); } .btn.morado:hover { background: color-mix(in srgb, var(--a) 90%, #000); }
.btn.ok { background: var(--ok); color: var(--s); box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 65%, #000); }
.btn.er { background: var(--er); color: var(--s); box-shadow: 0 4px 0 color-mix(in srgb, var(--er) 65%, #000); }
.btn.prim:active, .btn.morado:active, .btn.ok:active, .btn.er:active { transform: translateY(3px); box-shadow: none; }
.btn.borde { border-color: var(--l2); background: transparent; } .btn.borde:hover { background: var(--s2); }
.btn.chico { min-height: 40px; padding: 7px 14px; font-size: 14.5px; border-radius: var(--r-s); } .btn.bloque { width: 100%; }
.btn.link { background: none; min-height: 0; padding: 4px; color: var(--a); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.btn[aria-busy="true"] { pointer-events: none; } .btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(1turn); } }
.fila-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .fila-btns .btn { flex: 1 1 160px; }

/* ---------- tarjetas, avisos, campos ---------- */
.tarjeta { background: var(--s); border: 1px solid var(--l); border-radius: var(--r); padding: var(--e5); box-shadow: var(--sombra); }
.tarjeta + .tarjeta, .tarjeta + .sec, .sec + .tarjeta { margin-top: var(--e3); }
.tarjeta h2 { font-size: 19px; margin-bottom: 6px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 0 10px; } .sec h2 { font-size: 18px; }
.page-h { margin: 6px 0 18px; } .page-h h1 { font-size: var(--fs-2xl); } .page-h p { color: var(--t2); margin: 6px 0 0; }
.eyebrow { font-size: 12.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--a); margin-bottom: 6px; }
.banda { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: var(--r-m); padding: 13px 16px; margin-bottom: 14px; font-weight: 600; font-size: 15.5px; }
.banda.av { background: var(--av-s); color: var(--av); } .banda.er { background: var(--er-s); color: var(--er); } .banda.ok { background: var(--ok-s); color: var(--ok); } .banda.mo { background: var(--a2); color: var(--a); }
.banda p { margin: 0; flex: 1; min-width: 180px; }
.campo { display: grid; gap: 7px; margin: 0 0 16px; min-width: 0; } .campo > * { min-width: 0; }
.campo > span { font-size: 15px; font-weight: 600; } .campo small { color: var(--t3); font-weight: 500; font-size: 13px; }
.campo input, .campo select, .campo textarea, .inp { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r-s); border: 1.5px solid var(--l2); background: var(--campo); font-size: 17px; color: var(--t); }
.campo textarea, textarea.inp { padding: 12px 14px; min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .inp:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; margin: 8px 0 14px; } .check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--a); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--l2); background: var(--s); font-weight: 600; font-size: 15px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--a); background: var(--a2); color: var(--a); }

/* ---------- esqueletos y aviso breve ---------- */
.esq { display: block; border-radius: var(--r-m); background: linear-gradient(90deg, var(--s2) 0%, var(--s3) 40%, var(--s2) 80%); background-size: 300% 100%; animation: brillo 1.3s linear infinite; }
.esq.fila-e { height: 64px; margin-bottom: 8px; } .esq.linea { height: 14px; border-radius: 7px; } .esq.bloque-e { height: 150px; border-radius: var(--r); }
.esq.nodo-e { width: 72px; height: 72px; border-radius: 50%; margin: 22px auto 0; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.toast { position: fixed; z-index: 99; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); background: var(--t); color: var(--f); padding: 13px 18px; border-radius: var(--r-m);
  display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; box-shadow: var(--sombra-2); opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med) var(--ease); max-width: calc(100vw - 32px); }
.toast.ver { opacity: 1; transform: translate(-50%, 0); } .toast svg { width: 19px; height: 19px; flex: none; } .toast.er { background: var(--er-s); color: var(--er); }
.velo { position: fixed; inset: 0; z-index: 80; background: var(--velo); display: flex; align-items: flex-end; justify-content: center; animation: aparece var(--t-med) var(--ease); }
.hoja { width: 100%; max-width: 560px; max-height: 92svh; overflow: auto; background: var(--s); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sube var(--t-med) var(--ease); }
.hoja-c { padding: 18px var(--e5) var(--e6); position: relative; } .hoja-c h2 { font-size: 21px; margin: 0 44px 8px 0; } .hoja .cerrar { position: absolute; top: 8px; right: 8px; }
.velo.sale { animation: desaparece var(--t-med) forwards; }
@media (min-width: 700px) { .velo { align-items: center; } .hoja { border-radius: var(--r-xl); } }
@keyframes aparece { from { opacity: 0; } } @keyframes desaparece { to { opacity: 0; } } @keyframes sube { from { transform: translateY(40px); opacity: .6; } }

/* ---------- presentación y entrada ---------- */
.portada { min-height: 100svh; display: grid; align-content: center; gap: 22px; max-width: 560px; margin: 0 auto; padding: 32px 20px 48px; }
.portada .tag { font-size: clamp(22px, 5.4vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.portada .sub { color: var(--t2); margin: 0; }
.pasos-p { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pasos-p li { display: flex; gap: 12px; align-items: center; font-weight: 500; } .pasos-p li b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--a2); color: var(--a); flex: none; }
.pie-app { text-align: center; color: var(--t3); font-size: 13px; padding: 10px 16px 24px; } .pie-app a { color: var(--t2); }

/* ---------- mapa de la ruta ---------- */
.resumen-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.mini { background: var(--s); border: 1px solid var(--l); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.mini b { font-size: 21px; letter-spacing: -.02em; display: flex; align-items: center; gap: 5px; } .mini b svg { width: 20px; height: 20px; }
.mini span { color: var(--t2); font-size: 12.5px; font-weight: 500; }
.mini.fuego b { color: var(--av); } .mini.xp b { color: var(--a); }
.meta-barra { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; margin-top: 4px; } .meta-barra i { display: block; height: 100%; background: var(--oro); border-radius: 4px; transition: width var(--t-len) var(--ease); }
.nivel { margin: 0 0 30px; }
.nivel-h { border-radius: var(--r); padding: 16px 18px; background: var(--t); color: var(--f); display: grid; gap: 2px; position: relative; overflow: hidden; }
.nivel-h .eyebrow { color: var(--oro); margin: 0; } .nivel-h h2 { font-size: 21px; } .nivel-h p { margin: 0; color: color-mix(in srgb, var(--f) 78%, var(--t)); font-size: 14.5px; }
.nivel-h.bloq { background: var(--s2); color: var(--t2); } .nivel-h.bloq .eyebrow { color: var(--t3); } .nivel-h.bloq p { color: var(--t3); }
.nivel-h .ruta-fondo { position: absolute; right: -6px; bottom: -8px; opacity: .22; color: var(--oro); width: 120px; height: auto; }
.camino { position: relative; display: grid; justify-items: center; gap: 40px; padding: 40px 0 10px; }
.nodo { --x: 0px; z-index: 1; transform: translateX(var(--x)); display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--t); position: relative; }
.nodo .bola { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--a); color: var(--on); box-shadow: 0 6px 0 color-mix(in srgb, var(--a) 60%, #000); transition: transform var(--t-rap) var(--ease); }
.nodo .bola svg { width: 30px; height: 30px; }
.nodo:active .bola { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--a) 60%, #000); }
.nodo.hecha .bola { background: var(--a); }
.nodo.actual .bola { background: var(--oro); color: var(--sobre-oro); box-shadow: 0 6px 0 color-mix(in srgb, var(--oro) 55%, #000), 0 0 0 6px color-mix(in srgb, var(--oro) 28%, transparent); animation: late 2.2s ease-in-out infinite; }
.nodo.bloqueada .bola, .nodo.bloqueado .bola { background: var(--s3); color: var(--t3); box-shadow: 0 6px 0 var(--bloq); }
.nodo .et { font-size: 13.5px; font-weight: 600; max-width: 170px; text-align: center; line-height: 1.25; background: var(--f); padding: 3px 9px; border-radius: 10px; }
.nodo.bloqueada .et, .nodo.bloqueado .et { color: var(--t3); }
.nodo .burbuja { position: absolute; top: -34px; background: var(--t); color: var(--f); font-weight: 650; font-size: 13px; padding: 5px 10px; border-radius: 10px; white-space: nowrap; }
.nodo .burbuja::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--t); transform: translateX(-50%) rotate(45deg); }
.nodo.reto .bola, .nodo.examen .bola { border-radius: 22px; }
.nodo.entregado .bola { background: var(--ok); color: var(--s); box-shadow: 0 6px 0 color-mix(in srgb, var(--ok) 60%, #000); }
.camino-linea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.camino-linea .base { stroke: var(--l2); stroke-width: 6; fill: none; stroke-linecap: round; stroke-dasharray: 2 12; }
.camino-linea .hecho { stroke: var(--a); stroke-width: 6; fill: none; stroke-linecap: round; opacity: .85; }
@keyframes late { 50% { transform: scale(1.05); } }

/* ---------- lección (pantalla completa) ---------- */
.leccion { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; max-width: 720px; margin: 0 auto; }
.lec-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); position: sticky; top: 0; background: var(--f); z-index: 5; }
.avance { flex: 1; height: 14px; border-radius: 7px; background: var(--s3); overflow: hidden; }
.avance i { display: block; height: 100%; background: var(--a); border-radius: 7px; transition: width var(--t-len) var(--ease); }
.corazones, .reloj { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; } .corazones { color: var(--er); } .corazones svg, .reloj svg { width: 20px; height: 20px; }
.corazones svg.lleno { fill: currentColor; } .reloj.poco { color: var(--er); }
.lec-cuerpo { padding: 14px 18px 24px; }
.lec-cuerpo h2 { font-size: clamp(21px, 5vw, 26px); margin: 4px 0 14px; }
.lec-cuerpo .texto p, .lec-cuerpo .texto li { font-size: 17.5px; } .lec-cuerpo .texto ul { padding-left: 22px; margin: 0 0 10px; }
.tag-paso { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; margin-bottom: 4px; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--a); }
.tag-paso.repaso { color: var(--av); }
.ejemplo { border-left: 4px solid var(--oro); background: var(--oro-s); padding: 12px 14px; border-radius: 0 var(--r-s) var(--r-s) 0; margin-top: 12px; font-size: 16px; }
.cita-error { background: var(--s2); border-radius: var(--r-m); padding: 14px 16px; font-size: 17px; margin-bottom: 14px; border: 1.5px dashed var(--l2); }
.opciones { display: grid; gap: 10px; }
.op { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 58px; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--l2); border-bottom-width: 4px; background: var(--s); font-weight: 550; font-size: 16.5px; cursor: pointer;
  transition: border-color var(--t-rap), background-color var(--t-rap), transform var(--t-rap); }
.op:hover { background: var(--s2); } .op:active { transform: translateY(2px); }
.op[aria-pressed="true"], .op[aria-checked="true"] { border-color: var(--a); background: var(--a2); color: var(--a); }
.op .k { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; flex: none; opacity: .7; }
.op:disabled { cursor: default; } .op.bien { border-color: var(--ok); background: var(--ok-s); color: var(--ok); } .op.mal { border-color: var(--er); background: var(--er-s); color: var(--er); }
.vf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .vf .op { justify-content: center; font-weight: 650; }
.orden-r { min-height: 64px; border-bottom: 2px solid var(--l2); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; margin-bottom: 16px; }
.banco { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { min-height: 46px; padding: 9px 14px; border-radius: 12px; border: 2px solid var(--l2); border-bottom-width: 4px; background: var(--s); font-weight: 600; font-size: 15.5px; cursor: pointer; text-align: left; }
.ficha.usada { visibility: hidden; } .ficha .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--a); color: var(--on); font-size: 12px; margin-right: 6px; }
.pares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pares .col { display: grid; gap: 10px; align-content: start; }
.pares .ficha { width: 100%; min-height: 54px; }
.ficha[aria-pressed="true"] { border-color: var(--a); background: var(--a2); color: var(--a); }
.ficha.par { color: var(--t); } .ficha.par[data-c] { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--s)); }
.clasif { display: grid; gap: 10px; }
.clasif .el { background: var(--s); border: 1.5px solid var(--l2); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 8px; }
.clasif .el b { font-weight: 600; } .clasif .cajas { display: flex; gap: 8px; flex-wrap: wrap; } .clasif .cajas .chip { flex: 1 1 120px; }
.completar { font-size: 19px; line-height: 2.2; } .completar input { width: 9.5em; max-width: 100%; min-height: 44px; border: 0; border-bottom: 2.5px solid var(--a); background: var(--a2); border-radius: 8px 8px 0 0; padding: 4px 8px; font-size: 17px; font-weight: 600; text-align: center; }
.completar input:focus { outline: 2.5px solid var(--a); }
.mi-proy textarea { min-height: 150px; } .ayuda { color: var(--t2); font-size: 15px; display: flex; gap: 8px; align-items: flex-start; } .ayuda svg { width: 18px; height: 18px; color: var(--oro); flex: none; margin-top: 3px; }
.lec-pie { position: sticky; bottom: 0; padding: 14px 18px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--l); background: var(--f); }
.lec-pie .btn { width: 100%; min-height: 54px; font-size: 17px; }
.retro { border-top: 0; animation: sube var(--t-med) var(--ease); }
.retro.bien { background: var(--ok-s); color: var(--ok); } .retro.mal { background: var(--er-s); color: var(--er); }
.retro h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin-bottom: 6px; } .retro h3 svg { width: 26px; height: 26px; }
.retro .det { color: var(--t); font-size: 15.5px; margin-bottom: 12px; } .retro .det ol { margin: 6px 0; padding-left: 22px; } .retro .det .regla { font-weight: 650; }
.retro .det ul { margin: 4px 0 0; padding-left: 20px; }
@media (min-width: 720px) { .lec-pie { display: flex; justify-content: flex-end; gap: 12px; align-items: center; } .lec-pie .btn { width: auto; min-width: 200px; } .retro { display: grid; grid-template-columns: 1fr auto; } }

/* ---------- celebración ---------- */
.fin { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 18px; padding: 24px 20px; position: relative; overflow: hidden; max-width: 560px; margin: 0 auto; }
.fin h1 { font-size: clamp(28px, 7vw, 40px); } .fin .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fin .stat { border-radius: var(--r-m); border: 2px solid var(--l2); padding: 10px; display: grid; gap: 2px; } .fin .stat b { font-size: 24px; } .fin .stat span { font-size: 12.5px; color: var(--t2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fin .stat.oro { border-color: var(--oro); } .fin .stat.mo { border-color: var(--a); }
.medalla-g { width: 108px; height: 108px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: var(--sobre-oro); box-shadow: 0 8px 0 color-mix(in srgb, var(--oro) 55%, #000); animation: brinca .6s var(--rebote); }
.medalla-g svg { width: 54px; height: 54px; }
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confeti i { position: absolute; border-radius: 2px; }
@keyframes brinca { from { transform: scale(.4); opacity: 0; } }

/* ---------- mi proyecto, retos, perfil ---------- */
.lista { display: grid; gap: 10px; }
.fila { display: flex; align-items: center; gap: 12px; background: var(--s); border: 1px solid var(--l); border-radius: var(--r-m); padding: 14px 16px; text-decoration: none; min-width: 0; }
.fila .t { flex: 1; min-width: 0; display: grid; gap: 2px; } .fila .t b { font-weight: 600; overflow-wrap: anywhere; } .fila .t small { color: var(--t2); font-size: 13.5px; }
.fila > svg { width: 20px; height: 20px; color: var(--t3); flex: none; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--s2); color: var(--t2); white-space: nowrap; }
.pill.ok { background: var(--ok-s); color: var(--ok); } .pill.mo { background: var(--a2); color: var(--a); } .pill.av { background: var(--av-s); color: var(--av); } .pill.er { background: var(--er-s); color: var(--er); }
.respuesta { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--s2); border-radius: var(--r-s); padding: 10px 12px; margin: 8px 0 0; font-size: 15.5px; }
.criterios { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.criterios li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.criterios li .m { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--s3); color: var(--t3); margin-top: 1px; } .criterios li .m svg { width: 15px; height: 15px; }
.criterios li.si .m { background: var(--ok); color: var(--s); } .criterios li .falta { display: block; color: var(--er); font-size: 14px; }
.criterios li.si .tx { color: var(--t2); }
.item-lista { display: flex; gap: 8px; margin-bottom: 8px; } .item-lista .inp { flex: 1; min-width: 0; }
.tabla-w { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--l); border-radius: var(--r-s); margin-bottom: 8px; }
.tabla { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
.tabla th { text-align: left; font-weight: 650; font-size: 13px; color: var(--t2); padding: 8px; background: var(--s2); }
.tabla td { padding: 6px; border-top: 1px solid var(--l); } .tabla td .inp { min-height: 42px; font-size: 15px; padding: 0 8px; } .tabla td.calc { font-weight: 650; text-align: right; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; background: var(--s2); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--s2); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .foto .ico { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; background: color-mix(in srgb, var(--t) 70%, transparent); color: var(--f); }
.foto.agregar { display: grid; place-items: center; border: 2px dashed var(--l2); background: transparent; cursor: pointer; color: var(--t2); font-weight: 600; font-size: 13.5px; text-align: center; padding: 6px; }
.foto.agregar svg { width: 26px; height: 26px; }
.insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.insignia { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 10px; border-radius: var(--r-m); border: 1px solid var(--l); background: var(--s); }

.insignia b { font-size: 14.5px; } .insignia small { color: var(--t2); font-size: 12.5px; } .insignia.no b { color: var(--t2); }
.cal-g { display: flex; align-items: baseline; gap: 6px; } .cal-g b { font-size: 44px; letter-spacing: -.03em; } .cal-g span { color: var(--t2); font-weight: 600; }
.partes { display: grid; gap: 12px; margin-top: 12px; }
.parte { display: grid; gap: 4px; } .parte .tt { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 600; } .parte .tt span { color: var(--t2); font-variant-numeric: tabular-nums; }
.barra-p { height: 10px; border-radius: 5px; background: var(--s3); overflow: hidden; } .barra-p i { display: block; height: 100%; background: var(--a); border-radius: 5px; }
.curso-c { display: grid; gap: 8px; text-decoration: none; }
.examen-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.examen-info div { background: var(--s2); border-radius: var(--r-m); padding: 12px; display: grid; } .examen-info b { font-size: 22px; } .examen-info span { color: var(--t2); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .confeti { display: none; } .nodo.actual .bola { animation: none; }
}
@media print { .barra, .tabs, .lateral, .derecha { display: none !important; } .con-menu { margin: 0; } }

/* ---------- microinteracciones (dirección de diseño: táctil como Duolingo, fino como Vorka) ---------- */
/* El check se dibuja con trazo */
.nodo.hecha .bola svg path, .retro.bien h3 svg path, .criterios li.si .m svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: traza .45s var(--ease) .05s forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.avance i { position: relative; overflow: hidden; } .avance i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.retro .xp-g { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--a); background: var(--s); padding: 2px 8px; border-radius: 999px; }
.retro .xp-g svg { width: 14px; height: 14px; }
.tutor { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-bottom: 2px; } .tutor svg { width: 16px; height: 16px; }
/* Anillo de la meta diaria (XP del día contra la meta) */
.anillo { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; text-decoration: none; }
.anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); } .anillo circle { fill: none; stroke-width: 4; } .anillo .fondo { stroke: var(--s3); } .anillo .lleno { stroke: var(--oro); stroke-linecap: round; transition: stroke-dashoffset var(--t-len) var(--ease); }
.anillo b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; } .anillo.ok .lleno { stroke: var(--a); }
.sonido { color: var(--t2); }
/* Medallas: formas geométricas con metal (oro, plata, bronce); bloqueadas, en gris */
.insignia .medalla-svg { width: 64px; height: 64px; } .insignia.ganada .medalla-svg { animation: brillo-m 1.2s var(--ease) both; }
.insignia.ganada { position: relative; overflow: hidden; } .insignia.ganada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: destello 1.4s var(--ease) .2s 1 forwards; pointer-events: none; }
:root[data-tema="oscuro"] .insignia.ganada::after { background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); }
@keyframes destello { to { transform: translateX(120%); } } @keyframes brillo-m { from { transform: scale(.85); opacity: 0; } }
.insignia.no .medalla-svg { filter: grayscale(1); opacity: .45; }
.fin .stat b { font-variant-numeric: tabular-nums; }
.confeti i { width: 6px; height: 10px; animation: cae .85s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes cae { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
.confeti i { top: 34%; left: 50%; }
/* La hoja de retroalimentación ocupa todo el ancho (el contenido queda centrado) */
@media (min-width: 720px) { .lec-pie { margin: 0 calc(50% - 50vw); padding-left: max(18px, calc(50vw - 342px)); padding-right: max(18px, calc(50vw - 342px)); } }
/* En oscuro, el encabezado del nivel sigue siendo la pieza más rica de la pantalla (no una tarjeta clara) */
:root[data-tema="oscuro"] .nivel-h:not(.bloq) { background: linear-gradient(135deg, #2a1c31, #1b1420); color: var(--t); border: 1px solid #3a2645; }
:root[data-tema="oscuro"] .nivel-h:not(.bloq) p { color: var(--t2); }
/* «mi-proyecto»: lo que escribió antes (muestra) y el ejemplo de su tema */
.muestra { background: var(--a2); border-radius: var(--r-m); padding: 12px 14px; margin: 6px 0 14px; } .muestra span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a); }
.muestra p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; }
.ejemplo-d summary { cursor: pointer; color: var(--a); font-weight: 600; font-size: 15px; min-height: 40px; display: flex; align-items: center; } .ejemplo-d .ejemplo { margin-top: 4px; }
.completar + .banco { margin-top: 14px; }
.campo .op-t { color: var(--t3); font-weight: 500; font-size: 13px; }
.tag-paso svg { width: 16px; height: 16px; flex: none; }
.completar input { width: 7.5em; }