Manual changes saved

script.js

@@ -50,30 +50,68 @@ feather.replace();
 });
 
 function updateLanguage(language) {
-    // Update all elements with data-i18n attributes
-    document.querySelectorAll('[data-i18n]').forEach(element => {
-        const key = element.getAttribute('data-i18n');
-        if (translations[language] && translations[language][key]) {
-            element.textContent = translations[language][key];
-        } else if (translations['es'][key]) {
-            // Fallback to Spanish if translation missing
-            element.textContent = translations['es'][key];
-        }
-    });
+  // Safety: ensure translations object exists
+  if (typeof translations === 'undefined') return console.warn('translations no definido');
 
-    // Update HTML lang attribute
-    document.documentElement.lang = language;
+  // 1) Light DOM: actualizar elementos regulares con data-i18n
+  document.querySelectorAll('[data-i18n]').forEach(element => {
+    // evita tocar elementos que estén dentro de un shadowRoot (los veremos después)
+    if (element.getRootNode && element.getRootNode() instanceof ShadowRoot) return;
+    const key = element.getAttribute('data-i18n');
+    if (translations[language] && translations[language][key]) {
+      element.textContent = translations[language][key];
+    } else if (translations['es'] && translations['es'][key]) {
+      element.textContent = translations['es'][key];
+    }
+  });
 
-    // Update active language in selector
-    document.querySelectorAll('.language-option').forEach(option => {
-        if (option.getAttribute('data-lang') === language) {
-            option.classList.add('active');
-        } else {
-            option.classList.remove('active');
-        }
+  // 2) HTML lang attribute
+  document.documentElement.lang = language;
+
+  // 3) Actualizar opciones de idioma visibles en el Light DOM (buscamos por data-lang)
+  document.querySelectorAll('[data-lang]').forEach(option => {
+    if (option.getAttribute('data-lang') === language) {
+      option.classList.add('active');
+    } else {
+      option.classList.remove('active');
+    }
+  });
+
+  // 4) PASO IMPORTANTE: actualizar cualquier header / componente con Shadow DOM
+  // Busca componentes custom que podrían tener shadowRoot y [data-i18n] dentro
+  document.querySelectorAll('custom-header').forEach(comp => {
+    const sr = comp.shadowRoot;
+    if (!sr) return;
+    // actualizar textos dentro del shadow root
+    sr.querySelectorAll('[data-i18n]').forEach(el => {
+      const key = el.getAttribute('data-i18n');
+      if (translations[language] && translations[language][key]) {
+        el.textContent = translations[language][key];
+      } else if (translations['es'] && translations['es'][key]) {
+        el.textContent = translations['es'][key];
+      }
     });
+
+    // si tu header usa un indicador (bandera/código) con IDs 'currentFlag'/'currentCode', actualizarlos
+    const flag = sr.getElementById('currentFlag');
+    const code = sr.getElementById('currentCode');
+    if (flag && code) {
+      if (language === 'es') { flag.textContent = '🇪🇸'; code.textContent = 'ES'; }
+      else if (language === 'en') { flag.textContent = '🇬🇧'; code.textContent = 'EN'; }
+      else if (language === 'fr') { flag.textContent = '🇫🇷'; code.textContent = 'FR'; }
+      else { flag.textContent = '🌐'; code.textContent = language.toUpperCase(); }
+    }
+
+    // si el componente expone un método público applyLanguage, llámalo también (compatibilidad)
+    try {
+      if (typeof comp.applyLanguage === 'function') comp.applyLanguage(language);
+    } catch (err) {
+      console.warn('applyLanguage fallo en custom-header', err);
+    }
+  });
 }
 
+
 function filterBlogPosts(category) {
     const blogPosts = document.querySelectorAll('.blog-post');
     blogPosts.forEach(post => {