Fix: Rediseñar toasts completamente para acoplarse al sistema de catación

PROBLEMA: Toasts usaban estilos por defecto de Nuxt UI que no se acoplaban al diseño outline/terminal

SOLUCIÓN:
- Cambiar app.config.ts para usar clases CSS personalizadas en lugar de sintaxis arbitraria de Tailwind
- Agregar estilos CSS completos en main.css usando variables del sistema (--cata-bg, --cata-fg, --cata-primary)
- Implementar todas las variantes (primary, success, error, warning, info, neutral)

ESTILOS APLICADOS:
- Fondo: var(--cata-bg) en claro, negro 95% opaco en oscuro
- Bordes: outline usando var(--cata-primary) con opacidades
- Texto: fuente monospace en modo oscuro con text-shadow
- Iconos: colores específicos por tipo con drop-shadow en oscuro
- Efectos glow: sombras sutiles en modo oscuro según tipo
- IMPORTANTE: Usar !important para sobrescribir estilos de Nuxt UI

nuxt4/app.config.ts

@@ -162,88 +162,38 @@ export default defineAppConfig({
       },
     },
 
-    // Notifications (Toast): Estilo outline/terminal del sistema de catación
+    // Notifications (Toast): Usar clases personalizadas definidas en main.css
     notification: {
       slots: {
-        root: [
+        root: 'cata-toast-root',
-          'bg-[var(--cata-bg)] border border-[var(--cata-primary)]',
+        wrapper: 'cata-toast-wrapper',
-          'dark:bg-black/95 dark:border-[var(--cata-primary)]',
+        title: 'cata-toast-title',
-          'rounded-md p-4',
+        description: 'cata-toast-description',
-        ],
+        icon: 'cata-toast-icon',
-        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 mt-2',
+        actions: 'cata-toast-actions',
-        close: [
+        close: 'cata-toast-close',
-          'shrink-0',
+        progress: 'cata-toast-progress',
-          '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: [
+            root: 'cata-toast-primary',
-              '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: [
+            root: 'cata-toast-success',
-              '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: [
+            root: 'cata-toast-error',
-              '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: [
+            root: 'cata-toast-warning',
-              '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: [
+            root: 'cata-toast-info',
-              '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: [
+            root: 'cata-toast-neutral',
-              '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

@@ -358,3 +358,191 @@
     font-weight: 400;
   }
 }
+
+/* -------------------------------------------------------------------------- */
+/* TOASTS / NOTIFICACIONES */
+/* -------------------------------------------------------------------------- */
+
+/* Root container del toast */
+.cata-toast-root {
+  background-color: var(--cata-bg) !important;
+  border: var(--cata-border-width) solid var(--cata-primary) !important;
+  border-radius: 0.375rem;
+  padding: 1rem;
+}
+
+.dark .cata-toast-root {
+  background-color: rgba(0, 0, 0, 0.95) !important;
+  border-color: var(--cata-primary) !important;
+}
+
+/* Wrapper del contenido */
+.cata-toast-wrapper {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+/* Título del toast */
+.cata-toast-title {
+  color: var(--cata-fg) !important;
+  font-family: var(--cata-font-family);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.dark .cata-toast-title {
+  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
+  font-weight: 300;
+  text-shadow: 0 0 2px currentColor;
+}
+
+/* Descripción del toast */
+.cata-toast-description {
+  color: var(--cata-fg) !important;
+  font-family: var(--cata-font-family);
+  font-size: 0.75rem;
+  opacity: 0.75;
+}
+
+.dark .cata-toast-description {
+  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
+  font-weight: 300;
+  text-shadow: 0 0 1px currentColor;
+}
+
+/* Icono del toast */
+.cata-toast-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--cata-fg);
+}
+
+.dark .cata-toast-icon {
+  filter: drop-shadow(0 0 2px currentColor);
+}
+
+/* Botones de acción */
+.cata-toast-actions {
+  display: flex;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  margin-top: 0.5rem;
+}
+
+/* Botón de cerrar */
+.cata-toast-close {
+  flex-shrink: 0;
+  color: var(--cata-fg);
+}
+
+.cata-toast-close:hover {
+  opacity: 0.8;
+}
+
+/* Barra de progreso */
+.cata-toast-progress {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  height: 0.125rem;
+  background-color: var(--cata-primary);
+  opacity: 0.5;
+}
+
+/* Variantes de color */
+.cata-toast-primary {
+  border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent) !important;
+}
+
+.dark .cata-toast-primary {
+  border-color: var(--cata-primary) !important;
+  box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
+}
+
+.cata-toast-success {
+  border-color: rgba(22, 163, 74, 0.5) !important;
+}
+
+.dark .cata-toast-success {
+  border-color: rgb(34, 197, 94) !important;
+  box-shadow: 0 0 12px rgba(0, 255, 0, 0.25);
+}
+
+.cata-toast-success .cata-toast-icon {
+  color: rgb(22, 163, 74);
+}
+
+.dark .cata-toast-success .cata-toast-icon {
+  color: rgb(34, 197, 94);
+}
+
+.cata-toast-error {
+  border-color: rgba(220, 38, 38, 0.5) !important;
+}
+
+.dark .cata-toast-error {
+  border-color: rgb(239, 68, 68) !important;
+  box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
+}
+
+.cata-toast-error .cata-toast-icon {
+  color: rgb(220, 38, 38);
+}
+
+.dark .cata-toast-error .cata-toast-icon {
+  color: rgb(239, 68, 68);
+}
+
+.cata-toast-warning {
+  border-color: rgba(202, 138, 4, 0.5) !important;
+}
+
+.dark .cata-toast-warning {
+  border-color: rgb(234, 179, 8) !important;
+  box-shadow: 0 0 12px rgba(255, 255, 0, 0.25);
+}
+
+.cata-toast-warning .cata-toast-icon {
+  color: rgb(202, 138, 4);
+}
+
+.dark .cata-toast-warning .cata-toast-icon {
+  color: rgb(234, 179, 8);
+}
+
+.cata-toast-info {
+  border-color: rgba(37, 99, 235, 0.5) !important;
+}
+
+.dark .cata-toast-info {
+  border-color: rgb(59, 130, 246) !important;
+  box-shadow: 0 0 12px rgba(70, 130, 180, 0.25);
+}
+
+.cata-toast-info .cata-toast-icon {
+  color: rgb(37, 99, 235);
+}
+
+.dark .cata-toast-info .cata-toast-icon {
+  color: rgb(59, 130, 246);
+}
+
+.cata-toast-neutral {
+  border-color: rgba(107, 114, 128, 0.5) !important;
+}
+
+.dark .cata-toast-neutral {
+  border-color: rgb(107, 114, 128) !important;
+  box-shadow: 0 0 12px rgba(128, 128, 128, 0.2);
+}
+
+.cata-toast-neutral .cata-toast-icon {
+  color: rgb(75, 85, 99);
+}
+
+.dark .cata-toast-neutral .cata-toast-icon {
+  color: rgb(156, 163, 175);
+}