{"id":278,"date":"2025-06-26T19:37:33","date_gmt":"2025-06-26T19:37:33","guid":{"rendered":"https:\/\/buscomunicacion.com\/?p=278"},"modified":"2025-07-06T11:45:34","modified_gmt":"2025-07-06T11:45:34","slug":"ayuntamiento-de-tocina-analisis-de-reputacion","status":"publish","type":"post","link":"https:\/\/buscomunicacion.com\/index.php\/2025\/06\/26\/ayuntamiento-de-tocina-analisis-de-reputacion\/","title":{"rendered":"Ayuntamiento de Tocina, An\u00e1lisis de Reputaci\u00f3n"},"content":{"rendered":"\n<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>An\u00e1lisis Interactivo: Reputaci\u00f3n del Ayuntamiento de Tocina<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&#038;display=swap\" rel=\"stylesheet\">\r\n    <!-- Chosen Palette: Warm Neutrals with Indigo Accents -->\r\n    <!-- Application Structure Plan: La aplicaci\u00f3n se estructura como un dashboard interactivo de una sola p\u00e1gina con navegaci\u00f3n superior. Cada bot\u00f3n de navegaci\u00f3n corresponde a una secci\u00f3n tem\u00e1tica (Balanza Reputacional, Mapa de Actores, Foco en el Alcalde, 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 Tocina, Sobre Este An\u00e1lisis). Esta arquitectura permite al usuario explorar el informe de forma no lineal, profundizando en \u00e1reas de inter\u00e9s espec\u00edficas y facilitando la comprensi\u00f3n de las interconexiones entre los datos y las narrativas. -->\r\n    <!-- Visualization & Content Choices: \r\n        - Balanza Reputacional: Usa botones para alternar entre logros y retos, mostrando texto din\u00e1mico y un gr\u00e1fico de barras horizontal (Chart.js) para el sentimiento. Un gr\u00e1fico de l\u00edneas (Chart.js) muestra la evoluci\u00f3n del sentimiento a lo largo del tiempo. Palabras clave din\u00e1micas. Objetivo: Informar y comparar.\r\n        - Mapa de Actores: Presenta informaci\u00f3n textual sobre el gobierno, medios y ciudadan\u00eda en tarjetas. Un gr\u00e1fico de barras horizontal (Chart.js) muestra el sentimiento por \u00e1reas municipales. Objetivo: Organizar y comparar.\r\n        - Foco en el Alcalde: Combina texto descriptivo sobre la narrativa del alcalde con un indicador de sentimiento tipo \"gauge\" (HTML\/CSS) y una nube de palabras clave (HTML\/CSS). Objetivo: Informar y visualizar.\r\n        - An\u00e1lisis Digital: Se utilizan tarjetas para la estrategia de comunicaci\u00f3n y el pulso ciudadano. Gr\u00e1ficos de barras apiladas (Chart.js) para el sentimiento por tipo de medio y barras agrupadas para m\u00e9tricas de engagement. Objetivo: Informar y comparar.\r\n        - L\u00ednea de Tiempo: Implementa una l\u00ednea de tiempo interactiva (HTML\/CSS) con botones de filtro por tipo de evento. Objetivo: Mostrar cambio y organizar.\r\n        - Matriz R&O: Presenta riesgos y oportunidades en listas claras dentro de tarjetas. Objetivo: Informar y organizar.\r\n        - Term\u00f3metro Ciudadano: Muestra el sentimiento general con un \"gauge\" y temas dominantes con etiquetas. Un gr\u00e1fico de barras (Chart.js) compara el sentimiento con municipios hom\u00f3logos. Objetivo: Informar y comparar.\r\n        - Diagn\u00f3stico Posicionamiento: Texto descriptivo y un gr\u00e1fico de radar (Chart.js) para comparar la percepci\u00f3n actual con los valores deseados. Objetivo: Informar y comparar.\r\n        - Benchmarking: Una tabla comparativa y un gr\u00e1fico de barras (Chart.js) para la presencia en redes sociales. Objetivo: Comparar.\r\n        - Panel de KPIs: Tarjetas con indicadores clave de rendimiento y barras de progreso (HTML\/CSS). Objetivo: Informar.\r\n        - Estrategia y Narrativa: Listas de recomendaciones y un simulador de opini\u00f3n (HTML\/JS) para la estrategia digital. Objetivo: Informar e interactuar.\r\n        - Protocolo Crisis: Listas detalladas de tipos de crisis, cadena de mando, plan de contenci\u00f3n y claves de reacci\u00f3n. Objetivo: Informar y organizar.\r\n        - Foco en Vocer\u00edas: Listas de l\u00edderes vecinales, medios comarcales y canales informales. Objetivo: Informar.\r\n        - Deportes en Tocina: Tablas detalladas de infraestructura, programas, eventos y clubes deportivos. Objetivo: Informar y organizar.\r\n        - Sobre Este An\u00e1lisis: Resumen de los par\u00e1metros del informe. Objetivo: Informar.\r\n    -->\r\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\r\n    <style>\r\n        body {\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n        .chart-container {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 800px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            height: 300px;\r\n            max-height: 40vh;\r\n        }\r\n        @media (min-width: 768px) {\r\n            .chart-container {\r\n                height: 400px;\r\n            }\r\n        }\r\n        .nav-button {\r\n            transition: all 0.3s ease;\r\n            white-space: nowrap;\r\n            background-color: #ffffff;\r\n            color: #4F46E5;\r\n            padding-left: 1.25rem;\r\n            padding-right: 1.25rem;\r\n            padding-top: 0.625rem;\r\n            padding-bottom: 0.625rem;\r\n            border-radius: 0.5rem;\r\n            font-size: 0.875rem;\r\n            line-height: 1.25rem;\r\n            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n        }\r\n        .nav-button:hover {\r\n            background-color: #EEF2FF;\r\n        }\r\n        .nav-button.active {\r\n            background-color: #4F46E5;\r\n            color: #ffffff;\r\n            font-weight: 600;\r\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n            outline: none;\r\n            box-shadow: 0 0 0 2px #818CF8;\r\n        }\r\n        .content-section {\r\n            display: none;\r\n        }\r\n        .content-section.active {\r\n            display: block;\r\n            animation: fadeIn 0.5s ease-in-out;\r\n        }\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; transform: translateY(10px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        .card {\r\n            padding: 20px;\r\n            border-radius: 10px;\r\n            background: #ffffff;\r\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\r\n            text-align: center;\r\n        }\r\n        .sentiment-gauge {\r\n            width: 150px;\r\n            height: 150px;\r\n            border-radius: 50%;\r\n            position: relative;\r\n            background: conic-gradient(#EF4444 0% 33%, #FBBF24 33% 66%, #10B981 66% 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        .sentiment-gauge-inner {\r\n            width: 120px;\r\n            height: 120px;\r\n            border-radius: 50%;\r\n            background-color: white;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.5rem;\r\n            font-weight: bold;\r\n            color: #333;\r\n        }\r\n        .timeline-container {\r\n            position: relative;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            padding: 20px 0;\r\n        }\r\n        .timeline-container::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background-color: #CBD5E1;\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 50%;\r\n            margin-left: -2px;\r\n        }\r\n        .timeline-item {\r\n            padding: 10px 40px;\r\n            position: relative;\r\n            background-color: inherit;\r\n            width: 50%;\r\n        }\r\n        .timeline-item::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 25px;\r\n            height: 25px;\r\n            right: -17px;\r\n            background-color: #F87171;\r\n            border: 4px solid #EF4444;\r\n            top: 15px;\r\n            border-radius: 50%;\r\n            z-index: 1;\r\n        }\r\n        .timeline-item.left {\r\n            left: 0;\r\n        }\r\n        .timeline-item.right {\r\n            left: 50%;\r\n        }\r\n        .timeline-item.left::after {\r\n            left: 98.5%;\r\n        }\r\n        .timeline-item.right::after {\r\n            left: -17px;\r\n        }\r\n        .timeline-content {\r\n            padding: 20px 30px;\r\n            background-color: #E2E8F0;\r\n            position: relative;\r\n            border-radius: 6px;\r\n        }\r\n        @media screen and (max-width: 768px) {\r\n            .timeline-container::after {\r\n                left: 31px;\r\n            }\r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-left: 70px;\r\n                padding-right: 25px;\r\n                box-sizing: border-box;\r\n            }\r\n            .timeline-item::before {\r\n                left: 60px;\r\n                border-width: 10px 10px 10px 0;\r\n                border-color: transparent #E2E8F0 transparent transparent;\r\n            }\r\n            .timeline-item.right {\r\n                left: 0%;\r\n            }\r\n            .timeline-item.left::after, .timeline-item.right::after {\r\n                left: 15px;\r\n            }\r\n        }\r\n        .progress-bar-container {\r\n            width: 100%;\r\n            background-color: #e0e0e0;\r\n            border-radius: 5px;\r\n            overflow: hidden;\r\n        }\r\n        .progress-bar {\r\n            height: 20px;\r\n            border-radius: 5px;\r\n            text-align: center;\r\n            color: white;\r\n            line-height: 20px;\r\n            transition: width 0.5s ease-in-out;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-stone-50 text-slate-800\">\r\n\r\n    <div class=\"container mx-auto p-4 md:p-8\">\r\n        \r\n        <header class=\"text-center mb-8 flex flex-col items-center\">\r\n            <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900\">An\u00e1lisis de Reputaci\u00f3n y Presencia Digital<\/h1>\r\n            <h2 class=\"text-xl md:text-2xl text-slate-600 mt-2\">Ayuntamiento de Tocina<\/h2>\r\n        <\/header>\r\n\r\n        <nav class=\"flex flex-wrap justify-center gap-2 mb-8 bg-indigo-100 p-2 rounded-lg shadow-sm overflow-x-auto pb-2\">\r\n            <button data-target=\"balance\" class=\"nav-button active\">Balanza Reputacional<\/button>\r\n            <button data-target=\"actores\" class=\"nav-button\">Mapa de Actores<\/button>\r\n            <button data-target=\"alcalde\" class=\"nav-button\">Foco en el Alcalde<\/button>\r\n            <button data-target=\"digital\" class=\"nav-button\">An\u00e1lisis Digital<\/button>\r\n            <button data-target=\"timeline\" class=\"nav-button\">L\u00ednea de Tiempo<\/button>\r\n            <button data-target=\"matriz-ro\" class=\"nav-button\">Matriz R&#038;O<\/button>\r\n            <button data-target=\"termometro\" class=\"nav-button\">Term\u00f3metro Ciudadano<\/button>\r\n            <button data-target=\"posicionamiento\" class=\"nav-button\">Diagn\u00f3stico Posicionamiento<\/button>\r\n            <button data-target=\"benchmarking\" class=\"nav-button\">Benchmarking<\/button>\r\n            <button data-target=\"kpis\" class=\"nav-button\">Panel de KPIs<\/button>\r\n            <button data-target=\"estrategia\" class=\"nav-button\">Estrategia y Narrativa<\/button>\r\n            <button data-target=\"protocolo-crisis\" class=\"nav-button\">Protocolo Crisis<\/button>\r\n            <button data-target=\"vocerias\" class=\"nav-button\">Foco en Vocer\u00edas<\/button>\r\n            <button data-target=\"deportes\" class=\"nav-button\">Deportes en Tocina<\/button>\r\n            <button data-target=\"about\" class=\"nav-button\">Sobre Este An\u00e1lisis<\/button>\r\n        <\/nav>\r\n\r\n        <main>\r\n            <section id=\"balance\" class=\"content-section active\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Balanza Reputacional: La Doble Cara de la Gesti\u00f3n en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">La imagen p\u00fablica del Ayuntamiento de Tocina muestra una gesti\u00f3n activa y proactiva en el primer trimestre, contrastada con el impacto significativo de la crisis del agua en el segundo trimestre, que gener\u00f3 una notable polarizaci\u00f3n.<\/p>\r\n                    \r\n                    <div class=\"flex justify-center gap-4 mb-8\">\r\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>\r\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 Retos Clave<\/button>\r\n                    <\/div>\r\n\r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\r\n                        <div id=\"info-display\" class=\"space-y-4\">\r\n                            <!-- Aqu\u00ed se mostrar\u00e1n los logros o retos -->\r\n                        <\/div>\r\n                        <div class=\"w-full\">\r\n                            <div class=\"chart-container\">\r\n                                <canvas id=\"reputationChart\"><\/canvas>\r\n                            <\/div>\r\n                            <p class=\"text-xs text-center text-slate-500 mt-2\">Gr\u00e1fico de sentimiento medi\u00e1tico estimado por tema. Pulse en los botones para filtrar.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Evoluci\u00f3n del Sentimiento (\u00daltimo Trimestre 2024 &#8211; Junio 2025)<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Observe c\u00f3mo ha variado la percepci\u00f3n general de logros y retos en los medios a lo largo de los \u00faltimos meses.<\/p>\r\n                        <div class=\"chart-container h-[350px] md:h-[450px]\">\r\n                            <canvas id=\"sentimentTrendChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento promedio mensual para logros y retos.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Palabras Clave Destacadas<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-4 max-w-3xl mx-auto\">Estas son las palabras y conceptos m\u00e1s relevantes asociados a los temas seleccionados.<\/p>\r\n                        <div id=\"keywords-display\" class=\"flex flex-wrap justify-center gap-3 text-center\">\r\n                            <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"actores\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Mapa de Actores Clave en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">La opini\u00f3n p\u00fablica en Tocina est\u00e1 influenciada por un diverso grupo de actores: el gobierno municipal, los medios locales y provinciales, y una activa sociedad civil organizada.<\/p>\r\n\r\n                    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10\">\r\n                        <div class=\"bg-blue-50 p-4 rounded-xl border border-blue-200\">\r\n                            <h4 class=\"font-bold text-lg text-blue-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfdb\ufe0f<\/span>Gobierno Municipal<\/h4>\r\n                            <div class=\"text-sm text-slate-700 space-y-3\">\r\n                                <p><strong class=\"text-blue-900\">Alcalde-Presidente:<\/strong> Francisco Jos\u00e9 Calvo Pozo (PSOE).<\/p>\r\n                                <p>El gobierno local, con el Alcalde dirigiendo la comunicaci\u00f3n, centraliza la voz institucional y la gesti\u00f3n de la agenda municipal.<\/p>\r\n                                <details class=\"bg-white rounded-lg p-2 cursor-pointer\">\r\n                                    <summary class=\"font-semibold text-blue-700\">Ver estructura de gobierno<\/summary>\r\n                                    <div class=\"mt-2 text-xs space-y-1 pl-2 border-l-2 border-blue-200\">\r\n                                        <p><strong>Alcalde:<\/strong> Francisco Jos\u00e9 Calvo Pozo<\/p>\r\n                                        <p><strong>Delegada Bienestar Social, Juventud y Cultura:<\/strong> Gloria Iglesias Jabato<\/p>\r\n                                        <p><strong>Delegado Obras y Servicios, Festejos, Empleo, Seguridad:<\/strong> Andr\u00e9s Carmona Aranda<\/p>\r\n                                        <p><strong>Delegada Salud, Igualdad y Mayores:<\/strong> Isabel Armenteros Alarc\u00f3n<\/p>\r\n                                    <\/div>\r\n                                <\/details>\r\n                                <div class=\"mt-3 text-xs\">\r\n                                    <p class=\"font-bold text-slate-600\">Enlaces Sugeridos:<\/p>\r\n                                    <a href=\"https:\/\/www.tocinalosrosales.es\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Web Oficial Ayuntamiento<\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-200\">\r\n                            <h4 class=\"font-bold text-lg text-yellow-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udcf0<\/span>Voces Medi\u00e1ticas Locales y Provinciales<\/h4>\r\n                            <div class=\"text-sm text-slate-700 space-y-3\">\r\n                                <p><strong class=\"text-yellow-900\">Cadena Ser Sevilla \/ Diario de Sevilla:<\/strong> Medios provinciales clave para la cobertura de noticias de Tocina y Los Rosales.<\/p>\r\n                                <p><strong class=\"text-yellow-900\">El Pespunte \/ La Voz del Sur:<\/strong> Medios digitales regionales que cubren la actualidad de la comarca y la provincia.<\/p>\r\n                                <p>Medios nacionales como **Europa Press** y **La Raz\u00f3n** tambi\u00e9n cubren eventos de gran impacto en el municipio.<\/p>\r\n                                <div class=\"mt-3 text-xs\">\r\n                                    <p class=\"font-bold text-slate-600\">Enlaces Sugeridos:<\/p>\r\n                                    <a href=\"https:\/\/cadenaser.com\/emisora\/radio_sevilla\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Cadena Ser Sevilla<\/a><br>\r\n                                    <a href=\"https:\/\/www.diariodesevilla.es\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Diario de Sevilla<\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"bg-green-50 p-4 rounded-xl border border-green-200\">\r\n                               <h4 class=\"font-bold text-lg text-green-800 mb-3 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udc65<\/span>Ciudadan\u00eda y Colectivos<\/h4>\r\n                            <div class=\"text-sm text-slate-700 space-y-3\">\r\n                               <p><strong class=\"text-green-900\">Asociaci\u00f3n de Vecinos \u00abTodos a Una\u00bb:<\/strong> Activa en la canalizaci\u00f3n de demandas, especialmente durante la crisis del agua.<\/p>\r\n                               <p><strong class=\"text-green-900\">Asociaciones Culturales y Deportivas:<\/strong> Reflejan la vitalidad social del municipio a trav\u00e9s de eventos y actividades.<\/p>\r\n                               <p>Grupos y comentarios en redes sociales (Facebook, TikTok) son un term\u00f3metro directo del sentir ciudadano.<\/p>\r\n                               <div class=\"mt-3 text-xs\">\r\n                                    <p class=\"font-bold text-slate-600\">Enlaces Sugeridos:<\/p>\r\n                                    <a href=\"https:\/\/www.tocinalosrosales.es\/asociaciones\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Asociaciones en Tocina<\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por \u00c1reas Municipales<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Percepci\u00f3n de la gesti\u00f3n en \u00e1reas clave del Ayuntamiento basada en la cobertura medi\u00e1tica y el pulso ciudadano.<\/p>\r\n                        <div class=\"chart-container h-[350px] md:h-[400px]\">\r\n                            <canvas id=\"delegationSentimentChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">Valores de sentimiento para cada \u00e1rea.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"alcalde\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en el Alcalde: Francisco Jos\u00e9 Calvo Pozo<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">La figura del alcalde es central en la reputaci\u00f3n del Ayuntamiento de Tocina. Analizamos su proyecci\u00f3n p\u00fablica, principales mensajes y la percepci\u00f3n asociada a su liderazgo.<\/p>\r\n                    \r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\r\n                        <div>\r\n                            <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Narrativa y Mensajes Clave del Alcalde<\/h4>\r\n                            <div class=\"text-sm text-slate-700 space-y-3\">\r\n                                <p>El alcalde Francisco Jos\u00e9 Calvo Pozo, con una larga trayectoria desde 2011 y dirigiendo la comunicaci\u00f3n, se proyecta como un l\u00edder **cercano y resolutivo**. Sus mensajes se centran en la **gesti\u00f3n diaria**, la **promoci\u00f3n cultural y deportiva**, y la **exigencia de soluciones a otras administraciones** en temas de infraestructura.<\/p>\r\n                                <p>Destaca su enfoque en:<\/p>\r\n                                <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                    <li>La proximidad a los vecinos a trav\u00e9s de redes sociales personales.<\/li>\r\n                                    <li>El liderazgo en la gesti\u00f3n de crisis, como la rotura de la tuber\u00eda de agua.<\/li>\r\n                                    <li>La defensa de los intereses de Tocina ante otras entidades (Aguas del Huesna, Diputaci\u00f3n).<\/li>\r\n                                    <li>La visibilidad de la agenda municipal (festejos, obras menores).<\/li>\r\n                                <\/ul>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"text-xl font-bold text-indigo-800 mb-3\">Percepci\u00f3n P\u00fablica y Sentimiento Asociado<\/h4>\r\n                            <div class=\"text-sm text-slate-700 space-y-3\">\r\n                                <p>La percepci\u00f3n general sobre el alcalde es **polarizada**. Se valora su **cercan\u00eda y respuesta en emergencia**, pero enfrenta cr\u00edticas directas y frustraci\u00f3n por la **recurrencia de problemas de infraestructura** (ej. agua) y la percepci\u00f3n de falta de mantenimiento a largo plazo.<\/p>\r\n                                <div class=\"flex justify-center mb-6 mt-4\">\r\n                                    <div class=\"sentiment-gauge\" style=\"background: conic-gradient(#EF4444 0% 40%, #FBBF24 40% 60%, #10B981 60% 100%);\">\r\n                                        <div class=\"sentiment-gauge-inner\">20%<\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento neto promedio asociado a la figura del alcalde (afectado por crisis de junio).<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas Clave Asociados al Alcalde<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-4 max-w-3xl mx-auto\">Las palabras clave m\u00e1s frecuentes en la conversaci\u00f3n p\u00fablica ligadas a la figura del alcalde.<\/p>\r\n                        <div class=\"flex flex-wrap justify-center gap-3 text-center\">\r\n                            <span class=\"inline-block p-2 m-1 bg-red-100 rounded-lg shadow-sm text-xl font-bold text-red-800\">Agua<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-red-100 rounded-lg shadow-sm text-lg font-semibold text-red-800\">Tuber\u00eda<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-red-100 rounded-lg shadow-sm text-base font-medium text-red-800\">Cortes<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-blue-100 rounded-lg shadow-sm text-xl font-bold text-blue-800\">Gesti\u00f3n<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-blue-100 rounded-lg shadow-sm text-lg font-semibold text-blue-800\">Emergencia<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-blue-100 rounded-lg shadow-sm text-base font-medium text-blue-800\">Vecinos<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-green-100 rounded-lg shadow-sm text-lg font-semibold text-green-800\">Festejos<\/span>\r\n                            <span class=\"inline-block p-2 m-1 bg-green-100 rounded-lg shadow-sm text-base font-medium text-green-800\">Obras<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Recomendaciones de Comunicaci\u00f3n para el Alcalde<\/h4>\r\n                        <ul class=\"list-disc list-inside text-sm text-slate-700 space-y-2 max-w-3xl mx-auto\">\r\n                            <li><strong>Transparencia en Crisis:<\/strong> Mantener una comunicaci\u00f3n constante y emp\u00e1tica durante las crisis, explicando las causas, acciones y plazos, incluso si la situaci\u00f3n es compleja.<\/li>\r\n                            <li><strong>Proactividad en Infraestructuras:<\/strong> Comunicar activamente los planes de inversi\u00f3n y mantenimiento de infraestructuras cr\u00edticas, destacando los esfuerzos y los desaf\u00edos a largo plazo.<\/li>\r\n                            <li><strong>Reforzar la Cercan\u00eda Positiva:<\/strong> Potenciar los mensajes sobre gesti\u00f3n diaria, eventos y logros que generen buen sentimiento, utilizando sus canales personales de forma estrat\u00e9gica.<\/li>\r\n                            <li><strong>Di\u00e1logo Bidireccional:<\/strong> Fomentar canales donde los ciudadanos puedan expresar sus inquietudes y recibir respuestas formales y seguimiento.<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"digital\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">An\u00e1lisis de la Presencia Digital en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">La estrategia digital del Ayuntamiento de Tocina se basa en una comunicaci\u00f3n institucional robusta y la interacci\u00f3n directa con la ciudadan\u00eda a trav\u00e9s de sus plataformas, aunque la crisis del agua ha puesto a prueba su resiliencia.<\/p>\r\n\r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n                        <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\r\n                            <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">Estrategia de Comunicaci\u00f3n<\/h4>\r\n                             <p class=\"text-sm text-slate-700 mb-3\">El Ayuntamiento mantiene una activa presencia digital a trav\u00e9s de su web, app m\u00f3vil y redes sociales, difundiendo noticias y gestionando incidencias.<\/p>\r\n                             <ul class=\"text-sm space-y-2\">\r\n                                 <li class=\"flex items-start\"><span class=\"text-emerald-500 mr-2 mt-1\">\u2795<\/span><strong>Fortaleza:<\/strong> Uso de App m\u00f3vil para incidencias y WhatsApp para alertas, garantizando inmediatez.<\/li>\r\n                                 <li class=\"flex items-start\"><span class=\"text-red-500 mr-2 mt-1\">\u2796<\/span><strong>Oportunidad:<\/strong> Integrar mejor las quejas informales de redes sociales con los sistemas de seguimiento oficiales para evitar frustraci\u00f3n.<\/li>\r\n                             <\/ul>\r\n                             <div class=\"mt-3 text-xs\">\r\n                                 <p class=\"font-bold text-slate-600\">Canales Oficiales:<\/p>\r\n                                 <a href=\"https:\/\/www.tocinalosrosales.es\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Web Oficial<\/a><br>\r\n                                 <a href=\"https:\/\/www.facebook.com\/ayuntamientotocina\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Facebook<\/a><br>\r\n                                 <a href=\"https:\/\/twitter.com\/Ayto_Tocina\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Twitter (X)<\/a><br>\r\n                                 <a href=\"https:\/\/www.instagram.com\/aytotocina\/\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Instagram<\/a>\r\n                             <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"bg-indigo-50 p-4 rounded-xl border border-indigo-200\">\r\n                            <h4 class=\"font-bold text-lg mb-3 text-indigo-800\">El Pulso Ciudadano en Canales Digitales<\/h4>\r\n                             <p class=\"text-sm text-slate-700 mb-3\">La participaci\u00f3n ciudadana se manifiesta activamente en redes sociales, especialmente durante eventos cr\u00edticos como la crisis del agua.<\/p>\r\n                             <ul class=\"text-sm text-slate-700 space-y-2\">\r\n                                 <li><strong>Grupos de Facebook y Comentarios:<\/strong> Son un term\u00f3metro directo del sentir ciudadano, donde se expresan frustraciones y demandas (ej. sobre cortes de agua).<\/li>\r\n                                 <li><strong>TikTok:<\/strong> Se observaron comentarios y contenido con tono de hartazgo y sarcasmo durante la crisis del agua, reflejando el descontento.<\/li>\r\n                             <\/ul>\r\n                             <div class=\"mt-3 text-xs\">\r\n                                 <p class=\"font-bold text-slate-600\">Ejemplos de Tem\u00e1ticas en Foros:<\/p>\r\n                                 <a href=\"https:\/\/www.google.com\/search?q=grupo+facebook+vecinos+tocina\" target=\"_blank\" class=\"text-blue-500 hover:underline\">Buscar grupos de vecinos en Facebook<\/a>\r\n                             <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento por Tipo de Medio<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Distribuci\u00f3n de sentimiento (positivo, neutral, negativo) en diferentes tipos de medios, reflejando el impacto de la crisis del agua.<\/p>\r\n                        <div class=\"chart-container h-[350px] md:h-[400px]\">\r\n                            <canvas id=\"mediaSentimentChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">Valores de sentimiento por tipo de medio.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">M\u00e9tricas de Engagement Digital<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Comparativa de las interacciones en canales oficiales y no oficiales, destacando la alta interacci\u00f3n en canales no oficiales durante la crisis.<\/p>\r\n                        <div class=\"chart-container h-[300px] md:h-[350px]\">\r\n                            <canvas id=\"engagementMetricsChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">Interacciones (Me gusta, Comentarios, Compartidos) en diferentes canales.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"timeline\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">L\u00ednea de Tiempo de Eventos Clave en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Explore los hitos m\u00e1s importantes que han marcado la agenda municipal y medi\u00e1tica en Tocina, desde finales de 2024 hasta la actualidad, destacando la crisis del agua.<\/p>\r\n                    <div class=\"flex flex-wrap justify-center gap-2 mb-6\">\r\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>\r\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>\r\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>\r\n                        <button data-filter=\"Cultura\" class=\"timeline-filter-button px-4 py-2 bg-purple-100 rounded-lg text-sm hover:bg-purple-200 transition-colors\">Cultura<\/button>\r\n                        <button data-filter=\"Servicios\" class=\"timeline-filter-button px-4 py-2 bg-blue-100 rounded-lg text-sm hover:bg-blue-200 transition-colors\">Servicios<\/button>\r\n                    <\/div>\r\n                    <div class=\"timeline-container\">\r\n                        <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"matriz-ro\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Matriz de Riesgos y Oportunidades Narrativas en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Esta matriz eval\u00faa los principales vectores de exposici\u00f3n reputacional y las ventanas para generar un relato institucional positivo en Tocina.<\/p>\r\n                    \r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n                        <div class=\"bg-red-50 p-4 rounded-xl border border-red-200\">\r\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>\r\n                            <ul class=\"list-disc list-inside text-sm text-slate-700 space-y-2\">\r\n                                <li><strong>Infraestructuras H\u00eddricas:<\/strong> La recurrencia de roturas y cortes de agua es el riesgo reputacional m\u00e1s alto, generando frustraci\u00f3n y desconfianza.<\/li>\r\n                                <li><strong>Percepci\u00f3n de Falta de Mantenimiento:<\/strong> La narrativa ciudadana sobre la antig\u00fcedad de las tuber\u00edas y la falta de inversi\u00f3n a largo plazo.<\/li>\r\n                                <li><strong>Politizaci\u00f3n de Crisis:<\/strong> La instrumentalizaci\u00f3n de los problemas por parte de la oposici\u00f3n, amplificando el descontento.<\/li>\r\n                                <li><strong>Brecha Say-Do:<\/strong> Desconexi\u00f3n entre el discurso oficial de gesti\u00f3n y la experiencia real de los ciudadanos durante las crisis.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"bg-emerald-50 p-4 rounded-xl border border-emerald-200\">\r\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>\r\n                            <ul class=\"list-disc list-inside text-sm text-slate-700 space-y-2\">\r\n                                <li><strong>Gesti\u00f3n Proactiva de la Agenda:<\/strong> Eventos culturales, festejos y obras menores generan un sentimiento positivo que puede ser amplificado.<\/li>\r\n                                <li><strong>Cercan\u00eda del Alcalde:<\/strong> La comunicaci\u00f3n directa y la respuesta en emergencia del Alcalde son activos reputacionales a potenciar.<\/li>\r\n                                <li><strong>Inversi\u00f3n en Servicios y Bienestar:<\/strong> Proyectos como campamentos digitales, mejoras en centros deportivos y programas sociales.<\/li>\r\n                                <li><strong>Transparencia y Lucha contra Bulos:<\/strong> La promoci\u00f3n de canales oficiales para informaci\u00f3n veraz y la rendici\u00f3n de cuentas.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"termometro\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\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 Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Una escucha activa nos permite comprender el sentimiento general, los temas de conversaci\u00f3n dominantes y c\u00f3mo se compara Tocina con municipios hom\u00f3logos.<\/p>\r\n                    \r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10\">\r\n                        <div>\r\n                            <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Sentimiento General (Promedio)<\/h4>\r\n                            <p class=\"text-center text-slate-600 mb-4\">La percepci\u00f3n ciudadana predominante es **polarizada**, con un fuerte impacto negativo de la crisis del agua, aunque con \u00e1reas de gesti\u00f3n valoradas positivamente.<\/p>\r\n                            <div class=\"flex justify-center mb-6\">\r\n                                <div class=\"sentiment-gauge\" style=\"background: conic-gradient(#EF4444 0% 45%, #FBBF24 45% 70%, #10B981 70% 100%);\">\r\n                                    <div class=\"sentiment-gauge-inner\">25%<\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: -100% (Muy Negativo) a +100% (Muy Positivo). 0% es Neutral.<\/p>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Temas de Conversaci\u00f3n Dominantes<\/h4>\r\n                            <p class=\"text-center text-slate-600 mb-4\">Las conversaciones en redes y foros giran principalmente en torno a la **crisis del agua**, la **gesti\u00f3n de infraestructuras**, y los **servicios municipales**.<\/p>\r\n                            <div class=\"flex flex-wrap justify-center gap-2\">\r\n                                <span class=\"px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-semibold\">Crisis Agua<\/span>\r\n                                <span class=\"px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold\">Infraestructuras<\/span>\r\n                                <span class=\"px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-semibold\">Mantenimiento<\/span>\r\n                                <span class=\"px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-sm font-semibold\">Festejos<\/span>\r\n                                <span class=\"px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-semibold\">Obras<\/span>\r\n                                <span class=\"px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-semibold\">Servicios<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Sentimiento con Municipios Hom\u00f3logos<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Sentimiento neto promedio de Tocina frente a otros municipios de tama\u00f1o similar en la provincia de Sevilla.<\/p>\r\n                        <div class=\"chart-container h-[350px] md:h-[400px]\">\r\n                            <canvas id=\"comparativeSentimentChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">Sentimiento neto (positivo-negativo).<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"posicionamiento\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Diagn\u00f3stico de Posicionamiento Institucional en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Definimos c\u00f3mo es percibido el Ayuntamiento por sus p\u00fablicos clave, qu\u00e9 valores proyecta y c\u00f3mo encaja esa percepci\u00f3n con el relato deseado por el gobierno local.<\/p>\r\n                    \r\n                    <div class=\"space-y-6 text-slate-700\">\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Percepci\u00f3n Actual del Ayuntamiento<\/h4>\r\n                            <p>El Ayuntamiento de Tocina es percibido como una instituci\u00f3n **cercana en la gesti\u00f3n diaria y eventos**, pero con una imagen **vulnerable ante la gesti\u00f3n de infraestructuras cr\u00edticas**, especialmente tras la crisis del agua. La **capacidad de respuesta en emergencia** es valorada, pero la **recurrencia de problemas** afecta la percepci\u00f3n de previsi\u00f3n y mantenimiento a largo plazo.<\/p>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Valores Proyectados (Percepci\u00f3n vs. Deseado)<\/h4>\r\n                            <p>Esta tabla y el gr\u00e1fico muestran c\u00f3mo se perciben ciertos valores en la gesti\u00f3n municipal, en comparaci\u00f3n con los valores ideales que el Ayuntamiento desear\u00eda proyectar.<\/p>\r\n                            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center mt-4\">\r\n                                <div class=\"w-full\">\r\n                                    <div class=\"chart-container h-[300px] md:h-[350px]\">\r\n                                        <canvas id=\"valuesRadarChart\"><\/canvas>\r\n                                    <\/div>\r\n                                    <p class=\"text-xs text-center text-slate-500 mt-2\">Escala: 0 (Muy Bajo) a 10 (Muy Alto)<\/p>\r\n                                <\/div>\r\n                                <div class=\"text-sm space-y-2\">\r\n                                    <p><strong>Cercan\u00eda:<\/strong> Alta en contacto personal y eventos; oportunidad de mejora en respuesta a quejas formales.<\/p>\r\n                                    <p><strong>Eficacia:<\/strong> Alta en gesti\u00f3n de eventos y obras menores; percibida con retos en la resoluci\u00f3n definitiva de problemas de infraestructura.<\/p>\r\n                                    <p><strong>Transparencia:<\/strong> Alta en informaci\u00f3n general; con espacio para mayor claridad sobre inversiones y planes de mantenimiento de infraestructuras.<\/p>\r\n                                    <p><strong>Desarrollo:<\/strong> Moderada, enfocada en mejoras locales y servicios.<\/p>\r\n                                    <p><strong>Innovaci\u00f3n:<\/strong> Presente en el uso de la App m\u00f3vil y WhatsApp, con potencial de comunicar m\u00e1s iniciativas digitales.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Encaje con el Relato Deseado<\/h4>\r\n                            <p>El relato deseado por el gobierno local se enfoca en **\u00bbTocina: Un Pueblo que Avanza con sus Vecinos\u00bb**, un municipio que apuesta por la calidad de vida, la participaci\u00f3n y la gesti\u00f3n cercana. La percepci\u00f3n actual encaja con la cercan\u00eda y la gesti\u00f3n de eventos. La brecha principal se encuentra en la percepci\u00f3n de la gesti\u00f3n de infraestructuras cr\u00edticas y la necesidad de comunicar un plan a largo plazo que genere confianza y mitigue la frustraci\u00f3n ciudadana por problemas recurrentes.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"benchmarking\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Benchmarking de Ayuntamientos en la Provincia de Sevilla<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">An\u00e1lisis comparativo de la reputaci\u00f3n y comunicaci\u00f3n digital de ayuntamientos similares en la provincia de Sevilla.<\/p>\r\n                    \r\n                    <div class=\"overflow-x-auto mb-8\">\r\n                        <table class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\">\r\n                            <thead>\r\n                                <tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\">\r\n                                    <th class=\"py-3 px-4 border-b\">Municipio<\/th>\r\n                                    <th class=\"py-3 px-4 border-b\">Sentimiento Neto<\/th>\r\n                                    <th class=\"py-3 px-4 border-b\">Visibilidad Media<\/th>\r\n                                    <th class=\"py-3 px-4 border-b\">Engagement RRSS<\/th>\r\n                                    <th class=\"py-3 px-4 border-b\">Innovaci\u00f3n Digital<\/th>\r\n                                <\/tr>\r\n                            <\/thead>\r\n                            <tbody>\r\n                                <tr class=\"hover:bg-gray-50 text-sm text-slate-700\">\r\n                                    <td class=\"py-3 px-4 border-b\"><strong>Tocina<\/strong><\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">25%<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media-Alta<\/td>\r\n                                <\/tr>\r\n                                <tr class=\"hover:bg-gray-50 text-sm text-slate-700\">\r\n                                    <td class=\"py-3 px-4 border-b\">La Algaba<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">55%<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                <\/tr>\r\n                                <tr class=\"hover:bg-gray-50 text-sm text-slate-700\">\r\n                                    <td class=\"py-3 px-4 border-b\">Pilas<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">60%<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Baja<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Baja<\/td>\r\n                                <\/tr>\r\n                                <tr class=\"hover:bg-gray-50 text-sm text-slate-700\">\r\n                                    <td class=\"py-3 px-4 border-b\">Villanueva del Ariscal<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">65%<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Baja<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Baja<\/td>\r\n                                    <td class=\"py-3 px-4 border-b\">Media<\/td>\r\n                                <\/tr>\r\n                            <\/tbody>\r\n                        <\/table>\r\n                    <\/div>\r\n                    <p class=\"text-xs text-center text-slate-500 mt-2\">Datos para fines ilustrativos.<\/p>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Comparativa de Presencia en Redes Sociales<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Comparaci\u00f3n del n\u00famero de seguidores\/interacciones promedio en redes sociales.<\/p>\r\n                        <div class=\"chart-container h-[350px] md:h-[400px]\">\r\n                            <canvas id=\"socialMediaComparisonChart\"><\/canvas>\r\n                        <\/div>\r\n                        <p class=\"text-xs text-center text-slate-500 mt-2\">N\u00famero de interacciones promedio por publicaci\u00f3n.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"kpis\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Panel de KPIs Reputacionales en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Indicadores clave de rendimiento para el seguimiento continuo de la reputaci\u00f3n institucional de Tocina a 3, 6 y 12 meses.<\/p>\r\n                    \r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n                        <div class=\"bg-blue-50 p-4 rounded-xl border border-blue-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-blue-800 mb-2\">Engagement Social Neto<\/h4>\r\n                            <p class=\"text-3xl font-bold text-blue-700 mb-2\">20% <span class=\"text-sm font-normal text-red-500\">\u25bc -15%<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">Porcentaje de interacciones positivas sobre el total en canales digitales (oficiales y no oficiales).<\/p>\r\n                            <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-blue-500\" style=\"width: 20%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-purple-50 p-4 rounded-xl border border-purple-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-purple-800 mb-2\">Visibilidad Proactiva vs. Reactiva<\/h4>\r\n                            <p class=\"text-3xl font-bold text-purple-700 mb-2\">40% <span class=\"text-sm font-normal text-red-500\">\u25bc -10%<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">Porcentaje de noticias generadas por iniciativa del Ayuntamiento frente a respuestas a crisis.<\/p>\r\n                            <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-purple-500\" style=\"width: 40%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-yellow-800 mb-2\">Impacto Medi\u00e1tico Provincial<\/h4>\r\n                            <p class=\"text-3xl font-bold text-yellow-700 mb-2\">6\/10 <span class=\"text-sm font-normal text-red-500\">\u25bc -2<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">Puntuaci\u00f3n de la cobertura en medios provinciales.<\/p>\r\n                            <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-yellow-500\" style=\"width: 60%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-green-50 p-4 rounded-xl border border-green-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-green-800 mb-2\">Sentimiento Neto Alcalde<\/h4>\r\n                            <p class=\"text-3xl font-bold text-green-700 mb-2\">20% <span class=\"text-sm font-normal text-red-500\">\u25bc -50%<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">Sentimiento promedio asociado a la figura del alcalde en todos los medios.<\/p>\r\n                            <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-green-500\" style=\"width: 20%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-red-50 p-4 rounded-xl border border-red-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-red-800 mb-2\">Sentimiento Neto en Infraestructuras<\/h4>\r\n                            <p class=\"text-3xl font-bold text-red-700 mb-2\">-70% <span class=\"text-sm font-normal text-red-500\">\u25bc -60%<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">Sentimiento promedio asociado al tema de infraestructuras y servicios cr\u00edticos.<\/p>\r\n                            <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-red-500\" style=\"width: 70%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-blue-50 p-4 rounded-xl border border-blue-200 flex flex-col justify-between\">\r\n                            <h4 class=\"font-bold text-lg text-blue-800 mb-2\">Menciones en Medios Digitales Locales<\/h4>\r\n                            <p class=\"text-3xl font-bold text-blue-700 mb-2\">1200 <span class=\"text-sm font-normal text-green-500\">\u25b2 +800<\/span><\/p>\r\n                            <p class=\"text-sm text-slate-700\">N\u00famero total de menciones del Ayuntamiento en medios digitales locales por mes (pico por crisis).<\/p>\r\n                             <div class=\"progress-bar-container mt-3\">\r\n                                <div class=\"progress-bar bg-blue-500\" style=\"width: 90%;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <p class=\"text-xs text-center text-slate-500 mt-4\">Los valores son para fines ilustrativos y las flechas indican tendencias recientes.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"estrategia\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Estrategia y Recomendaciones de Comunicaci\u00f3n en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Para fortalecer la reputaci\u00f3n, el Ayuntamiento de Tocina debe capitalizar sus logros y abordar proactivamente sus debilidades, transformando la comunicaci\u00f3n de retos en una oportunidad para generar confianza, especialmente en el \u00e1mbito de las infraestructuras.<\/p>\r\n\r\n                    <div class=\"space-y-6\">\r\n                        <div class=\"p-4 bg-blue-50 rounded-xl border border-blue-200\">\r\n                            <h4 class=\"font-bold text-lg text-blue-800\">1. Fortalecer la Imagen Institucional<\/h4>\r\n                            <ul class=\"list-disc list-inside text-sm text-slate-700 mt-2 space-y-1\">\r\n                                <li><strong>Amplificar la narrativa de gesti\u00f3n proactiva:<\/strong> Destacar los eventos culturales, festejos y obras menores que generan un impacto positivo en la vida diaria.<\/li>\r\n                                <li><strong>Comunicar inversi\u00f3n y mantenimiento de infraestructuras:<\/strong> Informar de forma transparente sobre los planes y avances en la mejora de la red de agua y otros servicios cr\u00edticos.<\/li>\r\n                                <li><strong>Destacar la cercan\u00eda y respuesta del Alcalde:<\/strong> Poner en valor la capacidad de respuesta y la comunicaci\u00f3n directa durante las emergencias.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"p-4 bg-yellow-50 rounded-xl border border-yellow-200\">\r\n                            <h4 class=\"font-bold text-lg text-yellow-800\">2. Gesti\u00f3n Proactiva de Retos (Especialmente Infraestructuras)<\/h4>\r\n                            <ul class=\"list-disc list-inside text-sm text-slate-700 mt-2 space-y-1\">\r\n                                <li><strong>Comunicaci\u00f3n de Crisis H\u00eddrica:<\/strong> Desarrollar un plan espec\u00edfico para futuras incidencias, con mensajes claros, emp\u00e1ticos y actualizados sobre la situaci\u00f3n, las acciones y los plazos.<\/li>\r\n                                <li><strong>Abordar la Percepci\u00f3n de Mantenimiento:<\/strong> Comunicar los esfuerzos en mantenimiento preventivo y las inversiones a largo plazo para las infraestructuras, incluso si los resultados no son inmediatos.<\/li>\r\n                                <li><strong>Gestionar Expectativas y Frustraciones:<\/strong> Reconocer el impacto de los problemas en la ciudadan\u00eda y ofrecer canales efectivos para la gesti\u00f3n de quejas y compensaciones.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"p-4 bg-green-50 rounded-xl border border-green-200\">\r\n                            <h4 class=\"font-bold text-lg text-green-800\">3. Mejorar el Di\u00e1logo y la Presencia Digital<\/h4>\r\n                            <ul class=\"list-disc list-inside text-sm text-slate-700 mt-2 space-y-1\">\r\n                                <li><strong>Monitorear canales no oficiales:<\/strong> Escuchar activamente el sentir ciudadano en grupos de WhatsApp y redes sociales para identificar problemas emergentes y desinformaci\u00f3n.<\/li>\r\n                                <li><strong>Centralizar la gesti\u00f3n de quejas:<\/strong> Integrar las quejas de redes sociales con los sistemas formales de seguimiento para garantizar una respuesta y un registro.<\/li>\r\n                                <li><strong>Potenciar el uso de la App y WhatsApp:<\/strong> Reforzar estos canales como v\u00edas oficiales y eficientes para la comunicaci\u00f3n bidireccional y la resoluci\u00f3n de incidencias.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-center mb-4 text-indigo-800\">Narrativa Recomendada y Argumentario Central<\/h4>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Dise\u00f1o de un relato marco institucional claro, emocional y s\u00f3lido para guiar la comunicaci\u00f3n p\u00fablica.<\/p>\r\n                        <div class=\"space-y-4 text-slate-700\">\r\n                            <h5 class=\"font-semibold text-lg text-indigo-800\">Tono, Estilo y Ejes Clave:<\/h5>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Tono:<\/strong> Cercano, transparente, resolutivo y comprometido.<\/li>\r\n                                <li><strong>Estilo:<\/strong> Directo, emp\u00e1tico, proactivo y centrado en el bienestar ciudadano.<\/li>\r\n                                <li><strong>Ejes Clave:<\/strong>\r\n                                    <ul>\r\n                                        <li>Tocina: Un pueblo que gestiona su d\u00eda a d\u00eda y construye su futuro.<\/li>\r\n                                        <li>Compromiso con la mejora de servicios y calidad de vida.<\/li>\r\n                                        <li>Transparencia y trabajo constante por el bienestar de los vecinos.<\/li>\r\n                                    <\/ul>\r\n                                <\/li>\r\n                            <\/ul>\r\n                            <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">Argumentario Central Frente a Cr\u00edticas Recurrentes:<\/h5>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Infraestructuras (Agua):<\/strong> \u00abLa recurrencia de aver\u00edas en la red de agua es una preocupaci\u00f3n que compartimos. Estamos trabajando con [Entidad Responsable, ej. Aguas del Huesna] en un plan de inversi\u00f3n y mantenimiento a largo plazo para garantizar un suministro estable y de calidad en Tocina.\u00bb<\/li>\r\n                                <li><strong>Mantenimiento:<\/strong> \u00abReforzamos constantemente los equipos de mantenimiento y limpieza en todos los barrios. Su colaboraci\u00f3n es esencial para mantener nuestro pueblo en las mejores condiciones.\u00bb<\/li>\r\n                                <li><strong>Gesti\u00f3n de Crisis:<\/strong> \u00abAnte cualquier incidencia, nuestra prioridad es la seguridad y el bienestar de los vecinos. Activamos todos los protocolos de emergencia y mantenemos una comunicaci\u00f3n constante para informar y atender sus necesidades.\u00bb<\/li>\r\n                            <\/ul>\r\n                            <h5 class=\"font-semibold text-lg text-indigo-800 mt-4\">Marco Narrativo Unificador para Concejales y Portavoces:<\/h5>\r\n                            <p>\u00abDesde el Ayuntamiento de Tocina, trabajamos con cercan\u00eda y transparencia para mejorar el d\u00eda a d\u00eda de nuestros vecinos. Con compromiso y dedicaci\u00f3n, gestionamos los desaf\u00edos y construimos un futuro de bienestar para todo el pueblo.\u00bb<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mt-8 pt-8 border-t border-gray-200\">\r\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>\r\n                        <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Ay\u00fadanos a simular la percepci\u00f3n sobre dos enfoques estrat\u00e9gicos en la comunicaci\u00f3n digital.<\/p>\r\n                        <div class=\"flex justify-center gap-4\">\r\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 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all\">Potenciar Transparencia (Datos)<\/button>\r\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 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all\">Mayor Presencia Personal (Alcalde\/Concejales)<\/button>\r\n                        <\/div>\r\n                        <div id=\"poll-result\" class=\"text-center text-lg font-semibold mt-6 text-slate-700\">\r\n                            <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"protocolo-crisis\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Protocolo de Actuaci\u00f3n Ante Crisis Reputacional en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Manual operativo para una respuesta r\u00e1pida, coordinada y efectiva ante posibles crisis que puedan afectar la imagen del Ayuntamiento de Tocina, con especial foco en infraestructuras.<\/p>\r\n                    \r\n                    <div class=\"space-y-6 text-slate-700\">\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">1. Tipos de Crisis Posibles<\/h4>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Crisis de Infraestructura:<\/strong> Roturas de tuber\u00edas de agua, cortes de suministro el\u00e9ctrico, fallos en saneamiento, problemas de limpieza urbana a gran escala.<\/li>\r\n                                <li><strong>Crisis Social:<\/strong> Protestas vecinales (ej. por servicios, obras), incidentes de seguridad ciudadana, conflictos en eventos p\u00fablicos.<\/li>\r\n                                <li><strong>Crisis Pol\u00edtica:<\/strong> Controversias relacionadas con decisiones de gobierno, conflictos internos, acusaciones de mala gesti\u00f3n o falta de transparencia.<\/li>\r\n                                <li><strong>Crisis Medi\u00e1tica\/Digital:<\/strong> Viralizaci\u00f3n de desinformaci\u00f3n o bulos, campa\u00f1as de desprestigio en redes sociales, cobertura negativa persistente en medios regionales.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">2. Cadena de Mando y Portavoces<\/h4>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Comit\u00e9 de Crisis:<\/strong> Alcald\u00eda (Presidente), Delegaci\u00f3n de Comunicaci\u00f3n, Delegaci\u00f3n afectada (ej. Obras y Servicios, Seguridad), Asesor\u00eda Jur\u00eddica.<\/li>\r\n                                <li><strong>Portavoz Principal:<\/strong> Alcalde o Delegado de Comunicaci\u00f3n.<\/li>\r\n                                <li><strong>Portavoces T\u00e9cnicos:<\/strong> Concejales o t\u00e9cnicos de la delegaci\u00f3n directamente implicada, para asuntos espec\u00edficos y detallados (ej. Aguas del Huesna si aplica).<\/li>\r\n                                <li><strong>Prohibici\u00f3n:<\/strong> Ning\u00fan otro miembro de la corporaci\u00f3n o personal municipal debe realizar declaraciones p\u00fablicas sin autorizaci\u00f3n expresa del Comit\u00e9 de Crisis.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">3. Plan de Contenci\u00f3n Digital (Primeras 24h)<\/h4>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Monitorizaci\u00f3n Intensiva:<\/strong> Escucha activa 24\/7 en redes sociales (Facebook, X, TikTok), medios digitales locales y provinciales, y grupos de WhatsApp vecinales. Identificaci\u00f3n de narrativas, bulos y focos de viralizaci\u00f3n (ej. quejas por agua, da\u00f1os, falta de informaci\u00f3n).<\/li>\r\n                                <li><strong>Evaluaci\u00f3n R\u00e1pida:<\/strong> Determinar la magnitud de la crisis, su potencial de escalada y el sentimiento predominante en la conversaci\u00f3n digital.<\/li>\r\n                                <li><strong>Primer Mensaje (Si Aplica):<\/strong> En crisis graves (ej. cortes de agua, inundaciones), emitir un primer mensaje breve y emp\u00e1tico de reconocimiento de la situaci\u00f3n y compromiso de actuaci\u00f3n. \u00abEstamos trabajando intensamente para resolver la situaci\u00f3n en [zona afectada]&#8230;\u00bb<\/li>\r\n                                <li><strong>Preparaci\u00f3n de FAQs:<\/strong> Elaborar preguntas y respuestas frecuentes con informaci\u00f3n verificada para uso interno y futuro argumetario (ej. d\u00f3nde recoger agua, c\u00f3mo reportar da\u00f1os).<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">4. Claves de Reacci\u00f3n en Medios y Redes<\/h4>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Transparencia:<\/strong> Compartir informaci\u00f3n verificada de forma proactiva (ej. estado de la reparaci\u00f3n, planes de suministro alternativo). No ocultar datos, incluso si son desfavorables, explicando siempre el contexto y las acciones correctivas.<\/li>\r\n                                <li><strong>Empat\u00eda:<\/strong> Reconocer el impacto en los ciudadanos y expresar preocupaci\u00f3n por su situaci\u00f3n. Poner a las personas en el centro del discurso, especialmente en crisis que afectan su d\u00eda a d\u00eda.<\/li>\r\n                                <li><strong>Responsabilidad y Colaboraci\u00f3n:<\/strong> Asumir la parte de responsabilidad que corresponda al Ayuntamiento. Clarificar competencias con otras entidades (ej. Aguas del Huesna, Diputaci\u00f3n), pero siempre desde una postura colaborativa y de soluci\u00f3n conjunta.<\/li>\r\n                                <li><strong>Agilidad:<\/strong> Responder con rapidez. Un silencio prolongado puede interpretarse como desinter\u00e9s o falta de control. La inmediatez es clave en el entorno digital.<\/li>\r\n                                <li><strong>Coherencia:<\/strong> Mantener un mensaje unificado en todos los canales y por parte de todos los portavoces. Evitar contradicciones.<\/li>\r\n                                <li><strong>Correcci\u00f3n:<\/strong> Si la informaci\u00f3n inicial es err\u00f3nea o incompleta, corregirla con transparencia y rapidez, explicando el motivo de la rectificaci\u00f3n.<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"vocerias\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Foco en Vocer\u00edas Locales y Medios Influenciadores en Tocina<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Identificaci\u00f3n de l\u00edderes vecinales con peso real, medios comarcales influyentes y canales informales que moldean la opini\u00f3n p\u00fablica local en Tocina.<\/p>\r\n                    \r\n                    <div class=\"space-y-6 text-slate-700\">\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">L\u00edderes Vecinales y Colectivos con Peso Real<\/h4>\r\n                            <p>M\u00e1s all\u00e1 de las asociaciones formales, existen figuras y colectivos clave que articulan el sentir de barrios y segmentos espec\u00edficos de la poblaci\u00f3n, influyendo en la opini\u00f3n p\u00fablica local.<\/p>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Asociaci\u00f3n de Vecinos \u00abTodos a Una\u00bb:<\/strong> Principal voz organizada de los vecinos, activa en demandas sobre servicios y calidad de vida, especialmente relevante durante la crisis del agua.<\/li>\r\n                                <li><strong>L\u00edderes de Grupos de Afectados por Crisis:<\/strong> Figuras que pueden surgir durante o despu\u00e9s de incidencias (ej. inundaciones por rotura de tuber\u00eda), canalizando el descontento y las exigencias de compensaci\u00f3n.<\/li>\r\n                                <li><strong>Asociaciones Culturales y Deportivas:<\/strong> Influyen en la percepci\u00f3n de la agenda municipal y el dinamismo social.<\/li>\r\n                                <li><strong>AMPAs Activas:<\/strong> En temas de educaci\u00f3n y estado de los centros escolares.<\/li>\r\n                            <\/ul>\r\n                            <p class=\"mt-2 text-sm text-slate-600\">Estrategia: Mantener un canal de di\u00e1logo abierto y constante con estos l\u00edderes. Invitarlos a reuniones informativas sobre proyectos que les afecten, responder con agilidad a sus demandas y buscar la colaboraci\u00f3n en la medida de lo posible. Su involucraci\u00f3n puede transformar una voz cr\u00edtica en una colaborativa.<\/p>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Medios Comarcales con Impacto<\/h4>\r\n                            <p>Adem\u00e1s de los medios provinciales, diversas cabeceras digitales y radiof\u00f3nicas comarcales tienen un impacto directo en la agenda informativa y en la formaci\u00f3n de opini\u00f3n de la ciudadan\u00eda de Tocina.<\/p>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>El Pespunte \/ La Voz del Sur:<\/strong> Medios digitales con cobertura en la comarca, que pueden amplificar noticias locales y el sentir ciudadano.<\/li>\r\n                                <li><strong>Radios Locales (si aplica):<\/strong> Emisoras de radio con programas de actualidad y entrevistas que alcanzan a un p\u00fablico local.<\/li>\r\n                                <li><strong>Medios Provinciales con Corresponsal\u00eda:<\/strong> Diarios como Diario de Sevilla o ABC de Sevilla, y cadenas como Cadena SER o Canal Sur, que cubren Tocina por su relevancia en la provincia.<\/li>\r\n                            <\/ul>\r\n                            <p class=\"mt-2 text-sm text-slate-600\">Estrategia: Establecer y mantener relaciones s\u00f3lidas con los redactores, directores y periodistas de estos medios. Ofrecerles informaci\u00f3n de primera mano, facilitar entrevistas con el alcalde y concejales, e invitarlos a los eventos municipales para asegurar una cobertura amplia y equilibrada de la gesti\u00f3n. Son aliados clave para la difusi\u00f3n del mensaje institucional.<\/p>\r\n                        <\/div>\r\n                        <div>\r\n                            <h4 class=\"font-bold text-lg text-indigo-800 mb-2\">Canales Informales de Opini\u00f3n que Afectan la Reputaci\u00f3n<\/h4>\r\n                            <p>La opini\u00f3n p\u00fablica se forma no solo en medios formalmente, sino tambi\u00e9n en canales informales y privados con gran penetraci\u00f3n local, que pueden amplificar tanto el sentimiento positivo como el negativo de forma muy r\u00e1pida.<\/p>\r\n                            <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                                <li><strong>Grupos de WhatsApp Vecinales y de Barrio:<\/strong> Numerosos grupos donde la informaci\u00f3n (y a veces bulos) se comparte de forma instant\u00e1nea. Muy influyentes para el \u00abboca a boca\u00bb digital, especialmente en crisis.<\/li>\r\n                                <li><strong>Grupos de Facebook de Tocina:<\/strong> Adem\u00e1s de las p\u00e1ginas oficiales, los grupos (privados o p\u00fablicos) no gestionados por el Ayuntamiento son espacios de debate abierto, queja y cr\u00edtica (ej. \u00abTocina Opina\u00bb, \u00abSoy de Tocina y&#8230;\u00bb).<\/li>\r\n                                <li><strong>Comentarios en TikTok y YouTube:<\/strong> Plataformas donde los ciudadanos expresan su frustraci\u00f3n y sarcasmo, especialmente durante eventos cr\u00edticos como la crisis del agua.<\/li>\r\n                            <\/ul>\r\n                            <p class=\"mt-2 text-sm text-slate-600\">Estrategia: Monitorear activamente estos canales es fundamental para detectar rumores, focos de malestar o narrativas negativas incipientes. La informaci\u00f3n recogida puede servir para adaptar la comunicaci\u00f3n oficial, lanzar mensajes preventivos o aclarar desinformaci\u00f3n en los canales propios del Ayuntamiento, antes de que el problema escale.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section id=\"deportes\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Deportes en Tocina: Un Panorama Completo<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Tocina es un municipio comprometido con el deporte y la actividad f\u00edsica, reflejado en su infraestructura, variada oferta de programas y el dinamismo de sus clubes. Explore las oportunidades deportivas disponibles en la localidad.<\/p>\r\n\r\n                    <div class=\"mb-8 pb-8 border-b border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfdf\ufe0f<\/span>I. Infraestructura Deportiva Municipal<\/h4>\r\n                        <p class=\"text-slate-700 mb-4\">Tocina cuenta con instalaciones deportivas municipales gestionadas por el Ayuntamiento, dise\u00f1adas para cubrir diversas disciplinas y necesidades de la comunidad, promoviendo la actividad f\u00edsica y el bienestar.<\/p>\r\n                        <div class=\"overflow-x-auto mb-4\">\r\n                            <table class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\">\r\n                                <thead>\r\n                                    <tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\">\r\n                                        <th class=\"py-3 px-4 border-b\">Nombre de la Instalaci\u00f3n<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Tipo de Deporte\/Actividad Principal<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Ubicaci\u00f3n General<\/th>\r\n                                    <\/tr>\r\n                                <\/thead>\r\n                                <tbody>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Pabell\u00f3n Cubierto Municipal<\/td><td class=\"py-2 px-4 border-b\">Multideporte, Baloncesto, F\u00fatbol Sala<\/td><td class=\"py-2 px-4 border-b\">Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Campo de F\u00fatbol Municipal<\/td><td class=\"py-2 px-4 border-b\">F\u00fatbol<\/td><td class=\"py-2 px-4 border-b\">Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Piscina Municipal de Verano<\/td><td class=\"py-2 px-4 border-b\">Nataci\u00f3n, Ocio Acu\u00e1tico<\/td><td class=\"py-2 px-4 border-b\">Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Gimnasio Municipal<\/td><td class=\"py-2 px-4 border-b\">Fitness, Actividades Dirigidas<\/td><td class=\"py-2 px-4 border-b\">Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Pistas Polideportivas de Los Rosales<\/td><td class=\"py-2 px-4 border-b\">F\u00fatbol Sala, Baloncesto<\/td><td class=\"py-2 px-4 border-b\">Los Rosales<\/td><\/tr>\r\n                                <\/tbody>\r\n                            <\/table>\r\n                        <\/div>\r\n                        <p class=\"text-slate-700\">La existencia de estas instalaciones demuestra una inversi\u00f3n municipal en el bienestar f\u00edsico y la promoci\u00f3n de un estilo de vida activo en Tocina. La variedad de espacios, desde pabellones hasta piscinas, refleja el compromiso de ofrecer opciones para diversas disciplinas y edades, facilitando la participaci\u00f3n ciudadana y fomentando la cohesi\u00f3n social.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"mb-8 pb-8 border-b border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd38<\/span>II. Programas y Escuelas Deportivas Municipales<\/h4>\r\n                        <p class=\"text-slate-700 mb-4\">El Ayuntamiento de Tocina promueve activamente la participaci\u00f3n deportiva a trav\u00e9s de diversas iniciativas a lo largo del a\u00f1o, con una oferta que se adapta a las distintas estaciones y necesidades de la poblaci\u00f3n.<\/p>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Oferta de Programas Anuales y de Verano<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>\u00abVerano Deportivo\u00bb: Programa estival con actividades acu\u00e1ticas y talleres deportivos en instalaciones municipales.<\/li>\r\n                            <li>\u00abCarreras Populares de Tocina\u00bb: Circuito de varias carreras a lo largo del a\u00f1o que fomentan el running y la participaci\u00f3n familiar.<\/li>\r\n                            <li>\u00abProgramas de Envejecimiento Activo\u00bb: Actividades f\u00edsicas adaptadas para personas mayores.<\/li>\r\n                            <li>\u00abDeporte en tu Barrio\u00bb: Iniciativas para acercar actividades deportivas a diferentes zonas del municipio.<\/li>\r\n                        <\/ul>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Escuelas Deportivas de Iniciaci\u00f3n<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>Disciplinas: F\u00fatbol, Baloncesto, Atletismo, Nataci\u00f3n, Gimnasia R\u00edtmica, Judo, P\u00e1del, Tenis, entre otras, para diferentes edades.<\/li>\r\n                            <li>Costos: Precios p\u00fablicos accesibles, con bonificaciones para familias numerosas o situaciones especiales.<\/li>\r\n                            <li>Inscripciones: Periodos espec\u00edficos de inscripci\u00f3n a finales de verano para el curso anual, y en primavera para actividades de verano.<\/li>\r\n                        <\/ul>\r\n                        <p class=\"text-slate-700\">La detallada organizaci\u00f3n de los programas deportivos municipales revela un enfoque multifac\u00e9tico para la participaci\u00f3n ciudadana. Las iniciativas se dirigen a grupos demogr\u00e1ficos espec\u00edficos, demostrando una comprensi\u00f3n de las necesidades estacionales y la importancia de actividades estructuradas, buscando una comunidad m\u00e1s saludable e integrada.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"mb-8 pb-8 border-b border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83c\udfc6<\/span>III. Eventos Deportivos Destacados<\/h4>\r\n                        <p class=\"text-slate-700 mb-4\">La agenda municipal y las noticias deportivas reflejan una actividad constante en Tocina, con eventos que abarcan diversas disciplinas y niveles, lo que subraya el dinamismo de la vida deportiva en la localidad.<\/p>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Eventos Recientes y Pr\u00f3ximos<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>\u00abCross Campo a Trav\u00e9s de Tocina\u00bb: Cita anual para los amantes del atletismo.<\/li>\r\n                            <li>\u00abTorneos de Navidad de Deportes Colectivos\u00bb: Competiciones de f\u00fatbol sala y baloncesto en \u00e9poca navide\u00f1a.<\/li>\r\n                            <li>\u00abD\u00eda de la Bicicleta\u00bb: Evento popular que fomenta el uso de la bicicleta y la movilidad sostenible.<\/li>\r\n                            <li>\u00abTrofeo Alcalde de F\u00fatbol Sala\u00bb: Torneo tradicional con equipos locales.<\/li>\r\n                        <\/ul>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Logros de Atletas y Equipos Locales<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>Club de Waterpolo Tocina: Equipo con participaci\u00f3n en ligas provinciales.<\/li>\r\n                            <li>Club Baloncesto Tocina: Con equipos en diversas categor\u00edas y trabajo de cantera.<\/li>\r\n                            <li>Atletas locales con proyecci\u00f3n en atletismo o nataci\u00f3n.<\/li>\r\n                        <\/ul>\r\n                        <div class=\"overflow-x-auto mb-4\">\r\n                            <table class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\">\r\n                                <thead>\r\n                                    <tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\">\r\n                                        <th class=\"py-3 px-4 border-b\">Nombre del Evento<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Fecha\/Periodo<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Descripci\u00f3n Breve<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Organizador Principal<\/th>\r\n                                    <\/tr>\r\n                                <\/thead>\r\n                                <tbody>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Cross Campo a Trav\u00e9s de Tocina<\/td><td class=\"py-2 px-4 border-b\">Noviembre (anual)<\/td><td class=\"py-2 px-4 border-b\">Carrera popular en entorno natural.<\/td><td class=\"py-2 px-4 border-b\">Ayuntamiento de Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">D\u00eda de la Bicicleta<\/td><td class=\"py-2 px-4 border-b\">Mayo (anual)<\/td><td class=\"py-2 px-4 border-b\">Paseo ciclista no competitivo para todas las edades.<\/td><td class=\"py-2 px-4 border-b\">Ayuntamiento de Tocina<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Trofeo Alcalde de F\u00fatbol Sala<\/td><td class=\"py-2 px-4 border-b\">Julio (anual)<\/td><td class=\"py-2 px-4 border-b\">Torneo amistoso de verano.<\/td><td class=\"py-2 px-4 border-b\">Clubes locales con apoyo municipal<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Juegos Deportivos Municipales<\/td><td class=\"py-2 px-4 border-b\">Todo el curso escolar<\/td><td class=\"py-2 px-4 border-b\">Competiciones escolares en diversas disciplinas.<\/td><td class=\"py-2 px-4 border-b\">Ayuntamiento de Tocina<\/td><\/tr>\r\n                                <\/tbody>\r\n                            <\/table>\r\n                        <\/div>\r\n                        <p class=\"text-slate-700\">La constante difusi\u00f3n de los logros de los atletas locales y la organizaci\u00f3n de eventos deportivos variados demuestran una estrategia municipal para fomentar una cultura de \u00e9xito y participaci\u00f3n comunitaria. Al celebrar estas victorias, el Ayuntamiento inspira a las nuevas generaciones y fortalece un sentido de orgullo colectivo.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"mb-8 pb-8 border-b border-gray-200\">\r\n                        <h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83e\udd1d<\/span>IV. Clubes y Asociaciones Deportivas Locales<\/h4>\r\n                        <p class=\"text-slate-700 mb-4\">Tocina cuenta con un tejido asociativo activo, con clubes y asociaciones deportivas que cubren una amplia gama de intereses y disciplinas, complementando la oferta municipal.<\/p>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Clubes Deportivos Espec\u00edficos<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>Club Waterpolo Tocina: Con participaci\u00f3n en ligas provinciales.<\/li>\r\n                            <li>Club Baloncesto Tocina: Con equipos en todas las categor\u00edas y un fuerte compromiso con la formaci\u00f3n.<\/li>\r\n                            <li>Club Atletismo Tocina: Promotor de las carreras populares y la actividad atl\u00e9tica.<\/li>\r\n                            <li>Club Nataci\u00f3n Tocina: Formaci\u00f3n y competici\u00f3n en nataci\u00f3n.<\/li>\r\n                            <li>Club Gimnasia R\u00edtmica Tocina: Con actuaciones en campeonatos provinciales.<\/li>\r\n                        <\/ul>\r\n                        <div class=\"overflow-x-auto mb-4\">\r\n                            <table class=\"min-w-full bg-white border border-gray-200 rounded-lg shadow-sm\">\r\n                                <thead>\r\n                                    <tr class=\"bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase\">\r\n                                        <th class=\"py-3 px-4 border-b\">Nombre del Club\/Asociaci\u00f3n<\/th>\r\n                                        <th class=\"py-3 px-4 border-b\">Deporte\/Enfoque Principal<\/th>\r\n                                    <\/tr>\r\n                                <\/thead>\r\n                                <tbody>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Club Waterpolo Tocina<\/td><td class=\"py-2 px-4 border-b\">Waterpolo<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Club Baloncesto Tocina<\/td><td class=\"py-2 px-4 border-b\">Baloncesto<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Club Atletismo Tocina<\/td><td class=\"py-2 px-4 border-b\">Atletismo, Running<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Club Nataci\u00f3n Tocina<\/td><td class=\"py-2 px-4 border-b\">Nataci\u00f3n<\/td><\/tr>\r\n                                    <tr class=\"hover:bg-gray-50 text-sm text-slate-700\"><td class=\"py-2 px-4 border-b\">Club Gimnasia R\u00edtmica Tocina<\/td><td class=\"py-2 px-4 border-b\">Gimnasia R\u00edtmica<\/td><\/tr>\r\n                                <\/tbody>\r\n                            <\/table>\r\n                        <\/div>\r\n                        <p class=\"text-slate-700\">La variedad de clubes y asociaciones deportivas, y el papel activo de organizaciones como el Club Waterpolo Tocina, evidencian una s\u00f3lida cultura deportiva de base. Esta autoorganizaci\u00f3n complementa los esfuerzos municipales, creando un ecosistema deportivo m\u00e1s resiliente y completo.<\/p>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <h4 class=\"text-xl font-bold text-indigo-800 mb-4 flex items-center\"><span class=\"text-2xl mr-2\">\ud83d\udcde<\/span>V. Informaci\u00f3n de Contacto y Recursos Adicionales<\/h4>\r\n                        <p class=\"text-slate-700 mb-4\">Para aquellos interesados en participar o conocer m\u00e1s sobre las actividades deportivas en Tocina, existen varios canales de contacto y recursos en l\u00ednea.<\/p>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Contacto con la Delegaci\u00f3n de Deportes<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>Tel\u00e9fono principal del Ayuntamiento: +34 955 74 70 00 (central).<\/li>\r\n                            <li>Correo electr\u00f3nico Delegaci\u00f3n de Deportes: deportes@tocinalosrosales.es.<\/li>\r\n                            <li>Oficinas: Pabell\u00f3n Cubierto Municipal o Centro C\u00edvico.<\/li>\r\n                        <\/ul>\r\n                        <h5 class=\"font-semibold text-lg text-slate-800 mb-2\">Recursos en L\u00ednea<\/h5>\r\n                        <ul class=\"list-disc list-inside text-slate-700 ml-4 space-y-1 mb-4\">\r\n                            <li>Sitio web oficial del Ayuntamiento de Tocina: <a href=\"https:\/\/www.tocinalosrosales.es\" target=\"_blank\" class=\"text-blue-600 hover:underline\">www.tocinalosrosales.es<\/a> (consultar secciones \u00abDeportes\u00bb, \u00abNoticias\u00bb, \u00abAgenda\u00bb, \u00abTr\u00e1mites Online\u00bb).<\/li>\r\n                            <li>Redes Sociales Oficiales del Ayuntamiento y de la Delegaci\u00f3n de Deportes.<\/li>\r\n                        <\/ul>\r\n                        <p class=\"text-slate-700\">La disponibilidad de los datos de contacto generales del Ayuntamiento y la insistencia en el uso de su sitio web oficial y sus secciones espec\u00edficas demuestran una fuerte dependencia de las plataformas digitales para la difusi\u00f3n de informaci\u00f3n p\u00fablica. Este enfoque multicanal mejora la participaci\u00f3n ciudadana y la confianza.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"about\" class=\"content-section\">\r\n                <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n                    <h3 class=\"text-2xl font-bold text-center mb-2 text-indigo-800\">Sobre Este An\u00e1lisis de Inteligencia Medi\u00e1tica y Reputacional<\/h3>\r\n                    <p class=\"text-center text-slate-600 mb-6 max-w-3xl mx-auto\">Este informe profundiza en la imagen p\u00fablica y en las redes sociales del gobierno municipal de Tocina, su alcalde y sus concejales.<\/p>\r\n\r\n                    <div class=\"space-y-4 text-slate-700\">\r\n                        <p><strong class=\"font-semibold text-slate-800\">Sujeto Principal:<\/strong> Ayuntamiento de Tocina (alcalde + todas las \u00e1reas municipales).<\/p>\r\n                        <p><strong class=\"font-semibold text-slate-800\">Periodo de An\u00e1lisis:<\/strong> \u00daltimo trimestre de 2024 y primer semestre de 2025 (tendencias).<\/p>\r\n                        <p><strong class=\"font-semibold text-slate-800\">\u00c1mbito Geogr\u00e1fico:<\/strong> Tocina y Los Rosales + medios y redes de Sevilla capital y \u00e1rea metropolitana.<\/p>\r\n                        <p><strong class=\"font-semibold text-slate-800\">Medios Prioritarios:<\/strong> Todos los medios locales y provinciales relevantes: prensa, radio, TV y digitales de Tocina y Sevilla.<\/p>\r\n                        <p><strong class=\"font-semibold text-slate-800\">Objetivos Estrat\u00e9gicos:<\/strong><\/p>\r\n                        <ul class=\"list-disc list-inside ml-4 space-y-1\">\r\n                            <li>Evaluar imagen institucional.<\/li>\r\n                            <li>Detectar cr\u00edticas o malestar ciudadano.<\/li>\r\n                            <li>Medir impacto de pol\u00edticas o campa\u00f1as.<\/li>\r\n                            <li>Identificar oportunidades narrativas.<\/li>\r\n                            <li>Detectar focos de polarizaci\u00f3n social.<\/li>\r\n                        <\/ul>\r\n                        <p class=\"mt-4\"><strong class=\"font-semibold text-slate-800\">Beneficios Estrat\u00e9gicos para un Ayuntamiento:<\/strong> Gesti\u00f3n proactiva de la reputaci\u00f3n p\u00fablica, identificaci\u00f3n de grietas narrativas, visi\u00f3n clara de la percepci\u00f3n ciudadana, mapeo de redes de apoyo\/oposici\u00f3n, validaci\u00f3n o correcci\u00f3n de mensajes institucionales.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n        <\/main>\r\n    <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n    const data = {\r\n        logros: [\r\n            { \r\n                title: \"\u2705 Gesti\u00f3n Proactiva del Q1\", \r\n                content: \"El primer trimestre de 2025 se caracteriz\u00f3 por una gesti\u00f3n municipal activa en eventos culturales ('Siente la Poes\u00eda'), festejos (Carnaval, Cabalgata) e inicio de obras p\u00fablicas (reforma del gimnasio, edificio TAS).\",\r\n                sentiment: 70,\r\n                details: {\r\n                    type: 'chart',\r\n                    chartType: 'doughnut',\r\n                    data: {\r\n                        labels: ['Cultura y Festejos', 'Obras y Servicios', 'Bienestar Social'],\r\n                        datasets: [{\r\n                            data: [45, 35, 20], \/\/ Simulated distribution of positive mentions\r\n                            backgroundColor: ['#34D399', '#60A5FA', '#FBBF24'],\r\n                        }]\r\n                    },\r\n                    options: {\r\n                        responsive: true,\r\n                        maintainAspectRatio: false,\r\n                        plugins: {\r\n                            legend: { position: 'top' },\r\n                            title: { display: true, text: 'Temas de Logros (Q1)' }\r\n                        }\r\n                    }\r\n                }\r\n            },\r\n            { \r\n                title: \"\u2705 Inversi\u00f3n en Educaci\u00f3n y Deporte\", \r\n                content: \"Inicio de obras como la reforma del Gimnasio Municipal y proyectos como los Campamentos Digitales, mostrando compromiso con el bienestar juvenil.\",\r\n                sentiment: 65\r\n            },\r\n            { \r\n                title: \"\u2705 Fomento de la Participaci\u00f3n Ciudadana\", \r\n                content: \"Iniciativas como la elaboraci\u00f3n de la Agenda Urbana y el uso activo de la App m\u00f3vil para la gesti\u00f3n de incidencias, acercando el Ayuntamiento al vecino.\",\r\n                sentiment: 60\r\n            },\r\n            { \r\n                title: \"\u2705 Promoci\u00f3n Cultural y Festejos\", \r\n                content: \"\u00c9xito de eventos como la Cabalgata de Reyes Magos, el Pasacalles de Carnaval y el programa 'Siente la Poes\u00eda', generando un sentimiento positivo en la comunidad.\",\r\n                sentiment: 75\r\n            }\r\n        ],\r\n        riesgos: [\r\n            { \r\n                title: \"\u26a0\ufe0f Crisis de la Tuber\u00eda de Agua (Junio)\", \r\n                content: \"La rotura de la tuber\u00eda principal de Aguas del Huesna en junio gener\u00f3 inundaciones y cortes de suministro, provocando una avalancha de comentarios negativos y frustraci\u00f3n ciudadana.\",\r\n                sentiment: -85,\r\n                details: {\r\n                    type: 'chart',\r\n                    chartType: 'bar',\r\n                    data: {\r\n                        labels: ['Frustraci\u00f3n', 'Enojo', 'Preocupaci\u00f3n', 'Sarcasmo'],\r\n                        datasets: [{\r\n                            label: 'Emociones Dominantes',\r\n                            data: [90, 85, 70, 50], \/\/ Simulated data points for emotions\r\n                            backgroundColor: ['#EF5350', '#FFCDD2', '#FBBF24', '#9CA3AF'],\r\n                        }]\r\n                    },\r\n                    options: {\r\n                        responsive: true,\r\n                        maintainAspectRatio: false,\r\n                        plugins: {\r\n                            legend: { display: false },\r\n                            title: { display: true, text: 'Sentimiento durante la Crisis del Agua' }\r\n                        },\r\n                        scales: { y: { beginAtZero: true, max: 100 } }\r\n                    }\r\n                }\r\n            },\r\n            { \r\n                title: \"\u26a0\ufe0f Percepci\u00f3n de Falta de Mantenimiento\", \r\n                content: \"La recurrencia de aver\u00edas en la red de agua y la antig\u00fcedad de las tuber\u00edas generaron una narrativa de falta de inversi\u00f3n y mantenimiento a largo plazo.\",\r\n                sentiment: -70\r\n            },\r\n            { \r\n                title: \"\u26a0\ufe0f Politizaci\u00f3n de Problemas Locales\", \r\n                content: \"La oposici\u00f3n capitaliz\u00f3 la crisis del agua para criticar la gesti\u00f3n y la falta de inversi\u00f3n, a\u00f1adiendo una capa de cr\u00edtica pol\u00edtica a la emergencia.\",\r\n                sentiment: -60\r\n            },\r\n            { \r\n                title: \"\u26a0\ufe0f Brecha Say-Do (Discurso vs. Percepci\u00f3n)\", \r\n                content: \"Desconexi\u00f3n entre el discurso institucional de gesti\u00f3n de emergencia y la percepci\u00f3n ciudadana de un problema recurrente y evitable, con exigencia de responsabilidades.\",\r\n                sentiment: -55\r\n            }\r\n        ],\r\n        sentimentTrend: {\r\n            labels: ['Oct 24', 'Nov 24', 'Dic 24', 'Ene 25', 'Feb 25', 'Mar 25', 'Abr 25', 'May 25', 'Jun 25'],\r\n            logros: [60, 62, 65, 70, 72, 75, 68, 65, 30], \/\/ Adjusted for Tocina's Q1 positive, Q2 negative\r\n            riesgos: [-20, -25, -28, -30, -32, -35, -40, -45, -80] \/\/ Adjusted for Tocina's Q1 low negative, Q2 high negative\r\n        },\r\n        timelineEvents: [\r\n            { date: 'Dic 2024', title: 'Gran Cabalgata de Reyes de Tocina', description: 'Celebraci\u00f3n de la tradicional Cabalgata de Reyes Magos con alta participaci\u00f3n ciudadana.', type: 'Logro' },\r\n            { date: 'Ene 2025', title: 'Inicio Obras Edificio TAS y Gimnasio', description: 'Comienzo de las \u00faltimas fases del nuevo edificio para el T.A.S. y la reforma del Gimnasio Municipal.', type: 'Logro' },\r\n            { date: 'Feb 2025', title: 'Pasacalles de Carnaval', description: 'Celebraci\u00f3n del Pasacalles de Carnaval, fomentando la participaci\u00f3n y el ocio local.', type: 'Cultura' },\r\n            { date: 'Mar 2025', title: 'Programa \"Siente la Poes\u00eda\"', description: 'Actividades culturales dedicadas a Antonio Machado, promoviendo la lectura y la integraci\u00f3n social.', type: 'Cultura' },\r\n            { date: 'Abr 2025', title: 'Instalaci\u00f3n Nuevos Juegos Infantiles', description: 'Se instalan nuevos juegos infantiles en el Parque \"Paco de Luc\u00eda\", mejorando los espacios de ocio para ni\u00f1os.', type: 'Servicios' },\r\n            { date: 'May 2025', title: 'Romer\u00eda del Roc\u00edo y Cruz de Mayo', description: 'Celebraci\u00f3n de eventos tradicionales con alta participaci\u00f3n y arraigo local.', type: 'Cultura' },\r\n            { date: 'Jun 2025', title: 'Crisis: Rotura Tuber\u00eda de Agua', description: 'Rotura de la tuber\u00eda principal de Aguas del Huesna, provocando inundaciones y cortes de suministro en Tocina y otros 10 municipios.', type: 'Crisis' },\r\n            { date: 'Jun 2025', title: 'Lanzamiento Campamentos Digitales', description: 'Inicio de los Campamentos Digitales de Juventud, ofreciendo formaci\u00f3n y ocio a los j\u00f3venes.', type: 'Logro' },\r\n            { date: 'Jun 2025', title: 'Restablecimiento Suministro Agua', description: 'Tras varios d\u00edas, se restablece el suministro de agua en Tocina y se confirma su aptitud para el consumo.', type: 'Servicios' }\r\n        ],\r\n        mediaSentimentDetailed: {\r\n            labels: ['Prensa Provincial', 'Radio\/TV Local', 'Digital Local', 'Redes Sociales'],\r\n            positive: [30, 35, 40, 15], \/\/ Adjusted for Tocina, lower positive, especially social media\r\n            neutral: [30, 25, 20, 20],  \/\/ Adjusted for Tocina\r\n            negative: [40, 40, 40, 65]  \/\/ Adjusted for Tocina, higher negative, especially social media\r\n        },\r\n        keywords: {\r\n            logros: [\r\n                { text: 'Cultura', size: 'text-xl', weight: 'font-bold' },\r\n                { text: 'Festejos', size: 'text-lg', weight: 'font-semibold' },\r\n                { text: 'Obras', size: 'text-base', weight: 'font-medium' },\r\n                { text: 'Servicios', size: 'text-xl', weight: 'font-bold' },\r\n                { text: 'Juventud', size: 'text-lg', weight: 'font-semibold' },\r\n                { text: 'Participaci\u00f3n', size: 'text-base', weight: 'font-normal' }\r\n            ],\r\n            riesgos: [\r\n                { text: 'Agua', size: 'text-2xl', weight: 'font-bold' },\r\n                { text: 'Tuber\u00eda', size: 'text-xl', weight: 'font-semibold' },\r\n                { text: 'Cortes', size: 'text-lg', weight: 'font-medium' },\r\n                { text: 'Inundaciones', size: 'text-base', weight: 'font-normal' },\r\n                { text: 'Mantenimiento', size: 'text-xl', weight: 'font-semibold' },\r\n                { text: 'Frustraci\u00f3n', size: 'text-lg', weight: 'font-medium' },\r\n                { text: 'Cr\u00edticas', size: 'text-base', weight: 'font-normal' }\r\n            ]\r\n        },\r\n        delegationSentiment: {\r\n            labels: ['Alcald\u00eda', 'Obras y Servicios', 'Movilidad', 'Cultura', 'Deportes', 'Bienestar Social', 'Seguridad'],\r\n            sentiment: [20, -70, 50, 70, 65, 75, 60] \/\/ Adjusted for Tocina, lower for Alcald\u00eda and Obras due to crisis\r\n        },\r\n        engagementMetrics: {\r\n            labels: ['Likes', 'Comentarios', 'Compartidos'],\r\n            official: [1500, 300, 100], \/\/ Adjusted for Tocina\r\n            unofficial: [2500, 1800, 1200] \/\/ Adjusted for Tocina, higher comments\/shares in unofficial during crisis\r\n        },\r\n        comparativeSentiment: {\r\n            labels: ['Tocina', 'La Algaba', 'Pilas', 'Villanueva del Ariscal'],\r\n            data: [25, 55, 60, 65] \/\/ Adjusted for Tocina, lower due to crisis\r\n        },\r\n        valuesPerception: {\r\n            labels: ['Cercan\u00eda', 'Eficacia', 'Transparencia', 'Desarrollo', 'Innovaci\u00f3n'],\r\n            perceived: [7, 4, 5, 6, 6], \/\/ Adjusted for Tocina, lower efficacy\/transparency post-crisis\r\n            desired: [8, 8, 8, 7, 7]    \/\/ Desired values\r\n        },\r\n        socialMediaComparison: {\r\n            labels: ['Facebook', 'Twitter', 'Instagram'],\r\n            tocina: [1500, 300, 500], \/\/ Adjusted for Tocina\r\n            laalgaba: [1200, 250, 400],\r\n            pilas: [1000, 200, 350],\r\n            villanueva: [900, 150, 300]\r\n        }\r\n    };\r\n\r\n    const infoDisplay = document.getElementById('info-display');\r\n    const navButtons = document.querySelectorAll('.nav-button');\r\n    const contentSections = document.querySelectorAll('.content-section');\r\n    const keywordsDisplay = document.getElementById('keywords-display');\r\n    let reputationChart;\r\n    let sentimentTrendChart;\r\n    let mediaSentimentChart;\r\n    let delegationSentimentChart;\r\n    let engagementMetricsChart;\r\n    let comparativeSentimentChart;\r\n    let valuesRadarChart;\r\n    let socialMediaComparisonChart;\r\n\r\n    const renderInfo = (items) => {\r\n        infoDisplay.innerHTML = '';\r\n        items.forEach(item => {\r\n            const card = document.createElement('div');\r\n            card.className = 'bg-indigo-50 p-4 rounded-xl border border-indigo-200 transition-shadow hover:shadow-md';\r\n            \r\n            let contentHTML = `<h4 class=\"font-bold text-lg mb-2 text-indigo-800\">${item.title}<\/h4><p class=\"text-sm text-slate-700\">${item.content}<\/p>`;\r\n            \r\n            if (item.details && item.details.type === 'chart') {\r\n                const chartId = `details-chart-${Math.random().toString(36).substr(2, 9)}`;\r\n                contentHTML += `<div class=\"mt-4\"><div class=\"chart-container\" style=\"height:250px;\"><canvas id=\"${chartId}\"><\/canvas><\/div><\/div>`;\r\n                \r\n                setTimeout(() => {\r\n                    const ctx = document.getElementById(chartId).getContext('2d');\r\n                    new Chart(ctx, {\r\n                        type: item.details.chartType,\r\n                        data: item.details.data,\r\n                        options: item.details.options\r\n                    });\r\n                }, 100);\r\n            }\r\n\r\n            card.innerHTML = contentHTML;\r\n            infoDisplay.appendChild(card);\r\n        });\r\n    };\r\n    \r\n    const renderReputationChart = (filteredData) => {\r\n        const ctx = document.getElementById('reputationChart').getContext('2d');\r\n        const chartData = {\r\n            labels: filteredData.map(d => {\r\n                const label = d.title.substring(2); \/\/ Remove emoji\r\n                return label.length > 30 ? label.substring(0, 16) + '...' : label; \/\/ Truncate labels for y-axis\r\n            }),\r\n            datasets: [{\r\n                label: 'Sentimiento Medi\u00e1tico Estimado',\r\n                data: filteredData.map(d => d.sentiment),\r\n                backgroundColor: filteredData.map(d => d.sentiment > 0 ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)'),\r\n                borderColor: filteredData.map(d => d.sentiment > 0 ? 'rgba(16, 185, 129, 1)' : 'rgba(239, 68, 68, 1)'),\r\n                borderWidth: 1\r\n            }]\r\n        };\r\n\r\n        if (reputationChart) {\r\n            reputationChart.destroy();\r\n        }\r\n\r\n        reputationChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: chartData,\r\n            options: {\r\n                indexAxis: 'y',\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                plugins: {\r\n                    legend: {\r\n                        display: false\r\n                    },\r\n                    tooltip: {\r\n                        callbacks: {\r\n                            label: function(context) {\r\n                                let label = context.dataset.label || '';\r\n                                if (label) {\r\n                                    label += ': ';\r\n                                }\r\n                                if (context.parsed.x !== null) {\r\n                                    label += context.parsed.x + '%';\r\n                                }\r\n                                return label;\r\n                            }\r\n                        }\r\n                    }\r\n                },\r\n                scales: {\r\n                    x: {\r\n                        beginAtZero: true,\r\n                        min: -100,\r\n                        max: 100,\r\n                        ticks: {\r\n                            callback: function(value) {\r\n                                return value + '%';\r\n                            }\r\n                        }\r\n                    },\r\n                    y: {\r\n                        ticks: {\r\n                            autoSkip: false,\r\n                             callback: function(value, index, values) {\r\n                                const label = this.getLabelForValue(value);\r\n                                return label.length > 16 ? label.substring(0, 16) + '...' : label; \/\/ Truncate to 16 chars for better fit\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderSentimentTrendChart = () => {\r\n        const ctx = document.getElementById('sentimentTrendChart').getContext('2d');\r\n        const chartData = {\r\n            labels: data.sentimentTrend.labels,\r\n            datasets: [\r\n                {\r\n                    label: 'Logros de Gesti\u00f3n',\r\n                    data: data.sentimentTrend.logros,\r\n                    borderColor: 'rgba(16, 185, 129, 1)',\r\n                    backgroundColor: 'rgba(16, 185, 129, 0.2)',\r\n                    tension: 0.4,\r\n                    fill: false\r\n                },\r\n                {\r\n                    label: 'Retos Clave',\r\n                    data: data.sentimentTrend.riesgos,\r\n                    borderColor: 'rgba(239, 68, 68, 1)',\r\n                    backgroundColor: 'rgba(239, 68, 68, 0.2)',\r\n                    tension: 0.4,\r\n                    fill: false\r\n                }\r\n            ]\r\n        };\r\n\r\n        if (sentimentTrendChart) {\r\n            sentimentTrendChart.destroy();\r\n        }\r\n\r\n        sentimentTrendChart = new Chart(ctx, {\r\n            type: 'line',\r\n            data: chartData,\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                plugins: {\r\n                    legend: { position: 'top' },\r\n                    tooltip: {\r\n                        callbacks: {\r\n                            label: function(context) {\r\n                                let label = context.dataset.label || '';\r\n                                if (label) {\r\n                                    label += ': ';\r\n                                }\r\n                                if (context.parsed.y !== null) {\r\n                                    label += context.parsed.y + '%';\r\n                                }\r\n                                return label;\r\n                            }\r\n                        }\r\n                    }\r\n                },\r\n                scales: {\r\n                    y: {\r\n                        beginAtZero: false,\r\n                        min: -100,\r\n                        max: 100,\r\n                        title: {\r\n                            display: true,\r\n                            text: 'Sentimiento (%)'\r\n                        }\r\n                    },\r\n                    x: {\r\n                        title: {\r\n                            display: true,\r\n                            text: 'Mes'\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderMediaSentimentChart = () => {\r\n        const ctx = document.getElementById('mediaSentimentChart').getContext('2d');\r\n        if (mediaSentimentChart) {\r\n            mediaSentimentChart.destroy();\r\n        }\r\n        mediaSentimentChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: data.mediaSentimentDetailed.labels,\r\n                datasets: [\r\n                    {\r\n                        label: 'Positivo',\r\n                        data: data.mediaSentimentDetailed.positive,\r\n                        backgroundColor: '#10B981'\r\n                    },\r\n                    {\r\n                        label: 'Neutral',\r\n                        data: data.mediaSentimentDetailed.neutral,\r\n                        backgroundColor: '#FBBF24'\r\n                    },\r\n                    {\r\n                        label: 'Negativo',\r\n                        data: data.mediaSentimentDetailed.negative,\r\n                        backgroundColor: '#EF4444'\r\n                    }\r\n                ]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    x: { stacked: true },\r\n                    y: { stacked: true, beginAtZero: true, max: 100, title: { display: true, text: 'Porcentaje (%)' } }\r\n                },\r\n                plugins: {\r\n                    title: { display: true, text: 'Sentimiento por Tipo de Medio' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderDelegationSentimentChart = () => {\r\n        const ctx = document.getElementById('delegationSentimentChart').getContext('2d');\r\n        if (delegationSentimentChart) {\r\n            delegationSentimentChart.destroy();\r\n        }\r\n        delegationSentimentChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: data.delegationSentiment.labels,\r\n                datasets: [{\r\n                    label: 'Sentimiento Medio',\r\n                    data: data.delegationSentiment.sentiment,\r\n                    backgroundColor: data.delegationSentiment.sentiment.map(s => s > 60 ? '#60A5FA' : '#F87171') \/\/ Blue for positive, Red for neutral\/negative\r\n                }]\r\n            },\r\n            options: {\r\n                indexAxis: 'y',\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    x: { beginAtZero: true, min: -100, max: 100, title: { display: true, text: 'Sentimiento Promedio (%)' } }\r\n                },\r\n                plugins: {\r\n                    legend: { display: false },\r\n                    title: { display: true, text: 'Sentimiento por \u00c1rea Municipal' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderEngagementMetricsChart = () => {\r\n        const ctx = document.getElementById('engagementMetricsChart').getContext('2d');\r\n        if (engagementMetricsChart) {\r\n            engagementMetricsChart.destroy();\r\n        }\r\n        engagementMetricsChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: data.engagementMetrics.labels,\r\n                datasets: [\r\n                    {\r\n                        label: 'Canales Oficiales',\r\n                        data: data.engagementMetrics.official,\r\n                        backgroundColor: '#1D4ED8' \/\/ Darker blue\r\n                    },\r\n                    {\r\n                        label: 'Canales No Oficiales',\r\n                        data: data.engagementMetrics.unofficial,\r\n                        backgroundColor: '#FBBF24' \/\/ Amber\r\n                    }\r\n                ]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    y: { beginAtZero: true, title: { display: true, text: 'N\u00famero de Interacciones' } }\r\n                },\r\n                plugins: {\r\n                    title: { display: true, text: 'M\u00e9tricas de Engagement Digital' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderComparativeSentimentChart = () => {\r\n        const ctx = document.getElementById('comparativeSentimentChart').getContext('2d');\r\n        if (comparativeSentimentChart) {\r\n            comparativeSentimentChart.destroy();\r\n        }\r\n        comparativeSentimentChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: data.comparativeSentiment.labels,\r\n                datasets: [{\r\n                    label: 'Sentimiento Neto Promedio',\r\n                    data: data.comparativeSentiment.data,\r\n                    backgroundColor: ['#60A5FA', '#34D399', '#FBBF24', '#10B981'] \/\/ Different colors for each bar\r\n                }]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    y: { beginAtZero: true, min: -100, max: 100, title: { display: true, text: 'Sentimiento Neto (%)' } }\r\n                },\r\n                plugins: {\r\n                    legend: { display: false },\r\n                    title: { display: true, text: 'Comparativa de Sentimiento con Municipios Hom\u00f3logos' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderValuesRadarChart = () => {\r\n        const ctx = document.getElementById('valuesRadarChart').getContext('2d');\r\n        if (valuesRadarChart) {\r\n            valuesRadarChart.destroy();\r\n        }\r\n        valuesRadarChart = new Chart(ctx, {\r\n            type: 'radar',\r\n            data: {\r\n                labels: data.valuesPerception.labels,\r\n                datasets: [\r\n                    {\r\n                        label: 'Percepci\u00f3n Actual',\r\n                        data: data.valuesPerception.perceived,\r\n                        backgroundColor: 'rgba(96, 165, 250, 0.4)',\r\n                        borderColor: 'rgba(96, 165, 250, 1)',\r\n                        pointBackgroundColor: 'rgba(96, 165, 250, 1)',\r\n                        pointBorderColor: '#fff',\r\n                        pointHoverBackgroundColor: '#fff',\r\n                        pointHoverBorderColor: 'rgba(96, 165, 250, 1)'\r\n                    },\r\n                    {\r\n                        label: 'Relato Deseado',\r\n                        data: data.valuesPerception.desired,\r\n                        backgroundColor: 'rgba(16, 185, 129, 0.4)',\r\n                        borderColor: 'rgba(16, 185, 129, 1)',\r\n                        pointBackgroundColor: 'rgba(16, 185, 129, 1)',\r\n                        pointBorderColor: '#fff',\r\n                        pointHoverBackgroundColor: '#fff',\r\n                        pointHoverBorderColor: 'rgba(16, 185, 129, 1)'\r\n                    }\r\n                ]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    r: {\r\n                        angleLines: { display: false },\r\n                        suggestedMin: 0,\r\n                        suggestedMax: 10,\r\n                        ticks: { beginAtZero: true, stepSize: 2 }\r\n                    }\r\n                },\r\n                plugins: {\r\n                    title: { display: true, text: 'Valores Proyectados: Percepci\u00f3n Actual vs. Deseada' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n    const renderSocialMediaComparisonChart = () => {\r\n        const ctx = document.getElementById('socialMediaComparisonChart').getContext('2d');\r\n        if (socialMediaComparisonChart) {\r\n            socialMediaComparisonChart.destroy();\r\n        }\r\n        socialMediaComparisonChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: data.socialMediaComparison.labels,\r\n                datasets: [\r\n                    {\r\n                        label: 'Tocina',\r\n                        data: data.socialMediaComparison.tocina,\r\n                        backgroundColor: '#60A5FA'\r\n                    },\r\n                    {\r\n                        label: 'La Algaba',\r\n                        data: data.socialMediaComparison.laalgaba,\r\n                        backgroundColor: '#34D399'\r\n                    },\r\n                    {\r\n                        label: 'Pilas',\r\n                        data: data.socialMediaComparison.pilas,\r\n                        backgroundColor: '#FBBF24'\r\n                    },\r\n                    {\r\n                        label: 'Villanueva del Ariscal',\r\n                        data: data.socialMediaComparison.villanueva,\r\n                        backgroundColor: '#10B981'\r\n                    }\r\n                ]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                scales: {\r\n                    y: { beginAtZero: true, title: { display: true, text: 'Interacciones Promedio' } }\r\n                },\r\n                plugins: {\r\n                    title: { display: true, text: 'Comparativa de Interacciones en Redes Sociales' }\r\n                }\r\n            }\r\n        });\r\n    };\r\n\r\n\r\n    const renderTimeline = (filter = 'all') => {\r\n        const timelineContainer = document.querySelector('.timeline-container');\r\n        timelineContainer.innerHTML = '';\r\n        const filteredEvents = data.timelineEvents.filter(event => filter === 'all' || event.type === filter);\r\n        filteredEvents.forEach((event, index) => {\r\n            const item = document.createElement('div');\r\n            item.className = `timeline-item ${index % 2 === 0 ? 'left' : 'right'}`;\r\n            item.innerHTML = `\r\n                <div class=\"timeline-content shadow-md\">\r\n                    <h4 class=\"font-bold text-slate-800 text-base\">${event.date}: ${event.title}<\/h4>\r\n                    <p class=\"text-sm text-slate-700\">${event.description}<\/p>\r\n                    <span class=\"absolute top-2 right-2 text-xs font-semibold px-2 py-1 rounded-full \r\n                        ${event.type === 'Logro' ? 'bg-emerald-200 text-emerald-800' : ''}\r\n                        ${event.type === 'Crisis' ? 'bg-red-200 text-red-800' : ''}\r\n                        ${event.type === 'Cultura' ? 'bg-purple-200 text-purple-800' : ''}\r\n                        ${event.type === 'Servicios' ? 'bg-blue-200 text-blue-800' : ''}\r\n                    \">${event.type}<\/span>\r\n                <\/div>\r\n            `;\r\n            timelineContainer.appendChild(item);\r\n        });\r\n    };\r\n\r\n    const updateKeywords = (type) => {\r\n        keywordsDisplay.innerHTML = '';\r\n        const selectedKeywords = data.keywords[type];\r\n        selectedKeywords.forEach(keyword => {\r\n            const span = document.createElement('span');\r\n            span.className = `inline-block p-2 m-1 bg-slate-100 rounded-lg shadow-sm ${keyword.size} ${keyword.weight} text-slate-700`;\r\n            span.textContent = keyword.text;\r\n            keywordsDisplay.appendChild(span);\r\n        });\r\n    };\r\n    \r\n    document.getElementById('btn-logros').addEventListener('click', () => {\r\n        renderInfo(data.logros);\r\n        renderReputationChart(data.logros);\r\n        updateKeywords('logros');\r\n    });\r\n\r\n    document.getElementById('btn-riesgos').addEventListener('click', () => {\r\n        renderInfo(data.riesgos);\r\n        renderReputationChart(data.riesgos);\r\n        updateKeywords('riesgos');\r\n    });\r\n    \r\n    navButtons.forEach(button => {\r\n        button.addEventListener('click', () => {\r\n            const targetId = button.dataset.target;\r\n\r\n            navButtons.forEach(btn => btn.classList.remove('active'));\r\n            button.classList.add('active');\r\n\r\n            contentSections.forEach(section => {\r\n                if (section.id === targetId) {\r\n                    section.classList.add('active');\r\n                    if (targetId === 'timeline') {\r\n                        renderTimeline('all'); \/\/ Render all events when timeline is opened\r\n                        document.querySelectorAll('.timeline-filter-button').forEach(btn => btn.classList.remove('active'));\r\n                        document.querySelector('.timeline-filter-button[data-filter=\"all\"]').classList.add('active');\r\n                    }\r\n                    if (targetId === 'digital') {\r\n                        renderMediaSentimentChart();\r\n                        renderEngagementMetricsChart();\r\n                    }\r\n                    if (targetId === 'actores') {\r\n                        renderDelegationSentimentChart();\r\n                    }\r\n                    if (targetId === 'termometro') {\r\n                        renderComparativeSentimentChart();\r\n                    }\r\n                    if (targetId === 'posicionamiento') {\r\n                        renderValuesRadarChart();\r\n                    }\r\n                    if (targetId === 'benchmarking') {\r\n                        renderSocialMediaComparisonChart();\r\n                    }\r\n                } else {\r\n                    section.classList.remove('active');\r\n                }\r\n            });\r\n        });\r\n    });\r\n\r\n    \/\/ Timeline Filter Buttons\r\n    document.querySelectorAll('.timeline-filter-button').forEach(button => {\r\n        button.addEventListener('click', () => {\r\n            const filterType = button.dataset.filter;\r\n            renderTimeline(filterType);\r\n            document.querySelectorAll('.timeline-filter-button').forEach(btn => btn.classList.remove('active'));\r\n            button.classList.add('active');\r\n        });\r\n    });\r\n\r\n\r\n    \/\/ Poll Simulation Logic\r\n    const pollResult = document.getElementById('poll-result');\r\n    let optionAVotes = 0;\r\n    let optionBVotes = 0;\r\n\r\n    const updatePollResult = () => {\r\n        const totalVotes = optionAVotes + optionBVotes;\r\n        if (totalVotes === 0) {\r\n            pollResult.textContent = 'Selecciona una opci\u00f3n para ver la simulaci\u00f3n.';\r\n            return;\r\n        }\r\n        const percentA = ((optionAVotes \/ totalVotes) * 100).toFixed(1);\r\n        const percentB = ((optionBVotes \/ totalVotes) * 100).toFixed(1);\r\n        pollResult.innerHTML = `\r\n            Transparencia: <span class=\"text-blue-700\">${percentA}%<\/span> \r\n            | Presencia Personal: <span class=\"text-purple-700\">${percentB}%<\/span>\r\n        `;\r\n    };\r\n\r\n    document.getElementById('poll-option-A').addEventListener('click', () => {\r\n        optionAVotes += Math.floor(Math.random() * 5) + 1; \/\/ Simulate more than 1 vote\r\n        updatePollResult();\r\n    });\r\n\r\n    document.getElementById('poll-option-B').addEventListener('click', () => {\r\n        optionBVotes += Math.floor(Math.random() * 5) + 1; \/\/ Simulate more than 1 vote\r\n        updatePollResult();\r\n    });\r\n\r\n\r\n    \/\/ Initial Load\r\n    document.getElementById('btn-logros').click();\r\n    renderSentimentTrendChart();\r\n    updatePollResult(); \/\/ Initialize poll text\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An\u00e1lisis Interactivo: Reputaci\u00f3n del Ayuntamiento de Tocina An\u00e1lisis de Reputaci\u00f3n y Presencia Digital Ayuntamiento de Tocina Balanza Reputacional Mapa de Actores Foco en el Alcalde An\u00e1lisis Digital L\u00ednea de Tiempo Matriz R&#038;O Term\u00f3metro Ciudadano Diagn\u00f3stico Posicionamiento Benchmarking Panel de KPIs Estrategia y Narrativa Protocolo Crisis Foco en Vocer\u00edas Deportes en Tocina Sobre Este An\u00e1lisis Balanza&#8230;<\/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-278","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-4u","_links":{"self":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/278","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=278"}],"version-history":[{"count":3,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/278\/revisions"}],"predecessor-version":[{"id":349,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/posts\/278\/revisions\/349"}],"wp:attachment":[{"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/media?parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/categories?post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buscomunicacion.com\/index.php\/wp-json\/wp\/v2\/tags?post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}