Feat: Reorganizar UI - Sistema de catación como página principal

- Crear componente CataUserInfo con estilo mobile-first del sistema de catación
- Mover "/" para redirigir automáticamente a /cata
- Incluir información del usuario en página de catación
- Mantener estilo consistente con diseño outline/terminal del sistema
- Optimizar componente de usuario para mobile (compacto y funcional)

nuxt4/app/components/cata/UserInfo.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="user" class="cata-user-info">
+    <div class="cata-outline-box rounded-lg p-4">
+      <div class="flex items-center gap-3">
+        <!-- Avatar simple con inicial -->
+        <div class="user-avatar cata-outline-box">
+          <span class="cata-text text-xl font-semibold">
+            {{ userInitial }}
+          </span>
+        </div>
+
+        <!-- Info del usuario -->
+        <div class="flex-1 min-w-0">
+          <h3 class="cata-text font-semibold text-base sm:text-lg truncate">
+            {{ user.name || user.username }}
+          </h3>
+          <p class="cata-text text-xs sm:text-sm opacity-60 truncate">
+            {{ user.email }}
+          </p>
+        </div>
+
+        <!-- Botón de logout compacto -->
+        <button
+          class="cata-button p-2 flex-shrink-0"
+          @click="handleLogout"
+          title="Cerrar sesión"
+        >
+          <UIcon name="i-lucide-log-out" class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+
+// Obtener la inicial del usuario
+const userInitial = computed(() => {
+  if (!user.value) return '?'
+  const name = user.value.name || user.value.username || user.value.email || '?'
+  return name.charAt(0).toUpperCase()
+})
+
+// Manejar logout
+const handleLogout = () => {
+  // Redirigir al endpoint de logout de Authentik
+  window.location.href = '/outpost.goauthentik.io/sign_out'
+}
+</script>
+
+<style scoped>
+.cata-user-info {
+  width: 100%;
+}
+
+.user-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
+}
+
+.dark .user-avatar {
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .user-avatar {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .user-avatar .cata-text {
+    font-size: 1rem;
+  }
+}
+</style>