feat: Implement unified products table with anticipos management

- Added unified table for services, courses, and anticipos in Products tab
- Implemented table sorting by folio, date, appointment, and description
- Added filtering by product type and real-time search functionality
- Created action buttons with icons for edit, cancel/reactivate, and delete
- Added special handling for anticipos with appointment date/time fields
- Fixed JavaScript conflicts and function naming issues
- Integrated with existing product management system
- Added responsive design with category badges and status indicators

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

styles.css

@@ -47,6 +47,139 @@ h3 {
   font-size: 18px;
 }
 
+/* --- Controles de filtrado y búsqueda --- */
+.filter-controls {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #dee2e6;
+}
+
+.filter-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 15px;
+  align-items: end;
+}
+
+@media (max-width: 768px) {
+  .filter-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* --- Estilos para tabla unificada --- */
+.sort-icon {
+  font-size: 12px;
+  margin-left: 5px;
+  color: #6c757d;
+}
+
+th[onclick] {
+  cursor: pointer;
+  user-select: none;
+}
+
+th[onclick]:hover {
+  background-color: #f8f9fa;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  padding: 5px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  font-size: 16px;
+}
+
+.btn-icon:hover {
+  background-color: #f8f9fa;
+}
+
+.btn-icon.btn-edit {
+  color: #007bff;
+}
+
+.btn-icon.btn-cancel {
+  color: #ffc107;
+}
+
+.btn-icon.btn-delete {
+  color: #dc3545;
+}
+
+.btn-icon.btn-edit:hover {
+  background-color: #e7f3ff;
+}
+
+.btn-icon.btn-cancel:hover {
+  background-color: #fff3cd;
+}
+
+.btn-icon.btn-delete:hover {
+  background-color: #f8d7da;
+}
+
+/* --- Campos adicionales para anticipos --- */
+#anticipo-fields {
+  margin-top: 15px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #dee2e6;
+}
+
+/* --- Estados de productos --- */
+.product-status {
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.status-active {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-cancelled {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.category-badge {
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.category-service {
+  background-color: #cce5ff;
+  color: #0066cc;
+}
+
+.category-course {
+  background-color: #d1ecf1;
+  color: #0c5460;
+}
+
+.category-anticipo {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
 .section {
   margin-bottom: 40px;
 }