Fix: Mejorar UX de botones y toasts del sistema de catación

- Quitar efecto scale on hover/active de todos los botones cata-button
- Quitar efecto hover:scale del avatar en UserInfo
- Rediseñar toasts con estilo outline/terminal 100% acoplado al sistema
- Toasts usan variables CSS del sistema (--cata-bg, --cata-fg, --cata-primary)
- Texto con fuente mono y text-shadow en modo oscuro
- Efectos glow sutiles en modo oscuro según tipo de notificación
- Bordes outline coherentes con diseño del sistema de catación

nuxt4/app.config.ts

@@ -162,44 +162,88 @@ export default defineAppConfig({
       },
     },
 
-    // Notifications (Toast): Estilo outline con los colores de la app
+    // Notifications (Toast): Estilo outline/terminal del sistema de catación
     notification: {
       slots: {
-        root: 'bg-transparent border-2 border-primary/50 dark:border-primary backdrop-blur-sm',
-        wrapper: 'w-full',
-        title: 'text-foreground font-semibold dark:font-mono dark:text-shadow',
-        description: 'text-foreground/80 dark:font-mono dark:font-light',
-        icon: 'shrink-0',
+        root: [
+          'bg-[var(--cata-bg)] border border-[var(--cata-primary)]',
+          'dark:bg-black/95 dark:border-[var(--cata-primary)]',
+          'rounded-md p-4',
+        ],
+        wrapper: 'w-full flex gap-3',
+        title: [
+          'text-[var(--cata-fg)] font-semibold text-sm',
+          'dark:font-mono dark:font-light',
+          'dark:[text-shadow:0_0_2px_currentColor]',
+        ],
+        description: [
+          'text-[var(--cata-fg)] opacity-75 text-xs',
+          'dark:font-mono dark:font-light',
+          'dark:[text-shadow:0_0_1px_currentColor]',
+        ],
+        icon: [
+          'shrink-0 w-5 h-5',
+          'text-[var(--cata-fg)]',
+          'dark:[filter:drop-shadow(0_0_2px_currentColor)]',
+        ],
         avatar: 'shrink-0',
-        actions: 'flex gap-1.5 shrink-0',
-        close: 'shrink-0',
-        progress: 'absolute inset-x-0 bottom-0 h-1 z-10',
+        actions: 'flex gap-1.5 shrink-0 mt-2',
+        close: [
+          'shrink-0',
+          'text-[var(--cata-fg)]',
+          'hover:opacity-80',
+        ],
+        progress: 'absolute inset-x-0 bottom-0 h-0.5 bg-[var(--cata-primary)] opacity-50',
       },
       variants: {
         color: {
           primary: {
-            root: 'dark:shadow-[0_0_12px_rgba(0,255,0,0.3)]',
-            progress: 'bg-primary',
+            root: [
+              'border-[var(--cata-primary)]/50',
+              'dark:border-[var(--cata-primary)]',
+              'dark:shadow-[0_0_12px_rgba(0,255,0,0.2)]',
+            ],
+            icon: 'text-[var(--cata-primary)]',
           },
           success: {
-            root: 'border-green-500/50 dark:border-green-500 dark:shadow-[0_0_12px_rgba(0,255,0,0.3)]',
-            progress: 'bg-green-500',
+            root: [
+              'border-green-600/50 dark:border-green-500',
+              'dark:shadow-[0_0_12px_rgba(0,255,0,0.25)]',
+            ],
+            icon: 'text-green-600 dark:text-green-500',
+            progress: 'bg-green-600 dark:bg-green-500',
           },
           error: {
-            root: 'border-red-500/50 dark:border-red-500 dark:shadow-[0_0_12px_rgba(255,0,0,0.3)]',
-            progress: 'bg-red-500',
+            root: [
+              'border-red-600/50 dark:border-red-500',
+              'dark:shadow-[0_0_12px_rgba(255,0,0,0.25)]',
+            ],
+            icon: 'text-red-600 dark:text-red-500',
+            progress: 'bg-red-600 dark:bg-red-500',
           },
           warning: {
-            root: 'border-yellow-500/50 dark:border-yellow-500 dark:shadow-[0_0_12px_rgba(255,255,0,0.3)]',
-            progress: 'bg-yellow-500',
+            root: [
+              'border-yellow-600/50 dark:border-yellow-500',
+              'dark:shadow-[0_0_12px_rgba(255,255,0,0.25)]',
+            ],
+            icon: 'text-yellow-600 dark:text-yellow-500',
+            progress: 'bg-yellow-600 dark:bg-yellow-500',
           },
           info: {
-            root: 'border-blue-500/50 dark:border-blue-500 dark:shadow-[0_0_12px_rgba(0,150,255,0.3)]',
-            progress: 'bg-blue-500',
+            root: [
+              'border-blue-600/50 dark:border-blue-500',
+              'dark:shadow-[0_0_12px_rgba(70,130,180,0.25)]',
+            ],
+            icon: 'text-blue-600 dark:text-blue-500',
+            progress: 'bg-blue-600 dark:bg-blue-500',
           },
           neutral: {
-            root: 'dark:shadow-[0_0_12px_rgba(100,100,100,0.3)]',
-            progress: 'bg-gray-500',
+            root: [
+              'border-gray-500/50 dark:border-gray-500',
+              'dark:shadow-[0_0_12px_rgba(128,128,128,0.2)]',
+            ],
+            icon: 'text-gray-600 dark:text-gray-400',
+            progress: 'bg-gray-600 dark:bg-gray-500',
           },
         },
       },

nuxt4/app/assets/css/main.css

@@ -229,10 +229,6 @@
   border-width: 2px;
 }
 
-.cata-button:active {
-  transform: scale(0.98);
-}
-
 .dark .cata-button:hover {
   box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 40%, transparent);
 }

nuxt4/app/components/cata/UserInfo.vue

@@ -4,7 +4,7 @@
       <div class="flex items-center gap-3">
         <!-- Avatar clickeable para verificar sesión -->
         <button
-          class="user-avatar cata-outline-box cursor-pointer transition-all hover:scale-105 active:scale-95"
+          class="user-avatar cata-outline-box cursor-pointer"
           @click="handleCheckSession"
           title="Verificar estado de sesión"
         >