:root{--bg:#f5f8ff;--surface:#fff;--text:#0b1220;--text-soft:#3d4a63;--border:#c5cce1;--subtle:#eef2fc;--muted:#3d4a63;--muted-bg:#e6ecfa;--orange:#2e5be8;--orange-strong:#1b3bb8;--gold:#f59e0b;--primary-tint:#dce1f1;--primary:#2e5be8;--primary-deep:#1b3bb8;--primary-soft:#dce1f1;--primary-mist:#c5cce1;--accent:#e4896d;--accent-ink:#5f4426;--outline:#0b1220;--green:#15803d;--green-soft:#dcfce7;--success-border:#bbf7d0;--warning:#5f4426;--warning-bg:#fde8de;--warning-border:#f5c6af;--info:#1b3bb8;--info-bg:#dce1f1;--danger:#b91c1c;--danger-bg:#fee2e2;--notice-bg:#fde8de;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-full:999px;--border-w:3px;--shadow-hard:4px 4px 0 var(--outline);--shadow-hard-sm:3px 3px 0 var(--outline);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.55 system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background-image:radial-gradient(var(--primary-mist) 1.5px, transparent 1.5px);background-size:22px 22px;background-attachment:fixed;margin:0}#root{min-height:100svh}h1,h2,p{margin:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.app{background:var(--bg);flex-direction:column;gap:20px;max-width:480px;min-height:100svh;margin:0 auto;padding:24px 20px 32px;display:flex}.topbar{align-items:center;gap:14px;display:flex}.avatar-wrap{position:relative}.avatar{background:var(--primary-tint);border:3px solid var(--orange);border-radius:999px;place-items:center;width:64px;height:64px;font-size:34px;display:grid}.level-pip{min-width:24px;height:24px;color:var(--surface);background:var(--orange-strong);border:2px solid var(--surface);border-radius:12px;place-items:center;padding:0 6px;font-size:13px;font-weight:700;display:grid;position:absolute;bottom:-2px;right:-2px}.identity{flex:1;min-width:0}.name{letter-spacing:-.01em;font-size:24px;font-weight:800;line-height:1.15}.power{color:var(--text-soft);font-size:14px}.streak{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}.xp{flex-direction:column;gap:6px;display:flex}.xp-labels{color:var(--text-soft);justify-content:space-between;font-size:14px;font-weight:600;display:flex}.xp-bar{background:var(--subtle);border-radius:999px;height:10px;overflow:hidden}.xp-fill{background:linear-gradient(90deg, var(--gold), var(--orange));border-radius:999px;height:100%;transition:width .4s}.briefing{text-align:center}.briefing-title{font-size:20px;font-weight:800;line-height:1.3}.briefing-sub{color:var(--text-soft);margin-top:2px;font-size:14px}.missions{gap:12px;display:grid}.mission{text-align:left;background:var(--surface);border:1px solid var(--border);cursor:pointer;font:inherit;border-radius:12px;grid-template-columns:auto 1fr auto;grid-template-areas:"icon body status""icon body xp";align-items:center;gap:4px 12px;padding:16px;transition:transform .12s,box-shadow .12s;display:grid}.mission:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.mission-icon{grid-area:icon;font-size:30px;line-height:1}.mission-body{flex-direction:column;grid-area:body;display:flex}.mission-title{font-size:17px;font-weight:700;line-height:1.3}.mission-subtitle{color:var(--text-soft);font-size:14px}.mission-status{white-space:nowrap;border-radius:999px;grid-area:status;padding:4px 10px;font-size:13px;font-weight:700}.mission-status.done{background:var(--green-soft);color:var(--green)}.mission-status.recommended{background:var(--warning-bg);color:var(--warning)}.mission-status.available{background:var(--info-bg);color:var(--info)}.mission-status.locked{background:var(--muted-bg);color:var(--muted)}.mission-xp{color:var(--orange-strong);grid-area:xp;font-size:14px;font-weight:700}.transformations{flex-direction:column;gap:10px;display:flex}.section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);font-size:14px;font-weight:700}.tf-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tf{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;display:flex}.tf.locked{opacity:.45;filter:grayscale()}.tf-icon{font-size:24px;line-height:1}.tf-label{color:var(--text-soft);font-size:13px;font-weight:700}.notice{text-align:center;color:var(--orange-strong);background:var(--notice-bg);border:1px solid var(--primary-tint);border-radius:12px;padding:12px;font-size:14px;font-weight:600}.footer{color:var(--text-soft);justify-content:center;gap:6px;margin-top:auto;font-size:13px;display:flex}.footer-dot{opacity:.6}.back{font:inherit;color:var(--text-soft);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;align-self:flex-start;padding:8px 14px;font-size:14px;font-weight:700}.back.primary{color:var(--surface);background:var(--orange-strong);border-color:var(--orange-strong);align-self:center}.reto-head{align-items:center;gap:12px;margin-top:8px;display:flex}.reto-icon{font-size:34px;line-height:1}.reto-title{font-size:20px;font-weight:800;line-height:1.2}.reto-sub{color:var(--text-soft);font-size:14px}.reto-question{font-size:20px;font-weight:600;line-height:1.45}.reto-question-row{align-items:flex-start;gap:10px;display:flex}.reto-question-row .reto-question{flex:1}.speak{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;flex:none;padding:10px;font-size:20px;line-height:1}.speak:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.reto-options{gap:10px;display:grid}.reto-option{text-align:left;font:inherit;background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:16px;font-size:17px;font-weight:700;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex}.reto-option:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.reto-option:disabled{cursor:default}.reto-option-key{width:28px;height:28px;color:var(--text-soft);background:var(--subtle);border-radius:999px;flex:none;place-items:center;font-size:14px;font-weight:700;display:grid}.feedback{border-radius:12px;padding:14px;font-size:14px;font-weight:600}.feedback.ok{color:var(--green);background:var(--green-soft);border:1px solid var(--success-border)}.feedback.hint{color:var(--warning);background:var(--warning-bg);border:1px solid var(--warning-border)}.informe-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;gap:12px;margin-top:16px;padding:28px 20px;display:flex}.informe-emoji{font-size:56px;line-height:1}.informe-title{font-size:24px;font-weight:800;line-height:1.2}.informe-sub{color:var(--text-soft);font-size:14px}.informe-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 0;display:grid}.informe-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 8px}.informe-stat dt{color:var(--text-soft);font-size:13px;font-weight:600}.informe-stat dd{color:var(--orange-strong);margin:4px 0 0;font-size:17px;font-weight:800}.informe-mastery{color:var(--text-soft);font-size:14px}.informe-mastery strong{color:var(--orange-strong)}.onboarding{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;gap:16px;margin-top:24px;padding:28px 20px;display:flex}.onboarding-emoji{font-size:56px;line-height:1}.onboarding-title{font-size:24px;font-weight:800}.onboarding-sub{color:var(--text-soft);font-size:14px}.field{text-align:left;flex-direction:column;gap:8px;display:flex}.field-label{color:var(--text-soft);font-size:14px;font-weight:600}.field-input{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;font-size:16px}.link-code-input{letter-spacing:.35em;text-align:center;text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px}.age-row{flex-wrap:wrap;gap:8px;display:flex}.age-pill{font:inherit;background:var(--surface);border:1px solid var(--border);min-width:40px;color:var(--text-soft);cursor:pointer;border-radius:999px;padding:8px 0;font-size:16px;font-weight:700}.age-pill.on{color:var(--surface);background:var(--orange-strong);border-color:var(--orange-strong)}.age-pill:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.back.primary:disabled{opacity:.5;cursor:not-allowed}.speak-area{flex-direction:column;align-items:stretch;gap:12px;display:flex}.speak-fallback{flex-direction:column;gap:8px;display:flex}.speak-fallback-hint{color:var(--text-soft);font-size:14px}.speak-type-row{align-items:center;gap:8px;display:flex}.speak-type-row .field-input{flex:1}.feedback-transcript{color:var(--text-soft);margin-top:4px;font-weight:600;display:block}.generate{font:inherit;background:var(--surface);border:1px solid var(--border);color:var(--orange-strong);cursor:pointer;border-radius:12px;padding:12px;font-size:14px;font-weight:700}.generate.link{color:var(--info);border-color:var(--info-bg)}.generate:disabled{opacity:.6;cursor:not-allowed}.health-chips{flex-wrap:wrap;gap:8px;margin:0 0 16px;display:flex}.health-list{margin:0 0 16px;padding:0;list-style:none}.health-row{border-bottom:1px solid var(--border);grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:grid}.health-row:last-child{border-bottom:0}.health-id{color:var(--text-soft);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}.health-num{font-variant-numeric:tabular-nums;color:var(--text-soft);white-space:nowrap}@media (width<=560px){.health-row{grid-template-columns:1fr auto;row-gap:4px}}.app{padding:20px 16px 28px}.avatar{border:var(--border-w) solid var(--outline);background:var(--accent);box-shadow:var(--shadow-hard-sm)}.level-pip{border:2px solid var(--outline);background:var(--primary);color:#fff;font-weight:800}.streak{border:2px solid var(--outline);background:var(--gold);color:var(--ink,var(--text));font-weight:800}.name{letter-spacing:-.01em}.power strong{color:var(--primary-deep)}.xp-bar{border:var(--border-w) solid var(--outline);border-radius:var(--r-full);background:var(--surface);height:20px;box-shadow:var(--shadow-hard-sm);overflow:hidden}.xp-fill{background:repeating-linear-gradient(45deg, var(--gold), var(--gold) 10px, #fbbf24 10px, #fbbf24 20px)}.mission{border:var(--border-w) solid var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow-hard-sm);padding:16px 18px;transition:transform 80ms,box-shadow 80ms}.mission:hover{box-shadow:1px 1px 0 var(--outline);transform:translate(2px,2px)}.mission:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.mission-icon{border-radius:var(--r-sm);background:var(--primary-soft);border:2px solid var(--outline);place-items:center;width:48px;height:48px;display:grid}.mission-title{letter-spacing:-.01em;font-weight:800}.mission-status{border:2px solid var(--outline);font-weight:800}.mission-xp{color:var(--primary-deep);font-weight:800}.tf{border:var(--border-w) solid var(--outline);border-radius:var(--r-md);box-shadow:var(--shadow-hard-sm)}.notice{border:var(--border-w) solid var(--outline);border-radius:var(--r-md);color:var(--text);background:var(--notice-bg);font-weight:700}.back{border:2px solid var(--outline);border-radius:var(--r-full);color:var(--text);box-shadow:2px 2px 0 var(--outline);font-weight:800;transition:transform 80ms,box-shadow 80ms}.back:hover{box-shadow:1px 1px 0 var(--outline);transform:translate(1px,1px)}.back:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.back.primary{background:var(--primary);border-color:var(--outline);color:#fff;box-shadow:var(--shadow-hard-sm)}.back.primary:hover{background:var(--primary-deep)}.generate{border:2px solid var(--outline);border-radius:var(--r-md);color:var(--primary-deep);box-shadow:2px 2px 0 var(--outline);font-weight:800;transition:transform 80ms,box-shadow 80ms}.generate:hover{box-shadow:1px 1px 0 var(--outline);transform:translate(1px,1px)}.generate:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.generate.link{color:var(--accent-ink);border-color:var(--outline);background:var(--accent)}.reto-title{letter-spacing:-.01em}.reto-question{letter-spacing:-.01em;font-weight:800}.speak{border:2px solid var(--outline);background:var(--gold);box-shadow:2px 2px 0 var(--outline)}.reto-option{border:var(--border-w) solid var(--outline);border-radius:var(--r-md);box-shadow:var(--shadow-hard-sm);transition:transform 80ms,box-shadow 80ms}.reto-option:hover:not(:disabled){box-shadow:1px 1px 0 var(--outline);transform:translate(2px,2px)}.reto-option:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.reto-option-key{border:2px solid var(--outline);background:var(--primary-soft);color:var(--primary-deep);font-weight:800}.reto-option.correct{border-color:var(--outline);background:var(--green-soft)}.reto-option.wrong{border-color:var(--outline);background:var(--danger-bg)}.feedback{border:var(--border-w) solid var(--outline);border-radius:var(--r-md);font-weight:700}.feedback.ok,.feedback.hint{border-color:var(--outline)}.informe-card{border:var(--border-w) solid var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow-hard)}.informe-stat{border:2px solid var(--outline);border-radius:var(--r-sm);background:var(--surface)}.informe-stat dd,.informe-mastery strong{color:var(--primary-deep)}.onboarding{border:var(--border-w) solid var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow-hard)}.field-input{border:2px solid var(--outline);border-radius:var(--r-sm);background:var(--surface);font-weight:600}.field-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.age-pill{border:2px solid var(--outline);border-radius:var(--r-full);background:var(--surface);font-weight:800}.age-pill.on{background:var(--primary);color:#fff}.health-chips .chip{border:2px solid var(--outline);border-radius:var(--r-full);font-weight:800}.health-verdict{font-weight:800}.health-row{border-bottom:1px solid var(--primary-mist)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.sesion-barra{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;display:flex}.sesion-bloque{letter-spacing:.04em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);border:2px solid var(--outline);border-radius:var(--r-full);padding:4px 12px;font-size:13px;font-weight:800}.sesion-reloj{font-variant-numeric:tabular-nums;border-radius:var(--r-full);border:2px solid var(--outline);background:var(--surface);margin-left:auto;padding:4px 12px;font-size:15px;font-weight:800}.sesion-reloj.urgente{background:var(--accent);color:var(--outline);animation:1s ease-in-out infinite latido}@keyframes latido{50%{transform:scale(1.06)}}.sesion-track{border:2px solid var(--outline);background:var(--surface);border-radius:999px;flex-basis:100%;height:8px;overflow:hidden}.sesion-track i{background:var(--primary);height:100%;display:block}.puerta{text-align:center;border:var(--border-w) solid var(--outline);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-hard);margin-top:24px;padding:48px 24px}.puerta .emoji{margin-bottom:12px;font-size:64px;line-height:1;display:block}.puerta h1{letter-spacing:-.02em;margin:0 0 8px;font-size:30px;font-weight:800}.puerta p{color:var(--text-soft);max-width:420px;margin:0 auto 22px}.puerta .btn-grande{font:inherit;border-radius:var(--r-full);background:var(--primary);color:#fff;border:var(--border-w) solid var(--outline);box-shadow:var(--shadow-hard);cursor:pointer;padding:16px 40px;font-size:19px;font-weight:800;transition:transform 80ms,box-shadow 80ms}.puerta .btn-grande:hover{box-shadow:2px 2px 0 var(--outline);transform:translate(2px,2px)}.puerta .btn-grande:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.puerta .chico{color:var(--text-soft);margin-top:14px;font-size:13px}.resumen-sesion{grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;display:grid}.resumen-sesion .bloque-resumen{border:var(--border-w) solid var(--outline);border-radius:var(--r-md);background:var(--primary-soft);padding:16px}.resumen-sesion .bloque-resumen strong{font-size:26px;font-weight:800;display:block}.resumen-sesion .bloque-resumen span{color:var(--text-soft);font-size:13px;font-weight:700}@media (width<=480px){.resumen-sesion{grid-template-columns:1fr}}
