:root{--azul: #2f6fe4;--azul-osc: #1f3f8f;--naranja: #ff6b3d;--verde: #2fbf71;--rojo: #e5484d;--gris: #c9d1de;--gris-claro: #eef2f8;--texto: #1d2b4f;--suave: #6b7a99;--fondo: #ffffff;--tarjeta: #ffffff;--borde: #e3e8f1;--sombra: 0 4px 14px rgba(29, 43, 79, .08);--radio: 18px;--tabs-alto: 66px;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--texto);background:var(--fondo);-webkit-tap-highlight-color:transparent}@media (prefers-color-scheme: dark){:root{--texto: #e8edf7;--suave: #9aa8c4;--fondo: #0f1626;--tarjeta: #18223a;--borde: #26324d;--gris-claro: #1e2a44;--gris: #3a4766;--sombra: 0 4px 14px rgba(0,0,0,.35)}}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--fondo)}body{overscroll-behavior-y:none}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}h1{font-size:1.6rem;margin:.4em 0 .2em}h2{font-size:1.1rem;margin:1.2em 0 .6em}.sub{color:var(--suave);margin:.3em 0}.error{color:var(--rojo);font-weight:600}.centro{text-align:center}.app main{padding-bottom:calc(var(--tabs-alto) + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}.app.completa main{padding-bottom:0}.pagina{padding:16px 16px 24px;padding-top:calc(16px + env(safe-area-inset-top))}.cargando-app{display:grid;place-items:center;min-height:100vh}.btn{background:var(--azul);color:#fff;font-weight:800;padding:12px 20px;border-radius:14px;box-shadow:0 4px 0 var(--azul-osc);transition:transform .08s}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--azul-osc)}.btn:disabled{opacity:.5}.btn.grande{width:100%;padding:16px;font-size:1.1rem;margin-top:18px}.btn.secundario{background:var(--gris-claro);color:var(--texto);box-shadow:0 4px 0 var(--gris);width:100%;margin-top:18px}.btn-link{color:var(--azul);font-weight:700;padding:8px}.btn-icono{font-size:1.4rem;width:48px;height:48px;border-radius:50%;background:var(--gris-claro)}.btn-cerrar{font-size:1.3rem;color:var(--suave);width:40px;height:40px}.campo{width:100%;padding:13px 14px;border-radius:14px;border:2px solid var(--borde);font:inherit;background:var(--tarjeta);color:var(--texto);margin:6px 0}.campo:focus{outline:none;border-color:var(--azul)}.chip{background:#ffffff2e;color:#fff;padding:7px 12px;border-radius:999px;font-weight:800;font-size:.92rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.conv-cabecera .chip{background:var(--gris-claro);color:var(--texto)}.spinner{width:34px;height:34px;border:4px solid var(--gris-claro);border-top-color:var(--azul);border-radius:50%;animation:girar .8s linear infinite;margin:30px auto}@keyframes girar{to{transform:rotate(360deg)}}.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;height:calc(var(--tabs-alto) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--tarjeta);border-top:1px solid var(--borde);z-index:10}.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--suave);font-size:.78rem;font-weight:700;filter:grayscale(1);opacity:.7}.tab-icono{font-size:1.45rem}.tab.activa{color:var(--azul);filter:none;opacity:1}.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;max-width:420px;margin:0 auto}.perfiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;width:100%;margin-top:12px}.perfil{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:var(--radio);background:var(--tarjeta);border:2px solid var(--borde);font-weight:800}.perfil-avatar{font-size:2.4rem;line-height:1}.perfil-avatar.grande{font-size:4rem}.avatares{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}.avatares button{font-size:1.8rem;width:52px;height:52px;border-radius:14px;background:var(--gris-claro);border:3px solid transparent}.avatares button.sel{border-color:var(--azul)}.pin-puntos{display:flex;gap:12px;justify-content:center;margin:14px 0}.pin-puntos span{width:16px;height:16px;border-radius:50%;background:var(--gris)}.pin-puntos span.opcional{opacity:.4}.pin-puntos span.lleno{background:var(--azul);opacity:1}.teclado{display:grid;grid-template-columns:repeat(3,72px);gap:12px;justify-content:center}.teclado button{height:64px;border-radius:50%;background:var(--gris-claro);font-size:1.5rem;font-weight:800}.teclado button.ok{background:var(--verde);color:#fff}.teclado button:disabled{opacity:.35}.cabecera{position:relative;background:radial-gradient(120% 90% at 50% 20%,#4f8cff,#2856c7 55%,#1d3c8f);padding:calc(14px + env(safe-area-inset-top)) 16px 18px;min-height:290px;border-radius:0 0 28px 28px;overflow:hidden}.cabecera-fila{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}.cabecera-tutor{display:flex;justify-content:center;margin-top:14px}.btn-conversar{position:absolute;right:16px;bottom:18px;background:#3aa0ff;color:#fff;font-weight:800;padding:12px 18px;border-radius:999px;box-shadow:0 4px #1d6fc4;font-size:1.05rem}.nivel{display:flex;align-items:center;gap:14px;color:#8fa6c9;font-size:1.5rem;margin:26px 16px 4px}.nivel:before,.nivel:after{content:"";flex:1;height:2px;background:#c8d6ea}.ruta{position:relative;margin:0 16px}.ruta-linea{position:absolute;top:0;right:0;bottom:0;left:0}.nodo{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:140px}.nodo>button{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:7px solid var(--fondo);outline:3px solid var(--borde)}.nodo-icono{font-size:2.4rem}.nodo.completada>button{background:var(--verde);box-shadow:0 6px #1f8f53}.nodo.actual>button{background:var(--naranja);box-shadow:0 6px #c94a21;outline-color:#ffc4b0;animation:latir 1.8s ease-in-out infinite}.nodo.bloqueada>button{background:#b8bec9;box-shadow:0 6px #8e95a3}.nodo.bloqueada .nodo-icono{filter:grayscale(1) brightness(1.6);opacity:.9}@keyframes latir{50%{transform:scale(1.06)}}.candado,.check{position:absolute;right:-6px;bottom:-4px;width:34px;height:34px;border-radius:50%;background:var(--tarjeta);display:grid;place-items:center;font-size:1rem;box-shadow:var(--sombra)}.check{color:var(--verde);font-weight:900}.nodo-titulo{margin-top:12px;font-weight:800;color:var(--suave);text-align:center}.nodo.actual .nodo-titulo{color:var(--texto)}.fondo-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a142873;z-index:20;display:flex;align-items:flex-end}.hoja{width:100%;max-width:560px;margin:0 auto;background:var(--tarjeta);border-radius:26px 26px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom));animation:subir .2s ease-out}@keyframes subir{0%{transform:translateY(40px);opacity:0}}.hoja-titulo{font-size:1.4rem;font-weight:900;margin-bottom:12px}.hoja-titulo small{display:block;font-size:.95rem;color:var(--suave);font-weight:600}.leccion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;margin:8px 0;border-radius:16px;background:var(--gris-claro);font-weight:800}.leccion-btn .hecha{color:var(--verde)}.toast{position:fixed;left:50%;bottom:calc(var(--tabs-alto) + 20px);transform:translate(-50%);background:var(--texto);color:var(--fondo);padding:12px 18px;border-radius:14px;font-weight:700;z-index:30;width:max-content;max-width:90vw}.caja-error{margin:16px;padding:12px;border-radius:14px;background:#ffe9e9;color:var(--rojo)}.leccion{min-height:100vh;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}.leccion-barra{display:flex;align-items:center;gap:10px;margin-bottom:20px}.progreso{flex:1;height:14px;background:var(--gris-claro);border-radius:999px;overflow:hidden}.progreso div{height:100%;background:var(--verde);border-radius:999px;transition:width .3s}.tarjeta{flex:1;min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:2px solid var(--borde);border-radius:24px;background:var(--tarjeta);box-shadow:var(--sombra);cursor:pointer;padding:20px;text-align:center}.tarjeta-en{font-size:2.4rem;font-weight:900}.tarjeta-es{font-size:1.3rem;color:var(--suave)}.pregunta{text-align:center;margin:20px 0}.palabra-grande{font-size:2rem;font-weight:900}.btn-escuchar{font-size:2.6rem;width:110px;height:110px;border-radius:50%;background:var(--azul);box-shadow:0 6px 0 var(--azul-osc)}.opciones{display:grid;gap:10px}.opcion{padding:16px;border-radius:16px;border:2px solid var(--borde);border-bottom-width:5px;font-weight:800;font-size:1.05rem;background:var(--tarjeta)}.opcion.correcta{border-color:var(--verde);background:#e6f8ee;color:#15703f}.opcion.incorrecta{border-color:var(--rojo);background:#ffeaea;color:#a32025}.retro{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:16px;font-weight:800;position:sticky;bottom:10px}.retro.ok{background:#e6f8ee;color:#15703f}.retro.mal{background:#fff1e8;color:#b44a1a}.frase{text-align:center;margin:10px 0 20px}.frase-en{font-size:1.6rem;font-weight:900;line-height:1.3}.frase-es{color:var(--suave);font-size:1.1rem;margin-top:8px}.mic-zona{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0}.mic-zona.fila{flex-direction:row;justify-content:center;gap:14px;margin:0}.mic{width:86px;height:86px;border-radius:50%;background:var(--naranja);color:#fff;font-size:2.2rem;box-shadow:0 6px #c94a21}.mic.activo{background:var(--rojo);animation:latir 1s ease-in-out infinite}.mic:disabled{opacity:.5}.mic-ayuda{color:var(--suave);font-weight:700;min-width:120px}.dicho{text-align:center;font-size:1.15rem;font-style:italic}.escribir{display:flex;gap:8px;align-items:center}.resultado{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.resultado-emoji{font-size:5rem}.resultado-puntaje{font-size:3rem;font-weight:900;color:var(--azul);margin:0}.conversacion{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto}.conv-cabecera{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--borde)}.conv-titulo{flex:1;min-width:0}.conv-titulo b{display:block}.conv-titulo small{color:var(--suave)}.conv-tutor{display:flex;justify-content:center;padding:6px 0 0}.chat{flex:1;overflow-y:auto;padding:8px 14px 16px;display:flex;flex-direction:column;gap:10px}.msg{display:flex;flex-direction:column;max-width:86%}.tutor-msg{align-self:flex-start}.alumno-msg{align-self:flex-end;align-items:flex-end}.burbuja{padding:11px 14px;border-radius:18px;background:var(--gris-claro)}.burbuja p{margin:0;font-size:1.05rem;line-height:1.4}.alumno-msg .burbuja{background:var(--azul);color:#fff;border-bottom-right-radius:6px}.tutor-msg .burbuja{border-bottom-left-radius:6px}.burbuja.parcial{opacity:.6}.traduccion{color:var(--suave);font-style:italic;margin-top:6px!important;font-size:.95rem!important}.burbuja-acciones{display:flex;gap:6px;margin-top:6px}.burbuja-acciones button{font-size:.85rem;font-weight:700;color:var(--azul);padding:4px 8px;border-radius:10px;background:var(--tarjeta)}.palabras-nuevas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:.85rem}.palabras-nuevas span{background:var(--tarjeta);padding:3px 8px;border-radius:8px}.correccion{margin-top:6px;padding:10px 12px;border-radius:14px;background:#fff3e6;color:#8a3d12;font-size:.95rem;max-width:100%}.correccion .btn-link{padding:0;color:#8a3d12;text-align:left}.correccion small{display:block;margin-top:4px}.escribiendo{display:flex;gap:5px;padding:14px 16px}.escribiendo span{width:8px;height:8px;border-radius:50%;background:var(--suave);animation:rebote 1s infinite}.escribiendo span:nth-child(2){animation-delay:.15s}.escribiendo span:nth-child(3){animation-delay:.3s}@keyframes rebote{50%{transform:translateY(-5px);opacity:.5}}.felicitacion{background:#e6f8ee;color:#15703f;padding:14px;border-radius:16px;font-weight:700;text-align:center}.conv-pie{padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--borde);background:var(--fondo)}.conv-pie .mic{width:72px;height:72px;font-size:1.9rem}.tutor .antena{animation:brillar 2.4s ease-in-out infinite}.tutor .ojos{animation:parpadear 4s infinite;transform-origin:100px 88px}.tutor.hablando .boca{animation:hablar .25s ease-in-out infinite alternate;transform-origin:100px 113px}@keyframes brillar{50%{opacity:.5}}@keyframes parpadear{0%,92%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes hablar{to{transform:scaleY(2.6)}}.escenarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}.escenario{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border-radius:var(--radio);background:var(--tarjeta);border:2px solid var(--borde);border-bottom-width:5px}.escenario-icono{font-size:2.2rem}.escenario small{color:var(--suave)}.tarjetas-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{display:flex;flex-direction:column;align-items:center;padding:14px;border-radius:var(--radio);border:2px solid var(--borde);background:var(--tarjeta)}.stat span,.stat b{font-size:1.6rem}.stat small{color:var(--suave)}.aviso{background:#fff3e6;color:#8a3d12;padding:12px;border-radius:14px;font-weight:700}.ranking{display:flex;flex-direction:column;gap:8px}.ranking-fila{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--gris-claro)}.ranking-fila.yo{outline:2px solid var(--azul)}.ranking-fila .perfil-avatar{font-size:1.8rem}.ranking-nombre{flex:1;font-weight:800;min-width:0}.ranking-nombre small{color:var(--verde);font-weight:700}.puesto{width:26px;text-align:center;font-weight:900}.lista-palabras{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.lista-palabras button{text-align:left;padding:10px 12px;border-radius:12px;background:var(--gris-claro);display:flex;flex-direction:column}.lista-palabras span{color:var(--suave);font-size:.9rem}.caja{background:var(--tarjeta);border:2px solid var(--borde);border-radius:var(--radio);padding:14px 16px;margin:12px 0}.caja h2{margin-top:.4em}.perfil-cabeza{display:flex;align-items:center;gap:14px}.perfil-cabeza b{display:block;font-size:1.3rem}.perfil-cabeza small{color:var(--suave)}.segmentado{display:flex;gap:8px;margin:6px 0}.segmentado button{flex:1;padding:11px;border-radius:12px;background:var(--gris-claro);font-weight:800;border:2px solid transparent}.segmentado button.sel{border-color:var(--azul);color:var(--azul)}input[type=range]{width:100%;margin:6px 0 12px}