Gestor de Presupuestos<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos personalizados *\/\r\n .status-badge {\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 9999px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n }\r\n .row-urgent {\r\n background-color: #fef2f2; \/* Rojo muy claro *\/\r\n border-left: 4px solid #ef4444;\r\n }\r\n .row-won {\r\n background-color: #f0fdf4; \/* Verde muy claro *\/\r\n border-left: 4px solid #22c55e;\r\n }\r\n .row-today {\r\n background-color: #fefce8; \/* Amarillo muy claro *\/\r\n border-left: 4px solid #eab308;\r\n }\r\n \/* Animaciones suaves *\/\r\n .fade-in {\r\n animation: fadeIn 0.3s ease-in-out;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800 font-sans\">\r\n\r\n \r\n <nav class=\"bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between h-16\">\r\n <div class=\"flex items-center\">\r\n <i class=\"fa-solid fa-chart-pie text-blue-600 text-2xl mr-3\"><\/i>\r\n <h1 class=\"text-xl font-bold text-gray-900\">Control de Presupuestos<\/h1>\r\n <\/div>\r\n <div class=\"flex items-center space-x-3\">\r\n <button onclick=\"exportToCSV()\" class=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center\">\r\n <i class=\"fa-solid fa-file-excel mr-2\"><\/i> Descargar Excel\r\n <\/button>\r\n <button onclick=\"openModal()\" class=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center shadow-lg\">\r\n <i class=\"fa-solid fa-plus mr-2\"><\/i> Nuevo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 mb-8\">\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Total Presupuestos<\/p>\r\n <h2 class=\"text-3xl font-bold text-gray-800\" id=\"stat-total\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-blue-50 rounded-full text-blue-600\"><i class=\"fa-solid fa-folder-open\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Ganados<\/p>\r\n <h2 class=\"text-3xl font-bold text-green-600\" id=\"stat-won\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-green-50 rounded-full text-green-600\"><i class=\"fa-solid fa-trophy\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Seguimiento Hoy<\/p>\r\n <h2 class=\"text-3xl font-bold text-yellow-600\" id=\"stat-today\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-yellow-50 rounded-full text-yellow-600\"><i class=\"fa-solid fa-calendar-day\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Agotados (+3)<\/p>\r\n <h2 class=\"text-3xl font-bold text-red-600\" id=\"stat-urgent\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-red-50 rounded-full text-red-600\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-t-xl border border-gray-200 p-4 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex space-x-2 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto\">\r\n <button onclick=\"filterTable('all')\" class=\"filter-btn active px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-2 focus:ring-blue-500\">Todos<\/button>\r\n <button onclick=\"filterTable('today')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">Hoy<\/button>\r\n <button onclick=\"filterTable('urgent')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">\u26a0\ufe0f Agotados<\/button>\r\n <button onclick=\"filterTable('won')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">Ganados<\/button>\r\n <\/div>\r\n <div class=\"relative w-full md:w-64\">\r\n <input type=\"text\" id=\"searchInput\" onkeyup=\"searchTable()\" placeholder=\"Buscar cliente...\" class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-gray-400\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white border-x border-b border-gray-200 rounded-b-xl overflow-hidden overflow-x-auto\">\r\n <table class=\"min-w-full divide-y divide-gray-200\">\r\n <thead class=\"bg-gray-50\">\r\n <tr>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Estado<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Cliente \/ ID<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Pr\u00f3x. Seguimiento<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Intentos<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Contacto<\/th>\r\n <th class=\"px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider\">Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"budgetTableBody\" class=\"bg-white divide-y divide-gray-200\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <div id=\"emptyState\" class=\"hidden text-center py-12\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4\">\r\n <i class=\"fa-regular fa-folder-open text-gray-400 text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-medium text-gray-900\">No hay presupuestos<\/h3>\r\n <p class=\"text-gray-500 mt-1\">A\u00f1ade uno nuevo para empezar a gestionar.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"budgetModal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4\">\r\n <div class=\"bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto fade-in\">\r\n <div class=\"px-6 py-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10\">\r\n <h3 class=\"text-xl font-semibold text-gray-900\" id=\"modalTitle\">Nuevo Presupuesto<\/h3>\r\n <button onclick=\"closeModal()\" class=\"text-gray-400 hover:text-gray-600 text-2xl\">×<\/button>\r\n <\/div>\r\n \r\n <form id=\"budgetForm\" onsubmit=\"handleFormSubmit(event)\" class=\"p-6 space-y-4\">\r\n <input type=\"hidden\" id=\"editIndex\" value=\"-1\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">N\u00famero \/ ID<\/label>\r\n <input type=\"text\" id=\"id\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Ej: P-2024-001\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nombre Cliente<\/label>\r\n <input type=\"text\" id=\"client\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Empresa S.L.\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">WhatsApp (con prefijo)<\/label>\r\n <div class=\"relative\">\r\n <i class=\"fa-brands fa-whatsapp absolute left-3 top-3 text-green-500\"><\/i>\r\n <input type=\"text\" id=\"whatsapp\" class=\"w-full pl-10 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"34600123456\">\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Email<\/label>\r\n <input type=\"email\" id=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"cliente@email.com\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Estado<\/label>\r\n <select id=\"status\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white\">\r\n <option value=\"Pendiente\">Pendiente<\/option>\r\n <option value=\"Enviado\">Enviado<\/option>\r\n <option value=\"Seguimiento\">Seguimiento<\/option>\r\n <option value=\"Ganado\">Ganado<\/option>\r\n <option value=\"Perdido\">Perdido<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Intentos (Max 3)<\/label>\r\n <input type=\"number\" id=\"attempts\" min=\"0\" max=\"10\" value=\"0\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Pr\u00f3x. Seguimiento<\/label>\r\n <input type=\"date\" id=\"nextDate\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Notas<\/label>\r\n <textarea id=\"notes\" rows=\"3\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"Detalles de la \u00faltima conversaci\u00f3n...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end gap-3 pt-4 border-t border-gray-100\">\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50\">Cancelar<\/button>\r\n <button type=\"submit\" class=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium\">Guardar Presupuesto<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- L\u00d3GICA DE LA APLICACI\u00d3N ---\r\n \r\n let budgets = [];\r\n const STORAGE_KEY = 'presupuestos_app_data';\r\n\r\n \/\/ Cargar datos al iniciar\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadData();\r\n \/\/ Establecer fecha de hoy por defecto en el filtro\r\n document.getElementById('nextDate').valueAsDate = new Date();\r\n });\r\n\r\n function loadData() {\r\n const stored = localStorage.getItem(STORAGE_KEY);\r\n if (stored) {\r\n budgets = JSON.parse(stored);\r\n }\r\n renderTable();\r\n updateMetrics();\r\n }\r\n\r\n function saveData() {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(budgets));\r\n updateMetrics();\r\n renderTable();\r\n }\r\n\r\n \/\/ M\u00e9tricas\r\n function updateMetrics() {\r\n const today = new Date().toISOString().split('T')[0];\r\n \r\n document.getElementById('stat-total').innerText = budgets.length;\r\n document.getElementById('stat-won').innerText = budgets.filter(b => b.status === 'Ganado').length;\r\n \r\n const todayCount = budgets.filter(b => b.nextDate === today && b.status !== 'Ganado' && b.status !== 'Perdido').length;\r\n document.getElementById('stat-today').innerText = todayCount;\r\n\r\n const urgentCount = budgets.filter(b => parseInt(b.attempts) >= 3 && b.status !== 'Ganado' && b.status !== 'Perdido').length;\r\n document.getElementById('stat-urgent').innerText = urgentCount;\r\n }\r\n\r\n \/\/ Renderizado de tabla\r\n function renderTable(filterType = 'all') {\r\n const tbody = document.getElementById('budgetTableBody');\r\n const searchVal = document.getElementById('searchInput').value.toLowerCase();\r\n const today = new Date().toISOString().split('T')[0];\r\n \r\n tbody.innerHTML = '';\r\n \r\n let filtered = budgets.filter(b => {\r\n \/\/ Filtro de b\u00fasqueda texto\r\n const matchesSearch = b.client.toLowerCase().includes(searchVal) || b.id.toLowerCase().includes(searchVal);\r\n if (!matchesSearch) return false;\r\n\r\n \/\/ Filtro de botones\r\n if (filterType === 'today') return b.nextDate <= today && b.status !== 'Ganado' && b.status !== 'Perdido';\r\n if (filterType === 'urgent') return parseInt(b.attempts) >= 3 && b.status !== 'Ganado' && b.status !== 'Perdido';\r\n if (filterType === 'won') return b.status === 'Ganado';\r\n return true;\r\n });\r\n\r\n if (filtered.length === 0) {\r\n document.getElementById('emptyState').classList.remove('hidden');\r\n } else {\r\n document.getElementById('emptyState').classList.add('hidden');\r\n }\r\n\r\n filtered.forEach((b, index) => {\r\n \/\/ Encontrar el \u00edndice original en el array principal para editar\/borrar\r\n const originalIndex = budgets.indexOf(b);\r\n \r\n \/\/ Determinar clases de la fila seg\u00fan estado\r\n let rowClass = 'hover:bg-gray-50 transition duration-150';\r\n if (b.status === 'Ganado') rowClass += ' row-won';\r\n else if (parseInt(b.attempts) >= 3 && b.status !== 'Perdido') rowClass += ' row-urgent';\r\n else if (b.nextDate === today && b.status !== 'Perdido') rowClass += ' row-today';\r\n\r\n \/\/ Badges de estado\r\n let statusColor = 'bg-gray-100 text-gray-800';\r\n if(b.status === 'Ganado') statusColor = 'bg-green-100 text-green-800';\r\n if(b.status === 'Perdido') statusColor = 'bg-red-100 text-red-800';\r\n if(b.status === 'Enviado') statusColor = 'bg-blue-100 text-blue-800';\r\n \r\n \/\/ WhatsApp Link\r\n let waLink = '#';\r\n if(b.whatsapp) {\r\n const msg = `Hola ${b.client}, te contacto por el presupuesto ${b.id}...`;\r\n waLink = `https:\/\/wa.me\/${b.whatsapp.replace(\/\\D\/g,'')}?text=${encodeURIComponent(msg)}`;\r\n }\r\n\r\n const row = `\r\n <tr class=\"${rowClass} border-b border-gray-100\">\r\n <td class=\"px-6 py-4 whitespace-nowrap\">\r\n <span class=\"status-badge ${statusColor}\">${b.status}<\/span>\r\n <\/td>\r\n <td class=\"px-6 py-4\">\r\n <div class=\"text-sm font-medium text-gray-900\">${b.client}<\/div>\r\n <div class=\"text-xs text-gray-500\">ID: ${b.id}<\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\r\n ${formatDate(b.nextDate)}\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap\">\r\n <div class=\"flex items-center\">\r\n <span class=\"font-bold text-gray-700 mr-2\">${b.attempts}\/3<\/span>\r\n ${getProgressBar(b.attempts)}\r\n <\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\r\n <div class=\"flex space-x-3\">\r\n ${b.whatsapp ? `<a href=\"${waLink}\" target=\"_blank\" class=\"text-green-500 hover:text-green-600 text-lg\" title=\"Abrir WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>` : ''}\r\n ${b.email ? `<a href=\"mailto:${b.email}\" class=\"text-gray-400 hover:text-gray-600 text-lg\" title=\"Enviar Email\"><i class=\"fa-regular fa-envelope\"><\/i><\/a>` : ''}\r\n <\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\">\r\n <button onclick=\"editBudget(${originalIndex})\" class=\"text-indigo-600 hover:text-indigo-900 mr-3\" title=\"Editar\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\r\n <button onclick=\"deleteBudget(${originalIndex})\" class=\"text-red-600 hover:text-red-900\" title=\"Eliminar\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n tbody.innerHTML += row;\r\n });\r\n }\r\n\r\n \/\/ Utiles\r\n function formatDate(dateString) {\r\n if (!dateString) return '-';\r\n const options = { year: 'numeric', month: 'short', day: 'numeric' };\r\n return new Date(dateString).toLocaleDateString('es-ES', options);\r\n }\r\n\r\n function getProgressBar(attempts) {\r\n let color = 'bg-blue-500';\r\n if(attempts >= 2) color = 'bg-yellow-500';\r\n if(attempts >= 3) color = 'bg-red-500';\r\n const width = Math.min((attempts \/ 3) * 100, 100);\r\n return `<div class=\"w-16 h-2 bg-gray-200 rounded-full overflow-hidden\"><div class=\"${color} h-full\" style=\"width: ${width}%\"><\/div><\/div>`;\r\n }\r\n\r\n \/\/ Filtros visuales (Estilo botones)\r\n function filterTable(type) {\r\n \/\/ Reset botones\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('bg-gray-100', 'text-gray-700', 'bg-white', 'text-gray-600');\r\n btn.classList.add('bg-white', 'text-gray-600'); \r\n });\r\n \/\/ Activar actual (esto es simplificado, en app real usar\u00eda IDs)\r\n renderTable(type);\r\n }\r\n \r\n function searchTable() {\r\n renderTable(); \/\/ Usa el valor del input autom\u00e1ticamente\r\n }\r\n\r\n \/\/ --- MANEJO DEL MODAL Y FORMULARIO ---\r\n \r\n function openModal(isEdit = false) {\r\n document.getElementById('budgetModal').classList.remove('hidden');\r\n if(!isEdit) {\r\n document.getElementById('budgetForm').reset();\r\n document.getElementById('editIndex').value = \"-1\";\r\n document.getElementById('modalTitle').innerText = \"Nuevo Presupuesto\";\r\n document.getElementById('nextDate').valueAsDate = new Date();\r\n }\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('budgetModal').classList.add('hidden');\r\n }\r\n\r\n function editBudget(index) {\r\n const b = budgets[index];\r\n document.getElementById('id').value = b.id;\r\n document.getElementById('client').value = b.client;\r\n document.getElementById('whatsapp').value = b.whatsapp;\r\n document.getElementById('email').value = b.email;\r\n document.getElementById('status').value = b.status;\r\n document.getElementById('attempts').value = b.attempts;\r\n document.getElementById('nextDate').value = b.nextDate;\r\n document.getElementById('notes').value = b.notes;\r\n \r\n document.getElementById('editIndex').value = index;\r\n document.getElementById('modalTitle').innerText = \"Editar Presupuesto\";\r\n openModal(true);\r\n }\r\n\r\n function deleteBudget(index) {\r\n if(confirm('\u00bfEst\u00e1s seguro de eliminar este presupuesto?')) {\r\n budgets.splice(index, 1);\r\n saveData();\r\n }\r\n }\r\n\r\n function handleFormSubmit(e) {\r\n e.preventDefault();\r\n const index = parseInt(document.getElementById('editIndex').value);\r\n \r\n const newBudget = {\r\n id: document.getElementById('id').value,\r\n client: document.getElementById('client').value,\r\n whatsapp: document.getElementById('whatsapp').value,\r\n email: document.getElementById('email').value,\r\n status: document.getElementById('status').value,\r\n attempts: document.getElementById('attempts').value,\r\n nextDate: document.getElementById('nextDate').value,\r\n notes: document.getElementById('notes').value,\r\n dateAdded: index === -1 ? new Date().toISOString().split('T')[0] : budgets[index].dateAdded\r\n };\r\n\r\n if (index === -1) {\r\n budgets.unshift(newBudget); \/\/ A\u00f1adir al principio\r\n } else {\r\n budgets[index] = newBudget;\r\n }\r\n\r\n saveData();\r\n closeModal();\r\n }\r\n\r\n \/\/ --- EXPORTAR A EXCEL (CSV) ---\r\n function exportToCSV() {\r\n let csvContent = \"data:text\/csv;charset=utf-8,\";\r\n \/\/ Cabeceras\r\n csvContent += \"ID,Cliente,WhatsApp,Email,Estado,Intentos,Prox. Seguimiento,Notas\\n\";\r\n \r\n budgets.forEach(b => {\r\n const row = [\r\n b.id,\r\n `\"${b.client}\"`, \/\/ Comillas para evitar problemas con comas en nombres\r\n b.whatsapp,\r\n b.email,\r\n b.status,\r\n b.attempts,\r\n b.nextDate,\r\n `\"${b.notes.replace(\/\\n\/g, ' ')}\"`\r\n ].join(\",\");\r\n csvContent += row + \"\\n\";\r\n });\r\n\r\n const encodedUri = encodeURI(csvContent);\r\n const link = document.createElement(\"a\");\r\n link.setAttribute(\"href\", encodedUri);\r\n link.setAttribute(\"download\", \"presupuestos.csv\");\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n }\r\n\r\n \/\/ Cerrar modal al hacer clic fuera\r\n window.onclick = function(event) {\r\n const modal = document.getElementById('budgetModal');\r\n if (event.target == modal) {\r\n closeModal();\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gestor de Presupuestos Control de Presupuestos Descargar Excel Nuevo Total Presupuestos 0 Ganados 0 Seguimiento Hoy 0 Agotados (+3) 0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":"","_joinchat":[]},"_links":{"self":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818"}],"collection":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/comments?post=3818"}],"version-history":[{"count":4,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818\/revisions"}],"predecessor-version":[{"id":3822,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818\/revisions\/3822"}],"wp:attachment":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/media?parent=3818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Gestor de Presupuestos<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos personalizados *\/\r\n .status-badge {\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 9999px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n }\r\n .row-urgent {\r\n background-color: #fef2f2; \/* Rojo muy claro *\/\r\n border-left: 4px solid #ef4444;\r\n }\r\n .row-won {\r\n background-color: #f0fdf4; \/* Verde muy claro *\/\r\n border-left: 4px solid #22c55e;\r\n }\r\n .row-today {\r\n background-color: #fefce8; \/* Amarillo muy claro *\/\r\n border-left: 4px solid #eab308;\r\n }\r\n \/* Animaciones suaves *\/\r\n .fade-in {\r\n animation: fadeIn 0.3s ease-in-out;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800 font-sans\">\r\n\r\n \r\n <nav class=\"bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between h-16\">\r\n <div class=\"flex items-center\">\r\n <i class=\"fa-solid fa-chart-pie text-blue-600 text-2xl mr-3\"><\/i>\r\n <h1 class=\"text-xl font-bold text-gray-900\">Control de Presupuestos<\/h1>\r\n <\/div>\r\n <div class=\"flex items-center space-x-3\">\r\n <button onclick=\"exportToCSV()\" class=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center\">\r\n <i class=\"fa-solid fa-file-excel mr-2\"><\/i> Descargar Excel\r\n <\/button>\r\n <button onclick=\"openModal()\" class=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center shadow-lg\">\r\n <i class=\"fa-solid fa-plus mr-2\"><\/i> Nuevo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 mb-8\">\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Total Presupuestos<\/p>\r\n <h2 class=\"text-3xl font-bold text-gray-800\" id=\"stat-total\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-blue-50 rounded-full text-blue-600\"><i class=\"fa-solid fa-folder-open\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Ganados<\/p>\r\n <h2 class=\"text-3xl font-bold text-green-600\" id=\"stat-won\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-green-50 rounded-full text-green-600\"><i class=\"fa-solid fa-trophy\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Seguimiento Hoy<\/p>\r\n <h2 class=\"text-3xl font-bold text-yellow-600\" id=\"stat-today\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-yellow-50 rounded-full text-yellow-600\"><i class=\"fa-solid fa-calendar-day\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"text-sm text-gray-500 mb-1\">Agotados (+3)<\/p>\r\n <h2 class=\"text-3xl font-bold text-red-600\" id=\"stat-urgent\">0<\/h2>\r\n <\/div>\r\n <div class=\"p-3 bg-red-50 rounded-full text-red-600\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-t-xl border border-gray-200 p-4 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex space-x-2 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto\">\r\n <button onclick=\"filterTable('all')\" class=\"filter-btn active px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-2 focus:ring-blue-500\">Todos<\/button>\r\n <button onclick=\"filterTable('today')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">Hoy<\/button>\r\n <button onclick=\"filterTable('urgent')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">\u26a0\ufe0f Agotados<\/button>\r\n <button onclick=\"filterTable('won')\" class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\">Ganados<\/button>\r\n <\/div>\r\n <div class=\"relative w-full md:w-64\">\r\n <input type=\"text\" id=\"searchInput\" onkeyup=\"searchTable()\" placeholder=\"Buscar cliente...\" class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-gray-400\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white border-x border-b border-gray-200 rounded-b-xl overflow-hidden overflow-x-auto\">\r\n <table class=\"min-w-full divide-y divide-gray-200\">\r\n <thead class=\"bg-gray-50\">\r\n <tr>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Estado<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Cliente \/ ID<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Pr\u00f3x. Seguimiento<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Intentos<\/th>\r\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Contacto<\/th>\r\n <th class=\"px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider\">Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"budgetTableBody\" class=\"bg-white divide-y divide-gray-200\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <div id=\"emptyState\" class=\"hidden text-center py-12\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4\">\r\n <i class=\"fa-regular fa-folder-open text-gray-400 text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-medium text-gray-900\">No hay presupuestos<\/h3>\r\n <p class=\"text-gray-500 mt-1\">A\u00f1ade uno nuevo para empezar a gestionar.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"budgetModal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4\">\r\n <div class=\"bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto fade-in\">\r\n <div class=\"px-6 py-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10\">\r\n <h3 class=\"text-xl font-semibold text-gray-900\" id=\"modalTitle\">Nuevo Presupuesto<\/h3>\r\n <button onclick=\"closeModal()\" class=\"text-gray-400 hover:text-gray-600 text-2xl\">×<\/button>\r\n <\/div>\r\n \r\n <form id=\"budgetForm\" onsubmit=\"handleFormSubmit(event)\" class=\"p-6 space-y-4\">\r\n <input type=\"hidden\" id=\"editIndex\" value=\"-1\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">N\u00famero \/ ID<\/label>\r\n <input type=\"text\" id=\"id\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Ej: P-2024-001\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nombre Cliente<\/label>\r\n <input type=\"text\" id=\"client\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Empresa S.L.\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">WhatsApp (con prefijo)<\/label>\r\n <div class=\"relative\">\r\n <i class=\"fa-brands fa-whatsapp absolute left-3 top-3 text-green-500\"><\/i>\r\n <input type=\"text\" id=\"whatsapp\" class=\"w-full pl-10 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"34600123456\">\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Email<\/label>\r\n <input type=\"email\" id=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"cliente@email.com\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Estado<\/label>\r\n <select id=\"status\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white\">\r\n <option value=\"Pendiente\">Pendiente<\/option>\r\n <option value=\"Enviado\">Enviado<\/option>\r\n <option value=\"Seguimiento\">Seguimiento<\/option>\r\n <option value=\"Ganado\">Ganado<\/option>\r\n <option value=\"Perdido\">Perdido<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Intentos (Max 3)<\/label>\r\n <input type=\"number\" id=\"attempts\" min=\"0\" max=\"10\" value=\"0\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Pr\u00f3x. Seguimiento<\/label>\r\n <input type=\"date\" id=\"nextDate\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Notas<\/label>\r\n <textarea id=\"notes\" rows=\"3\" class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\" placeholder=\"Detalles de la \u00faltima conversaci\u00f3n...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end gap-3 pt-4 border-t border-gray-100\">\r\n <button type=\"button\" onclick=\"closeModal()\" class=\"px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50\">Cancelar<\/button>\r\n <button type=\"submit\" class=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium\">Guardar Presupuesto<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- L\u00d3GICA DE LA APLICACI\u00d3N ---\r\n \r\n let budgets = [];\r\n const STORAGE_KEY = 'presupuestos_app_data';\r\n\r\n \/\/ Cargar datos al iniciar\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadData();\r\n \/\/ Establecer fecha de hoy por defecto en el filtro\r\n document.getElementById('nextDate').valueAsDate = new Date();\r\n });\r\n\r\n function loadData() {\r\n const stored = localStorage.getItem(STORAGE_KEY);\r\n if (stored) {\r\n budgets = JSON.parse(stored);\r\n }\r\n renderTable();\r\n updateMetrics();\r\n }\r\n\r\n function saveData() {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(budgets));\r\n updateMetrics();\r\n renderTable();\r\n }\r\n\r\n \/\/ M\u00e9tricas\r\n function updateMetrics() {\r\n const today = new Date().toISOString().split('T')[0];\r\n \r\n document.getElementById('stat-total').innerText = budgets.length;\r\n document.getElementById('stat-won').innerText = budgets.filter(b => b.status === 'Ganado').length;\r\n \r\n const todayCount = budgets.filter(b => b.nextDate === today && b.status !== 'Ganado' && b.status !== 'Perdido').length;\r\n document.getElementById('stat-today').innerText = todayCount;\r\n\r\n const urgentCount = budgets.filter(b => parseInt(b.attempts) >= 3 && b.status !== 'Ganado' && b.status !== 'Perdido').length;\r\n document.getElementById('stat-urgent').innerText = urgentCount;\r\n }\r\n\r\n \/\/ Renderizado de tabla\r\n function renderTable(filterType = 'all') {\r\n const tbody = document.getElementById('budgetTableBody');\r\n const searchVal = document.getElementById('searchInput').value.toLowerCase();\r\n const today = new Date().toISOString().split('T')[0];\r\n \r\n tbody.innerHTML = '';\r\n \r\n let filtered = budgets.filter(b => {\r\n \/\/ Filtro de b\u00fasqueda texto\r\n const matchesSearch = b.client.toLowerCase().includes(searchVal) || b.id.toLowerCase().includes(searchVal);\r\n if (!matchesSearch) return false;\r\n\r\n \/\/ Filtro de botones\r\n if (filterType === 'today') return b.nextDate <= today && b.status !== 'Ganado' && b.status !== 'Perdido';\r\n if (filterType === 'urgent') return parseInt(b.attempts) >= 3 && b.status !== 'Ganado' && b.status !== 'Perdido';\r\n if (filterType === 'won') return b.status === 'Ganado';\r\n return true;\r\n });\r\n\r\n if (filtered.length === 0) {\r\n document.getElementById('emptyState').classList.remove('hidden');\r\n } else {\r\n document.getElementById('emptyState').classList.add('hidden');\r\n }\r\n\r\n filtered.forEach((b, index) => {\r\n \/\/ Encontrar el \u00edndice original en el array principal para editar\/borrar\r\n const originalIndex = budgets.indexOf(b);\r\n \r\n \/\/ Determinar clases de la fila seg\u00fan estado\r\n let rowClass = 'hover:bg-gray-50 transition duration-150';\r\n if (b.status === 'Ganado') rowClass += ' row-won';\r\n else if (parseInt(b.attempts) >= 3 && b.status !== 'Perdido') rowClass += ' row-urgent';\r\n else if (b.nextDate === today && b.status !== 'Perdido') rowClass += ' row-today';\r\n\r\n \/\/ Badges de estado\r\n let statusColor = 'bg-gray-100 text-gray-800';\r\n if(b.status === 'Ganado') statusColor = 'bg-green-100 text-green-800';\r\n if(b.status === 'Perdido') statusColor = 'bg-red-100 text-red-800';\r\n if(b.status === 'Enviado') statusColor = 'bg-blue-100 text-blue-800';\r\n \r\n \/\/ WhatsApp Link\r\n let waLink = '#';\r\n if(b.whatsapp) {\r\n const msg = `Hola ${b.client}, te contacto por el presupuesto ${b.id}...`;\r\n waLink = `https:\/\/wa.me\/${b.whatsapp.replace(\/\\D\/g,'')}?text=${encodeURIComponent(msg)}`;\r\n }\r\n\r\n const row = `\r\n <tr class=\"${rowClass} border-b border-gray-100\">\r\n <td class=\"px-6 py-4 whitespace-nowrap\">\r\n <span class=\"status-badge ${statusColor}\">${b.status}<\/span>\r\n <\/td>\r\n <td class=\"px-6 py-4\">\r\n <div class=\"text-sm font-medium text-gray-900\">${b.client}<\/div>\r\n <div class=\"text-xs text-gray-500\">ID: ${b.id}<\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\r\n ${formatDate(b.nextDate)}\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap\">\r\n <div class=\"flex items-center\">\r\n <span class=\"font-bold text-gray-700 mr-2\">${b.attempts}\/3<\/span>\r\n ${getProgressBar(b.attempts)}\r\n <\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\r\n <div class=\"flex space-x-3\">\r\n ${b.whatsapp ? `<a href=\"${waLink}\" target=\"_blank\" class=\"text-green-500 hover:text-green-600 text-lg\" title=\"Abrir WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>` : ''}\r\n ${b.email ? `<a href=\"mailto:${b.email}\" class=\"text-gray-400 hover:text-gray-600 text-lg\" title=\"Enviar Email\"><i class=\"fa-regular fa-envelope\"><\/i><\/a>` : ''}\r\n <\/div>\r\n <\/td>\r\n <td class=\"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\">\r\n <button onclick=\"editBudget(${originalIndex})\" class=\"text-indigo-600 hover:text-indigo-900 mr-3\" title=\"Editar\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\r\n <button onclick=\"deleteBudget(${originalIndex})\" class=\"text-red-600 hover:text-red-900\" title=\"Eliminar\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n tbody.innerHTML += row;\r\n });\r\n }\r\n\r\n \/\/ Utiles\r\n function formatDate(dateString) {\r\n if (!dateString) return '-';\r\n const options = { year: 'numeric', month: 'short', day: 'numeric' };\r\n return new Date(dateString).toLocaleDateString('es-ES', options);\r\n }\r\n\r\n function getProgressBar(attempts) {\r\n let color = 'bg-blue-500';\r\n if(attempts >= 2) color = 'bg-yellow-500';\r\n if(attempts >= 3) color = 'bg-red-500';\r\n const width = Math.min((attempts \/ 3) * 100, 100);\r\n return `<div class=\"w-16 h-2 bg-gray-200 rounded-full overflow-hidden\"><div class=\"${color} h-full\" style=\"width: ${width}%\"><\/div><\/div>`;\r\n }\r\n\r\n \/\/ Filtros visuales (Estilo botones)\r\n function filterTable(type) {\r\n \/\/ Reset botones\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('bg-gray-100', 'text-gray-700', 'bg-white', 'text-gray-600');\r\n btn.classList.add('bg-white', 'text-gray-600'); \r\n });\r\n \/\/ Activar actual (esto es simplificado, en app real usar\u00eda IDs)\r\n renderTable(type);\r\n }\r\n \r\n function searchTable() {\r\n renderTable(); \/\/ Usa el valor del input autom\u00e1ticamente\r\n }\r\n\r\n \/\/ --- MANEJO DEL MODAL Y FORMULARIO ---\r\n \r\n function openModal(isEdit = false) {\r\n document.getElementById('budgetModal').classList.remove('hidden');\r\n if(!isEdit) {\r\n document.getElementById('budgetForm').reset();\r\n document.getElementById('editIndex').value = \"-1\";\r\n document.getElementById('modalTitle').innerText = \"Nuevo Presupuesto\";\r\n document.getElementById('nextDate').valueAsDate = new Date();\r\n }\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('budgetModal').classList.add('hidden');\r\n }\r\n\r\n function editBudget(index) {\r\n const b = budgets[index];\r\n document.getElementById('id').value = b.id;\r\n document.getElementById('client').value = b.client;\r\n document.getElementById('whatsapp').value = b.whatsapp;\r\n document.getElementById('email').value = b.email;\r\n document.getElementById('status').value = b.status;\r\n document.getElementById('attempts').value = b.attempts;\r\n document.getElementById('nextDate').value = b.nextDate;\r\n document.getElementById('notes').value = b.notes;\r\n \r\n document.getElementById('editIndex').value = index;\r\n document.getElementById('modalTitle').innerText = \"Editar Presupuesto\";\r\n openModal(true);\r\n }\r\n\r\n function deleteBudget(index) {\r\n if(confirm('\u00bfEst\u00e1s seguro de eliminar este presupuesto?')) {\r\n budgets.splice(index, 1);\r\n saveData();\r\n }\r\n }\r\n\r\n function handleFormSubmit(e) {\r\n e.preventDefault();\r\n const index = parseInt(document.getElementById('editIndex').value);\r\n \r\n const newBudget = {\r\n id: document.getElementById('id').value,\r\n client: document.getElementById('client').value,\r\n whatsapp: document.getElementById('whatsapp').value,\r\n email: document.getElementById('email').value,\r\n status: document.getElementById('status').value,\r\n attempts: document.getElementById('attempts').value,\r\n nextDate: document.getElementById('nextDate').value,\r\n notes: document.getElementById('notes').value,\r\n dateAdded: index === -1 ? new Date().toISOString().split('T')[0] : budgets[index].dateAdded\r\n };\r\n\r\n if (index === -1) {\r\n budgets.unshift(newBudget); \/\/ A\u00f1adir al principio\r\n } else {\r\n budgets[index] = newBudget;\r\n }\r\n\r\n saveData();\r\n closeModal();\r\n }\r\n\r\n \/\/ --- EXPORTAR A EXCEL (CSV) ---\r\n function exportToCSV() {\r\n let csvContent = \"data:text\/csv;charset=utf-8,\";\r\n \/\/ Cabeceras\r\n csvContent += \"ID,Cliente,WhatsApp,Email,Estado,Intentos,Prox. Seguimiento,Notas\\n\";\r\n \r\n budgets.forEach(b => {\r\n const row = [\r\n b.id,\r\n `\"${b.client}\"`, \/\/ Comillas para evitar problemas con comas en nombres\r\n b.whatsapp,\r\n b.email,\r\n b.status,\r\n b.attempts,\r\n b.nextDate,\r\n `\"${b.notes.replace(\/\\n\/g, ' ')}\"`\r\n ].join(\",\");\r\n csvContent += row + \"\\n\";\r\n });\r\n\r\n const encodedUri = encodeURI(csvContent);\r\n const link = document.createElement(\"a\");\r\n link.setAttribute(\"href\", encodedUri);\r\n link.setAttribute(\"download\", \"presupuestos.csv\");\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n }\r\n\r\n \/\/ Cerrar modal al hacer clic fuera\r\n window.onclick = function(event) {\r\n const modal = document.getElementById('budgetModal');\r\n if (event.target == modal) {\r\n closeModal();\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gestor de Presupuestos Control de Presupuestos Descargar Excel Nuevo Total Presupuestos 0 Ganados 0 Seguimiento Hoy 0 Agotados (+3) 0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":"","_joinchat":[]},"_links":{"self":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818"}],"collection":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/comments?post=3818"}],"version-history":[{"count":4,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818\/revisions"}],"predecessor-version":[{"id":3822,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3818\/revisions\/3822"}],"wp:attachment":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/media?parent=3818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}