added new restriction and fixed button dowload

src/components/Dowload/Reporte.tsx

@@ -2,15 +2,20 @@
 
 import styles from "./style.module.css";
 import Cookies from "js-cookie";
+import { useState } from "react";
 
 export default function DownloadReporteXLSX() {
+  const [loading, setLoading] = useState(false);
+
   const handleDownload = async () => {
-          const token = Cookies.get("token");
-      const headers = { Authorization: `Bearer ${token}` };
+    setLoading(true); // 🔹 Activa loader
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
 
     try {
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporteXLSX`,{headers}
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporteXLSX`,
+        { headers }
       );
 
       if (!response.ok) {
@@ -31,12 +36,22 @@ export default function DownloadReporteXLSX() {
     } catch (error) {
       console.error(error);
       alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false); // 🔹 Reactiva botón y oculta loader
     }
   };
 
   return (
-    <button className={styles.downloadBtn} onClick={handleDownload}>
-      Descargar XLSX
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} // 🔹 Botón deshabilitado
+    >
+      {loading ? (
+        <div className={styles.loader}></div> // 🔹 Icono de cargando
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
     </button>
   );
 }

src/components/Dowload/style.module.css

@@ -1,24 +1,43 @@
 .downloadBtn {
   display: flex;
+  justify-content: center;
   align-items: center;
-  background: #217346;
-  color: white;
-  border: none;
-  padding: 10px 16px;
+  gap: 8px;
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom: none;
+  padding: 5px 5px;
   cursor: pointer;
   border-radius: 10px 10px 0 0;
   font-size: 14px;
   font-weight: 600;
   transition: background 0.2s ease;
+  min-width: 50px;
 }
 
 .downloadBtn:hover {
-  background: #1e5838;
+  background: #95d2b0;
 }
 
-/* Icono con css puro */
-.icon {
-  width: 18px;
-  height: 18px;
-  position: relative;
-}
+.downloadBtn:disabled {
+  background: #a5a5a5;
+  cursor: not-allowed;
+}
+
+.loader {
+  border: 3px solid #ffffff55;
+  border-top: 3px solid white;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}