feat: i18n full support, responsive UI, multi-model AI config, and bug fixes

Major Features:
- Internationalization (i18n) with auto-detection for ES/EN/PT
- Mobile-first responsive design for Studio and Experience
- Multi-model AI configuration (llama3.2:3b, qwen3.5:9b, gpt-oss:latest)
- Course language configuration (auto-detect or fixed per course)

Backend Changes:
- shared/common: ModelType enum for intelligent model selection
- LMS: log_ai_usage function migration (fix chat tutor 500 error)
- LMS/CMS: course language config fields (language_setting, fixed_language)
- LMS: /courses/{id}/language-config endpoint for language detection

Frontend Changes:
- Experience: Enhanced i18n with browser language detection
- Experience: Audio recording with HTTPS check and error handling
- Studio: Memory game with unique pair IDs and debug logging
- Studio: Expanded translations (250+ keys for ES, EN, PT)
- Both: Language selector in headers (mobile responsive)

Documentation:
- AI_MODELS_CONFIG.md: Multi-model configuration guide
- RESPONSIVIDAD_GUIA.md: Mobile-first design patterns
- I18N_RESPONSIVIDAD_IMPLEMENTACION.md: Implementation details
- DEBUG_AUDIO_RECORDING.md: Audio troubleshooting guide
- DEBUG_MEMORY_GAME.md: Memory game debugging steps

Bug Fixes:
- Fix chat tutor 500 error (missing log_ai_usage function)
- Fix audio recording (HTTPS check, browser compatibility)
- Fix memory game pair IDs (unique ID generation)
- Fix HotspotBlock TypeScript errors

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

web/studio/src/context/I18nContext.tsx

@@ -8,29 +8,64 @@ import pt from '../lib/locales/pt.json';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const translations: Record<string, any> = { en, es, pt };
 
+// Idiomas soportados
+export const SUPPORTED_LANGUAGES = ['es', 'en', 'pt'] as const;
+export type SupportedLanguage = typeof SUPPORTED_LANGUAGES[number];
+
 interface I18nContextType {
     language: string;
     setLanguage: (lang: string) => void;
     t: (path: string) => string;
+    detectBrowserLanguage: () => string;
 }
 
 const I18nContext = createContext<I18nContextType | undefined>(undefined);
 
+/**
+ * Detecta el idioma del navegador del usuario
+ */
+function detectBrowserLanguage(): string {
+    if (typeof navigator === 'undefined') return 'es';
+    
+    const browserLanguages = navigator.languages || [navigator.language || (navigator as any).userLanguage];
+    
+    for (const browserLang of browserLanguages) {
+        if (SUPPORTED_LANGUAGES.includes(browserLang as SupportedLanguage)) {
+            return browserLang;
+        }
+        
+        const langCode = browserLang.split('-')[0].toLowerCase();
+        if (SUPPORTED_LANGUAGES.includes(langCode as SupportedLanguage)) {
+            return langCode;
+        }
+    }
+    
+    return 'es';
+}
+
 export function I18nProvider({ children }: { children: React.ReactNode }) {
     const [language, setLanguageState] = useState('es');
+    const [isInitialized, setIsInitialized] = useState(false);
 
     useEffect(() => {
         const savedLang = localStorage.getItem('studio_language');
-        if (savedLang) {
+        
+        if (savedLang && SUPPORTED_LANGUAGES.includes(savedLang as SupportedLanguage)) {
             setLanguageState(savedLang);
         } else {
-            // Try to detect from user profile if available, but for now default or localstorage
+            const detectedLang = detectBrowserLanguage();
+            setLanguageState(detectedLang);
+            localStorage.setItem('studio_language', detectedLang);
         }
+        
+        setIsInitialized(true);
     }, []);
 
     const setLanguage = (lang: string) => {
-        setLanguageState(lang);
-        localStorage.setItem('studio_language', lang);
+        if (SUPPORTED_LANGUAGES.includes(lang as SupportedLanguage)) {
+            setLanguageState(lang);
+            localStorage.setItem('studio_language', lang);
+        }
     };
 
     const t = (path: string): string => {
@@ -41,7 +76,7 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
             if (result[key]) {
                 result = result[key];
             } else {
-                return path; // Fallback to path if key missing
+                return path;
             }
         }
 
@@ -49,7 +84,7 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
     };
 
     return (
-        <I18nContext.Provider value={{ language, setLanguage, t }}>
+        <I18nContext.Provider value={{ language, setLanguage, t, detectBrowserLanguage }}>
             {children}
         </I18nContext.Provider>
     );
@@ -62,3 +97,5 @@ export function useTranslation() {
     }
     return context;
 }
+
+export { detectBrowserLanguage };