diff --git a/src/pages/Procesos.jsx b/src/pages/Procesos.jsx
index bb75318..7dcd02a 100644
--- a/src/pages/Procesos.jsx
+++ b/src/pages/Procesos.jsx
@@ -32,13 +32,322 @@ export default function Procesos() {
   // Estado para loading de cambio de estado
   const [changingStateId, setChangingStateId] = useState(null);
 
-  // Dropdown state: id del proceso abierto o null
-  const [openDropdownId, setOpenDropdownId] = useState(null);
+  // Estado para el sistema de toast
+  const [toasts, setToasts] = useState([]);
+
+  // Estado para selección masiva
+  const [selectedProcesos, setSelectedProcesos] = useState([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+
+  // Función para mostrar toast
+  const showToast = (type, title, message, details = '') => {
+    const id = Date.now();
+    const newToast = {
+      id,
+      type,
+      title,
+      message,
+      details,
+      isVisible: true
+    };
+    
+    setToasts(prev => [...prev, newToast]);
+    
+    // Auto remover el toast después de 5 segundos (8 segundos para info)
+    const timeout = type === 'info' ? 8000 : 5000;
+    setTimeout(() => {
+      removeToast(id);
+    }, timeout);
+  };
+
+  // Función para remover toast
+  const removeToast = (id) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  };
+
+  // Función para actualizar el estado de un proceso específico
+  const updateProcesoEstado = (procId, nuevoEstado) => {
+    setProcesos(prev => prev.map(proc => 
+      proc.id === procId ? { ...proc, estado: nuevoEstado } : proc
+    ));
+  };
+
+  // Funciones para manejo de selección
+  const handleSelectProceso = (procesoId, isSelected) => {
+    if (isSelected) {
+      setSelectedProcesos(prev => [...prev, procesoId]);
+    } else {
+      setSelectedProcesos(prev => prev.filter(id => id !== procesoId));
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (isSelectAll) {
+      setSelectedProcesos([]);
+      setIsSelectAll(false);
+    } else {
+      // Solo seleccionar procesos que se pueden ejecutar (En Espera o Error)
+      const procesosEjecutables = procesos.filter(proc => proc.estado === 1 || proc.estado === 4);
+      setSelectedProcesos(procesosEjecutables.map(proc => proc.id));
+      setIsSelectAll(true);
+    }
+  };
+
+  // Función para procesar página entera
+  const handleProcesarPaginaEntera = async () => {
+    const procesosEjecutables = procesos.filter(proc => proc.estado === 1 || proc.estado === 4);
+    
+    if (procesosEjecutables.length === 0) {
+      showToast('warning', 'Sin procesos ejecutables', 'No hay procesos en estado "En Espera" o "Error" para procesar.');
+      return;
+    }
+
+    showToast('info', 'Iniciando procesamiento masivo', `Procesando ${procesosEjecutables.length} procesos de la página actual...`);
+
+    let exitosos = 0;
+    let errores = 0;
+
+    for (const proc of procesosEjecutables) {
+      try {
+        // Cambiar estado visual a "Procesando"
+        updateProcesoEstado(proc.id, 2);
+        
+        // Determinar endpoint según el tipo de servicio
+        let endpoint = '';
+        switch (proc.servicio) {
+          case 3: endpoint = '/services/pedimento_completo'; break;
+          case 4: endpoint = '/services/partidas'; break;
+          case 5: endpoint = '/services/remesas'; break;
+          case 6: endpoint = '/services/acuse'; break;
+          case 7: endpoint = '/services/edocument'; break;
+          case 8: endpoint = '/services/coves'; break;
+          case 9: endpoint = '/services/acuseCove'; break;
+          default:
+            updateProcesoEstado(proc.id, 4);
+            errores++;
+            continue;
+        }
+
+        const body = {
+          pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
+          organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId,
+        };
+
+        const res = await postWithAuth(`${MICROSERVICE_URL}${endpoint}`, body);
+
+        if (!res.ok) {
+          updateProcesoEstado(proc.id, 4);
+          errores++;
+        } else {
+          updateProcesoEstado(proc.id, 3);
+          exitosos++;
+        }
+
+        // Pequeña pausa entre requests para no sobrecargar
+        await new Promise(resolve => setTimeout(resolve, 500));
+      } catch (err) {
+        updateProcesoEstado(proc.id, 4);
+        errores++;
+      }
+    }
+
+    showToast('success', 'Procesamiento masivo completado', 
+      `Resultados: ${exitosos} exitosos, ${errores} errores de ${procesosEjecutables.length} procesos.`);
+  };
+
+  // Función para procesar seleccionados
+  const handleProcesarSeleccionados = async () => {
+    if (selectedProcesos.length === 0) {
+      showToast('warning', 'Sin selección', 'No hay procesos seleccionados para procesar.');
+      return;
+    }
+
+    const procesosAEjecutar = procesos.filter(proc => 
+      selectedProcesos.includes(proc.id) && (proc.estado === 1 || proc.estado === 4)
+    );
+
+    if (procesosAEjecutar.length === 0) {
+      showToast('warning', 'Sin procesos ejecutables', 'Los procesos seleccionados no están en estado "En Espera" o "Error".');
+      return;
+    }
+
+    showToast('info', 'Iniciando procesamiento de seleccionados', `Procesando ${procesosAEjecutar.length} procesos seleccionados...`);
+
+    let exitosos = 0;
+    let errores = 0;
+
+    for (const proc of procesosAEjecutar) {
+      try {
+        // Cambiar estado visual a "Procesando"
+        updateProcesoEstado(proc.id, 2);
+        
+        // Determinar endpoint según el tipo de servicio
+        let endpoint = '';
+        switch (proc.servicio) {
+          case 3: endpoint = '/services/pedimento_completo'; break;
+          case 4: endpoint = '/services/partidas'; break;
+          case 5: endpoint = '/services/remesas'; break;
+          case 6: endpoint = '/services/acuse'; break;
+          case 7: endpoint = '/services/edocument'; break;
+          case 8: endpoint = '/services/coves'; break;
+          case 9: endpoint = '/services/acuseCove'; break;
+          default:
+            updateProcesoEstado(proc.id, 4);
+            errores++;
+            continue;
+        }
+
+        const body = {
+          pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
+          organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId,
+        };
+
+        const res = await postWithAuth(`${MICROSERVICE_URL}${endpoint}`, body);
+
+        if (!res.ok) {
+          updateProcesoEstado(proc.id, 4);
+          errores++;
+        } else {
+          updateProcesoEstado(proc.id, 3);
+          exitosos++;
+        }
+
+        // Pequeña pausa entre requests para no sobrecargar
+        await new Promise(resolve => setTimeout(resolve, 500));
+      } catch (err) {
+        updateProcesoEstado(proc.id, 4);
+        errores++;
+      }
+    }
+
+    // Limpiar selección después del procesamiento
+    setSelectedProcesos([]);
+    setIsSelectAll(false);
+
+    showToast('success', 'Procesamiento de seleccionados completado', 
+      `Resultados: ${exitosos} exitosos, ${errores} errores de ${procesosAEjecutar.length} procesos.`);
+  };
+
+  // Función para pasar página entera a En Espera
+  const handlePasarPaginaAEspera = async () => {
+    const procesosEnError = procesos.filter(proc => proc.estado === 4);
+    
+    if (procesosEnError.length === 0) {
+      showToast('warning', 'Sin procesos en error', 'No hay procesos en estado "Error" para pasar a "En Espera".');
+      return;
+    }
+
+    showToast('info', 'Iniciando cambio masivo de estado', `Pasando ${procesosEnError.length} procesos a "En Espera"...`);
+
+    let exitosos = 0;
+    let errores = 0;
+
+    for (const proc of procesosEnError) {
+      try {
+        // Cambiar estado visual a "Procesando" temporalmente
+        updateProcesoEstado(proc.id, 2);
+        
+        const body = {
+          estado: 1, // Cambiar a En Espera
+          tipo_procesamiento: 2,
+          pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
+          servicio: proc.servicio,
+          organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId
+        };
+        
+        const res = await putWithAuth(`${API_URL}/customs/procesamientopedimentos/${proc.id}/`, body);
+        
+        if (!res.ok) {
+          // Si falla, revertir a estado Error
+          updateProcesoEstado(proc.id, 4);
+          errores++;
+        } else {
+          // Si es exitoso, cambiar estado a En Espera
+          updateProcesoEstado(proc.id, 1);
+          exitosos++;
+        }
+
+        // Pequeña pausa entre requests para no sobrecargar
+        await new Promise(resolve => setTimeout(resolve, 300));
+      } catch (err) {
+        updateProcesoEstado(proc.id, 4);
+        errores++;
+      }
+    }
+
+    showToast('success', 'Cambio masivo de estado completado', 
+      `Resultados: ${exitosos} exitosos, ${errores} errores de ${procesosEnError.length} procesos.`);
+  };
+
+  // Función para pasar seleccionados a En Espera
+  const handlePasarSeleccionadosAEspera = async () => {
+    if (selectedProcesos.length === 0) {
+      showToast('warning', 'Sin selección', 'No hay procesos seleccionados para cambiar.');
+      return;
+    }
+
+    const procesosACambiar = procesos.filter(proc => 
+      selectedProcesos.includes(proc.id) && proc.estado === 4
+    );
+
+    if (procesosACambiar.length === 0) {
+      showToast('warning', 'Sin procesos en error', 'Los procesos seleccionados no están en estado "Error".');
+      return;
+    }
+
+    showToast('info', 'Iniciando cambio de estado de seleccionados', `Pasando ${procesosACambiar.length} procesos seleccionados a "En Espera"...`);
+
+    let exitosos = 0;
+    let errores = 0;
+
+    for (const proc of procesosACambiar) {
+      try {
+        // Cambiar estado visual a "Procesando" temporalmente
+        updateProcesoEstado(proc.id, 2);
+        
+        const body = {
+          estado: 1, // Cambiar a En Espera
+          tipo_procesamiento: 2,
+          pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
+          servicio: proc.servicio,
+          organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId
+        };
+        
+        const res = await putWithAuth(`${API_URL}/customs/procesamientopedimentos/${proc.id}/`, body);
+        
+        if (!res.ok) {
+          // Si falla, revertir a estado Error
+          updateProcesoEstado(proc.id, 4);
+          errores++;
+        } else {
+          // Si es exitoso, cambiar estado a En Espera
+          updateProcesoEstado(proc.id, 1);
+          exitosos++;
+        }
+
+        // Pequeña pausa entre requests para no sobrecargar
+        await new Promise(resolve => setTimeout(resolve, 300));
+      } catch (err) {
+        updateProcesoEstado(proc.id, 4);
+        errores++;
+      }
+    }
+
+    // Limpiar selección después del cambio
+    setSelectedProcesos([]);
+    setIsSelectAll(false);
+
+    showToast('success', 'Cambio de estado de seleccionados completado', 
+      `Resultados: ${exitosos} exitosos, ${errores} errores de ${procesosACambiar.length} procesos.`);
+  };
 
   // Función para cambiar estado de Error a En Espera
   const handlePasarAEspera = async (proc) => {
     setChangingStateId(proc.id);
     
+    // Cambiar estado visual a "Procesando" inmediatamente
+    updateProcesoEstado(proc.id, 2); // 2 = Procesando
+    
     try {
       const body = {
         estado: 1, // Cambiar a En Espera
@@ -51,7 +360,9 @@ export default function Procesos() {
       const res = await putWithAuth(`${API_URL}/customs/procesamientopedimentos/${proc.id}/`, body);
       
       if (!res.ok) {
-        // Intentar obtener más detalles del error
+        // Si falla, revertir a estado Error
+        updateProcesoEstado(proc.id, 4); // 4 = Error
+        
         let errorText = 'Error desconocido';
         try {
           errorText = await res.text();
@@ -61,11 +372,15 @@ export default function Procesos() {
         throw new Error(`Error al cambiar el estado del proceso: ${errorText}`);
       }
       
-      alert('Estado cambiado a "En Espera" correctamente');
-      setOpenDropdownId(null);
+      // Cambiar estado visual a "En Espera" si fue exitoso
+      updateProcesoEstado(proc.id, 1); // 1 = En Espera
       
-      // Refrescar la lista de procesos
-      window.location.reload();
+      showToast('success', '¡Éxito!', 'Estado cambiado a "En Espera" correctamente');
+      
+      // Refrescar la lista de procesos después de un delay más largo
+      setTimeout(() => {
+        window.location.reload();
+      }, 3000);
     } catch (err) {
       // Crear un mensaje de error más detallado y persistente
       const errorDetails = {
@@ -87,9 +402,9 @@ export default function Procesos() {
       `.trim();
       
       if (err.message === 'SESSION_EXPIRED') {
-        alert('🚪 SESIÓN EXPIRADA\n\nTu sesión ha expirado. Por favor, inicia sesión nuevamente.\n\n' + detailedMessage);
+        showToast('error', '🚪 Sesión Expirada', 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.', detailedMessage);
       } else {
-        alert(detailedMessage);
+        showToast('error', '🚨 Error al cambiar estado', 'Ocurrió un error al intentar cambiar el estado del proceso.', detailedMessage);
       }
     } finally {
       setChangingStateId(null);
@@ -100,6 +415,10 @@ export default function Procesos() {
   // Función para ejecutar el servicio según el tipo de proceso
   const handleEjecutarServicio = async (proc) => {
     setExecutingId(proc.id);
+    
+    // Cambiar estado visual a "Procesando" inmediatamente
+    updateProcesoEstado(proc.id, 2); // 2 = Procesando
+    
     let endpoint = '';
     // Determinar endpoint según el tipo de servicio
     switch (proc.servicio) {
@@ -125,7 +444,9 @@ export default function Procesos() {
         endpoint = '/services/acuseCove';
         break;
       default:
-        alert('Servicio no soportado para ejecución directa.');
+        // Revertir estado si el servicio no es soportado
+        updateProcesoEstado(proc.id, proc.estado); // Revertir al estado original
+        showToast('error', 'Servicio no soportado', 'Este servicio no es compatible para ejecución directa.');
         setExecutingId(null);
         return;
     }
@@ -138,46 +459,30 @@ export default function Procesos() {
       
       const res = await postWithAuth(`${MICROSERVICE_URL}${endpoint}`, body);
       
-      if (!res.ok) throw new Error('Error al ejecutar el servicio');
+      if (!res.ok) {
+        // Si falla, cambiar estado a Error
+        updateProcesoEstado(proc.id, 4); // 4 = Error
+        throw new Error('Error al ejecutar el servicio');
+      }
       
-      alert('Servicio ejecutado correctamente');
-      setOpenDropdownId(null);
+      // Si es exitoso, cambiar estado a Finalizado
+      updateProcesoEstado(proc.id, 3); // 3 = Finalizado
+      
+      showToast('success', '¡Servicio ejecutado!', 'El servicio se ha ejecutado correctamente');
     } catch (err) {
+      // Cambiar estado a Error en caso de excepción
+      updateProcesoEstado(proc.id, 4); // 4 = Error
+      
       if (err.message === 'SESSION_EXPIRED') {
-        alert('Tu sesión ha expirado. Por favor, inicia sesión nuevamente.');
+        showToast('error', '🚪 Sesión Expirada', 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.');
       } else {
-        alert('Error al ejecutar el servicio: ' + (err instanceof Error ? err.message : String(err)));
+        showToast('error', '❌ Error al ejecutar servicio', 'Ocurrió un error al intentar ejecutar el servicio.', 'Error: ' + (err instanceof Error ? err.message : String(err)));
       }
     } finally {
       setExecutingId(null);
     }
   };
 
-  // Cierra el dropdown si se hace click fuera
-  useEffect(() => {
-    if (openDropdownId === null) return;
-    
-    function handleClickOutside(e) {
-      // Buscar el dropdown específico que está abierto
-      const dropdownContainer = document.getElementById(`dropdown-acciones-${openDropdownId}`);
-      
-      // Si el click fue fuera del dropdown, cerrarlo
-      if (dropdownContainer && !dropdownContainer.contains(e.target)) {
-        setOpenDropdownId(null);
-      }
-    }
-    
-    // Agregar el listener con un pequeño delay para evitar que se cierre inmediatamente
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('click', handleClickOutside, true);
-    }, 100);
-    
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, [openDropdownId]);
-
   useEffect(() => {
     async function fetchProcesos() {
       setLoading(true);
@@ -281,12 +586,168 @@ export default function Procesos() {
               </div>
               Procesamiento de Pedimentos
             </h2>
-            {count > 0 && (
-              <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl px-4 py-2 border border-blue-100">
-                <span className="text-sm font-medium text-blue-700">Total de registros: </span>
-                <span className="text-lg font-bold text-blue-800">{count}</span>
+            <div className="flex flex-col sm:flex-row gap-3">
+              {count > 0 && (
+                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl px-4 py-2 border border-blue-100">
+                  <span className="text-sm font-medium text-blue-700">Total de registros: </span>
+                  <span className="text-lg font-bold text-blue-800">{count}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Botones de acción masiva */}
+          <div className="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 rounded-2xl p-4 sm:p-6 border border-emerald-200">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+              <svg className="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              Acciones masivas
+            </h3>
+            
+            <div className="flex flex-col lg:flex-row gap-4">
+              {/* Sección de Procesamiento */}
+              <div className="flex-1 bg-white rounded-xl p-4 border border-green-200">
+                <div className="flex items-center gap-2 mb-3">
+                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                  <h4 className="text-sm font-semibold text-gray-700">Ejecutar Servicios</h4>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <button
+                    onClick={handleProcesarPaginaEntera}
+                    disabled={procesos.filter(proc => proc.estado === 1 || proc.estado === 4).length === 0}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                      procesos.filter(proc => proc.estado === 1 || proc.estado === 4).length === 0
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
+                        : 'bg-gradient-to-r from-emerald-500 to-green-600 text-white shadow-md hover:shadow-lg focus:ring-emerald-500'
+                    }`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    Página Entera
+                    {procesos.filter(proc => proc.estado === 1 || proc.estado === 4).length > 0 && (
+                      <span className="bg-white/20 px-1.5 py-0.5 rounded-full text-xs">
+                        {procesos.filter(proc => proc.estado === 1 || proc.estado === 4).length}
+                      </span>
+                    )}
+                  </button>
+
+                  <button
+                    onClick={handleProcesarSeleccionados}
+                    disabled={selectedProcesos.length === 0}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                      selectedProcesos.length === 0
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
+                        : 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md hover:shadow-lg focus:ring-blue-500'
+                    }`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    Seleccionados
+                    {selectedProcesos.length > 0 && (
+                      <span className="bg-white/20 px-1.5 py-0.5 rounded-full text-xs">
+                        {selectedProcesos.length}
+                      </span>
+                    )}
+                  </button>
+                </div>
               </div>
-            )}
+
+              {/* Divisor vertical */}
+              <div className="hidden lg:block w-px bg-gray-300"></div>
+
+              {/* Sección de Cambio de Estado */}
+              <div className="flex-1 bg-white rounded-xl p-4 border border-orange-200">
+                <div className="flex items-center gap-2 mb-3">
+                  <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
+                  <h4 className="text-sm font-semibold text-gray-700">Pasar a En Espera</h4>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <button
+                    onClick={handlePasarPaginaAEspera}
+                    disabled={procesos.filter(proc => proc.estado === 4).length === 0}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                      procesos.filter(proc => proc.estado === 4).length === 0
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
+                        : 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-md hover:shadow-lg focus:ring-orange-500'
+                    }`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    Página Entera
+                    {procesos.filter(proc => proc.estado === 4).length > 0 && (
+                      <span className="bg-white/20 px-1.5 py-0.5 rounded-full text-xs">
+                        {procesos.filter(proc => proc.estado === 4).length}
+                      </span>
+                    )}
+                  </button>
+
+                  <button
+                    onClick={handlePasarSeleccionadosAEspera}
+                    disabled={selectedProcesos.filter(id => {
+                      const proc = procesos.find(p => p.id === id);
+                      return proc && proc.estado === 4;
+                    }).length === 0}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                      selectedProcesos.filter(id => {
+                        const proc = procesos.find(p => p.id === id);
+                        return proc && proc.estado === 4;
+                      }).length === 0
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
+                        : 'bg-gradient-to-r from-yellow-500 to-orange-500 text-white shadow-md hover:shadow-lg focus:ring-yellow-500'
+                    }`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    Seleccionados
+                    {selectedProcesos.filter(id => {
+                      const proc = procesos.find(p => p.id === id);
+                      return proc && proc.estado === 4;
+                    }).length > 0 && (
+                      <span className="bg-white/20 px-1.5 py-0.5 rounded-full text-xs">
+                        {selectedProcesos.filter(id => {
+                          const proc = procesos.find(p => p.id === id);
+                          return proc && proc.estado === 4;
+                        }).length}
+                      </span>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Divisor vertical */}
+              <div className="hidden lg:block w-px bg-gray-300"></div>
+
+              {/* Sección de Control */}
+              <div className="lg:w-auto bg-white rounded-xl p-4 border border-gray-200">
+                <div className="flex items-center gap-2 mb-3">
+                  <div className="w-3 h-3 bg-gray-500 rounded-full"></div>
+                  <h4 className="text-sm font-semibold text-gray-700">Control</h4>
+                </div>
+                {selectedProcesos.length > 0 ? (
+                  <button
+                    onClick={() => {
+                      setSelectedProcesos([]);
+                      setIsSelectAll(false);
+                    }}
+                    className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 bg-gray-100 text-gray-600 hover:bg-gray-200 border border-gray-300 w-full"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                    Limpiar
+                  </button>
+                ) : (
+                  <div className="flex items-center justify-center px-4 py-2 text-sm text-gray-400">
+                    Sin selección
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
           
           {/* Filtros responsivos mejorados */}
@@ -374,12 +835,23 @@ export default function Procesos() {
           ) : (
             <>
               {/* Vista de tabla para pantallas grandes */}
-              <div className="hidden lg:block overflow-x-auto bg-white rounded-2xl border border-gray-200 shadow-sm relative">
+              <div className="hidden lg:block overflow-x-auto bg-white rounded-2xl border border-gray-200 shadow-sm relative pb-20"
+                style={{ 
+                  overflowY: 'visible' // Permitir que los dropdowns se muestren fuera del contenedor
+                }}>
                 <table className="min-w-full divide-y divide-gray-200 relative"
                   style={{ position: 'relative', zIndex: 1 }}>
                   <thead className="bg-gradient-to-r from-gray-50 to-slate-50 sticky top-0 z-10">
                     <tr>
-                      <th className="px-4 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200 rounded-tl-2xl"
+                      <th className="px-4 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider rounded-tl-2xl">
+                        <input
+                          type="checkbox"
+                          checked={isSelectAll}
+                          onChange={handleSelectAll}
+                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
+                        />
+                      </th>
+                      <th className="px-4 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200"
                         onClick={() => {
                           setSortField('id');
                           setSortOrder(sortField === 'id' && sortOrder === 'asc' ? 'desc' : 'asc');
@@ -437,7 +909,7 @@ export default function Procesos() {
                   <tbody className="bg-white divide-y divide-gray-100 relative" style={{ position: 'relative' }}>
                     {procesos.length === 0 ? (
                       <tr>
-                        <td colSpan={6} className="text-center py-12">
+                        <td colSpan={7} className="text-center py-12">
                           <div className="flex flex-col items-center">
                             <div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                               <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -452,6 +924,15 @@ export default function Procesos() {
                     ) : (
                       procesos.map((proc) => (
                         <tr key={proc.id} className="transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:shadow-lg">
+                          <td className="px-4 py-4 text-center align-middle whitespace-nowrap">
+                            <input
+                              type="checkbox"
+                              checked={selectedProcesos.includes(proc.id)}
+                              onChange={(e) => handleSelectProceso(proc.id, e.target.checked)}
+                              disabled={proc.estado === 2 || proc.estado === 3} // Deshabilitar si está Procesando o Finalizado
+                              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 disabled:opacity-50"
+                            />
+                          </td>
                           <td className="px-4 py-4 text-center align-middle whitespace-nowrap">
                             <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded-lg text-sm font-semibold">{proc.id}</span>
                           </td>
@@ -488,73 +969,56 @@ export default function Procesos() {
                             : String(proc.servicio)}
                           </td>
                           <td className="px-4 py-4 text-center align-middle whitespace-nowrap">
-                            <div className="relative inline-block text-left" id={`dropdown-acciones-${proc.id}`}> 
+                            <div className="flex items-center justify-center gap-2">
+                              {/* Botón Play - Ejecutar Servicio */}
                               <button
-                                className="inline-flex justify-center items-center rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 transform hover:scale-105 active:bg-gray-100"
-                                type="button"
-                                onClick={() => setOpenDropdownId(openDropdownId === proc.id ? null : proc.id)}
+                                className={`group inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                                  executingId === proc.id ||
+                                  proc.estado === 3 || // Deshabilitar si está Finalizado
+                                  proc.estado === 2    // Deshabilitar si está Procesando
+                                    ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
+                                    : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'
+                                }`}
+                                onClick={() => handleEjecutarServicio(proc)}
+                                disabled={
+                                  executingId === proc.id ||
+                                  proc.estado === 3 || // Deshabilitar si está Finalizado
+                                  proc.estado === 2    // Deshabilitar si está Procesando
+                                }
+                                title={executingId === proc.id ? 'Ejecutando...' : proc.estado === 2 ? 'Proceso en ejecución' : 'Ejecutar Servicio'}
                               >
-                                Acciones
-                                <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                                </svg>
+                                {executingId === proc.id ? (
+                                  <svg className="w-4 h-4 text-gray-500 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                  </svg>
+                                ) : (
+                                  <svg className="w-4 h-4 text-green-600 group-hover:text-green-700" fill="currentColor" viewBox="0 0 24 24">
+                                    <path d="M8 5v14l11-7z"/>
+                                  </svg>
+                                )}
+                              </button>
+
+                              {/* Botón Reload - Pasar a Espera */}
+                              <button
+                                className={`group inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                                  proc.estado !== 4 || changingStateId === proc.id
+                                    ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
+                                    : 'bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300 focus:ring-orange-500 cursor-pointer'
+                                }`}
+                                disabled={proc.estado !== 4 || changingStateId === proc.id}
+                                onClick={() => handlePasarAEspera(proc)}
+                                title={changingStateId === proc.id ? 'Cambiando...' : 'Pasar a Espera'}
+                              >
+                                {changingStateId === proc.id ? (
+                                  <svg className="w-4 h-4 text-gray-500 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                  </svg>
+                                ) : (
+                                  <svg className="w-4 h-4 text-orange-600 group-hover:text-orange-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                  </svg>
+                                )}
                               </button>
-                              {openDropdownId === proc.id && (
-                                <>
-                                  {/* Overlay invisible para cerrar dropdown */}
-                                  <div 
-                                    className="fixed inset-0 z-[100]" 
-                                    onClick={() => setOpenDropdownId(null)}
-                                  />
-                                  {/* Dropdown menu */}
-                                  <div className="absolute right-0 mt-2 w-56 rounded-xl shadow-2xl bg-white ring-1 ring-black ring-opacity-5 z-[200] border border-gray-200 overflow-hidden"
-                                    style={{ 
-                                      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-                                      transform: 'translateZ(0)' // Force hardware acceleration
-                                    }}>
-                                    <div className="py-1" role="menu">
-                                      <button
-                                        className="flex items-center w-full text-left px-4 py-3 text-sm text-blue-700 hover:bg-blue-50 disabled:opacity-60 disabled:cursor-not-allowed transition-colors duration-200 border-b border-gray-100"
-                                        onClick={(e) => {
-                                          e.stopPropagation();
-                                          handleEjecutarServicio(proc);
-                                          setOpenDropdownId(null);
-                                        }}
-                                        disabled={
-                                          executingId === proc.id ||
-                                          proc.estado === 2 || // Procesando
-                                          proc.estado === 3 || // Finalizado
-                                          proc.estado === 4    // Error
-                                        }
-                                        role="menuitem"
-                                      >
-                                        <svg className="w-4 h-4 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                        </svg>
-                                        <span className="font-medium">
-                                          {executingId === proc.id ? 'Ejecutando...' : 'Ejecutar Servicio'}
-                                        </span>
-                                      </button>
-                                      <button
-                                        className={`flex items-center w-full text-left px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200 ${proc.estado === 4 ? '' : ' opacity-50 cursor-not-allowed'}`}
-                                        disabled={proc.estado !== 4 || changingStateId === proc.id}
-                                        onClick={(e) => {
-                                          e.stopPropagation();
-                                          handlePasarAEspera(proc);
-                                        }}
-                                        role="menuitem"
-                                      >
-                                        <svg className="w-4 h-4 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                        </svg>
-                                        <span className="font-medium">
-                                          {changingStateId === proc.id ? 'Cambiando...' : 'Pasar a espera'}
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </>
-                              )}
                             </div>
                           </td>
                         </tr>
@@ -578,9 +1042,16 @@ export default function Procesos() {
                   </div>
                 ) : (
                   procesos.map((proc) => (
-                    <div key={proc.id} className={`bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-300 relative ${openDropdownId === proc.id ? 'z-[100]' : ''}`}>
+                    <div key={proc.id} className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-300">
                       <div className="flex items-start justify-between mb-4">
                         <div className="flex items-center gap-3">
+                          <input
+                            type="checkbox"
+                            checked={selectedProcesos.includes(proc.id)}
+                            onChange={(e) => handleSelectProceso(proc.id, e.target.checked)}
+                            disabled={proc.estado === 2 || proc.estado === 3} // Deshabilitar si está Procesando o Finalizado
+                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 disabled:opacity-50 mt-1"
+                          />
                           <div className="bg-blue-100 rounded-xl p-2 flex-shrink-0">
                             <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@@ -631,58 +1102,56 @@ export default function Procesos() {
                         </div>
                       </div>
                       
-                      <div className="relative z-30" id={`dropdown-acciones-${proc.id}`}>
+                      <div className="flex items-center justify-center gap-3">
+                        {/* Botón Play - Ejecutar Servicio */}
                         <button
-                          className="w-full inline-flex justify-center items-center rounded-xl border border-gray-300 shadow-sm px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 active:bg-gray-100"
-                          type="button"
-                          onClick={() => setOpenDropdownId(openDropdownId === proc.id ? null : proc.id)}
+                          className={`group inline-flex items-center justify-center w-10 h-10 rounded-xl border transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                            executingId === proc.id ||
+                            proc.estado === 3 || // Deshabilitar si está Finalizado
+                            proc.estado === 2    // Deshabilitar si está Procesando
+                              ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
+                              : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer shadow-sm hover:shadow-md'
+                          }`}
+                          onClick={() => handleEjecutarServicio(proc)}
+                          disabled={
+                            executingId === proc.id ||
+                            proc.estado === 3 || // Deshabilitar si está Finalizado
+                            proc.estado === 2    // Deshabilitar si está Procesando
+                          }
+                          title={executingId === proc.id ? 'Ejecutando...' : proc.estado === 2 ? 'Proceso en ejecución' : 'Ejecutar Servicio'}
                         >
-                          Acciones
-                          <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                          </svg>
+                          {executingId === proc.id ? (
+                            <svg className="w-5 h-5 text-gray-500 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            </svg>
+                          ) : (
+                            <svg className="w-5 h-5 text-green-600 group-hover:text-green-700" fill="currentColor" viewBox="0 0 24 24">
+                              <path d="M8 5v14l11-7z"/>
+                            </svg>
+                          )}
+                        </button>
+
+                        {/* Botón Reload - Pasar a Espera */}
+                        <button
+                          className={`group inline-flex items-center justify-center w-10 h-10 rounded-xl border transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+                            proc.estado !== 4 || changingStateId === proc.id
+                              ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
+                              : 'bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300 focus:ring-orange-500 cursor-pointer shadow-sm hover:shadow-md'
+                          }`}
+                          disabled={proc.estado !== 4 || changingStateId === proc.id}
+                          onClick={() => handlePasarAEspera(proc)}
+                          title={changingStateId === proc.id ? 'Cambiando...' : 'Pasar a Espera'}
+                        >
+                          {changingStateId === proc.id ? (
+                            <svg className="w-5 h-5 text-gray-500 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            </svg>
+                          ) : (
+                            <svg className="w-5 h-5 text-orange-600 group-hover:text-orange-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            </svg>
+                          )}
                         </button>
-                        {openDropdownId === proc.id && (
-                          <div className="absolute left-0 right-0 mt-2 rounded-xl shadow-2xl bg-white ring-2 ring-gray-300 z-[9999] border border-gray-200 overflow-hidden"
-                            style={{ boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }}>
-                            <div className="py-1">
-                              <button
-                                className="flex items-center w-full text-left px-4 py-4 text-sm text-blue-700 hover:bg-blue-50 disabled:opacity-60 disabled:cursor-not-allowed transition-colors duration-200 border-b border-gray-100"
-                                onClick={() => {
-                                  handleEjecutarServicio(proc);
-                                  setOpenDropdownId(null); // Cerrar dropdown después de ejecutar
-                                }}
-                                disabled={
-                                  executingId === proc.id ||
-                                  proc.estado === 2 || // Procesando
-                                  proc.estado === 3 || // Finalizado
-                                  proc.estado === 4    // Error
-                                }
-                              >
-                                <svg className="w-4 h-4 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                </svg>
-                                <span className="font-medium">
-                                  {executingId === proc.id ? 'Ejecutando...' : 'Ejecutar Servicio'}
-                                </span>
-                              </button>
-                              <button
-                                className={`flex items-center w-full text-left px-4 py-4 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200 ${proc.estado === 4 ? '' : ' opacity-50 cursor-not-allowed'}`}
-                                disabled={proc.estado !== 4 || changingStateId === proc.id}
-                                onClick={() => {
-                                  handlePasarAEspera(proc);
-                                }}
-                              >
-                                <svg className="w-4 h-4 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
-                                <span className="font-medium">
-                                  {changingStateId === proc.id ? 'Cambiando...' : 'Pasar a espera'}
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        )}
                       </div>
                     </div>
                   ))
@@ -777,6 +1246,138 @@ export default function Procesos() {
           )}
         </div>
       </div>
+
+      {/* Sistema de Toast Notifications */}
+      <div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`transform transition-all duration-500 ease-in-out ${
+              toast.isVisible 
+                ? 'translate-x-0 opacity-100 scale-100' 
+                : 'translate-x-full opacity-0 scale-95'
+            }`}
+          >
+            <div className={`rounded-xl shadow-2xl border-l-4 backdrop-blur-sm overflow-hidden ${
+              toast.type === 'success' 
+                ? 'bg-green-50/95 border-green-500 text-green-800' 
+                : toast.type === 'error' 
+                ? 'bg-red-50/95 border-red-500 text-red-800' 
+                : toast.type === 'warning'
+                ? 'bg-orange-50/95 border-orange-500 text-orange-800'
+                : toast.type === 'info'
+                ? 'bg-blue-50/95 border-blue-500 text-blue-800'
+                : 'bg-blue-50/95 border-blue-500 text-blue-800'
+            }`}>
+              <div className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center ${
+                    toast.type === 'success' 
+                      ? 'bg-green-500' 
+                      : toast.type === 'error' 
+                      ? 'bg-red-500' 
+                      : toast.type === 'warning'
+                      ? 'bg-orange-500'
+                      : toast.type === 'info'
+                      ? 'bg-blue-500'
+                      : 'bg-blue-500'
+                  }`}>
+                    {toast.type === 'success' ? (
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    ) : toast.type === 'error' ? (
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    ) : toast.type === 'warning' ? (
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    ) : (
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="text-sm font-semibold mb-1">{toast.title}</h4>
+                    <p className="text-sm opacity-90">{toast.message}</p>
+                    {toast.details && (
+                      <details className="mt-2 cursor-pointer">
+                        <summary className="text-xs opacity-70 hover:opacity-100 transition-opacity">
+                          Ver detalles técnicos
+                        </summary>
+                        <div className={`mt-1 p-2 rounded text-xs font-mono text-left max-h-20 overflow-y-auto ${
+                          toast.type === 'success' 
+                            ? 'bg-green-100/80' 
+                            : toast.type === 'error' 
+                            ? 'bg-red-100/80' 
+                            : toast.type === 'warning'
+                            ? 'bg-orange-100/80'
+                            : toast.type === 'info'
+                            ? 'bg-blue-100/80'
+                            : 'bg-blue-100/80'
+                        }`}>
+                          <pre className="whitespace-pre-wrap break-words">{toast.details}</pre>
+                        </div>
+                      </details>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => removeToast(toast.id)}
+                    className="flex-shrink-0 ml-2 opacity-60 hover:opacity-100 transition-opacity"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              
+              {/* Barra de progreso */}
+              <div className={`h-1 ${
+                toast.type === 'success' 
+                  ? 'bg-green-200' 
+                  : toast.type === 'error' 
+                  ? 'bg-red-200' 
+                  : toast.type === 'warning'
+                  ? 'bg-orange-200'
+                  : toast.type === 'info'
+                  ? 'bg-blue-200'
+                  : 'bg-blue-200'
+              }`}>
+                <div 
+                  className={`h-full transition-all ease-linear ${
+                    toast.type === 'success' 
+                      ? 'bg-green-500' 
+                      : toast.type === 'error' 
+                      ? 'bg-red-500' 
+                      : toast.type === 'warning'
+                      ? 'bg-orange-500'
+                      : toast.type === 'info'
+                      ? 'bg-blue-500'
+                      : 'bg-blue-500'
+                  }`}
+                  style={{ 
+                    width: '100%',
+                    animationDuration: toast.type === 'info' ? '8000ms' : '5000ms',
+                    animation: `toast-progress ${toast.type === 'info' ? '8s' : '5s'} linear forwards`
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Estilos CSS para las animaciones */}
+      <style>{`
+        @keyframes toast-progress {
+          from { width: 100%; }
+          to { width: 0%; }
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/src/pages/Users.jsx b/src/pages/Users.jsx
index 7347a9e..d80f388 100644
--- a/src/pages/Users.jsx
+++ b/src/pages/Users.jsx
@@ -8,6 +8,8 @@ const initialForm = {
   first_name: '',
   last_name: '',
   password: '',
+  confirmPassword: '',
+  rfc: '', // Agregar campo RFC para importadores
 };
 
 export default function Users() {
@@ -44,6 +46,20 @@ export default function Users() {
   const [itemsPerPage, setItemsPerPage] = useState(10);
   const { showMessage } = useNotification();
 
+  // Estados para validación de contraseña
+  const [passwordValidation, setPasswordValidation] = useState({
+    length: false,
+    uppercase: false,
+    lowercase: false,
+    number: false,
+    special: false,
+  });
+  const [showPasswordValidation, setShowPasswordValidation] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [passwordsMatch, setPasswordsMatch] = useState(true);
+  const [showPasswordMatchValidation, setShowPasswordMatchValidation] = useState(false);
+
   const loadUsers = () => {
     setLoading(true);
     fetchUsers()
@@ -107,7 +123,52 @@ export default function Users() {
   }, [searchTerm]);
 
   const handleChange = e => {
-    setForm({ ...form, [e.target.name]: e.target.value });
+    const { name, value } = e.target;
+    setForm({ ...form, [name]: value });
+    
+    // Validar contraseña en tiempo real
+    if (name === 'password') {
+      validatePassword(value);
+      // Validar coincidencia si ya hay confirmación
+      if (form.confirmPassword) {
+        validatePasswordMatch(value, form.confirmPassword);
+      }
+    }
+    
+    // Validar coincidencia de contraseñas
+    if (name === 'confirmPassword') {
+      validatePasswordMatch(form.password, value);
+    }
+  };
+
+  // Función para validar contraseña
+  const validatePassword = (password) => {
+    const validation = {
+      length: password.length >= 8,
+      uppercase: /[A-Z]/.test(password),
+      lowercase: /[a-z]/.test(password),
+      number: /\d/.test(password),
+      special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
+    };
+    setPasswordValidation(validation);
+    setShowPasswordValidation(password.length > 0);
+  };
+
+  // Función para validar coincidencia de contraseñas
+  const validatePasswordMatch = (password, confirmPassword) => {
+    const match = password === confirmPassword;
+    setPasswordsMatch(match);
+    setShowPasswordMatchValidation(confirmPassword.length > 0);
+  };
+
+  // Verificar si la contraseña es válida
+  const isPasswordValid = () => {
+    return Object.values(passwordValidation).every(valid => valid);
+  };
+
+  // Verificar si el formulario es válido para envío
+  const isFormValid = () => {
+    return isPasswordValid() && passwordsMatch && form.password.length > 0 && form.confirmPassword.length > 0;
   };
 
   // (Eliminado duplicado de handleSubmit, ahora solo existe la versión unificada más abajo)
@@ -160,6 +221,19 @@ export default function Users() {
     setShowEditModal(false);
     setShowDeleteModal(false);
     setUserToDelete(null);
+    // Resetear estados de validación de contraseña
+    setPasswordValidation({
+      length: false,
+      uppercase: false,
+      lowercase: false,
+      number: false,
+      special: false,
+    });
+    setShowPasswordValidation(false);
+    setShowPassword(false);
+    setShowConfirmPassword(false);
+    setPasswordsMatch(true);
+    setShowPasswordMatchValidation(false);
   };
 
   // Función para normalizar texto (quitar acentos y espacios extra)
@@ -981,138 +1055,329 @@ export default function Users() {
       {/* Modales */}
       {/* Modal Crear Usuario */}
       {showCreateModal && (
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
-            <div className="mt-3">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-medium text-gray-900">Crear Nuevo Usuario</h3>
+        <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
+          <div className="relative mx-auto w-full max-w-2xl bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
+            {/* Header formal con gradiente */}
+            <div className={`${createType === 'importador' ? 'bg-gradient-to-r from-green-700 to-green-900' : 'bg-gradient-to-r from-blue-700 to-blue-900'} rounded-t-2xl p-4 text-white border-b-2 ${createType === 'importador' ? 'border-green-500' : 'border-blue-500'}`}>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className={`${createType === 'importador' ? 'bg-green-500' : 'bg-blue-500'} bg-opacity-30 rounded-xl p-2 border ${createType === 'importador' ? 'border-green-400' : 'border-blue-400'} border-opacity-30`}>
+                    {createType === 'importador' ? (
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                      </svg>
+                    ) : (
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                    )}
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-wide">
+                      {createType === 'importador' ? 'Registro de Nuevo Importador' : 'Registro de Nuevo Agente'}
+                    </h3>
+                    <p className={`${createType === 'importador' ? 'text-green-200' : 'text-blue-200'} text-xs font-medium`}>
+                      {createType === 'importador' ? 'Sistema de Gestión de Importadores' : 'Sistema de Gestión de Agentes Aduanales'}
+                    </p>
+                  </div>
+                </div>
                 <button
                   onClick={handleCancel}
-                  className="text-gray-400 hover:text-gray-600 transition-colors"
+                  className={`${createType === 'importador' ? 'text-green-100 hover:text-white hover:bg-green-600' : 'text-blue-100 hover:text-white hover:bg-blue-600'} transition-colors p-2 hover:bg-opacity-50 rounded-lg border ${createType === 'importador' ? 'border-green-500' : 'border-blue-500'} border-opacity-30`}
                 >
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
               </div>
+            </div>
 
-
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Nombre de usuario *
-                    </label>
-                    <input
-                      type="text"
-                      name="username"
-                      value={form.username}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                      placeholder="nombre_usuario"
-                    />
+            {/* Contenido del formulario */}
+            <div className="p-6">
+              <form onSubmit={handleSubmit} className="space-y-5">
+                
+                {/* Sección de Información Personal */}
+                <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className={`${createType === 'importador' ? 'bg-green-600' : 'bg-blue-600'} rounded-lg p-2 mr-3 shadow-sm`}>
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Información Personal</h4>
+                      <p className="text-xs text-slate-600">Datos de identificación del usuario</p>
+                    </div>
                   </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Email *
-                    </label>
-                    <input
-                      type="email"
-                      name="email"
-                      value={form.email}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                      placeholder="usuario@ejemplo.com"
-                    />
-                  </div>
-
-                  {/* Campo RFC solo para importador */}
-                  {createType === 'importador' && (
-                    <>
-                      <div className="sm:col-span-2">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                          RFC del Importador *
-                        </label>
-                        <input
-                          type="text"
-                          name="rfc"
-                          value={form.rfc || ''}
-                          onChange={handleChange}
-                          required
-                          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm transition-colors"
-                          placeholder="RFC del importador"
-                        />
-                      </div>
-                      {/* Campo oculto para is_importador */}
-                      <input type="hidden" name="is_importador" value="true" />
-                    </>
-                  )}
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Nombre
-                    </label>
-                    <input
-                      type="text"
-                      name="first_name"
-                      value={form.first_name}
-                      onChange={handleChange}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                      placeholder="Nombre"
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Apellido
-                    </label>
-                    <input
-                      type="text"
-                      name="last_name"
-                      value={form.last_name}
-                      onChange={handleChange}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                      placeholder="Apellido"
-                    />
-                  </div>
-
-                  <div className="sm:col-span-2">
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                      Contraseña *
-                    </label>
-                    <input
-                      type="password"
-                      name="password"
-                      value={form.password}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                      placeholder="Contraseña del usuario"
-                    />
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Nombre de usuario <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        name="username"
+                        value={form.username}
+                        onChange={handleChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="nombre_usuario"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Correo electrónico <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        type="email"
+                        name="email"
+                        value={form.email}
+                        onChange={handleChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="usuario@ejemplo.com"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Nombre
+                      </label>
+                      <input
+                        type="text"
+                        name="first_name"
+                        value={form.first_name}
+                        onChange={handleChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Nombre del usuario"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Apellido
+                      </label>
+                      <input
+                        type="text"
+                        name="last_name"
+                        value={form.last_name}
+                        onChange={handleChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Apellido del usuario"
+                      />
+                    </div>
                   </div>
                 </div>
 
-                <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
+                {/* Sección de RFC (solo para importador) */}
+                {createType === 'importador' && (
+                  <div className="bg-green-50 rounded-xl p-4 border border-green-200">
+                    <div className="flex items-center mb-3 pb-2 border-b border-green-300">
+                      <div className="bg-green-700 rounded-lg p-2 mr-3 shadow-sm">
+                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold text-slate-800">Información Fiscal</h4>
+                        <p className="text-xs text-slate-600">Datos fiscales del importador</p>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        RFC del Importador <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        name="rfc"
+                        value={form.rfc || ''}
+                        onChange={handleChange}
+                        required
+                        maxLength="13"
+                        className="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm font-mono uppercase"
+                        placeholder="RFC13CARACTERES"
+                        style={{ textTransform: 'uppercase' }}
+                      />
+                      <p className="text-xs text-green-600 mt-1">Formato: 12-13 caracteres (ABCD123456ABC)</p>
+                    </div>
+                    <input type="hidden" name="is_importador" value="true" />
+                  </div>
+                )}
+
+                {/* Sección de Seguridad */}
+                <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-red-600 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Credenciales de Acceso</h4>
+                      <p className="text-xs text-slate-600">Configuración de seguridad de la cuenta</p>
+                    </div>
+                  </div>
+                  <div className="space-y-1">
+                    <label className="block text-xs font-semibold text-slate-700">
+                      Contraseña <span className="text-red-600">*</span>
+                    </label>
+                    <div className="relative">
+                      <input
+                        type={showPassword ? "text" : "password"}
+                        name="password"
+                        value={form.password}
+                        onChange={handleChange}
+                        required
+                        className={`w-full px-3 py-2 pr-10 border rounded-md shadow-sm focus:ring-2 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm ${
+                          showPasswordValidation && isPasswordValid() 
+                            ? 'border-green-300 focus:ring-green-500 focus:border-green-500' 
+                            : showPasswordValidation 
+                            ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+                            : 'border-slate-300 focus:ring-red-500 focus:border-red-500'
+                        }`}
+                        placeholder="Contraseña segura del usuario"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600"
+                      >
+                        {showPassword ? (
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                          </svg>
+                        ) : (
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                          </svg>
+                        )}
+                      </button>
+                    </div>
+                    
+                    {/* Indicadores de validación de contraseña */}
+                    {showPasswordValidation && (
+                      <div className="mt-3 p-3 bg-slate-100 rounded-lg border">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-xs font-semibold text-slate-700">Requisitos de contraseña:</span>
+                          {isPasswordValid() && (
+                            <div className="flex items-center text-green-600">
+                              <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                              </svg>
+                              <span className="text-xs font-medium">Válida</span>
+                            </div>
+                          )}
+                        </div>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                          <div className={`flex items-center text-xs ${passwordValidation.length ? 'text-green-600' : 'text-red-500'}`}>
+                            <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation.length ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                            </svg>
+                            Mínimo 8 caracteres
+                          </div>
+                          <div className={`flex items-center text-xs ${passwordValidation.uppercase ? 'text-green-600' : 'text-red-500'}`}>
+                            <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation.uppercase ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                            </svg>
+                            Una letra mayúscula
+                          </div>
+                          <div className={`flex items-center text-xs ${passwordValidation.lowercase ? 'text-green-600' : 'text-red-500'}`}>
+                            <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation.lowercase ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                            </svg>
+                            Una letra minúscula
+                          </div>
+                          <div className={`flex items-center text-xs ${passwordValidation.number ? 'text-green-600' : 'text-red-500'}`}>
+                            <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation.number ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                            </svg>
+                            Un número
+                          </div>
+                          <div className={`flex items-center text-xs sm:col-span-2 ${passwordValidation.special ? 'text-green-600' : 'text-red-500'}`}>
+                            <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordValidation.special ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                            </svg>
+                            Un carácter especial (!@#$%^&*(),.?":{}|&lt;&gt;)
+                          </div>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Campo de confirmación de contraseña */}
+                    <div className="space-y-1 mt-4">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Confirmar Contraseña <span className="text-red-600">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          type={showConfirmPassword ? "text" : "password"}
+                          name="confirmPassword"
+                          value={form.confirmPassword}
+                          onChange={handleChange}
+                          required
+                          className={`w-full px-3 py-2 pr-10 border rounded-md shadow-sm focus:ring-2 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm ${
+                            showPasswordMatchValidation && passwordsMatch && form.confirmPassword.length > 0
+                              ? 'border-green-300 focus:ring-green-500 focus:border-green-500' 
+                              : showPasswordMatchValidation && !passwordsMatch
+                              ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+                              : 'border-slate-300 focus:ring-red-500 focus:border-red-500'
+                          }`}
+                          placeholder="Confirme la contraseña"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                          className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600"
+                        >
+                          {showConfirmPassword ? (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                            </svg>
+                          ) : (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                            </svg>
+                          )}
+                        </button>
+                      </div>
+                      
+                      {/* Indicador de coincidencia de contraseñas */}
+                      {showPasswordMatchValidation && (
+                        <div className={`mt-2 flex items-center text-xs ${passwordsMatch ? 'text-green-600' : 'text-red-500'}`}>
+                          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={passwordsMatch ? "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" : "M6 18L18 6M6 6l12 12"} />
+                          </svg>
+                          <span className="font-medium">
+                            {passwordsMatch ? 'Las contraseñas coinciden' : 'Las contraseñas no coinciden'}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Botones de acción */}
+                <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
                   <button
                     type="button"
                     onClick={handleCancel}
                     disabled={submitting}
-                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50"
+                    className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200 disabled:opacity-50"
                   >
                     Cancelar
                   </button>
                   <button
                     type="submit"
-                    disabled={submitting}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 flex items-center"
+                    disabled={submitting || (showPasswordValidation && !isFormValid())}
+                    className={`w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white ${createType === 'importador' ? 'bg-gradient-to-r from-green-700 to-green-900 hover:from-green-800 hover:to-green-950 focus:ring-green-500' : 'bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed`}
                   >
                     {submitting && (
-                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                     )}
-                    {submitting ? 'Creando...' : 'Crear Usuario'}
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <span>{submitting ? 'Creando...' : (createType === 'importador' ? 'Crear Importador' : 'Crear Agente')}</span>
                   </button>
                 </div>
               </form>
diff --git a/src/pages/Vucem.jsx b/src/pages/Vucem.jsx
index ae81ed2..c7f4ecb 100644
--- a/src/pages/Vucem.jsx
+++ b/src/pages/Vucem.jsx
@@ -36,6 +36,10 @@ export default function Vucem() {
   const [showEditPassword, setShowEditPassword] = useState(false);
   const [showEditEfirma, setShowEditEfirma] = useState(false);
 
+  // Estados específicos para modal de creación
+  const [showCreatePassword, setShowCreatePassword] = useState(false);
+  const [showCreateEfirma, setShowCreateEfirma] = useState(false);
+
   // Funciones para alternar visibilidad
   const togglePasswordVisibility = (id) => {
     setShowPassword(prev => ({
@@ -93,7 +97,7 @@ export default function Vucem() {
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         try {
           const successful = document.execCommand('copy');
           if (successful) {
@@ -137,6 +141,9 @@ export default function Vucem() {
     // Resetear estados de visibilidad del modal de edición
     setShowEditPassword(false);
     setShowEditEfirma(false);
+    // Resetear estados de visibilidad del modal de creación
+    setShowCreatePassword(false);
+    setShowCreateEfirma(false);
   };
 
   // Fetch list
@@ -158,7 +165,7 @@ export default function Vucem() {
   const downloadCertificate = async (id, usuario) => {
     try {
       const res = await fetchWithAuth(`${API_URL}/vucem/vucem/${id}/download_cer/`);
-      
+
       if (!res.ok) {
         if (res.status === 404) {
           setCopySuccess('Certificado no encontrado');
@@ -178,7 +185,7 @@ export default function Vucem() {
       a.click();
       window.URL.revokeObjectURL(url);
       document.body.removeChild(a);
-      
+
       setCopySuccess('Certificado descargado');
       setTimeout(() => setCopySuccess(''), 2000);
     } catch (err) {
@@ -191,7 +198,7 @@ export default function Vucem() {
   const downloadKey = async (id, usuario) => {
     try {
       const res = await fetchWithAuth(`${API_URL}/vucem/vucem/${id}/download_key/`);
-      
+
       if (!res.ok) {
         if (res.status === 404) {
           setCopySuccess('Clave no encontrada');
@@ -211,7 +218,7 @@ export default function Vucem() {
       a.click();
       window.URL.revokeObjectURL(url);
       document.body.removeChild(a);
-      
+
       setCopySuccess('Clave descargada');
       setTimeout(() => setCopySuccess(''), 2000);
     } catch (err) {
@@ -227,14 +234,14 @@ export default function Vucem() {
       const response = await patchWithAuth(`${API_URL}/vucem/vucem/${id}/`, {
         is_active: !currentStatus
       });
-      
+
       if (!response.ok) {
         throw new Error('Error al cambiar el estado');
       }
-      
+
       // Recargar la lista para reflejar los cambios
       await fetchVucem();
-      
+
     } catch (err) {
       alert('Error al cambiar el estado de la credencial');
     }
@@ -290,7 +297,7 @@ export default function Vucem() {
         <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-transparent to-blue-900/30"></div>
         <div className="absolute -top-24 -right-24 w-48 h-48 bg-white/10 rounded-full blur-xl"></div>
         <div className="absolute -bottom-12 -left-12 w-32 h-32 bg-white/5 rounded-full blur-lg"></div>
-        
+
         <div className="relative flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
           <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-2xl p-3 sm:p-4 shadow-lg animate-bounce-slow">
             <svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -421,7 +428,7 @@ export default function Vucem() {
           </div>
         </div>
         {/* Vista responsiva: tabla para desktop, cards para mobile */}
-        
+
         {/* Tabla para pantallas grandes */}
         <div className="hidden lg:block bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
           <div style={{ minHeight: 'calc(8 * 56px)', maxHeight: 'calc(8 * 56px)', overflowY: 'auto', position: 'relative' }}>
@@ -631,8 +638,8 @@ export default function Vucem() {
                         </td>
                         <td className="px-6 py-4 whitespace-nowrap text-center">
                           <div className="flex justify-center space-x-2">
-                            <button 
-                              onClick={() => { setEditVucem(vucem); setShowEditModal(true); }} 
+                            <button
+                              onClick={() => { setEditVucem(vucem); setShowEditModal(true); }}
                               className="inline-flex items-center p-2 border border-blue-300 shadow-sm font-medium rounded-lg text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 transform hover:scale-105"
                               title="Editar"
                             >
@@ -640,13 +647,12 @@ export default function Vucem() {
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                               </svg>
                             </button>
-                            <button 
-                              onClick={() => toggleVucemStatus(vucem.id, vucem.is_active)} 
-                              className={`inline-flex items-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 ${
-                                vucem.is_active 
-                                  ? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500' 
-                                  : 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
-                              }`}
+                            <button
+                              onClick={() => toggleVucemStatus(vucem.id, vucem.is_active)}
+                              className={`inline-flex items-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 ${vucem.is_active
+                                ? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500'
+                                : 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
+                                }`}
                               title={vucem.is_active ? "Desactivar" : "Activar"}
                             >
                               {vucem.is_active ? (
@@ -659,8 +665,8 @@ export default function Vucem() {
                                 </svg>
                               )}
                             </button>
-                            <button 
-                              onClick={() => { setDeleteVucem(vucem); setShowDeleteModal(true); }} 
+                            <button
+                              onClick={() => { setDeleteVucem(vucem); setShowDeleteModal(true); }}
                               className="inline-flex items-center p-2 border border-red-300 shadow-sm font-medium rounded-lg text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 transform hover:scale-105"
                               title="Eliminar"
                             >
@@ -741,11 +747,10 @@ export default function Vucem() {
                       </button>
                       <button
                         onClick={() => toggleVucemStatus(vucem.id, vucem.is_active)}
-                        className={`inline-flex items-center justify-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 ${
-                          vucem.is_active 
-                            ? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500' 
-                            : 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
-                        }`}
+                        className={`inline-flex items-center justify-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 ${vucem.is_active
+                          ? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500'
+                          : 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
+                          }`}
                         title={vucem.is_active ? "Desactivar" : "Activar"}
                       >
                         {vucem.is_active ? (
@@ -939,380 +944,742 @@ export default function Vucem() {
         </div>
       </div>
 
-        {/* Paginación mejorada */}
-        {totalPages > 1 && (
-          <div className="mt-8 border-t border-gray-200 pt-6">
-            <div className="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
-              <div className="text-sm text-gray-700">
-                Mostrando <span className="font-medium">{((page - 1) * pageSize) + 1}</span> a{' '}
-                <span className="font-medium">
-                  {Math.min(page * pageSize, filteredList.length)}
-                </span> de{' '}
-                <span className="font-medium">{filteredList.length}</span> registros
-              </div>
-              <div className="flex items-center space-x-2">
-                <button
-                  onClick={() => setPage(p => Math.max(1, p - 1))}
-                  disabled={page === 1}
-                  className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                >
-                  <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
-                  </svg>
-                  Anterior
-                </button>
-                <div className="flex space-x-1">
-                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
-                    <button
-                      key={pageNum}
-                      onClick={() => setPage(pageNum)}
-                      className={`px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-                        page === pageNum
-                          ? 'bg-blue-600 text-white shadow-lg transform scale-105'
-                          : 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:transform hover:scale-105'
+      {/* Paginación mejorada */}
+      {totalPages > 1 && (
+        <div className="mt-8 border-t border-gray-200 pt-6">
+          <div className="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
+            <div className="text-sm text-gray-700">
+              Mostrando <span className="font-medium">{((page - 1) * pageSize) + 1}</span> a{' '}
+              <span className="font-medium">
+                {Math.min(page * pageSize, filteredList.length)}
+              </span> de{' '}
+              <span className="font-medium">{filteredList.length}</span> registros
+            </div>
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+              >
+                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+                </svg>
+                Anterior
+              </button>
+              <div className="flex space-x-1">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
+                  <button
+                    key={pageNum}
+                    onClick={() => setPage(pageNum)}
+                    className={`px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${page === pageNum
+                      ? 'bg-blue-600 text-white shadow-lg transform scale-105'
+                      : 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:transform hover:scale-105'
                       }`}
-                    >
-                      {pageNum}
-                    </button>
-                  ))}
-                </div>
-                <button
-                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                  disabled={page === totalPages}
-                  className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                >
-                  Siguiente
-                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
+                  >
+                    {pageNum}
+                  </button>
+                ))}
               </div>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+              >
+                Siguiente
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
             </div>
           </div>
-        )}
+        </div>
+      )}
 
       {/* Modal de creación */}
       {showCreateModal && (
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-gray-900">Crear VUCEM</h3>
-              <button onClick={closeModals} className="text-gray-400 hover:text-gray-600 transition-colors">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
-              </button>
+        <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-2">
+          <div className="relative mx-auto w-full max-w-4xl bg-white rounded-lg shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
+            {/* Header formal en escala de azules */}
+            <div className="bg-gradient-to-r from-blue-700 to-blue-900 rounded-t-lg p-4 text-white border-b-2 border-blue-500">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-blue-500 bg-opacity-30 rounded-lg p-2 border border-blue-400 border-opacity-30">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-wide">Registro de Credencial VUCEM</h3>
+                    <p className="text-blue-200 text-xs font-medium">Sistema de Gestión de Credenciales Aduanales</p>
+                  </div>
+                </div>
+                <button
+                  onClick={closeModals}
+                  className="text-blue-100 hover:text-white transition-colors p-2 hover:bg-blue-600 hover:bg-opacity-50 rounded-lg border border-blue-500 border-opacity-30"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
             </div>
-            <form className="space-y-6 w-full" onSubmit={async (e) => {
-              e.preventDefault();
-              const formData = new FormData();
-              formData.append('usuario', form.usuario);
-              formData.append('password', form.password);
-              formData.append('patente', form.patente);
-              formData.append('efirma', form.efirma);
-              if (form.key) formData.append('key', form.key);
-              if (form.cer) formData.append('cer', form.cer);
-              formData.append('is_importador', form.is_importador);
-              formData.append('acusecove', form.acusecove);
-              formData.append('acuseedocument', form.acuseedocument);
-              formData.append('is_active', form.is_active);
-              try {
-                const res = await postFormDataWithAuth(`${API_URL}/vucem/vucem/`, formData);
-                if (!res.ok) throw new Error('Error al crear VUCEM');
-                await fetchVucem();
-                closeModals();
-              } catch (err) {
-                alert('Error al crear VUCEM');
-              }
-            }}>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Usuario *</label>
-                  <input name="usuario" value={form.usuario} onChange={handleInputChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="usuario" />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Password *</label>
-                  <div className="relative">
-                    <input 
-                      name="password" 
-                      type={showPassword ? "text" : "password"} 
-                      value={form.password} 
-                      onChange={handleInputChange} 
-                      required 
-                      className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" 
-                      placeholder="password" 
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <button
-                        type="button"
-                        onClick={() => setShowPassword(!showPassword)}
-                        className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title={showPassword ? "Ocultar password" : "Mostrar password"}
-                      >
-                        {showPassword ? (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                          </svg>
-                        )}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(form.password, 'Password')}
-                        className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title="Copiar password"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                        </svg>
-                      </button>
+
+            {/* Contenido del formulario */}
+            <div className="p-4 max-h-[85vh] overflow-y-auto">
+              <form className="space-y-4" onSubmit={async (e) => {
+                e.preventDefault();
+                const formData = new FormData();
+                formData.append('usuario', form.usuario);
+                formData.append('password', form.password);
+                formData.append('patente', form.patente);
+                formData.append('efirma', form.efirma);
+                if (form.key) formData.append('key', form.key);
+                if (form.cer) formData.append('cer', form.cer);
+                formData.append('is_importador', form.is_importador);
+                formData.append('acusecove', form.acusecove);
+                formData.append('acuseedocument', form.acuseedocument);
+                formData.append('is_active', form.is_active);
+                try {
+                  const res = await postFormDataWithAuth(`${API_URL}/vucem/vucem/`, formData);
+                  if (!res.ok) throw new Error('Error al crear VUCEM');
+                  await fetchVucem();
+                  closeModals();
+                } catch (err) {
+                  alert('Error al crear VUCEM');
+                }
+              }}>
+
+                {/* Sección de Información Básica */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-blue-600 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Información Básica del Usuario</h4>
+                      <p className="text-xs text-slate-600">Datos de identificación del usuario VUCEM</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Usuario VUCEM <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        name="usuario"
+                        value={form.usuario}
+                        onChange={handleInputChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Ingrese el nombre de usuario VUCEM"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Número de Patente <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        name="patente"
+                        value={form.patente}
+                        onChange={handleInputChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Ingrese el número de patente"
+                      />
                     </div>
                   </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Patente *</label>
-                  <input name="patente" value={form.patente} onChange={handleInputChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="patente" />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">e.firma *</label>
-                  <div className="relative">
-                    <input 
-                      name="efirma" 
-                      type={showEfirma ? "text" : "password"} 
-                      value={form.efirma} 
-                      onChange={handleInputChange} 
-                      required 
-                      className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" 
-                      placeholder="e.firma" 
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <button
-                        type="button"
-                        onClick={() => setShowEfirma(!showEfirma)}
-                        className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title={showEfirma ? "Ocultar e.firma" : "Mostrar e.firma"}
-                      >
-                        {showEfirma ? (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                          </svg>
-                        )}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(form.efirma, 'e.firma')}
-                        className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title="Copiar e.firma"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                        </svg>
-                      </button>
+
+                {/* Sección de Credenciales */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-slate-700 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Credenciales de Seguridad</h4>
+                      <p className="text-xs text-slate-600">Información de autenticación del sistema</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-gray-700">
+                        Password <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          name="password"
+                          type={showCreatePassword ? "text" : "password"}
+                          value={form.password}
+                          onChange={handleInputChange}
+                          required
+                          className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-sm"
+                          placeholder="Ingrese el password"
+                        />
+                        <div className="absolute inset-y-0 right-0 flex items-center">
+                          <button
+                            type="button"
+                            onClick={() => setShowCreatePassword(!showCreatePassword)}
+                            className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title={showCreatePassword ? "Ocultar password" : "Mostrar password"}
+                          >
+                            {showCreatePassword ? (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                              </svg>
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                              </svg>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => copyToClipboard(form.password, 'Password')}
+                            className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title="Copiar password"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-gray-700">
+                        e.firma <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          name="efirma"
+                          type={showCreateEfirma ? "text" : "password"}
+                          value={form.efirma}
+                          onChange={handleInputChange}
+                          required
+                          className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-sm"
+                          placeholder="Ingrese la e.firma"
+                        />
+                        <div className="absolute inset-y-0 right-0 flex items-center">
+                          <button
+                            type="button"
+                            onClick={() => setShowCreateEfirma(!showCreateEfirma)}
+                            className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title={showCreateEfirma ? "Ocultar e.firma" : "Mostrar e.firma"}
+                          >
+                            {showCreateEfirma ? (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                              </svg>
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                              </svg>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => copyToClipboard(form.efirma, 'e.firma')}
+                            className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title="Copiar e.firma"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Key (.key)</label>
-                  <input name="key" type="file" accept=".key" onChange={handleInputChange} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm" />
-                  {form.key && <span className="text-xs text-gray-500">{form.key.name}</span>}
+
+                {/* Sección de Archivos de Certificado */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-green-700 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Certificados Digitales</h4>
+                      <p className="text-xs text-slate-600">Archivos de certificado y clave privada</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Archivo de Clave (.key)
+                      </label>
+                      <input
+                        name="key"
+                        type="file"
+                        accept=".key"
+                        onChange={handleInputChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-green-100 file:text-green-800 hover:file:bg-green-200 text-sm"
+                      />
+                      {form.key && (
+                        <div className="flex items-center text-xs text-green-700 bg-green-100 px-2 py-1.5 rounded-md border border-green-200">
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          {form.key.name}
+                        </div>
+                      )}
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Archivo de Certificado (.cer)
+                      </label>
+                      <input
+                        name="cer"
+                        type="file"
+                        accept=".cer"
+                        onChange={handleInputChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-green-100 file:text-green-800 hover:file:bg-green-200 text-sm"
+                      />
+                      {form.cer && (
+                        <div className="flex items-center text-xs text-green-700 bg-green-100 px-2 py-1.5 rounded-md border border-green-200">
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          {form.cer.name}
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Cer (.cer)</label>
-                  <input name="cer" type="file" accept=".cer" onChange={handleInputChange} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm" />
-                  {form.cer && <span className="text-xs text-gray-500">{form.cer.name}</span>}
+
+                {/* Sección de Configuraciones */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-amber-600 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Configuraciones del Sistema</h4>
+                      <p className="text-xs text-slate-600">Opciones y permisos de la credencial</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="is_importador"
+                        type="checkbox"
+                        checked={form.is_importador}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Importador</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="acusecove"
+                        type="checkbox"
+                        checked={form.acusecove}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Acuse COVE</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="acuseedocument"
+                        type="checkbox"
+                        checked={form.acuseedocument}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Acuse e-Document</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="is_active"
+                        type="checkbox"
+                        checked={form.is_active}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-green-600 border-slate-300 rounded focus:ring-green-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Credencial Activa</label>
+                    </div>
+                  </div>
                 </div>
-                <div className="flex gap-2 items-center">
-                  <input name="is_importador" type="checkbox" checked={form.is_importador} onChange={handleInputChange} />
-                  <label className="text-sm">Importador</label>
+
+                {/* Botones de acción */}
+                <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
+                  <button
+                    type="button"
+                    onClick={closeModals}
+                    className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200"
+                  >
+                    Cancelar
+                  </button>
+                  <button
+                    type="submit"
+                    className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 flex items-center justify-center space-x-2"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span>Registrar Credencial</span>
+                  </button>
                 </div>
-                <div className="flex gap-2 items-center">
-                  <input name="acusecove" type="checkbox" checked={form.acusecove} onChange={handleInputChange} />
-                  <label className="text-sm">Acuse COVE</label>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <input name="acuseedocument" type="checkbox" checked={form.acuseedocument} onChange={handleInputChange} />
-                  <label className="text-sm">Acuse e-Document</label>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <input name="is_active" type="checkbox" checked={form.is_active} onChange={handleInputChange} />
-                  <label className="text-sm">Activo</label>
-                </div>
-              </div>
-              <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
-                <button type="button" onClick={closeModals} className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50">Cancelar</button>
-                <button type="submit" className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 flex items-center">Crear</button>
-              </div>
-            </form>
+              </form>
+            </div>
           </div>
         </div>
       )}
 
       {/* Modal de edición */}
       {showEditModal && editVucem && (
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-gray-900">Editar VUCEM</h3>
-              <button onClick={closeModals} className="text-gray-400 hover:text-gray-600 transition-colors">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
-              </button>
+        <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-2">
+          <div className="relative mx-auto w-full max-w-4xl bg-white rounded-lg shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
+            {/* Header formal en escala de azules */}
+            <div className="bg-gradient-to-r from-blue-700 to-blue-900 rounded-t-lg p-4 text-white border-b-2 border-blue-500">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-blue-500 bg-opacity-30 rounded-lg p-2 border border-blue-400 border-opacity-30">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-wide">Editar Credencial VUCEM</h3>
+                    <p className="text-blue-200 text-xs font-medium">Modificación de Credenciales Aduanales</p>
+                  </div>
+                </div>
+                <button
+                  onClick={closeModals}
+                  className="text-blue-100 hover:text-white transition-colors p-2 hover:bg-blue-600 hover:bg-opacity-50 rounded-lg border border-blue-500 border-opacity-30"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
             </div>
-            <form className="space-y-6 w-full" onSubmit={async (e) => {
-              e.preventDefault();
-              if (!editVucem) return;
-              const formData = new FormData();
-              formData.append('usuario', form.usuario);
-              if (form.password) formData.append('password', form.password);
-              formData.append('patente', form.patente);
-              formData.append('efirma', form.efirma);
-              if (form.key) formData.append('key', form.key);
-              if (form.cer) formData.append('cer', form.cer);
-              formData.append('is_importador', form.is_importador);
-              formData.append('acusecove', form.acusecove);
-              formData.append('acuseedocument', form.acuseedocument);
-              formData.append('is_active', form.is_active);
-              try {
-                const res = await putFormDataWithAuth(`${API_URL}/vucem/vucem/${editVucem.id}/`, formData);
-                if (!res.ok) throw new Error('Error al actualizar VUCEM');
-                await fetchVucem();
-                closeModals();
-              } catch (err) {
-                alert('Error al actualizar VUCEM');
-              }
-            }}>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Usuario *</label>
-                  <input name="usuario" value={form.usuario} onChange={handleInputChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="usuario" />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Password *</label>
-                  <div className="relative">
-                    <input 
-                      name="password" 
-                      type={showEditPassword ? "text" : "password"} 
-                      value={form.password} 
-                      onChange={handleInputChange} 
-                      className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" 
-                      placeholder="password" 
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <button
-                        type="button"
-                        onClick={toggleEditPasswordVisibility}
-                        className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title={showEditPassword ? "Ocultar password" : "Mostrar password"}
-                      >
-                        {showEditPassword ? (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                          </svg>
-                        )}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(form.password, 'Password')}
-                        className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title="Copiar password"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                        </svg>
-                      </button>
+
+            {/* Contenido del formulario */}
+            <div className="p-4 max-h-[85vh] overflow-y-auto">
+              <form className="space-y-4" onSubmit={async (e) => {
+                e.preventDefault();
+                if (!editVucem) return;
+                const formData = new FormData();
+                formData.append('usuario', form.usuario);
+                if (form.password) formData.append('password', form.password);
+                formData.append('patente', form.patente);
+                formData.append('efirma', form.efirma);
+                if (form.key) formData.append('key', form.key);
+                if (form.cer) formData.append('cer', form.cer);
+                formData.append('is_importador', form.is_importador);
+                formData.append('acusecove', form.acusecove);
+                formData.append('acuseedocument', form.acuseedocument);
+                formData.append('is_active', form.is_active);
+                try {
+                  const res = await putFormDataWithAuth(`${API_URL}/vucem/vucem/${editVucem.id}/`, formData);
+                  if (!res.ok) throw new Error('Error al actualizar VUCEM');
+                  await fetchVucem();
+                  closeModals();
+                } catch (err) {
+                  alert('Error al actualizar VUCEM');
+                }
+              }}>
+
+                {/* Sección de Información Básica */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-blue-600 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Información Básica del Usuario</h4>
+                      <p className="text-xs text-slate-600">Datos de identificación del usuario VUCEM</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Usuario VUCEM <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        name="usuario"
+                        value={form.usuario}
+                        onChange={handleInputChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Ingrese el nombre de usuario VUCEM"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Número de Patente <span className="text-red-600">*</span>
+                      </label>
+                      <input
+                        name="patente"
+                        value={form.patente}
+                        onChange={handleInputChange}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm"
+                        placeholder="Ingrese el número de patente"
+                      />
                     </div>
                   </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Patente *</label>
-                  <input name="patente" value={form.patente} onChange={handleInputChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="patente" />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">e.firma *</label>
-                  <div className="relative">
-                    <input 
-                      name="efirma" 
-                      type={showEditEfirma ? "text" : "password"} 
-                      value={form.efirma} 
-                      onChange={handleInputChange} 
-                      required 
-                      className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" 
-                      placeholder="e.firma" 
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <button
-                        type="button"
-                        onClick={toggleEditEfirmaVisibility}
-                        className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title={showEditEfirma ? "Ocultar e.firma" : "Mostrar e.firma"}
-                      >
-                        {showEfirma ? (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                          </svg>
-                        )}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(form.efirma, 'e.firma')}
-                        className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-                        title="Copiar e.firma"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                        </svg>
-                      </button>
+
+                {/* Sección de Credenciales */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-slate-700 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Credenciales de Seguridad</h4>
+                      <p className="text-xs text-slate-600">Información de autenticación del sistema</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-gray-700">
+                        Password <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          name="password"
+                          type={showEditPassword ? "text" : "password"}
+                          value={form.password}
+                          onChange={handleInputChange}
+                          className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-sm"
+                          placeholder="Ingrese el password"
+                        />
+                        <div className="absolute inset-y-0 right-0 flex items-center">
+                          <button
+                            type="button"
+                            onClick={toggleEditPasswordVisibility}
+                            className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title={showEditPassword ? "Ocultar password" : "Mostrar password"}
+                          >
+                            {showEditPassword ? (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                              </svg>
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                              </svg>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => copyToClipboard(form.password, 'Password')}
+                            className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title="Copiar password"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-gray-700">
+                        e.firma <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          name="efirma"
+                          type={showEditEfirma ? "text" : "password"}
+                          value={form.efirma}
+                          onChange={handleInputChange}
+                          required
+                          className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-sm"
+                          placeholder="Ingrese la e.firma"
+                        />
+                        <div className="absolute inset-y-0 right-0 flex items-center">
+                          <button
+                            type="button"
+                            onClick={toggleEditEfirmaVisibility}
+                            className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title={showEditEfirma ? "Ocultar e.firma" : "Mostrar e.firma"}
+                          >
+                            {showEditEfirma ? (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
+                              </svg>
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                              </svg>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => copyToClipboard(form.efirma, 'e.firma')}
+                            className="px-2 py-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
+                            title="Copiar e.firma"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Key (.key)</label>
-                  <input name="key" type="file" accept=".key" onChange={handleInputChange} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm" />
-                  {form.key && <span className="text-xs text-gray-500">{form.key.name}</span>}
+
+                {/* Sección de Archivos de Certificado */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-green-700 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Certificados Digitales</h4>
+                      <p className="text-xs text-slate-600">Archivos de certificado y clave privada</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Archivo de Clave (.key)
+                      </label>
+                      <input
+                        name="key"
+                        type="file"
+                        accept=".key"
+                        onChange={handleInputChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-green-100 file:text-green-800 hover:file:bg-green-200 text-sm"
+                      />
+                      {form.key && (
+                        <div className="flex items-center text-xs text-green-700 bg-green-100 px-2 py-1.5 rounded-md border border-green-200">
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          {form.key.name}
+                        </div>
+                      )}
+                    </div>
+                    <div className="space-y-1">
+                      <label className="block text-xs font-semibold text-slate-700">
+                        Archivo de Certificado (.cer)
+                      </label>
+                      <input
+                        name="cer"
+                        type="file"
+                        accept=".cer"
+                        onChange={handleInputChange}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-green-100 file:text-green-800 hover:file:bg-green-200 text-sm"
+                      />
+                      {form.cer && (
+                        <div className="flex items-center text-xs text-green-700 bg-green-100 px-2 py-1.5 rounded-md border border-green-200">
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          {form.cer.name}
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Cer (.cer)</label>
-                  <input name="cer" type="file" accept=".cer" onChange={handleInputChange} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm" />
-                  {form.cer && <span className="text-xs text-gray-500">{form.cer.name}</span>}
+
+                {/* Sección de Configuraciones */}
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                  <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                    <div className="bg-amber-600 rounded-lg p-2 mr-3 shadow-sm">
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-semibold text-slate-800">Configuraciones del Sistema</h4>
+                      <p className="text-xs text-slate-600">Opciones y permisos de la credencial</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="is_importador"
+                        type="checkbox"
+                        checked={form.is_importador}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Importador</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="acusecove"
+                        type="checkbox"
+                        checked={form.acusecove}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Acuse COVE</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="acuseedocument"
+                        type="checkbox"
+                        checked={form.acuseedocument}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Acuse e-Document</label>
+                    </div>
+                    <div className="flex items-center space-x-2 bg-white p-3 rounded-md border border-slate-200 shadow-sm">
+                      <input
+                        name="is_active"
+                        type="checkbox"
+                        checked={form.is_active}
+                        onChange={handleInputChange}
+                        className="w-4 h-4 text-green-600 border-slate-300 rounded focus:ring-green-500 focus:ring-1"
+                      />
+                      <label className="text-xs font-semibold text-slate-700">Credencial Activa</label>
+                    </div>
+                  </div>
                 </div>
-                <div className="flex gap-2 items-center">
-                  <input name="is_importador" type="checkbox" checked={form.is_importador} onChange={handleInputChange} />
-                  <label className="text-sm">Importador</label>
+
+                {/* Botones de acción */}
+                <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
+                  <button
+                    type="button"
+                    onClick={closeModals}
+                    className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200"
+                  >
+                    Cancelar
+                  </button>
+                  <button
+                    type="submit"
+                    className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 flex items-center justify-center space-x-2"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                    </svg>
+                    <span>Actualizar Credencial</span>
+                  </button>
                 </div>
-                <div className="flex gap-2 items-center">
-                  <input name="acusecove" type="checkbox" checked={form.acusecove} onChange={handleInputChange} />
-                  <label className="text-sm">Acuse COVE</label>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <input name="acuseedocument" type="checkbox" checked={form.acuseedocument} onChange={handleInputChange} />
-                  <label className="text-sm">Acuse e-Document</label>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <input name="is_active" type="checkbox" checked={form.is_active} onChange={handleInputChange} />
-                  <label className="text-sm">Activo</label>
-                </div>
-              </div>
-              <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
-                <button type="button" onClick={closeModals} className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50">Cancelar</button>
-                <button type="submit" className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 flex items-center">Actualizar</button>
-              </div>
-            </form>
+
+              </form>
+            </div>
           </div>
         </div>
       )}