yeah lets make the toasts white

src/app/globals.css

@@ -207,18 +207,22 @@
   /* Estilos específicos para diferentes tipos de toast */
   [data-sonner-toast][data-type="success"] {
     border-left: 4px solid hsl(142, 76%, 36%);
+    background: hsl(142, 76%, 97%) !important;
   }
 
   [data-sonner-toast][data-type="error"] {
     border-left: 4px solid hsl(0, 84%, 60%);
+    background: hsl(0, 84%, 97%) !important;
   }
 
   [data-sonner-toast][data-type="warning"] {
     border-left: 4px solid hsl(38, 92%, 50%);
+    background: hsl(38, 92%, 97%) !important;
   }
 
   [data-sonner-toast][data-type="info"] {
     border-left: 4px solid hsl(217, 91%, 60%);
+    background: hsl(217, 91%, 97%) !important;
   }
 
   /* Botón de cerrar personalizado */

src/components/ui/sonner.tsx

@@ -17,29 +17,29 @@ const Toaster = ({ ...props }: ToasterProps) => {
       duration={4000}
       toastOptions={{
         style: {
-          background: "hsl(220, 13%, 18%)",
-          border: "1px solid hsl(220, 13%, 25%)",
-          color: "hsl(0, 0%, 95%)",
-          borderRadius: "8px",
+          background: "hsl(0, 0%, 100%)",
+          border: "1px solid hsl(220, 13%, 91%)",
+          color: "hsl(220, 13%, 18%)",
+          borderRadius: "12px",
           fontSize: "14px",
           padding: "12px 16px",
-          boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)",
+          boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
         },
         className: "toast",
       }}
       style={
         {
-          "--normal-bg": "hsl(220, 13%, 18%)",
-          "--normal-text": "hsl(0, 0%, 95%)",
-          "--normal-border": "hsl(220, 13%, 25%)",
+          "--normal-bg": "hsl(0, 0%, 100%)",
+          "--normal-text": "hsl(220, 13%, 18%)",
+          "--normal-border": "hsl(220, 13%, 91%)",
           "--success-bg": "hsl(142, 76%, 36%)",
-          "--success-text": "hsl(355, 7%, 97%)",
+          "--success-text": "hsl(0, 0%, 100%)",
           "--error-bg": "hsl(0, 84%, 60%)",
-          "--error-text": "hsl(355, 7%, 97%)",
+          "--error-text": "hsl(0, 0%, 100%)",
           "--warning-bg": "hsl(38, 92%, 50%)",
-          "--warning-text": "hsl(355, 7%, 97%)",
+          "--warning-text": "hsl(0, 0%, 100%)",
           "--info-bg": "hsl(217, 91%, 60%)",
-          "--info-text": "hsl(355, 7%, 97%)",
+          "--info-text": "hsl(0, 0%, 100%)",
         } as React.CSSProperties
       }
       {...props}