:root{--bg:#f6f7fb;--panel:#fff;--ink:#1a1f36;--muted:#667085;--borde:#e4e7ec;--verde:#16a34a;--verde-s:#15803d;--verde-bg:#dcfce7;--rojo:#dc2626;--rojo-bg:#fee2e2;--azul:#2563eb;--azul-bg:#dbeafe;--oro:#f59e0b;--oro-bg:#fef3c7;--radio:16px;color-scheme:light;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0f1220;--panel:#181c30;--ink:#eef0f8;--muted:#9aa3b8;--borde:#2a3050;--verde:#22c55e;--verde-s:#16a34a;--verde-bg:#12351f;--rojo:#f87171;--rojo-bg:#3b1618;--azul:#60a5fa;--azul-bg:#14284a;--oro:#fbbf24;--oro-bg:#3a2d0c;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
a{color:var(--azul)}button{font:inherit;color:inherit}
#app{max-width:760px;margin:0 auto;padding:16px 16px 90px}
h1,h2,h3{line-height:1.2;margin:.2em 0 .4em}h1{font-size:1.6rem}h2{font-size:1.2rem}h3{font-size:1.05rem}
.cargando{text-align:center;color:var(--muted);padding:3rem 0}
.barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-bottom:12px}
.volver{text-decoration:none;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--borde);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.chip.fuego{color:var(--oro)}.chip.xp{color:var(--azul)}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin:12px 0}
.hero{background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff;border-radius:var(--radio);padding:18px;margin:8px 0 14px}
.hero h1{margin:0 0 4px}.hero p{margin:.3em 0;opacity:.95}
.progreso{height:10px;background:var(--borde);border-radius:99px;overflow:hidden;margin:8px 0}.progreso>i{display:block;height:100%;background:var(--verde);border-radius:99px;transition:width .4s}
.hero .progreso{background:rgba(255,255,255,.3)}.hero .progreso>i{background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--borde);border-bottom-width:4px;background:var(--panel);border-radius:14px;padding:11px 18px;font-weight:800;cursor:pointer;text-decoration:none;color:var(--ink);min-height:46px;text-transform:uppercase;letter-spacing:.03em;font-size:.88rem}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.verde{background:var(--verde);border-color:var(--verde-s);color:#fff}.btn.azul{background:var(--azul);border-color:#1d4ed8;color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}.btn.sm{padding:6px 12px;min-height:36px;font-size:.8rem}.btn.ancho{width:100%}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.unidad{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.unidad .num{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.15rem;background:var(--azul-bg);color:var(--azul)}
.unidad.hecha .num{background:var(--verde);color:#fff}.unidad.actual{border:2px solid var(--verde)}
.unidad .t{flex:1;min-width:0}.unidad .t b{display:block}.unidad .t small{color:var(--muted)}
.puntos{display:flex;gap:5px;margin-top:6px}.puntos i{width:22px;height:8px;border-radius:5px;background:var(--borde)}.puntos i.ok{background:var(--verde)}
.sem{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:18px 0 -4px}
.nodos{display:grid;gap:10px}
.nodo{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--panel);border:2px solid var(--borde);border-bottom-width:4px;border-radius:16px;padding:12px 14px;cursor:pointer;text-decoration:none;color:inherit}
.nodo .ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;background:var(--azul-bg)}
.nodo.ok .ic{background:var(--verde);color:#fff}.nodo b{display:block}.nodo small{color:var(--muted)}
.nodo .est{margin-left:auto;font-weight:800;color:var(--verde)}
.aviso{background:var(--oro-bg);border:1px solid var(--oro);border-radius:12px;padding:10px 12px;font-size:.92rem;margin:10px 0}
.nota{color:var(--muted);font-size:.9rem}
/* lección */
.jugar{display:flex;flex-direction:column;min-height:calc(100vh - 30px)}
.jugar-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.jugar-top .progreso{flex:1;margin:0}.cerrar{background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--muted);padding:4px 8px}
.ejercicio{flex:1}.ejercicio h2{font-size:1.3rem;margin-bottom:14px}
.ejercicio .sub{color:var(--muted);margin:-6px 0 12px}
.palabra-grande{font-size:2rem;font-weight:800;margin:8px 0}
.opciones{display:grid;gap:10px}
.op{display:flex;gap:12px;align-items:center;text-align:left;background:var(--panel);border:2px solid var(--borde);border-bottom-width:4px;border-radius:14px;padding:13px 14px;cursor:pointer;font-size:1.02rem;min-height:52px}
.op kbd{flex:none;width:26px;height:26px;border:1px solid var(--borde);border-radius:7px;display:grid;place-items:center;font-size:.8rem;color:var(--muted)}
.op.sel{border-color:var(--azul);background:var(--azul-bg)}
.op.bien{border-color:var(--verde);background:var(--verde-bg)}.op.mal{border-color:var(--rojo);background:var(--rojo-bg)}
.altavoz{background:var(--azul);color:#fff;border:0;border-bottom:4px solid #1d4ed8;border-radius:16px;font-size:1.6rem;width:72px;height:64px;cursor:pointer}
.altavoz.lento{background:var(--panel);color:var(--ink);border:2px solid var(--borde);border-bottom-width:4px;width:58px;height:52px;font-size:1.2rem}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.frase{font-size:1.2rem;line-height:1.6}.hueco{display:inline-block;min-width:3.5em;border-bottom:3px solid var(--azul);text-align:center;font-weight:800;color:var(--azul)}
.banco,.linea{display:flex;flex-wrap:wrap;gap:8px;min-height:54px;padding:8px 0}
.linea{border-top:2px solid var(--borde);border-bottom:2px solid var(--borde);margin:14px 0;align-content:flex-start}
.ficha{background:var(--panel);border:2px solid var(--borde);border-bottom-width:4px;border-radius:12px;padding:8px 13px;font-size:1.05rem;cursor:pointer;font-weight:600}
.ficha.fuera{visibility:hidden}
.entrada{width:100%;font:inherit;font-size:1.1rem;padding:12px;border-radius:12px;border:2px solid var(--borde);background:var(--panel);color:var(--ink);min-height:84px;resize:vertical}
.pie{position:sticky;bottom:0;margin:18px -16px -90px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:2px solid var(--borde)}
.pie.bien{background:var(--verde-bg);border-color:var(--verde)}.pie.mal{background:var(--rojo-bg);border-color:var(--rojo)}
.pie .msg{font-weight:800;margin-bottom:8px}.pie.bien .msg{color:var(--verde-s)}.pie.mal .msg{color:var(--rojo)}
.pie .det{font-size:.95rem;margin-bottom:10px}
.pie .btn{width:100%}
.tarj-pal{background:var(--panel);border:2px solid var(--borde);border-radius:18px;padding:22px;text-align:center}
.tarj-pal .es{font-size:1.3rem;color:var(--muted);margin:4px 0 12px}.tarj-pal .ej{font-size:1.05rem;margin:6px 0}.tarj-pal .ej small{display:block;color:var(--muted)}
.texto{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px;line-height:1.7;font-size:1.05rem}.texto p{margin:.5em 0}
.gram h3{margin-top:1.2em}.gram table{border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto}.gram td,.gram th{border:1px solid var(--borde);padding:6px 10px;text-align:left}
.gram .en,.en{color:var(--azul);font-weight:600;cursor:pointer}.gram .en::after{content:" 🔊";font-size:.75em}
.gram .ej{background:var(--azul-bg);border-radius:10px;padding:8px 12px;margin:8px 0}.gram .aviso b{display:block}
.fin{text-align:center;padding:20px 0}.fin .gran{font-size:4rem}.fin .stats{display:flex;gap:10px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.fin .stats div{background:var(--panel);border:2px solid var(--borde);border-radius:14px;padding:10px 16px;min-width:100px}.fin .stats b{display:block;font-size:1.4rem}
table.plan{width:100%;border-collapse:collapse;font-size:.92rem}.plan td,.plan th{border-bottom:1px solid var(--borde);padding:7px 8px;text-align:left;vertical-align:top}
.tabla-scroll{overflow-x:auto}
.recursos li{margin:.45em 0}
.pal-lista{display:grid;gap:6px}.pal-lista .item{display:flex;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:8px 12px}
.cajas{display:inline-flex;gap:3px}.cajas i{width:8px;height:8px;border-radius:50%;background:var(--borde)}.cajas i.on{background:var(--verde)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}