{"id":3459,"date":"2026-10-22T21:08:11","date_gmt":"2026-10-23T03:08:11","guid":{"rendered":"https:\/\/cedic.cem.org.mx\/?page_id=3459"},"modified":"2026-10-22T21:08:11","modified_gmt":"2026-10-23T03:08:11","slug":"elementor-3459","status":"publish","type":"page","link":"https:\/\/cedic.cem.org.mx\/?page_id=3459","title":{"rendered":"Elementor #3459"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3459\" class=\"elementor elementor-3459\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2beda2 e-flex e-con-boxed e-con e-parent\" data-id=\"c2beda2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7add39 elementor-widget elementor-widget-html\" data-id=\"d7add39\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\" class=\"h-full bg-slate-50\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica<\/title>\n\n    <!-- Tailwind CSS CDN -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            50: '#f0fdf4',\n                            100: '#dcfce7',\n                            800: '#065f46',\n                            900: '#024d2c',\n                            950: '#01331d',\n                        },\n                        accent: {\n                            500: '#d97706',\n                            600: '#b45309',\n                        }\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <!-- Chart.js CDN -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n    <style>\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 600px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 260px;\n            max-height: 320px;\n        }\n        @media (min-width: 768px) {\n            .chart-container {\n                height: 300px;\n            }\n        }\n        .custom-scrollbar::-webkit-scrollbar {\n            width: 6px;\n            height: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-track {\n            background: #f1f5f9;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n            background: #cbd5e1;\n            border-radius: 4px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n            background: #94a3b8;\n        }\n    <\/style>\n<\/head>\n<body class=\"h-full text-slate-800 antialiased flex flex-col font-sans\">\n\n    <!-- Chosen Palette: Deep Dark Green (#024d2c) Header with Crisp White Typography, Light Slate Backgrounds and Warm Amber Accents -->\n    <!-- Application Structure Plan:\n         Designed as a comprehensive dialogue directory and interactive document repository focused on the Catholic Church's official ecumenical and interreligious dialogues.\n         1. Header & Global Metrics: Title \"Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica\", search bar, dynamic status counters, and action buttons in a dark green box (#024d2c) with white text.\n         2. Main Explorer Layout:\n            - Left Sidebar: Categorized taxonomy (Bilateral, Multilateral, Interreligious, National\/Regional), Status Filters, and Distribution Pie Chart.\n            - Right Panel:\n              a. Catalog Grid View: Searchable cards for each dialogue commission with metadata, official document counters, and local user attachments count.\n              b. Detail & Document Attachment Workspace:\n                 - Header with participating confessions\/traditions & chairs.\n                 - Tab 1: History, Commissions, and Key Milestones.\n                 - Tab 2: Historical Official Statements & Agreed Documents.\n                 - Tab 3: Local Repository & File Attachment System (Allows users to attach PDFs, DOCs, images or research notes per dialogue, preview them, and manage attachments stored in browser memory\/localStorage).\n    -->\n    <!-- Visualization & Content Choices:\n         - Category Distribution -> Pie Chart (Chart.js Canvas) -> Visualizes dialogue proportion across confessions and interreligious forums.\n         - File Uploading \/ Attachments -> HTML5 File API + Base64 storage in JS memory\/localStorage -> Enables document attachment per dialogue section without external backends.\n         - Search & Filter Logic -> Real-time multi-field JS filtration across titles, participating churches, themes, and attached document names.\n         - CONFIRMATION: NO SVG graphics used. NO Mermaid JS used.\n    -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n\n    <!-- Dark Green Header Section -->\n    <header class=\"bg-[#024d2c] text-white border-b border-emerald-950 sticky top-0 z-50 shadow-md\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4\">\n            <div class=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n                \n                <!-- Title & Branding -->\n                <div class=\"flex items-center space-x-3 bg-emerald-950\/80 p-3 rounded-xl border border-emerald-700\/60 shadow-inner\">\n                    <div>\n                        <h1 class=\"text-lg sm:text-xl font-extrabold tracking-tight text-white\">Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica<\/h1>\n                        <p class=\"text-xs text-emerald-100\/90 font-medium mt-0.5\">Directorio Internacional de Comisiones, Declaraciones Conjuntas y Repositorio de Documentos<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Global Actions & Search Bar -->\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                    <div class=\"relative flex-1 sm:w-64\">\n                        <input type=\"text\" id=\"globalSearchInput\" onkeyup=\"filterDialogues()\" placeholder=\"\ud83d\udd0d Buscar por iglesia, tema o documento...\" class=\"w-full text-xs bg-emerald-950\/90 border border-emerald-600\/80 rounded-lg px-3 py-2 text-white placeholder-emerald-200\/60 focus:outline-none focus:ring-2 focus:ring-amber-400\">\n                    <\/div>\n                    <button onclick=\"openNewDialogueModal()\" class=\"bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold px-3.5 py-2 rounded-lg transition shadow flex items-center gap-1.5\">\n                        <span>\u2795<\/span> Nuevo Di\u00e1logo\n                    <\/button>\n                    <button onclick=\"exportDataJSON()\" class=\"bg-emerald-800 hover:bg-emerald-700 text-white text-xs font-semibold px-3 py-2 rounded-lg transition border border-emerald-600 flex items-center gap-1.5\" title=\"Exportar respaldo de datos y archivos\">\n                        <span>\ud83d\udcbe<\/span> Exportar\n                    <\/button>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Top KPI Bar -->\n    <section class=\"bg-white border-b border-slate-200 shadow-sm\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3\">\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 text-xs\">\n                <div class=\"flex items-center space-x-3 bg-emerald-50\/60 p-2.5 rounded-lg border border-emerald-100\">\n                    <span class=\"text-2xl\">\ud83d\udcdc<\/span>\n                    <div>\n                        <span class=\"text-slate-500 block font-medium\">Di\u00e1logos Registrados<\/span>\n                        <strong id=\"kpiTotalDialogues\" class=\"text-base text-emerald-900 font-extrabold\">0<\/strong>\n                    <\/div>\n                <\/div>\n                <div class=\"flex items-center space-x-3 bg-slate-50 p-2.5 rounded-lg border border-slate-200\">\n                    <span class=\"text-2xl\">\ud83d\udcd1<\/span>\n                    <div>\n                        <span class=\"text-slate-500 block font-medium\">Documentos Oficiales<\/span>\n                        <strong id=\"kpiOfficialDocs\" class=\"text-base text-indigo-900 font-extrabold\">0<\/strong>\n                    <\/div>\n                <\/div>\n                <div class=\"flex items-center space-x-3 bg-slate-50 p-2.5 rounded-lg border border-slate-200\">\n                    <span class=\"text-2xl\">\ud83d\udcce<\/span>\n                    <div>\n                        <span class=\"text-slate-500 block font-medium\">Adjuntos del Usuario<\/span>\n                        <strong id=\"kpiAttachedFiles\" class=\"text-base text-amber-700 font-extrabold\">0<\/strong>\n                    <\/div>\n                <\/div>\n                <div class=\"flex items-center space-x-3 bg-slate-50 p-2.5 rounded-lg border border-slate-200\">\n                    <span class=\"text-2xl\">\ud83d\udd4a\ufe0f<\/span>\n                    <div>\n                        <span class=\"text-slate-500 block font-medium\">Comisiones Activas<\/span>\n                        <strong id=\"kpiActiveCommissions\" class=\"text-base text-emerald-800 font-extrabold\">0<\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Main Workspace Area -->\n    <main class=\"flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6\">\n        <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n\n            <!-- LEFT SIDEBAR: Taxonomy & Quick Filters -->\n            <aside class=\"lg:col-span-4 xl:col-span-3 space-y-6\">\n\n                <!-- Navigation Categories -->\n                <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-3\">\n                    <h2 class=\"text-xs font-bold uppercase tracking-wider text-slate-500 flex items-center justify-between\">\n                        <span>Categor\u00edas de Di\u00e1logo<\/span>\n                        <span class=\"text-slate-400 font-normal\">\ud83d\udcc1<\/span>\n                    <\/h2>\n                    <nav class=\"space-y-1 text-xs font-medium\" id=\"categoryNav\">\n                        <button onclick=\"setCategoryFilter('ALL')\" id=\"cat-ALL\" class=\"w-full flex items-center justify-between px-3 py-2 rounded-lg bg-[#024d2c] text-white font-bold transition\">\n                            <span>\ud83c\udf0e Todos los Di\u00e1logos<\/span>\n                            <span id=\"badge-ALL\" class=\"bg-emerald-950 text-white text-[10px] px-2 py-0.5 rounded-full\">0<\/span>\n                        <\/button>\n                        <button onclick=\"setCategoryFilter('Bilateral')\" id=\"cat-Bilateral\" class=\"w-full flex items-center justify-between px-3 py-2 rounded-lg text-slate-700 hover:bg-slate-100 transition\">\n                            <span>\u271d\ufe0f Bilaterales Cristianos<\/span>\n                            <span id=\"badge-Bilateral\" class=\"bg-slate-200 text-slate-700 text-[10px] px-2 py-0.5 rounded-full\">0<\/span>\n                        <\/button>\n                        <button onclick=\"setCategoryFilter('Multilateral')\" id=\"cat-Multilateral\" class=\"w-full flex items-center justify-between px-3 py-2 rounded-lg text-slate-700 hover:bg-slate-100 transition\">\n                            <span>\ud83c\udf10 Multilaterales (COE)<\/span>\n                            <span id=\"badge-Multilateral\" class=\"bg-slate-200 text-slate-700 text-[10px] px-2 py-0.5 rounded-full\">0<\/span>\n                        <\/button>\n                        <button onclick=\"setCategoryFilter('Interreligioso')\" id=\"cat-Interreligioso\" class=\"w-full flex items-center justify-between px-3 py-2 rounded-lg text-slate-700 hover:bg-slate-100 transition\">\n                            <span>\u2721\ufe0f\u262a\ufe0f\u2638\ufe0f Interreligiosos<\/span>\n                            <span id=\"badge-Interreligioso\" class=\"bg-slate-200 text-slate-700 text-[10px] px-2 py-0.5 rounded-full\">0<\/span>\n                        <\/button>\n                        <button onclick=\"setCategoryFilter('Nacional')\" id=\"cat-Nacional\" class=\"w-full flex items-center justify-between px-3 py-2 rounded-lg text-slate-700 hover:bg-slate-100 transition\">\n                            <span>\ud83c\uddf2\ud83c\uddfd Nacionales \/ M\u00e9xico<\/span>\n                            <span id=\"badge-Nacional\" class=\"bg-slate-200 text-slate-700 text-[10px] px-2 py-0.5 rounded-full\">0<\/span>\n                        <\/button>\n                    <\/nav>\n                <\/div>\n\n                <!-- Status Filter -->\n                <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-3\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-wider text-slate-500\">Estado de la Comisi\u00f3n<\/h3>\n                    <select id=\"statusFilter\" onchange=\"filterDialogues()\" class=\"w-full text-xs border border-slate-300 rounded-lg px-2.5 py-2 bg-slate-50 text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#024d2c]\">\n                        <option value=\"ALL\">Todos los estados<\/option>\n                        <option value=\"Activo\">\ud83d\udfe2 En Sesi\u00f3n \/ Activos<\/option>\n                        <option value=\"Concluido\">\ud83d\udd35 Fase Completa \/ Concluidos<\/option>\n                        <option value=\"En Receso\">\ud83d\udfe1 En Receso \/ Fase de Evaluaci\u00f3n<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Category Chart Box -->\n                <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-2\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-wider text-slate-500 text-center\">Distribuci\u00f3n por Tipo<\/h3>\n                    <div class=\"chart-container\">\n                        <canvas id=\"categoryChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n\n            <\/aside>\n\n            <!-- RIGHT PANEL: CATALOG OR DETAIL VIEW -->\n            <section class=\"lg:col-span-8 xl:col-span-9 space-y-6\">\n\n                <!-- VIEW A: CATALOG GRID -->\n                <div id=\"catalogView\" class=\"space-y-4\">\n                    <div class=\"flex items-center justify-between bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm\">\n                        <h2 class=\"text-sm font-bold text-slate-800 flex items-center gap-2\">\n                            <span>\ud83d\udcda<\/span>\n                            <span id=\"catalogTitle\">\u00cdndice General de Di\u00e1logos<\/span>\n                        <\/h2>\n                        <span class=\"text-xs text-slate-500\" id=\"resultCountText\">Mostrando 0 di\u00e1logos<\/span>\n                    <\/div>\n\n                    <!-- Cards Container -->\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\" id=\"dialogueGrid\">\n                        <!-- JS renders dialogue cards dynamically -->\n                    <\/div>\n                <\/div>\n\n                <!-- VIEW B: DETAILED DIALOGUE WORKSPACE & ATTACHMENT SYSTEM -->\n                <div id=\"detailView\" class=\"hidden space-y-6\">\n\n                    <!-- Back Button & Action Toolbar -->\n                    <div class=\"flex items-center justify-between\">\n                        <button onclick=\"closeDetailView()\" class=\"bg-slate-200 hover:bg-slate-300 text-slate-800 text-xs font-bold px-3 py-2 rounded-lg transition flex items-center gap-1\">\n                            <span>\u2b05\ufe0f<\/span> Volver al \u00cdndice General\n                        <\/button>\n                        <span class=\"text-xs text-slate-500\">Apertura e Inspecci\u00f3n de Di\u00e1logo<\/span>\n                    <\/div>\n\n                    <!-- Main Dialogue Card Header -->\n                    <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n                        <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4\">\n                            <div>\n                                <div class=\"flex items-center gap-2 mb-1\">\n                                    <span id=\"detailCategoryBadge\" class=\"bg-slate-100 text-slate-700 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase\">Categor\u00eda<\/span>\n                                    <span id=\"detailStatusBadge\" class=\"bg-emerald-100 text-emerald-800 text-[10px] font-bold px-2 py-0.5 rounded-full\">Estado<\/span>\n                                <\/div>\n                                <h2 id=\"detailTitle\" class=\"text-xl font-black text-slate-900\">T\u00edtulo del Di\u00e1logo<\/h2>\n                                <p id=\"detailTraditions\" class=\"text-xs font-semibold text-amber-700 mt-0.5\">Tradiciones Participantes<\/p>\n                            <\/div>\n                            <div class=\"flex flex-col items-end text-xs text-slate-500\">\n                                <span>A\u00f1o de Inicio: <strong id=\"detailStartYear\" class=\"text-slate-800 font-bold\">1970<\/strong><\/span>\n                                <span>Co-Presidencia: <strong id=\"detailChairs\" class=\"text-slate-800 font-bold\">Internacional<\/strong><\/span>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Workspace Tabs -->\n                        <div class=\"flex space-x-2 border-b border-slate-200 text-xs font-semibold overflow-x-auto custom-scrollbar\">\n                            <button onclick=\"switchDetailTab('info')\" id=\"dtab-info\" class=\"detail-tab px-4 py-2 border-b-2 border-[#024d2c] text-[#024d2c] font-bold\">\n                                \u2139\ufe0f Informaci\u00f3n y Sesiones\n                            <\/button>\n                            <button onclick=\"switchDetailTab('official-docs')\" id=\"dtab-official-docs\" class=\"detail-tab px-4 py-2 border-b-2 border-transparent text-slate-500 hover:text-slate-800\">\n                                \ud83d\udcdc Declaraciones Oficiales (<span id=\"countOfficialDocs\">0<\/span>)\n                            <\/button>\n                            <button onclick=\"switchDetailTab('user-files')\" id=\"dtab-user-files\" class=\"detail-tab px-4 py-2 border-b-2 border-transparent text-slate-500 hover:text-slate-800 bg-amber-50 rounded-t-md\">\n                                \ud83d\udcce Repositorio y Archivos Adjuntos (<span id=\"countUserFiles\">0<\/span>)\n                            <\/button>\n                        <\/div>\n\n                        <!-- TAB CONTENT 1: INFO & HISTORY -->\n                        <div id=\"dcontent-info\" class=\"detail-tab-content space-y-4 text-xs text-slate-700 pt-2\">\n                            <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\">\n                                <h3 class=\"font-bold text-slate-900 text-sm mb-1\">Contexto Hist\u00f3rico y Prop\u00f3sito de la Comisi\u00f3n<\/h3>\n                                <p id=\"detailDescription\" class=\"leading-relaxed text-slate-600\">Descripci\u00f3n detallada del di\u00e1logo...<\/p>\n                            <\/div>\n                            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                                <div class=\"p-3 bg-white border border-slate-200 rounded-xl\">\n                                    <h4 class=\"font-bold text-slate-800 mb-1\">Temas Teol\u00f3gicos Centrales<\/h4>\n                                    <p id=\"detailThemes\" class=\"text-slate-600 leading-relaxed\">Eucarist\u00eda, Ministerio, Primado, Justificaci\u00f3n...<\/p>\n                                <\/div>\n                                <div class=\"p-3 bg-white border border-slate-200 rounded-xl\">\n                                    <h4 class=\"font-bold text-slate-800 mb-1\">Estructura Organizativa<\/h4>\n                                    <p id=\"detailStructure\" class=\"text-slate-600 leading-relaxed\">Comisi\u00f3n Mixta Internacional con reuniones plenarias anuales.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- TAB CONTENT 2: HISTORICAL OFFICIAL DOCUMENTS -->\n                        <div id=\"dcontent-official-docs\" class=\"detail-tab-content hidden space-y-3 pt-2\">\n                            <div class=\"flex items-center justify-between text-xs text-slate-500 mb-2\">\n                                <p>Declaraciones acordadas, informes finales y documentos de trabajo publicados hist\u00f3ricamente con la Iglesia Cat\u00f3lica.<\/p>\n                            <\/div>\n                            <div id=\"officialDocsList\" class=\"space-y-2\">\n                                <!-- JS renders official agreed statements -->\n                            <\/div>\n                        <\/div>\n\n                        <!-- TAB CONTENT 3: ATTACHMENT SYSTEM FOR THIS DIALOGUE -->\n                        <div id=\"dcontent-user-files\" class=\"detail-tab-content hidden space-y-6 pt-2\">\n                            \n                            <!-- Upload \/ Attach Form -->\n                            <div class=\"bg-amber-50\/70 border border-amber-200 p-4 rounded-xl space-y-4\">\n                                <div class=\"flex items-center justify-between\">\n                                    <h3 class=\"text-xs font-bold text-amber-900 uppercase tracking-wider flex items-center gap-1.5\">\n                                        <span>\ud83d\udcce<\/span> Adjuntar Nuevo Documento o Nota a este Di\u00e1logo\n                                    <\/h3>\n                                    <span class=\"text-[11px] text-amber-800 font-medium\">Almacenamiento local seguro<\/span>\n                                <\/div>\n\n                                <form id=\"attachFileForm\" onsubmit=\"handleAttachFile(event)\" class=\"grid grid-cols-1 md:grid-cols-2 gap-3 text-xs\">\n                                    <div>\n                                        <label class=\"block font-semibold text-slate-700 mb-1\">T\u00edtulo del Documento \/ Archivo *<\/label>\n                                        <input type=\"text\" id=\"attachTitle\" required placeholder=\"Ej: An\u00e1lisis del Documento de Ravena - Notas 2024\" class=\"w-full border border-slate-300 rounded-lg p-2 focus:ring-2 focus:ring-amber-500\">\n                                    <\/div>\n                                    <div>\n                                        <label class=\"block font-semibold text-slate-700 mb-1\">Categor\u00eda del Adjunto<\/label>\n                                        <select id=\"attachCategory\" class=\"w-full border border-slate-300 rounded-lg p-2 bg-white focus:ring-2 focus:ring-amber-500\">\n                                            <option value=\"An\u00e1lisis \/ Comentario\">\ud83d\udcc4 An\u00e1lisis \/ Comentario<\/option>\n                                            <option value=\"Acta de Sesi\u00f3n \/ Borrador\">\ud83d\udcd1 Acta de Sesi\u00f3n \/ Borrador<\/option>\n                                            <option value=\"Traducci\u00f3n \/ Ficha\">\ud83c\udf10 Traducci\u00f3n \/ Ficha de Estudio<\/option>\n                                            <option value=\"Registro Fotogr\u00e1fico \/ Imagen\">\ud83d\udcf8 Registro Fotogr\u00e1fico \/ Archivo<\/option>\n                                            <option value=\"Otro\">\ud83d\udcce Otro Documento<\/option>\n                                        <\/select>\n                                    <\/div>\n                                    <div class=\"md:col-span-2\">\n                                        <label class=\"block font-semibold text-slate-700 mb-1\">Seleccionar Archivo (PDF, DOC, TXT, PNG, JPG) *<\/label>\n                                        <input type=\"file\" id=\"attachFileInput\" required onchange=\"handleFileSelection(event)\" class=\"w-full text-xs border border-slate-300 rounded-lg p-1.5 bg-white file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-amber-600 file:text-white hover:file:bg-amber-700\">\n                                        <p class=\"text-[10px] text-slate-500 mt-1\">El archivo se asociar\u00e1 espec\u00edficamente a este di\u00e1logo y podr\u00e1 ser consultado o descargado localmente.<\/p>\n                                    <\/div>\n                                    <div class=\"md:col-span-2\">\n                                        <label class=\"block font-semibold text-slate-700 mb-1\">Observaciones \/ Resumen Corto<\/label>\n                                        <textarea id=\"attachNotes\" rows=\"2\" placeholder=\"A\u00f1ada notas personales o referencias sobre el archivo adjunto...\" class=\"w-full border border-slate-300 rounded-lg p-2 focus:ring-2 focus:ring-amber-500\"><\/textarea>\n                                    <\/div>\n                                    <div class=\"md:col-span-2 flex justify-end\">\n                                        <button type=\"submit\" class=\"bg-[#024d2c] hover:bg-[#01331d] text-white font-bold px-4 py-2 rounded-lg transition shadow text-xs flex items-center gap-1.5\">\n                                            <span>\ud83d\udce4<\/span> Guardar y Adjuntar Documento\n                                        <\/button>\n                                    <\/div>\n                                <\/form>\n                            <\/div>\n\n                            <!-- List of User Attached Files -->\n                            <div class=\"space-y-3\">\n                                <h4 class=\"text-xs font-bold uppercase tracking-wider text-slate-600 flex items-center justify-between\">\n                                    <span>Documentos y Archivos Adjuntados en este Di\u00e1logo<\/span>\n                                    <span id=\"userFilesListCounter\" class=\"bg-amber-100 text-amber-900 font-bold text-[10px] px-2 py-0.5 rounded-full\">0 archivos<\/span>\n                                <\/h4>\n                                <div id=\"attachedFilesList\" class=\"space-y-2\">\n                                    <!-- JS populates attached user documents -->\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/section>\n\n        <\/div>\n    <\/main>\n\n    <!-- Modal: Create New Dialogue -->\n    <div id=\"newDialogueModal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white max-w-xl w-full rounded-2xl shadow-xl border border-slate-200 overflow-hidden space-y-4\">\n            <div class=\"bg-[#024d2c] text-white px-5 py-4 flex items-center justify-between\">\n                <h3 class=\"font-bold text-sm flex items-center gap-2\">\n                    <span>\u2795<\/span> Registrar Nuevo Di\u00e1logo con la Iglesia Cat\u00f3lica\n                <\/h3>\n                <button onclick=\"closeNewDialogueModal()\" class=\"text-emerald-200 hover:text-white font-bold text-lg\">\u00d7<\/button>\n            <\/div>\n            <form onsubmit=\"handleCreateDialogue(event)\" class=\"p-5 space-y-3 text-xs\">\n                <div>\n                    <label class=\"block font-semibold text-slate-700 mb-1\">T\u00edtulo Oficial del Di\u00e1logo *<\/label>\n                    <input type=\"text\" id=\"newTitle\" required placeholder=\"Ej: Di\u00e1logo Cat\u00f3lico - Metodista Internacional\" class=\"w-full border border-slate-300 rounded-lg p-2\">\n                <\/div>\n                <div class=\"grid grid-cols-2 gap-3\">\n                    <div>\n                        <label class=\"block font-semibold text-slate-700 mb-1\">Categor\u00eda *<\/label>\n                        <select id=\"newCategory\" required class=\"w-full border border-slate-300 rounded-lg p-2 bg-white\">\n                            <option value=\"Bilateral\">Bilateral Cristiano<\/option>\n                            <option value=\"Multilateral\">Multilateral (COE\/Consejos)<\/option>\n                            <option value=\"Interreligioso\">Interreligioso<\/option>\n                            <option value=\"Nacional\">Nacional \/ M\u00e9xico<\/option>\n                        <\/select>\n                    <\/div>\n                    <div>\n                        <label class=\"block font-semibold text-slate-700 mb-1\">Estado *<\/label>\n                        <select id=\"newStatus\" required class=\"w-full border border-slate-300 rounded-lg p-2 bg-white\">\n                            <option value=\"Activo\">Activo \/ En Sesi\u00f3n<\/option>\n                            <option value=\"Concluido\">Concluido \/ Publicado<\/option>\n                            <option value=\"En Receso\">En Receso<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n                <div>\n                    <label class=\"block font-semibold text-slate-700 mb-1\">Tradiciones \/ Iglesias Participantes *<\/label>\n                    <input type=\"text\" id=\"newTraditions\" required placeholder=\"Ej: Iglesia Cat\u00f3lica y Consejo Metodista Mundial\" class=\"w-full border border-slate-300 rounded-lg p-2\">\n                <\/div>\n                <div class=\"grid grid-cols-2 gap-3\">\n                    <div>\n                        <label class=\"block font-semibold text-slate-700 mb-1\">A\u00f1o de Inicio<\/label>\n                        <input type=\"number\" id=\"newYear\" value=\"2024\" class=\"w-full border border-slate-300 rounded-lg p-2\">\n                    <\/div>\n                    <div>\n                        <label class=\"block font-semibold text-slate-700 mb-1\">Co-Presidencia \/ Enlace<\/label>\n                        <input type=\"text\" id=\"newChairs\" placeholder=\"Ej: Roma \/ Ginebra\" class=\"w-full border border-slate-300 rounded-lg p-2\">\n                    <\/div>\n                <\/div>\n                <div>\n                    <label class=\"block font-semibold text-slate-700 mb-1\">Descripci\u00f3n y Objetivos<\/label>\n                    <textarea id=\"newDescription\" rows=\"3\" placeholder=\"Resumen hist\u00f3rico y alcance del di\u00e1logo...\" class=\"w-full border border-slate-300 rounded-lg p-2\"><\/textarea>\n                <\/div>\n                <div class=\"pt-2 flex justify-end gap-2\">\n                    <button type=\"button\" onclick=\"closeNewDialogueModal()\" class=\"px-3 py-2 border border-slate-300 rounded-lg font-semibold text-slate-600 hover:bg-slate-50\">Cancelar<\/button>\n                    <button type=\"submit\" class=\"px-4 py-2 bg-[#024d2c] hover:bg-[#01331d] text-white font-bold rounded-lg transition\">Guardar Di\u00e1logo<\/button>\n                <\/div>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <!-- Footer -->\n    <footer class=\"bg-slate-900 border-t border-slate-800 text-slate-400 py-6 text-xs text-center mt-auto\">\n        <div class=\"max-w-7xl mx-auto px-4\">\n            <p>\u00a9 Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica | Sistema de Documentaci\u00f3n y Registro<\/p>\n            <p class=\"mt-1 text-slate-500\">Inspirado en la metodolog\u00eda de \u00edndices documentales de investigaci\u00f3n teol\u00f3gica y ecum\u00e9nica internacional (Centro Pro Unione).<\/p>\n        <\/div>\n    <\/footer>\n\n    <!-- JS Logic and Storage -->\n    <script>\n        \/\/ Initial Dataset modeled after official Catholic ecumenical and interreligious dialogues\n        let dialogues = [\n            {\n                id: 'cat-lut',\n                title: 'Di\u00e1logo Cat\u00f3lico - Luterano Internacional',\n                category: 'Bilateral',\n                status: 'Activo',\n                traditions: 'Iglesia Cat\u00f3lica - Federaci\u00f3n Luterana Mundial (FLM)',\n                startYear: 1967,\n                chairs: 'Dicasterio para la Unidad de los Cristianos \/ FLM',\n                description: 'Comisi\u00f3n Mixta Internacional centrada en la superaci\u00f3n de las condenas del siglo XVI, el estudio de la justificaci\u00f3n por la fe, la eucarist\u00eda y el ministerio eclesial.',\n                themes: 'Justificaci\u00f3n, Eucarist\u00eda, Ministerio, Iglesia y Comuni\u00f3n',\n                structure: 'Plenarios quinquenales con grupos de trabajo teol\u00f3gicos.',\n                officialDocs: [\n                    { title: 'Declaraci\u00f3n Conjunta sobre la Doctrina de la Justificaci\u00f3n', year: 1999, link: '#', summary: 'Documento hito de acuerdo teol\u00f3gico sobre la justificaci\u00f3n por la gracia mediante la fe.' },\n                    { title: 'Del Conflicto a la Comuni\u00f3n', year: 2013, link: '#', summary: 'Conmemoraci\u00f3n conjunta luterano-cat\u00f3lico-romana de la Reforma en 2017.' },\n                    { title: 'El Bautismo y la Creciente Comuni\u00f3n', year: 2021, link: '#', summary: 'Reconocimiento mutuo del bautismo y sus implicaciones eclesiales.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'cat-ort',\n                title: 'Di\u00e1logo Cat\u00f3lico - Ortodoxo Internacional',\n                category: 'Bilateral',\n                status: 'Activo',\n                traditions: 'Iglesia Cat\u00f3lica - Iglesias Ortodoxas Bizantinas (Patriarcado Ecum\u00e9nico y Autocefalias)',\n                startYear: 1979,\n                chairs: 'Cardenal Kurt Koch \/ Arzobispo de Telmessos',\n                description: 'Comisi\u00f3n Mixta Internacional para el Di\u00e1logo Teol\u00f3gico entre la Iglesia Cat\u00f3lica y la Iglesia Ortodoxa en su conjunto.',\n                themes: 'Sacramentos, Primado, Sinodalidad, Comuni\u00f3n Eclesial en el Primer Milenio',\n                structure: 'Sesiones plenarias internacionales en sedes rotativas.',\n                officialDocs: [\n                    { title: 'Documento de Ravena: Consecuencias Eclesiol\u00f3gicas y Can\u00f3nicas de la Naturaleza Sacramental de la Iglesia', year: 2007, link: '#', summary: 'Consenso sobre sinodalidad y autoridad a nivel local, regional y universal.' },\n                    { title: 'Documento de Chieti: Sinodalidad y Primado durante el Primer Milenio', year: 2016, link: '#', summary: 'An\u00e1lisis hist\u00f3rico de la relaci\u00f3n entre el Obispo de Roma y las sedes orientales.' },\n                    { title: 'Documento de Alejandr\u00eda: Sinodalidad y Primado en el Segundo Milenio y Hoy', year: 2023, link: '#', summary: 'Revisi\u00f3n de los desarrollos doctrinales y can\u00f3nicos del segundo milenio.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'cat-ang',\n                title: 'Comisi\u00f3n Internacional Anglicano-Cat\u00f3lica (ARCIC)',\n                category: 'Bilateral',\n                status: 'Activo',\n                traditions: 'Iglesia Cat\u00f3lica - Comuni\u00f3n Anglicana',\n                startYear: 1970,\n                chairs: 'ARCIC III Co-Presidencia',\n                description: 'Di\u00e1logo oficial bilateral permanente orientado al restablecimiento de la plena comuni\u00f3n visible y el reconocimiento mutuo de los ministerios.',\n                themes: 'Autoridad en la Iglesia, Mar\u00eda en la Fe y la Doctrina, \u00c9tica y Discernimiento Moral',\n                structure: 'Fases hist\u00f3ricas ARCIC I, ARCIC II y actualmente ARCIC III.',\n                officialDocs: [\n                    { title: 'El Regalo de la Autoridad (Authority in the Church III)', year: 1999, link: '#', summary: 'Ejercicio de la autoridad y don del primado en la b\u00fasqueda de la unidad.' },\n                    { title: 'Mar\u00eda: Gracia y Esperanza en Cristo', year: 2005, link: '#', summary: 'Declaraci\u00f3n mariol\u00f3gica com\u00fan entre anglicanos y cat\u00f3licos.' },\n                    { title: 'Caminar Juntos en el Camino: Aprendizaje Ecum\u00e9nico y Eclesiol\u00f3gico', year: 2017, link: '#', summary: 'Eclesi\u00f3logo comparativa y procesos de toma de decisiones.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'cat-jud',\n                title: 'Comisi\u00f3n para las Relaciones Religiosas con el Judaismo',\n                category: 'Interreligioso',\n                status: 'Activo',\n                traditions: 'Iglesia Cat\u00f3lica - Comit\u00e9 Jud\u00edo Internacional para Consultas Interreligiosas (IJCIC)',\n                startYear: 1971,\n                chairs: 'Santa Sede \/ IJCIC',\n                description: 'Mesa institucional de di\u00e1logo teol\u00f3gico y \u00e9tico tras la declaraci\u00f3n Nostra Aetate del Concilio Vaticano II.',\n                themes: 'Antisemitismo, Llama Irrevocable de Dios, Ra\u00edces jud\u00edas del cristianismo',\n                structure: 'Encuentros bilaterales peri\u00f3dicos y publicaciones doctrinales.',\n                officialDocs: [\n                    { title: 'Nos Acordamos: Una Reflexi\u00f3n sobre la Shoah', year: 1998, link: '#', summary: 'Reflexi\u00f3n hist\u00f3rica sobre el Holocausto y la lucha contra el antisemitismo.' },\n                    { title: '\"Los Dones y la Llamada de Dios son Irrevocables\" (Rm 11,29)', year: 2015, link: '#', summary: 'Reflexi\u00f3n teol\u00f3gica sobre cuestiones m\u00edsticas y b\u00edblicas jud\u00edo-cat\u00f3licas.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'cat-mus',\n                title: 'Foro Cat\u00f3lico-Musulm\u00e1n & Comit\u00e9 Abu Dabi',\n                category: 'Interreligioso',\n                status: 'Activo',\n                traditions: 'Iglesia Cat\u00f3lica - Consejo de Sabios Musulmanes \/ Universidad Al-Azhar',\n                startYear: 2008,\n                chairs: 'Dicasterio para el Di\u00e1logo Interreligioso \/ Gran Im\u00e1n de Al-Azhar',\n                description: 'Plataforma internacional para promover la convivencia pac\u00edfica, la libertad religiosa y la fraternidad humana.',\n                themes: 'Fraternidad Humana, Paz Mundial, Libertad de Culto, \u00c9tica Social',\n                structure: 'Foro trienal y cumbre de l\u00edderes de Abu Dabi.',\n                officialDocs: [\n                    { title: 'Documento sobre la Fraternidad Humana por la Paz Mundial y la Convivencia Com\u00fan', year: 2019, link: '#', summary: 'Firmado por el Papa Francisco y el Gran Im\u00e1n Ahmad al-Tayyib en Abu Dabi.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'coe-faith',\n                title: 'Comisi\u00f3n de Fe y Constituci\u00f3n (Consejo Mundial de Iglesias)',\n                category: 'Multilateral',\n                status: 'Activo',\n                traditions: '350+ Iglesias Miembros del CMI e Iglesia Cat\u00f3lica (miembro pleno de la Comisi\u00f3n)',\n                startYear: 1948,\n                chairs: 'Secretar\u00eda de Fe y Constituci\u00f3n, Ginebra',\n                description: 'El \u00f3rgano multilateral teol\u00f3gico m\u00e1s representativo del mundo, dedicado a estudiar la unidad teol\u00f3gica de las iglesias.',\n                themes: 'Bautismo, Eucarist\u00eda, Ministerio, La Iglesia hacia una Visi\u00f3n Com\u00fan',\n                structure: 'Asamblea Plenaria e Investigaciones teol\u00f3gicas globales.',\n                officialDocs: [\n                    { title: 'Bautismo, Eucarist\u00eda y Ministerio (BEM - Documento de Lima)', year: 1982, link: '#', summary: 'El texto ecum\u00e9nico multilateral m\u00e1s estudiado y traducido de la historia.' },\n                    { title: 'La Iglesia: Hacia una Visi\u00f3n Com\u00fan', year: 2013, link: '#', summary: 'Declaraci\u00f3n de convergencia eclesiol\u00f3gica global.' }\n                ],\n                userFiles: []\n            },\n            {\n                id: 'mex-consejo',\n                title: 'Consejo Interreligioso de M\u00e9xico y Di\u00e1logo Ecum\u00e9nico CEM',\n                category: 'Nacional',\n                status: 'Activo',\n                traditions: 'Conferencia del Episcopado Mexicano (CEM), Iglesias Protestantes, Evang\u00e9licas, Ortodoxas y Comunidades Jud\u00eda y Musulmana de M\u00e9xico',\n                startYear: 1992,\n                chairs: 'Comisi\u00f3n Episcopal para el Di\u00e1logo Interreligioso y Comuni\u00f3n (CEM)',\n                description: 'Espacio institucional nacional de di\u00e1logo ecum\u00e9nico e interreligioso para promover la libertad religiosa, la paz social y la cohesi\u00f3n familiar en M\u00e9xico.',\n                themes: 'Libertad Religiosa, Construcci\u00f3n de Paz en M\u00e9xico, Tejido Social, Laicidad',\n                structure: 'Reuniones mensuales y pronunciamientos comunitarios.',\n                officialDocs: [\n                    { title: 'Declaraci\u00f3n Conjunta por la Paz y la Tolerancia Religiosa en M\u00e9xico', year: 2020, link: '#', summary: 'Consenso interreligioso frente a la violencia e intolerancia regional.' }\n                ],\n                userFiles: []\n            }\n        ];\n\n        \/\/ Currently selected filters & active state\n        let currentCategory = 'ALL';\n        let activeDialogueId = null;\n        let pendingFileBase64 = null;\n        let pendingFileName = '';\n        let pendingFileType = '';\n        let categoryChartInstance = null;\n\n        \/\/ Initialize application\n        document.addEventListener('DOMContentLoaded', () => {\n            loadFromLocalStorage();\n            updateKPIs();\n            renderCategoryChart();\n            renderCatalog();\n        });\n\n        \/\/ Local Storage Persistence Functions\n        function saveToLocalStorage() {\n            try {\n                localStorage.setItem('catholic_ecumenical_dialogues_data', JSON.stringify(dialogues));\n            } catch (e) {\n                console.warn('LocalStorage size limit or disabled:', e);\n            }\n        }\n\n        function loadFromLocalStorage() {\n            const saved = localStorage.getItem('catholic_ecumenical_dialogues_data');\n            if (saved) {\n                try {\n                    const parsed = JSON.parse(saved);\n                    if (Array.isArray(parsed) && parsed.length > 0) {\n                        dialogues = parsed;\n                    }\n                } catch (e) {\n                    console.error('Error loading saved dialogues data', e);\n                }\n            }\n        }\n\n        \/\/ Category Filter Switching\n        function setCategoryFilter(cat) {\n            currentCategory = cat;\n            document.querySelectorAll('#categoryNav button').forEach(btn => {\n                btn.className = \"w-full flex items-center justify-between px-3 py-2 rounded-lg text-slate-700 hover:bg-slate-100 transition\";\n            });\n            const activeBtn = document.getElementById(`cat-${cat}`);\n            if (activeBtn) {\n                activeBtn.className = \"w-full flex items-center justify-between px-3 py-2 rounded-lg bg-[#024d2c] text-white font-bold transition\";\n            }\n            filterDialogues();\n        }\n\n        \/\/ Filtering & Rendering Catalog\n        function filterDialogues() {\n            const searchQuery = document.getElementById('globalSearchInput').value.toLowerCase();\n            const statusVal = document.getElementById('statusFilter').value;\n\n            const filtered = dialogues.filter(d => {\n                const matchCat = (currentCategory === 'ALL' || d.category === currentCategory);\n                const matchStatus = (statusVal === 'ALL' || d.status === statusVal);\n                \n                \/\/ Search match inside title, traditions, themes or attached user file titles\n                const hasMatchingUserFile = d.userFiles && d.userFiles.some(f => f.title.toLowerCase().includes(searchQuery));\n                const matchSearch = !searchQuery || \n                    d.title.toLowerCase().includes(searchQuery) ||\n                    d.traditions.toLowerCase().includes(searchQuery) ||\n                    d.themes.toLowerCase().includes(searchQuery) ||\n                    hasMatchingUserFile;\n\n                return matchCat && matchStatus && matchSearch;\n            });\n\n            renderCatalog(filtered);\n            updateCategoryBadges();\n        }\n\n        function updateCategoryBadges() {\n            const counts = { ALL: dialogues.length, Bilateral: 0, Multilateral: 0, Interreligioso: 0, Nacional: 0 };\n            dialogues.forEach(d => {\n                if (counts[d.category] !== undefined) counts[d.category]++;\n            });\n\n            Object.keys(counts).forEach(k => {\n                const badge = document.getElementById(`badge-${k}`);\n                if (badge) badge.textContent = counts[k];\n            });\n        }\n\n        function updateKPIs() {\n            let totalOfficial = 0;\n            let totalUserFiles = 0;\n            let activeCommissions = 0;\n\n            dialogues.forEach(d => {\n                totalOfficial += (d.officialDocs ? d.officialDocs.length : 0);\n                totalUserFiles += (d.userFiles ? d.userFiles.length : 0);\n                if (d.status === 'Activo') activeCommissions++;\n            });\n\n            document.getElementById('kpiTotalDialogues').textContent = dialogues.length;\n            document.getElementById('kpiOfficialDocs').textContent = totalOfficial;\n            document.getElementById('kpiAttachedFiles').textContent = totalUserFiles;\n            document.getElementById('kpiActiveCommissions').textContent = activeCommissions;\n        }\n\n        function renderCatalog(itemsToRender = dialogues) {\n            const grid = document.getElementById('dialogueGrid');\n            const countText = document.getElementById('resultCountText');\n            grid.innerHTML = '';\n\n            countText.textContent = `Mostrando ${itemsToRender.length} de ${dialogues.length} di\u00e1logos`;\n\n            if (itemsToRender.length === 0) {\n                grid.innerHTML = `\n                    <div class=\"col-span-full bg-white p-8 rounded-xl border border-slate-200 text-center space-y-2\">\n                        <span class=\"text-3xl\">\ud83d\udd0d<\/span>\n                        <h3 class=\"font-bold text-slate-800\">No se encontraron di\u00e1logos con estos criterios<\/h3>\n                        <p class=\"text-xs text-slate-500\">Pruebe ajustando la b\u00fasqueda o cambie de categor\u00eda en el panel izquierdo.<\/p>\n                    <\/div>\n                `;\n                return;\n            }\n\n            itemsToRender.forEach(d => {\n                const userFileCount = d.userFiles ? d.userFiles.length : 0;\n                const officialCount = d.officialDocs ? d.officialDocs.length : 0;\n\n                const card = document.createElement('div');\n                card.className = \"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col justify-between space-y-4\";\n                card.innerHTML = `\n                    <div class=\"space-y-2\">\n                        <div class=\"flex items-center justify-between gap-2\">\n                            <span class=\"bg-slate-100 text-slate-700 font-bold text-[10px] px-2 py-0.5 rounded-full uppercase\">${d.category}<\/span>\n                            <span class=\"${d.status === 'Activo' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'} text-[10px] font-bold px-2 py-0.5 rounded-full\">\n                                ${d.status}\n                            <\/span>\n                        <\/div>\n                        <h3 class=\"font-bold text-slate-900 text-base hover:text-[#024d2c] transition cursor-pointer\" onclick=\"openDialogueDetail('${d.id}')\">\n                            ${d.title}\n                        <\/h3>\n                        <p class=\"text-xs font-semibold text-amber-700\">${d.traditions}<\/p>\n                        <p class=\"text-xs text-slate-500 line-clamp-2 leading-relaxed\">${d.description}<\/p>\n                    <\/div>\n\n                    <div class=\"pt-3 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500\">\n                        <div class=\"flex items-center space-x-3\">\n                            <span title=\"Declaraciones oficiales\">\ud83d\udcdc <strong>${officialCount}<\/strong><\/span>\n                            <span title=\"Archivos adjuntados por el usuario\" class=\"text-amber-800 font-bold\">\ud83d\udcce <strong>${userFileCount}<\/strong><\/span>\n                        <\/div>\n                        <button onclick=\"openDialogueDetail('${d.id}')\" class=\"bg-[#024d2c] hover:bg-[#01331d] text-white font-bold px-3 py-1.5 rounded-lg text-xs transition\">\n                            Abrir Di\u00e1logo \u2794\n                        <\/button>\n                    <\/div>\n                `;\n                grid.appendChild(card);\n            });\n        }\n\n        \/\/ OPEN & VIEW DIALOGUE DETAIL WORKSPACE\n        function openDialogueDetail(id) {\n            const d = dialogues.find(item => item.id === id);\n            if (!d) return;\n\n            activeDialogueId = id;\n\n            \/\/ Fill header info\n            document.getElementById('detailTitle').textContent = d.title;\n            document.getElementById('detailCategoryBadge').textContent = d.category;\n            document.getElementById('detailStatusBadge').textContent = d.status;\n            document.getElementById('detailTraditions').textContent = d.traditions;\n            document.getElementById('detailStartYear').textContent = d.startYear || 'N\/A';\n            document.getElementById('detailChairs').textContent = d.chairs || 'N\/A';\n\n            document.getElementById('detailDescription').textContent = d.description;\n            document.getElementById('detailThemes').textContent = d.themes || 'No especificados';\n            document.getElementById('detailStructure').textContent = d.structure || 'Comisi\u00f3n Mixta teol\u00f3gica.';\n\n            \/\/ Document Counters\n            document.getElementById('countOfficialDocs').textContent = d.officialDocs ? d.officialDocs.length : 0;\n            document.getElementById('countUserFiles').textContent = d.userFiles ? d.userFiles.length : 0;\n\n            \/\/ Render Official Statements\n            renderOfficialDocs(d.officialDocs || []);\n\n            \/\/ Render Attached User Files\n            renderUserFiles(d.userFiles || []);\n\n            \/\/ Show detail panel, hide catalog\n            document.getElementById('catalogView').classList.add('hidden');\n            document.getElementById('detailView').classList.remove('hidden');\n\n            switchDetailTab('info');\n            window.scrollTo({ top: 120, behavior: 'smooth' });\n        }\n\n        function closeDetailView() {\n            activeDialogueId = null;\n            document.getElementById('detailView').classList.add('hidden');\n            document.getElementById('catalogView').classList.remove('hidden');\n        }\n\n        \/\/ Workspace Tab Switcher inside Detail View\n        function switchDetailTab(tabKey) {\n            document.querySelectorAll('.detail-tab').forEach(b => {\n                b.className = \"detail-tab px-4 py-2 border-b-2 border-transparent text-slate-500 hover:text-slate-800\";\n            });\n            document.querySelectorAll('.detail-tab-content').forEach(c => c.classList.add('hidden'));\n\n            const btn = document.getElementById(`dtab-${tabKey}`);\n            const content = document.getElementById(`dcontent-${tabKey}`);\n\n            if (btn && content) {\n                btn.className = \"detail-tab px-4 py-2 border-b-2 border-[#024d2c] text-[#024d2c] font-bold\";\n                content.classList.remove('hidden');\n            }\n        }\n\n        function renderOfficialDocs(docs) {\n            const list = document.getElementById('officialDocsList');\n            list.innerHTML = '';\n\n            if (docs.length === 0) {\n                list.innerHTML = `<p class=\"text-xs text-slate-400 italic\">No hay documentos oficiales registrados a\u00fan para esta comisi\u00f3n.<\/p>`;\n                return;\n            }\n\n            docs.forEach(doc => {\n                const div = document.createElement('div');\n                div.className = \"bg-white p-3.5 rounded-xl border border-slate-200 flex flex-col sm:flex-row sm:items-center justify-between gap-2\";\n                div.innerHTML = `\n                    <div class=\"space-y-0.5\">\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"font-bold text-slate-900 text-xs\">${doc.title}<\/span>\n                            <span class=\"bg-indigo-50 text-indigo-800 text-[10px] font-bold px-2 py-0.5 rounded\">${doc.year}<\/span>\n                        <\/div>\n                        <p class=\"text-[11px] text-slate-500\">${doc.summary}<\/p>\n                    <\/div>\n                    <span class=\"text-[11px] text-slate-400 font-mono whitespace-nowrap\">Documento Oficial<\/span>\n                `;\n                list.appendChild(div);\n            });\n        }\n\n        \/\/ ATTACHMENT SYSTEM LOGIC\n        function handleFileSelection(event) {\n            const file = event.target.files[0];\n            if (!file) {\n                pendingFileBase64 = null;\n                return;\n            }\n\n            pendingFileName = file.name;\n            pendingFileType = file.type || 'Archivo';\n\n            const reader = new FileReader();\n            reader.onload = function(e) {\n                pendingFileBase64 = e.target.result; \/\/ Stores base64 data for offline viewing\/downloading\n            };\n            reader.readAsDataURL(file);\n        }\n\n        function handleAttachFile(event) {\n            event.preventDefault();\n            if (!activeDialogueId) return;\n\n            const dialogue = dialogues.find(d => d.id === activeDialogueId);\n            if (!dialogue) return;\n\n            const title = document.getElementById('attachTitle').value;\n            const category = document.getElementById('attachCategory').value;\n            const notes = document.getElementById('attachNotes').value;\n\n            if (!pendingFileBase64) {\n                alert(\"Por favor seleccione un archivo para adjuntar.\");\n                return;\n            }\n\n            const newAttachment = {\n                id: 'att-' + Date.now(),\n                title: title,\n                category: category,\n                fileName: pendingFileName,\n                fileType: pendingFileType,\n                uploadDate: new Date().toLocaleDateString('es-MX'),\n                notes: notes,\n                dataUrl: pendingFileBase64\n            };\n\n            if (!dialogue.userFiles) dialogue.userFiles = [];\n            dialogue.userFiles.unshift(newAttachment);\n\n            \/\/ Save and Reset\n            saveToLocalStorage();\n            updateKPIs();\n            renderUserFiles(dialogue.userFiles);\n            document.getElementById('countUserFiles').textContent = dialogue.userFiles.length;\n\n            \/\/ Reset form\n            document.getElementById('attachFileForm').reset();\n            pendingFileBase64 = null;\n\n            alert(\"\u00a1Documento adjuntado con \u00e9xito a este di\u00e1logo!\");\n        }\n\n        function renderUserFiles(files) {\n            const container = document.getElementById('attachedFilesList');\n            const counter = document.getElementById('userFilesListCounter');\n            container.innerHTML = '';\n            counter.textContent = `${files.length} archivo(s)`;\n\n            if (files.length === 0) {\n                container.innerHTML = `\n                    <div class=\"p-6 bg-slate-50 rounded-xl border border-dashed border-slate-300 text-center text-slate-500 text-xs\">\n                        \ud83d\udcce No hay documentos adjuntos por el usuario en este di\u00e1logo a\u00fan.<br>Utilice el formulario de arriba para cargar an\u00e1lisis, PDFs o actas.\n                    <\/div>\n                `;\n                return;\n            }\n\n            files.forEach(file => {\n                const item = document.createElement('div');\n                item.className = \"bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col sm:flex-row sm:items-center justify-between gap-3\";\n                item.innerHTML = `\n                    <div class=\"space-y-1\">\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"font-bold text-slate-900 text-xs\">${file.title}<\/span>\n                            <span class=\"bg-amber-100 text-amber-900 text-[10px] font-bold px-2 py-0.5 rounded\">${file.category}<\/span>\n                        <\/div>\n                        <p class=\"text-[11px] text-slate-600\">${file.notes || 'Sin observaciones adicionales.'}<\/p>\n                        <div class=\"text-[10px] text-slate-400 flex items-center gap-3\">\n                            <span>\ud83d\udcc4 ${file.fileName}<\/span>\n                            <span>\ud83d\uddd3\ufe0f Adjuntado: ${file.uploadDate}<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center gap-2\">\n                        <a href=\"${file.dataUrl}\" download=\"${file.fileName}\" class=\"bg-slate-800 hover:bg-slate-900 text-white font-bold px-2.5 py-1.5 rounded text-[11px] transition flex items-center gap-1\">\n                            \u2b07\ufe0f Descargar\n                        <\/a>\n                        <button onclick=\"deleteAttachment('${file.id}')\" class=\"bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 font-bold px-2 py-1 rounded text-[11px] transition\">\n                            \ud83d\uddd1\ufe0f\n                        <\/button>\n                    <\/div>\n                `;\n                container.appendChild(item);\n            });\n        }\n\n        function deleteAttachment(fileId) {\n            if (!activeDialogueId) return;\n            const dialogue = dialogues.find(d => d.id === activeDialogueId);\n            if (!dialogue || !dialogue.userFiles) return;\n\n            if (confirm(\"\u00bfDesea eliminar este documento adjunto?\")) {\n                dialogue.userFiles = dialogue.userFiles.filter(f => f.id !== fileId);\n                saveToLocalStorage();\n                updateKPIs();\n                renderUserFiles(dialogue.userFiles);\n                document.getElementById('countUserFiles').textContent = dialogue.userFiles.length;\n            }\n        }\n\n        \/\/ NEW DIALOGUE MODAL LOGIC\n        function openNewDialogueModal() {\n            document.getElementById('newDialogueModal').classList.remove('hidden');\n        }\n\n        function closeNewDialogueModal() {\n            document.getElementById('newDialogueModal').classList.add('hidden');\n        }\n\n        function handleCreateDialogue(event) {\n            event.preventDefault();\n            const newObj = {\n                id: 'dia-' + Date.now(),\n                title: document.getElementById('newTitle').value,\n                category: document.getElementById('newCategory').value,\n                status: document.getElementById('newStatus').value,\n                traditions: document.getElementById('newTraditions').value,\n                startYear: parseInt(document.getElementById('newYear').value) || 2024,\n                chairs: document.getElementById('newChairs').value || 'Sin especificar',\n                description: document.getElementById('newDescription').value || 'Sin descripci\u00f3n.',\n                themes: 'Definidos por la comisi\u00f3n',\n                structure: 'Comisi\u00f3n Mixta',\n                officialDocs: [],\n                userFiles: []\n            };\n\n            dialogues.unshift(newObj);\n            saveToLocalStorage();\n            updateKPIs();\n            filterDialogues();\n            renderCategoryChart();\n            closeNewDialogueModal();\n            alert(\"\u00a1Nuevo di\u00e1logo creado correctamente en el directorio!\");\n        }\n\n        \/\/ Export All Data Backup as JSON\n        function exportDataJSON() {\n            const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(dialogues, null, 2));\n            const downloadAnchor = document.createElement('a');\n            downloadAnchor.setAttribute(\"href\", dataStr);\n            downloadAnchor.setAttribute(\"download\", `Respaldo_Dialogos_Catolicos_${new Date().toISOString().slice(0,10)}.json`);\n            document.body.appendChild(downloadAnchor);\n            downloadAnchor.click();\n            downloadAnchor.remove();\n        }\n\n        \/\/ Category Chart (Chart.js)\n        function renderCategoryChart() {\n            const counts = { Bilateral: 0, Multilateral: 0, Interreligioso: 0, Nacional: 0 };\n            dialogues.forEach(d => {\n                if (counts[d.category] !== undefined) counts[d.category]++;\n            });\n\n            const ctx = document.getElementById('categoryChart').getContext('2d');\n            if (categoryChartInstance) categoryChartInstance.destroy();\n\n            categoryChartInstance = new Chart(ctx, {\n                type: 'pie',\n                data: {\n                    labels: ['Bilaterales', 'Multilaterales', 'Interreligiosos', 'Nacionales (Mex)'],\n                    datasets: [{\n                        data: [counts.Bilateral, counts.Multilateral, counts.Interreligioso, counts.Nacional],\n                        backgroundColor: ['#024d2c', '#2563eb', '#d97706', '#059669'],\n                        borderWidth: 2,\n                        borderColor: '#ffffff'\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: { position: 'bottom', labels: { font: { size: 10 }, boxWidth: 10 } }\n                    }\n                }\n            });\n        }\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica Directorio de Di\u00e1logos Ecum\u00e9nicos e Interreligiosos con la Iglesia Cat\u00f3lica Directorio Internacional de Comisiones, Declaraciones Conjuntas y Repositorio de Documentos \u2795 Nuevo Di\u00e1logo \ud83d\udcbe Exportar \ud83d\udcdc Di\u00e1logos Registrados 0 \ud83d\udcd1 Documentos Oficiales 0 \ud83d\udcce Adjuntos del Usuario 0 \ud83d\udd4a\ufe0f Comisiones Activas 0 Categor\u00edas de Di\u00e1logo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3459","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/pages\/3459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3459"}],"version-history":[{"count":2,"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/pages\/3459\/revisions"}],"predecessor-version":[{"id":3604,"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=\/wp\/v2\/pages\/3459\/revisions\/3604"}],"wp:attachment":[{"href":"https:\/\/cedic.cem.org.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}