Fix: Validar estructura de datos de colores personalizados

- Agregar validación completa en loadCustomColors para detectar formato incompatible
- Proteger setCustomColors asegurando que la estructura existe antes de asignar
- Validar estructura en getCurrentColors y retornar defaults si no existe
- Validar estructura en hasCustomColors y retornar false si no existe
- Validar estructura en inicializar antes de aplicar colores
- Limpiar localStorage automáticamente si detecta formato antiguo o corrupto

Soluciona error: TypeError Cannot create property 'primary' on string
cuando localStorage contiene datos de versión anterior

nuxt4/app/composables/useColorCustomization.ts

@@ -198,10 +198,27 @@ export const useColorCustomization = () => {
       const stored = localStorage.getItem(STORAGE_KEY)
       if (stored) {
         const colors = JSON.parse(stored)
-        customColors.value = colors
+
+        // Validar estructura de datos
+        if (
+          colors &&
+          typeof colors === 'object' &&
+          colors.light &&
+          typeof colors.light === 'object' &&
+          colors.dark &&
+          typeof colors.dark === 'object'
+        ) {
+          customColors.value = colors
+        } else {
+          // Datos corruptos o formato antiguo, resetear
+          console.warn('Formato de colores incompatible, reseteando...')
+          localStorage.removeItem(STORAGE_KEY)
+        }
       }
     } catch (error) {
       console.error('Error al cargar colores personalizados:', error)
+      // En caso de error, limpiar localStorage
+      localStorage.removeItem(STORAGE_KEY)
     }
   }
 
@@ -226,6 +243,11 @@ export const useColorCustomization = () => {
 
     const theme = isDark.value ? 'dark' : 'light'
 
+    // Asegurar que la estructura existe
+    if (!customColors.value[theme] || typeof customColors.value[theme] !== 'object') {
+      customColors.value[theme] = { primary: null, foreground: null, background: null }
+    }
+
     if (primary !== undefined) customColors.value[theme].primary = primary
     if (foreground !== undefined) customColors.value[theme].foreground = foreground
     if (background !== undefined) customColors.value[theme].background = background
@@ -262,10 +284,17 @@ export const useColorCustomization = () => {
    */
   const getCurrentColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
+    const colors = customColors.value[theme]
+
+    // Validar que la estructura existe
+    if (!colors || typeof colors !== 'object') {
+      return DEFAULT_COLORS[theme]
+    }
+
     return {
-      primary: customColors.value[theme].primary || DEFAULT_COLORS[theme].primary,
-      foreground: customColors.value[theme].foreground || DEFAULT_COLORS[theme].foreground,
-      background: customColors.value[theme].background || DEFAULT_COLORS[theme].background,
+      primary: colors.primary || DEFAULT_COLORS[theme].primary,
+      foreground: colors.foreground || DEFAULT_COLORS[theme].foreground,
+      background: colors.background || DEFAULT_COLORS[theme].background,
     }
   })
 
@@ -275,6 +304,12 @@ export const useColorCustomization = () => {
   const hasCustomColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
     const colors = customColors.value[theme]
+
+    // Validar que la estructura existe
+    if (!colors || typeof colors !== 'object') {
+      return false
+    }
+
     return colors.primary !== null || colors.foreground !== null || colors.background !== null
   })
 
@@ -289,7 +324,7 @@ export const useColorCustomization = () => {
     // Solo aplicar colores si hay colores personalizados guardados
     const theme = isDark.value ? 'dark' : 'light'
     const colors = customColors.value[theme]
-    if (colors.primary || colors.foreground || colors.background) {
+    if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) {
       applyCustomColors(
         colors.primary || undefined,
         colors.foreground || undefined,
@@ -302,7 +337,7 @@ export const useColorCustomization = () => {
       const theme = newIsDark ? 'dark' : 'light'
       const colors = customColors.value[theme]
       // Solo aplicar si hay colores personalizados para este tema
-      if (colors.primary || colors.foreground || colors.background) {
+      if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) {
         applyCustomColors(
           colors.primary || undefined,
           colors.foreground || undefined,