feat: Add checkbox selection and bulk operations

- Add checkbox functionality to Expedientes.jsx with bulk document deletion
- Add checkbox functionality to PedimentoDetail.jsx documents table
- Implement custom modal for deletion confirmation with modern UI
- Fix pagination reset on filter changes in Procesos.jsx
- Add bulk selection with 'select all' functionality
- Integrate with /record/documents/bulk-delete/ endpoint
- Improve UX with loading states and success/error messages

src/pages/PedimentoDetail.jsx

@@ -124,6 +124,12 @@ export default function PedimentoDetail() {
   const [selected, setSelected] = useState([]);
   const [downloading, setDownloading] = useState(false);
   const [downloadingAll, setDownloadingAll] = useState(false);
+  
+  // Estados para selección múltiple con checkboxes
+  const [selectedDocuments, setSelectedDocuments] = useState([]);
+  const [isSelectAllDocs, setIsSelectAllDocs] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  
   const [dashboardSummary, setDashboardSummary] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   
@@ -580,6 +586,95 @@ export default function PedimentoDetail() {
     return fuentes[fuente] || 'Desconocida';
   };
 
+  // Funciones para manejo de selección múltiple de documentos
+  const handleSelectDocument = (documentId) => {
+    const isSelected = selectedDocuments.includes(documentId);
+    if (isSelected) {
+      setSelectedDocuments(prev => prev.filter(id => id !== documentId));
+    } else {
+      setSelectedDocuments(prev => [...prev, documentId]);
+    }
+  };
+
+  const handleSelectAllDocuments = () => {
+    if (isSelectAllDocs) {
+      setSelectedDocuments([]);
+      setIsSelectAllDocs(false);
+    } else {
+      const allDocumentIds = documents.map(doc => doc.id);
+      setSelectedDocuments(allDocumentIds);
+      setIsSelectAllDocs(true);
+    }
+  };
+
+  // Función para eliminar documentos seleccionados
+  const handleDeleteSelectedDocuments = async () => {
+    if (selectedDocuments.length === 0) {
+      showMessage('No hay documentos seleccionados para eliminar', 'warning');
+      return;
+    }
+
+    // Mostrar modal de confirmación
+    setShowDeleteModal(true);
+  };
+
+  // Función para confirmar la eliminación
+  const confirmDeleteDocuments = async () => {
+    setShowDeleteModal(false);
+
+    try {
+      showMessage(`Eliminando ${selectedDocuments.length} documento(s)...`, 'info');
+      
+      // Enviar todos los IDs seleccionados a un endpoint específico
+      const response = await fetchWithAuth(`${API_URL}/record/documents/bulk-delete/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ids: selectedDocuments
+        })
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.detail || errorData?.message || `Error ${response.status}: ${response.statusText}`);
+      }
+      
+      const result = await response.json();
+      
+      showMessage(
+        `${result.deleted_count || selectedDocuments.length} documento(s) eliminado(s) exitosamente`, 
+        'success'
+      );
+      
+      setSelectedDocuments([]);
+      setIsSelectAllDocs(false);
+      
+      // Forzar recarga de documentos cambiando la página temporalmente
+      const currentPage = page;
+      setPage(0); // Cambio temporal
+      setTimeout(() => setPage(currentPage), 100); // Restaurar después de un breve delay
+    } catch (error) {
+      console.error('Error durante la eliminación masiva:', error);
+      showMessage(`Error durante la eliminación: ${error.message}`, 'error');
+    }
+  };
+
+  // Efecto para actualizar isSelectAllDocs cuando cambia la selección
+  useEffect(() => {
+    if (documents.length > 0) {
+      const allSelected = documents.every(doc => selectedDocuments.includes(doc.id));
+      setIsSelectAllDocs(allSelected && selectedDocuments.length > 0);
+    }
+  }, [selectedDocuments, documents]);
+
+  // Efecto para limpiar selección cuando cambia de página
+  useEffect(() => {
+    setSelectedDocuments([]);
+    setIsSelectAllDocs(false);
+  }, [page]);
+
   // Efecto para cargar datos del pedimento
   useEffect(() => {
     const fetchPedimento = async () => {
@@ -2093,6 +2188,55 @@ export default function PedimentoDetail() {
                   </div>
                 )}
               </div>
+
+              {/* Área de acciones para documentos seleccionados */}
+              {selectedDocuments.length > 0 && (
+                <div className="mb-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl overflow-hidden">
+                  <div className="px-6 py-4 border-b border-blue-200">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="bg-blue-100 rounded-full p-2">
+                          <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </div>
+                        <div>
+                          <h3 className="text-lg font-semibold text-gray-900">
+                            {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''} seleccionado{selectedDocuments.length !== 1 ? 's' : ''}
+                          </h3>
+                          <p className="text-sm text-gray-600">Selecciona una acción para continuar</p>
+                        </div>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setSelectedDocuments([]);
+                          setIsSelectAllDocs(false);
+                        }}
+                        className="text-gray-400 hover:text-gray-600 transition-colors"
+                        title="Limpiar selección"
+                      >
+                        <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>
+                  </div>
+                  <div className="px-6 py-4">
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        onClick={handleDeleteSelectedDocuments}
+                        className="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm hover:shadow-md"
+                      >
+                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                        Eliminar seleccionados
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
               {loading ? (
                 <div className="flex justify-center items-center py-12">
                   <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
@@ -2126,6 +2270,14 @@ export default function PedimentoDetail() {
                       <table className="min-w-full divide-y divide-gray-300">
                       <thead className="bg-gray-50">
                         <tr>
+                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <input
+                              type="checkbox"
+                              checked={isSelectAllDocs}
+                              onChange={handleSelectAllDocuments}
+                              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                            />
+                          </th>
                           <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                             <button
                               onClick={() => handleSort('archivo')}
@@ -2192,6 +2344,14 @@ export default function PedimentoDetail() {
                       <tbody className="bg-white divide-y divide-gray-200">
                         {documents.map((doc, index) => (
                           <tr key={`${doc.id}-${index}`} className="hover:bg-gray-50">
+                            <td className="px-6 py-4 whitespace-nowrap">
+                              <input
+                                type="checkbox"
+                                checked={selectedDocuments.includes(doc.id)}
+                                onChange={() => handleSelectDocument(doc.id)}
+                                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                              />
+                            </td>
                             <td className="px-6 py-4 whitespace-nowrap">
                               <div className="flex items-center">
                                 <div className="flex-shrink-0 h-10 w-10">
@@ -4461,6 +4621,76 @@ export default function PedimentoDetail() {
           </div>
         </div>
       )}
+      
+      {/* Modal de confirmación para eliminación */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 scale-100">
+            {/* Header del modal */}
+            <div className="px-6 py-4 border-b border-gray-200">
+              <div className="flex items-center gap-3">
+                <div className="bg-red-100 rounded-full p-3">
+                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900">
+                    Confirmar eliminación
+                  </h3>
+                  <p className="text-sm text-gray-600">Esta acción no se puede deshacer</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Contenido del modal */}
+            <div className="px-6 py-4">
+              <div className="mb-4">
+                <p className="text-gray-700 mb-3">
+                  ¿Estás seguro de que deseas eliminar{' '}
+                  <span className="font-semibold text-red-600">
+                    {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+                  </span>
+                  ?
+                </p>
+                
+                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                  <div className="flex items-start gap-2">
+                    <svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                    </svg>
+                    <div>
+                      <p className="text-sm font-medium text-red-800">Advertencia importante</p>
+                      <p className="text-sm text-red-700 mt-1">
+                        Los documentos eliminados no podrán ser recuperados. Asegúrate de que realmente deseas proceder con esta acción.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Botones del modal */}
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+              <button
+                onClick={() => setShowDeleteModal(false)}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+              >
+                Cancelar
+              </button>
+              <button
+                onClick={confirmDeleteDocuments}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 flex items-center gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                Eliminar {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }