diff --git a/contabilidad.html b/contabilidad.html
index 8bd3ee1..897087f 100644
--- a/contabilidad.html
+++ b/contabilidad.html
@@ -24,13 +24,13 @@
             <main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50/50 p-6 relative">
                 <div class="max-w-6xl mx-auto fade-in">
                     
-                    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 mb-8">
+                    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 mb-6">
                         <div>
                             <h2 class="text-2xl font-black text-slate-800 flex items-center gap-3">
                                 <span class="bg-emerald-500 p-2.5 rounded-xl text-white shadow-lg shadow-emerald-200"><i data-lucide="wallet"></i></span>
                                 Finanzas y Cobros
                             </h2>
-                            <p class="text-sm text-slate-500 mt-1 font-medium">Gestiona los pagos de los servicios y presupuestos.</p>
+                            <p class="text-sm text-slate-500 mt-1 font-medium">Gestiona la facturación mensual y el estado de los pagos.</p>
                         </div>
                         
                         <button class="bg-white border-2 border-indigo-100 text-indigo-400 px-5 py-2.5 rounded-xl font-black flex items-center gap-2 text-xs uppercase tracking-widest cursor-not-allowed opacity-70" title="Próximamente">
@@ -47,18 +47,65 @@
                         </button>
                     </div>
 
-                    <div class="bg-white border border-slate-200 rounded-[2rem] shadow-sm overflow-hidden">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                        <div class="bg-white p-5 rounded-[1.5rem] border border-slate-200 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center shrink-0"><i data-lucide="sigma"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Facturado</p>
+                                <p class="text-2xl font-black text-slate-800" id="kpi-total">0.00 €</p>
+                            </div>
+                        </div>
+                        <div class="bg-white p-5 rounded-[1.5rem] border border-slate-200 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-emerald-50 text-emerald-500 flex items-center justify-center shrink-0"><i data-lucide="check-circle-2"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Cobrado</p>
+                                <p class="text-2xl font-black text-emerald-600" id="kpi-paid">0.00 €</p>
+                            </div>
+                        </div>
+                        <div class="bg-white p-5 rounded-[1.5rem] border border-red-100 shadow-sm flex items-center gap-4 relative overflow-hidden">
+                            <div class="absolute right-0 top-0 bottom-0 w-2 bg-red-400"></div>
+                            <div class="w-12 h-12 rounded-full bg-red-50 text-red-500 flex items-center justify-center shrink-0"><i data-lucide="clock"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-red-400 uppercase tracking-widest">Pendiente de Cobro</p>
+                                <p class="text-2xl font-black text-red-600" id="kpi-pending">0.00 €</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm mb-6 flex flex-wrap gap-3 items-center">
+                        <div class="flex-1 min-w-[200px] relative">
+                            <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+                            <input type="text" id="searchBox" oninput="renderList()" placeholder="Buscar por cliente, referencia..." class="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500 outline-none transition-all">
+                        </div>
+                        <div class="flex flex-wrap gap-2">
+                            <div class="flex items-center bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
+                                <div class="px-3 text-slate-400 border-r border-slate-200"><i data-lucide="calendar-days" class="w-4 h-4"></i></div>
+                                <input type="month" id="filterMonth" onchange="renderList()" class="bg-transparent text-xs font-black px-3 py-2.5 outline-none text-slate-600 uppercase tracking-widest cursor-pointer">
+                            </div>
+                            <select id="filterCompany" onchange="renderList()" class="bg-slate-50 border border-slate-200 text-[10px] font-black px-4 py-2.5 rounded-xl outline-none focus:ring-2 focus:ring-emerald-500 uppercase tracking-widest max-w-[200px]">
+                                <option value="ALL">TODAS LAS COMPAÑÍAS</option>
+                            </select>
+                            <select id="filterStatus" onchange="renderList()" class="bg-slate-50 border border-slate-200 text-[10px] font-black px-4 py-2.5 rounded-xl outline-none focus:ring-2 focus:ring-emerald-500 uppercase tracking-widest">
+                                <option value="ALL">ESTADO DE COBRO</option>
+                                <option value="paid">PAGADOS</option>
+                                <option value="pending">PENDIENTES</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="bg-white border border-slate-200 rounded-[2rem] shadow-sm overflow-hidden mb-10">
                         <div class="grid grid-cols-12 gap-4 p-4 bg-slate-50 border-b border-slate-100 text-[10px] font-black uppercase tracking-widest text-slate-400">
-                            <div class="col-span-3 pl-2">Servicio / Cliente</div>
-                            <div class="col-span-3">Compañía</div>
+                            <div class="col-span-4 pl-2">Servicio / Cliente / Fecha</div>
+                            <div class="col-span-2">Compañía</div>
                             <div class="col-span-2 text-center">Importe (€)</div>
                             <div class="col-span-2">Método de Pago</div>
                             <div class="col-span-2 text-center">Estado</div>
                         </div>
 
                         <div id="financialList" class="divide-y divide-slate-100">
-                            <div class="p-10 text-center text-slate-400">
-                                <i data-lucide="loader-2" class="w-6 h-6 animate-spin mx-auto mb-2"></i> Cargando contabilidad...
+                            <div class="p-10 text-center text-slate-400 flex flex-col items-center">
+                                <i data-lucide="loader-2" class="w-8 h-8 animate-spin mb-3"></i>
+                                <span class="font-bold text-sm tracking-widest uppercase">Cargando contabilidad...</span>
                             </div>
                         </div>
                     </div>
@@ -72,10 +119,16 @@
 
     <script src="js/layout.js"></script>
     <script>
-        let financials = [];
+        let allFinancials = [];
 
         document.addEventListener("DOMContentLoaded", () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
+            
+            // Establecer el mes actual por defecto en el filtro
+            const now = new Date();
+            const currentMonthStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+            document.getElementById('filterMonth').value = currentMonthStr;
+
             setTimeout(loadFinancials, 200);
         });
 
@@ -85,7 +138,21 @@
                 const data = await res.json();
                 
                 if(data.ok) {
-                    financials = data.financials;
+                    // Filtrar los bloqueos de agenda por si acaso vienen cruzados
+                    allFinancials = data.financials.filter(f => f.service_ref && !f.service_ref.includes('BLOCK-'));
+                    
+                    // Extraer compañías únicas para el filtro
+                    const compSelect = document.getElementById('filterCompany');
+                    const currentVal = compSelect.value;
+                    const uniqueCompanies = [...new Set(allFinancials.map(f => {
+                        const raw = f.raw_data || {};
+                        return (raw['Compañía'] || raw['COMPAÑIA'] || "Particular").toString().toUpperCase().trim();
+                    }))].sort();
+                    
+                    compSelect.innerHTML = '<option value="ALL">TODAS LAS COMPAÑÍAS</option>';
+                    uniqueCompanies.forEach(c => compSelect.innerHTML += `<option value="${c}">${c}</option>`);
+                    compSelect.value = currentVal; // Mantener selección si se recarga
+                    
                     renderList();
                 }
             } catch (error) {
@@ -95,57 +162,114 @@
 
         function renderList() {
             const container = document.getElementById('financialList');
+            const searchTerm = document.getElementById('searchBox').value.toLowerCase();
+            const filterCompany = document.getElementById('filterCompany').value;
+            const filterStatus = document.getElementById('filterStatus').value;
+            const filterMonth = document.getElementById('filterMonth').value; // Formato "YYYY-MM"
+
+            // Filtrado del array
+            const filtered = allFinancials.filter(f => {
+                const raw = f.raw_data || {};
+                const name = (raw['Nombre Cliente'] || raw['CLIENTE'] || "").toLowerCase();
+                const ref = (f.service_ref || "").toLowerCase();
+                const company = (raw['Compañía'] || raw['COMPAÑIA'] || "Particular").toUpperCase().trim();
+                
+                // Extraer el mes del servicio para el filtro
+                let serviceMonth = "";
+                if (raw.scheduled_date) {
+                    // formato asumido YYYY-MM-DD
+                    serviceMonth = raw.scheduled_date.substring(0, 7); 
+                } else if (f.created_at) {
+                    serviceMonth = f.created_at.substring(0, 7);
+                }
+
+                // Condiciones
+                const matchSearch = name.includes(searchTerm) || ref.includes(searchTerm);
+                const matchCompany = filterCompany === 'ALL' || company === filterCompany;
+                const matchStatus = filterStatus === 'ALL' || (filterStatus === 'paid' ? f.is_paid : !f.is_paid);
+                const matchMonth = !filterMonth || serviceMonth === filterMonth; // Si no hay mes seleccionado, muestra todo
+
+                return matchSearch && matchCompany && matchStatus && matchMonth;
+            });
+
+            // Variables para KPIs
+            let totalFacturado = 0;
+            let totalCobrado = 0;
+
             container.innerHTML = '';
 
-            if (financials.length === 0) {
-                container.innerHTML = '<div class="p-10 text-center font-bold text-slate-400">No hay registros financieros.</div>';
+            if (filtered.length === 0) {
+                container.innerHTML = `
+                    <div class="p-16 text-center flex flex-col items-center">
+                        <div class="w-16 h-16 bg-slate-100 text-slate-300 rounded-full flex items-center justify-center mb-4">
+                            <i data-lucide="inbox" class="w-8 h-8"></i>
+                        </div>
+                        <p class="font-bold text-slate-500 mb-1">No se encontraron cobros</p>
+                        <p class="text-xs text-slate-400">Prueba a cambiar los filtros o el mes de búsqueda.</p>
+                    </div>`;
+                updateKPIs(0, 0);
+                lucide.createIcons();
                 return;
             }
 
-            financials.forEach(f => {
+            filtered.forEach(f => {
                 const raw = f.raw_data || {};
                 const name = raw['Nombre Cliente'] || raw['CLIENTE'] || "Sin Nombre";
                 const company = raw['Compañía'] || raw['COMPAÑIA'] || "Particular";
                 
+                // Formatear Fecha
+                let fechaVis = "Sin fecha";
+                if(raw.scheduled_date) {
+                    const [y, m, d] = raw.scheduled_date.split('-');
+                    fechaVis = `${d}/${m}/${y}`;
+                }
+
+                // Cálculos matemáticos
+                const amt = parseFloat(f.amount || 0);
+                totalFacturado += amt;
+                if (f.is_paid) totalCobrado += amt;
+                
                 // Selector de estado visual
                 const statusBadge = f.is_paid 
                     ? `<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1 border border-emerald-200"><i data-lucide="check-circle-2" class="w-3 h-3"></i> Pagado</span>`
-                    : `<span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1 border border-amber-200"><i data-lucide="clock" class="w-3 h-3"></i> Pendiente</span>`;
+                    : `<span class="bg-red-50 text-red-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1 border border-red-200"><i data-lucide="clock" class="w-3 h-3"></i> Pendiente</span>`;
 
                 container.innerHTML += `
                     <div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-slate-50 transition-colors group">
                         
-                        <div class="col-span-3 pl-2 min-w-0">
+                        <div class="col-span-4 pl-2 min-w-0">
                             <p class="text-xs font-black text-slate-800 uppercase truncate" title="${name}">${name}</p>
-                            <p class="text-[10px] font-bold text-slate-400 mt-0.5">REF: ${f.service_ref}</p>
+                            <div class="flex items-center gap-2 mt-1 text-[10px] font-bold text-slate-400">
+                                <span class="bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200">#${f.service_ref}</span>
+                                <span><i data-lucide="calendar" class="w-3 h-3 inline mr-0.5"></i> ${fechaVis}</span>
+                            </div>
                         </div>
                         
-                        <div class="col-span-3 min-w-0">
-                            <span class="bg-blue-50 text-blue-700 border border-blue-100 px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest truncate max-w-full inline-block">
+                        <div class="col-span-2 min-w-0">
+                            <span class="bg-blue-50 text-blue-700 border border-blue-100 px-2 py-1 rounded text-[9px] font-black uppercase tracking-widest truncate max-w-full inline-block">
                                 ${company}
                             </span>
                         </div>
 
-                        <div class="col-span-2">
-                            <div class="relative">
-                                <input type="number" step="0.01" id="amt-${f.scraped_id}" value="${f.amount}" 
-                                    class="w-full bg-white border border-slate-200 px-3 py-2 rounded-xl text-sm font-black text-center outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 transition-all text-slate-700">
-                            </div>
+                        <div class="col-span-2 relative">
+                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-black text-slate-400 pointer-events-none">€</span>
+                            <input type="number" step="0.01" id="amt-${f.scraped_id}" value="${f.amount}" 
+                                class="w-full bg-white border border-slate-200 pl-3 pr-8 py-2.5 rounded-xl text-sm font-black text-right outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 transition-all ${f.is_paid ? 'text-emerald-700 bg-emerald-50/30' : 'text-slate-700'}">
                         </div>
 
                         <div class="col-span-2">
-                            <select id="method-${f.scraped_id}" class="w-full bg-white border border-slate-200 px-2 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest text-slate-600 outline-none focus:border-emerald-500 cursor-pointer">
-                                <option value="Pendiente" ${f.payment_method === 'Pendiente' ? 'selected' : ''}>Pendiente</option>
-                                <option value="Cobro Banco" ${f.payment_method === 'Cobro Banco' ? 'selected' : ''}>🏦 Cobro Banco</option>
+                            <select id="method-${f.scraped_id}" class="w-full bg-white border border-slate-200 px-2 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest text-slate-600 outline-none focus:border-emerald-500 cursor-pointer">
+                                <option value="Pendiente" ${f.payment_method === 'Pendiente' ? 'selected' : ''}>⏳ Pendiente</option>
+                                <option value="Cobro Banco" ${f.payment_method === 'Cobro Banco' ? 'selected' : ''}>🏦 Banco</option>
                                 <option value="Efectivo" ${f.payment_method === 'Efectivo' ? 'selected' : ''}>💵 Efectivo</option>
                                 <option value="Tarjeta" ${f.payment_method === 'Tarjeta' ? 'selected' : ''}>💳 Tarjeta</option>
-                                <option value="Transferencia" ${f.payment_method === 'Transferencia' ? 'selected' : ''}>🔄 Transferencia</option>
+                                <option value="Transferencia" ${f.payment_method === 'Transferencia' ? 'selected' : ''}>🔄 Transfer.</option>
                             </select>
                         </div>
 
                         <div class="col-span-2 flex items-center justify-between gap-2">
                             <div id="badge-container-${f.scraped_id}" class="flex-1">${statusBadge}</div>
-                            <button onclick="savePayment(${f.scraped_id})" class="bg-slate-100 text-slate-500 hover:bg-emerald-500 hover:text-white p-2 rounded-xl transition-colors shrink-0" title="Guardar Cambios">
+                            <button onclick="savePayment(${f.scraped_id})" class="bg-slate-100 text-slate-500 border border-slate-200 hover:bg-emerald-500 hover:border-emerald-600 hover:text-white p-2 rounded-xl transition-all shrink-0 active:scale-95 shadow-sm" title="Guardar Cambios">
                                 <i data-lucide="save" class="w-4 h-4"></i>
                             </button>
                         </div>
@@ -153,12 +277,29 @@
                     </div>
                 `;
             });
+            
+            updateKPIs(totalFacturado, totalCobrado);
             lucide.createIcons();
         }
 
+        function updateKPIs(facturado, cobrado) {
+            const pendiente = facturado - cobrado;
+            
+            document.getElementById('kpi-total').innerText = facturado.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
+            document.getElementById('kpi-paid').innerText = cobrado.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
+            document.getElementById('kpi-pending').innerText = pendiente.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
+        }
+
         async function savePayment(scrapedId) {
-            const amount = document.getElementById(`amt-${scrapedId}`).value;
-            const method = document.getElementById(`method-${scrapedId}`).value;
+            const amountInput = document.getElementById(`amt-${scrapedId}`);
+            const methodInput = document.getElementById(`method-${scrapedId}`);
+            
+            const amount = amountInput.value;
+            const method = methodInput.value;
+
+            // Bloquear inputs mientras guarda
+            amountInput.disabled = true;
+            methodInput.disabled = true;
 
             try {
                 const res = await fetch(`${API_URL}/financials/${scrapedId}`, {
@@ -170,20 +311,26 @@
                 const data = await res.json();
                 
                 if (data.ok) {
-                    showToast("¡Guardado correctamente!");
-                    // Actualizamos la pastilla en tiempo real sin recargar la página
-                    const badgeContainer = document.getElementById(`badge-container-${scrapedId}`);
-                    if (data.is_paid) {
-                        badgeContainer.innerHTML = `<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1 border border-emerald-200"><i data-lucide="check-circle-2" class="w-3 h-3"></i> Pagado</span>`;
-                    } else {
-                        badgeContainer.innerHTML = `<span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1 border border-amber-200"><i data-lucide="clock" class="w-3 h-3"></i> Pendiente</span>`;
+                    showToast("Cobro actualizado");
+                    
+                    // Actualizar el array local para que los KPIs se recalculen sin recargar de BD
+                    const fIndex = allFinancials.findIndex(f => f.scraped_id === scrapedId);
+                    if (fIndex > -1) {
+                        allFinancials[fIndex].amount = parseFloat(amount || 0);
+                        allFinancials[fIndex].payment_method = method;
+                        allFinancials[fIndex].is_paid = data.is_paid;
                     }
-                    lucide.createIcons();
+                    
+                    // Refrescar lista visualmente
+                    renderList();
                 } else {
                     showToast("Error al guardar.");
                 }
             } catch (error) {
                 showToast("Error de conexión.");
+            } finally {
+                amountInput.disabled = false;
+                methodInput.disabled = false;
             }
         }