feat(ui): mejorar responsividad y experiencia de usuario en el dashboard

Se implementa un sistema de detección de dispositivos móviles para ajustar la posición del toaster. Se añaden estilos para mejorar la presentación del toaster en dispositivos móviles y se optimiza el botón de sincronización para manejar estados de carga y desactivación. Además, se establece un cooldown para las solicitudes de sincronización, evitando el spam de notificaciones.

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { Toaster } from "sonner";
 
@@ -13,6 +14,23 @@ import { AuthCallbackPage } from "./pages/AuthCallbackPage";
  * can wrap `<App />` with a `MemoryRouter` if needed.
  */
 export default function App() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 640px)");
+
+    const updateViewport = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+
+    updateViewport();
+    mediaQuery.addEventListener("change", updateViewport);
+
+    return () => {
+      mediaQuery.removeEventListener("change", updateViewport);
+    };
+  }, []);
+
   return (
     <AuthProvider>
       <Routes>
@@ -24,20 +42,24 @@ export default function App() {
       </Routes>
 
       <Toaster
-        position="bottom-right"
+        position={isMobile ? "bottom-center" : "bottom-right"}
         richColors
         closeButton
+        expand
         theme="light"
+        visibleToasts={4}
+        offset={20}
+        mobileOffset={{ bottom: 12, left: 12, right: 12 }}
         toastOptions={{ duration: 4000 }}
         style={{
           /* SUCCESS — ORCID corporate green */
-          '--success-bg': '#EAF3DE',
-          '--success-border': '#C0DD97',
-          '--success-text': '#3B6D11',
+          "--success-bg": "#EAF3DE",
+          "--success-border": "#C0DD97",
+          "--success-text": "#3B6D11",
           /* ERROR — hue-0° mirror of the ORCID green (same saturation & lightness) */
-          '--error-bg': '#F3DDDD',
-          '--error-border': '#DD9797',
-          '--error-text': '#6E1111',
+          "--error-bg": "#F3DDDD",
+          "--error-border": "#DD9797",
+          "--error-text": "#6E1111",
         }}
       />
     </AuthProvider>