Dashboard | Build-AI Predictiva<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\/dist\/umd\/lucide.js\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n .sidebar {\n transition: transform 0.3s ease-in-out;\n }\n \/* Estilos para el loader y modal *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #4f46e5;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <div class=\"flex h-screen\">\n \n <aside class=\"w-64 bg-white text-gray-800 flex flex-col shadow-lg\">\n <div class=\"px-8 py-6 border-b\">\n <h1 class=\"text-2xl font-bold text-indigo-600\">Build-AI<\/h1>\n <p class=\"text-sm text-gray-500\">An\u00e1lisis Predictivo<\/p>\n <\/div>\n <nav class=\"flex-1 px-6 py-4 space-y-2\">\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin\/\" class=\"flex items-center px-4 py-2 text-white bg-indigo-600 rounded-lg\">\n <i data-lucide=\"layout-dashboard\" class=\"w-5 h-5 mr-3\"><\/i>\n Dashboard\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/presupuesto-fasin\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"dollar-sign\" class=\"w-5 h-5 mr-3\"><\/i>\n Presupuesto\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/cronograma-fasin\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"calendar-days\" class=\"w-5 h-5 mr-3\"><\/i>\n Cronograma\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin-riesgos\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"alert-triangle\" class=\"w-5 h-5 mr-3\"><\/i>\n Riesgos\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin-equipo\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"users\" class=\"w-5 h-5 mr-3\"><\/i>\n Equipo\n <\/a>\n <\/nav>\n <div class=\"px-8 py-6 border-t\">\n <div class=\"flex items-center\">\n <img decoding=\"async\" class=\"h-10 w-10 rounded-full object-cover\" src=\"https:\/\/placehold.co\/100x100\/667eea\/EBF4FF?text=MA\" alt=\"User avatar\">\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Miguel Angulo<\/p>\n <p class=\"text-xs text-gray-500\">Arquitecto Asesor<\/p>\n <\/div>\n <\/div>\n <button class=\"w-full mt-4 flex items-center justify-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg\">\n <i data-lucide=\"log-out\" class=\"w-4 h-4 mr-2\"><\/i>\n Cerrar Sesi\u00f3n\n <\/button>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 p-8 overflow-y-auto\">\n \n <header class=\"flex justify-between items-center mb-8\">\n <div>\n <h2 class=\"text-3xl font-bold text-gray-800\">Hola, Miguel!<\/h2>\n <p class=\"text-gray-500\">Bienvenido al centro de control de tu proyecto.<\/p>\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <button class=\"p-2 bg-white rounded-full shadow-md hover:bg-gray-50\">\n <i data-lucide=\"bell\" class=\"w-6 h-6 text-gray-600\"><\/i>\n <\/button>\n <button class=\"p-2 bg-white rounded-full shadow-md hover:bg-gray-50\">\n <i data-lucide=\"settings\" class=\"w-6 h-6 text-gray-600\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8\">\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-blue-100 rounded-full\">\n <i data-lucide=\"list-checks\" class=\"w-6 h-6 text-blue-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Proyectos Activos<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">1<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-green-100 rounded-full\">\n <i data-lucide=\"banknote\" class=\"w-6 h-6 text-green-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Presupuesto Total<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">S\/. 2.5M<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-red-100 rounded-full\">\n <i data-lucide=\"shield-alert\" class=\"w-6 h-6 text-red-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Riesgos Detectados<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">12<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-yellow-100 rounded-full\">\n <i data-lucide=\"trending-up\" class=\"w-6 h-6 text-yellow-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Eficiencia<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">+20%<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"lg:col-span-2 bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-lg font-semibold text-gray-800 mb-4\">Avance del Proyecto vs. Costos<\/h3>\n <canvas id=\"projectChart\" height=\"150\"><\/canvas>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold text-gray-800\">Actividad Reciente<\/h3>\n <button id=\"analyze-activity-btn\" class=\"flex items-center text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition\">\n <span class=\"mr-1\">\u2728<\/span> Analizar\n <\/button>\n <\/div>\n <ul id=\"activity-list\" class=\"space-y-4\">\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-green-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Fase de Cimentaci\u00f3n completada<\/p>\n <p class=\"text-xs text-gray-500\">Hoy, 9:30 AM<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-red-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Alerta: Posible retraso en entrega de acero<\/p>\n <p class=\"text-xs text-gray-500\">Ayer, 4:15 PM<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-yellow-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Presupuesto de vigas actualizado<\/p>\n <p class=\"text-xs text-gray-500\">Hace 2 d\u00edas<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-blue-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Nuevo miembro a\u00f1adido al equipo<\/p>\n <p class=\"text-xs text-gray-500\">Hace 3 d\u00edas<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/main>\n <\/div>\n\n \n \n \n <div id=\"chatbot-container\" class=\"fixed bottom-8 right-8 z-50\">\n <div id=\"chatbot-window\" class=\"hidden bg-white w-96 h-[600px] rounded-2xl shadow-2xl flex flex-col transition-all duration-300 transform scale-95 opacity-0\">\n <div class=\"bg-indigo-600 p-4 rounded-t-2xl flex justify-between items-center text-white\">\n <div class=\"flex items-center\">\n <i data-lucide=\"bot\" class=\"w-7 h-7 mr-3\"><\/i>\n <div>\n <h3 class=\"font-bold text-lg\">Asistente Build-AI<\/h3>\n <p class=\"text-xs text-indigo-200\">En l\u00ednea (Modo Demo)<\/p>\n <\/div>\n <\/div>\n <button id=\"close-chatbot\" class=\"hover:text-indigo-200\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n <div id=\"chat-messages\" class=\"flex-1 p-6 overflow-y-auto bg-gray-50\">\n <div class=\"flex mb-4\">\n <div class=\"bg-indigo-100 text-gray-800 p-3 rounded-lg max-w-xs\">\n <p class=\"text-sm\">\u00a1Hola! Estoy en modo demostraci\u00f3n. Haz clic en una de las preguntas de ejemplo para ver mi capacidad de respuesta.<\/p>\n <\/div>\n <\/div>\n <div class=\"my-4 space-y-2\">\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">\u00bfCu\u00e1les son los mayores riesgos del proyecto?<\/button>\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">Hazme un resumen del presupuesto actual<\/button>\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">\u00bfCu\u00e1l es el estado del cronograma?<\/button>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t bg-white rounded-b-2xl\">\n <div class=\"flex items-center\">\n <input type=\"text\" id=\"chat-input\" placeholder=\"Modo demostraci\u00f3n activado\" class=\"flex-1 px-4 py-2 border rounded-full bg-gray-100\" disabled>\n <button id=\"send-chat-message\" class=\"ml-3 bg-indigo-300 text-white p-3 rounded-full cursor-not-allowed\" disabled>\n <i data-lucide=\"send\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <button id=\"open-chatbot\" class=\"bg-indigo-600 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl hover:bg-indigo-700 transition-transform hover:scale-110\">\n <i data-lucide=\"bot\" class=\"w-8 h-8\"><\/i>\n <\/button>\n <\/div>\n \n \n <div id=\"ai-analysis-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-8 relative\">\n <button id=\"close-modal-btn\" class=\"absolute top-4 right-4 text-gray-500 hover:text-gray-800\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <div class=\"flex items-center text-indigo-600 mb-4\">\n <i data-lucide=\"sparkles\" class=\"w-8 h-8 mr-3\"><\/i>\n <h2 class=\"text-2xl font-bold\">An\u00e1lisis de Actividad<\/h2>\n <\/div>\n <div id=\"modal-content\" class=\"text-gray-600\">\n <div class=\"flex justify-center items-center h-48\">\n <div class=\"loader\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ Inicializar Lucide Icons\n lucide.createIcons();\n\n \/\/ L\u00f3gica para el Gr\u00e1fico (Chart.js)\n const ctx = document.getElementById('projectChart').getContext('2d');\n const projectChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'],\n datasets: [{\n label: 'Costo Real (S\/.)',\n data: [150000, 250000, 400000, 550000, 700000, 850000],\n borderColor: 'rgb(79, 70, 229)',\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n fill: true,\n tension: 0.4\n }, {\n label: 'Costo Planificado (S\/.)',\n data: [160000, 260000, 410000, 540000, 680000, 820000],\n borderColor: 'rgb(107, 114, 128)',\n borderDash: [5, 5],\n fill: false,\n tension: 0.4\n }]\n },\n options: {\n responsive: true,\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: function(value, index, values) {\n return 'S\/. ' + (value \/ 1000) + 'k';\n }\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' }).format(context.parsed.y);\n }\n return label;\n }\n }\n }\n }\n }\n });\n \n \/\/ ==========================================================\n \/\/ ===== L\u00d3GICA CONEXI\u00d3N SEGURA A GEMINI V\u00cdA WORDPRESS ======\n \/\/ ==========================================================\n \/\/ La llamada a la API en vivo est\u00e1 deshabilitada para el modo de demostraci\u00f3n.\n async function callGeminiAPI(prompt) {\n console.log(\"Llamada a la API en vivo deshabilitada. Usando respuestas locales.\");\n return new Promise(resolve => setTimeout(() => resolve(\"Esta es una respuesta simulada.\"), 500));\n }\n\n \/\/ ==========================================================\n \/\/ ============ L\u00d3GICA JAVASCRIPT DEL CHATBOT (MODO DEMO) ====\n \/\/ ==========================================================\n const openChatbotBtn = document.getElementById('open-chatbot');\n const closeChatbotBtn = document.getElementById('close-chatbot');\n const chatbotWindow = document.getElementById('chatbot-window');\n const chatMessages = document.getElementById('chat-messages');\n const presetQuestions = document.querySelectorAll('.preset-question');\n\n \/\/ Respuestas predefinidas para la demostraci\u00f3n\n const demoResponses = {\n \"\u00bfCu\u00e1les son los mayores riesgos del proyecto?\": \"He identificado tres riesgos principales:<br>1) Posible retraso en la entrega de acero estructural (Probabilidad: 65%).<br>2) Sobrecosto en acabados por variaci\u00f3n del tipo de cambio (Probabilidad: 50%).<br>3) Conflictos laborales menores (Probabilidad: 30%).<br>Recomiendo revisar el plan de mitigaci\u00f3n.\",\n \"Hazme un resumen del presupuesto actual\": \"El presupuesto total es de S\/ 1,250,000. Se ha ejecutado el 45% (S\/ 562,500) y tenemos una desviaci\u00f3n positiva del 2% gracias a la optimizaci\u00f3n en la partida de cimentaci\u00f3n.\",\n \"\u00bfCu\u00e1l es el estado del cronograma?\": \"El proyecto presenta un avance del 35%, lo cual est\u00e1 un 5% por delante de lo planificado. La fase de cimentaci\u00f3n ha concluido y estamos iniciando la estructura. No se prev\u00e9n retrasos en las pr\u00f3ximas dos semanas.\"\n };\n\n openChatbotBtn.addEventListener('click', () => {\n chatbotWindow.classList.remove('hidden', 'scale-95', 'opacity-0');\n chatbotWindow.classList.add('scale-100', 'opacity-100');\n openChatbotBtn.classList.add('hidden');\n });\n\n closeChatbotBtn.addEventListener('click', () => {\n chatbotWindow.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n chatbotWindow.classList.add('hidden');\n openChatbotBtn.classList.remove('hidden');\n }, 300);\n });\n\n function addMessage(message, sender, isLoading = false) {\n const messageWrapper = document.createElement('div');\n messageWrapper.className = `flex mb-4 ${sender === 'user' ? 'justify-end' : ''}`;\n \n const messageBubble = document.createElement('div');\n messageBubble.className = `p-3 rounded-lg max-w-xs text-sm ${sender === 'user' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 text-gray-800'}`;\n \n if(isLoading) {\n messageBubble.innerHTML = `<div class=\"flex items-center justify-center space-x-2\">\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\"><\/div>\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\" style=\"animation-delay: 0.2s;\"><\/div>\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\" style=\"animation-delay: 0.4s;\"><\/div>\n <\/div>`;\n messageBubble.id = 'loading-bubble';\n } else {\n messageBubble.innerHTML = `<p>${message}<\/p>`; \/\/ No se necesita .replace() aqu\u00ed ya que usamos <br> directamente en las respuestas\n }\n \n messageWrapper.appendChild(messageBubble);\n chatMessages.appendChild(messageWrapper);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n \n \/\/ Manejar clics en preguntas preestablecidas\n presetQuestions.forEach(button => {\n button.addEventListener('click', () => {\n const userMessage = button.textContent;\n addMessage(userMessage, 'user');\n addMessage('', 'bot', true); \/\/ Muestra el indicador de \"escribiendo\"\n\n setTimeout(() => {\n const loadingBubble = document.getElementById('loading-bubble');\n if (loadingBubble) loadingBubble.parentElement.remove();\n \n const botResponse = demoResponses[userMessage];\n addMessage(botResponse, 'bot');\n }, 1200); \/\/ Retraso de 1.2 segundos para simular que est\u00e1 \"pensando\"\n });\n });\n\n \/\/ ==========================================================\n \/\/ ============ L\u00d3GICA AN\u00c1LISIS DE ACTIVIDAD (SIMULADO) =====\n \/\/ ==========================================================\n const analyzeActivityBtn = document.getElementById('analyze-activity-btn');\n const modal = document.getElementById('ai-analysis-modal');\n const closeModalBtn = document.getElementById('close-modal-btn');\n const modalContent = document.getElementById('modal-content');\n\n analyzeActivityBtn.addEventListener('click', async () => {\n modal.classList.remove('hidden');\n modalContent.innerHTML = '<div class=\"flex justify-center items-center h-48\"><div class=\"loader\"><\/div><\/div>'; \/\/ Show loader\n\n const analysisResult = `<strong>Puntos Clave:<\/strong><br>- Finalizaci\u00f3n de la cimentaci\u00f3n, un hito importante.<br>- Actualizaci\u00f3n del presupuesto de vigas, lo que sugiere un control financiero activo.<br><br><strong>Posibles Riesgos:<\/strong><br>- La <strong>alerta de retraso en el acero<\/strong> es cr\u00edtica y requiere atenci\u00f3n inmediata para evitar un efecto domin\u00f3 en el cronograma.`;\n\n \/\/ Simular un peque\u00f1o retraso para la respuesta del an\u00e1lisis\n setTimeout(() => {\n modalContent.innerHTML = `<div class=\"prose max-w-none\">${analysisResult}<\/div>`;\n }, 1500);\n });\n\n closeModalBtn.addEventListener('click', () => {\n modal.classList.add('hidden');\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Dashboard | Build-AI Predictiva Build-AI An\u00e1lisis Predictivo Dashboard Presupuesto Cronograma Riesgos Equipo Miguel Angulo Arquitecto Asesor Cerrar Sesi\u00f3n Hola, Miguel! […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"ast-content-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-opacity":"","overlay-gradient":""},"tablet":{"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-opacity":"","overlay-gradient":""},"mobile":{"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-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":5,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":63,"date":"2025-10-20T02:34:16","date_gmt":"2025-10-20T02:34:16","guid":{"rendered":"https:\/\/codigoyconcreto.es\/?page_id=63"},"modified":"2025-10-21T21:42:33","modified_gmt":"2025-10-21T21:42:33","slug":"fasin","status":"publish","type":"page","link":"https:\/\/codigoyconcreto.es\/index.php\/fasin\/","title":{"rendered":"FASIN"},"content":{"rendered":"\n\n\n\n \n \n Dashboard | Build-AI Predictiva<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\/dist\/umd\/lucide.js\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n .sidebar {\n transition: transform 0.3s ease-in-out;\n }\n \/* Estilos para el loader y modal *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #4f46e5;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <div class=\"flex h-screen\">\n \n <aside class=\"w-64 bg-white text-gray-800 flex flex-col shadow-lg\">\n <div class=\"px-8 py-6 border-b\">\n <h1 class=\"text-2xl font-bold text-indigo-600\">Build-AI<\/h1>\n <p class=\"text-sm text-gray-500\">An\u00e1lisis Predictivo<\/p>\n <\/div>\n <nav class=\"flex-1 px-6 py-4 space-y-2\">\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin\/\" class=\"flex items-center px-4 py-2 text-white bg-indigo-600 rounded-lg\">\n <i data-lucide=\"layout-dashboard\" class=\"w-5 h-5 mr-3\"><\/i>\n Dashboard\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/presupuesto-fasin\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"dollar-sign\" class=\"w-5 h-5 mr-3\"><\/i>\n Presupuesto\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/cronograma-fasin\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"calendar-days\" class=\"w-5 h-5 mr-3\"><\/i>\n Cronograma\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin-riesgos\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"alert-triangle\" class=\"w-5 h-5 mr-3\"><\/i>\n Riesgos\n <\/a>\n <a href=\"https:\/\/codigoyconcreto.es\/index.php\/fasin-equipo\/\" class=\"flex items-center px-4 py-2 text-gray-600 hover:bg-indigo-50 rounded-lg\">\n <i data-lucide=\"users\" class=\"w-5 h-5 mr-3\"><\/i>\n Equipo\n <\/a>\n <\/nav>\n <div class=\"px-8 py-6 border-t\">\n <div class=\"flex items-center\">\n <img decoding=\"async\" class=\"h-10 w-10 rounded-full object-cover\" src=\"https:\/\/placehold.co\/100x100\/667eea\/EBF4FF?text=MA\" alt=\"User avatar\">\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Miguel Angulo<\/p>\n <p class=\"text-xs text-gray-500\">Arquitecto Asesor<\/p>\n <\/div>\n <\/div>\n <button class=\"w-full mt-4 flex items-center justify-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg\">\n <i data-lucide=\"log-out\" class=\"w-4 h-4 mr-2\"><\/i>\n Cerrar Sesi\u00f3n\n <\/button>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 p-8 overflow-y-auto\">\n \n <header class=\"flex justify-between items-center mb-8\">\n <div>\n <h2 class=\"text-3xl font-bold text-gray-800\">Hola, Miguel!<\/h2>\n <p class=\"text-gray-500\">Bienvenido al centro de control de tu proyecto.<\/p>\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <button class=\"p-2 bg-white rounded-full shadow-md hover:bg-gray-50\">\n <i data-lucide=\"bell\" class=\"w-6 h-6 text-gray-600\"><\/i>\n <\/button>\n <button class=\"p-2 bg-white rounded-full shadow-md hover:bg-gray-50\">\n <i data-lucide=\"settings\" class=\"w-6 h-6 text-gray-600\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8\">\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-blue-100 rounded-full\">\n <i data-lucide=\"list-checks\" class=\"w-6 h-6 text-blue-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Proyectos Activos<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">1<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-green-100 rounded-full\">\n <i data-lucide=\"banknote\" class=\"w-6 h-6 text-green-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Presupuesto Total<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">S\/. 2.5M<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-red-100 rounded-full\">\n <i data-lucide=\"shield-alert\" class=\"w-6 h-6 text-red-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Riesgos Detectados<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">12<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md flex items-center\">\n <div class=\"p-3 bg-yellow-100 rounded-full\">\n <i data-lucide=\"trending-up\" class=\"w-6 h-6 text-yellow-600\"><\/i>\n <\/div>\n <div class=\"ml-4\">\n <p class=\"text-sm text-gray-500\">Eficiencia<\/p>\n <p class=\"text-2xl font-bold text-gray-800\">+20%<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"lg:col-span-2 bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-lg font-semibold text-gray-800 mb-4\">Avance del Proyecto vs. Costos<\/h3>\n <canvas id=\"projectChart\" height=\"150\"><\/canvas>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold text-gray-800\">Actividad Reciente<\/h3>\n <button id=\"analyze-activity-btn\" class=\"flex items-center text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition\">\n <span class=\"mr-1\">\u2728<\/span> Analizar\n <\/button>\n <\/div>\n <ul id=\"activity-list\" class=\"space-y-4\">\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-green-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Fase de Cimentaci\u00f3n completada<\/p>\n <p class=\"text-xs text-gray-500\">Hoy, 9:30 AM<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-red-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Alerta: Posible retraso en entrega de acero<\/p>\n <p class=\"text-xs text-gray-500\">Ayer, 4:15 PM<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-yellow-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Presupuesto de vigas actualizado<\/p>\n <p class=\"text-xs text-gray-500\">Hace 2 d\u00edas<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <div class=\"w-2 h-2 bg-blue-500 rounded-full mt-2\"><\/div>\n <div class=\"ml-3\">\n <p class=\"text-sm font-semibold\">Nuevo miembro a\u00f1adido al equipo<\/p>\n <p class=\"text-xs text-gray-500\">Hace 3 d\u00edas<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/main>\n <\/div>\n\n \n \n \n <div id=\"chatbot-container\" class=\"fixed bottom-8 right-8 z-50\">\n <div id=\"chatbot-window\" class=\"hidden bg-white w-96 h-[600px] rounded-2xl shadow-2xl flex flex-col transition-all duration-300 transform scale-95 opacity-0\">\n <div class=\"bg-indigo-600 p-4 rounded-t-2xl flex justify-between items-center text-white\">\n <div class=\"flex items-center\">\n <i data-lucide=\"bot\" class=\"w-7 h-7 mr-3\"><\/i>\n <div>\n <h3 class=\"font-bold text-lg\">Asistente Build-AI<\/h3>\n <p class=\"text-xs text-indigo-200\">En l\u00ednea (Modo Demo)<\/p>\n <\/div>\n <\/div>\n <button id=\"close-chatbot\" class=\"hover:text-indigo-200\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n <div id=\"chat-messages\" class=\"flex-1 p-6 overflow-y-auto bg-gray-50\">\n <div class=\"flex mb-4\">\n <div class=\"bg-indigo-100 text-gray-800 p-3 rounded-lg max-w-xs\">\n <p class=\"text-sm\">\u00a1Hola! Estoy en modo demostraci\u00f3n. Haz clic en una de las preguntas de ejemplo para ver mi capacidad de respuesta.<\/p>\n <\/div>\n <\/div>\n <div class=\"my-4 space-y-2\">\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">\u00bfCu\u00e1les son los mayores riesgos del proyecto?<\/button>\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">Hazme un resumen del presupuesto actual<\/button>\n <button class=\"preset-question w-full text-left bg-white border border-gray-200 p-3 rounded-lg hover:bg-gray-50 text-sm text-indigo-700\">\u00bfCu\u00e1l es el estado del cronograma?<\/button>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t bg-white rounded-b-2xl\">\n <div class=\"flex items-center\">\n <input type=\"text\" id=\"chat-input\" placeholder=\"Modo demostraci\u00f3n activado\" class=\"flex-1 px-4 py-2 border rounded-full bg-gray-100\" disabled>\n <button id=\"send-chat-message\" class=\"ml-3 bg-indigo-300 text-white p-3 rounded-full cursor-not-allowed\" disabled>\n <i data-lucide=\"send\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <button id=\"open-chatbot\" class=\"bg-indigo-600 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl hover:bg-indigo-700 transition-transform hover:scale-110\">\n <i data-lucide=\"bot\" class=\"w-8 h-8\"><\/i>\n <\/button>\n <\/div>\n \n \n <div id=\"ai-analysis-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-8 relative\">\n <button id=\"close-modal-btn\" class=\"absolute top-4 right-4 text-gray-500 hover:text-gray-800\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <div class=\"flex items-center text-indigo-600 mb-4\">\n <i data-lucide=\"sparkles\" class=\"w-8 h-8 mr-3\"><\/i>\n <h2 class=\"text-2xl font-bold\">An\u00e1lisis de Actividad<\/h2>\n <\/div>\n <div id=\"modal-content\" class=\"text-gray-600\">\n <div class=\"flex justify-center items-center h-48\">\n <div class=\"loader\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ Inicializar Lucide Icons\n lucide.createIcons();\n\n \/\/ L\u00f3gica para el Gr\u00e1fico (Chart.js)\n const ctx = document.getElementById('projectChart').getContext('2d');\n const projectChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'],\n datasets: [{\n label: 'Costo Real (S\/.)',\n data: [150000, 250000, 400000, 550000, 700000, 850000],\n borderColor: 'rgb(79, 70, 229)',\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n fill: true,\n tension: 0.4\n }, {\n label: 'Costo Planificado (S\/.)',\n data: [160000, 260000, 410000, 540000, 680000, 820000],\n borderColor: 'rgb(107, 114, 128)',\n borderDash: [5, 5],\n fill: false,\n tension: 0.4\n }]\n },\n options: {\n responsive: true,\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: function(value, index, values) {\n return 'S\/. ' + (value \/ 1000) + 'k';\n }\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' }).format(context.parsed.y);\n }\n return label;\n }\n }\n }\n }\n }\n });\n \n \/\/ ==========================================================\n \/\/ ===== L\u00d3GICA CONEXI\u00d3N SEGURA A GEMINI V\u00cdA WORDPRESS ======\n \/\/ ==========================================================\n \/\/ La llamada a la API en vivo est\u00e1 deshabilitada para el modo de demostraci\u00f3n.\n async function callGeminiAPI(prompt) {\n console.log(\"Llamada a la API en vivo deshabilitada. Usando respuestas locales.\");\n return new Promise(resolve => setTimeout(() => resolve(\"Esta es una respuesta simulada.\"), 500));\n }\n\n \/\/ ==========================================================\n \/\/ ============ L\u00d3GICA JAVASCRIPT DEL CHATBOT (MODO DEMO) ====\n \/\/ ==========================================================\n const openChatbotBtn = document.getElementById('open-chatbot');\n const closeChatbotBtn = document.getElementById('close-chatbot');\n const chatbotWindow = document.getElementById('chatbot-window');\n const chatMessages = document.getElementById('chat-messages');\n const presetQuestions = document.querySelectorAll('.preset-question');\n\n \/\/ Respuestas predefinidas para la demostraci\u00f3n\n const demoResponses = {\n \"\u00bfCu\u00e1les son los mayores riesgos del proyecto?\": \"He identificado tres riesgos principales:<br>1) Posible retraso en la entrega de acero estructural (Probabilidad: 65%).<br>2) Sobrecosto en acabados por variaci\u00f3n del tipo de cambio (Probabilidad: 50%).<br>3) Conflictos laborales menores (Probabilidad: 30%).<br>Recomiendo revisar el plan de mitigaci\u00f3n.\",\n \"Hazme un resumen del presupuesto actual\": \"El presupuesto total es de S\/ 1,250,000. Se ha ejecutado el 45% (S\/ 562,500) y tenemos una desviaci\u00f3n positiva del 2% gracias a la optimizaci\u00f3n en la partida de cimentaci\u00f3n.\",\n \"\u00bfCu\u00e1l es el estado del cronograma?\": \"El proyecto presenta un avance del 35%, lo cual est\u00e1 un 5% por delante de lo planificado. La fase de cimentaci\u00f3n ha concluido y estamos iniciando la estructura. No se prev\u00e9n retrasos en las pr\u00f3ximas dos semanas.\"\n };\n\n openChatbotBtn.addEventListener('click', () => {\n chatbotWindow.classList.remove('hidden', 'scale-95', 'opacity-0');\n chatbotWindow.classList.add('scale-100', 'opacity-100');\n openChatbotBtn.classList.add('hidden');\n });\n\n closeChatbotBtn.addEventListener('click', () => {\n chatbotWindow.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n chatbotWindow.classList.add('hidden');\n openChatbotBtn.classList.remove('hidden');\n }, 300);\n });\n\n function addMessage(message, sender, isLoading = false) {\n const messageWrapper = document.createElement('div');\n messageWrapper.className = `flex mb-4 ${sender === 'user' ? 'justify-end' : ''}`;\n \n const messageBubble = document.createElement('div');\n messageBubble.className = `p-3 rounded-lg max-w-xs text-sm ${sender === 'user' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 text-gray-800'}`;\n \n if(isLoading) {\n messageBubble.innerHTML = `<div class=\"flex items-center justify-center space-x-2\">\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\"><\/div>\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\" style=\"animation-delay: 0.2s;\"><\/div>\n <div class=\"w-2 h-2 rounded-full bg-gray-500 animate-pulse\" style=\"animation-delay: 0.4s;\"><\/div>\n <\/div>`;\n messageBubble.id = 'loading-bubble';\n } else {\n messageBubble.innerHTML = `<p>${message}<\/p>`; \/\/ No se necesita .replace() aqu\u00ed ya que usamos <br> directamente en las respuestas\n }\n \n messageWrapper.appendChild(messageBubble);\n chatMessages.appendChild(messageWrapper);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n \n \/\/ Manejar clics en preguntas preestablecidas\n presetQuestions.forEach(button => {\n button.addEventListener('click', () => {\n const userMessage = button.textContent;\n addMessage(userMessage, 'user');\n addMessage('', 'bot', true); \/\/ Muestra el indicador de \"escribiendo\"\n\n setTimeout(() => {\n const loadingBubble = document.getElementById('loading-bubble');\n if (loadingBubble) loadingBubble.parentElement.remove();\n \n const botResponse = demoResponses[userMessage];\n addMessage(botResponse, 'bot');\n }, 1200); \/\/ Retraso de 1.2 segundos para simular que est\u00e1 \"pensando\"\n });\n });\n\n \/\/ ==========================================================\n \/\/ ============ L\u00d3GICA AN\u00c1LISIS DE ACTIVIDAD (SIMULADO) =====\n \/\/ ==========================================================\n const analyzeActivityBtn = document.getElementById('analyze-activity-btn');\n const modal = document.getElementById('ai-analysis-modal');\n const closeModalBtn = document.getElementById('close-modal-btn');\n const modalContent = document.getElementById('modal-content');\n\n analyzeActivityBtn.addEventListener('click', async () => {\n modal.classList.remove('hidden');\n modalContent.innerHTML = '<div class=\"flex justify-center items-center h-48\"><div class=\"loader\"><\/div><\/div>'; \/\/ Show loader\n\n const analysisResult = `<strong>Puntos Clave:<\/strong><br>- Finalizaci\u00f3n de la cimentaci\u00f3n, un hito importante.<br>- Actualizaci\u00f3n del presupuesto de vigas, lo que sugiere un control financiero activo.<br><br><strong>Posibles Riesgos:<\/strong><br>- La <strong>alerta de retraso en el acero<\/strong> es cr\u00edtica y requiere atenci\u00f3n inmediata para evitar un efecto domin\u00f3 en el cronograma.`;\n\n \/\/ Simular un peque\u00f1o retraso para la respuesta del an\u00e1lisis\n setTimeout(() => {\n modalContent.innerHTML = `<div class=\"prose max-w-none\">${analysisResult}<\/div>`;\n }, 1500);\n });\n\n closeModalBtn.addEventListener('click', () => {\n modal.classList.add('hidden');\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Dashboard | Build-AI Predictiva Build-AI An\u00e1lisis Predictivo Dashboard Presupuesto Cronograma Riesgos Equipo Miguel Angulo Arquitecto Asesor Cerrar Sesi\u00f3n Hola, Miguel! […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"ast-content-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-opacity":"","overlay-gradient":""},"tablet":{"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-opacity":"","overlay-gradient":""},"mobile":{"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-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":5,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}