An\u00e1lisis Interactivo de Reputaci\u00f3n: Ayuntamiento de Conil<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc; \/* slate-50 *\/\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 40vh;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .nav-button {\n transition: all 0.3s ease;\n white-space: nowrap;\n background-color: #ffffff;\n color: #004369; \/* Custom Blue *\/\n padding: 0.625rem 1.25rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n }\n .nav-button:hover {\n background-color: #e0f2fe; \/* Light Blue *\/\n }\n .nav-button.active {\n background-color: #004369; \/* Custom Blue *\/\n color: #ffffff;\n font-weight: 600;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 2px #01949A; \/* Custom Teal Ring *\/\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .timeline-container {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px 0;\n }\n .timeline-container::after {\n content: '';\n position: absolute;\n width: 4px;\n background-color: #CBD5E1;\n top: 0;\n bottom: 0;\n left: 50%;\n margin-left: -2px;\n }\n .timeline-item {\n padding: 10px 40px;\n position: relative;\n background-color: inherit;\n width: 50%;\n }\n .timeline-item::after {\n content: '';\n position: absolute;\n width: 25px;\n height: 25px;\n right: -17px;\n background-color: #DB1F48; \/* Custom Red *\/\n border: 4px solid #ffffff;\n top: 15px;\n border-radius: 50%;\n z-index: 1;\n }\n .timeline-item.left { left: 0; }\n .timeline-item.right { left: 50%; }\n .timeline-item.left::after { left: 98.5%; }\n .timeline-item.right::after { left: -17px; }\n .timeline-content {\n padding: 20px 30px;\n background-color: #f1f5f9; \/* slate-100 *\/\n position: relative;\n border-radius: 6px;\n }\n @media screen and (max-width: 768px) {\n .timeline-container::after { left: 31px; }\n .timeline-item {\n width: 100%;\n padding-left: 70px;\n padding-right: 25px;\n box-sizing: border-box;\n }\n .timeline-item.right { left: 0%; }\n .timeline-item.left::after, .timeline-item.right::after { left: 15px; }\n }\n .progress-bar-container {\n width: 100%; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;\n }\n .progress-bar {\n height: 20px; border-radius: 5px; text-align: center; color: white; line-height: 20px; transition: width 0.5s ease-in-out;\n }\n .sentiment-gauge {\n width: 150px; height: 150px; border-radius: 50%; position: relative;\n background: conic-gradient(#DB1F48 0% 33%, #FBBF24 33% 66%, #01949A 66% 100%);\n display: flex; align-items: center; justify-content: center;\n }\n .sentiment-gauge-inner {\n width: 120px; height: 120px; border-radius: 50%; background-color: white;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.5rem; font-weight: bold; color: #333;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n \n <header class=\"text-center mb-8 flex flex-col items-center\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900\">An\u00e1lisis de Reputaci\u00f3n y Presencia Digital<\/h1>\n <h2 id=\"municipality-name\" class=\"text-xl md:text-2xl text-slate-600 mt-2\"><\/h2>\n <\/header>\n\n <nav class=\"flex flex-wrap justify-center gap-2 mb-4 bg-blue-50 p-2 rounded-lg shadow-sm overflow-x-auto pb-2\">\n <button data-target=\"balance\" class=\"nav-button active\">Balanza Reputacional<\/button>\n <button data-target=\"actores\" class=\"nav-button\">Mapa de Actores<\/button>\n <button data-target=\"alcaldesa\" class=\"nav-button\">Foco en la Alcaldesa<\/button>\n <button data-target=\"digital\" class=\"nav-button\">An\u00e1lisis Digital<\/button>\n <button data-target=\"timeline\" class=\"nav-button\">L\u00ednea de Tiempo<\/button>\n <button data-target=\"matriz-ro\" class=\"nav-button\">Matriz R&O<\/button>\n <button data-target=\"termometro\" class=\"nav-button\">Term\u00f3metro Ciudadano<\/button>\n <button data-target=\"posicionamiento\" class=\"nav-button\">Diagn\u00f3stico Posicionamiento<\/button>\n <button data-target=\"benchmarking\" class=\"nav-button\">Benchmarking<\/button>\n <button data-target=\"kpis\" class=\"nav-button\">Panel de KPIs<\/button>\n <button data-target=\"estrategia\" class=\"nav-button\">Estrategia y Narrativa<\/button>\n <button data-target=\"protocolo-crisis\" class=\"nav-button\">Protocolo Crisis<\/button>\n <button data-target=\"vocerias\" class=\"nav-button\">Foco en Vocer\u00edas<\/button>\n <button data-target=\"deportes\" class=\"nav-button\">Deportes en Conil<\/button>\n <button data-target=\"about\" class=\"nav-button\">Sobre Este An\u00e1lisis<\/button>\n <\/nav>\n\n <main>\n <section id=\"balance\" class=\"content-section active\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Balanza Reputacional: La Doble Cara de la Gesti\u00f3n en Conil<\/h3>\n <p id=\"balance-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n \n <div class=\"flex justify-center gap-4 mb-8\">\n <button id=\"btn-logros\" class=\"px-6 py-2 bg-emerald-500 text-white font-semibold rounded-lg shadow-md hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-all\">\u2705 Logros de Gesti\u00f3n<\/button>\n <button id=\"btn-riesgos\" class=\"px-6 py-2 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 transition-all\">\u26a0\ufe0f Riesgos Cr\u00edticos<\/button>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div id=\"info-display\" class=\"space-y-4\"><\/div>\n <div class=\"w-full\">\n <div class=\"chart-container\"><canvas id=\"reputationChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Gr\u00e1fico de sentimiento medi\u00e1tico estimado por tema.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Evoluci\u00f3n del Sentimiento (<span id=\"sentiment-trend-period\"><\/span>)<\/h4>\n <p id=\"sentiment-trend-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[450px]\"><canvas id=\"sentimentTrendChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento promedio mensual para logros y riesgos.<\/p>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Palabras Clave Destacadas<\/h4>\n <p class=\"text-center text-slate-600 mb-4 max-w-3xl mx-auto\">Conceptos m\u00e1s relevantes asociados a los temas seleccionados.<\/p>\n <div id=\"keywords-display\" class=\"flex flex-wrap justify-center gap-3 text-center\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"actores\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Mapa de Actores Clave en Conil<\/h3>\n <p id=\"actors-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"actor-cards-container\" class=\"grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10\"><\/div>\n \n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por \u00c1reas Municipales<\/h4>\n <p id=\"delegation-sentiment-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"delegationSentimentChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Valores de sentimiento para cada \u00e1rea.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"alcaldesa\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en la Alcaldesa: Inmaculada S\u00e1nchez Zara<\/h3>\n <p id=\"mayor-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div id=\"mayor-narrative\"><\/div>\n <div id=\"mayor-perception\"><\/div>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas Clave Asociados a la Alcaldesa<\/h4>\n <div id=\"mayor-keywords\" class=\"flex flex-wrap justify-center gap-3 text-center\"><\/div>\n <\/div>\n\n <div id=\"mayor-recommendations\" class=\"mt-8 pt-8 border-t border-gray-200\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"digital\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">An\u00e1lisis de la Presencia Digital en Conil<\/h3>\n <p id=\"digital-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"digital-content\" class=\"grid grid-cols-1 md:grid-cols-2 gap-8\"><\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por Tipo de Medio<\/h4>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"mediaSentimentChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">M\u00e9tricas de Engagement Digital<\/h4>\n <div class=\"chart-container h-[300px] md:h-[350px]\"><canvas id=\"engagementMetricsChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"timeline\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">L\u00ednea de Tiempo de Eventos Clave en Conil<\/h3>\n <p id=\"timeline-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\">\n <button data-filter=\"all\" class=\"timeline-filter-button active px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg text-sm hover:bg-indigo-100 transition-colors\">Todos<\/button>\n <button data-filter=\"Logro\" class=\"timeline-filter-button px-4 py-2 bg-emerald-100 rounded-lg text-sm hover:bg-emerald-200 transition-colors\">Logros<\/button>\n <button data-filter=\"Crisis\" class=\"timeline-filter-button px-4 py-2 bg-red-100 rounded-lg text-sm hover:bg-red-200 transition-colors\">Crisis<\/button>\n <button data-filter=\"Pol\u00edtica\" class=\"timeline-filter-button px-4 py-2 bg-purple-100 rounded-lg text-sm hover:bg-purple-200 transition-colors\">Pol\u00edtica<\/button>\n <button data-filter=\"Turismo\" class=\"timeline-filter-button px-4 py-2 bg-blue-100 rounded-lg text-sm hover:bg-blue-200 transition-colors\">Turismo<\/button>\n <\/div>\n <div class=\"timeline-container\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"matriz-ro\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Matriz de Riesgos y Oportunidades Narrativas en Conil<\/h3>\n <p id=\"matrix-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"bg-red-50 p-4 rounded-xl border border-red-200\">\n <h4 class=\"font-bold text-lg text-red-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udea8<\/span>Riesgos Cr\u00edticos<\/h4>\n <ul id=\"risks-list\" class=\"list-disc list-inside text-sm text-slate-700 space-y-2\"><\/ul>\n <\/div>\n <div class=\"bg-emerald-50 p-4 rounded-xl border border-emerald-200\">\n <h4 class=\"font-bold text-lg text-emerald-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\u2728<\/span>Oportunidades Narrativas<\/h4>\n <ul id=\"opportunities-list\" class=\"list-disc list-inside text-sm text-slate-700 space-y-2\"><\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"termometro\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Term\u00f3metro Ciudadano: Pulso de la Opini\u00f3n P\u00fablica en Conil<\/h3>\n <p id=\"thermometer-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div>\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento General (Promedio)<\/h4>\n <p id=\"overall-sentiment-text\" class=\"text-center text-slate-600 mb-4\"><\/p>\n <div class=\"flex justify-center mb-6\">\n <div class=\"sentiment-gauge\"><div id=\"overall-sentiment-value\" class=\"sentiment-gauge-inner\"><\/div><\/div>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: -100% (Muy Negativo) a +100% (Muy Positivo).<\/p>\n <\/div>\n <div>\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas de Conversaci\u00f3n Dominantes<\/h4>\n <p id=\"dominant-topics-intro\" class=\"text-center text-slate-600 mb-4\"><\/p>\n <div id=\"dominant-topics\" class=\"flex flex-wrap justify-center gap-2\"><\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Sentimiento con Municipios Hom\u00f3logos<\/h4>\n <p id=\"comparative-sentiment-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"comparativeSentimentChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"posicionamiento\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Diagn\u00f3stico de Posicionamiento Institucional en Conil<\/h3>\n <p id=\"positioning-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"space-y-6 text-slate-700\">\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Percepci\u00f3n Actual del Ayuntamiento<\/h4>\n <p id=\"current-perception\"><\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Valores Proyectados (Percepci\u00f3n vs. Deseado)<\/h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center mt-4\">\n <div class=\"w-full\">\n <div class=\"chart-container h-[300px] md:h-[350px]\"><canvas id=\"valuesRadarChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: 0 (Bajo) a 10 (Alto)<\/p>\n <\/div>\n <div id=\"values-description\" class=\"text-sm space-y-2\"><\/div>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Encaje con el Relato Deseado<\/h4>\n <p id=\"desired-narrative-fit\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"benchmarking\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Benchmarking de Ayuntamientos Costeros de C\u00e1diz<\/h3>\n <p id=\"benchmarking-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"overflow-x-auto mb-8\">\n <table id=\"benchmarking-table\" class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\"><\/table>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Datos para fines ilustrativos.<\/p>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Presencia en Redes Sociales<\/h4>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"socialMediaComparisonChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"kpis\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Panel de KPIs Reputacionales en Conil<\/h3>\n <p id=\"kpis-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"kpis-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-4\">Los valores son simulados y las flechas indican tendencias recientes.<\/p>\n <\/div>\n <\/section>\n\n <section id=\"estrategia\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Estrategia y Recomendaciones de Comunicaci\u00f3n en Conil<\/h3>\n <p id=\"strategy-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"strategy-recommendations\" class=\"space-y-6\"><\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Narrativa Recomendada y Argumentario Central<\/h4>\n <p id=\"narrative-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"narrative-details\" class=\"space-y-4 text-slate-700\"><\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Simulador de Opini\u00f3n Ciudadana: \u00bfQu\u00e9 estrategia digital preferir\u00edas?<\/h4>\n <div class=\"flex justify-center gap-4\">\n <button id=\"poll-option-A\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600\">Potenciar Transparencia (Datos)<\/button>\n <button id=\"poll-option-B\" class=\"px-6 py-2 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-600\">Mayor Presencia Personal (Alcaldesa)<\/button>\n <\/div>\n <div id=\"poll-result\" class=\"text-center text-lg font-semibold mt-6 text-slate-700\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"protocolo-crisis\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Protocolo de Actuaci\u00f3n Ante Crisis Reputacional en Conil<\/h3>\n <p id=\"protocol-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"protocol-details\" class=\"space-y-6 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"vocerias\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en Vocer\u00edas Locales y Medios Influenciadores en Conil<\/h3>\n <p id=\"voices-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"voices-details\" class=\"space-y-6 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"deportes\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">An\u00e1lisis del Ecosistema Deportivo en Conil<\/h3>\n <p id=\"sports-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"sports-infrastructure\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-programs\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-events\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-clubs\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-contact\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Sobre Este An\u00e1lisis Interactivo<\/h3>\n <p id=\"about-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"about-details\" class=\"space-y-4 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n <\/main>\n \n <footer class=\"text-center mt-12 text-sm text-gray-500\">\n <p>An\u00e1lisis de Reputaci\u00f3n y Presencia Digital del Ayuntamiento de Conil de la Frontera.<\/p>\n <\/footer>\n <\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const municipalityData = {\n name: \"Ayuntamiento de Conil de la Frontera\",\n period: \"\u00daltimo trimestre 2024 - Junio 2025\",\n about: {\n intro: \"Este panel interactivo ha sido dise\u00f1ado para ofrecer una visi\u00f3n completa y accesible de la reputaci\u00f3n y la gesti\u00f3n del Ayuntamiento de Conil, bas\u00e1ndose en un an\u00e1lisis detallado de la informaci\u00f3n p\u00fablica disponible.\",\n details: [\n { strong: \"Sujeto Principal:\", text: \"Ayuntamiento de Conil de la Frontera (Gobierno Tripartito: AxS\u00ed, PP, Siempre Conil) y Oposici\u00f3n (IU, PSOE).\" },\n { strong: \"Periodo de An\u00e1lisis:\", text: \"Junio 2023 - Junio 2025 (simulado para tendencias).\" },\n { strong: \"\u00c1mbito Geogr\u00e1fico:\", text: \"Conil de la Frontera, medios y redes de la provincia de C\u00e1diz.\" },\n { strong: \"Objetivos Estrat\u00e9gicos:\", list: [\n \"Evaluar la imagen del nuevo gobierno de coalici\u00f3n.\",\n \"Detectar los principales focos de conflicto y polarizaci\u00f3n.\",\n \"Medir el impacto de la crisis de Urbanismo.\",\n \"Identificar oportunidades para fortalecer la narrativa del 'cambio'.\"\n ]}\n ]\n },\n balance: {\n intro: \"La imagen p\u00fablica del Ayuntamiento de Conil muestra una clara dualidad: fortalezas en la promoci\u00f3n tur\u00edstica y cultural, que generan un sentimiento positivo, frente a graves desaf\u00edos en la gesti\u00f3n urban\u00edstica y la cohesi\u00f3n pol\u00edtica, que son una fuente constante de riesgo reputacional.\",\n logrosInfo: `\n <p class=\"text-slate-700\">El gobierno tripartito ha logrado capitalizar \u00e1reas de gesti\u00f3n con alta visibilidad y percepci\u00f3n positiva:<\/p>\n <ul class=\"list-disc list-inside ml-4 text-sm text-slate-700 space-y-1\">\n <li><strong>\u00c9xito Continuado del Modelo Tur\u00edstico:<\/strong> Conil mantiene su estatus como destino de primer nivel, con campa\u00f1as de promoci\u00f3n efectivas y una oferta gastron\u00f3mica y de ocio muy valorada.<\/li>\n <li><strong>Agenda Cultural y Deportiva Din\u00e1mica:<\/strong> La organizaci\u00f3n de eventos como el Campus Iker Casillas o el Conil Pride proyecta una imagen de municipio activo y moderno.<\/li>\n <li><strong>Inversiones en Infraestructuras Clave:<\/strong> Proyectos como los nuevos dep\u00f3sitos de agua se presentan como una gesti\u00f3n previsora y responsable para garantizar los servicios.<\/li>\n <\/ul>\n `,\n riesgosInfo: `\n <p class=\"text-slate-700\">La gesti\u00f3n se ve empa\u00f1ada por una serie de desaf\u00edos cr\u00edticos que dominan la narrativa negativa:<\/p>\n <ul class=\"list-disc list-inside ml-4 text-sm text-slate-700 space-y-1\">\n <li><strong>Crisis de Urbanismo y Judicializaci\u00f3n:<\/strong> La investigaci\u00f3n de la Fiscal\u00eda y las acusaciones de 'ocultismo' del PSOE son el principal riesgo para la credibilidad del gobierno.<\/li>\n <li><strong>Masificaci\u00f3n y Sostenibilidad:<\/strong> El debate sobre la saturaci\u00f3n tur\u00edstica, la presi\u00f3n sobre la vivienda y los recursos naturales genera un creciente malestar social.<\/li>\n <li><strong>Conflictividad Pol\u00edtica y Laboral:<\/strong> La alta polarizaci\u00f3n con la oposici\u00f3n y las tensiones con sindicatos proyectan una imagen de inestabilidad y desgaste.<\/li>\n <\/ul>\n `,\n keywords: {\n logros: ['Turismo', 'Playas', 'Cultura', 'Eventos', 'Gastronom\u00eda', 'Inversi\u00f3n', 'Agua'],\n riesgos: ['Urbanismo', 'Fiscal\u00eda', 'Ocultismo', 'Masificaci\u00f3n', 'Vivienda', 'Tasas', 'Polarizaci\u00f3n']\n },\n reputationChartData: {\n logros: {\n labels: ['Turismo', 'Cultura', 'Deportes', 'Inversi\u00f3n Agua'],\n data: [90, 85, 80, 70]\n },\n riesgos: {\n labels: ['Crisis Urbanismo', 'Masificaci\u00f3n', 'Conflictos Laborales', 'Subida Tasas'],\n data: [-95, -75, -60, -70]\n }\n },\n sentimentTrend: {\n labels: ['Oct 24', 'Nov 24', 'Dic 24', 'Ene 25', 'Feb 25', 'Mar 25', 'Abr 25', 'May 25', 'Jun 25'],\n logros: [80, 82, 85, 83, 85, 88, 86, 90, 88],\n riesgos: [-70, -75, -72, -80, -85, -90, -92, -95, -90]\n }\n },\n actors: {\n intro: \"La opini\u00f3n p\u00fablica en Conil est\u00e1 moldeada por un ecosistema de actores clave: el gobierno tripartito, una oposici\u00f3n muy activa (IU y PSOE), medios de comunicaci\u00f3n y una sociedad civil cada vez m\u00e1s preocupada por el modelo de desarrollo.\",\n government: {\n title: \"Gobierno Municipal (Tripartito)\",\n icon: \"\ud83c\udfdb\ufe0f\",\n details: [\n \"<strong class=\\\"text-blue-900\\\">Inmaculada S\u00e1nchez (Alcaldesa, AxS\u00ed):<\/strong> Lidera la narrativa del 'cambio necesario'.\",\n \"<strong class=\\\"text-blue-900\\\">Antonio Arag\u00f3n (1er Tte. Alcalde, PP):<\/strong> Conexi\u00f3n con Diputaci\u00f3n y gesti\u00f3n cultural.\",\n \"<strong class=\\\"text-blue-900\\\">Siempre Conil:<\/strong> Socio clave para la mayor\u00eda de gobierno.\"\n ],\n links: [{ text: \"Web Oficial Ayuntamiento Conil\", url: \"https:\/\/www.conil.org\/\" }]\n },\n mediaVoices: {\n title: \"Oposici\u00f3n (IU y PSOE)\",\n icon: \"\ud83d\udde3\ufe0f\",\n details: [\n \"<strong class=\\\"text-yellow-900\\\">Izquierda Unida:<\/strong> Critica la 'par\u00e1lisis' y la gesti\u00f3n de servicios, defendiendo su legado.\",\n \"<strong class=\\\"text-yellow-900\\\">PSOE:<\/strong> Ejerce una dura fiscalizaci\u00f3n de la legalidad, con la denuncia de 'ocultismo' como eje central.\"\n ],\n links: [{ text: \"Noticias de la oposici\u00f3n\", url: \"https:\/\/www.google.com\/search?q=oposicion+ayuntamiento+conil\" }]\n },\n citizenship: {\n title: \"Ciudadan\u00eda y Colectivos\",\n icon: \"\ud83d\udc65\",\n details: [\n \"<strong class=\\\"text-green-900\\\">Asociaciones de Hosteleros y Comerciantes:<\/strong> Actores clave en el debate sobre el modelo tur\u00edstico.\",\n \"<strong class=\\\"text-green-900\\\">Colectivos Ecologistas:<\/strong> Voces cr\u00edticas en temas de sostenibilidad y urbanismo.\",\n \"<strong class=\\\"text-green-900\\\">Asociaciones de Vecinos:<\/strong> Canalizan el malestar por la masificaci\u00f3n, el ruido y los servicios.\"\n ],\n links: [{ text: \"Buscar Asociaciones Conil\", url: \"https:\/\/www.google.com\/search?q=asociaciones+conil\" }]\n },\n delegationSentiment: {\n labels: ['Urbanismo', 'Turismo', 'Hacienda', 'Cultura', 'Medio Ambiente', 'Servicios Sociales'],\n data: [-90, 85, -60, 80, 50, 70]\n }\n },\n mayor: {\n intro: \"La figura de la alcaldesa Inmaculada S\u00e1nchez es central en la reputaci\u00f3n del Ayuntamiento. Su liderazgo se asocia con la narrativa del 'cambio', pero tambi\u00e9n concentra las cr\u00edticas de la oposici\u00f3n.\",\n narrative: `\n <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Narrativa y Mensajes Clave<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">\n <p>La alcaldesa se proyecta como una l\u00edder pragm\u00e1tica, enfocada en la gesti\u00f3n de los problemas 'heredados' y en la b\u00fasqueda de un modelo de desarrollo m\u00e1s sostenible para Conil.<\/p>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">\n <li>\u00c9nfasis en la necesidad de 'regeneraci\u00f3n' y 'transparencia'.<\/li>\n <li>Defensa de un turismo de calidad frente a la masificaci\u00f3n.<\/li>\n <li>Compromiso con la mejora de infraestructuras clave como el agua.<\/li>\n <\/ul>\n <\/div>`,\n perception: `\n <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Percepci\u00f3n P\u00fablica<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">\n <p>La percepci\u00f3n est\u00e1 polarizada. Para sus partidarios, representa una alternativa necesaria tras 28 a\u00f1os de gobierno de IU. Para la oposici\u00f3n y sus simpatizantes, es la responsable de una gesti\u00f3n 'opaca' y 'paralizada'.<\/p>\n <div class=\"flex justify-center mb-6 mt-4\">\n <div class=\"sentiment-gauge\" style=\"background: conic-gradient(#DB1F48 0% 40%, #FBBF24 40% 60%, #01949A 60% 100%);\">\n <div class=\"sentiment-gauge-inner\">20%<\/div>\n <\/div>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento neto promedio asociado a la figura de la alcaldesa (polarizado).<\/p>\n <\/div>`,\n keywords: ['Cambio', 'Regeneraci\u00f3n', 'Turismo', 'Sostenibilidad', 'Urbanismo', 'Ocultismo', 'Pacto'],\n recommendations: `\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Recomendaciones de Comunicaci\u00f3n para la Alcaldesa<\/h4>\n <ul class=\"list-disc list-inside text-sm text-slate-700 space-y-2 max-w-3xl mx-auto\">\n <li><strong>Liderazgo en Transparencia:<\/strong> Asumir personalmente la comunicaci\u00f3n en la crisis de Urbanismo, ofreciendo m\u00e1xima colaboraci\u00f3n y datos contrastados.<\/li>\n <li><strong>Visi\u00f3n de Futuro:<\/strong> Articular un relato claro sobre el modelo de Conil deseado, que equilibre desarrollo y calidad de vida.<\/li>\n <li><strong>Cercan\u00eda y Di\u00e1logo:<\/strong> Potenciar la presencia en foros ciudadanos para contrarrestar la imagen de lejan\u00eda y escuchar directamente las preocupaciones vecinales.<\/li>\n <\/ul>`\n },\n digital: {\n intro: \"La estrategia digital del Ayuntamiento de Conil es funcional para la promoci\u00f3n, pero se ve desbordada por la conversaci\u00f3n negativa y la polarizaci\u00f3n en canales no oficiales.\",\n officialStrategy: {\n title: \"Comunicaci\u00f3n Institucional Centralizada\",\n details: \"<p class=\\\"text-sm text-slate-700 mb-3\\\">La comunicaci\u00f3n se centra en la web y redes oficiales, con un fuerte enfoque en turismo y agenda positiva.<\/p>\",\n points: [\n { type: \"plus\", text: \"<strong>Fortaleza:<\/strong> Mensaje unificado y de alta calidad en la promoci\u00f3n tur\u00edstica.\" },\n { type: \"minus\", text: \"<strong>Debilidad:<\/strong> Incapacidad para contrarrestar eficazmente las narrativas negativas que surgen en otros foros.\" }\n ],\n links: [{ text: \"Web Oficial\", url: \"https:\/\/www.conil.org\/\" }]\n },\n unofficialPulse: {\n title: \"El Pulso Ciudadano en Canales No Oficiales\",\n details: \"<p class=\\\"text-sm text-slate-700 mb-3\\\">El debate real y la cr\u00edtica m\u00e1s dura se producen en grupos de Facebook y perfiles de opini\u00f3n locales.<\/p>\",\n points: [\n { text: \"<strong>Grupos de Facebook:<\/strong> Son el principal foro de quejas sobre masificaci\u00f3n, limpieza, ruido y gesti\u00f3n pol\u00edtica.\" },\n { text: \"<strong>Medios Cr\u00edticos:<\/strong> Medios locales y provinciales se hacen eco de las denuncias de la oposici\u00f3n, amplificando la crisis.\" }\n ],\n links: [{ text: \"Buscar 'Conil Opina' (Facebook)\", url: \"https:\/\/www.google.com\/search?q=grupo+facebook+conil+opina\" }]\n },\n mediaSentimentDetailed: {\n labels: ['Canales Oficiales', 'Prensa Local', 'Redes Sociales (No Oficiales)'],\n positive: [95, 40, 20],\n neutral: [5, 30, 25],\n negative: [0, 30, 55]\n },\n engagementMetrics: {\n labels: ['Web Oficial', 'Facebook', 'Instagram', 'Grupos Vecinales'],\n interacciones: [500, 1200, 1500, 2500]\n }\n },\n timeline: {\n intro: \"Explore los hitos que han marcado la agenda municipal y medi\u00e1tica en Conil desde la formaci\u00f3n del nuevo gobierno.\",\n events: [\n { date: 'Jun 2023', title: 'Pacto de Gobierno Tripartito', description: 'AxS\u00ed, PP y Siempre Conil firman el acuerdo que desbanca a IU tras 28 a\u00f1os.', type: 'Pol\u00edtica' },\n { date: 'Ene 2024', title: 'Pol\u00e9mica por Cartel de Carnaval', description: 'Acusaciones de plagio gestionadas con un comunicado conjunto.', type: 'Crisis' },\n { date: 'Feb 2024', title: 'Denuncia de \"Pleno Bochornoso\"', description: 'IU acusa al gobierno de actitudes impositivas y amenazas.', type: 'Pol\u00edtica' },\n { date: 'Abr 2025', title: 'Dimisi\u00f3n Concejal de Urbanismo', description: 'Pedro P\u00e9rez (PP) dimite alegando motivos personales, evidenciando la presi\u00f3n en el \u00e1rea.', type: 'Crisis' },\n { date: 'May 2025', title: 'PSOE Denuncia \"Ocultismo\"', description: 'El PSOE acusa a la alcaldesa de ocultar un requerimiento de la Fiscal\u00eda sobre Urbanismo.', type: 'Crisis' },\n { date: 'Jun 2025', title: 'Presentaci\u00f3n Campus Iker Casillas', description: 'Evento de alto perfil que refuerza la imagen de Conil como destino deportivo.', type: 'Logro', tags: ['Turismo'] }\n ]\n },\n matrixRO: {\n intro: \"Esta matriz eval\u00faa los principales vectores de exposici\u00f3n reputacional y las ventanas para generar un relato institucional positivo en Conil.\",\n risks: [\n \"<strong>Judicializaci\u00f3n de la pol\u00edtica:<\/strong> La crisis de Urbanismo puede derivar en un largo proceso judicial con un goteo constante de noticias negativas.\",\n \"<strong>Fractura social por el turismo:<\/strong> El aumento de la 'turismofobia' puede llevar a protestas y da\u00f1ar la imagen de Conil como destino acogedor.\",\n \"<strong>Ingobernabilidad:<\/strong> La tensi\u00f3n en el pacto tripartito o la presi\u00f3n de la oposici\u00f3n podr\u00edan paralizar la gesti\u00f3n municipal.\",\n \"<strong>Desgaste de la narrativa del 'cambio':<\/strong> Si no se perciben mejoras tangibles, la promesa de regeneraci\u00f3n puede volverse en contra del gobierno.\"\n ],\n opportunities: [\n \"<strong>Liderazgo en Transparencia:<\/strong> Convertir la crisis de Urbanismo en una oportunidad para demostrar un compromiso real con la transparencia, desarmando a la oposici\u00f3n.\",\n \"<strong>Pacto por un Turismo Sostenible:<\/strong> Liderar un di\u00e1logo con todos los actores para crear un modelo tur\u00edstico de futuro que sea un referente.\",\n \"<strong>Capitalizar la Agenda Positiva:<\/strong> Unificar los \u00e9xitos en cultura y deportes bajo una narrativa de 'calidad de vida' que contrarreste el ruido pol\u00edtico.\",\n \"<strong>Comunicaci\u00f3n Pedag\u00f3gica:<\/strong> Explicar de forma clara y directa las decisiones impopulares (ej. tasas del agua) para ganarse la comprensi\u00f3n ciudadana.\"\n ]\n },\n thermometer: {\n intro: \"Una escucha activa nos permite comprender el sentimiento general, los temas de conversaci\u00f3n dominantes y c\u00f3mo se compara Conil con municipios hom\u00f3logos.\",\n overallSentiment: {\n text: \"La percepci\u00f3n ciudadana es de alta **polarizaci\u00f3n**. Existe un sentimiento positivo en torno al turismo y la oferta de ocio, pero un fuerte sentimiento negativo sobre la gesti\u00f3n pol\u00edtica y los problemas estructurales.\",\n value: \"15%\"\n },\n dominantTopics: {\n intro: \"Las conversaciones giran principalmente en torno al **urbanismo**, el **turismo**, la **vivienda**, la **pol\u00edtica** y los **servicios p\u00fablicos**.\",\n topics: [\n { text: \"Urbanismo\", color: \"red\" },\n { text: \"Turismo\", color: \"emerald\" },\n { text: \"Vivienda\", color: \"yellow\" },\n { text: \"Pol\u00edtica\", color: \"purple\" },\n { text: \"Agua\", color: \"blue\" },\n { text: \"Limpieza\", color: \"slate\" }\n ]\n },\n comparativeSentiment: {\n labels: ['Conil', 'Tarifa', 'Vejer', 'Chiclana'],\n data: [15, 45, 60, 55]\n }\n },\n positioning: {\n intro: \"Definimos c\u00f3mo es percibido el Ayuntamiento de Conil, qu\u00e9 valores proyecta y c\u00f3mo encaja esa percepci\u00f3n con el relato deseado.\",\n currentPerception: \"El Ayuntamiento de Conil es percibido como un excelente promotor del **turismo y el ocio**, pero con una gesti\u00f3n pol\u00edtica **conflictiva, opaca y desbordada** por los problemas estructurales. La imagen de 'cambio' y 'regeneraci\u00f3n' est\u00e1 severamente da\u00f1ada.\",\n valuesPerception: {\n labels: ['Atracci\u00f3n Tur\u00edstica', 'Sostenibilidad', 'Cercan\u00eda', 'Eficacia', 'Transparencia'],\n perceived: [9, 4, 5, 4, 2],\n desired: [9, 8, 8, 8, 9]\n },\n valuesDescription: [\n \"<strong>Atracci\u00f3n Tur\u00edstica:<\/strong> Valor m\u00e1ximo, es la principal fortaleza de la marca Conil.\",\n \"<strong>Sostenibilidad:<\/strong> Percibida como un discurso con pocas acciones concretas que lo respalden.\",\n \"<strong>Cercan\u00eda:<\/strong> Percepci\u00f3n de un gobierno distante, enfrascado en luchas pol\u00edticas.\",\n \"<strong>Eficacia:<\/strong> Baja percepci\u00f3n de eficacia en la resoluci\u00f3n de problemas estructurales.\",\n \"<strong>Transparencia:<\/strong> Valor m\u00e1s da\u00f1ado debido a la crisis de Urbanismo.\"\n ],\n desiredNarrativeFit: \"El relato deseado de un **'gobierno del cambio, transparente y sostenible'** choca frontalmente con la percepci\u00f3n actual. Existe una brecha cr\u00edtica entre lo que se prometi\u00f3 y lo que se percibe. La prioridad absoluta es reconstruir la credibilidad en los ejes de transparencia y eficacia.\"\n },\n benchmarking: {\n intro: \"An\u00e1lisis comparativo de la reputaci\u00f3n y comunicaci\u00f3n digital de ayuntamientos costeros de la provincia de C\u00e1diz.\",\n tableData: [\n { municipality: \"Conil de la Frontera\", sentiment: \"15%\", visibility: \"Muy Alta\", engagement: \"Alto\", innovation: \"Media\" },\n { municipality: \"Tarifa\", sentiment: \"45%\", visibility: \"Alta\", engagement: \"Muy Alto\", innovation: \"Alta\" },\n { municipality: \"Vejer de la Frontera\", sentiment: \"60%\", visibility: \"Alta\", engagement: \"Alto\", innovation: \"Alta\" },\n { municipality: \"Chiclana de la Frontera\", sentiment: \"55%\", visibility: \"Muy Alta\", engagement: \"Medio\", innovation: \"Media\" }\n ],\n socialMediaComparison: {\n labels: ['Conil', 'Tarifa', 'Vejer', 'Chiclana'],\n facebook: [1200, 1800, 1500, 2200],\n twitter: [400, 600, 500, 700],\n instagram: [2500, 3500, 3000, 2800]\n }\n },\n kpis: {\n intro: \"Indicadores clave para el seguimiento continuo de la reputaci\u00f3n institucional de Conil.\",\n list: [\n { title: \"Sentimiento Neto General\", value: \"15%\", trend: \"-10%\", trendColor: \"red\", description: \"Porcentaje de sentimiento positivo sobre el total.\", progress: 15, barColor: \"red\" },\n { title: \"Sentimiento en 'Urbanismo'\", value: \"-95%\", trend: \"-5%\", trendColor: \"red\", description: \"Sentimiento neto asociado a la gesti\u00f3n de urbanismo.\", progress: 5, barColor: \"red\" },\n { title: \"Menciones sobre 'Masificaci\u00f3n'\", value: \"350\", trend: \"+50\", trendColor: \"red\", description: \"N\u00famero de menciones mensuales sobre saturaci\u00f3n tur\u00edstica.\", progress: 80, barColor: \"yellow\" },\n { title: \"Engagement en Promoci\u00f3n Tur\u00edstica\", value: \"8\/10\", trend: \"+0\", trendColor: \"green\", description: \"Puntuaci\u00f3n de la interacci\u00f3n en el perfil de turismo.\", progress: 80, barColor: \"emerald\" },\n { title: \"Visibilidad Proactiva vs. Reactiva\", value: \"30%\", trend: \"-15%\", trendColor: \"red\", description: \"Porcentaje de noticias generadas por el Ayuntamiento frente a respuestas a crisis.\", progress: 30, barColor: \"red\" },\n { title: \"Confianza en la Alcaldesa (Neto)\", value: \"20%\", trend: \"-25%\", trendColor: \"red\", description: \"Sentimiento neto asociado a la figura de la alcaldesa.\", progress: 20, barColor: \"red\" }\n ]\n },\n strategy: {\n intro: \"Para revertir la tendencia negativa, el Ayuntamiento de Conil debe lanzar una ofensiva de comunicaci\u00f3n centrada en la transparencia radical, la gesti\u00f3n de la crisis de Urbanismo y la reconexi\u00f3n con la ciudadan\u00eda.\",\n recommendations: [\n { title: \"1. Plan de Choque de Transparencia (Crisis Urbanismo)\", color: \"red\", points: [\n \"<strong>Asumir el liderazgo comunicacional:<\/strong> La alcaldesa debe comparecer y ofrecer m\u00e1xima colaboraci\u00f3n con la justicia.\",\n \"<strong>Crear un portal espec\u00edfico de transparencia:<\/strong> Publicar toda la informaci\u00f3n no sensible del caso.\",\n \"<strong>Anticipar y preparar respuestas:<\/strong> No esperar a que la oposici\u00f3n o los medios marquen la agenda.\"\n ]},\n { title: \"2. Campa\u00f1a Pedag\u00f3gica sobre Gesti\u00f3n\", color: \"yellow\", points: [\n \"<strong>Explicar la subida de tasas:<\/strong> Detallar la necesidad de la inversi\u00f3n en agua y el estado de las infraestructuras.\",\n \"<strong>Comunicar el estado de los conflictos laborales:<\/strong> Ser transparente sobre las negociaciones y los puntos de desacuerdo.\",\n \"<strong>Informar sobre el Plan de Vivienda:<\/strong> Explicar las competencias municipales y las acciones que se est\u00e1n llevando a cabo.\"\n ]},\n { title: \"3. Reconectar con la Ciudadan\u00eda\", color: \"green\", points: [\n \"<strong>Poner en marcha el 'Concejal Virtual':<\/strong> Cumplir con la promesa electoral de un canal de atenci\u00f3n directo.\",\n \"<strong>Crear la 'Mesa por un Turismo Sostenible':<\/strong> Liderar el debate sobre el futuro del modelo tur\u00edstico.\",\n \"<strong>Amplificar la agenda positiva:<\/strong> Unificar los eventos culturales y deportivos bajo una narrativa de 'calidad de vida'.\"\n ]}\n ],\n narrative: {\n intro: \"Es urgente redefinir el relato institucional para pasar de la defensiva a la proactividad.\",\n toneStyleAxes: { title: \"Tono, Estilo y Ejes Clave:\", items: [\n \"<strong>Tono:<\/strong> Humilde, responsable, transparente y resolutivo.\",\n \"<strong>Estilo:<\/strong> Directo, claro, did\u00e1ctico y emp\u00e1tico.\",\n \"<strong>Ejes Clave:\", [\n \"\\\"Estamos aqu\u00ed para solucionar problemas, no para ocultarlos.\\\"\",\n \"\\\"Construir el futuro de Conil requiere decisiones dif\u00edciles, y las explicamos.\\\"\",\n \"\\\"El turismo es nuestro tesoro, y cuidarlo es responsabilidad de todos.\\\"\"\n ]\n ]},\n centralArgument: { title: \"Argumentario Central Frente a Cr\u00edticas:\", items: [\n \"<strong>Crisis de Urbanismo:<\/strong> \\\"M\u00e1xima colaboraci\u00f3n con la justicia y tolerancia cero con cualquier irregularidad, pasada o presente. Nuestro compromiso es la limpieza y la transparencia total.\\\"\",\n \"<strong>Masificaci\u00f3n:<\/strong> \\\"Entendemos el malestar. Por eso hemos creado una mesa de di\u00e1logo para dise\u00f1ar, entre todos, un modelo de turismo m\u00e1s sostenible y respetuoso.\\\"\",\n \"<strong>Subida de Tasas:<\/strong> \\\"Modernizar infraestructuras esenciales como el agua tiene un coste. Hemos optado por la responsabilidad de garantizar el suministro para el futuro de Conil.\\\"\"\n ]},\n unifyingFramework: { title: \"Marco Narrativo Unificador:\", text: \"En Conil, afrontamos los desaf\u00edos con transparencia y trabajamos para construir un futuro m\u00e1s sostenible para todos. Escuchamos, explicamos y actuamos.\" }\n }\n },\n protocol: {\n intro: \"Manual operativo para una respuesta r\u00e1pida, coordinada y efectiva ante las crisis reputacionales que enfrenta Conil.\",\n sections: [\n { title: \"1. Tipos de Crisis Prioritarias para Conil\", points: [\n \"<strong>Crisis Pol\u00edtica\/Judicial:<\/strong> Avances en la investigaci\u00f3n de la Fiscal\u00eda, nuevas denuncias de la oposici\u00f3n.\",\n \"<strong>Crisis Social:<\/strong> Protestas por masificaci\u00f3n tur\u00edstica, vivienda o servicios p\u00fablicos.\",\n \"<strong>Crisis de Gobernabilidad:<\/strong> Ruptura del pacto de gobierno, incapacidad para aprobar presupuestos.\"\n ]},\n { title: \"2. Cadena de Mando y Portavoces\", points: [\n \"<strong>Comit\u00e9 de Crisis:<\/strong> Alcaldesa (Presidenta), Portavoces de AxS\u00ed, PP y Siempre Conil, Concejal de Comunicaci\u00f3n, Asesor\u00eda Jur\u00eddica.\",\n \"<strong>Portavoz Principal:<\/strong> Alcaldesa. Su exposici\u00f3n es alta, pero debe liderar la respuesta en crisis graves.\",\n \"<strong>Portavoces T\u00e9cnicos:<\/strong> Concejal de Urbanismo, Hacienda o Turismo, seg\u00fan la materia.\",\n ]},\n { title: \"3. Plan de Contenci\u00f3n Digital (Primeras 24h)\", points: [\n \"<strong>Monitorizaci\u00f3n Intensiva:<\/strong> Escucha activa de medios, redes y grupos locales para detectar la viralizaci\u00f3n de la crisis.\",\n \"<strong>Evaluaci\u00f3n R\u00e1pida:<\/strong> Determinar el impacto en la credibilidad del gobierno y el sentimiento ciudadano.\",\n \"<strong>Primer Mensaje:<\/strong> Emitir un comunicado r\u00e1pido de reconocimiento del problema, compromiso con la transparencia y anuncio de pr\u00f3ximas acciones.\"\n ]},\n { title: \"4. Claves de Reacci\u00f3n\", points: [\n \"<strong>Transparencia Radical:<\/strong> Compartir toda la informaci\u00f3n posible. Es la \u00fanica forma de combatir la narrativa de 'ocultismo'.\",\n \"<strong>Empat\u00eda:<\/strong> Reconocer el malestar ciudadano y mostrar comprensi\u00f3n.\",\n \"<strong>Responsabilidad:<\/strong> Asumir la responsabilidad de la gesti\u00f3n, evitando culpar a terceros.\",\n \"<strong>Agilidad y Coherencia:<\/strong> Responder con rapidez y mantener un mensaje unificado entre los socios de gobierno.\"\n ]}\n ]\n },\n voices: {\n intro: \"Identificaci\u00f3n de los l\u00edderes vecinales, medios y canales informales que moldean la opini\u00f3n p\u00fablica en Conil.\",\n sections: [\n { title: \"L\u00edderes Vecinales y Colectivos con Peso Real\", description: \"Figuras y colectivos que articulan el sentir ciudadano en temas clave.\", points: [\n \"<strong>Portavoces de Colectivos Ecologistas:<\/strong> Muy influyentes en el debate sobre urbanismo y sostenibilidad.\",\n \"<strong>Representantes de Asociaciones de Vecinos del Centro:<\/strong> Clave en las quejas por ruido, limpieza y masificaci\u00f3n.\",\n \"<strong>L\u00edderes de Plataformas por la Vivienda Digna:<\/strong> Si surgen, ser\u00e1n un actor de presi\u00f3n muy relevante.\"\n ], strategy: \"Establecer un canal de di\u00e1logo directo y regular, ofreciendo informaci\u00f3n proactiva y escuchando sus demandas. Su involucraci\u00f3n puede transformar una voz cr\u00edtica en una colaborativa.\" },\n { title: \"Medios Locales y Provinciales con Impacto\", description: \"Medios que tienen un impacto directo en la agenda informativa y la formaci\u00f3n de opini\u00f3n.\", points: [\n \"<strong>Diario de C\u00e1diz \/ La Voz de C\u00e1diz:<\/strong> Principales altavoces de las denuncias de la oposici\u00f3n y de las crisis pol\u00edticas.\",\n \"<strong>Medios Digitales Locales:<\/strong> Canales como 'Conil Es M\u00e1s' o similares, que cubren la actualidad municipal.\",\n \"<strong>Radio Juventud de Conil:<\/strong> Emisora municipal que puede servir como plataforma para la comunicaci\u00f3n del gobierno.\"\n ], strategy: \"Mantener una relaci\u00f3n fluida con los periodistas, ofreciendo acceso a la informaci\u00f3n y facilitando entrevistas para asegurar una cobertura equilibrada.\" },\n { title: \"Canales Informales de Opini\u00f3n que Afectan la Reputaci\u00f3n\", description: \"La opini\u00f3n p\u00fablica se forma en gran medida en canales informales y privados.\", points: [\n \"<strong>Grupos de Facebook ('Conil Opina', etc.):<\/strong> Principal foro de debate, queja y cr\u00edtica sin filtros.\",\n \"<strong>Cuentas de Instagram y TikTok de influencers locales:<\/strong> Con capacidad de viralizar opiniones y noticias r\u00e1pidamente.\",\n \"<strong>Foros de Viajeros (TripAdvisor, etc.):<\/strong> Donde se refleja la percepci\u00f3n de los turistas sobre la masificaci\u00f3n y los servicios.\"\n ], strategy: \"Monitorizar activamente estos canales para detectar rumores, focos de malestar y narrativas negativas incipientes, y adaptar la comunicaci\u00f3n oficial en consecuencia.\" }\n ]\n },\n sports: {\n intro: \"Conil de la Frontera, gracias a su entorno natural privilegiado, tiene un gran potencial en el \u00e1mbito deportivo, especialmente en disciplinas vinculadas al mar y en la organizaci\u00f3n de eventos que atraen turismo.\",\n infrastructure: {\n title: \"Infraestructura Deportiva Municipal\",\n description: \"Conil cuenta con instalaciones clave para el fomento del deporte base y la organizaci\u00f3n de eventos.\",\n table: [\n { name: \"Pabell\u00f3n Polideportivo Municipal\", sport: \"F\u00fatbol Sala, Baloncesto, Voleibol\", location: \"Casco Urbano\" },\n { name: \"Campo de F\u00fatbol 'P\u00e9rez Ureba'\", sport: \"F\u00fatbol\", location: \"Casco Urbano\" },\n { name: \"Pistas de Tenis y P\u00e1del\", sport: \"Tenis, P\u00e1del\", location: \"Varias\" },\n { name: \"Playas (La Fontanilla, Los Bateles)\", sport: \"Surf, Kitesurf, V\u00f3ley Playa\", location: \"Costa\" }\n ],\n analysis: \"La infraestructura es adecuada para deportes tradicionales, pero la gran fortaleza reside en el uso de los espacios naturales (playas) para deportes n\u00e1uticos, un activo que atrae a un p\u00fablico espec\u00edfico y de alto valor.\"\n },\n programs: {\n title: \"Programas y Escuelas Deportivas Municipales\",\n description: \"La oferta municipal se centra en el deporte base y en actividades estivales para dar servicio a la poblaci\u00f3n local y visitante.\",\n annual: [\"Escuelas de F\u00fatbol, Baloncesto y Tenis.\", \"Programas de mantenimiento para mayores.\"],\n summer: [\"Cursos de Surf y Kitesurf.\", \"Torneos de V\u00f3ley Playa y F\u00fatbol Playa.\", \"Campus deportivos como el de Iker Casillas.\"],\n analysis: \"La oferta es s\u00f3lida, destacando la captaci\u00f3n de eventos de alto perfil como el Campus Iker Casillas, que genera una gran visibilidad y asocia la marca Conil con la excelencia deportiva.\"\n },\n events: {\n title: \"Eventos Deportivos Destacados y su Impacto\",\n description: \"La agenda de eventos es un pilar de la estrategia tur\u00edstica y de dinamizaci\u00f3n local.\",\n chart: {\n labels: ['Campus Iker Casillas', 'Campeonatos de Surf', 'Torneos V\u00f3ley Playa', 'Carreras Populares'],\n data: [95, 85, 80, 70]\n },\n list: [\n \"<strong>Campus Iker Casillas:<\/strong> Evento de referencia que atrae a participantes de toda Espa\u00f1a.\",\n \"<strong>Pruebas del circuito de Surf y Bodyboard:<\/strong> Aprovechando la calidad de las olas.\",\n \"<strong>Traves\u00eda a Nado 'La Chanca':<\/strong> Evento popular en verano.\",\n \"<strong>Carrera Nocturna 'Noche de San Juan':<\/strong> Combina deporte y tradici\u00f3n.\"\n ],\n analysis: \"Los eventos deportivos son una herramienta estrat\u00e9gica para la desestacionalizaci\u00f3n y la atracci\u00f3n de un turismo de calidad. El impacto medi\u00e1tico de figuras como Iker Casillas es una oportunidad de comunicaci\u00f3n de primer nivel.\"\n },\n clubs: {\n title: \"Clubes y Asociaciones Deportivas Locales\",\n description: \"El tejido asociativo deportivo en Conil es muy activo, especialmente en deportes n\u00e1uticos y f\u00fatbol.\",\n chart: {\n labels: ['Clubes de Surf', 'Conil C.F.', 'Clubes de P\u00e1del', 'Club de Atletismo'],\n data: [90, 80, 70, 65]\n },\n list: [\n \"<strong>Escuelas y Clubes de Surf:<\/strong> Son un motor econ\u00f3mico y tur\u00edstico fundamental.\",\n \"<strong>Conil Club de F\u00fatbol:<\/strong> Principal referente del f\u00fatbol local, con una importante cantera.\",\n \"<strong>Clubes de P\u00e1del y Tenis:<\/strong> Con una alta demanda por parte de residentes y turistas.\",\n \"<strong>Asociaciones de Senderismo y Ciclismo:<\/strong> Promueven el uso de los parajes naturales del interior.\"\n ],\n analysis: \"La colaboraci\u00f3n entre el Ayuntamiento y los clubes privados, especialmente los de surf, es clave para el desarrollo del sector. Apoyar a estos clubes es invertir en la principal se\u00f1a de identidad del turismo activo de Conil.\"\n },\n contact: {\n title: \"Informaci\u00f3n de Contacto y Recursos Adicionales\",\n description: \"Canales para informarse y participar en la vida deportiva de Conil.\",\n list: [\n \"<strong>Delegaci\u00f3n de Deportes:<\/strong> Consultar web oficial del Ayuntamiento para tel\u00e9fono y email.\",\n \"<strong>Oficina de Turismo:<\/strong> Informaci\u00f3n sobre eventos y actividades deportivas para visitantes.\",\n \"<strong>Webs de los Clubes:<\/strong> Los clubes de surf y otros deportes suelen tener sus propias p\u00e1ginas con informaci\u00f3n sobre cursos y eventos.\"\n ],\n analysis: \"Facilitar el acceso a la informaci\u00f3n deportiva, especialmente la relacionada con actividades en la naturaleza, puede mejorar la experiencia del visitante y fomentar un turismo m\u00e1s activo y respetuoso.\"\n }\n }\n };\n\n const mainNavButtons = document.querySelectorAll('.nav-button');\n const contentSections = document.querySelectorAll('.content-section');\n \n function activateSection(targetId) {\n mainNavButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.target === targetId));\n contentSections.forEach(section => {\n section.classList.toggle('active', section.id === targetId);\n });\n \/\/ Lazy load charts for the activated section\n if (targetId === 'balance') renderBalanceCharts();\n if (targetId === 'actores') renderActorsCharts();\n if (targetId === 'digital') renderDigitalCharts();\n if (targetId === 'termometro') renderThermometerCharts();\n if (targetId === 'posicionamiento') renderPositioningCharts();\n if (targetId === 'benchmarking') renderBenchmarkingCharts();\n if (targetId === 'deportes') renderSportsCharts();\n }\n\n function setupNavigation() {\n mainNavButtons.forEach(button => {\n button.addEventListener('click', () => activateSection(button.dataset.target));\n });\n }\n\n function populateStaticContent() {\n document.getElementById('municipality-name').textContent = municipalityData.name;\n \/\/ About Section\n document.getElementById('about-intro').textContent = municipalityData.about.intro;\n document.getElementById('about-details').innerHTML = municipalityData.about.details.map(item => {\n if (item.list) {\n return `<p><strong class=\"font-semibold text-slate-800\">${item.strong}<\/strong><\/p><ul class=\"list-disc list-inside ml-4 space-y-1\">${item.list.map(li => `<li>${li}<\/li>`).join('')}<\/ul>`;\n }\n return `<p><strong class=\"font-semibold text-slate-800\">${item.strong}<\/strong> ${item.text}<\/p>`;\n }).join('');\n \/\/ Balance Section\n document.getElementById('balance-intro').textContent = municipalityData.balance.intro;\n document.getElementById('sentiment-trend-period').textContent = municipalityData.period;\n document.getElementById('sentiment-trend-intro').textContent = \"Observe c\u00f3mo ha variado la percepci\u00f3n de logros y riesgos en los medios.\";\n \/\/ Actors Section\n document.getElementById('actors-intro').textContent = municipalityData.actors.intro;\n document.getElementById('actor-cards-container').innerHTML = `\n <div class=\"bg-blue-50 p-4 rounded-xl border border-blue-200\">\n <h4 class=\"font-bold text-lg text-blue-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.government.icon}<\/span>${municipalityData.actors.government.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.government.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>\n <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-200\">\n <h4 class=\"font-bold text-lg text-yellow-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.mediaVoices.icon}<\/span>${municipalityData.actors.mediaVoices.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.mediaVoices.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>\n <div class=\"bg-green-50 p-4 rounded-xl border border-green-200\">\n <h4 class=\"font-bold text-lg text-green-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.citizenship.icon}<\/span>${municipalityData.actors.citizenship.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.citizenship.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>`;\n document.getElementById('delegation-sentiment-intro').textContent = \"Percepci\u00f3n de la gesti\u00f3n en \u00e1reas clave del Ayuntamiento.\";\n \/\/ Mayor Section\n document.getElementById('mayor-intro').textContent = municipalityData.mayor.intro;\n document.getElementById('mayor-narrative').innerHTML = municipalityData.mayor.narrative;\n document.getElementById('mayor-perception').innerHTML = municipalityData.mayor.perception;\n document.getElementById('mayor-keywords').innerHTML = municipalityData.mayor.keywords.map(kw => `<span class=\"inline-block p-2 m-1 bg-indigo-100 rounded-lg shadow-sm text-base font-medium text-indigo-800\">${kw}<\/span>`).join('');\n document.getElementById('mayor-recommendations').innerHTML = municipalityData.mayor.recommendations;\n \/\/ Digital Section\n document.getElementById('digital-intro').textContent = municipalityData.digital.intro;\n document.getElementById('digital-content').innerHTML = `\n <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\n <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">${municipalityData.digital.officialStrategy.title}<\/h4>\n ${municipalityData.digital.officialStrategy.details}\n <ul class=\"text-sm space-y-2\">${municipalityData.digital.officialStrategy.points.map(p => `<li class=\"flex items-start\"><span class=\"${p.type === 'plus' ? 'text-emerald-500' : 'text-red-500'} mr-2 mt-1\">${p.type === 'plus' ? '\u2795' : '\u2796'}<\/span>${p.text}<\/li>`).join('')}<\/ul>\n <\/div>\n <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\n <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">${municipalityData.digital.unofficialPulse.title}<\/h4>\n ${municipalityData.digital.unofficialPulse.details}\n <ul class=\"text-sm text-slate-700 space-y-2\">${municipalityData.digital.unofficialPulse.points.map(p => `<li>${p.text}<\/li>`).join('')}<\/ul>\n <\/div>`;\n \/\/ Timeline\n document.getElementById('timeline-intro').textContent = municipalityData.timeline.intro;\n \/\/ Matrix R&O\n document.getElementById('matrix-intro').textContent = municipalityData.matrixRO.intro;\n document.getElementById('risks-list').innerHTML = municipalityData.matrixRO.risks.map(item => `<li>${item}<\/li>`).join('');\n document.getElementById('opportunities-list').innerHTML = municipalityData.matrixRO.opportunities.map(item => `<li>${item}<\/li>`).join('');\n \/\/ Thermometer\n document.getElementById('thermometer-intro').textContent = municipalityData.thermometer.intro;\n document.getElementById('overall-sentiment-text').innerHTML = municipalityData.thermometer.overallSentiment.text;\n document.getElementById('overall-sentiment-value').textContent = municipalityData.thermometer.overallSentiment.value;\n document.getElementById('dominant-topics-intro').textContent = municipalityData.thermometer.dominantTopics.intro;\n document.getElementById('dominant-topics').innerHTML = municipalityData.thermometer.dominantTopics.topics.map(topic => `<span class=\"px-3 py-1 bg-${topic.color}-100 text-${topic.color}-800 rounded-full text-sm font-semibold\">${topic.text}<\/span>`).join('');\n document.getElementById('comparative-sentiment-intro').textContent = \"Sentimiento neto promedio de Conil frente a otros municipios costeros de C\u00e1diz.\";\n \/\/ Positioning\n document.getElementById('positioning-intro').textContent = municipalityData.positioning.intro;\n document.getElementById('current-perception').innerHTML = municipalityData.positioning.currentPerception;\n document.getElementById('values-description').innerHTML = municipalityData.positioning.valuesDescription.map(desc => `<p>${desc}<\/p>`).join('');\n document.getElementById('desired-narrative-fit').innerHTML = municipalityData.positioning.desiredNarrativeFit;\n \/\/ Benchmarking\n document.getElementById('benchmarking-intro').textContent = municipalityData.benchmarking.intro;\n const tableHead = `<thead><tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\"><th class=\"py-3 px-4 border-b\">Municipio<\/th><th class=\"py-3 px-4 border-b\">Sentimiento Neto<\/th><th class=\"py-3 px-4 border-b\">Visibilidad<\/th><th class=\"py-3 px-4 border-b\">Engagement RRSS<\/th><th class=\"py-3 px-4 border-b\">Innovaci\u00f3n Digital<\/th><\/tr><\/thead>`;\n const tableBody = `<tbody>${municipalityData.benchmarking.tableData.map(row => `<tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-3 px-4 border-b\"><strong>${row.municipality}<\/strong><\/td><td class=\"py-3 px-4 border-b\">${row.sentiment}<\/td><td class=\"py-3 px-4 border-b\">${row.visibility}<\/td><td class=\"py-3 px-4 border-b\">${row.engagement}<\/td><td class=\"py-3 px-4 border-b\">${row.innovation}<\/td><\/tr>`).join('')}<\/tbody>`;\n document.getElementById('benchmarking-table').innerHTML = tableHead + tableBody;\n \/\/ KPIs\n document.getElementById('kpis-intro').textContent = municipalityData.kpis.intro;\n document.getElementById('kpis-container').innerHTML = municipalityData.kpis.list.map(kpi => `\n <div class=\"bg-${kpi.barColor}-50 p-4 rounded-xl border border-${kpi.barColor}-200 flex flex-col justify-between\">\n <h4 class=\"font-bold text-lg text-${kpi.barColor}-800 mb-2\">${kpi.title}<\/h4>\n <p class=\"text-3xl font-bold text-${kpi.barColor}-700 mb-2\">${kpi.value} <span class=\"text-sm font-normal text-${kpi.trendColor}-500\">${kpi.trend.includes('+') ? '\u25b2' : '\u25bc'} ${kpi.trend.replace(\/[+-]\/g, '')}<\/span><\/p>\n <p class=\"text-sm text-slate-700\">${kpi.description}<\/p>\n <div class=\"progress-bar-container mt-3\"><div class=\"progress-bar bg-${kpi.barColor}-500\" style=\"width: ${kpi.progress}%;\"><\/div><\/div>\n <\/div>`).join('');\n \/\/ Strategy\n document.getElementById('strategy-intro').textContent = municipalityData.strategy.intro;\n document.getElementById('strategy-recommendations').innerHTML = municipalityData.strategy.recommendations.map(rec => `\n <div class=\"p-4 bg-${rec.color}-50 rounded-xl border border-${rec.color}-200\">\n <h4 class=\"font-bold text-lg text-${rec.color}-800\">${rec.title}<\/h4>\n <ul class=\"list-disc list-inside text-sm text-slate-700 mt-2 space-y-1\">${rec.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul>\n <\/div>`).join('');\n document.getElementById('narrative-intro').textContent = municipalityData.strategy.narrative.intro;\n const narrativeTone = municipalityData.strategy.narrative.toneStyleAxes;\n const narrativeArgument = municipalityData.strategy.narrative.centralArgument;\n const narrativeUnifying = municipalityData.strategy.narrative.unifyingFramework;\n document.getElementById('narrative-details').innerHTML = `\n <h5 class=\"font-semibold text-lg text-indigo-800\">${narrativeTone.title}<\/h5>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">\n ${narrativeTone.items.map(item => Array.isArray(item) ? `<ul>${item.map(sub => `<li>${sub}<\/li>`).join('')}<\/ul>` : `<li>${item}<\/li>`).join('')}\n <\/ul>\n <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">${narrativeArgument.title}<\/h5>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">${narrativeArgument.items.map(item => `<li>${item}<\/li>`).join('')}<\/ul>\n <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">${narrativeUnifying.title}<\/h5>\n <p>${narrativeUnifying.text}<\/p>`;\n \/\/ Protocol\n document.getElementById('protocol-intro').textContent = municipalityData.protocol.intro;\n document.getElementById('protocol-details').innerHTML = municipalityData.protocol.sections.map(section => `\n <div><h4 class=\"font-bold text-lg text-indigo-800 mb-2\">${section.title}<\/h4><ul class=\"list-disc list-inside ml-4 space-y-1\">${section.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul><\/div>`).join('');\n \/\/ Voices\n document.getElementById('voices-intro').textContent = municipalityData.voices.intro;\n document.getElementById('voices-details').innerHTML = municipalityData.voices.sections.map(section => `\n <div><h4 class=\"font-bold text-lg text-indigo-800 mb-2\">${section.title}<\/h4><p>${section.description}<\/p><ul class=\"list-disc list-inside ml-4 space-y-1\">${section.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul><p class=\"mt-2 text-sm text-slate-600\"><strong>Estrategia:<\/strong> ${section.strategy}<\/p><\/div>`).join('');\n \/\/ Sports\n const sports = municipalityData.sports;\n document.getElementById('sports-intro').textContent = sports.intro;\n document.getElementById('sports-infrastructure').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfdf\ufe0f<\/span>${sports.infrastructure.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.infrastructure.description}<\/p><div class=\"overflow-x-auto mb-4\"><table class=\"min-w-full bg-white\"><thead><tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\"><th class=\"py-3 px-4 border-b\">Instalaci\u00f3n<\/th><th class=\"py-3 px-4 border-b\">Deporte Principal<\/th><th class=\"py-3 px-4 border-b\">Ubicaci\u00f3n<\/th><\/tr><\/thead><tbody>${sports.infrastructure.table.map(i => `<tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">${i.name}<\/td><td class=\"py-2 px-4 border-b\">${i.sport}<\/td><td class=\"py-2 px-4 border-b\">${i.location}<\/td><\/tr>`).join('')}<\/tbody><\/table><\/div><p class=\"text-slate-700\">${sports.infrastructure.analysis}<\/p>`;\n document.getElementById('sports-programs').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd38<\/span>${sports.programs.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.programs.description}<\/p><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Programas Anuales<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.programs.annual.map(p => `<li>${p}<\/li>`).join('')}<\/ul><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Actividades de Verano<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.programs.summer.map(p => `<li>${p}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.programs.analysis}<\/p>`;\n document.getElementById('sports-events').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfc6<\/span>${sports.events.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.events.description}<\/p><div class=\"chart-container h-[250px] md:h-[300px] mb-4\"><canvas id=\"eventPopularityChart\"><\/canvas><\/div><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Eventos Destacados<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.events.list.map(e => `<li>${e}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.events.analysis}<\/p>`;\n document.getElementById('sports-clubs').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd1d<\/span>${sports.clubs.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.clubs.description}<\/p><div class=\"chart-container h-[250px] md:h-[300px] mb-4\"><canvas id=\"clubImpactChart\"><\/canvas><\/div><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Clubes Relevantes<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.clubs.list.map(c => `<li>${c}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.clubs.analysis}<\/p>`;\n document.getElementById('sports-contact').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udcde<\/span>${sports.contact.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.contact.description}<\/p><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1\">${sports.contact.list.map(c => `<li>${c}<\/li>`).join('')}<\/ul><p class=\"text-slate-700 mt-4\">${sports.contact.analysis}<\/p>`;\n }\n \n let charts = {};\n function createChart(id, config) {\n const ctx = document.getElementById(id)?.getContext('2d');\n if (!ctx) return;\n if (charts[id]) charts[id].destroy();\n charts[id] = new Chart(ctx, config);\n }\n\n function renderBalanceCharts() {\n const data = municipalityData.balance.reputationChartData;\n createChart('reputationChart', {\n type: 'bar',\n data: { labels: data.logros.labels, datasets: [{ label: 'Sentimiento', data: data.logros.data, backgroundColor: '#10B981', borderRadius: 5 }] },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { min: -100, max: 100 } } }\n });\n const trendData = municipalityData.balance.sentimentTrend;\n createChart('sentimentTrendChart', {\n type: 'line',\n data: {\n labels: trendData.labels,\n datasets: [\n { label: 'Logros', data: trendData.logros, borderColor: '#10B981', backgroundColor: 'rgba(16, 185, 129, 0.2)', fill: true, tension: 0.3 },\n { label: 'Riesgos', data: trendData.riesgos, borderColor: '#EF4444', backgroundColor: 'rgba(239, 68, 68, 0.2)', fill: true, tension: 0.3 }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top' } }, scales: { y: { min: -100, max: 100 } } }\n });\n }\n function updateReputationDisplay(type) {\n const infoDisplay = document.getElementById('info-display');\n const keywordsDisplay = document.getElementById('keywords-display');\n const chart = charts['reputationChart'];\n if (!infoDisplay || !keywordsDisplay || !chart) return;\n\n if (type === 'logros') {\n infoDisplay.innerHTML = municipalityData.balance.logrosInfo;\n keywordsDisplay.innerHTML = municipalityData.balance.keywords.logros.map(kw => `<span class=\"inline-block p-2 m-1 bg-emerald-100 rounded-lg shadow-sm text-base font-medium text-emerald-800\">${kw}<\/span>`).join('');\n chart.data.labels = municipalityData.balance.reputationChartData.logros.labels;\n chart.data.datasets[0].data = municipalityData.balance.reputationChartData.logros.data;\n chart.data.datasets[0].backgroundColor = '#10B981';\n } else { \/\/ 'riesgos'\n infoDisplay.innerHTML = municipalityData.balance.riesgosInfo;\n keywordsDisplay.innerHTML = municipalityData.balance.keywords.riesgos.map(kw => `<span class=\"inline-block p-2 m-1 bg-red-100 rounded-lg shadow-sm text-base font-medium text-red-800\">${kw}<\/span>`).join('');\n chart.data.labels = municipalityData.balance.reputationChartData.riesgos.labels;\n chart.data.datasets[0].data = municipalityData.balance.reputationChartData.riesgos.data;\n chart.data.datasets[0].backgroundColor = '#EF4444';\n }\n chart.update();\n }\n \n function renderActorsCharts() {\n const data = municipalityData.actors.delegationSentiment;\n createChart('delegationSentimentChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [{\n label: 'Sentimiento Medio',\n data: data.data,\n backgroundColor: data.data.map(s => s >= 70 ? '#10B981' : s >= 40 ? '#FBBF24' : '#EF4444'),\n borderRadius: 5\n }]\n },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { min: -100, max: 100 } } }\n });\n }\n\n function renderDigitalCharts() {\n const mediaData = municipalityData.digital.mediaSentimentDetailed;\n createChart('mediaSentimentChart', {\n type: 'bar',\n data: {\n labels: mediaData.labels,\n datasets: [\n { label: 'Positivo', data: mediaData.positive, backgroundColor: '#10B981' },\n { label: 'Neutral', data: mediaData.neutral, backgroundColor: '#FBBF24' },\n { label: 'Negativo', data: mediaData.negative, backgroundColor: '#EF4444' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true, max: 100 } } }\n });\n const engagementData = municipalityData.digital.engagementMetrics;\n createChart('engagementMetricsChart', {\n type: 'bar',\n data: {\n labels: engagementData.labels,\n datasets: [{ label: 'Interacciones', data: engagementData.interacciones, backgroundColor: '#004369', borderRadius: 5 }]\n },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }\n });\n }\n\n function renderThermometerCharts() {\n const data = municipalityData.thermometer.comparativeSentiment;\n createChart('comparativeSentimentChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [{ label: 'Sentimiento Neto (%)', data: data.data, backgroundColor: data.labels.map(l => l === 'Conil' ? '#004369' : '#CBD5E1'), borderRadius: 5 }]\n },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { min: 0, max: 100 } } }\n });\n }\n\n function renderPositioningCharts() {\n const data = municipalityData.positioning.valuesPerception;\n createChart('valuesRadarChart', {\n type: 'radar',\n data: {\n labels: data.labels,\n datasets: [\n { label: 'Percepci\u00f3n Actual', data: data.perceived, borderColor: '#004369', backgroundColor: 'rgba(0, 67, 105, 0.2)' },\n { label: 'Relato Deseado', data: data.desired, borderColor: '#01949A', backgroundColor: 'rgba(1, 148, 154, 0.2)' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { r: { suggestedMin: 0, suggestedMax: 10 } } }\n });\n }\n\n function renderBenchmarkingCharts() {\n const data = municipalityData.benchmarking.socialMediaComparison;\n createChart('socialMediaComparisonChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [\n { label: 'Facebook', data: data.facebook, backgroundColor: '#1877F2' },\n { label: 'Twitter (X)', data: data.twitter, backgroundColor: '#1DA1F2' },\n { label: 'Instagram', data: data.instagram, backgroundColor: '#C13584' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }\n });\n }\n\n function renderSportsCharts() {\n const eventData = municipalityData.sports.events.chart;\n createChart('eventPopularityChart', {\n type: 'bar',\n data: { labels: eventData.labels, datasets: [{ label: 'Popularidad', data: eventData.data, backgroundColor: '#81B29A', borderRadius: 5 }] },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { max: 100 } } }\n });\n const clubData = municipalityData.sports.clubs.chart;\n createChart('clubImpactChart', {\n type: 'bar',\n data: { labels: clubData.labels, datasets: [{ label: 'Impacto', data: clubData.data, backgroundColor: '#F2CC8F', borderRadius: 5 }] },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { max: 100 } } }\n });\n }\n\n function setupTimeline() {\n const timelineContainer = document.querySelector('.timeline-container');\n const timelineFilterButtons = document.querySelectorAll('.timeline-filter-button');\n const render = (filter = 'all') => {\n timelineContainer.innerHTML = '';\n let isLeft = true;\n municipalityData.timeline.events.forEach(item => {\n const itemTags = item.tags || [];\n if (filter === 'all' || item.type === filter || itemTags.includes(filter)) {\n const itemDiv = document.createElement('div');\n itemDiv.className = `timeline-item ${isLeft ? 'left' : 'right'}`;\n itemDiv.innerHTML = `<div class=\"timeline-content shadow-md\"><h4 class=\"font-bold text-slate-900 text-base\">${item.title}<\/h4><p class=\"text-xs text-slate-600 mb-2\">${item.date} <span class=\"font-semibold text-slate-700\">(${item.type})<\/span><\/p><p class=\"text-sm text-slate-700\">${item.description}<\/p><\/div>`;\n timelineContainer.appendChild(itemDiv);\n isLeft = !isLeft;\n }\n });\n };\n timelineFilterButtons.forEach(button => {\n button.addEventListener('click', () => {\n timelineFilterButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n render(button.dataset.filter);\n });\n });\n render(); \/\/ Initial render\n }\n\n function setupPoll() {\n const pollResult = document.getElementById('poll-result');\n let votes = { A: 0, B: 0 };\n const update = () => {\n const total = votes.A + votes.B;\n if (total === 0) { pollResult.textContent = 'Selecciona una opci\u00f3n para simular.'; return; }\n const percentA = ((votes.A \/ total) * 100).toFixed(1);\n const percentB = ((votes.B \/ total) * 100).toFixed(1);\n pollResult.innerHTML = `<p><strong>Potenciar Transparencia:<\/strong> ${percentA}% | <strong>Mayor Presencia Personal:<\/strong> ${percentB}%<\/p>`;\n };\n document.getElementById('poll-option-A').addEventListener('click', () => { votes.A++; update(); });\n document.getElementById('poll-option-B').addEventListener('click', () => { votes.B++; update(); });\n update();\n }\n\n \/\/ Initial Setup\n setupNavigation();\n populateStaticContent();\n activateSection('balance');\n document.getElementById('btn-logros').addEventListener('click', () => updateReputationDisplay('logros'));\n document.getElementById('btn-riesgos').addEventListener('click', () => updateReputationDisplay('riesgos'));\n updateReputationDisplay('logros'); \/\/ Load default view\n setupTimeline();\n setupPoll();\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>An\u00e1lisis Interactivo de Reputaci\u00f3n: Ayuntamiento de Conil An\u00e1lisis de Reputaci\u00f3n y Presencia Digital Balanza Reputacional Mapa de Actores Foco en la Alcaldesa An\u00e1lisis Digital L\u00ednea de Tiempo Matriz R&O Term\u00f3metro Ciudadano Diagn\u00f3stico Posicionamiento Benchmarking Panel de KPIs Estrategia y Narrativa Protocolo Crisis Foco en Vocer\u00edas Deportes en Conil Sobre Este An\u00e1lisis Balanza Reputacional: La Doble…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-analisis"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgDuos-H","_links":{"self":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":8,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43\/revisions\/415"}],"wp:attachment":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43,"date":"2025-06-23T05:41:28","date_gmt":"2025-06-23T05:41:28","guid":{"rendered":"https:\/\/buscomunicacion.com\/?p=43"},"modified":"2025-07-11T08:46:09","modified_gmt":"2025-07-11T08:46:09","slug":"informe-de-inteligencia-de-medios-y-comunicacion-ayuntamiento-de-conil-de-la-frontera","status":"publish","type":"post","link":"https:\/\/buscomunicacion.com\/index.php\/2025\/06\/23\/informe-de-inteligencia-de-medios-y-comunicacion-ayuntamiento-de-conil-de-la-frontera\/","title":{"rendered":"Conil de la Frontera"},"content":{"rendered":"\n\n\n\n \n \n An\u00e1lisis Interactivo de Reputaci\u00f3n: Ayuntamiento de Conil<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc; \/* slate-50 *\/\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 40vh;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .nav-button {\n transition: all 0.3s ease;\n white-space: nowrap;\n background-color: #ffffff;\n color: #004369; \/* Custom Blue *\/\n padding: 0.625rem 1.25rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n }\n .nav-button:hover {\n background-color: #e0f2fe; \/* Light Blue *\/\n }\n .nav-button.active {\n background-color: #004369; \/* Custom Blue *\/\n color: #ffffff;\n font-weight: 600;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 2px #01949A; \/* Custom Teal Ring *\/\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .timeline-container {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px 0;\n }\n .timeline-container::after {\n content: '';\n position: absolute;\n width: 4px;\n background-color: #CBD5E1;\n top: 0;\n bottom: 0;\n left: 50%;\n margin-left: -2px;\n }\n .timeline-item {\n padding: 10px 40px;\n position: relative;\n background-color: inherit;\n width: 50%;\n }\n .timeline-item::after {\n content: '';\n position: absolute;\n width: 25px;\n height: 25px;\n right: -17px;\n background-color: #DB1F48; \/* Custom Red *\/\n border: 4px solid #ffffff;\n top: 15px;\n border-radius: 50%;\n z-index: 1;\n }\n .timeline-item.left { left: 0; }\n .timeline-item.right { left: 50%; }\n .timeline-item.left::after { left: 98.5%; }\n .timeline-item.right::after { left: -17px; }\n .timeline-content {\n padding: 20px 30px;\n background-color: #f1f5f9; \/* slate-100 *\/\n position: relative;\n border-radius: 6px;\n }\n @media screen and (max-width: 768px) {\n .timeline-container::after { left: 31px; }\n .timeline-item {\n width: 100%;\n padding-left: 70px;\n padding-right: 25px;\n box-sizing: border-box;\n }\n .timeline-item.right { left: 0%; }\n .timeline-item.left::after, .timeline-item.right::after { left: 15px; }\n }\n .progress-bar-container {\n width: 100%; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;\n }\n .progress-bar {\n height: 20px; border-radius: 5px; text-align: center; color: white; line-height: 20px; transition: width 0.5s ease-in-out;\n }\n .sentiment-gauge {\n width: 150px; height: 150px; border-radius: 50%; position: relative;\n background: conic-gradient(#DB1F48 0% 33%, #FBBF24 33% 66%, #01949A 66% 100%);\n display: flex; align-items: center; justify-content: center;\n }\n .sentiment-gauge-inner {\n width: 120px; height: 120px; border-radius: 50%; background-color: white;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.5rem; font-weight: bold; color: #333;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n \n <header class=\"text-center mb-8 flex flex-col items-center\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900\">An\u00e1lisis de Reputaci\u00f3n y Presencia Digital<\/h1>\n <h2 id=\"municipality-name\" class=\"text-xl md:text-2xl text-slate-600 mt-2\"><\/h2>\n <\/header>\n\n <nav class=\"flex flex-wrap justify-center gap-2 mb-4 bg-blue-50 p-2 rounded-lg shadow-sm overflow-x-auto pb-2\">\n <button data-target=\"balance\" class=\"nav-button active\">Balanza Reputacional<\/button>\n <button data-target=\"actores\" class=\"nav-button\">Mapa de Actores<\/button>\n <button data-target=\"alcaldesa\" class=\"nav-button\">Foco en la Alcaldesa<\/button>\n <button data-target=\"digital\" class=\"nav-button\">An\u00e1lisis Digital<\/button>\n <button data-target=\"timeline\" class=\"nav-button\">L\u00ednea de Tiempo<\/button>\n <button data-target=\"matriz-ro\" class=\"nav-button\">Matriz R&O<\/button>\n <button data-target=\"termometro\" class=\"nav-button\">Term\u00f3metro Ciudadano<\/button>\n <button data-target=\"posicionamiento\" class=\"nav-button\">Diagn\u00f3stico Posicionamiento<\/button>\n <button data-target=\"benchmarking\" class=\"nav-button\">Benchmarking<\/button>\n <button data-target=\"kpis\" class=\"nav-button\">Panel de KPIs<\/button>\n <button data-target=\"estrategia\" class=\"nav-button\">Estrategia y Narrativa<\/button>\n <button data-target=\"protocolo-crisis\" class=\"nav-button\">Protocolo Crisis<\/button>\n <button data-target=\"vocerias\" class=\"nav-button\">Foco en Vocer\u00edas<\/button>\n <button data-target=\"deportes\" class=\"nav-button\">Deportes en Conil<\/button>\n <button data-target=\"about\" class=\"nav-button\">Sobre Este An\u00e1lisis<\/button>\n <\/nav>\n\n <main>\n <section id=\"balance\" class=\"content-section active\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Balanza Reputacional: La Doble Cara de la Gesti\u00f3n en Conil<\/h3>\n <p id=\"balance-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n \n <div class=\"flex justify-center gap-4 mb-8\">\n <button id=\"btn-logros\" class=\"px-6 py-2 bg-emerald-500 text-white font-semibold rounded-lg shadow-md hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-all\">\u2705 Logros de Gesti\u00f3n<\/button>\n <button id=\"btn-riesgos\" class=\"px-6 py-2 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 transition-all\">\u26a0\ufe0f Riesgos Cr\u00edticos<\/button>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div id=\"info-display\" class=\"space-y-4\"><\/div>\n <div class=\"w-full\">\n <div class=\"chart-container\"><canvas id=\"reputationChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Gr\u00e1fico de sentimiento medi\u00e1tico estimado por tema.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Evoluci\u00f3n del Sentimiento (<span id=\"sentiment-trend-period\"><\/span>)<\/h4>\n <p id=\"sentiment-trend-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[450px]\"><canvas id=\"sentimentTrendChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento promedio mensual para logros y riesgos.<\/p>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Palabras Clave Destacadas<\/h4>\n <p class=\"text-center text-slate-600 mb-4 max-w-3xl mx-auto\">Conceptos m\u00e1s relevantes asociados a los temas seleccionados.<\/p>\n <div id=\"keywords-display\" class=\"flex flex-wrap justify-center gap-3 text-center\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"actores\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Mapa de Actores Clave en Conil<\/h3>\n <p id=\"actors-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"actor-cards-container\" class=\"grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10\"><\/div>\n \n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por \u00c1reas Municipales<\/h4>\n <p id=\"delegation-sentiment-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"delegationSentimentChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Valores de sentimiento para cada \u00e1rea.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"alcaldesa\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en la Alcaldesa: Inmaculada S\u00e1nchez Zara<\/h3>\n <p id=\"mayor-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div id=\"mayor-narrative\"><\/div>\n <div id=\"mayor-perception\"><\/div>\n <\/div>\n\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas Clave Asociados a la Alcaldesa<\/h4>\n <div id=\"mayor-keywords\" class=\"flex flex-wrap justify-center gap-3 text-center\"><\/div>\n <\/div>\n\n <div id=\"mayor-recommendations\" class=\"mt-8 pt-8 border-t border-gray-200\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"digital\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">An\u00e1lisis de la Presencia Digital en Conil<\/h3>\n <p id=\"digital-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"digital-content\" class=\"grid grid-cols-1 md:grid-cols-2 gap-8\"><\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por Tipo de Medio<\/h4>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"mediaSentimentChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">M\u00e9tricas de Engagement Digital<\/h4>\n <div class=\"chart-container h-[300px] md:h-[350px]\"><canvas id=\"engagementMetricsChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"timeline\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">L\u00ednea de Tiempo de Eventos Clave en Conil<\/h3>\n <p id=\"timeline-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\">\n <button data-filter=\"all\" class=\"timeline-filter-button active px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg text-sm hover:bg-indigo-100 transition-colors\">Todos<\/button>\n <button data-filter=\"Logro\" class=\"timeline-filter-button px-4 py-2 bg-emerald-100 rounded-lg text-sm hover:bg-emerald-200 transition-colors\">Logros<\/button>\n <button data-filter=\"Crisis\" class=\"timeline-filter-button px-4 py-2 bg-red-100 rounded-lg text-sm hover:bg-red-200 transition-colors\">Crisis<\/button>\n <button data-filter=\"Pol\u00edtica\" class=\"timeline-filter-button px-4 py-2 bg-purple-100 rounded-lg text-sm hover:bg-purple-200 transition-colors\">Pol\u00edtica<\/button>\n <button data-filter=\"Turismo\" class=\"timeline-filter-button px-4 py-2 bg-blue-100 rounded-lg text-sm hover:bg-blue-200 transition-colors\">Turismo<\/button>\n <\/div>\n <div class=\"timeline-container\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"matriz-ro\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Matriz de Riesgos y Oportunidades Narrativas en Conil<\/h3>\n <p id=\"matrix-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"bg-red-50 p-4 rounded-xl border border-red-200\">\n <h4 class=\"font-bold text-lg text-red-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udea8<\/span>Riesgos Cr\u00edticos<\/h4>\n <ul id=\"risks-list\" class=\"list-disc list-inside text-sm text-slate-700 space-y-2\"><\/ul>\n <\/div>\n <div class=\"bg-emerald-50 p-4 rounded-xl border border-emerald-200\">\n <h4 class=\"font-bold text-lg text-emerald-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\u2728<\/span>Oportunidades Narrativas<\/h4>\n <ul id=\"opportunities-list\" class=\"list-disc list-inside text-sm text-slate-700 space-y-2\"><\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"termometro\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Term\u00f3metro Ciudadano: Pulso de la Opini\u00f3n P\u00fablica en Conil<\/h3>\n <p id=\"thermometer-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\n <div>\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento General (Promedio)<\/h4>\n <p id=\"overall-sentiment-text\" class=\"text-center text-slate-600 mb-4\"><\/p>\n <div class=\"flex justify-center mb-6\">\n <div class=\"sentiment-gauge\"><div id=\"overall-sentiment-value\" class=\"sentiment-gauge-inner\"><\/div><\/div>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: -100% (Muy Negativo) a +100% (Muy Positivo).<\/p>\n <\/div>\n <div>\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas de Conversaci\u00f3n Dominantes<\/h4>\n <p id=\"dominant-topics-intro\" class=\"text-center text-slate-600 mb-4\"><\/p>\n <div id=\"dominant-topics\" class=\"flex flex-wrap justify-center gap-2\"><\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Sentimiento con Municipios Hom\u00f3logos<\/h4>\n <p id=\"comparative-sentiment-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"comparativeSentimentChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"posicionamiento\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Diagn\u00f3stico de Posicionamiento Institucional en Conil<\/h3>\n <p id=\"positioning-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"space-y-6 text-slate-700\">\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Percepci\u00f3n Actual del Ayuntamiento<\/h4>\n <p id=\"current-perception\"><\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Valores Proyectados (Percepci\u00f3n vs. Deseado)<\/h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center mt-4\">\n <div class=\"w-full\">\n <div class=\"chart-container h-[300px] md:h-[350px]\"><canvas id=\"valuesRadarChart\"><\/canvas><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: 0 (Bajo) a 10 (Alto)<\/p>\n <\/div>\n <div id=\"values-description\" class=\"text-sm space-y-2\"><\/div>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Encaje con el Relato Deseado<\/h4>\n <p id=\"desired-narrative-fit\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"benchmarking\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Benchmarking de Ayuntamientos Costeros de C\u00e1diz<\/h3>\n <p id=\"benchmarking-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div class=\"overflow-x-auto mb-8\">\n <table id=\"benchmarking-table\" class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\"><\/table>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Datos para fines ilustrativos.<\/p>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Presencia en Redes Sociales<\/h4>\n <div class=\"chart-container h-[350px] md:h-[400px]\"><canvas id=\"socialMediaComparisonChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"kpis\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Panel de KPIs Reputacionales en Conil<\/h3>\n <p id=\"kpis-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"kpis-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><\/div>\n <p class=\"text-xs text-center text-slate-500 mt-4\">Los valores son simulados y las flechas indican tendencias recientes.<\/p>\n <\/div>\n <\/section>\n\n <section id=\"estrategia\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Estrategia y Recomendaciones de Comunicaci\u00f3n en Conil<\/h3>\n <p id=\"strategy-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"strategy-recommendations\" class=\"space-y-6\"><\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Narrativa Recomendada y Argumentario Central<\/h4>\n <p id=\"narrative-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"narrative-details\" class=\"space-y-4 text-slate-700\"><\/div>\n <\/div>\n <div class=\"mt-8 pt-8 border-t border-gray-200\">\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Simulador de Opini\u00f3n Ciudadana: \u00bfQu\u00e9 estrategia digital preferir\u00edas?<\/h4>\n <div class=\"flex justify-center gap-4\">\n <button id=\"poll-option-A\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600\">Potenciar Transparencia (Datos)<\/button>\n <button id=\"poll-option-B\" class=\"px-6 py-2 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-600\">Mayor Presencia Personal (Alcaldesa)<\/button>\n <\/div>\n <div id=\"poll-result\" class=\"text-center text-lg font-semibold mt-6 text-slate-700\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"protocolo-crisis\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Protocolo de Actuaci\u00f3n Ante Crisis Reputacional en Conil<\/h3>\n <p id=\"protocol-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"protocol-details\" class=\"space-y-6 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"vocerias\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en Vocer\u00edas Locales y Medios Influenciadores en Conil<\/h3>\n <p id=\"voices-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"voices-details\" class=\"space-y-6 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"deportes\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">An\u00e1lisis del Ecosistema Deportivo en Conil<\/h3>\n <p id=\"sports-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"sports-infrastructure\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-programs\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-events\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-clubs\" class=\"mb-8 pb-8 border-b border-gray-200\"><\/div>\n <div id=\"sports-contact\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\" class=\"content-section\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Sobre Este An\u00e1lisis Interactivo<\/h3>\n <p id=\"about-intro\" class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\"><\/p>\n <div id=\"about-details\" class=\"space-y-4 text-slate-700\"><\/div>\n <\/div>\n <\/section>\n <\/main>\n \n <footer class=\"text-center mt-12 text-sm text-gray-500\">\n <p>An\u00e1lisis de Reputaci\u00f3n y Presencia Digital del Ayuntamiento de Conil de la Frontera.<\/p>\n <\/footer>\n <\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const municipalityData = {\n name: \"Ayuntamiento de Conil de la Frontera\",\n period: \"\u00daltimo trimestre 2024 - Junio 2025\",\n about: {\n intro: \"Este panel interactivo ha sido dise\u00f1ado para ofrecer una visi\u00f3n completa y accesible de la reputaci\u00f3n y la gesti\u00f3n del Ayuntamiento de Conil, bas\u00e1ndose en un an\u00e1lisis detallado de la informaci\u00f3n p\u00fablica disponible.\",\n details: [\n { strong: \"Sujeto Principal:\", text: \"Ayuntamiento de Conil de la Frontera (Gobierno Tripartito: AxS\u00ed, PP, Siempre Conil) y Oposici\u00f3n (IU, PSOE).\" },\n { strong: \"Periodo de An\u00e1lisis:\", text: \"Junio 2023 - Junio 2025 (simulado para tendencias).\" },\n { strong: \"\u00c1mbito Geogr\u00e1fico:\", text: \"Conil de la Frontera, medios y redes de la provincia de C\u00e1diz.\" },\n { strong: \"Objetivos Estrat\u00e9gicos:\", list: [\n \"Evaluar la imagen del nuevo gobierno de coalici\u00f3n.\",\n \"Detectar los principales focos de conflicto y polarizaci\u00f3n.\",\n \"Medir el impacto de la crisis de Urbanismo.\",\n \"Identificar oportunidades para fortalecer la narrativa del 'cambio'.\"\n ]}\n ]\n },\n balance: {\n intro: \"La imagen p\u00fablica del Ayuntamiento de Conil muestra una clara dualidad: fortalezas en la promoci\u00f3n tur\u00edstica y cultural, que generan un sentimiento positivo, frente a graves desaf\u00edos en la gesti\u00f3n urban\u00edstica y la cohesi\u00f3n pol\u00edtica, que son una fuente constante de riesgo reputacional.\",\n logrosInfo: `\n <p class=\"text-slate-700\">El gobierno tripartito ha logrado capitalizar \u00e1reas de gesti\u00f3n con alta visibilidad y percepci\u00f3n positiva:<\/p>\n <ul class=\"list-disc list-inside ml-4 text-sm text-slate-700 space-y-1\">\n <li><strong>\u00c9xito Continuado del Modelo Tur\u00edstico:<\/strong> Conil mantiene su estatus como destino de primer nivel, con campa\u00f1as de promoci\u00f3n efectivas y una oferta gastron\u00f3mica y de ocio muy valorada.<\/li>\n <li><strong>Agenda Cultural y Deportiva Din\u00e1mica:<\/strong> La organizaci\u00f3n de eventos como el Campus Iker Casillas o el Conil Pride proyecta una imagen de municipio activo y moderno.<\/li>\n <li><strong>Inversiones en Infraestructuras Clave:<\/strong> Proyectos como los nuevos dep\u00f3sitos de agua se presentan como una gesti\u00f3n previsora y responsable para garantizar los servicios.<\/li>\n <\/ul>\n `,\n riesgosInfo: `\n <p class=\"text-slate-700\">La gesti\u00f3n se ve empa\u00f1ada por una serie de desaf\u00edos cr\u00edticos que dominan la narrativa negativa:<\/p>\n <ul class=\"list-disc list-inside ml-4 text-sm text-slate-700 space-y-1\">\n <li><strong>Crisis de Urbanismo y Judicializaci\u00f3n:<\/strong> La investigaci\u00f3n de la Fiscal\u00eda y las acusaciones de 'ocultismo' del PSOE son el principal riesgo para la credibilidad del gobierno.<\/li>\n <li><strong>Masificaci\u00f3n y Sostenibilidad:<\/strong> El debate sobre la saturaci\u00f3n tur\u00edstica, la presi\u00f3n sobre la vivienda y los recursos naturales genera un creciente malestar social.<\/li>\n <li><strong>Conflictividad Pol\u00edtica y Laboral:<\/strong> La alta polarizaci\u00f3n con la oposici\u00f3n y las tensiones con sindicatos proyectan una imagen de inestabilidad y desgaste.<\/li>\n <\/ul>\n `,\n keywords: {\n logros: ['Turismo', 'Playas', 'Cultura', 'Eventos', 'Gastronom\u00eda', 'Inversi\u00f3n', 'Agua'],\n riesgos: ['Urbanismo', 'Fiscal\u00eda', 'Ocultismo', 'Masificaci\u00f3n', 'Vivienda', 'Tasas', 'Polarizaci\u00f3n']\n },\n reputationChartData: {\n logros: {\n labels: ['Turismo', 'Cultura', 'Deportes', 'Inversi\u00f3n Agua'],\n data: [90, 85, 80, 70]\n },\n riesgos: {\n labels: ['Crisis Urbanismo', 'Masificaci\u00f3n', 'Conflictos Laborales', 'Subida Tasas'],\n data: [-95, -75, -60, -70]\n }\n },\n sentimentTrend: {\n labels: ['Oct 24', 'Nov 24', 'Dic 24', 'Ene 25', 'Feb 25', 'Mar 25', 'Abr 25', 'May 25', 'Jun 25'],\n logros: [80, 82, 85, 83, 85, 88, 86, 90, 88],\n riesgos: [-70, -75, -72, -80, -85, -90, -92, -95, -90]\n }\n },\n actors: {\n intro: \"La opini\u00f3n p\u00fablica en Conil est\u00e1 moldeada por un ecosistema de actores clave: el gobierno tripartito, una oposici\u00f3n muy activa (IU y PSOE), medios de comunicaci\u00f3n y una sociedad civil cada vez m\u00e1s preocupada por el modelo de desarrollo.\",\n government: {\n title: \"Gobierno Municipal (Tripartito)\",\n icon: \"\ud83c\udfdb\ufe0f\",\n details: [\n \"<strong class=\\\"text-blue-900\\\">Inmaculada S\u00e1nchez (Alcaldesa, AxS\u00ed):<\/strong> Lidera la narrativa del 'cambio necesario'.\",\n \"<strong class=\\\"text-blue-900\\\">Antonio Arag\u00f3n (1er Tte. Alcalde, PP):<\/strong> Conexi\u00f3n con Diputaci\u00f3n y gesti\u00f3n cultural.\",\n \"<strong class=\\\"text-blue-900\\\">Siempre Conil:<\/strong> Socio clave para la mayor\u00eda de gobierno.\"\n ],\n links: [{ text: \"Web Oficial Ayuntamiento Conil\", url: \"https:\/\/www.conil.org\/\" }]\n },\n mediaVoices: {\n title: \"Oposici\u00f3n (IU y PSOE)\",\n icon: \"\ud83d\udde3\ufe0f\",\n details: [\n \"<strong class=\\\"text-yellow-900\\\">Izquierda Unida:<\/strong> Critica la 'par\u00e1lisis' y la gesti\u00f3n de servicios, defendiendo su legado.\",\n \"<strong class=\\\"text-yellow-900\\\">PSOE:<\/strong> Ejerce una dura fiscalizaci\u00f3n de la legalidad, con la denuncia de 'ocultismo' como eje central.\"\n ],\n links: [{ text: \"Noticias de la oposici\u00f3n\", url: \"https:\/\/www.google.com\/search?q=oposicion+ayuntamiento+conil\" }]\n },\n citizenship: {\n title: \"Ciudadan\u00eda y Colectivos\",\n icon: \"\ud83d\udc65\",\n details: [\n \"<strong class=\\\"text-green-900\\\">Asociaciones de Hosteleros y Comerciantes:<\/strong> Actores clave en el debate sobre el modelo tur\u00edstico.\",\n \"<strong class=\\\"text-green-900\\\">Colectivos Ecologistas:<\/strong> Voces cr\u00edticas en temas de sostenibilidad y urbanismo.\",\n \"<strong class=\\\"text-green-900\\\">Asociaciones de Vecinos:<\/strong> Canalizan el malestar por la masificaci\u00f3n, el ruido y los servicios.\"\n ],\n links: [{ text: \"Buscar Asociaciones Conil\", url: \"https:\/\/www.google.com\/search?q=asociaciones+conil\" }]\n },\n delegationSentiment: {\n labels: ['Urbanismo', 'Turismo', 'Hacienda', 'Cultura', 'Medio Ambiente', 'Servicios Sociales'],\n data: [-90, 85, -60, 80, 50, 70]\n }\n },\n mayor: {\n intro: \"La figura de la alcaldesa Inmaculada S\u00e1nchez es central en la reputaci\u00f3n del Ayuntamiento. Su liderazgo se asocia con la narrativa del 'cambio', pero tambi\u00e9n concentra las cr\u00edticas de la oposici\u00f3n.\",\n narrative: `\n <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Narrativa y Mensajes Clave<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">\n <p>La alcaldesa se proyecta como una l\u00edder pragm\u00e1tica, enfocada en la gesti\u00f3n de los problemas 'heredados' y en la b\u00fasqueda de un modelo de desarrollo m\u00e1s sostenible para Conil.<\/p>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">\n <li>\u00c9nfasis en la necesidad de 'regeneraci\u00f3n' y 'transparencia'.<\/li>\n <li>Defensa de un turismo de calidad frente a la masificaci\u00f3n.<\/li>\n <li>Compromiso con la mejora de infraestructuras clave como el agua.<\/li>\n <\/ul>\n <\/div>`,\n perception: `\n <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Percepci\u00f3n P\u00fablica<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">\n <p>La percepci\u00f3n est\u00e1 polarizada. Para sus partidarios, representa una alternativa necesaria tras 28 a\u00f1os de gobierno de IU. Para la oposici\u00f3n y sus simpatizantes, es la responsable de una gesti\u00f3n 'opaca' y 'paralizada'.<\/p>\n <div class=\"flex justify-center mb-6 mt-4\">\n <div class=\"sentiment-gauge\" style=\"background: conic-gradient(#DB1F48 0% 40%, #FBBF24 40% 60%, #01949A 60% 100%);\">\n <div class=\"sentiment-gauge-inner\">20%<\/div>\n <\/div>\n <\/div>\n <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento neto promedio asociado a la figura de la alcaldesa (polarizado).<\/p>\n <\/div>`,\n keywords: ['Cambio', 'Regeneraci\u00f3n', 'Turismo', 'Sostenibilidad', 'Urbanismo', 'Ocultismo', 'Pacto'],\n recommendations: `\n <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Recomendaciones de Comunicaci\u00f3n para la Alcaldesa<\/h4>\n <ul class=\"list-disc list-inside text-sm text-slate-700 space-y-2 max-w-3xl mx-auto\">\n <li><strong>Liderazgo en Transparencia:<\/strong> Asumir personalmente la comunicaci\u00f3n en la crisis de Urbanismo, ofreciendo m\u00e1xima colaboraci\u00f3n y datos contrastados.<\/li>\n <li><strong>Visi\u00f3n de Futuro:<\/strong> Articular un relato claro sobre el modelo de Conil deseado, que equilibre desarrollo y calidad de vida.<\/li>\n <li><strong>Cercan\u00eda y Di\u00e1logo:<\/strong> Potenciar la presencia en foros ciudadanos para contrarrestar la imagen de lejan\u00eda y escuchar directamente las preocupaciones vecinales.<\/li>\n <\/ul>`\n },\n digital: {\n intro: \"La estrategia digital del Ayuntamiento de Conil es funcional para la promoci\u00f3n, pero se ve desbordada por la conversaci\u00f3n negativa y la polarizaci\u00f3n en canales no oficiales.\",\n officialStrategy: {\n title: \"Comunicaci\u00f3n Institucional Centralizada\",\n details: \"<p class=\\\"text-sm text-slate-700 mb-3\\\">La comunicaci\u00f3n se centra en la web y redes oficiales, con un fuerte enfoque en turismo y agenda positiva.<\/p>\",\n points: [\n { type: \"plus\", text: \"<strong>Fortaleza:<\/strong> Mensaje unificado y de alta calidad en la promoci\u00f3n tur\u00edstica.\" },\n { type: \"minus\", text: \"<strong>Debilidad:<\/strong> Incapacidad para contrarrestar eficazmente las narrativas negativas que surgen en otros foros.\" }\n ],\n links: [{ text: \"Web Oficial\", url: \"https:\/\/www.conil.org\/\" }]\n },\n unofficialPulse: {\n title: \"El Pulso Ciudadano en Canales No Oficiales\",\n details: \"<p class=\\\"text-sm text-slate-700 mb-3\\\">El debate real y la cr\u00edtica m\u00e1s dura se producen en grupos de Facebook y perfiles de opini\u00f3n locales.<\/p>\",\n points: [\n { text: \"<strong>Grupos de Facebook:<\/strong> Son el principal foro de quejas sobre masificaci\u00f3n, limpieza, ruido y gesti\u00f3n pol\u00edtica.\" },\n { text: \"<strong>Medios Cr\u00edticos:<\/strong> Medios locales y provinciales se hacen eco de las denuncias de la oposici\u00f3n, amplificando la crisis.\" }\n ],\n links: [{ text: \"Buscar 'Conil Opina' (Facebook)\", url: \"https:\/\/www.google.com\/search?q=grupo+facebook+conil+opina\" }]\n },\n mediaSentimentDetailed: {\n labels: ['Canales Oficiales', 'Prensa Local', 'Redes Sociales (No Oficiales)'],\n positive: [95, 40, 20],\n neutral: [5, 30, 25],\n negative: [0, 30, 55]\n },\n engagementMetrics: {\n labels: ['Web Oficial', 'Facebook', 'Instagram', 'Grupos Vecinales'],\n interacciones: [500, 1200, 1500, 2500]\n }\n },\n timeline: {\n intro: \"Explore los hitos que han marcado la agenda municipal y medi\u00e1tica en Conil desde la formaci\u00f3n del nuevo gobierno.\",\n events: [\n { date: 'Jun 2023', title: 'Pacto de Gobierno Tripartito', description: 'AxS\u00ed, PP y Siempre Conil firman el acuerdo que desbanca a IU tras 28 a\u00f1os.', type: 'Pol\u00edtica' },\n { date: 'Ene 2024', title: 'Pol\u00e9mica por Cartel de Carnaval', description: 'Acusaciones de plagio gestionadas con un comunicado conjunto.', type: 'Crisis' },\n { date: 'Feb 2024', title: 'Denuncia de \"Pleno Bochornoso\"', description: 'IU acusa al gobierno de actitudes impositivas y amenazas.', type: 'Pol\u00edtica' },\n { date: 'Abr 2025', title: 'Dimisi\u00f3n Concejal de Urbanismo', description: 'Pedro P\u00e9rez (PP) dimite alegando motivos personales, evidenciando la presi\u00f3n en el \u00e1rea.', type: 'Crisis' },\n { date: 'May 2025', title: 'PSOE Denuncia \"Ocultismo\"', description: 'El PSOE acusa a la alcaldesa de ocultar un requerimiento de la Fiscal\u00eda sobre Urbanismo.', type: 'Crisis' },\n { date: 'Jun 2025', title: 'Presentaci\u00f3n Campus Iker Casillas', description: 'Evento de alto perfil que refuerza la imagen de Conil como destino deportivo.', type: 'Logro', tags: ['Turismo'] }\n ]\n },\n matrixRO: {\n intro: \"Esta matriz eval\u00faa los principales vectores de exposici\u00f3n reputacional y las ventanas para generar un relato institucional positivo en Conil.\",\n risks: [\n \"<strong>Judicializaci\u00f3n de la pol\u00edtica:<\/strong> La crisis de Urbanismo puede derivar en un largo proceso judicial con un goteo constante de noticias negativas.\",\n \"<strong>Fractura social por el turismo:<\/strong> El aumento de la 'turismofobia' puede llevar a protestas y da\u00f1ar la imagen de Conil como destino acogedor.\",\n \"<strong>Ingobernabilidad:<\/strong> La tensi\u00f3n en el pacto tripartito o la presi\u00f3n de la oposici\u00f3n podr\u00edan paralizar la gesti\u00f3n municipal.\",\n \"<strong>Desgaste de la narrativa del 'cambio':<\/strong> Si no se perciben mejoras tangibles, la promesa de regeneraci\u00f3n puede volverse en contra del gobierno.\"\n ],\n opportunities: [\n \"<strong>Liderazgo en Transparencia:<\/strong> Convertir la crisis de Urbanismo en una oportunidad para demostrar un compromiso real con la transparencia, desarmando a la oposici\u00f3n.\",\n \"<strong>Pacto por un Turismo Sostenible:<\/strong> Liderar un di\u00e1logo con todos los actores para crear un modelo tur\u00edstico de futuro que sea un referente.\",\n \"<strong>Capitalizar la Agenda Positiva:<\/strong> Unificar los \u00e9xitos en cultura y deportes bajo una narrativa de 'calidad de vida' que contrarreste el ruido pol\u00edtico.\",\n \"<strong>Comunicaci\u00f3n Pedag\u00f3gica:<\/strong> Explicar de forma clara y directa las decisiones impopulares (ej. tasas del agua) para ganarse la comprensi\u00f3n ciudadana.\"\n ]\n },\n thermometer: {\n intro: \"Una escucha activa nos permite comprender el sentimiento general, los temas de conversaci\u00f3n dominantes y c\u00f3mo se compara Conil con municipios hom\u00f3logos.\",\n overallSentiment: {\n text: \"La percepci\u00f3n ciudadana es de alta **polarizaci\u00f3n**. Existe un sentimiento positivo en torno al turismo y la oferta de ocio, pero un fuerte sentimiento negativo sobre la gesti\u00f3n pol\u00edtica y los problemas estructurales.\",\n value: \"15%\"\n },\n dominantTopics: {\n intro: \"Las conversaciones giran principalmente en torno al **urbanismo**, el **turismo**, la **vivienda**, la **pol\u00edtica** y los **servicios p\u00fablicos**.\",\n topics: [\n { text: \"Urbanismo\", color: \"red\" },\n { text: \"Turismo\", color: \"emerald\" },\n { text: \"Vivienda\", color: \"yellow\" },\n { text: \"Pol\u00edtica\", color: \"purple\" },\n { text: \"Agua\", color: \"blue\" },\n { text: \"Limpieza\", color: \"slate\" }\n ]\n },\n comparativeSentiment: {\n labels: ['Conil', 'Tarifa', 'Vejer', 'Chiclana'],\n data: [15, 45, 60, 55]\n }\n },\n positioning: {\n intro: \"Definimos c\u00f3mo es percibido el Ayuntamiento de Conil, qu\u00e9 valores proyecta y c\u00f3mo encaja esa percepci\u00f3n con el relato deseado.\",\n currentPerception: \"El Ayuntamiento de Conil es percibido como un excelente promotor del **turismo y el ocio**, pero con una gesti\u00f3n pol\u00edtica **conflictiva, opaca y desbordada** por los problemas estructurales. La imagen de 'cambio' y 'regeneraci\u00f3n' est\u00e1 severamente da\u00f1ada.\",\n valuesPerception: {\n labels: ['Atracci\u00f3n Tur\u00edstica', 'Sostenibilidad', 'Cercan\u00eda', 'Eficacia', 'Transparencia'],\n perceived: [9, 4, 5, 4, 2],\n desired: [9, 8, 8, 8, 9]\n },\n valuesDescription: [\n \"<strong>Atracci\u00f3n Tur\u00edstica:<\/strong> Valor m\u00e1ximo, es la principal fortaleza de la marca Conil.\",\n \"<strong>Sostenibilidad:<\/strong> Percibida como un discurso con pocas acciones concretas que lo respalden.\",\n \"<strong>Cercan\u00eda:<\/strong> Percepci\u00f3n de un gobierno distante, enfrascado en luchas pol\u00edticas.\",\n \"<strong>Eficacia:<\/strong> Baja percepci\u00f3n de eficacia en la resoluci\u00f3n de problemas estructurales.\",\n \"<strong>Transparencia:<\/strong> Valor m\u00e1s da\u00f1ado debido a la crisis de Urbanismo.\"\n ],\n desiredNarrativeFit: \"El relato deseado de un **'gobierno del cambio, transparente y sostenible'** choca frontalmente con la percepci\u00f3n actual. Existe una brecha cr\u00edtica entre lo que se prometi\u00f3 y lo que se percibe. La prioridad absoluta es reconstruir la credibilidad en los ejes de transparencia y eficacia.\"\n },\n benchmarking: {\n intro: \"An\u00e1lisis comparativo de la reputaci\u00f3n y comunicaci\u00f3n digital de ayuntamientos costeros de la provincia de C\u00e1diz.\",\n tableData: [\n { municipality: \"Conil de la Frontera\", sentiment: \"15%\", visibility: \"Muy Alta\", engagement: \"Alto\", innovation: \"Media\" },\n { municipality: \"Tarifa\", sentiment: \"45%\", visibility: \"Alta\", engagement: \"Muy Alto\", innovation: \"Alta\" },\n { municipality: \"Vejer de la Frontera\", sentiment: \"60%\", visibility: \"Alta\", engagement: \"Alto\", innovation: \"Alta\" },\n { municipality: \"Chiclana de la Frontera\", sentiment: \"55%\", visibility: \"Muy Alta\", engagement: \"Medio\", innovation: \"Media\" }\n ],\n socialMediaComparison: {\n labels: ['Conil', 'Tarifa', 'Vejer', 'Chiclana'],\n facebook: [1200, 1800, 1500, 2200],\n twitter: [400, 600, 500, 700],\n instagram: [2500, 3500, 3000, 2800]\n }\n },\n kpis: {\n intro: \"Indicadores clave para el seguimiento continuo de la reputaci\u00f3n institucional de Conil.\",\n list: [\n { title: \"Sentimiento Neto General\", value: \"15%\", trend: \"-10%\", trendColor: \"red\", description: \"Porcentaje de sentimiento positivo sobre el total.\", progress: 15, barColor: \"red\" },\n { title: \"Sentimiento en 'Urbanismo'\", value: \"-95%\", trend: \"-5%\", trendColor: \"red\", description: \"Sentimiento neto asociado a la gesti\u00f3n de urbanismo.\", progress: 5, barColor: \"red\" },\n { title: \"Menciones sobre 'Masificaci\u00f3n'\", value: \"350\", trend: \"+50\", trendColor: \"red\", description: \"N\u00famero de menciones mensuales sobre saturaci\u00f3n tur\u00edstica.\", progress: 80, barColor: \"yellow\" },\n { title: \"Engagement en Promoci\u00f3n Tur\u00edstica\", value: \"8\/10\", trend: \"+0\", trendColor: \"green\", description: \"Puntuaci\u00f3n de la interacci\u00f3n en el perfil de turismo.\", progress: 80, barColor: \"emerald\" },\n { title: \"Visibilidad Proactiva vs. Reactiva\", value: \"30%\", trend: \"-15%\", trendColor: \"red\", description: \"Porcentaje de noticias generadas por el Ayuntamiento frente a respuestas a crisis.\", progress: 30, barColor: \"red\" },\n { title: \"Confianza en la Alcaldesa (Neto)\", value: \"20%\", trend: \"-25%\", trendColor: \"red\", description: \"Sentimiento neto asociado a la figura de la alcaldesa.\", progress: 20, barColor: \"red\" }\n ]\n },\n strategy: {\n intro: \"Para revertir la tendencia negativa, el Ayuntamiento de Conil debe lanzar una ofensiva de comunicaci\u00f3n centrada en la transparencia radical, la gesti\u00f3n de la crisis de Urbanismo y la reconexi\u00f3n con la ciudadan\u00eda.\",\n recommendations: [\n { title: \"1. Plan de Choque de Transparencia (Crisis Urbanismo)\", color: \"red\", points: [\n \"<strong>Asumir el liderazgo comunicacional:<\/strong> La alcaldesa debe comparecer y ofrecer m\u00e1xima colaboraci\u00f3n con la justicia.\",\n \"<strong>Crear un portal espec\u00edfico de transparencia:<\/strong> Publicar toda la informaci\u00f3n no sensible del caso.\",\n \"<strong>Anticipar y preparar respuestas:<\/strong> No esperar a que la oposici\u00f3n o los medios marquen la agenda.\"\n ]},\n { title: \"2. Campa\u00f1a Pedag\u00f3gica sobre Gesti\u00f3n\", color: \"yellow\", points: [\n \"<strong>Explicar la subida de tasas:<\/strong> Detallar la necesidad de la inversi\u00f3n en agua y el estado de las infraestructuras.\",\n \"<strong>Comunicar el estado de los conflictos laborales:<\/strong> Ser transparente sobre las negociaciones y los puntos de desacuerdo.\",\n \"<strong>Informar sobre el Plan de Vivienda:<\/strong> Explicar las competencias municipales y las acciones que se est\u00e1n llevando a cabo.\"\n ]},\n { title: \"3. Reconectar con la Ciudadan\u00eda\", color: \"green\", points: [\n \"<strong>Poner en marcha el 'Concejal Virtual':<\/strong> Cumplir con la promesa electoral de un canal de atenci\u00f3n directo.\",\n \"<strong>Crear la 'Mesa por un Turismo Sostenible':<\/strong> Liderar el debate sobre el futuro del modelo tur\u00edstico.\",\n \"<strong>Amplificar la agenda positiva:<\/strong> Unificar los eventos culturales y deportivos bajo una narrativa de 'calidad de vida'.\"\n ]}\n ],\n narrative: {\n intro: \"Es urgente redefinir el relato institucional para pasar de la defensiva a la proactividad.\",\n toneStyleAxes: { title: \"Tono, Estilo y Ejes Clave:\", items: [\n \"<strong>Tono:<\/strong> Humilde, responsable, transparente y resolutivo.\",\n \"<strong>Estilo:<\/strong> Directo, claro, did\u00e1ctico y emp\u00e1tico.\",\n \"<strong>Ejes Clave:\", [\n \"\\\"Estamos aqu\u00ed para solucionar problemas, no para ocultarlos.\\\"\",\n \"\\\"Construir el futuro de Conil requiere decisiones dif\u00edciles, y las explicamos.\\\"\",\n \"\\\"El turismo es nuestro tesoro, y cuidarlo es responsabilidad de todos.\\\"\"\n ]\n ]},\n centralArgument: { title: \"Argumentario Central Frente a Cr\u00edticas:\", items: [\n \"<strong>Crisis de Urbanismo:<\/strong> \\\"M\u00e1xima colaboraci\u00f3n con la justicia y tolerancia cero con cualquier irregularidad, pasada o presente. Nuestro compromiso es la limpieza y la transparencia total.\\\"\",\n \"<strong>Masificaci\u00f3n:<\/strong> \\\"Entendemos el malestar. Por eso hemos creado una mesa de di\u00e1logo para dise\u00f1ar, entre todos, un modelo de turismo m\u00e1s sostenible y respetuoso.\\\"\",\n \"<strong>Subida de Tasas:<\/strong> \\\"Modernizar infraestructuras esenciales como el agua tiene un coste. Hemos optado por la responsabilidad de garantizar el suministro para el futuro de Conil.\\\"\"\n ]},\n unifyingFramework: { title: \"Marco Narrativo Unificador:\", text: \"En Conil, afrontamos los desaf\u00edos con transparencia y trabajamos para construir un futuro m\u00e1s sostenible para todos. Escuchamos, explicamos y actuamos.\" }\n }\n },\n protocol: {\n intro: \"Manual operativo para una respuesta r\u00e1pida, coordinada y efectiva ante las crisis reputacionales que enfrenta Conil.\",\n sections: [\n { title: \"1. Tipos de Crisis Prioritarias para Conil\", points: [\n \"<strong>Crisis Pol\u00edtica\/Judicial:<\/strong> Avances en la investigaci\u00f3n de la Fiscal\u00eda, nuevas denuncias de la oposici\u00f3n.\",\n \"<strong>Crisis Social:<\/strong> Protestas por masificaci\u00f3n tur\u00edstica, vivienda o servicios p\u00fablicos.\",\n \"<strong>Crisis de Gobernabilidad:<\/strong> Ruptura del pacto de gobierno, incapacidad para aprobar presupuestos.\"\n ]},\n { title: \"2. Cadena de Mando y Portavoces\", points: [\n \"<strong>Comit\u00e9 de Crisis:<\/strong> Alcaldesa (Presidenta), Portavoces de AxS\u00ed, PP y Siempre Conil, Concejal de Comunicaci\u00f3n, Asesor\u00eda Jur\u00eddica.\",\n \"<strong>Portavoz Principal:<\/strong> Alcaldesa. Su exposici\u00f3n es alta, pero debe liderar la respuesta en crisis graves.\",\n \"<strong>Portavoces T\u00e9cnicos:<\/strong> Concejal de Urbanismo, Hacienda o Turismo, seg\u00fan la materia.\",\n ]},\n { title: \"3. Plan de Contenci\u00f3n Digital (Primeras 24h)\", points: [\n \"<strong>Monitorizaci\u00f3n Intensiva:<\/strong> Escucha activa de medios, redes y grupos locales para detectar la viralizaci\u00f3n de la crisis.\",\n \"<strong>Evaluaci\u00f3n R\u00e1pida:<\/strong> Determinar el impacto en la credibilidad del gobierno y el sentimiento ciudadano.\",\n \"<strong>Primer Mensaje:<\/strong> Emitir un comunicado r\u00e1pido de reconocimiento del problema, compromiso con la transparencia y anuncio de pr\u00f3ximas acciones.\"\n ]},\n { title: \"4. Claves de Reacci\u00f3n\", points: [\n \"<strong>Transparencia Radical:<\/strong> Compartir toda la informaci\u00f3n posible. Es la \u00fanica forma de combatir la narrativa de 'ocultismo'.\",\n \"<strong>Empat\u00eda:<\/strong> Reconocer el malestar ciudadano y mostrar comprensi\u00f3n.\",\n \"<strong>Responsabilidad:<\/strong> Asumir la responsabilidad de la gesti\u00f3n, evitando culpar a terceros.\",\n \"<strong>Agilidad y Coherencia:<\/strong> Responder con rapidez y mantener un mensaje unificado entre los socios de gobierno.\"\n ]}\n ]\n },\n voices: {\n intro: \"Identificaci\u00f3n de los l\u00edderes vecinales, medios y canales informales que moldean la opini\u00f3n p\u00fablica en Conil.\",\n sections: [\n { title: \"L\u00edderes Vecinales y Colectivos con Peso Real\", description: \"Figuras y colectivos que articulan el sentir ciudadano en temas clave.\", points: [\n \"<strong>Portavoces de Colectivos Ecologistas:<\/strong> Muy influyentes en el debate sobre urbanismo y sostenibilidad.\",\n \"<strong>Representantes de Asociaciones de Vecinos del Centro:<\/strong> Clave en las quejas por ruido, limpieza y masificaci\u00f3n.\",\n \"<strong>L\u00edderes de Plataformas por la Vivienda Digna:<\/strong> Si surgen, ser\u00e1n un actor de presi\u00f3n muy relevante.\"\n ], strategy: \"Establecer un canal de di\u00e1logo directo y regular, ofreciendo informaci\u00f3n proactiva y escuchando sus demandas. Su involucraci\u00f3n puede transformar una voz cr\u00edtica en una colaborativa.\" },\n { title: \"Medios Locales y Provinciales con Impacto\", description: \"Medios que tienen un impacto directo en la agenda informativa y la formaci\u00f3n de opini\u00f3n.\", points: [\n \"<strong>Diario de C\u00e1diz \/ La Voz de C\u00e1diz:<\/strong> Principales altavoces de las denuncias de la oposici\u00f3n y de las crisis pol\u00edticas.\",\n \"<strong>Medios Digitales Locales:<\/strong> Canales como 'Conil Es M\u00e1s' o similares, que cubren la actualidad municipal.\",\n \"<strong>Radio Juventud de Conil:<\/strong> Emisora municipal que puede servir como plataforma para la comunicaci\u00f3n del gobierno.\"\n ], strategy: \"Mantener una relaci\u00f3n fluida con los periodistas, ofreciendo acceso a la informaci\u00f3n y facilitando entrevistas para asegurar una cobertura equilibrada.\" },\n { title: \"Canales Informales de Opini\u00f3n que Afectan la Reputaci\u00f3n\", description: \"La opini\u00f3n p\u00fablica se forma en gran medida en canales informales y privados.\", points: [\n \"<strong>Grupos de Facebook ('Conil Opina', etc.):<\/strong> Principal foro de debate, queja y cr\u00edtica sin filtros.\",\n \"<strong>Cuentas de Instagram y TikTok de influencers locales:<\/strong> Con capacidad de viralizar opiniones y noticias r\u00e1pidamente.\",\n \"<strong>Foros de Viajeros (TripAdvisor, etc.):<\/strong> Donde se refleja la percepci\u00f3n de los turistas sobre la masificaci\u00f3n y los servicios.\"\n ], strategy: \"Monitorizar activamente estos canales para detectar rumores, focos de malestar y narrativas negativas incipientes, y adaptar la comunicaci\u00f3n oficial en consecuencia.\" }\n ]\n },\n sports: {\n intro: \"Conil de la Frontera, gracias a su entorno natural privilegiado, tiene un gran potencial en el \u00e1mbito deportivo, especialmente en disciplinas vinculadas al mar y en la organizaci\u00f3n de eventos que atraen turismo.\",\n infrastructure: {\n title: \"Infraestructura Deportiva Municipal\",\n description: \"Conil cuenta con instalaciones clave para el fomento del deporte base y la organizaci\u00f3n de eventos.\",\n table: [\n { name: \"Pabell\u00f3n Polideportivo Municipal\", sport: \"F\u00fatbol Sala, Baloncesto, Voleibol\", location: \"Casco Urbano\" },\n { name: \"Campo de F\u00fatbol 'P\u00e9rez Ureba'\", sport: \"F\u00fatbol\", location: \"Casco Urbano\" },\n { name: \"Pistas de Tenis y P\u00e1del\", sport: \"Tenis, P\u00e1del\", location: \"Varias\" },\n { name: \"Playas (La Fontanilla, Los Bateles)\", sport: \"Surf, Kitesurf, V\u00f3ley Playa\", location: \"Costa\" }\n ],\n analysis: \"La infraestructura es adecuada para deportes tradicionales, pero la gran fortaleza reside en el uso de los espacios naturales (playas) para deportes n\u00e1uticos, un activo que atrae a un p\u00fablico espec\u00edfico y de alto valor.\"\n },\n programs: {\n title: \"Programas y Escuelas Deportivas Municipales\",\n description: \"La oferta municipal se centra en el deporte base y en actividades estivales para dar servicio a la poblaci\u00f3n local y visitante.\",\n annual: [\"Escuelas de F\u00fatbol, Baloncesto y Tenis.\", \"Programas de mantenimiento para mayores.\"],\n summer: [\"Cursos de Surf y Kitesurf.\", \"Torneos de V\u00f3ley Playa y F\u00fatbol Playa.\", \"Campus deportivos como el de Iker Casillas.\"],\n analysis: \"La oferta es s\u00f3lida, destacando la captaci\u00f3n de eventos de alto perfil como el Campus Iker Casillas, que genera una gran visibilidad y asocia la marca Conil con la excelencia deportiva.\"\n },\n events: {\n title: \"Eventos Deportivos Destacados y su Impacto\",\n description: \"La agenda de eventos es un pilar de la estrategia tur\u00edstica y de dinamizaci\u00f3n local.\",\n chart: {\n labels: ['Campus Iker Casillas', 'Campeonatos de Surf', 'Torneos V\u00f3ley Playa', 'Carreras Populares'],\n data: [95, 85, 80, 70]\n },\n list: [\n \"<strong>Campus Iker Casillas:<\/strong> Evento de referencia que atrae a participantes de toda Espa\u00f1a.\",\n \"<strong>Pruebas del circuito de Surf y Bodyboard:<\/strong> Aprovechando la calidad de las olas.\",\n \"<strong>Traves\u00eda a Nado 'La Chanca':<\/strong> Evento popular en verano.\",\n \"<strong>Carrera Nocturna 'Noche de San Juan':<\/strong> Combina deporte y tradici\u00f3n.\"\n ],\n analysis: \"Los eventos deportivos son una herramienta estrat\u00e9gica para la desestacionalizaci\u00f3n y la atracci\u00f3n de un turismo de calidad. El impacto medi\u00e1tico de figuras como Iker Casillas es una oportunidad de comunicaci\u00f3n de primer nivel.\"\n },\n clubs: {\n title: \"Clubes y Asociaciones Deportivas Locales\",\n description: \"El tejido asociativo deportivo en Conil es muy activo, especialmente en deportes n\u00e1uticos y f\u00fatbol.\",\n chart: {\n labels: ['Clubes de Surf', 'Conil C.F.', 'Clubes de P\u00e1del', 'Club de Atletismo'],\n data: [90, 80, 70, 65]\n },\n list: [\n \"<strong>Escuelas y Clubes de Surf:<\/strong> Son un motor econ\u00f3mico y tur\u00edstico fundamental.\",\n \"<strong>Conil Club de F\u00fatbol:<\/strong> Principal referente del f\u00fatbol local, con una importante cantera.\",\n \"<strong>Clubes de P\u00e1del y Tenis:<\/strong> Con una alta demanda por parte de residentes y turistas.\",\n \"<strong>Asociaciones de Senderismo y Ciclismo:<\/strong> Promueven el uso de los parajes naturales del interior.\"\n ],\n analysis: \"La colaboraci\u00f3n entre el Ayuntamiento y los clubes privados, especialmente los de surf, es clave para el desarrollo del sector. Apoyar a estos clubes es invertir en la principal se\u00f1a de identidad del turismo activo de Conil.\"\n },\n contact: {\n title: \"Informaci\u00f3n de Contacto y Recursos Adicionales\",\n description: \"Canales para informarse y participar en la vida deportiva de Conil.\",\n list: [\n \"<strong>Delegaci\u00f3n de Deportes:<\/strong> Consultar web oficial del Ayuntamiento para tel\u00e9fono y email.\",\n \"<strong>Oficina de Turismo:<\/strong> Informaci\u00f3n sobre eventos y actividades deportivas para visitantes.\",\n \"<strong>Webs de los Clubes:<\/strong> Los clubes de surf y otros deportes suelen tener sus propias p\u00e1ginas con informaci\u00f3n sobre cursos y eventos.\"\n ],\n analysis: \"Facilitar el acceso a la informaci\u00f3n deportiva, especialmente la relacionada con actividades en la naturaleza, puede mejorar la experiencia del visitante y fomentar un turismo m\u00e1s activo y respetuoso.\"\n }\n }\n };\n\n const mainNavButtons = document.querySelectorAll('.nav-button');\n const contentSections = document.querySelectorAll('.content-section');\n \n function activateSection(targetId) {\n mainNavButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.target === targetId));\n contentSections.forEach(section => {\n section.classList.toggle('active', section.id === targetId);\n });\n \/\/ Lazy load charts for the activated section\n if (targetId === 'balance') renderBalanceCharts();\n if (targetId === 'actores') renderActorsCharts();\n if (targetId === 'digital') renderDigitalCharts();\n if (targetId === 'termometro') renderThermometerCharts();\n if (targetId === 'posicionamiento') renderPositioningCharts();\n if (targetId === 'benchmarking') renderBenchmarkingCharts();\n if (targetId === 'deportes') renderSportsCharts();\n }\n\n function setupNavigation() {\n mainNavButtons.forEach(button => {\n button.addEventListener('click', () => activateSection(button.dataset.target));\n });\n }\n\n function populateStaticContent() {\n document.getElementById('municipality-name').textContent = municipalityData.name;\n \/\/ About Section\n document.getElementById('about-intro').textContent = municipalityData.about.intro;\n document.getElementById('about-details').innerHTML = municipalityData.about.details.map(item => {\n if (item.list) {\n return `<p><strong class=\"font-semibold text-slate-800\">${item.strong}<\/strong><\/p><ul class=\"list-disc list-inside ml-4 space-y-1\">${item.list.map(li => `<li>${li}<\/li>`).join('')}<\/ul>`;\n }\n return `<p><strong class=\"font-semibold text-slate-800\">${item.strong}<\/strong> ${item.text}<\/p>`;\n }).join('');\n \/\/ Balance Section\n document.getElementById('balance-intro').textContent = municipalityData.balance.intro;\n document.getElementById('sentiment-trend-period').textContent = municipalityData.period;\n document.getElementById('sentiment-trend-intro').textContent = \"Observe c\u00f3mo ha variado la percepci\u00f3n de logros y riesgos en los medios.\";\n \/\/ Actors Section\n document.getElementById('actors-intro').textContent = municipalityData.actors.intro;\n document.getElementById('actor-cards-container').innerHTML = `\n <div class=\"bg-blue-50 p-4 rounded-xl border border-blue-200\">\n <h4 class=\"font-bold text-lg text-blue-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.government.icon}<\/span>${municipalityData.actors.government.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.government.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>\n <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-200\">\n <h4 class=\"font-bold text-lg text-yellow-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.mediaVoices.icon}<\/span>${municipalityData.actors.mediaVoices.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.mediaVoices.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>\n <div class=\"bg-green-50 p-4 rounded-xl border border-green-200\">\n <h4 class=\"font-bold text-lg text-green-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">${municipalityData.actors.citizenship.icon}<\/span>${municipalityData.actors.citizenship.title}<\/h4>\n <div class=\"text-sm text-slate-700 space-y-3\">${municipalityData.actors.citizenship.details.map(d => `<p>${d}<\/p>`).join('')}<\/div>\n <\/div>`;\n document.getElementById('delegation-sentiment-intro').textContent = \"Percepci\u00f3n de la gesti\u00f3n en \u00e1reas clave del Ayuntamiento.\";\n \/\/ Mayor Section\n document.getElementById('mayor-intro').textContent = municipalityData.mayor.intro;\n document.getElementById('mayor-narrative').innerHTML = municipalityData.mayor.narrative;\n document.getElementById('mayor-perception').innerHTML = municipalityData.mayor.perception;\n document.getElementById('mayor-keywords').innerHTML = municipalityData.mayor.keywords.map(kw => `<span class=\"inline-block p-2 m-1 bg-indigo-100 rounded-lg shadow-sm text-base font-medium text-indigo-800\">${kw}<\/span>`).join('');\n document.getElementById('mayor-recommendations').innerHTML = municipalityData.mayor.recommendations;\n \/\/ Digital Section\n document.getElementById('digital-intro').textContent = municipalityData.digital.intro;\n document.getElementById('digital-content').innerHTML = `\n <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\n <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">${municipalityData.digital.officialStrategy.title}<\/h4>\n ${municipalityData.digital.officialStrategy.details}\n <ul class=\"text-sm space-y-2\">${municipalityData.digital.officialStrategy.points.map(p => `<li class=\"flex items-start\"><span class=\"${p.type === 'plus' ? 'text-emerald-500' : 'text-red-500'} mr-2 mt-1\">${p.type === 'plus' ? '\u2795' : '\u2796'}<\/span>${p.text}<\/li>`).join('')}<\/ul>\n <\/div>\n <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\n <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">${municipalityData.digital.unofficialPulse.title}<\/h4>\n ${municipalityData.digital.unofficialPulse.details}\n <ul class=\"text-sm text-slate-700 space-y-2\">${municipalityData.digital.unofficialPulse.points.map(p => `<li>${p.text}<\/li>`).join('')}<\/ul>\n <\/div>`;\n \/\/ Timeline\n document.getElementById('timeline-intro').textContent = municipalityData.timeline.intro;\n \/\/ Matrix R&O\n document.getElementById('matrix-intro').textContent = municipalityData.matrixRO.intro;\n document.getElementById('risks-list').innerHTML = municipalityData.matrixRO.risks.map(item => `<li>${item}<\/li>`).join('');\n document.getElementById('opportunities-list').innerHTML = municipalityData.matrixRO.opportunities.map(item => `<li>${item}<\/li>`).join('');\n \/\/ Thermometer\n document.getElementById('thermometer-intro').textContent = municipalityData.thermometer.intro;\n document.getElementById('overall-sentiment-text').innerHTML = municipalityData.thermometer.overallSentiment.text;\n document.getElementById('overall-sentiment-value').textContent = municipalityData.thermometer.overallSentiment.value;\n document.getElementById('dominant-topics-intro').textContent = municipalityData.thermometer.dominantTopics.intro;\n document.getElementById('dominant-topics').innerHTML = municipalityData.thermometer.dominantTopics.topics.map(topic => `<span class=\"px-3 py-1 bg-${topic.color}-100 text-${topic.color}-800 rounded-full text-sm font-semibold\">${topic.text}<\/span>`).join('');\n document.getElementById('comparative-sentiment-intro').textContent = \"Sentimiento neto promedio de Conil frente a otros municipios costeros de C\u00e1diz.\";\n \/\/ Positioning\n document.getElementById('positioning-intro').textContent = municipalityData.positioning.intro;\n document.getElementById('current-perception').innerHTML = municipalityData.positioning.currentPerception;\n document.getElementById('values-description').innerHTML = municipalityData.positioning.valuesDescription.map(desc => `<p>${desc}<\/p>`).join('');\n document.getElementById('desired-narrative-fit').innerHTML = municipalityData.positioning.desiredNarrativeFit;\n \/\/ Benchmarking\n document.getElementById('benchmarking-intro').textContent = municipalityData.benchmarking.intro;\n const tableHead = `<thead><tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\"><th class=\"py-3 px-4 border-b\">Municipio<\/th><th class=\"py-3 px-4 border-b\">Sentimiento Neto<\/th><th class=\"py-3 px-4 border-b\">Visibilidad<\/th><th class=\"py-3 px-4 border-b\">Engagement RRSS<\/th><th class=\"py-3 px-4 border-b\">Innovaci\u00f3n Digital<\/th><\/tr><\/thead>`;\n const tableBody = `<tbody>${municipalityData.benchmarking.tableData.map(row => `<tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-3 px-4 border-b\"><strong>${row.municipality}<\/strong><\/td><td class=\"py-3 px-4 border-b\">${row.sentiment}<\/td><td class=\"py-3 px-4 border-b\">${row.visibility}<\/td><td class=\"py-3 px-4 border-b\">${row.engagement}<\/td><td class=\"py-3 px-4 border-b\">${row.innovation}<\/td><\/tr>`).join('')}<\/tbody>`;\n document.getElementById('benchmarking-table').innerHTML = tableHead + tableBody;\n \/\/ KPIs\n document.getElementById('kpis-intro').textContent = municipalityData.kpis.intro;\n document.getElementById('kpis-container').innerHTML = municipalityData.kpis.list.map(kpi => `\n <div class=\"bg-${kpi.barColor}-50 p-4 rounded-xl border border-${kpi.barColor}-200 flex flex-col justify-between\">\n <h4 class=\"font-bold text-lg text-${kpi.barColor}-800 mb-2\">${kpi.title}<\/h4>\n <p class=\"text-3xl font-bold text-${kpi.barColor}-700 mb-2\">${kpi.value} <span class=\"text-sm font-normal text-${kpi.trendColor}-500\">${kpi.trend.includes('+') ? '\u25b2' : '\u25bc'} ${kpi.trend.replace(\/[+-]\/g, '')}<\/span><\/p>\n <p class=\"text-sm text-slate-700\">${kpi.description}<\/p>\n <div class=\"progress-bar-container mt-3\"><div class=\"progress-bar bg-${kpi.barColor}-500\" style=\"width: ${kpi.progress}%;\"><\/div><\/div>\n <\/div>`).join('');\n \/\/ Strategy\n document.getElementById('strategy-intro').textContent = municipalityData.strategy.intro;\n document.getElementById('strategy-recommendations').innerHTML = municipalityData.strategy.recommendations.map(rec => `\n <div class=\"p-4 bg-${rec.color}-50 rounded-xl border border-${rec.color}-200\">\n <h4 class=\"font-bold text-lg text-${rec.color}-800\">${rec.title}<\/h4>\n <ul class=\"list-disc list-inside text-sm text-slate-700 mt-2 space-y-1\">${rec.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul>\n <\/div>`).join('');\n document.getElementById('narrative-intro').textContent = municipalityData.strategy.narrative.intro;\n const narrativeTone = municipalityData.strategy.narrative.toneStyleAxes;\n const narrativeArgument = municipalityData.strategy.narrative.centralArgument;\n const narrativeUnifying = municipalityData.strategy.narrative.unifyingFramework;\n document.getElementById('narrative-details').innerHTML = `\n <h5 class=\"font-semibold text-lg text-indigo-800\">${narrativeTone.title}<\/h5>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">\n ${narrativeTone.items.map(item => Array.isArray(item) ? `<ul>${item.map(sub => `<li>${sub}<\/li>`).join('')}<\/ul>` : `<li>${item}<\/li>`).join('')}\n <\/ul>\n <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">${narrativeArgument.title}<\/h5>\n <ul class=\"list-disc list-inside ml-4 space-y-1\">${narrativeArgument.items.map(item => `<li>${item}<\/li>`).join('')}<\/ul>\n <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">${narrativeUnifying.title}<\/h5>\n <p>${narrativeUnifying.text}<\/p>`;\n \/\/ Protocol\n document.getElementById('protocol-intro').textContent = municipalityData.protocol.intro;\n document.getElementById('protocol-details').innerHTML = municipalityData.protocol.sections.map(section => `\n <div><h4 class=\"font-bold text-lg text-indigo-800 mb-2\">${section.title}<\/h4><ul class=\"list-disc list-inside ml-4 space-y-1\">${section.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul><\/div>`).join('');\n \/\/ Voices\n document.getElementById('voices-intro').textContent = municipalityData.voices.intro;\n document.getElementById('voices-details').innerHTML = municipalityData.voices.sections.map(section => `\n <div><h4 class=\"font-bold text-lg text-indigo-800 mb-2\">${section.title}<\/h4><p>${section.description}<\/p><ul class=\"list-disc list-inside ml-4 space-y-1\">${section.points.map(point => `<li>${point}<\/li>`).join('')}<\/ul><p class=\"mt-2 text-sm text-slate-600\"><strong>Estrategia:<\/strong> ${section.strategy}<\/p><\/div>`).join('');\n \/\/ Sports\n const sports = municipalityData.sports;\n document.getElementById('sports-intro').textContent = sports.intro;\n document.getElementById('sports-infrastructure').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfdf\ufe0f<\/span>${sports.infrastructure.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.infrastructure.description}<\/p><div class=\"overflow-x-auto mb-4\"><table class=\"min-w-full bg-white\"><thead><tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\"><th class=\"py-3 px-4 border-b\">Instalaci\u00f3n<\/th><th class=\"py-3 px-4 border-b\">Deporte Principal<\/th><th class=\"py-3 px-4 border-b\">Ubicaci\u00f3n<\/th><\/tr><\/thead><tbody>${sports.infrastructure.table.map(i => `<tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">${i.name}<\/td><td class=\"py-2 px-4 border-b\">${i.sport}<\/td><td class=\"py-2 px-4 border-b\">${i.location}<\/td><\/tr>`).join('')}<\/tbody><\/table><\/div><p class=\"text-slate-700\">${sports.infrastructure.analysis}<\/p>`;\n document.getElementById('sports-programs').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd38<\/span>${sports.programs.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.programs.description}<\/p><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Programas Anuales<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.programs.annual.map(p => `<li>${p}<\/li>`).join('')}<\/ul><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Actividades de Verano<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.programs.summer.map(p => `<li>${p}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.programs.analysis}<\/p>`;\n document.getElementById('sports-events').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfc6<\/span>${sports.events.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.events.description}<\/p><div class=\"chart-container h-[250px] md:h-[300px] mb-4\"><canvas id=\"eventPopularityChart\"><\/canvas><\/div><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Eventos Destacados<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.events.list.map(e => `<li>${e}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.events.analysis}<\/p>`;\n document.getElementById('sports-clubs').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd1d<\/span>${sports.clubs.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.clubs.description}<\/p><div class=\"chart-container h-[250px] md:h-[300px] mb-4\"><canvas id=\"clubImpactChart\"><\/canvas><\/div><h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Clubes Relevantes<\/h5><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">${sports.clubs.list.map(c => `<li>${c}<\/li>`).join('')}<\/ul><p class=\"text-slate-700\">${sports.clubs.analysis}<\/p>`;\n document.getElementById('sports-contact').innerHTML = `<h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udcde<\/span>${sports.contact.title}<\/h4><p class=\"text-slate-700 mb-4\">${sports.contact.description}<\/p><ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1\">${sports.contact.list.map(c => `<li>${c}<\/li>`).join('')}<\/ul><p class=\"text-slate-700 mt-4\">${sports.contact.analysis}<\/p>`;\n }\n \n let charts = {};\n function createChart(id, config) {\n const ctx = document.getElementById(id)?.getContext('2d');\n if (!ctx) return;\n if (charts[id]) charts[id].destroy();\n charts[id] = new Chart(ctx, config);\n }\n\n function renderBalanceCharts() {\n const data = municipalityData.balance.reputationChartData;\n createChart('reputationChart', {\n type: 'bar',\n data: { labels: data.logros.labels, datasets: [{ label: 'Sentimiento', data: data.logros.data, backgroundColor: '#10B981', borderRadius: 5 }] },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { min: -100, max: 100 } } }\n });\n const trendData = municipalityData.balance.sentimentTrend;\n createChart('sentimentTrendChart', {\n type: 'line',\n data: {\n labels: trendData.labels,\n datasets: [\n { label: 'Logros', data: trendData.logros, borderColor: '#10B981', backgroundColor: 'rgba(16, 185, 129, 0.2)', fill: true, tension: 0.3 },\n { label: 'Riesgos', data: trendData.riesgos, borderColor: '#EF4444', backgroundColor: 'rgba(239, 68, 68, 0.2)', fill: true, tension: 0.3 }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top' } }, scales: { y: { min: -100, max: 100 } } }\n });\n }\n function updateReputationDisplay(type) {\n const infoDisplay = document.getElementById('info-display');\n const keywordsDisplay = document.getElementById('keywords-display');\n const chart = charts['reputationChart'];\n if (!infoDisplay || !keywordsDisplay || !chart) return;\n\n if (type === 'logros') {\n infoDisplay.innerHTML = municipalityData.balance.logrosInfo;\n keywordsDisplay.innerHTML = municipalityData.balance.keywords.logros.map(kw => `<span class=\"inline-block p-2 m-1 bg-emerald-100 rounded-lg shadow-sm text-base font-medium text-emerald-800\">${kw}<\/span>`).join('');\n chart.data.labels = municipalityData.balance.reputationChartData.logros.labels;\n chart.data.datasets[0].data = municipalityData.balance.reputationChartData.logros.data;\n chart.data.datasets[0].backgroundColor = '#10B981';\n } else { \/\/ 'riesgos'\n infoDisplay.innerHTML = municipalityData.balance.riesgosInfo;\n keywordsDisplay.innerHTML = municipalityData.balance.keywords.riesgos.map(kw => `<span class=\"inline-block p-2 m-1 bg-red-100 rounded-lg shadow-sm text-base font-medium text-red-800\">${kw}<\/span>`).join('');\n chart.data.labels = municipalityData.balance.reputationChartData.riesgos.labels;\n chart.data.datasets[0].data = municipalityData.balance.reputationChartData.riesgos.data;\n chart.data.datasets[0].backgroundColor = '#EF4444';\n }\n chart.update();\n }\n \n function renderActorsCharts() {\n const data = municipalityData.actors.delegationSentiment;\n createChart('delegationSentimentChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [{\n label: 'Sentimiento Medio',\n data: data.data,\n backgroundColor: data.data.map(s => s >= 70 ? '#10B981' : s >= 40 ? '#FBBF24' : '#EF4444'),\n borderRadius: 5\n }]\n },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { min: -100, max: 100 } } }\n });\n }\n\n function renderDigitalCharts() {\n const mediaData = municipalityData.digital.mediaSentimentDetailed;\n createChart('mediaSentimentChart', {\n type: 'bar',\n data: {\n labels: mediaData.labels,\n datasets: [\n { label: 'Positivo', data: mediaData.positive, backgroundColor: '#10B981' },\n { label: 'Neutral', data: mediaData.neutral, backgroundColor: '#FBBF24' },\n { label: 'Negativo', data: mediaData.negative, backgroundColor: '#EF4444' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true, max: 100 } } }\n });\n const engagementData = municipalityData.digital.engagementMetrics;\n createChart('engagementMetricsChart', {\n type: 'bar',\n data: {\n labels: engagementData.labels,\n datasets: [{ label: 'Interacciones', data: engagementData.interacciones, backgroundColor: '#004369', borderRadius: 5 }]\n },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }\n });\n }\n\n function renderThermometerCharts() {\n const data = municipalityData.thermometer.comparativeSentiment;\n createChart('comparativeSentimentChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [{ label: 'Sentimiento Neto (%)', data: data.data, backgroundColor: data.labels.map(l => l === 'Conil' ? '#004369' : '#CBD5E1'), borderRadius: 5 }]\n },\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { min: 0, max: 100 } } }\n });\n }\n\n function renderPositioningCharts() {\n const data = municipalityData.positioning.valuesPerception;\n createChart('valuesRadarChart', {\n type: 'radar',\n data: {\n labels: data.labels,\n datasets: [\n { label: 'Percepci\u00f3n Actual', data: data.perceived, borderColor: '#004369', backgroundColor: 'rgba(0, 67, 105, 0.2)' },\n { label: 'Relato Deseado', data: data.desired, borderColor: '#01949A', backgroundColor: 'rgba(1, 148, 154, 0.2)' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { r: { suggestedMin: 0, suggestedMax: 10 } } }\n });\n }\n\n function renderBenchmarkingCharts() {\n const data = municipalityData.benchmarking.socialMediaComparison;\n createChart('socialMediaComparisonChart', {\n type: 'bar',\n data: {\n labels: data.labels,\n datasets: [\n { label: 'Facebook', data: data.facebook, backgroundColor: '#1877F2' },\n { label: 'Twitter (X)', data: data.twitter, backgroundColor: '#1DA1F2' },\n { label: 'Instagram', data: data.instagram, backgroundColor: '#C13584' }\n ]\n },\n options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }\n });\n }\n\n function renderSportsCharts() {\n const eventData = municipalityData.sports.events.chart;\n createChart('eventPopularityChart', {\n type: 'bar',\n data: { labels: eventData.labels, datasets: [{ label: 'Popularidad', data: eventData.data, backgroundColor: '#81B29A', borderRadius: 5 }] },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { max: 100 } } }\n });\n const clubData = municipalityData.sports.clubs.chart;\n createChart('clubImpactChart', {\n type: 'bar',\n data: { labels: clubData.labels, datasets: [{ label: 'Impacto', data: clubData.data, backgroundColor: '#F2CC8F', borderRadius: 5 }] },\n options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { max: 100 } } }\n });\n }\n\n function setupTimeline() {\n const timelineContainer = document.querySelector('.timeline-container');\n const timelineFilterButtons = document.querySelectorAll('.timeline-filter-button');\n const render = (filter = 'all') => {\n timelineContainer.innerHTML = '';\n let isLeft = true;\n municipalityData.timeline.events.forEach(item => {\n const itemTags = item.tags || [];\n if (filter === 'all' || item.type === filter || itemTags.includes(filter)) {\n const itemDiv = document.createElement('div');\n itemDiv.className = `timeline-item ${isLeft ? 'left' : 'right'}`;\n itemDiv.innerHTML = `<div class=\"timeline-content shadow-md\"><h4 class=\"font-bold text-slate-900 text-base\">${item.title}<\/h4><p class=\"text-xs text-slate-600 mb-2\">${item.date} <span class=\"font-semibold text-slate-700\">(${item.type})<\/span><\/p><p class=\"text-sm text-slate-700\">${item.description}<\/p><\/div>`;\n timelineContainer.appendChild(itemDiv);\n isLeft = !isLeft;\n }\n });\n };\n timelineFilterButtons.forEach(button => {\n button.addEventListener('click', () => {\n timelineFilterButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n render(button.dataset.filter);\n });\n });\n render(); \/\/ Initial render\n }\n\n function setupPoll() {\n const pollResult = document.getElementById('poll-result');\n let votes = { A: 0, B: 0 };\n const update = () => {\n const total = votes.A + votes.B;\n if (total === 0) { pollResult.textContent = 'Selecciona una opci\u00f3n para simular.'; return; }\n const percentA = ((votes.A \/ total) * 100).toFixed(1);\n const percentB = ((votes.B \/ total) * 100).toFixed(1);\n pollResult.innerHTML = `<p><strong>Potenciar Transparencia:<\/strong> ${percentA}% | <strong>Mayor Presencia Personal:<\/strong> ${percentB}%<\/p>`;\n };\n document.getElementById('poll-option-A').addEventListener('click', () => { votes.A++; update(); });\n document.getElementById('poll-option-B').addEventListener('click', () => { votes.B++; update(); });\n update();\n }\n\n \/\/ Initial Setup\n setupNavigation();\n populateStaticContent();\n activateSection('balance');\n document.getElementById('btn-logros').addEventListener('click', () => updateReputationDisplay('logros'));\n document.getElementById('btn-riesgos').addEventListener('click', () => updateReputationDisplay('riesgos'));\n updateReputationDisplay('logros'); \/\/ Load default view\n setupTimeline();\n setupPoll();\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>An\u00e1lisis Interactivo de Reputaci\u00f3n: Ayuntamiento de Conil An\u00e1lisis de Reputaci\u00f3n y Presencia Digital Balanza Reputacional Mapa de Actores Foco en la Alcaldesa An\u00e1lisis Digital L\u00ednea de Tiempo Matriz R&O Term\u00f3metro Ciudadano Diagn\u00f3stico Posicionamiento Benchmarking Panel de KPIs Estrategia y Narrativa Protocolo Crisis Foco en Vocer\u00edas Deportes en Conil Sobre Este An\u00e1lisis Balanza Reputacional: La Doble…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-analisis"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgDuos-H","_links":{"self":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":8,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/43\/revisions\/415"}],"wp:attachment":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}