Dashboard Ejecutivo: Proyecto Boda en Ushuaia<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: #F8FAF9; \/* Soft warm neutral *\/\n color: #1E293B;\n }\n\n h1, h2, h3, .font-serif {\n font-family: 'Playfair Display', serif;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n\n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out, padding 0.3s ease;\n }\n \n .accordion-content.active {\n max-height: 1000px; \/* Arbitrary large number for expansion *\/\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n }\n <\/style>\n\n \n \n \n\n \n\n \n<\/head>\n<body class=\"antialiased pb-12\">\n\n \n <header class=\"bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n <div>\n <h1 class=\"text-3xl font-serif text-slate-800 tracking-tight\">\ud83d\udc8d Boda en el Fin del Mundo<\/h1>\n <p class=\"text-sm text-slate-500 mt-1\">Panel de Control del Proyecto – Ushuaia, Argentina<\/p>\n <\/div>\n <div class=\"flex gap-4\">\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Presupuesto<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">US$ 25k<\/span>\n <\/div>\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Invitados<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">Max 35<\/span>\n <\/div>\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Esfuerzo<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">240 Hrs<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 space-y-8\">\n \n \n <section class=\"mb-8\">\n <p class=\"text-lg text-slate-600 leading-relaxed max-w-4xl\">\n Bienvenido al panel interactivo de gesti\u00f3n del proyecto <strong>\u00abBoda en Ushuaia\u00bb<\/strong>. Esta aplicaci\u00f3n consolida el Acta de Constituci\u00f3n (Project Charter), la Estructura de Desglose del Trabajo (EDT\/WBS) y el cronograma de esfuerzo. Utilice este panel para explorar los objetivos estrat\u00e9gicos, navegar por las tareas log\u00edsticas necesarias en Argentina, y monitorear la distribuci\u00f3n del presupuesto y las horas de trabajo.\n <\/p>\n <\/section>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\n \n \n <div class=\"lg:col-span-7 space-y-8\">\n \n \n <section class=\"glass-card rounded-2xl p-6\">\n <h2 class=\"text-2xl font-serif text-slate-800 mb-2\">1. Visi\u00f3n Estrat\u00e9gica (Project Charter)<\/h2>\n <p class=\"text-sm text-slate-600 mb-6\">\n Esta secci\u00f3n resume los par\u00e1metros fundamentales que rigen el proyecto. Define el porqu\u00e9 del evento, los roles principales y las restricciones inamovibles (presupuesto y capacidad). Interact\u00fae con las tarjetas para revelar los detalles.\n <\/p>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-just')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83c\udfaf<\/span>\n <h3 class=\"font-semibold text-slate-800\">Justificaci\u00f3n<\/h3>\n <\/div>\n <p class=\"text-sm text-slate-600 line-clamp-2 group-hover:line-clamp-none transition-all\" id=\"charter-just\">\n Celebrar el matrimonio en un destino exclusivo (Ushuaia) para gestionar diplom\u00e1ticamente la lista de invitados. La novia tiene 600 compromisos en Caracas; el viaje al exterior restringe naturalmente la asistencia al c\u00edrculo m\u00e1s \u00edntimo (35 personas), manteniendo la elegancia y controlando costos.\n <\/p>\n <\/div>\n \n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-alcance')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83d\udccb<\/span>\n <h3 class=\"font-semibold text-slate-800\">Alcance General<\/h3>\n <\/div>\n <p class=\"text-sm text-slate-600 line-clamp-2 group-hover:line-clamp-none transition-all\" id=\"charter-alcance\">\n Organizaci\u00f3n integral: ceremonia religiosa, recepci\u00f3n \u00edntima y excursi\u00f3n tur\u00edstica (Canal Beagle o Parque Nacional). Incluye gesti\u00f3n de viajes, alojamiento, honorarios de planificaci\u00f3n y todos los gastos asociados dentro del l\u00edmite presupuestario.\n <\/p>\n <\/div>\n\n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-roles')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83d\udc65<\/span>\n <h3 class=\"font-semibold text-slate-800\">Roles Clave<\/h3>\n <\/div>\n <div class=\"text-sm text-slate-600 hidden group-hover:block transition-all mt-2\" id=\"charter-roles\">\n <ul class=\"list-disc pl-4 space-y-1\">\n <li><strong>Patrocinador:<\/strong> T\u00eda de la Novia (Financiamiento).<\/li>\n <li><strong>Director de Proyecto:<\/strong> PMO \/ Novios (Planificaci\u00f3n).<\/li>\n <li><strong>Wedding Planner Local:<\/strong> Por contratar en Ushuaia (Ejecuci\u00f3n).<\/li>\n <\/ul>\n <\/div>\n <p class=\"text-sm text-slate-500 block group-hover:hidden\">Haga clic para ver roles…<\/p>\n <\/div>\n\n <div class=\"bg-amber-50 p-5 rounded-xl border border-amber-200 hover:border-amber-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-riesgos')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\u26a0\ufe0f<\/span>\n <h3 class=\"font-semibold text-amber-800\">Restricciones Principales<\/h3>\n <\/div>\n <div class=\"text-sm text-amber-700 hidden group-hover:block transition-all mt-2\" id=\"charter-riesgos\">\n <ul class=\"list-disc pl-4 space-y-1\">\n <li>Presupuesto estricto: US$ 25,000.<\/li>\n <li>Lista de invitados bloqueada en 35 personas.<\/li>\n <li>Dependencia cr\u00edtica de tr\u00e1mites legales y permisos eclesi\u00e1sticos internacionales.<\/li>\n <\/ul>\n <\/div>\n <p class=\"text-sm text-amber-600 block group-hover:hidden\">Haga clic para ver restricciones…<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"glass-card rounded-2xl p-6\">\n <h2 class=\"text-2xl font-serif text-slate-800 mb-2\">2. Estructura de Desglose del Trabajo (EDT)<\/h2>\n <p class=\"text-sm text-slate-600 mb-6\">\n Explore la jerarqu\u00eda de entregables del proyecto. Haga clic en cada fase principal (Nivel 1) para desplegar los paquetes de trabajo (Nivel 2 y 3) requeridos para ejecutar la boda de manera exitosa en el extranjero.\n <\/p>\n \n <div id=\"wbs-container\" class=\"space-y-3\">\n \n <\/div>\n <\/section>\n\n <\/div>\n\n \n <div class=\"lg:col-span-5 space-y-8\">\n \n \n <section class=\"glass-card rounded-2xl p-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <h2 class=\"text-2xl font-serif text-slate-800\">3. An\u00e1lisis de Esfuerzo<\/h2>\n <span class=\"text-2xl\">\u23f1\ufe0f<\/span>\n <\/div>\n <p class=\"text-sm text-slate-600 mb-4\">\n Distribuci\u00f3n de las ~240 horas de trabajo estimadas (PERT\/CPM) por fase del proyecto. Observe c\u00f3mo la fase de \u00abTr\u00e1mites Legales\u00bb consume la mayor cantidad de tiempo debido a la burocracia internacional. Pase el cursor para ver detalles.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"effortChart\"><\/canvas>\n <\/div>\n \n <div class=\"mt-4 p-4 bg-slate-50 rounded-lg text-sm text-slate-600 border border-slate-200\">\n <strong>Hito Cr\u00edtico:<\/strong> La Reserva de Locaciones (26 hrs) es el nodo central. No se pueden iniciar compras de vuelos ni catering sin esta confirmaci\u00f3n.\n <\/div>\n <\/section>\n\n \n <section class=\"glass-card rounded-2xl p-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <h2 class=\"text-2xl font-serif text-slate-800\">4. Proyecci\u00f3n Financiera<\/h2>\n <span class=\"text-2xl\">\ud83d\udcb0<\/span>\n <\/div>\n <p class=\"text-sm text-slate-600 mb-4\">\n Estimaci\u00f3n de la distribuci\u00f3n del presupuesto de US$ 25,000. Interact\u00fae con la leyenda para filtrar categor\u00edas. El control estricto de la porci\u00f3n de \u00abLog\u00edstica y Viajes\u00bb es vital por la fluctuaci\u00f3n de precios.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"budgetChart\"><\/canvas>\n <\/div>\n\n <div class=\"mt-4 flex flex-col gap-2\">\n <button onclick=\"highlightBudget('Viajes')\" class=\"text-left text-sm px-3 py-2 bg-white border border-slate-200 rounded hover:bg-slate-50 transition-colors\">\n \ud83d\udd0d Enfocar: Log\u00edstica y Viajes\n <\/button>\n <button onclick=\"resetBudget()\" class=\"text-left text-sm px-3 py-2 bg-white border border-slate-200 rounded hover:bg-slate-50 transition-colors\">\n \ud83d\udd04 Restaurar Vista Original\n <\/button>\n <\/div>\n <\/section>\n\n <\/div>\n <\/div>\n <\/main>\n\n \n <script>\n \/\/ --- State & Data Management ---\n \n \/\/ Data derived from the provided WBS CSV\n const wbsData = [\n {\n id: \"1.1\",\n title: \"Gesti\u00f3n del Proyecto\",\n desc: \"Gesti\u00f3n integral, comunicaciones, riesgos y equipo.\",\n tasks: [\n \"1.1.1 Plan de Gesti\u00f3n del Proyecto\",\n \"1.1.2 Conformaci\u00f3n del Equipo (Wedding Planner local)\",\n \"1.1.3 Gesti\u00f3n de Comunicaciones\",\n \"1.1.4 Gesti\u00f3n de Riesgos\",\n \"1.1.5 Aprobaciones y Patrocinio\"\n ]\n },\n {\n id: \"1.2\",\n title: \"Planificaci\u00f3n del Evento\",\n desc: \"Definici\u00f3n de alcance, plan maestro, locaciones y permisos.\",\n tasks: [\n \"1.2.1 Definici\u00f3n del Alcance Detallado\",\n \"1.2.2 Dise\u00f1o del Plan Maestro de Boda\",\n \"1.2.3 Selecci\u00f3n y Reserva de Locaciones\",\n \"1.2.4 Gesti\u00f3n de Permisos Eclesi\u00e1sticos\"\n ]\n },\n {\n id: \"1.3\",\n title: \"Log\u00edstica y Viajes\",\n desc: \"Transporte y alojamiento para invitados y novios.\",\n tasks: [\n \"1.3.1 Plan de Viajes y Transporte\",\n \"1.3.2 Reserva de Alojamiento\",\n \"1.3.3 Coordinaci\u00f3n de Traslados Locales\",\n \"1.3.4 Asistencia al Viajero\"\n ]\n },\n {\n id: \"1.4 & 1.5\",\n title: \"Proveedores y Ejecuci\u00f3n\",\n desc: \"Catering, decoraci\u00f3n, foto, ceremonia y recepci\u00f3n.\",\n tasks: [\n \"1.4.1 Servicio de Catering y Bebidas\",\n \"1.4.2 Decoraci\u00f3n y Ambientaci\u00f3n\",\n \"1.4.3 Fotograf\u00eda y Videograf\u00eda\",\n \"1.5.1 Ensayo y Preparativos\",\n \"1.5.2 Ceremonia Religiosa\",\n \"1.5.3 Recepci\u00f3n y Fiesta\"\n ]\n },\n {\n id: \"1.6 & 1.7\",\n title: \"Turismo y Control Financiero\",\n desc: \"Excursi\u00f3n Canal Beagle, pagos y auditor\u00eda de presupuesto.\",\n tasks: [\n \"1.6.1 Selecci\u00f3n de Actividad Tur\u00edstica\",\n \"1.6.2 Coordinaci\u00f3n de Proveedor\",\n \"1.7.1 Plan de Control de Presupuesto\",\n \"1.7.3 Registro y Seguimiento de Pagos\"\n ]\n }\n ];\n\n let chartInstances = {};\n\n \/\/ --- Core Interaction Handling ---\n\n \/\/ Simple text toggler for Charter cards\n function toggleDetails(elementId) {\n const el = document.getElementById(elementId);\n if (el.classList.contains('hidden')) {\n el.classList.remove('hidden');\n } else if (el.classList.contains('line-clamp-2')) {\n el.classList.remove('line-clamp-2');\n } else {\n \/\/ Revert based on original state\n if(elementId.includes('roles') || elementId.includes('riesgos')) {\n el.classList.add('hidden');\n } else {\n el.classList.add('line-clamp-2');\n }\n }\n }\n\n \/\/ Accordion WBS Builder\n function renderWBS() {\n const container = document.getElementById('wbs-container');\n \n wbsData.forEach((phase, index) => {\n const isFirst = index === 0;\n \n const itemHTML = `\n <div class=\"border border-slate-200 rounded-lg bg-white overflow-hidden\">\n <button class=\"w-full text-left px-5 py-4 bg-slate-50 hover:bg-slate-100 flex justify-between items-center transition-colors focus:outline-none\" onclick=\"toggleAccordion('wbs-content-${index}', 'wbs-icon-${index}')\">\n <div>\n <span class=\"text-sm font-bold text-slate-500 mr-2\">${phase.id}<\/span>\n <span class=\"font-semibold text-slate-800\">${phase.title}<\/span>\n <\/div>\n <span id=\"wbs-icon-${index}\" class=\"text-slate-400 transform transition-transform duration-300 ${isFirst ? 'rotate-180' : ''}\">\u25bc<\/span>\n <\/button>\n \n <div id=\"wbs-content-${index}\" class=\"accordion-content ${isFirst ? 'active' : ''} bg-white px-5\">\n <p class=\"text-sm text-slate-500 italic mb-3 pb-2 border-b border-slate-100\">${phase.desc}<\/p>\n <ul class=\"space-y-2 mb-2\">\n ${phase.tasks.map(task => `\n <li class=\"flex items-start\">\n <span class=\"text-slate-300 mr-2\">\u25aa<\/span>\n <span class=\"text-sm text-slate-700\">${task}<\/span>\n <\/li>\n `).join('')}\n <\/ul>\n <\/div>\n <\/div>\n `;\n container.innerHTML += itemHTML;\n });\n }\n\n function toggleAccordion(contentId, iconId) {\n const content = document.getElementById(contentId);\n const icon = document.getElementById(iconId);\n \n \/\/ Toggle active class for height transition\n if (content.classList.contains('active')) {\n content.classList.remove('active');\n icon.classList.remove('rotate-180');\n } else {\n content.classList.add('active');\n icon.classList.add('rotate-180');\n }\n }\n\n \/\/ --- Chart Generation (Chart.js) ---\n\n function initCharts() {\n \/\/ Data extracted from PERT\/CPM Context\n const effortCtx = document.getElementById('effortChart').getContext('2d');\n \n chartInstances.effort = new Chart(effortCtx, {\n type: 'bar',\n data: {\n labels: ['Gesti\u00f3n & Plan', 'Locaciones', 'Tr\u00e1mites Legales', 'Log\u00edstica\/Viajes', 'Proveedores'],\n datasets: [{\n label: 'Horas Estimadas',\n data: [46, 36, 70, 47, 32], \/\/ Sum of hours from context\n backgroundColor: '#64748B', \/\/ Slate 500\n borderRadius: 4,\n hoverBackgroundColor: '#475569'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false, \/\/ CRITICAL for chart-container limits\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.raw + ' Horas totales de esfuerzo';\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n grid: { color: '#F1F5F9' },\n title: { display: true, text: 'Horas' }\n },\n x: {\n grid: { display: false }\n }\n }\n }\n });\n\n \/\/ Budget Mockup Data (Typical Destination Wedding Split)\n const budgetCtx = document.getElementById('budgetChart').getContext('2d');\n \n chartInstances.budget = new Chart(budgetCtx, {\n type: 'doughnut',\n data: {\n labels: ['Locaci\u00f3n y Catering', 'Vuelos y Alojamiento', 'Wedding Planner', 'Decoraci\u00f3n y Foto', 'Imprevistos\/Otros'],\n datasets: [{\n data: [10000, 7500, 2500, 2500, 2500], \/\/ Total $25k\n backgroundColor: [\n '#475569', \/\/ Slate 600\n '#94A3B8', \/\/ Slate 400\n '#CBD5E1', \/\/ Slate 300\n '#E2E8F0', \/\/ Slate 200\n '#F1F5F9' \/\/ Slate 100\n ],\n borderWidth: 2,\n borderColor: '#ffffff',\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '65%',\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n padding: 20,\n font: { family: 'Inter', size: 12 },\n usePointStyle: true\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n const value = context.raw || 0;\n const percentage = ((value \/ 25000) * 100).toFixed(0);\n return ` $${value.toLocaleString()} (${percentage}%)`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Interaction connecting HTML buttons to Chart JS instance\n function highlightBudget(categoryName) {\n const chart = chartInstances.budget;\n const targetIndex = 1; \/\/ 'Vuelos y Alojamiento'\n \n \/\/ Dim all except target\n const newBgColors = chart.data.datasets[0].backgroundColor.map((color, i) => {\n return i === targetIndex ? '#475569' : '#F1F5F9';\n });\n \n chart.data.datasets[0].backgroundColor = newBgColors;\n chart.update();\n }\n\n function resetBudget() {\n const chart = chartInstances.budget;\n chart.data.datasets[0].backgroundColor = [\n '#475569', '#94A3B8', '#CBD5E1', '#E2E8F0', '#F1F5F9'\n ];\n chart.update();\n }\n\n \/\/ Initialize App\n window.onload = () => {\n renderWBS();\n initCharts();\n };\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Cronograma Interactivo – Boda Ushuaia<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&display=swap');\n body { font-family: 'Inter', sans-serif; background-color: #f4f7f6; }\n .node { transition: all 0.3s ease; }\n .node:hover { transform: scale(1.05); filter: brightness(1.1); }\n .connector { border-left: 2px dashed #cbd5e1; margin-left: 1.5rem; height: 20px; }\n .critical-path { border-color: #f87171 !important; color: #b91c1c !important; font-weight: 600; }\n <\/style>\n \n \n \n \n \n<\/head>\n<body class=\"p-4 md:p-8\">\n\n <div class=\"max-w-4xl mx-auto\">\n <header class=\"mb-8 border-b pb-4\">\n <h1 class=\"text-3xl font-bold text-slate-800\">Visualizador de Red PERT\/CPM<\/h1>\n <p class=\"text-slate-600 italic\">Proyecto: Boda en Ushuaia | Planificaci\u00f3n Senior PMO<\/p>\n <\/header>\n\n <section class=\"mb-6 flex gap-4\">\n <div class=\"flex items-center gap-2 text-sm\"><span class=\"w-3 h-3 bg-blue-100 border border-blue-400 rounded\"><\/span> Secuencia Est\u00e1ndar<\/div>\n <div class=\"flex items-center gap-2 text-sm\"><span class=\"w-3 h-3 bg-red-100 border border-red-400 rounded\"><\/span> Ruta Cr\u00edtica (Log\u00edstica)<\/div>\n <\/section>\n\n \n <div class=\"space-y-0\" id=\"flow-container\">\n \n <\/div>\n\n <footer class=\"mt-12 p-4 bg-slate-800 text-white rounded-xl text-center\">\n <p class=\"text-sm\">Total Esfuerzo Estimado: <strong>240 Horas<\/strong><\/p>\n <p class=\"text-xs text-slate-400 mt-1\">Generado por el Experto en Planificaci\u00f3n de Proyectos<\/p>\n <\/footer>\n <\/div>\n\n <script>\n const actividades = [\n { id: \"A1.1\", nombre: \"Definir TdR Wedding Planner\", hrs: 8, recurso: \"Director\/Novios\", critica: false },\n { id: \"A1.2\", nombre: \"Selecci\u00f3n de Wedding Planner\", hrs: 16, recurso: \"Director\/Patrocinador\", critica: false },\n { id: \"A1.3\", nombre: \"Contrataci\u00f3n y Anticipo\", hrs: 4, recurso: \"Patrocinador\", critica: false },\n { id: \"A2.1\", nombre: \"Confirmaci\u00f3n Lista Invitados\", hrs: 12, recurso: \"Novios\", critica: true },\n { id: \"A2.3\", nombre: \"B\u00fasqueda de Locaciones\", hrs: 20, recurso: \"Wedding Planner\", critica: true },\n { id: \"A2.4\", nombre: \"Reserva de Locaciones (HITO)\", hrs: 6, recurso: \"Patrocinador\", critica: true },\n { id: \"A5.1\", nombre: \"Contrataci\u00f3n Catering\/Men\u00fa\", hrs: 12, recurso: \"Wedding Planner\", critica: true },\n { id: \"A4.2\", nombre: \"Compra de Boletos A\u00e9reos\", hrs: 24, recurso: \"Patrocinador\", critica: false },\n { id: \"A3.2\", nombre: \"Tr\u00e1mites Legales (Apostillas)\", hrs: 40, recurso: \"Gestor Legal\", critica: false }\n ];\n\n function renderFlow() {\n const container = document.getElementById('flow-container');\n actividades.forEach((act, index) => {\n const isLast = index === actividades.length - 1;\n const bgColor = act.critica ? 'bg-red-50 border-red-200' : 'bg-white border-slate-200';\n const textColor = act.critica ? 'text-red-800' : 'text-slate-800';\n const labelColor = act.critica ? 'bg-red-500' : 'bg-slate-500';\n\n const card = `\n <div class=\"node flex items-start gap-4\">\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 ${labelColor} text-white rounded-full flex items-center justify-center text-xs font-bold z-10 shadow-md\">\n ${act.id}\n <\/div>\n ${!isLast ? '<div class=\"connector\"><\/div>' : ''}\n <\/div>\n <div class=\"flex-1 mb-6 p-4 border rounded-xl shadow-sm ${bgColor} ${act.critica ? 'ring-1 ring-red-400' : ''}\">\n <div class=\"flex justify-between items-start\">\n <h3 class=\"font-bold ${textColor}\">${act.nombre}<\/h3>\n <span class=\"text-xs font-mono bg-white px-2 py-1 rounded border shadow-inner\">${act.hrs}h<\/span>\n <\/div>\n <div class=\"mt-2 flex justify-between items-center text-xs text-slate-500\">\n <span>Responsable: <strong>${act.recurso}<\/strong><\/span>\n ${act.critica ? '<span class=\"text-red-600 font-bold uppercase tracking-tighter\">Ruta Cr\u00edtica<\/span>' : ''}\n <\/div>\n <\/div>\n <\/div>\n `;\n container.innerHTML += card;\n });\n }\n\n window.onload = renderFlow;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dashboard Ejecutivo: Proyecto Boda en Ushuaia \ud83d\udc8d Boda en el Fin del Mundo Panel de Control del Proyecto – Ushuaia, Argentina Presupuesto US$ 25k Invitados Max 35 Esfuerzo 240 Hrs Bienvenido al panel interactivo de gesti\u00f3n del proyecto \u00abBoda en Ushuaia\u00bb. Esta aplicaci\u00f3n consolida el Acta de Constituci\u00f3n (Project Charter), la Estructura de Desglose del […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":2,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":24,"date":"2026-03-07T00:27:08","date_gmt":"2026-03-07T00:27:08","guid":{"rendered":"https:\/\/cursos.sylosconsultoria.com\/?p=24"},"modified":"2026-03-07T00:32:38","modified_gmt":"2026-03-07T00:32:38","slug":"dia2-ej5","status":"publish","type":"post","link":"https:\/\/cursos.sylosconsultoria.com\/index.php\/2026\/03\/07\/dia2-ej5\/","title":{"rendered":"Cronograma – Gemini"},"content":{"rendered":"\n\n\n\n \n \n Dashboard Ejecutivo: Proyecto Boda en Ushuaia<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: #F8FAF9; \/* Soft warm neutral *\/\n color: #1E293B;\n }\n\n h1, h2, h3, .font-serif {\n font-family: 'Playfair Display', serif;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n\n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out, padding 0.3s ease;\n }\n \n .accordion-content.active {\n max-height: 1000px; \/* Arbitrary large number for expansion *\/\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n }\n <\/style>\n\n \n \n \n\n \n\n \n<\/head>\n<body class=\"antialiased pb-12\">\n\n \n <header class=\"bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n <div>\n <h1 class=\"text-3xl font-serif text-slate-800 tracking-tight\">\ud83d\udc8d Boda en el Fin del Mundo<\/h1>\n <p class=\"text-sm text-slate-500 mt-1\">Panel de Control del Proyecto – Ushuaia, Argentina<\/p>\n <\/div>\n <div class=\"flex gap-4\">\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Presupuesto<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">US$ 25k<\/span>\n <\/div>\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Invitados<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">Max 35<\/span>\n <\/div>\n <div class=\"text-center px-4 py-2 bg-slate-50 rounded-lg border border-slate-100\">\n <span class=\"block text-xs text-slate-500 uppercase font-semibold\">Esfuerzo<\/span>\n <span class=\"block text-lg font-bold text-slate-800\">240 Hrs<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 space-y-8\">\n \n \n <section class=\"mb-8\">\n <p class=\"text-lg text-slate-600 leading-relaxed max-w-4xl\">\n Bienvenido al panel interactivo de gesti\u00f3n del proyecto <strong>\u00abBoda en Ushuaia\u00bb<\/strong>. Esta aplicaci\u00f3n consolida el Acta de Constituci\u00f3n (Project Charter), la Estructura de Desglose del Trabajo (EDT\/WBS) y el cronograma de esfuerzo. Utilice este panel para explorar los objetivos estrat\u00e9gicos, navegar por las tareas log\u00edsticas necesarias en Argentina, y monitorear la distribuci\u00f3n del presupuesto y las horas de trabajo.\n <\/p>\n <\/section>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\n \n \n <div class=\"lg:col-span-7 space-y-8\">\n \n \n <section class=\"glass-card rounded-2xl p-6\">\n <h2 class=\"text-2xl font-serif text-slate-800 mb-2\">1. Visi\u00f3n Estrat\u00e9gica (Project Charter)<\/h2>\n <p class=\"text-sm text-slate-600 mb-6\">\n Esta secci\u00f3n resume los par\u00e1metros fundamentales que rigen el proyecto. Define el porqu\u00e9 del evento, los roles principales y las restricciones inamovibles (presupuesto y capacidad). Interact\u00fae con las tarjetas para revelar los detalles.\n <\/p>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-just')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83c\udfaf<\/span>\n <h3 class=\"font-semibold text-slate-800\">Justificaci\u00f3n<\/h3>\n <\/div>\n <p class=\"text-sm text-slate-600 line-clamp-2 group-hover:line-clamp-none transition-all\" id=\"charter-just\">\n Celebrar el matrimonio en un destino exclusivo (Ushuaia) para gestionar diplom\u00e1ticamente la lista de invitados. La novia tiene 600 compromisos en Caracas; el viaje al exterior restringe naturalmente la asistencia al c\u00edrculo m\u00e1s \u00edntimo (35 personas), manteniendo la elegancia y controlando costos.\n <\/p>\n <\/div>\n \n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-alcance')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83d\udccb<\/span>\n <h3 class=\"font-semibold text-slate-800\">Alcance General<\/h3>\n <\/div>\n <p class=\"text-sm text-slate-600 line-clamp-2 group-hover:line-clamp-none transition-all\" id=\"charter-alcance\">\n Organizaci\u00f3n integral: ceremonia religiosa, recepci\u00f3n \u00edntima y excursi\u00f3n tur\u00edstica (Canal Beagle o Parque Nacional). Incluye gesti\u00f3n de viajes, alojamiento, honorarios de planificaci\u00f3n y todos los gastos asociados dentro del l\u00edmite presupuestario.\n <\/p>\n <\/div>\n\n <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200 hover:border-slate-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-roles')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\ud83d\udc65<\/span>\n <h3 class=\"font-semibold text-slate-800\">Roles Clave<\/h3>\n <\/div>\n <div class=\"text-sm text-slate-600 hidden group-hover:block transition-all mt-2\" id=\"charter-roles\">\n <ul class=\"list-disc pl-4 space-y-1\">\n <li><strong>Patrocinador:<\/strong> T\u00eda de la Novia (Financiamiento).<\/li>\n <li><strong>Director de Proyecto:<\/strong> PMO \/ Novios (Planificaci\u00f3n).<\/li>\n <li><strong>Wedding Planner Local:<\/strong> Por contratar en Ushuaia (Ejecuci\u00f3n).<\/li>\n <\/ul>\n <\/div>\n <p class=\"text-sm text-slate-500 block group-hover:hidden\">Haga clic para ver roles…<\/p>\n <\/div>\n\n <div class=\"bg-amber-50 p-5 rounded-xl border border-amber-200 hover:border-amber-400 transition-colors cursor-pointer group\" onclick=\"toggleDetails('charter-riesgos')\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xl\">\u26a0\ufe0f<\/span>\n <h3 class=\"font-semibold text-amber-800\">Restricciones Principales<\/h3>\n <\/div>\n <div class=\"text-sm text-amber-700 hidden group-hover:block transition-all mt-2\" id=\"charter-riesgos\">\n <ul class=\"list-disc pl-4 space-y-1\">\n <li>Presupuesto estricto: US$ 25,000.<\/li>\n <li>Lista de invitados bloqueada en 35 personas.<\/li>\n <li>Dependencia cr\u00edtica de tr\u00e1mites legales y permisos eclesi\u00e1sticos internacionales.<\/li>\n <\/ul>\n <\/div>\n <p class=\"text-sm text-amber-600 block group-hover:hidden\">Haga clic para ver restricciones…<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"glass-card rounded-2xl p-6\">\n <h2 class=\"text-2xl font-serif text-slate-800 mb-2\">2. Estructura de Desglose del Trabajo (EDT)<\/h2>\n <p class=\"text-sm text-slate-600 mb-6\">\n Explore la jerarqu\u00eda de entregables del proyecto. Haga clic en cada fase principal (Nivel 1) para desplegar los paquetes de trabajo (Nivel 2 y 3) requeridos para ejecutar la boda de manera exitosa en el extranjero.\n <\/p>\n \n <div id=\"wbs-container\" class=\"space-y-3\">\n \n <\/div>\n <\/section>\n\n <\/div>\n\n \n <div class=\"lg:col-span-5 space-y-8\">\n \n \n <section class=\"glass-card rounded-2xl p-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <h2 class=\"text-2xl font-serif text-slate-800\">3. An\u00e1lisis de Esfuerzo<\/h2>\n <span class=\"text-2xl\">\u23f1\ufe0f<\/span>\n <\/div>\n <p class=\"text-sm text-slate-600 mb-4\">\n Distribuci\u00f3n de las ~240 horas de trabajo estimadas (PERT\/CPM) por fase del proyecto. Observe c\u00f3mo la fase de \u00abTr\u00e1mites Legales\u00bb consume la mayor cantidad de tiempo debido a la burocracia internacional. Pase el cursor para ver detalles.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"effortChart\"><\/canvas>\n <\/div>\n \n <div class=\"mt-4 p-4 bg-slate-50 rounded-lg text-sm text-slate-600 border border-slate-200\">\n <strong>Hito Cr\u00edtico:<\/strong> La Reserva de Locaciones (26 hrs) es el nodo central. No se pueden iniciar compras de vuelos ni catering sin esta confirmaci\u00f3n.\n <\/div>\n <\/section>\n\n \n <section class=\"glass-card rounded-2xl p-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <h2 class=\"text-2xl font-serif text-slate-800\">4. Proyecci\u00f3n Financiera<\/h2>\n <span class=\"text-2xl\">\ud83d\udcb0<\/span>\n <\/div>\n <p class=\"text-sm text-slate-600 mb-4\">\n Estimaci\u00f3n de la distribuci\u00f3n del presupuesto de US$ 25,000. Interact\u00fae con la leyenda para filtrar categor\u00edas. El control estricto de la porci\u00f3n de \u00abLog\u00edstica y Viajes\u00bb es vital por la fluctuaci\u00f3n de precios.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"budgetChart\"><\/canvas>\n <\/div>\n\n <div class=\"mt-4 flex flex-col gap-2\">\n <button onclick=\"highlightBudget('Viajes')\" class=\"text-left text-sm px-3 py-2 bg-white border border-slate-200 rounded hover:bg-slate-50 transition-colors\">\n \ud83d\udd0d Enfocar: Log\u00edstica y Viajes\n <\/button>\n <button onclick=\"resetBudget()\" class=\"text-left text-sm px-3 py-2 bg-white border border-slate-200 rounded hover:bg-slate-50 transition-colors\">\n \ud83d\udd04 Restaurar Vista Original\n <\/button>\n <\/div>\n <\/section>\n\n <\/div>\n <\/div>\n <\/main>\n\n \n <script>\n \/\/ --- State & Data Management ---\n \n \/\/ Data derived from the provided WBS CSV\n const wbsData = [\n {\n id: \"1.1\",\n title: \"Gesti\u00f3n del Proyecto\",\n desc: \"Gesti\u00f3n integral, comunicaciones, riesgos y equipo.\",\n tasks: [\n \"1.1.1 Plan de Gesti\u00f3n del Proyecto\",\n \"1.1.2 Conformaci\u00f3n del Equipo (Wedding Planner local)\",\n \"1.1.3 Gesti\u00f3n de Comunicaciones\",\n \"1.1.4 Gesti\u00f3n de Riesgos\",\n \"1.1.5 Aprobaciones y Patrocinio\"\n ]\n },\n {\n id: \"1.2\",\n title: \"Planificaci\u00f3n del Evento\",\n desc: \"Definici\u00f3n de alcance, plan maestro, locaciones y permisos.\",\n tasks: [\n \"1.2.1 Definici\u00f3n del Alcance Detallado\",\n \"1.2.2 Dise\u00f1o del Plan Maestro de Boda\",\n \"1.2.3 Selecci\u00f3n y Reserva de Locaciones\",\n \"1.2.4 Gesti\u00f3n de Permisos Eclesi\u00e1sticos\"\n ]\n },\n {\n id: \"1.3\",\n title: \"Log\u00edstica y Viajes\",\n desc: \"Transporte y alojamiento para invitados y novios.\",\n tasks: [\n \"1.3.1 Plan de Viajes y Transporte\",\n \"1.3.2 Reserva de Alojamiento\",\n \"1.3.3 Coordinaci\u00f3n de Traslados Locales\",\n \"1.3.4 Asistencia al Viajero\"\n ]\n },\n {\n id: \"1.4 & 1.5\",\n title: \"Proveedores y Ejecuci\u00f3n\",\n desc: \"Catering, decoraci\u00f3n, foto, ceremonia y recepci\u00f3n.\",\n tasks: [\n \"1.4.1 Servicio de Catering y Bebidas\",\n \"1.4.2 Decoraci\u00f3n y Ambientaci\u00f3n\",\n \"1.4.3 Fotograf\u00eda y Videograf\u00eda\",\n \"1.5.1 Ensayo y Preparativos\",\n \"1.5.2 Ceremonia Religiosa\",\n \"1.5.3 Recepci\u00f3n y Fiesta\"\n ]\n },\n {\n id: \"1.6 & 1.7\",\n title: \"Turismo y Control Financiero\",\n desc: \"Excursi\u00f3n Canal Beagle, pagos y auditor\u00eda de presupuesto.\",\n tasks: [\n \"1.6.1 Selecci\u00f3n de Actividad Tur\u00edstica\",\n \"1.6.2 Coordinaci\u00f3n de Proveedor\",\n \"1.7.1 Plan de Control de Presupuesto\",\n \"1.7.3 Registro y Seguimiento de Pagos\"\n ]\n }\n ];\n\n let chartInstances = {};\n\n \/\/ --- Core Interaction Handling ---\n\n \/\/ Simple text toggler for Charter cards\n function toggleDetails(elementId) {\n const el = document.getElementById(elementId);\n if (el.classList.contains('hidden')) {\n el.classList.remove('hidden');\n } else if (el.classList.contains('line-clamp-2')) {\n el.classList.remove('line-clamp-2');\n } else {\n \/\/ Revert based on original state\n if(elementId.includes('roles') || elementId.includes('riesgos')) {\n el.classList.add('hidden');\n } else {\n el.classList.add('line-clamp-2');\n }\n }\n }\n\n \/\/ Accordion WBS Builder\n function renderWBS() {\n const container = document.getElementById('wbs-container');\n \n wbsData.forEach((phase, index) => {\n const isFirst = index === 0;\n \n const itemHTML = `\n <div class=\"border border-slate-200 rounded-lg bg-white overflow-hidden\">\n <button class=\"w-full text-left px-5 py-4 bg-slate-50 hover:bg-slate-100 flex justify-between items-center transition-colors focus:outline-none\" onclick=\"toggleAccordion('wbs-content-${index}', 'wbs-icon-${index}')\">\n <div>\n <span class=\"text-sm font-bold text-slate-500 mr-2\">${phase.id}<\/span>\n <span class=\"font-semibold text-slate-800\">${phase.title}<\/span>\n <\/div>\n <span id=\"wbs-icon-${index}\" class=\"text-slate-400 transform transition-transform duration-300 ${isFirst ? 'rotate-180' : ''}\">\u25bc<\/span>\n <\/button>\n \n <div id=\"wbs-content-${index}\" class=\"accordion-content ${isFirst ? 'active' : ''} bg-white px-5\">\n <p class=\"text-sm text-slate-500 italic mb-3 pb-2 border-b border-slate-100\">${phase.desc}<\/p>\n <ul class=\"space-y-2 mb-2\">\n ${phase.tasks.map(task => `\n <li class=\"flex items-start\">\n <span class=\"text-slate-300 mr-2\">\u25aa<\/span>\n <span class=\"text-sm text-slate-700\">${task}<\/span>\n <\/li>\n `).join('')}\n <\/ul>\n <\/div>\n <\/div>\n `;\n container.innerHTML += itemHTML;\n });\n }\n\n function toggleAccordion(contentId, iconId) {\n const content = document.getElementById(contentId);\n const icon = document.getElementById(iconId);\n \n \/\/ Toggle active class for height transition\n if (content.classList.contains('active')) {\n content.classList.remove('active');\n icon.classList.remove('rotate-180');\n } else {\n content.classList.add('active');\n icon.classList.add('rotate-180');\n }\n }\n\n \/\/ --- Chart Generation (Chart.js) ---\n\n function initCharts() {\n \/\/ Data extracted from PERT\/CPM Context\n const effortCtx = document.getElementById('effortChart').getContext('2d');\n \n chartInstances.effort = new Chart(effortCtx, {\n type: 'bar',\n data: {\n labels: ['Gesti\u00f3n & Plan', 'Locaciones', 'Tr\u00e1mites Legales', 'Log\u00edstica\/Viajes', 'Proveedores'],\n datasets: [{\n label: 'Horas Estimadas',\n data: [46, 36, 70, 47, 32], \/\/ Sum of hours from context\n backgroundColor: '#64748B', \/\/ Slate 500\n borderRadius: 4,\n hoverBackgroundColor: '#475569'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false, \/\/ CRITICAL for chart-container limits\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.raw + ' Horas totales de esfuerzo';\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n grid: { color: '#F1F5F9' },\n title: { display: true, text: 'Horas' }\n },\n x: {\n grid: { display: false }\n }\n }\n }\n });\n\n \/\/ Budget Mockup Data (Typical Destination Wedding Split)\n const budgetCtx = document.getElementById('budgetChart').getContext('2d');\n \n chartInstances.budget = new Chart(budgetCtx, {\n type: 'doughnut',\n data: {\n labels: ['Locaci\u00f3n y Catering', 'Vuelos y Alojamiento', 'Wedding Planner', 'Decoraci\u00f3n y Foto', 'Imprevistos\/Otros'],\n datasets: [{\n data: [10000, 7500, 2500, 2500, 2500], \/\/ Total $25k\n backgroundColor: [\n '#475569', \/\/ Slate 600\n '#94A3B8', \/\/ Slate 400\n '#CBD5E1', \/\/ Slate 300\n '#E2E8F0', \/\/ Slate 200\n '#F1F5F9' \/\/ Slate 100\n ],\n borderWidth: 2,\n borderColor: '#ffffff',\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '65%',\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n padding: 20,\n font: { family: 'Inter', size: 12 },\n usePointStyle: true\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n const value = context.raw || 0;\n const percentage = ((value \/ 25000) * 100).toFixed(0);\n return ` $${value.toLocaleString()} (${percentage}%)`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Interaction connecting HTML buttons to Chart JS instance\n function highlightBudget(categoryName) {\n const chart = chartInstances.budget;\n const targetIndex = 1; \/\/ 'Vuelos y Alojamiento'\n \n \/\/ Dim all except target\n const newBgColors = chart.data.datasets[0].backgroundColor.map((color, i) => {\n return i === targetIndex ? '#475569' : '#F1F5F9';\n });\n \n chart.data.datasets[0].backgroundColor = newBgColors;\n chart.update();\n }\n\n function resetBudget() {\n const chart = chartInstances.budget;\n chart.data.datasets[0].backgroundColor = [\n '#475569', '#94A3B8', '#CBD5E1', '#E2E8F0', '#F1F5F9'\n ];\n chart.update();\n }\n\n \/\/ Initialize App\n window.onload = () => {\n renderWBS();\n initCharts();\n };\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Cronograma Interactivo – Boda Ushuaia<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&display=swap');\n body { font-family: 'Inter', sans-serif; background-color: #f4f7f6; }\n .node { transition: all 0.3s ease; }\n .node:hover { transform: scale(1.05); filter: brightness(1.1); }\n .connector { border-left: 2px dashed #cbd5e1; margin-left: 1.5rem; height: 20px; }\n .critical-path { border-color: #f87171 !important; color: #b91c1c !important; font-weight: 600; }\n <\/style>\n \n \n \n \n \n<\/head>\n<body class=\"p-4 md:p-8\">\n\n <div class=\"max-w-4xl mx-auto\">\n <header class=\"mb-8 border-b pb-4\">\n <h1 class=\"text-3xl font-bold text-slate-800\">Visualizador de Red PERT\/CPM<\/h1>\n <p class=\"text-slate-600 italic\">Proyecto: Boda en Ushuaia | Planificaci\u00f3n Senior PMO<\/p>\n <\/header>\n\n <section class=\"mb-6 flex gap-4\">\n <div class=\"flex items-center gap-2 text-sm\"><span class=\"w-3 h-3 bg-blue-100 border border-blue-400 rounded\"><\/span> Secuencia Est\u00e1ndar<\/div>\n <div class=\"flex items-center gap-2 text-sm\"><span class=\"w-3 h-3 bg-red-100 border border-red-400 rounded\"><\/span> Ruta Cr\u00edtica (Log\u00edstica)<\/div>\n <\/section>\n\n \n <div class=\"space-y-0\" id=\"flow-container\">\n \n <\/div>\n\n <footer class=\"mt-12 p-4 bg-slate-800 text-white rounded-xl text-center\">\n <p class=\"text-sm\">Total Esfuerzo Estimado: <strong>240 Horas<\/strong><\/p>\n <p class=\"text-xs text-slate-400 mt-1\">Generado por el Experto en Planificaci\u00f3n de Proyectos<\/p>\n <\/footer>\n <\/div>\n\n <script>\n const actividades = [\n { id: \"A1.1\", nombre: \"Definir TdR Wedding Planner\", hrs: 8, recurso: \"Director\/Novios\", critica: false },\n { id: \"A1.2\", nombre: \"Selecci\u00f3n de Wedding Planner\", hrs: 16, recurso: \"Director\/Patrocinador\", critica: false },\n { id: \"A1.3\", nombre: \"Contrataci\u00f3n y Anticipo\", hrs: 4, recurso: \"Patrocinador\", critica: false },\n { id: \"A2.1\", nombre: \"Confirmaci\u00f3n Lista Invitados\", hrs: 12, recurso: \"Novios\", critica: true },\n { id: \"A2.3\", nombre: \"B\u00fasqueda de Locaciones\", hrs: 20, recurso: \"Wedding Planner\", critica: true },\n { id: \"A2.4\", nombre: \"Reserva de Locaciones (HITO)\", hrs: 6, recurso: \"Patrocinador\", critica: true },\n { id: \"A5.1\", nombre: \"Contrataci\u00f3n Catering\/Men\u00fa\", hrs: 12, recurso: \"Wedding Planner\", critica: true },\n { id: \"A4.2\", nombre: \"Compra de Boletos A\u00e9reos\", hrs: 24, recurso: \"Patrocinador\", critica: false },\n { id: \"A3.2\", nombre: \"Tr\u00e1mites Legales (Apostillas)\", hrs: 40, recurso: \"Gestor Legal\", critica: false }\n ];\n\n function renderFlow() {\n const container = document.getElementById('flow-container');\n actividades.forEach((act, index) => {\n const isLast = index === actividades.length - 1;\n const bgColor = act.critica ? 'bg-red-50 border-red-200' : 'bg-white border-slate-200';\n const textColor = act.critica ? 'text-red-800' : 'text-slate-800';\n const labelColor = act.critica ? 'bg-red-500' : 'bg-slate-500';\n\n const card = `\n <div class=\"node flex items-start gap-4\">\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 ${labelColor} text-white rounded-full flex items-center justify-center text-xs font-bold z-10 shadow-md\">\n ${act.id}\n <\/div>\n ${!isLast ? '<div class=\"connector\"><\/div>' : ''}\n <\/div>\n <div class=\"flex-1 mb-6 p-4 border rounded-xl shadow-sm ${bgColor} ${act.critica ? 'ring-1 ring-red-400' : ''}\">\n <div class=\"flex justify-between items-start\">\n <h3 class=\"font-bold ${textColor}\">${act.nombre}<\/h3>\n <span class=\"text-xs font-mono bg-white px-2 py-1 rounded border shadow-inner\">${act.hrs}h<\/span>\n <\/div>\n <div class=\"mt-2 flex justify-between items-center text-xs text-slate-500\">\n <span>Responsable: <strong>${act.recurso}<\/strong><\/span>\n ${act.critica ? '<span class=\"text-red-600 font-bold uppercase tracking-tighter\">Ruta Cr\u00edtica<\/span>' : ''}\n <\/div>\n <\/div>\n <\/div>\n `;\n container.innerHTML += card;\n });\n }\n\n window.onload = renderFlow;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dashboard Ejecutivo: Proyecto Boda en Ushuaia \ud83d\udc8d Boda en el Fin del Mundo Panel de Control del Proyecto – Ushuaia, Argentina Presupuesto US$ 25k Invitados Max 35 Esfuerzo 240 Hrs Bienvenido al panel interactivo de gesti\u00f3n del proyecto \u00abBoda en Ushuaia\u00bb. Esta aplicaci\u00f3n consolida el Acta de Constituci\u00f3n (Project Charter), la Estructura de Desglose del […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":2,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursos.sylosconsultoria.com\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}