Feat: Implementar personalización de color principal del tema

- Crear composable useColorCustomization para manejar colores personalizados
- Agregar botón de paleta en CataUserInfo para acceder al color picker
- Implementar modal con selector de color (input color + text)
- Guardar preferencias en localStorage por tema (light/dark)
- Generar paleta de gradientes automáticamente desde color base
- Aplicar colores dinámicamente a variables CSS
- Incluir vista previa del color en el modal
- Botón para restablecer al color por defecto
- Persistencia de colores entre sesiones
- Inicialización automática en app.vue

nuxt4/app/components/cata/UserInfo.vue

@@ -25,6 +25,15 @@
 
         <!-- Botones de acción -->
         <div class="flex items-center gap-2">
+          <!-- Botón de personalización de color -->
+          <button
+            class="cata-button p-2 flex items-center justify-center flex-shrink-0"
+            @click="mostrarColorPicker = true"
+            title="Personalizar color del tema"
+          >
+            <UIcon name="i-lucide-palette" class="w-4 h-4" />
+          </button>
+
           <!-- Botón de cambio de tema -->
           <button
             class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@@ -54,16 +63,103 @@
         </div>
       </div>
     </div>
+
+    <!-- Modal de personalización de color -->
+    <UModal v-model:open="mostrarColorPicker">
+      <div class="cata-outline-box rounded-lg p-6">
+        <h3 class="cata-text text-lg font-semibold mb-4">
+          Personalizar Color del Tema
+        </h3>
+        <p class="cata-text text-sm opacity-75 mb-4">
+          Selecciona un color para el tema {{ isDark ? 'oscuro' : 'claro' }}
+        </p>
+
+        <!-- Color picker -->
+        <div class="mb-6">
+          <label class="cata-text text-sm font-medium mb-2 block">
+            Color Principal
+          </label>
+          <div class="flex items-center gap-3">
+            <input
+              type="color"
+              v-model="colorSeleccionado"
+              class="color-picker"
+              @change="previsualizarColor"
+            />
+            <input
+              type="text"
+              v-model="colorSeleccionado"
+              class="cata-input flex-1 px-3 py-2 rounded-md"
+              placeholder="#000000"
+              maxlength="7"
+              pattern="^#[0-9A-Fa-f]{6}$"
+            />
+          </div>
+        </div>
+
+        <!-- Vista previa del color -->
+        <div class="mb-6">
+          <p class="cata-text text-sm font-medium mb-2">
+            Vista previa
+          </p>
+          <div class="preview-box cata-outline-box rounded-md p-4">
+            <button
+              class="cata-button px-4 py-2"
+              :style="{
+                '--preview-color': colorSeleccionado,
+                borderColor: colorSeleccionado,
+                color: colorSeleccionado
+              }"
+            >
+              Botón de ejemplo
+            </button>
+          </div>
+        </div>
+
+        <!-- Botones de acción -->
+        <div class="flex items-center justify-end gap-2">
+          <button
+            v-if="hasCustomColor"
+            class="cata-button px-4 py-2"
+            @click="resetearColor"
+          >
+            Restablecer
+          </button>
+          <button
+            class="cata-button px-4 py-2"
+            @click="mostrarColorPicker = false"
+          >
+            Cancelar
+          </button>
+          <button
+            class="cata-button px-4 py-2"
+            @click="aplicarColor"
+          >
+            Aplicar
+          </button>
+        </div>
+      </div>
+    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
 const { user, checkSessionStatus } = useAuthentik()
 const colorMode = useColorMode()
+const { getCurrentColor, hasCustomColor, setCustomColor, resetColor } = useColorCustomization()
 
 // Estado del tema
 const isDark = computed(() => colorMode.value === 'dark')
 
+// Estado del modal de color picker
+const mostrarColorPicker = ref(false)
+const colorSeleccionado = ref(getCurrentColor.value)
+
+// Actualizar color seleccionado cuando cambia el tema
+watch(getCurrentColor, (newColor) => {
+  colorSeleccionado.value = newColor
+})
+
 // Obtener la inicial del usuario
 const userInitial = computed(() => {
   if (!user.value) return '?'
@@ -91,6 +187,23 @@ const handleLogout = () => {
   // Redirigir al endpoint de logout de Authentik
   window.location.href = '/outpost.goauthentik.io/sign_out'
 }
+
+// Previsualizar color
+const previsualizarColor = () => {
+  // La vista previa se maneja con el binding :style en el template
+}
+
+// Aplicar color personalizado
+const aplicarColor = () => {
+  setCustomColor(colorSeleccionado.value)
+  mostrarColorPicker.value = false
+}
+
+// Resetear color al por defecto
+const resetearColor = () => {
+  resetColor()
+  colorSeleccionado.value = getCurrentColor.value
+}
 </script>
 
 <style scoped>
@@ -124,6 +237,65 @@ const handleLogout = () => {
   box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
 
+/* Color picker */
+.color-picker {
+  width: 3rem;
+  height: 3rem;
+  border: 2px solid color-mix(in srgb, var(--cata-primary) 50%, transparent);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background-color: transparent;
+  transition: border-color 200ms;
+}
+
+.color-picker:hover {
+  border-color: color-mix(in srgb, var(--cata-primary) 70%, transparent);
+}
+
+.dark .color-picker {
+  border-color: var(--cata-primary);
+}
+
+.dark .color-picker:hover {
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 30%, transparent);
+}
+
+/* Input de texto para color */
+.cata-input {
+  background-color: transparent;
+  border: 2px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+  color: var(--cata-fg);
+  transition: border-color 200ms, box-shadow 200ms;
+}
+
+.cata-input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--cata-primary) 70%, transparent);
+}
+
+.dark .cata-input {
+  border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
+  font-family: 'Roboto Mono', monospace;
+}
+
+.dark .cata-input:focus {
+  border-color: var(--cata-primary);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+
+/* Preview box */
+.preview-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 2%, transparent);
+}
+
+.dark .preview-box {
+  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
+}
+
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .user-avatar {