:root{
  --verde:#0f7a4a; --verde-claro:#1fae6b; --verde-suave:#e3f6ec;
  --amarillo:#f5b800; --amarillo-suave:#fff6d6;
  --azul:#2563c9; --azul-suave:#e6eefc;
  --rojo:#d93a3a; --rojo-suave:#fde8e8;
  --fondo:#f6f7f4; --tarjeta:#ffffff; --texto:#1d2420; --suave:#6b746f; --borde:#e2e5e0;
  --sombra:0 2px 0 rgba(0,0,0,.08);
  --radio:18px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --verde:#2fbf7a; --verde-claro:#3fd38b; --verde-suave:#173226;
    --amarillo:#f5c432; --amarillo-suave:#332a0c;
    --azul:#6b9cf0; --azul-suave:#18243a;
    --rojo:#f06464; --rojo-suave:#3a1c1c;
    --fondo:#121614; --tarjeta:#1b201d; --texto:#eef2ef; --suave:#9aa49e; --borde:#2b322e;
    --sombra:0 2px 0 rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--texto);font-family:ui-rounded,"SF Pro Rounded","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.4}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.cargando{margin:auto;color:var(--suave)}

/* barra superior */
.top{position:sticky;top:0;z-index:5;background:var(--fondo);display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--borde)}
.top .marca{font-weight:800;font-size:20px;color:var(--verde);margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:4px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--tarjeta);border:1px solid var(--borde);font-size:15px}
.chip.fuego{color:#e8590c}.chip.xp{color:var(--amarillo)}

/* pestañas de nivel */
.niveles{display:flex;gap:8px;padding:12px 16px 4px}
.niveles{gap:6px}
.niveles button{flex:1;min-width:0;padding:8px 2px;border-radius:14px;font-weight:700;background:var(--tarjeta);border:2px solid var(--borde);font-size:14px;overflow:hidden;text-overflow:ellipsis}
.niveles button.activo{border-color:var(--verde);background:var(--verde-suave);color:var(--verde)}
.niveles small{display:block;font-weight:600;color:var(--suave);font-size:12px}

.contenido{flex:1;padding:8px 16px 110px}
.cabecera-nivel{background:var(--verde);color:#fff;border-radius:var(--radio);padding:16px;margin:8px 0 18px;box-shadow:var(--sombra)}
.cabecera-nivel h2{margin:0 0 4px;font-size:20px}
.cabecera-nivel p{margin:0;opacity:.9;font-size:15px}
.barra-prog{height:10px;background:rgba(255,255,255,.3);border-radius:99px;margin-top:10px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:#fff;border-radius:99px}

/* camino */
.camino{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:20px}
.nodo{display:flex;flex-direction:column;align-items:center;gap:4px;width:130px}
.nodo .circulo{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:var(--verde-claro);box-shadow:0 6px 0 var(--verde);transition:transform .1s}
.nodo .circulo:active{transform:translateY(4px);box-shadow:0 2px 0 var(--verde)}
.nodo.hecho .circulo{background:var(--amarillo);box-shadow:0 6px 0 #c08f00}
.nodo.bloq .circulo{background:var(--borde);box-shadow:0 6px 0 #c8ccc6;filter:grayscale(1);opacity:.7}
.nodo.actual .circulo{outline:4px solid var(--verde-suave);outline-offset:4px}
.nodo .nombre{font-size:14px;font-weight:700;text-align:center;line-height:1.2}
.nodo .estrellas{font-size:13px;letter-spacing:1px;min-height:16px;color:var(--amarillo)}

/* navegación inferior */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--tarjeta);border-top:1px solid var(--borde);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.nav div{max-width:560px;margin:0 auto;display:flex}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:12px;font-size:12px;font-weight:700;color:var(--suave)}
.nav button span{font-size:24px}
.nav button.activo{color:var(--verde);background:var(--verde-suave)}

/* botones */
.btn{display:block;width:100%;padding:15px;border-radius:16px;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.3px;background:var(--verde-claro);color:#fff;box-shadow:0 4px 0 var(--verde)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--verde)}
.btn:disabled{background:var(--borde);color:var(--suave);box-shadow:0 4px 0 #c8ccc6;cursor:default}
.btn.sec{background:var(--tarjeta);color:var(--azul);border:2px solid var(--borde);box-shadow:0 4px 0 var(--borde)}
.btn.rojo{background:var(--rojo);box-shadow:0 4px 0 #a32626}
.fila-btn{display:flex;flex-direction:column;gap:12px;margin-top:16px}

/* hoja de lección */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.hoja{background:var(--tarjeta);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:22px 16px calc(22px + env(safe-area-inset-bottom));animation:sube .2s ease-out}
@keyframes sube{from{transform:translateY(40px);opacity:0}}
.hoja h3{margin:0;font-size:22px}.hoja .pt{color:var(--suave);margin:2px 0 6px}
.tarjeta{background:var(--tarjeta);border:2px solid var(--borde);border-radius:var(--radio);padding:14px;margin-bottom:12px}

/* pantalla de teoría */
.volver{font-size:26px;padding:4px 8px;margin-left:-8px}
.titulo-pant{font-weight:800;font-size:18px;margin-right:auto}
.nota{background:var(--azul-suave);border-radius:14px;padding:12px 14px;margin:0 0 10px;font-size:16px}
.lista-vocab{list-style:none;margin:0;padding:0}
.lista-vocab li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--borde)}
.lista-vocab li:last-child{border-bottom:0}
.lista-vocab .p{font-weight:700}.lista-vocab .e{color:var(--suave);font-size:15px}
.lista-vocab .txt{flex:1}
.altavoz{width:40px;height:40px;flex:none;border-radius:12px;background:var(--azul-suave);font-size:19px}
.altavoz:active{transform:scale(.92)}
h4.sec{margin:20px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave)}
table.conj{width:100%;border-collapse:collapse;font-size:16px}
table.conj td{padding:7px 6px;border-bottom:1px solid var(--borde)}
table.conj td:first-child{color:var(--suave);width:44%}
table.conj td:last-child{font-weight:700}
audio{width:100%;margin:4px 0 8px}

/* práctica */
.prac{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.prac-top{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 8px}
.prac-top .cerrar{font-size:26px;color:var(--suave);padding:0 4px}
.prog{flex:1;height:16px;background:var(--borde);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--verde-claro);border-radius:99px;transition:width .3s}
.vidas{font-weight:800;color:var(--rojo);white-space:nowrap}
.ejer{flex:1;padding:12px 16px 16px;display:flex;flex-direction:column}
.enunciado{font-size:22px;font-weight:800;margin:6px 0 16px}
.pregunta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pregunta .bocadillo{flex:1;border:2px solid var(--borde);border-radius:16px;padding:12px 14px;font-size:20px;font-weight:600}
.altavoz.grande{width:64px;height:64px;font-size:30px;border-radius:18px;background:var(--azul);color:#fff;box-shadow:0 4px 0 #1b4a96}
.altavoz.lento{width:48px;height:48px;font-size:20px}
.escuchar-zona{display:flex;gap:14px;justify-content:center;align-items:center;margin:10px 0 22px}
.opciones{display:grid;gap:10px}
.op{text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--borde);background:var(--tarjeta);box-shadow:0 3px 0 var(--borde);font-size:18px;font-weight:600}
.op.sel{border-color:var(--azul);background:var(--azul-suave);box-shadow:0 3px 0 var(--azul)}
.op.ok{border-color:var(--verde-claro);background:var(--verde-suave)}
.op.mal{border-color:var(--rojo);background:var(--rojo-suave)}
.op.hecho{opacity:.35;pointer-events:none}
.parejas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.parejas .op{text-align:center;font-size:16px;padding:12px 8px}
.respuesta-linea{min-height:64px;border-bottom:2px solid var(--borde);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:6px 0 10px;margin-bottom:18px}
.banco{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ficha{padding:9px 13px;border-radius:12px;border:2px solid var(--borde);background:var(--tarjeta);box-shadow:0 3px 0 var(--borde);font-size:17px;font-weight:600}
.ficha.vacia{color:transparent;background:var(--borde);box-shadow:none;pointer-events:none}
textarea.escribir{width:100%;min-height:110px;border:2px solid var(--borde);border-radius:16px;padding:12px;font:inherit;font-size:19px;background:var(--tarjeta);color:var(--texto);resize:none}
textarea.escribir:focus{outline:none;border-color:var(--azul)}
.teclas{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.teclas button{padding:6px 11px;border:2px solid var(--borde);border-radius:10px;background:var(--tarjeta);font-weight:700}
.pie{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:2px solid var(--borde)}
.pie.ok{background:var(--verde-suave);border-color:transparent}
.pie.mal{background:var(--rojo-suave);border-color:transparent}
.pie .msg{font-weight:800;font-size:20px;margin-bottom:4px}
.pie.ok .msg{color:var(--verde)}.pie.mal .msg{color:var(--rojo)}
.pie .sol{margin-bottom:12px;font-size:16px}
.pie.mal .btn{background:var(--rojo);box-shadow:0 4px 0 #a32626}

/* resultado */
.resultado{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
.resultado .grande{font-size:72px}
.resultado h2{font-size:26px;margin:8px 0}
.stats{display:flex;gap:10px;margin:18px 0 28px;width:100%}
.stats div{flex:1;border:2px solid var(--borde);border-radius:16px;padding:10px}
.stats b{display:block;font-size:22px}
.stats small{color:var(--suave);font-weight:700}

/* perfil */
.cuadros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 16px}
.cuadros div{background:var(--tarjeta);border:2px solid var(--borde);border-radius:16px;padding:12px}
.cuadros b{font-size:24px;display:block}
.cuadros small{color:var(--suave);font-weight:700}
.ajuste{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--borde)}
.ajuste:last-child{border-bottom:0}
.ajuste small{display:block;color:var(--suave);font-size:14px}
.ajuste input{width:22px;height:22px;accent-color:var(--verde)}
.ajuste select{font:inherit;padding:6px;border-radius:10px;border:2px solid var(--borde);background:var(--tarjeta);color:var(--texto)}
.vacio{text-align:center;color:var(--suave);padding:40px 10px}
.vacio .grande{font-size:56px}

#aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:30;background:var(--texto);color:var(--fondo);padding:10px 16px;border-radius:14px;font-size:14px;font-weight:600;max-width:92vw;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.descarga{background:var(--amarillo-suave);border:2px solid var(--amarillo);border-radius:16px;padding:12px 14px;margin:8px 0 6px;font-size:15px}
.descarga .barra{height:8px;background:var(--borde);border-radius:99px;margin-top:8px;overflow:hidden}
.descarga .barra i{display:block;height:100%;background:var(--amarillo)}
.descarga.instalar{background:var(--verde-suave);border-color:var(--verde-claro)}
.entrar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center}
.entrar img{border-radius:22px;box-shadow:var(--sombra)}
.entrar h1{margin:14px 0 2px;font-size:30px;color:var(--verde)}
.entrar .sub{color:var(--suave);margin:0 0 20px}
.entrar form{width:100%;max-width:380px;text-align:left;display:flex;flex-direction:column;gap:14px;padding:18px}
.entrar label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.entrar input{font:inherit;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid var(--borde);background:var(--fondo);color:var(--texto)}
.entrar input:focus{outline:none;border-color:var(--azul)}
.entrar .error{color:var(--rojo);font-weight:700;margin:0;font-size:15px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}