La imagen muestra una sección de filtros con: título "Filtros de búsqueda" y link "Ocultar filtros" en la cabecera, filtros en grid de 4 columnas en 2 filas, y en el pie "Filtros aplicados: 2" a la izquierda con botón "Limpiar Filtros" azul a la derecha.

Ahora actualizo el componente de filtros para que coincida con el diseño de la imagen: título "Filtros de búsqueda" con "Ocultar filtros" a la derecha (como link), filtros en grid, y en el pie "Filtros aplicados: X" a la izquierda con "Limpiar Filtros" a la derecha y botones Aplicar + Exportar separados.

Ahora actualizo el componente principal para calcular y pasar el contador de filtros aplicados:

He actualizado la cabecera de filtros siguiendo el diseño de la imagen:

1. Header: Título "Filtros de búsqueda" a la izquierda con link "Ocultar filtros" (texto azul con chevron) a la derecha
2. Grid de filtros: 4 columnas en pantalla grande (Fecha, Producto, Cliente/Proveedor, Tipo Movimiento en primera fila; Depósito en segunda fila)
3. Pie de filtros: "Filtros aplicados: X" a la izquierda con botón "Limpiar Filtros" (azul con icono X) a la derecha
4. Botones de acción: "Aplicar" y "Exportar" juntos alineados a la derecha debajo de la sección de filtros

Ahora actualizo el componente principal para quitar los props y lógica que ya no se usan:

Ahora necesito cambiar la lógica para que los filtros se apliquen automáticamente en lugar de esperar a "Consultar". Actualizo el filtrado para usar filters directamente:

He realizado los cambios solicitados:

1. Botón "Exportar" movido arriba: Ahora aparece en la cabecera junto a "Ocultar filtros"
2. Botón "Aplicar" eliminado: Los filtros ahora se aplican automáticamente al cambiar cualquier valor
3. "Filtros aplicados" eliminado: Ya no se muestra el contador de filtros aplicados en el pie
4. Limpiar Filtros: Permanece abajo a la derecha para resetear todos los filtros