actualización inicial y documentación ejercicio base

docs/GUIA_APP_GRADIO.md

@@ -0,0 +1,607 @@
+# 🚀 Aplicación Web Gradio - Visualizaciones ODS
+
+## 📋 Descripción
+
+**App Gradio Interactiva** para explorar las 10 visualizaciones de análisis de similaridad ODS a través de una interfaz web profesional y amigable.
+
+### ✨ Características Principales
+
+- ✅ **Interfaz web interactiva** con diseño profesional
+- ✅ **10 pestañas** con cada visualización completa
+- ✅ **Explicaciones integradas** para público general
+- ✅ **Visualizaciones dinámicas** (Plotly) y estáticas (PNG)
+- ✅ **Estadísticas en tiempo real** con análisis detallado
+- ✅ **Dashboard de inicio** con métricas clave
+- ✅ **Responsive design** adaptable a cualquier pantalla
+- ✅ **Sin necesidad de conocimientos técnicos** para usar
+
+---
+
+## 🎯 ¿Para quién es esta aplicación?
+
+### 👥 Público General
+- Explorar visualizaciones de forma intuitiva
+- Entender qué ODS son más relevantes
+- Identificar indicadores clave sin código
+
+### 👔 Ejecutivos y Tomadores de Decisión
+- Presentaciones interactivas
+- Análisis rápido de alineación ODS
+- Métricas clave de un vistazo
+
+### 🔬 Analistas e Investigadores
+- Exploración profunda de datos
+- Validación de correlaciones
+- Exportación de visualizaciones
+
+### 👨‍💻 Desarrolladores
+- Referencia de implementación
+- Base para personalización
+- Integración con otros sistemas
+
+---
+
+## 🛠️ Instalación y Configuración
+
+### Requisitos Previos
+
+```bash
+# Python 3.8 o superior
+python --version
+
+# Librerías necesarias
+pip install pandas numpy matplotlib seaborn plotly gradio
+```
+
+### Instalación Completa
+
+```bash
+# 1. Instalar todas las dependencias
+pip install pandas numpy matplotlib seaborn plotly gradio --break-system-packages
+
+# 2. Verificar instalación
+python -c "import gradio; print(f'Gradio {gradio.__version__} instalado correctamente')"
+```
+
+---
+
+## 🚀 Ejecución de la Aplicación
+
+### Método 1: Ejecución Directa
+
+```bash
+# Navegar al directorio
+cd /ruta/donde/está/app_gradio_ods.py
+
+# Ejecutar la aplicación
+python app_gradio_ods.py
+```
+
+**Resultado esperado:**
+```
+======================================================================
+INICIANDO APLICACIÓN GRADIO - VISUALIZACIONES ODS
+======================================================================
+
+✓ Datos cargados correctamente: 244 registros
+✓ ODS únicos: 17
+
+======================================================================
+CREANDO APLICACIÓN...
+======================================================================
+
+✓ Aplicación creada exitosamente
+
+======================================================================
+INICIANDO SERVIDOR WEB...
+======================================================================
+
+🌐 La aplicación se abrirá en tu navegador automáticamente
+📍 URL local: http://127.0.0.1:7860
+🌍 URL pública: Se generará si share=True
+
+💡 Presiona Ctrl+C para detener el servidor
+
+Running on local URL:  http://127.0.0.1:7860
+```
+
+### Método 2: Ejecución en Background
+
+```bash
+# Para mantener la app corriendo en segundo plano
+nohup python app_gradio_ods.py > app.log 2>&1 &
+
+# Ver los logs
+tail -f app.log
+
+# Detener la aplicación
+pkill -f app_gradio_ods.py
+```
+
+### Método 3: Compartir Públicamente
+
+Editar el archivo `app_gradio_ods.py` en la línea final:
+
+```python
+# Cambiar de:
+app.launch(share=False)
+
+# A:
+app.launch(share=True)
+```
+
+Esto generará una URL pública accesible desde cualquier lugar por 72 horas.
+
+---
+
+## 📱 Uso de la Aplicación
+
+### Pantalla de Inicio
+
+Al abrir la aplicación, verás:
+
+1. **Título principal** con descripción
+2. **Estadísticas generales** en tarjeta destacada
+3. **Top 3 ODS** más relevantes
+4. **Top 5 indicadores** en tabla
+5. **Guía de uso** paso a paso
+
+### Navegación por Pestañas
+
+#### 🏠 **Inicio**
+- Dashboard con resumen ejecutivo
+- Métricas clave del análisis
+- Recomendaciones de exploración
+
+#### 📦 **1. Box Plot**
+- Distribución de similaridad por ODS
+- Clic en "🔄 Generar Visualización"
+- Explicación a la derecha
+- Gráfico interactivo a la izquierda
+
+#### 🔥 **2. Heatmap**
+- Mapa de calor ODS × Ranking
+- Imagen estática de alta resolución
+- Interpretación de colores
+
+#### 🌐 **3. Scatter 3D**
+- Exploración tridimensional
+- **Rotar**: Arrastra con el mouse
+- **Zoom**: Scroll o rueda del mouse
+- **Hover**: Ver detalles de cada punto
+
+#### 🕸️ **4. Radar Chart**
+- Perfil circular de ODS
+- Dos polígonos superpuestos
+- Ideal para presentaciones
+
+#### ☀️ **5. Sunburst**
+- Jerarquía ODS → Indicadores
+- **Clic**: Zoom en segmento
+- Tamaño proporcional a similaridad
+
+#### 🏆 **6. Top Indicadores**
+- Top 5 por cada ODS
+- 17 paneles (uno por ODS)
+- Scroll vertical para explorar todos
+
+#### 🌊 **7. Stream Graph**
+- Evolución de contribución
+- Áreas apiladas al 100%
+- Cambios de dominancia
+
+#### 🎻 **8. Violin Plot**
+- Distribución detallada
+- Densidad de probabilidad
+- Detecta patrones complejos
+
+#### 📊 **9. Dashboard**
+- 4 paneles integrados
+- Vista 360° del análisis
+- Validación del sistema
+
+#### 🔀 **10. Matriz Transición**
+- Presencia por cuartiles
+- Consistencia de ODS
+- Análisis de dominancia
+
+#### 📈 **Estadísticas**
+- Análisis estadístico completo
+- Tablas detalladas por ODS
+- Validación de correlaciones
+
+---
+
+## 🎨 Personalización
+
+### Cambiar Colores
+
+Editar en `app_gradio_ods.py`:
+
+```python
+# Línea ~35 - Tema de colores
+theme=gr.themes.Soft(
+    primary_hue="blue",      # Cambiar a: "green", "red", "purple", etc.
+    secondary_hue="cyan",    # Cambiar a: "teal", "orange", "pink", etc.
+    neutral_hue="slate"      # Cambiar a: "gray", "zinc", "stone", etc.
+)
+```
+
+### Cambiar Puerto
+
+```python
+# Línea final - Configuración del servidor
+app.launch(
+    server_port=7860,  # Cambiar a: 8000, 8080, 3000, etc.
+)
+```
+
+### Agregar Autenticación
+
+```python
+# Línea final - Añadir usuario/contraseña
+app.launch(
+    auth=("usuario", "contraseña"),  # Credenciales de acceso
+    auth_message="Ingrese sus credenciales para acceder"
+)
+```
+
+### Modificar Explicaciones
+
+Editar las funciones `tab_vizN()` en el archivo:
+
+```python
+def tab_viz1():
+    # ...
+    explicacion = """
+    ## Tu título personalizado
+    
+    Tu texto explicativo aquí...
+    """
+    # ...
+```
+
+---
+
+## 🔧 Solución de Problemas
+
+### Problema 1: "ModuleNotFoundError: No module named 'gradio'"
+
+**Solución:**
+```bash
+pip install gradio --break-system-packages
+```
+
+### Problema 2: "Address already in use"
+
+**Causa:** El puerto 7860 ya está siendo usado
+
+**Solución A - Cambiar puerto:**
+```python
+app.launch(server_port=8080)  # Usar otro puerto
+```
+
+**Solución B - Cerrar proceso existente:**
+```bash
+lsof -ti:7860 | xargs kill -9
+```
+
+### Problema 3: "⚠️ Error: No se pudieron cargar los datos"
+
+**Causa:** Ruta incorrecta del archivo de datos
+
+**Solución:**
+```python
+# Editar línea ~49 en app_gradio_ods.py
+RUTA_DATOS = '/ruta/correcta/a/indicadores_markdown.txt'
+```
+
+### Problema 4: Las visualizaciones no se cargan
+
+**Causa:** Falta el archivo `visualizaciones_ods.py`
+
+**Solución:**
+```bash
+# Asegurarse de tener ambos archivos en el mismo directorio
+ls -la app_gradio_ods.py visualizaciones_ods.py
+```
+
+### Problema 5: Error de memoria con muchos datos
+
+**Solución - Limitar datos:**
+```python
+# Editar en cargar_datos()
+df = df.sample(n=1000)  # Muestra de 1000 registros
+```
+
+### Problema 6: La app no se abre automáticamente
+
+**Solución:**
+```bash
+# Abrir manualmente en navegador
+google-chrome http://127.0.0.1:7860  # Chrome
+firefox http://127.0.0.1:7860        # Firefox
+open http://127.0.0.1:7860           # macOS
+```
+
+---
+
+## 📊 Capturas de Pantalla
+
+### Vista del Dashboard de Inicio
+```
+┌─────────────────────────────────────────────────────┐
+│  📊 Sistema de Visualización ODS                     │
+│  Análisis de Similaridad de Indicadores             │
+│                                                      │
+│  📈 Estadísticas Generales                           │
+│  ┌──────────────────────────────────────────────┐   │
+│  │ Total indicadores: 244                       │   │
+│  │ ODS cubiertos: 17/17 (100%)                  │   │
+│  │ Similaridad promedio: 0.9050                 │   │
+│  │ Correlación: -0.9837 ✅                       │   │
+│  └──────────────────────────────────────────────┘   │
+│                                                      │
+│  🏆 Top 3 ODS Más Relevantes                        │
+│  1. ODS 17: 0.9223                                  │
+│  2. ODS 16: 0.9183                                  │
+│  3. ODS 9: 0.9199                                   │
+└─────────────────────────────────────────────────────┘
+```
+
+### Vista de Visualización Individual
+```
+┌─────────────────────────────────────────────────────┐
+│  [Pestaña]  📦 1. Box Plot                          │
+├─────────────────────┬───────────────────────────────┤
+│                     │  ## 📦 Diagrama de Caja      │
+│   [Gráfico          │                               │
+│    Interactivo      │  ### ¿Qué muestra?           │
+│    Plotly]          │  Esta visualización...        │
+│                     │                               │
+│                     │  ### ¿Cómo leerlo?           │
+│                     │  - Línea central: Mediana    │
+│  [🔄 Generar]       │  - Caja: Rango IQR           │
+└─────────────────────┴───────────────────────────────┘
+```
+
+---
+
+## 🌐 Compartir y Colaborar
+
+### Opción 1: Compartir en Red Local
+
+```python
+# Permite acceso desde otras computadoras en la misma red
+app.launch(
+    server_name="0.0.0.0",  # Ya está configurado por defecto
+)
+```
+
+**Acceso desde otra computadora:**
+```
+http://[IP-DEL-SERVIDOR]:7860
+```
+
+### Opción 2: Compartir Públicamente (72 horas)
+
+```python
+app.launch(share=True)
+```
+
+**Resultado:**
+```
+Running on local URL:  http://127.0.0.1:7860
+Running on public URL: https://abc123xyz.gradio.live
+
+This share link expires in 72 hours.
+```
+
+### Opción 3: Deployar en la Nube
+
+#### **Hugging Face Spaces** (Gratis)
+
+1. Crear cuenta en huggingface.co
+2. Crear nuevo Space
+3. Subir archivos:
+   - `app_gradio_ods.py`
+   - `visualizaciones_ods.py`
+   - `indicadores_markdown.txt`
+   - `requirements.txt`
+
+**requirements.txt:**
+```
+gradio==5.49.1
+pandas
+numpy
+matplotlib
+seaborn
+plotly
+```
+
+4. Tu app estará en: `https://huggingface.co/spaces/[tu-usuario]/[nombre-app]`
+
+---
+
+## 📚 Estructura de Archivos
+
+```
+proyecto/
+│
+├── app_gradio_ods.py              # ⭐ Aplicación principal
+├── visualizaciones_ods.py         # Funciones de visualización
+├── indicadores_markdown.txt        # Datos de entrada
+│
+├── GUIA_APP_GRADIO.md             # 📖 Esta guía
+├── README.md                       # Índice general
+│
+└── outputs/                        # Visualizaciones generadas
+    ├── viz1_boxplot_ods.html
+    ├── viz2_heatmap.png
+    └── ...
+```
+
+---
+
+## 🎓 Casos de Uso Avanzados
+
+### Caso 1: Integrar con otros datos
+
+```python
+# En app_gradio_ods.py, añadir nuevo tab
+with gr.Tab("📁 Cargar Datos"):
+    file_upload = gr.File(label="Subir archivo CSV/TXT")
+    btn_load = gr.Button("Cargar")
+    
+    def cargar_nuevos_datos(file):
+        df = pd.read_csv(file.name)
+        # Procesar y visualizar
+        return "✓ Datos cargados"
+    
+    btn_load.click(cargar_nuevos_datos, file_upload, output_text)
+```
+
+### Caso 2: Exportar visualizaciones
+
+```python
+# Añadir botones de descarga
+with gr.Row():
+    btn_download_html = gr.Button("📥 Descargar HTML")
+    btn_download_png = gr.Button("📥 Descargar PNG")
+
+def exportar_viz(fig, formato):
+    if formato == "html":
+        fig.write_html("visualizacion.html")
+        return "visualizacion.html"
+    else:
+        fig.write_image("visualizacion.png")
+        return "visualizacion.png"
+```
+
+### Caso 3: Filtros dinámicos
+
+```python
+# Añadir controles interactivos
+with gr.Row():
+    ods_select = gr.Dropdown(
+        choices=list(range(1, 18)),
+        label="Filtrar por ODS",
+        multiselect=True
+    )
+    slider_sim = gr.Slider(
+        minimum=0.85,
+        maximum=0.95,
+        value=0.90,
+        label="Umbral de similaridad"
+    )
+
+def filtrar_datos(ods_list, umbral):
+    df_filtrado = df_global[
+        (df_global['ods_id'].isin(ods_list)) & 
+        (df_global['similaridad_cos'] >= umbral)
+    ]
+    return generar_visualizacion(df_filtrado)
+```
+
+---
+
+## 🔐 Seguridad y Buenas Prácticas
+
+### Recomendaciones
+
+1. ✅ **No exponer datos sensibles** en la app pública
+2. ✅ **Usar autenticación** si compartes públicamente
+3. ✅ **Limitar acceso** a redes confiables
+4. ✅ **Validar inputs** del usuario
+5. ✅ **Mantener actualizado** Gradio y dependencias
+
+### Autenticación Básica
+
+```python
+app.launch(
+    auth=[("usuario1", "pass1"), ("usuario2", "pass2")],
+    auth_message="Acceso restringido - Ingrese credenciales"
+)
+```
+
+### Variables de Entorno
+
+```python
+import os
+
+# Usar variables de entorno para credenciales
+usuario = os.getenv("APP_USERNAME", "admin")
+password = os.getenv("APP_PASSWORD", "secret")
+
+app.launch(auth=(usuario, password))
+```
+
+---
+
+## 📞 Soporte y Recursos
+
+### Documentación Oficial
+- **Gradio**: https://www.gradio.app/docs
+- **Plotly**: https://plotly.com/python/
+- **Pandas**: https://pandas.pydata.org/docs/
+
+### Comunidad
+- **Gradio Discord**: https://discord.gg/gradio
+- **Hugging Face Forums**: https://discuss.huggingface.co/
+
+### Archivos Relacionados
+- `README.md` - Índice general del proyecto
+- `GUIA_VISUALIZACIONES_ODS.md` - Explicación de visualizaciones
+- `DOCUMENTACION_TECNICA_CODIGO.md` - Código técnico explicado
+- `GUIA_USO_RAPIDO.md` - Casos prácticos
+
+---
+
+## 🎉 Características Futuras (Roadmap)
+
+### En Desarrollo
+- [ ] Comparación de múltiples iniciativas
+- [ ] Exportación de reportes en PDF
+- [ ] Análisis de series temporales
+- [ ] Integración con APIs de ODS oficiales
+
+### Planeado
+- [ ] Modo oscuro / claro
+- [ ] Internacionalización (ES, EN, FR)
+- [ ] Chat con IA para interpretación
+- [ ] Dashboard personalizable
+
+---
+
+## 📄 Licencia
+
+Este proyecto es de código abierto. Consulta el archivo LICENSE para más detalles.
+
+---
+
+## 🙏 Agradecimientos
+
+Desarrollado con:
+- **Python** - Lenguaje de programación
+- **Gradio** - Framework de aplicaciones web
+- **Plotly** - Visualizaciones interactivas
+- **Pandas** - Análisis de datos
+- **Matplotlib/Seaborn** - Gráficos estáticos
+
+---
+
+## 📬 Contacto
+
+¿Preguntas? ¿Sugerencias? ¿Encontraste un bug?
+
+- 📧 Email: [tu-email@ejemplo.com]
+- 💬 Issues: [URL del repositorio]
+- 📖 Wiki: [URL de la wiki]
+
+---
+
+**¡Disfruta explorando las visualizaciones ODS! 📊🌍✨**
+
+---
+
+*Última actualización: Noviembre 2025*

src/app.py

@@ -0,0 +1,1254 @@
+"""
+APLICACIÓN WEB GRADIO - VISUALIZACIONES ODS
+============================================
+
+Aplicación interactiva que permite explorar las 10 visualizaciones
+de análisis de similaridad ODS a través de una interfaz web amigable.
+
+Características:
+- Interfaz con pestañas para cada visualización
+- Explicaciones integradas para público general
+- Visualizaciones interactivas (HTML) y estáticas (PNG)
+- Estadísticas en tiempo real
+- Diseño responsivo y profesional
+
+Autor: Sistema de Visualización ODS
+Fecha: Noviembre 2025
+"""
+
+import gradio as gr
+import pandas as pd
+import numpy as np
+from pathlib import Path
+import plotly.graph_objects as go
+import plotly.express as px
+from plotly.subplots import make_subplots
+import matplotlib.pyplot as plt
+import seaborn as sns
+from modelos_nlp_db import search
+
+# Importar funciones de visualización
+import sys
+# sys.path.insert(0, '/home/claude')
+from visualizaciones_ods import (
+    cargar_datos,
+    viz_1_distribucion_por_ods,
+    viz_2_heatmap_ods_ranking,
+    viz_3_scatter_3d_interactivo,
+    viz_4_radar_chart_ods,
+    viz_5_sunburst_jerarquia,
+    viz_6_top_indicadores_por_ods,
+    viz_7_streamgraph_similaridad,
+    viz_8_violin_plot_ods,
+    viz_9_dashboard_metricas,
+    viz_10_matriz_transicion,
+    analisis_estadistico
+)
+
+# ============================================================================
+# CONFIGURACIÓN GLOBAL
+# ============================================================================
+import os
+import base64
+
+levels = ['ODS_ID','META_ID','INDICADOR_ID']
+
+
+def convertir_logo_a_base64(logo_path):
+    """Convierte un logo a base64 para incrustar en HTML"""
+    # try:
+    #     rutas_posibles = [
+    #         logo_path,
+    #         os.path.join(os.path.dirname(__file__), logo_path),
+    #         os.path.join('/mnt/user-data/outputs', logo_path),
+    #     ]
+        
+    #     for ruta in rutas_posibles:
+    #         if os.path.exists(ruta):
+    #             with open(ruta, "rb") as image_file:
+    #                 encoded = base64.b64encode(image_file.read()).decode()
+    #                 return f"data:image/png;base64,{encoded}"
+        
+    #     print(f"⚠️  Logo no encontrado: {logo_path}")
+    #     return ""
+    # except Exception as e:
+    #     print(f"⚠️  Error al cargar logo: {e}")
+    #     return ""
+    ruta = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /archivos_trabajo/app_visualizaciones/inputs/img'
+    with open(f'{ruta}/{logo_path}', "rb") as image_file:
+      encoded = base64.b64encode(image_file.read()).decode()
+      return f"data:image/png;base64,{encoded}"
+
+
+
+# Cargar logos una sola vez al iniciar
+print("Cargando logos institucionales...")
+LOGO_GOBIERNO = convertir_logo_a_base64("GOBIERNO-DE-COLOMBIA_HORIZONTAL.png")
+LOGO_FONDO = convertir_logo_a_base64("LOGO MPTF (ESP).png")
+
+
+if LOGO_GOBIERNO and LOGO_FONDO:
+    print("✅ Logos cargados correctamente")
+else:
+    print("⚠️  Algunos logos no se pudieron cargar")
+
+dict_logos = {
+  'gobierno': convertir_logo_a_base64("GOBIERNO-DE-COLOMBIA_HORIZONTAL.png"),
+  'fondo_un': convertir_logo_a_base64("LOGO MPTF (ESP).png"),
+  'ods_1': convertir_logo_a_base64("S-WEB-Goal-01.png"),
+  'ods_2': convertir_logo_a_base64("S-WEB-Goal-02.png"),
+  'ods_3': convertir_logo_a_base64("S-WEB-Goal-03.png"),
+  'ods_4': convertir_logo_a_base64("S-WEB-Goal-04.png"),
+  'ods_5': convertir_logo_a_base64("S-WEB-Goal-05.png"),
+  'ods_6': convertir_logo_a_base64("S-WEB-Goal-06.png"),
+  'ods_7': convertir_logo_a_base64("S-WEB-Goal-07.png"),
+  'ods_8': convertir_logo_a_base64("S-WEB-Goal-08.png"),
+  'ods_9': convertir_logo_a_base64("S-WEB-Goal-09.png"),
+  'ods_10': convertir_logo_a_base64("S-WEB-Goal-10.png"),
+  'ods_11': convertir_logo_a_base64("S-WEB-Goal-11.png"),
+  'ods_12': convertir_logo_a_base64("S-WEB-Goal-12.png"),
+  'ods_13': convertir_logo_a_base64("S-WEB-Goal-13.png"),
+  'ods_14': convertir_logo_a_base64("S-WEB-Goal-14.png"),
+  'ods_15': convertir_logo_a_base64("S-WEB-Goal-15.png"),
+  'ods_16': convertir_logo_a_base64("S-WEB-Goal-16.png"),
+  'ods_17': convertir_logo_a_base64("S-WEB-Goal-17.png"),  
+}
+
+# Ruta al archivo de datos
+# # RUTA_DATOS = '/mnt/user-data/uploads/indicadores_markdown.txt'
+# RUTA_DATOS = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /archivos_trabajo/app_visualizaciones/indicadores_markdown.txt'
+
+# # Cargar datos globalmente para toda la app
+# try:
+#     df_global = cargar_datos(RUTA_DATOS)
+DATOS_CARGADOS = True
+#     print(f"✓ Datos cargados: {len(df_global)} registros")
+# except Exception as e:
+#     df_global = None
+#     DATOS_CARGADOS = False
+#     print(f"✗ Error al cargar datos: {e}")
+
+
+
+# Estilos CSS personalizados
+CUSTOM_CSS = """
+.gradio-container {
+    font-family: 'Arial', sans-serif;
+}
+.explanation-box {
+    background-color: #E8F4F8;
+    padding: 20px;
+    border-radius: 10px;
+    border-left: 5px solid #2E5090;
+    margin: 10px 0;
+}
+.stats-box {
+    background-color: #FFF9E6;
+    padding: 15px;
+    border-radius: 8px;
+    border: 2px solid #FFD700;
+    margin: 10px 0;
+}
+.important-box {
+    background-color: #FFE6E6;
+    padding: 15px;
+    border-radius: 8px;
+    border-left: 5px solid #C00000;
+    margin: 10px 0;
+}
+h1, h2, h3 {
+    color: #2E5090;
+}
+.tab-nav button {
+    font-size: 16px;
+    padding: 10px 20px;
+}
+
+/* ESTILOS PARA HEADER CON LOGOS INSTITUCIONALES */
+.header-institucional {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 40px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
+    border-bottom: 4px solid #003DA5;
+    margin-bottom: 25px;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+}
+
+.logo-institucional {
+    height: 40px;
+    width: auto;
+    object-fit: contain;
+}
+
+.titulo-institucional {
+    flex: 1;
+    text-align: center;
+    padding: 0 30px;
+}
+
+.titulo-institucional h1 {
+    margin: 0;
+    color: #003DA5 !important;
+    font-size: 28px;
+    font-weight: 700;
+}
+
+.logo-ods-tbl {
+    height: 60px;
+    width: auto;
+    object-fit: contain;
+}
+
+@media (max-width: 768px) {
+    .header-institucional {
+        padding: 15px 20px;
+        flex-direction: column;
+        gap: 15px;
+    }
+    .logo-institucional {
+        height: 50px;
+    }
+}
+"""
+
+# ============================================================================
+# FUNCIONES DE CONVERSIÓN DE FIGURAS
+# ============================================================================
+
+def plotly_to_html(fig):
+    """Convierte figura Plotly a HTML para mostrar en Gradio"""
+    return fig.to_html(include_plotlyjs='cdn', full_html=False)
+
+def matplotlib_to_file(fig, filename):
+    """Convierte figura Matplotlib a archivo temporal"""
+    import tempfile
+    import os
+    
+    # Crear directorio temporal si no existe
+    temp_dir = tempfile.gettempdir()
+    filepath = os.path.join(temp_dir, filename)
+    
+    # Guardar la figura
+    fig.savefig(filepath, format='png', dpi=150, bbox_inches='tight')
+    plt.close(fig)
+    
+    return filepath
+
+# ============================================================================
+# FUNCIONES PARA CADA PESTAÑA
+# ============================================================================
+
+def tab_inicio(df_ods, df_metas, df_indicador):
+# def tab_inicio():
+    """Pestaña de inicio con resumen general"""
+    if not DATOS_CARGADOS:
+        return "⚠️ Error: No se pudieron cargar los datos."
+    
+    # Estadísticas básicas
+    
+    total_ods = df_ods['ODS_ID'].nunique()
+    total_metas = df_metas['META_ID'].nunique()
+    total_indicadores = df_indicador['INDICADOR_ID'].nunique()
+    sim_media = df_ods['ods_similaridad_cos_normalized'].mean()
+    sim_max = df_ods['ods_similaridad_cos_normalized'].max()
+    sim_min = df_ods['ods_similaridad_cos_normalized'].min()
+    correlacion = df_ods['ods_rank'].corr(df_ods['ods_similaridad_cos_normalized'])
+    
+    # Top 4 ODS
+    top_ods = df_ods.nsmallest(4, 'ods_rank')[['ODS_ID','ods_rank','OBJETIVO','ods_similaridad_cos_normalized']]
+    top_ods['logo_id'] = top_ods['ODS_ID'].apply(lambda _: f"ods_{_}") 
+    # top_ods = df_ods.groupby('ODS_ID').agg({
+    #     'ods_similaridad_cos_normalized': 'mean'
+    # }).sort_values('ods_similaridad_cos_normalized', ascending=False).head(3)[['ods_similaridad_cos_normalized']]
+    
+    # Top ODS referencia
+    ods_ref = top_ods.ODS_ID
+
+    # Top 3 METAS
+    
+    top_metas = pd.DataFrame()
+    for i in ods_ref:
+      top_metas_lcl = df_metas[df_metas.ODS_ID == i]
+      top_metas_lcl = top_metas_lcl.nsmallest(2, 'meta_rank')[['META_ID','meta_rank','META','meta_similaridad_cos_normalized', 'ODS_ID']]
+      top_metas = pd.concat([top_metas, top_metas_lcl], axis=0)
+    top_metas['logo_id'] = top_metas['ODS_ID'].apply(lambda _: f"ods_{_}")
+    # top_metas = df_metas.groupby('META_ID').agg({
+    #     'meta_similaridad_cos_normalized': 'mean'
+    # }).sort_values('meta_similaridad_cos_normalized', ascending=False).head(5)[['META_ID','META','meta_similaridad_cos_normalized']]
+    
+    # Top 5 indicadores
+    top_indicador = pd.DataFrame()
+    for i in ods_ref:
+      top_indicador_lcl = df_indicador[df_indicador.ODS_ID == i]
+      top_indicador_lcl = top_indicador_lcl.nsmallest(2, 'indicador_rank')[['INDICADOR_ID', 'indicador_rank', 'INDICADOR', 'indicador_similaridad_cos_normalized', 'ODS_ID']]
+      top_indicador = pd.concat([top_indicador, top_indicador_lcl], axis=0)
+    top_indicador['logo_id'] = top_indicador['ODS_ID'].apply(lambda _: f"ods_{_}")
+    
+    
+    html = f"""
+    <div style="font-family: Arial, sans-serif; padding: 20px;">
+        <h1 style="color: #2E5090; text-align: center;">
+            📊 Sistema de Visualización ODS
+        </h1>
+        <h2 style="color: #4472C4; text-align: center;">
+            Análisis de Similaridad de Indicadores
+        </h2>
+        
+        <div class="stats-box" style="background-color: #E8F4F8; padding: 20px; border-radius: 10px; margin: 20px 0;">
+            <h3 style="color: #2E5090;">📈 Estadísticas Generales</h3>
+            <table style="width: 100%; border-collapse: collapse;">
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Total de indicadores analizados:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{total_indicadores}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>ODS cubiertos:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{total_ods}/17 (100%)</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Similaridad promedio:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{sim_media:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Rango de similaridad:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{sim_min:.4f} - {sim_max:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Correlación Rank-Similaridad:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right; color: {'green' if correlacion < -0.7 else 'orange'};">
+                        {correlacion:.4f} {'✅' if correlacion < -0.7 else '⚠️'}
+                    </td>
+                </tr>
+            </table>
+        </div>
+        
+        
+
+        <div class="important-box" style="background-color: #E6F7E6; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #28A745;">
+            <h3 style="color: #28A745;">🏆 Top 4 ODS Más Relevantes</h3>
+            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
+                <thead>
+                    <tr style="background-color: #FFD700;">
+                        <th style="padding: 10px; text-align: left;">Rank</th>
+                        <th style="padding: 10px; text-align: left;"> </th>
+                        <th style="padding: 10px; text-align: left;">ID</th>
+                        <th style="padding: 10px; text-align: left;">ODS</th>
+                        <!-- <th style="padding: 10px; text-align: center;">ODS</th> -->
+                        <th style="padding: 10px; text-align: right;">Similaridad</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''<tr>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;">{row['ods_rank']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><img src="{dict_logos[row['logo_id']]}" 
+                                                                                    alt="ODS {row['ODS_ID']}" 
+                                                                                    class="logo-ods-tbl"></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>{row['ODS_ID']}</strong></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: center;">{row['OBJETIVO']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{row['ods_similaridad_cos_normalized']:.4f}</td>
+                    </tr>''' for _, row in top_ods.iterrows()])}
+                </tbody>
+            </table>
+        </div>
+
+        <div class="important-box" style="background-color: #E6F7E6; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #FFD700;">
+            <h3 style="color: #FF8C00;">🎯 Top 5 Metas Más Relevantes</h3>
+            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
+                <thead>
+                    <tr style="background-color: #FFD700;">
+                        <th style="padding: 10px; text-align: left;">Rank</th>
+                        <th style="padding: 10px; text-align: left;"> </th>
+                        <th style="padding: 10px; text-align: left;">ID </th>
+                        <th style="padding: 10px; text-align: left;">Meta</th>
+                        <!-- <th style="padding: 10px; text-align: center;">ODS</th> -->
+                        <th style="padding: 10px; text-align: right;">Similaridad</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''<tr>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;">{row['meta_rank']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><img src="{dict_logos[row['logo_id']]}" 
+                                                                                    alt="ODS {row['ODS_ID']}" 
+                                                                                    class="logo-ods-tbl"></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>{row['META_ID']}</strong></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: center;">{row['META']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{row['meta_similaridad_cos_normalized']:.4f}</td>
+                    </tr>''' for _, row in top_metas.iterrows()])}
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="important-box" style="background-color: #FFF9E6; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #FFD700;">
+            <h3 style="color: #FF8C00;">🎯 Top 5 Indicadores Más Relevantes</h3>
+            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
+                <thead>
+                    <tr style="background-color: #FFD700;">
+                        <th style="padding: 10px; text-align: left;">Rank</th>
+                        <th style="padding: 10px; text-align: left;"> </th>
+                        <th style="padding: 10px; text-align: left;">ID </th>
+                        <th style="padding: 10px; text-align: left;">Indicador</th>
+                        <!-- <th style="padding: 10px; text-align: center;">ODS</th> -->
+                        <th style="padding: 10px; text-align: right;">Similaridad</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''<tr>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;">{row['indicador_rank']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><img src="{dict_logos[row['logo_id']]}" 
+                                                                                    alt="ODS {row['ODS_ID']}" 
+                                                                                    class="logo-ods-tbl"></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>{row['INDICADOR_ID']}</strong></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: center;">{row['INDICADOR']}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{row['indicador_similaridad_cos_normalized']:.4f}</td>
+                    </tr>''' for _, row in top_indicador.iterrows()])}
+                </tbody>
+            </table>
+        </div>
+        
+        <div style="background-color: #F0F0F0; padding: 20px; border-radius: 10px; margin: 20px 0;">
+            <h3 style="color: #2E5090;">📚 Cómo usar esta aplicación</h3>
+            <ol style="line-height: 1.8;">
+                <li><strong>Explora las pestañas:</strong> Cada pestaña contiene una visualización diferente</li>
+                <li><strong>Lee las explicaciones:</strong> Cada gráfica incluye una guía de interpretación</li>
+                <li><strong>Interactúa:</strong> Las visualizaciones HTML permiten zoom, hover y exploración</li>
+                <li><strong>Descarga:</strong> Puedes descargar las imágenes desde las pestañas</li>
+            </ol>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; padding: 20px; background-color: #E8F4F8; border-radius: 10px;">
+            <p style="font-size: 18px; color: #2E5090;">
+                <strong>¡Comienza explorando las visualizaciones en las pestañas superiores!</strong>
+            </p>
+            <p style="color: #666;">
+                Recomendación: Empieza con el "Dashboard Integrado" para una vista general
+            </p>
+        </div>
+    </div>
+    """
+    return html
+
+def tab_viz1(df_ods, df_metas, df_indicador):
+# def tab_viz1():
+    """Visualización 1: Box Plot por ODS"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig1 = viz_1_distribucion_por_ods(df_ods, 'ODS_ID', 'ods_similaridad_cos_normalized', 'ODS')
+    fig2 = viz_1_distribucion_por_ods(df_metas, 'META_ID', 'meta_similaridad_cos_normalized', 'META')
+    fig3 = viz_1_distribucion_por_ods(df_indicador, 'INDICADOR_ID', 'indicador_similaridad_cos_normalized', 'INDICADOR')
+    
+    explicacion = """
+    ## 📦 Diagrama de Caja por ODS
+    
+    ### ¿Qué muestra?
+    Esta visualización muestra cómo se distribuyen los valores de similaridad para cada uno de los 17 ODS.
+    
+    ### ¿Cómo leerlo?
+    - **Línea central**: Mediana (valor del medio)
+    - **Caja**: Rango intercuartílico (Q1 a Q3)
+    - **Líneas extendidas**: Valores mínimos y máximos normales
+    - **Puntos fuera**: Valores atípicos (outliers)
+    
+    ### Interpretación:
+    - ✅ **Cajas altas**: Mucha variación entre indicadores del ODS
+    - ✅ **Cajas pequeñas**: Indicadores consistentes
+    - ✅ **Mediana alta**: ODS muy relacionado con la iniciativa
+    - ✅ **Puntos aislados**: Indicadores especialmente relevantes
+    
+    ### 💡 Consejo:
+    Busca ODS con medianas altas y cajas pequeñas para identificar objetivos con indicadores consistentemente relevantes.
+    """
+    
+    return fig1, fig2, fig3, explicacion
+
+def tab_viz2(df_global):
+# def tab_viz2():
+    """Visualización 2: Heatmap ODS × Ranking"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_2_heatmap_ods_ranking(df_global)
+    filepath = matplotlib_to_file(fig, 'viz2_heatmap.png')
+    
+    explicacion = """
+    ## 🔥 Mapa de Calor: ODS × Ranking
+    
+    ### ¿Qué muestra?
+    Matriz bidimensional que cruza los 17 ODS (filas) con deciles de ranking (columnas), 
+    mostrando la similaridad promedio en cada celda.
+    
+    ### ¿Cómo leerlo?
+    - 🔴 **Colores cálidos** (rojo/naranja): Alta similaridad
+    - 🔵 **Colores fríos** (verde/azul): Baja similaridad
+    - **D1 a D10**: Desde los más relevantes (D1) hasta los menos (D10)
+    
+    ### Interpretación:
+    - ✅ **Fila roja completa**: ODS relevante en todos los rangos
+    - ✅ **Columna roja**: Varios ODS relevantes en esa posición
+    - ✅ **Diagonal descendente**: Patrón esperado (a mayor rank, menor similaridad)
+    - ✅ **Rojo en D1-D2**: Los ODS más críticos
+    
+    ### 💡 Consejo:
+    Identifica rápidamente qué ODS dominan en las posiciones altas del ranking.
+    """
+    
+    return filepath, explicacion
+
+def tab_viz3(df_global):
+# def tab_viz3():
+    """Visualización 3: Scatter 3D Interactivo"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_3_scatter_3d_interactivo(df_global)
+    
+    explicacion = """
+    ## 🌐 Gráfico 3D Interactivo
+    
+    ### ¿Qué muestra?
+    Visualización tridimensional donde cada punto representa un indicador.
+    
+    ### Las tres dimensiones:
+    - **Eje X**: ODS ID (1-17)
+    - **Eje Y**: Número de sub-indicador
+    - **Eje Z**: Similaridad (altura del punto)
+    - **Tamaño**: Los más grandes = más relevantes
+    - **Color**: Cada ODS tiene su color
+    
+    ### Interactividad:
+    - 🔄 **Rotar**: Arrastra con el mouse
+    - 🔍 **Zoom**: Scroll o pinch
+    - 👆 **Hover**: Pasa el mouse sobre puntos
+    
+    ### Interpretación:
+    - ✅ **Puntos altos**: Alta similaridad
+    - ✅ **Clusters de color**: Grupo de indicadores relacionados
+    - ✅ **Puntos grandes y altos**: Los más importantes
+    
+    ### 💡 Consejo:
+    Rota el gráfico para descubrir patrones ocultos y agrupaciones de indicadores.
+    """
+    
+    return fig, explicacion
+
+def tab_viz4(df_global):
+# def tab_viz4():
+    """Visualización 4: Radar Chart"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_4_radar_chart_ods(df_global)
+    
+    explicacion = """
+    ## 🕸️ Gráfico de Radar (Perfil ODS)
+    
+    ### ¿Qué muestra?
+    Gráfico circular que muestra el 'perfil ODS' de tu iniciativa con dos métricas.
+    
+    ### Cómo leerlo:
+    - 🔵 **Polígono azul**: Similaridad promedio por ODS
+    - 🔴 **Polígono rojo**: Similaridad máxima (mejor indicador)
+    - **Distancia del centro**: Mayor distancia = mayor similaridad
+    
+    ### Interpretación:
+    - ✅ **Picos hacia afuera**: ODS muy relevantes
+    - ✅ **Valles hacia dentro**: ODS menos relacionados
+    - ✅ **Forma circular**: Iniciativa equilibrada
+    - ✅ **Forma irregular**: Especialización en ODS específicos
+    - ✅ **Gap azul-rojo grande**: Indicador estrella en ese ODS
+    
+    ### 💡 Consejo:
+    Ideal para presentaciones ejecutivas. Muestra de un vistazo el perfil completo de alineación ODS.
+    """
+    
+    return fig, explicacion
+
+def tab_viz5(df_global):
+# def tab_viz5():
+    """Visualización 5: Sunburst"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_5_sunburst_jerarquia(df_global)
+    
+    explicacion = """
+    ## ☀️ Diagrama de Sol (Sunburst)
+    
+    ### ¿Qué muestra?
+    Diagrama circular jerárquico mostrando ODS (centro) → Indicadores (anillo exterior).
+    
+    ### Cómo leerlo:
+    - **Tamaño del segmento**: Proporcional a la similaridad
+    - **Color**: Gradiente (más oscuro = mayor similaridad)
+    - **Nivel 1 (centro)**: Los 17 ODS
+    - **Nivel 2 (exterior)**: Indicadores individuales
+    
+    ### Interactividad:
+    - 👆 **Click**: Zoom en un ODS específico
+    - 🔍 **Hover**: Ver código y valor del indicador
+    
+    ### Interpretación:
+    - ✅ **Segmentos grandes**: Indicadores muy relevantes
+    - ✅ **ODS ocupa mucho espacio**: Muchos indicadores relevantes
+    - ✅ **Colores oscuros**: Alta similaridad
+    
+    ### 💡 Consejo:
+    Excelente para visualizar la contribución relativa de cada indicador al total.
+    """
+    
+    return fig, explicacion
+
+def tab_viz6(df_global):
+# def tab_viz6():
+    """Visualización 6: Top Indicadores por ODS"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_6_top_indicadores_por_ods(df_global, top_n=5)
+    
+    explicacion = """
+    ## 🏆 Top 5 Indicadores por ODS
+    
+    ### ¿Qué muestra?
+    Barras horizontales con los 5 indicadores más relevantes de cada ODS.
+    
+    ### Cómo leerlo:
+    - **Longitud de barra**: Valor de similaridad
+    - **Primera barra**: El indicador más relevante
+    - **Color**: Gradiente por similaridad
+    - **Cada panel**: Un ODS diferente
+    
+    ### Interpretación:
+    - ✅ **Barra mucho más larga**: Indicador campeón
+    - ✅ **Barras parejas**: Varios indicadores igualmente relevantes
+    - ✅ **Comparación entre ODS**: Qué objetivo tiene mejores indicadores
+    
+    ### 💡 Consejo:
+    Perfecta para planificación estratégica. Te dice exactamente en qué indicadores enfocarte por cada ODS.
+    """
+    
+    return fig, explicacion
+
+def tab_viz7(df_global):
+# def tab_viz7():
+    """Visualización 7: Stream Graph"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_7_streamgraph_similaridad(df_global)
+    
+    explicacion = """
+    ## 🌊 Gráfico de Flujo (Stream Graph)
+    
+    ### ¿Qué muestra?
+    Áreas apiladas que muestran cómo cambia la contribución porcentual de cada ODS 
+    a lo largo del ranking.
+    
+    ### Cómo leerlo:
+    - **Eje horizontal**: Ranking agrupado (izq. = más relevante)
+    - **Eje vertical**: Porcentaje de contribución (suma 100%)
+    - **Ancho del color**: Porcentaje del ODS en ese rango
+    
+    ### Interpretación:
+    - ✅ **Color dominante izquierda**: ODS líder en indicadores relevantes
+    - ✅ **Cambio de color**: Transición de relevancia
+    - ✅ **Área ancha constante**: ODS presente en todo el ranking
+    - ✅ **Área que crece/decrece**: ODS relevante en ciertos rangos
+    
+    ### 💡 Consejo:
+    Si un ODS ocupa mucho espacio a la izquierda, domina entre los indicadores más relevantes.
+    """
+    
+    return fig, explicacion
+
+def tab_viz8(df_global):
+# def tab_viz8():
+    """Visualización 8: Violin Plot"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_8_violin_plot_ods(df_global)
+    
+    explicacion = """
+    ## 🎻 Gráfico de Violín
+    
+    ### ¿Qué muestra?
+    Similar al diagrama de caja pero con más detalle. Muestra la 'forma' completa 
+    de la distribución de similaridad por ODS.
+    
+    ### Cómo leerlo:
+    - **Ancho del violín**: Concentración de valores
+    - **Caja interior**: Mediana y cuartiles
+    - **Línea horizontal**: Media (promedio)
+    
+    ### Concepto clave:
+    El ancho representa la **densidad de probabilidad**: donde el violín es más ancho, 
+    es más probable encontrar indicadores con esos valores.
+    
+    ### Interpretación:
+    - ✅ **Violín ancho en un punto**: Muchos indicadores similares
+    - ✅ **Dos ensanchamientos**: Dos grupos distintos
+    - ✅ **Violín delgado**: Pocos indicadores en ese rango
+    - ✅ **Forma simétrica**: Distribución equilibrada
+    
+    ### 💡 Consejo:
+    Detecta distribuciones complejas que el diagrama de caja no puede mostrar.
+    """
+    
+    return fig, explicacion
+
+def tab_viz9(df_global):
+# def tab_viz9():
+    """Visualización 9: Dashboard Integrado"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_9_dashboard_metricas(df_global)
+    
+    explicacion = """
+    ## 📊 Dashboard Integrado (4 Paneles)
+    
+    ### Panel 1 (Superior Izquierdo): Top 10 Indicadores
+    Barras con los 10 indicadores más relevantes del análisis completo.
+    
+    ### Panel 2 (Superior Derecho): Estadísticas por ODS
+    Tabla con media, desviación estándar, mínimo, máximo y cantidad por ODS.
+    
+    ### Panel 3 (Inferior Izquierdo): Histograma Global
+    Distribución de frecuencias de todos los valores de similaridad.
+    
+    ### Panel 4 (Inferior Derecho): Correlación Rank-Similaridad
+    Scatter plot con línea de tendencia. **CRÍTICO para validación del sistema**.
+    
+    ### Validación:
+    - ✅ **Línea descendente**: Sistema funcionando correctamente
+    - ✅ **Correlación < -0.7**: Excelente
+    - ⚠️ **Correlación > -0.4**: Revisar sistema
+    
+    ### 💡 Consejo:
+    Este debe ser tu punto de partida. Vista 360° del análisis completo.
+    """
+    
+    return fig, explicacion
+
+def tab_viz10(df_global):
+# def tab_viz10():
+    """Visualización 10: Matriz de Transición"""
+    if not DATOS_CARGADOS:
+        return None, "⚠️ Error: No se pudieron cargar los datos."
+    
+    fig = viz_10_matriz_transicion(df_global)
+    filepath = matplotlib_to_file(fig, 'viz10_matriz_transicion.png')
+    
+    explicacion = """
+    ## 🔀 Matriz de Transición por Cuartiles
+    
+    ### ¿Qué muestra?
+    Mapa de calor que muestra el porcentaje de cada ODS presente en los 4 cuartiles del ranking.
+    
+    ### Cómo leerlo:
+    - **Filas**: Los 17 ODS
+    - **Columnas**: Q1 (Top 25%), Q2, Q3, Q4 (Bottom 25%)
+    - **Valores**: Porcentaje de presencia del ODS
+    - **Colores**: Naranja/rojo = alta presencia
+    
+    ### Interpretación:
+    - ✅ **Rojo intenso en Q1**: ODS crítico (domina rankings altos)
+    - ✅ **Colores uniformes**: ODS consistente en todo el ranking
+    - ✅ **Concentración en un cuartil**: ODS especializado
+    - ✅ **Claro en Q1, oscuro en Q4**: Más relevante en posiciones bajas
+    
+    ### 💡 Consejo:
+    Analiza la consistencia de relevancia por ODS. Alta presencia en Q1 = crítico para la iniciativa.
+    """
+    
+    return filepath, explicacion
+
+def tab_estadisticas(df_global):
+# def tab_estadisticas():
+    """Pestaña con análisis estadístico detallado"""
+    if not DATOS_CARGADOS:
+        return "⚠️ Error: No se pudieron cargar los datos."
+    
+    # Estadísticas globales
+    stats = df_global['similaridad_cos'].describe()
+    correlacion = df_global['rank'].corr(df_global['similaridad_cos'])
+    
+    # Por ODS
+    stats_ods = df_global.groupby('ods_id')['similaridad_cos'].agg([
+        ('count', 'count'),
+        ('mean', 'mean'),
+        ('std', 'std'),
+        ('min', 'min'),
+        ('max', 'max')
+    ]).round(4)
+    
+    # Top 50
+    top_50_ods = df_global.nsmallest(50, 'rank')['ods_id'].value_counts()
+    
+    html = f"""
+    <div style="font-family: Arial, sans-serif; padding: 20px;">
+        <h1 style="color: #2E5090;">📈 Análisis Estadístico Detallado</h1>
+        
+        <div class="stats-box" style="background-color: #E8F4F8; padding: 20px; border-radius: 10px; margin: 20px 0;">
+            <h2 style="color: #2E5090;">1. Estadísticas Globales</h2>
+            <table style="width: 100%; border-collapse: collapse;">
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Cantidad de datos:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['count']:.0f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Media:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['mean']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Desviación Estándar:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['std']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Mínimo:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['min']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Q1 (Percentil 25):</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['25%']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Mediana (Q2):</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['50%']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Q3 (Percentil 75):</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['75%']:.4f}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>Máximo:</strong></td>
+                    <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{stats['max']:.4f}</td>
+                </tr>
+            </table>
+        </div>
+        
+        <div class="explanation-box" style="background-color: #{'E6F7E6' if correlacion < -0.7 else 'FFF9E6'}; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #{'28A745' if correlacion < -0.7 else 'FFD700'};">
+            <h2 style="color: #{'28A745' if correlacion < -0.7 else 'FF8C00'};">2. Validación del Sistema</h2>
+            <p style="font-size: 18px;"><strong>Correlación Rank vs Similaridad:</strong> {correlacion:.4f}</p>
+            <p><strong>Interpretación:</strong> 
+            {
+                "✅ Excelente - Sistema de ranking muy confiable" if correlacion < -0.9 else
+                "✅ Muy bueno - Sistema de ranking confiable" if correlacion < -0.7 else
+                "⚠️ Aceptable - Sistema funciona pero puede mejorarse" if correlacion < -0.4 else
+                "❌ Problema - Revisar cálculo de similaridad o ranking"
+            }
+            </p>
+            <p><em>Una correlación negativa fuerte indica que a mayor ranking (menos relevante), menor es la similaridad, lo cual es el comportamiento esperado.</em></p>
+        </div>
+        
+        <div class="stats-box" style="background-color: #FFF9E6; padding: 20px; border-radius: 10px; margin: 20px 0;">
+            <h2 style="color: #2E5090;">3. Estadísticas por ODS</h2>
+            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+                <thead>
+                    <tr style="background-color: #FFD700;">
+                        <th style="padding: 10px; text-align: left;">ODS</th>
+                        <th style="padding: 10px; text-align: right;">Count</th>
+                        <th style="padding: 10px; text-align: right;">Media</th>
+                        <th style="padding: 10px; text-align: right;">Std</th>
+                        <th style="padding: 10px; text-align: right;">Min</th>
+                        <th style="padding: 10px; text-align: right;">Max</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''<tr>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>ODS {idx}</strong></td>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">{int(row['count'])}</td>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">{row['mean']:.4f}</td>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">{row['std']:.4f}</td>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">{row['min']:.4f}</td>
+                        <td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">{row['max']:.4f}</td>
+                    </tr>''' for idx, row in stats_ods.iterrows()])}
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="explanation-box" style="background-color: #E8F4F8; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 5px solid #2E5090;">
+            <h2 style="color: #2E5090;">4. ODS Más Representados en Top 50</h2>
+            <table style="width: 100%; border-collapse: collapse;">
+                <thead>
+                    <tr style="background-color: #4472C4; color: white;">
+                        <th style="padding: 10px; text-align: left;">ODS</th>
+                        <th style="padding: 10px; text-align: right;">Cantidad</th>
+                        <th style="padding: 10px; text-align: right;">Porcentaje</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {''.join([f'''<tr>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd;"><strong>ODS {idx}</strong></td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{count}</td>
+                        <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">{count/50*100:.1f}%</td>
+                    </tr>''' for idx, count in top_50_ods.head(10).items()])}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    """
+    
+    return html
+
+# ============================================================================
+# CONSTRUCCIÓN DE LA APLICACIÓN GRADIO
+# ============================================================================
+
+def crear_app():
+    """Crea y configura la aplicación Gradio completa"""
+    
+    with gr.Blocks(
+        title="Sistema de Visualización ODS",
+        # theme=gr.themes.Soft(
+        #     primary_hue="indigo",
+        #     secondary_hue="orange",
+        #     neutral_hue="slate"
+        # ),
+        theme="light",
+        css=CUSTOM_CSS
+    ) as app:
+
+        gr.HTML(f"""
+        <div class="header-institucional">
+            <div style="flex: 0 0 auto;">
+                <img src="{dict_logos['gobierno']}" 
+                     alt="Gobierno de Colombia" 
+                     class="logo-institucional">
+            </div>
+            <div class="titulo-institucional">
+                <h1></h1>
+                <p> </p>
+            </div>
+            <div style="flex: 0 0 auto;">
+                <img src="{dict_logos['fondo_un']}" 
+                     alt="Fondo Multidonante de las Naciones Unidas" 
+                     class="logo-institucional">
+            </div>
+        </div>
+        """)
+        
+        # Encabezado principal
+        gr.Markdown("""
+        # 📊 Voces ODS: Explora cómo tu voz conecta con los ODS
+        ### Explorador Interactivo
+        
+        *Voces ODS es una herramienta innovadora que traduce las narrativas de las comunidades en lenguaje de los Objetivos de Desarrollo Sostenible (ODS). Su propósito es visibilizar cómo las voces locales, las memorias colectivas como las iniciativas PATR y las experiencias territoriales se vinculan con las metas globales, facilitando el análisis e incidencia para la toma de decisiones.A través de un sistema de visualización y análisis de similitud, la herramienta permite identificar líneas estratégicas asociadas a las narrativas de las comunidades, transformando relatos en insumos estratégicos para políticas públicas, proyectos de desarrollo y procesos de incidencia*
+        """)
+        
+        # Pestañas principales
+        with gr.Tabs():
+
+            # PESTAÑA: CONSULTA
+            with gr.Tab("CONSULTA BASICA"):
+                with gr.Column():
+                  query_in = gr.Textbox(lines=5, placeholder="Escribe aquí tu consulta...", label="")
+                  query_out = gr.Textbox(lines=5, label="Texto ajustado para lenguaje natural")
+                
+                btn = gr.Button(value="Analizar mi iniciativa")
+                
+                with gr.Row():
+                  ods = gr.Dataframe(type="pandas", label="ODS")
+                  meta = gr.Dataframe(type="pandas", label="METAS")
+                  indicador = gr.Dataframe(type="pandas", label="INDICADORES")                   
+
+                with gr.Row():
+                  genero = gr.Dataframe(type="pandas", label="Enfoque de genero")
+                  poblacional = gr.Dataframe(type="pandas", label="Enfoque poblacional")
+                  etnico = gr.Dataframe(type="pandas", label="Enfoque étnico")
+
+                with gr.Row():
+                  pilar = gr.Dataframe(type="pandas", label="Pilares")
+                  estrategia = gr.Dataframe(type="pandas", label="Estrategias")
+                  categoria = gr.Dataframe(type="pandas", label="Categorias") 
+                
+                with gr.Row():
+                  bdl_ods = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="BDL_ODS")
+
+                  # query_in.render()
+                  # indicador, indicador_norm, query, pilares, estrategias, categorias = search()
+
+                
+                btn.click(search, query_in, [query_out,ods,meta,indicador,genero,poblacional,etnico,pilar,estrategia,categoria,bdl_ods])
+                # btn.click(cara_utility, [a_valu, trials], cara_output)
+                
+            with gr.Tab('CONSULTA ESPECIALIZADA'):
+
+              # with gr.Tab("CONSULTA"): 
+
+                with gr.Column():
+                  query_in_esp = gr.Textbox(lines=5, placeholder="Escribe aquí tu consulta...", label="")
+                  query_out_esp = gr.Textbox(lines=5, label="Texto ajustado para lenguaje natural")
+                
+                btn_esp = gr.Button(value="Analizar mi iniciativa")
+                
+
+                # lvl = gr.Dropdown([col for col in bdl_ods_esp.value.columns if 'ID' in col], label='Nivel de análisis')
+                # score = gr.Dropdown([col for col in bdl_ods_esp.value.columns if 'similaridad' in col], label='Score de medida')  
+                # rank = gr.Dropdown([col for col in bdl_ods_esp.value.columns if 'rank' in col], label='Score de medida')    
+
+                with gr.Tab("Clasificaciones"):
+                  with gr.Row():
+                    ods_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="ODS")
+                    meta_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="METAS")
+                    indicador_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="INDICADORES")                   
+
+                  with gr.Row():
+                    genero_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Enfoque de genero")
+                    poblacional_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Enfoque poblacional")
+                    etnico_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Enfoque étnico")
+
+                  with gr.Row():
+                    pilar_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Pilares")
+                    estrategia_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Estrategias")
+                    categoria_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="Categorias") 
+                  
+                  with gr.Row():
+                    bdl_ods_esp = gr.Dataframe(value=pd.DataFrame(),type="pandas", label="ODS")
+
+                # PESTAÑA: INICIO
+                with gr.Tab("🏠 Inicio"):
+                    html_inicio_ods = gr.HTML() #tab_inicio(ods.value)
+                    
+
+                    btn0 = gr.Button("🔄 Generar Metricas Iniciales", variant="primary")
+                    btn0.click(
+                        fn=tab_inicio,
+                        inputs=[ods_esp,meta_esp,indicador_esp],
+                        outputs=[html_inicio_ods]
+                    )
+                    
+                
+                # PESTAÑA 1: BOX PLOT
+                with gr.Tab("📦 1. Box Plot"):
+                    btn1 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    with gr.Row():                        
+                        with gr.Column(scale=1):
+                            exp1 = gr.Markdown()
+                    with gr.Row(visible=False):
+                        with gr.Column(scale=2):
+                            plot1_1 = gr.Plot(label="Diagrama de Caja por ODS")
+                        
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot1_2 = gr.Plot(label="Diagrama de Caja por META")
+                        
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot1_3 = gr.Plot(label="Diagrama de Caja por INDICADOR")
+                        
+                    
+                    
+                    btn1.click(
+                        fn=tab_viz1,
+                        inputs=[ods_esp, meta_esp, indicador_esp],
+                        outputs=[plot1_1, plot1_2, plot1_3, exp1]
+                    )
+                
+                # PESTAÑA 2: HEATMAP
+                with gr.Tab("🔥 2. Heatmap"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            img2 = gr.Image(label="Mapa de Calor ODS × Ranking", type="filepath")
+                        with gr.Column(scale=1):
+                            exp2 = gr.Markdown()
+                    
+                    btn2 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn2.click(
+                        fn=tab_viz2,
+                        inputs=[ods],
+                        outputs=[img2, exp2]
+                    )
+                
+                # PESTAÑA 3: SCATTER 3D
+                with gr.Tab("🌐 3. Scatter 3D"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot3 = gr.Plot(label="Gráfico 3D Interactivo")
+                        with gr.Column(scale=1):
+                            exp3 = gr.Markdown()
+                    
+                    btn3 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn3.click(
+                        fn=tab_viz3,
+                        inputs=[ods],
+                        outputs=[plot3, exp3]
+                    )
+                
+                # PESTAÑA 4: RADAR
+                with gr.Tab("🕸️ 4. Radar Chart"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot4 = gr.Plot(label="Gráfico de Radar")
+                        with gr.Column(scale=1):
+                            exp4 = gr.Markdown()
+                    
+                    btn4 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn4.click(
+                        fn=tab_viz4,
+                        inputs=[ods],
+                        outputs=[plot4, exp4]
+                    )
+                
+                # PESTAÑA 5: SUNBURST
+                with gr.Tab("☀️ 5. Sunburst"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot5 = gr.Plot(label="Diagrama de Sol")
+                        with gr.Column(scale=1):
+                            exp5 = gr.Markdown()
+                    
+                    btn5 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn5.click(
+                        fn=tab_viz5,
+                        inputs=[ods],
+                        outputs=[plot5, exp5]
+                    )
+                
+                # PESTAÑA 6: TOP INDICADORES
+                with gr.Tab("🏆 6. Top Indicadores"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot6 = gr.Plot(label="Top 5 Indicadores por ODS")
+                        with gr.Column(scale=1):
+                            exp6 = gr.Markdown()
+                    
+                    btn6 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn6.click(
+                        fn=tab_viz6,
+                        inputs=[ods],
+                        outputs=[plot6, exp6]
+                    )
+                
+                # PESTAÑA 7: STREAM GRAPH
+                with gr.Tab("🌊 7. Stream Graph"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot7 = gr.Plot(label="Gráfico de Flujo")
+                        with gr.Column(scale=1):
+                            exp7 = gr.Markdown()
+                    
+                    btn7 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn7.click(
+                        fn=tab_viz7,
+                        inputs=[ods],
+                        outputs=[plot7, exp7]
+                    )
+                
+                # PESTAÑA 8: VIOLIN PLOT
+                with gr.Tab("🎻 8. Violin Plot"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot8 = gr.Plot(label="Gráfico de Violín")
+                        with gr.Column(scale=1):
+                            exp8 = gr.Markdown()
+                    
+                    btn8 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn8.click(
+                        fn=tab_viz8,
+                        inputs=[ods],
+                        outputs=[plot8, exp8]
+                    )
+                
+                # PESTAÑA 9: DASHBOARD
+                with gr.Tab("📊 9. Dashboard"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            plot9 = gr.Plot(label="Dashboard Integrado")
+                        with gr.Column(scale=1):
+                            exp9 = gr.Markdown()
+                    
+                    btn9 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn9.click(
+                        fn=tab_viz9,
+                        inputs=[ods],
+                        outputs=[plot9, exp9]
+                    )
+                
+                # PESTAÑA 10: MATRIZ TRANSICIÓN
+                with gr.Tab("🔀 10. Matriz Transición"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            img10 = gr.Image(label="Matriz de Transición", type="filepath")
+                        with gr.Column(scale=1):
+                            exp10 = gr.Markdown()
+                    
+                    btn10 = gr.Button("🔄 Generar Visualización", variant="primary")
+                    btn10.click(
+                        fn=tab_viz10,
+                        inputs=[ods],
+                        outputs=[img10, exp10]
+                    )
+                
+                # PESTAÑA: ESTADÍSTICAS
+                with gr.Tab("📈 Estadísticas"):
+                    html_stats = gr.HTML() #tab_estadisticas(ods)
+
+                    btn11 = gr.Button("🔄 Generar Estadísticas", variant="primary")
+                    btn11.click(
+                        fn=tab_estadisticas,
+                        inputs=[ods],
+                        outputs=[html_stats]
+                    )
+                  
+                btn_esp.click(search, query_in_esp, [query_out_esp,ods_esp,meta_esp,indicador_esp,genero_esp,poblacional_esp,etnico_esp,pilar_esp,estrategia_esp,categoria_esp,bdl_ods_esp])
+
+                
+          
+        # Pie de página
+        gr.Markdown("""
+        ---
+        ### 📚 Recursos Adicionales
+        - **Documentación completa**: Consulta los archivos `.md` incluidos
+        - **Código fuente**: `visualizaciones_ods.py`
+        - **Documento Word**: `GUIA_VISUALIZACIONES_PUBLICO_GENERAL.docx`
+        
+        ---
+        *Sistema de Visualización ODS | Octubre 2025 | Desarrollado con Python, Plotly, Matplotlib y Gradio*
+        """)
+    
+    return app
+
+# ============================================================================
+# EJECUCIÓN DE LA APLICACIÓN
+# ============================================================================
+
+if __name__ == "__main__":
+    print("\n" + "="*70)
+    print("INICIANDO APLICACIÓN GRADIO - VISUALIZACIONES ODS")
+    print("="*70)
+    
+    # if not DATOS_CARGADOS:
+    #     print("\n⚠️  ADVERTENCIA: No se pudieron cargar los datos.")
+    #     print("    Verifica que el archivo existe en:", RUTA_DATOS)
+    #     print("    La aplicación se iniciará pero mostrará errores.")
+    # else:
+    #     print(f"\n✓ Datos cargados correctamente: {len(df_global)} registros")
+    #     print(f"✓ ODS únicos: {df_global['ods_id'].nunique()}")
+    
+    print("\n" + "="*70)
+    print("CREANDO APLICACIÓN...")
+    print("="*70)
+    
+    app = crear_app()
+    
+    print("\n✓ Aplicación creada exitosamente")
+    print("\n" + "="*70)
+    print("INICIANDO SERVIDOR WEB...")
+    print("="*70)
+    print("\n🌐 La aplicación se abrirá en tu navegador automáticamente")
+    print("📍 URL local: http://127.0.0.1:7860")
+    print("🌍 URL pública: Se generará si share=True\n")
+    print("💡 Presiona Ctrl+C para detener el servidor\n")
+    
+    # Lanzar la aplicación
+    app.launch(
+        # server_name="0.0.0.0",  # Permite acceso desde cualquier IP
+        # server_port=7860,        # Puerto por defecto
+        # share=False,             # Cambiar a True para URL pública
+        # show_error=True,         # Mostrar errores en la interfaz
+        # quiet=False              # Mostrar logs en consola
+    )

src/modelos_nlp_db.py

@@ -0,0 +1,532 @@
+
+# ============================================================================
+# Funciones generales PLN
+# ============================================================================
+
+import argparse, os, json, hashlib, pandas as pd, numpy as np
+from pathlib import Path
+import re
+
+def md5_text(s: str) -> str:
+    return hashlib.md5(s.encode('utf-8')).hexdigest()
+
+def build_ods_fingerprint(model_name: str, instruction: str, ods_texts: list) -> str:
+    concat = model_name + "\n" + instruction + "\n" + "\n".join(ods_texts)
+    return md5_text(concat)
+
+def ensure_out_dir(p: str):
+    Path(p).mkdir(parents=True, exist_ok=True)
+
+def load_data(patr_tblinput: str, ods_tblinput: str):
+    # patr = pd.read_tblinput(patr_tblinput)
+    # ods = pd.read_tblinput(ods_tblinput)
+    patr = pd.read_excel(patr_tblinput)#, encoding='cp1252')
+
+
+    ods = pd.read_excel(ods_tblinput)#.iloc[:32,:]
+    # Basic validations
+    assert {"ID",       "INICIATIVAS", "MUNICIPIO"}.issubset(patr.columns), "PATR CSV must include columns: ID,      INICIATIVAS"
+    assert {'OBJETIVO', 'OBJETIVO_META', 'INDICADORES', 'CODIGO_UNSD',
+       'ID_OBJETIVO', 'ID_META', 'ID_INDICADORES'}.issubset(ods.columns), "ODS CSV must include columns: OBJETIVO, OBJETIVO_META, INDICADORES, CODIGO_UNSD,ID_OBJETIVO, ID_META, ID_INDICADORES"
+    return patr, ods
+
+def make_text_pairs(instruction: str, texts: list):
+    return [[instruction, t if isinstance(t,str) else ""] for t in texts]
+
+def compute_embeddings(model, pairs, batch_size: int, normalize: bool):
+    # SentenceTransformer.encode has normalize_embeddings parameter
+    return model.encode(
+        pairs,
+        batch_size=batch_size,
+        convert_to_tensor=True,
+        show_progress_bar=True,
+        normalize_embeddings=normalize
+    )
+
+def cosine_sim_matrix(a, b):
+    # a: (N,d) tensor, b: (M,d) tensor
+    from sentence_transformers import util
+    sims = util.cos_sim(a, b).cpu().numpy()
+    return sims
+
+# def save_cache(cache_path: str, meta: dict, emb_np: np.ndarray):
+#     np.savez(cache_path, embeddings=emb_np, meta=json.dumps(meta, ensure_ascii=False))
+
+# def load_cache(cache_path: str):
+#     data = np.load(cache_path, allow_pickle=True)
+#     emb = data["embeddings"]
+#     meta = json.loads(str(data["meta"]))
+#     return emb, meta
+
+def save_cache(cache_path: str, meta: dict, emb_np: np.ndarray):
+    np.savez(cache_path, embeddings=emb_np)      # solo arrays
+    with open(cache_path + ".json", "w", encoding="utf-8") as f:
+        json.dump(meta, f, ensure_ascii=False)   # meta en JSON sidecar
+
+def load_cache(cache_path: str):
+    emb = np.load(cache_path)["embeddings"]
+    with open(cache_path + ".json", "r", encoding="utf-8") as f:
+        meta = json.load(f)
+    return emb, meta
+
+import spacy
+
+def limpiar_texto(texto, nlp):
+    """
+    Limpia nombres propios, entidades y caracteres especiales del texto.
+    Conserva la primera palabra de cada oración (aunque esté en mayúscula).
+    """
+    if not texto or not isinstance(texto, str):
+        return ""
+
+    # 1️⃣ Remover caracteres especiales innecesarios (antes del análisis)
+    #    Mantiene letras, números, espacios y signos básicos de puntuación.
+    texto = re.sub(r"[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ0-9\s.,;:!?()\-]", " ", texto)
+
+    # 2️⃣ Procesamiento lingüístico
+    doc = nlp(texto)
+    resultado = []
+
+    for sent in doc.sents:
+        tokens = []
+        for i, token in enumerate(sent):
+            # eliminar puntuación y símbolos
+            if token.is_punct or token.is_space or token.is_digit:
+                continue
+            # Mantiene primera palabra de cada oración
+            if i == 0:
+                tokens.append(token.text)
+            # Elimina nombres propios o entidades nombradas
+            elif token.pos_ == "PROPN" or token.ent_type_ in ["PER", "ORG", "LOC", "GPE"]:
+                continue
+            else:
+                tokens.append(token.text)
+        resultado.append(" ".join(tokens))
+
+    # 3️⃣ Limpiar puntuación repetida y espacios múltiples
+    texto_limpio = " ".join(resultado)
+    texto_limpio = re.sub(r"\s{2,}", " ", texto_limpio).strip()
+
+    # 4️⃣ Opcional: eliminar espacios antes de comas o puntos
+    texto_limpio = re.sub(r"\s+([,.!?;:])", r"\1", texto_limpio)
+
+    return texto_limpio
+
+
+# ============================================================================
+# Generador de cache para generar embeddings nuevas tablas
+# ============================================================================
+
+def genCache(cache_name:str, tbl_input_dir:str, out_dir:str, instruction:str, batch_size = 32, normalize = True, cache_path = None, force_recompute = False):
+  
+  model_name = "hkunlp/instructor-large" #help="HF model name for embeddings.")
+  # instruction = "Representa el tema central del siguiente objetivo de desarrollo sostenible" #"Instruction for ODS texts.")
+  ensure_out_dir(out_dir)
+
+  # Load data
+  input_df = pd.read_excel(tbl_input_dir)
+  input_texts  = (input_df["ods"].fillna("") + ". " + input_df["descripcion"].fillna("")).tolist()
+
+  # Compute fingerprint and cache path
+  fingerprint = build_ods_fingerprint(model_name, instruction, input_texts)
+  cache_path = cache_path or os.path.join(out_dir, f"{cache_name}_{fingerprint}.npz")
+
+  # Lazy import model to allow quick --help
+  from sentence_transformers import SentenceTransformer
+
+  model = SentenceTransformer(model_name)
+  input_pairs = make_text_pairs(instruction, input_texts)
+  emb_input = compute_embeddings(model, input_pairs, batch_size=batch_size, normalize=normalize)
+  emb_input_np = emb_input.cpu().numpy()
+  save_cache(cache_path, {"model": model_name, "instr": instruction, "count": len(input_texts)}, emb_input_np)
+
+# ============================================================================
+# Función generadora tablas
+# ============================================================================
+
+import torch
+import pandas as pd
+import numpy as np
+
+
+def search(query):
+  patr_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /insumos/Copy of Iniciativas priorizadas PATR 385.xlsx' #"CSV with PATR projects (columns: id, descripcion, ...).")
+  ods_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/tabla_odsDescripcion.xlsx'
+  meta_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/tabla_lvlMetaOds.xlsx'
+  indicador_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/marco_ods_ids.xlsx'
+  genero_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/genero.xlsx'
+  poblacional_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/poblacional.xlsx'
+  etnico_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/etnico.xlsx'
+  pilares_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/pilares.xlsx' #"CSV with ODS list (columns: ods_id, titulo, descripcion).")
+  categorias_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/categorias.xlsx'
+  estrategias_tblinput = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /documentos_para_revision/estrategias.xlsx'
+  out_dir = '/content/drive/MyDrive/Compartida/06_Desarrollo de la herramienta IA/01_MPTF /archivos_trabajo/salidas/modelo_instructor/data/out' #"Output directory.")
+  model_name = "hkunlp/instructor-large" #help="HF model name for embeddings.")
+  instr_proj = "Representa el propósito de desarrollo sostenible del siguiente proyecto territorial" #"Instruction for PATR projects.")
+  instr_ods = "Representa el tema central del siguiente ODS" #"Instruction for ODS texts.")
+  batch_size = 32 #"Batch size for encoding.")
+  top_k = 5 #"Top-K ODS to retrieve.")
+  normalize = True #"L2-normalize embeddings during encoding.") # Changed from "store_true" to boolean
+  cache_path = None #"Path to cache npz for ODS embeddings (auto if not set).")
+  force_recompute = False #"Ignore cache and recompute ODS embeddings.") # Changed from "store_true" to boolean
+
+
+  ensure_out_dir(out_dir)
+
+  #"OBJETIVO","OBJETIVO_META","INDICADORES","CODIGO_UNSD"
+
+  # Load data
+  # patr_df, ods_df = load_data(patr_tblinput, ods_tblinput)
+  # patr_df = patr_df[['ID', 'INICIATIVAS']].drop_duplicates().reset_index(drop=True) # Reset index
+  # patr_texts = patr_df["INICIATIVAS"].fillna("").tolist()
+  # patr_df = pd.read_excel(patr_tblinput)
+  ods_df = pd.read_excel(ods_tblinput)
+  meta_df = pd.read_excel(meta_tblinput)  
+  inidicador_df = pd.read_excel(indicador_tblinput)
+  genero_df = pd.read_excel(genero_tblinput)
+  poblacional_df = pd.read_excel(poblacional_tblinput)
+  etnico_df = pd.read_excel(etnico_tblinput)
+  pilares_df = pd.read_excel(pilares_tblinput)
+  estrategias_df = pd.read_excel(estrategias_tblinput)
+  categorias_df = pd.read_excel(categorias_tblinput)
+
+  nlp = spacy.load("es_core_news_md")
+  query = limpiar_texto(query, nlp)
+  patr_texts = list([query])
+  # print(len(patr_texts))
+  ods_texts  = (ods_df["ods"].fillna("") + ". " + ods_df["descripcion"].fillna("")).tolist()
+  meta_texts = (meta_df["OBJETIVO"].fillna("") + ". " + meta_df["META"].fillna("")).tolist()
+  indicadores_texts  = (inidicador_df["OBJETIVO"].fillna("") + ". " + inidicador_df["INDICADORES"].fillna("")).tolist()
+  genero_texts = (genero_df["DESCRIPCION"].fillna("")).tolist()
+  poblacional_texts = (poblacional_df["DESCRIPCION"].fillna("")).tolist()
+  etnico_texts = (etnico_df["DESCRIPCION"].fillna("")).tolist()
+  # ods_texts  = (ods_df["OBJETIVO"].fillna("") + ". " + ods_df["INDICADORES"].fillna("")).tolist()
+  pilares_texts  = (pilares_df["PILAR"].fillna("") + ". " + pilares_df["DESCRIPCION"].fillna("") + ". " + pilares_df["SUSTENTO"].fillna("")).tolist()
+  estrategias_texts  = (estrategias_df["ESTRATEGIA"].fillna("") + ". " + estrategias_df["DESCRIPCION"].fillna("")).tolist()
+  categorias_texts  = (categorias_df["CATEGORIA"].fillna("") + ". " + categorias_df["DESCRIPCION"].fillna("")).tolist()
+  # print(len(ods_texts))
+
+  texts = [ods_texts, meta_texts, indicadores_texts, genero_texts, poblacional_texts, etnico_texts, pilares_texts, estrategias_texts, categorias_texts]
+
+  # print('texts')
+  # print([len(x) for x in texts])
+
+  instruc_bases = ["Representa el tema central del siguiente objetivo de desarrollo sostenible", "Representa el tema central de la siguiente meta de desarrollo sostenible", 
+                  "Representa el tema central del siguiente ODS", "Representa el tema central del siguiente de enfoque", "Representa el tema central del siguiente de enfoque poblacional",
+                  "Representa el tema central del siguiente de enfoque etnico",
+                  "Representa el tema de los siguiente ejes temáticos y estratégicos", "Representa el tema de las siguiente estrategias","Representa el tema de las siguientes categorias"]
+
+  instruc_iniciativas = ["Representa el siguiente proyecto territorial en terminos de los objetivos de desarrollo sostenible ", "Representa el siguiente proyecto territorial en terminos de las metas de desarrollo sostenible",
+                        "Representa el siguiente proyecto territorial en terminos de los indicadores de desarrollo sostenible", "Representa el siguiente proyecto territorial en terminos del enfoque de genero", "Representa el siguiente proyecto territorial en terminos del enfoque poblacional",
+                        "Representa el siguiente proyecto territorial en terminos del enfoque etnico", 
+                        "Representa el siguiente proyecto territorial en terminos de ejes temáticos y estratégicos", "Representa el siguiente proyecto territorial en terminos de la estrategia", "Representa el siguiente proyecto territorial en terminos de la categoria"]
+
+
+
+  # Compute fingerprint and cache path
+  # fingerprint = build_ods_fingerprint(model_name, instr_ods, ods_texts)
+  # fingerprint = [build_ods_fingerprint(model_name, instr, texts[idx]) for idx, instr in enumerate(instruc_bases)]
+  fingerprint = ['7cb4c79002a04c14d92c9e1e4e9b251a','fe327349acadb19200187b58a565304b','07948e6beafe34049ca8a7309363eee2','9a4c52cf18e95c52566c0b657a25c44f','5a8b0dd04b865e8f1c356a64795b3b67',
+                  'c0973f650cac27181b3751aa9666819b','0a475def7da8551abdd502e1d042dc00','42e4e8bfb28dc47602e662a27d8b4e76','e0338741fd4e7b08ab7f92a32e08919b']
+
+
+  ods_cache_path = cache_path or os.path.join(out_dir, f"tabla_odsDescripcion_{fingerprint[0]}.npz")
+  meta_cache_path = cache_path or os.path.join(out_dir, f"tabla_lvlMetaOds_{fingerprint[1]}.npz")
+  indicadores_cache_path = cache_path or os.path.join(out_dir, f"ods_embeddings_{fingerprint[2]}.npz")
+  genero_cache_path = cache_path or os.path.join(out_dir, f"tabla_genero_{fingerprint[3]}.npz")
+  poblacional_cache_path = cache_path or os.path.join(out_dir, f"tabla_poblacional_{fingerprint[4]}.npz")
+  etnico_cache_path = cache_path or os.path.join(out_dir, f"tabla_etnico_{fingerprint[5]}.npz")  
+  pilaresPdet_cache_path = cache_path or os.path.join(out_dir, f"pilaresPdet_embeddings_{fingerprint[6]}.npz")
+  estrategiasPdet_cache_path = cache_path or os.path.join(out_dir, f"estrategiasPdet_embeddings_{fingerprint[7]}.npz")
+  categoriasPdet_cache_path = cache_path or os.path.join(out_dir, f"categoriasPdet_embeddings_{fingerprint[8]}.npz")
+
+  cache_paths = [ods_cache_path, meta_cache_path, indicadores_cache_path, genero_cache_path, poblacional_cache_path, etnico_cache_path, pilaresPdet_cache_path, estrategiasPdet_cache_path, categoriasPdet_cache_path]
+
+  print('cache_paths')
+  print([x for x in cache_paths])
+
+  # Lazy import model to allow quick --help
+  from sentence_transformers import SentenceTransformer
+
+  # Load / compute ODS embeddings with cache
+  ods_use_cache = (not force_recompute) and os.path.exists(ods_cache_path)
+  meta_use_cache = (not force_recompute) and os.path.exists(meta_cache_path)
+  indicadores_use_cache = (not force_recompute) and os.path.exists(indicadores_cache_path)
+  genero_use_cache = (not force_recompute) and os.path.exists(genero_cache_path)
+  poblacional_use_cache = (not force_recompute) and os.path.exists(poblacional_cache_path)
+  etnico_use_cache = (not force_recompute) and os.path.exists(etnico_cache_path)  
+  pilaresPdet_use_cache = (not force_recompute) and os.path.exists(pilaresPdet_cache_path)
+  estrategiasPdet_use_cache = (not force_recompute) and os.path.exists(estrategiasPdet_cache_path)
+  categoriasPdet_use_cache = (not force_recompute) and os.path.exists(categoriasPdet_cache_path)
+
+  matrix_unfpa = []
+  caches = [ods_use_cache, meta_use_cache, indicadores_use_cache, genero_use_cache, poblacional_use_cache, etnico_use_cache,
+            pilaresPdet_use_cache, estrategiasPdet_use_cache, categoriasPdet_use_cache]
+
+  for idx, i_cache in enumerate(caches):
+    # print(cache_paths[idx])
+
+    if i_cache:
+        emb_unfpa_np, meta = load_cache(cache_paths[idx])
+        # Minimal safety check: same model/instruction length
+        if meta.get("model_name") != model_name or meta.get("instr") != instruc_bases[idx] or meta.get("count") != len(texts[idx]):
+          print(f'Diferencias en carga de metadata nlp cache {cache_paths[idx]}:')
+          print(meta.get("model_name"), model_name)
+          print(meta.get("instr"), instruc_bases[idx])
+          print(meta.get("count"),len(texts[idx]))
+            # i_cache = False
+
+    if not i_cache:
+      print(f'no se encontro cache de id : {idx}')
+        # model = SentenceTransformer(model_name)
+        # ods_pairs = make_text_pairs(instruc_bases[idx], texts[idx])
+        # emb_ods = compute_embeddings(model, ods_pairs, batch_size=batch_size, normalize=normalize)
+        # emb_unfpa_np = emb_ods.cpu().numpy()
+        # save_cache(cache_paths[idx], {"model_name": model_name, "instr": instruc_bases[idx], "count": len(texts[idx])}, emb_unfpa_np)
+    else:
+        model = SentenceTransformer(model_name)  # still needed for project embeddings
+
+    # Compute PATR embeddings
+    patr_pairs = make_text_pairs(instruc_iniciativas[idx], patr_texts)
+    emb_patr = compute_embeddings(model, patr_pairs, batch_size=batch_size, normalize=normalize)
+
+    # Convert ODS (np.ndarray) to torch.Tensor and move it to the same device as emb_patr
+    emb_unfpa_t = torch.from_numpy(emb_unfpa_np).to(emb_patr.device)
+
+    # Similarity
+    from sentence_transformers import util
+    sim_matrix_ = util.cos_sim(emb_patr, emb_unfpa_t).cpu().numpy()
+
+    matrix_unfpa.append(sim_matrix_)
+
+  print([len(x) for x in matrix_unfpa])
+
+  # tops_k = [5,1,1,1] # ods_use_cache, pilaresPdet_use_cache, estrategiasPdet_use_cache, categoriasPdet_use_cache
+  tops_k = [len(ods_texts),len(meta_texts),len(indicadores_texts),1,1,1,1,1,1]
+  res_dfs = []
+
+  for idx, top in enumerate(tops_k):
+    sim_matrix = matrix_unfpa[idx]
+    # Top-K per project
+    # K = min(top_k, sim_matrix.shape[1])
+    K = min(top, sim_matrix.shape[1])
+    top_rows = []
+    for i in range(sim_matrix.shape[0]):
+        sims = sim_matrix[i]
+        # rt descending and take first K
+        top_idx = np.argsort(-sims)[:K]
+        # ods_df
+        # meta_df
+        # inidicador_df
+        # genero_df
+        # poblacional_df
+        # etnico_df
+        # pilares_df
+        # estrategias_df
+        # categorias_df
+
+        #### RESULTADOS PARA DESCRIPCION ODS
+        if idx == 0:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "ODS_ID": ods_df.iloc[j, ods_df.columns.get_loc("id_ods")], # Use iloc with positional index
+                  "OBJETIVO": ods_df.iloc[j, ods_df.columns.get_loc("ods")], # Use iloc with positional index
+
+                  # "ods_texto": ods_texts[j],
+                  "ods_rank": rank,
+                  "ods_similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA METAS ODS
+        if idx == 1:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "META_ID": meta_df.iloc[j, meta_df.columns.get_loc("ID_META")], # Use iloc with positional index
+                  "META": meta_df.iloc[j, meta_df.columns.get_loc("META")], # Use iloc with positional index
+                  "ODS_ID": meta_df.iloc[j, meta_df.columns.get_loc("ID_OBJETIVO")],
+
+                  # "ods_texto": ods_texts[j],
+                  "meta_rank": rank,
+                  "meta_similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA INDICADORES ODS
+        if idx == 2:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "INDICADOR_ID": inidicador_df.iloc[j, inidicador_df.columns.get_loc("ID_INDICADORES")], # Use iloc with positional index
+                  "INDICADOR": inidicador_df.iloc[j, inidicador_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  "ODS_ID": inidicador_df.iloc[j, inidicador_df.columns.get_loc("ID_ODS")],
+                  "META_ID": inidicador_df.iloc[j, inidicador_df.columns.get_loc("ID_META")],
+
+                  # "ods_texto": ods_texts[j],
+                  "indicador_rank": rank,
+                  "indicador_similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA ENFOQUE GENERO
+        if idx == 3:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "ENFOQUE_GENERO": genero_df.iloc[j, genero_df.columns.get_loc("CATEGORIA")], # Use iloc with positional index
+                  # "INDICADOR": genero_df.iloc[j, genero_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+
+                  # "ods_texto": ods_texts[j],
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA ENFOQUE POBLACIONAL
+        if idx == 4:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "ENFOQUE_POBLACIONAL": poblacional_df.iloc[j, poblacional_df.columns.get_loc("CATEGORIA")], # Use iloc with positional index
+                  # "INDICADOR": poblacional_df.iloc[j, poblacional_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+
+                  # "ods_texto": ods_texts[j],
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA ENFOQUE ETNICO
+        if idx == 5:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  # "project_id": patr_df.iloc[i, patr_df.columns.get_loc("ID")], # Use iloc with positional index
+                  # "project_text": patr_df.iloc[i, patr_df.columns.get_loc("INICIATIVAS")], # Use iloc with positional index
+                  "ENFOQUE_POBLACIONAL": etnico_df.iloc[j, etnico_df.columns.get_loc("CATEGORIA")], # Use iloc with positional index
+                  # "INDICADOR": etnico_df.iloc[j, etnico_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+
+                  # "ods_texto": ods_texts[j],
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  # "ods_titulo": ods_df.iloc[j, ods_df.columns.get_loc("INDICADORES")], # Use iloc with positional index
+                  # "ods_texto": ods_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA PILARES
+        if idx == 6:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  "pilar_texto": pilares_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA ESTRATEGIAS
+        if idx == 7:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  "estrategia_texto": estrategias_texts[j]
+              }
+              top_rows.append(row)
+
+        #### RESULTADOS PARA CATEGORIAS
+        if idx == 8:
+          for rank, j in enumerate(top_idx, start=1):
+              row = {
+                  "rank": rank,
+                  "similaridad_cos": float(sims[j]),
+                  "categoria_texto": categorias_texts[j]
+              }
+              top_rows.append(row)
+
+
+    res_df = pd.DataFrame(top_rows).drop_duplicates()
+    res_dfs.append(res_df)
+
+  # Additionally, export a simple edges file (Top-1) for graph visualizations
+  # edges = []
+  # df_edges = pd.DataFrame()
+  # df_edges['source'] = res_dfs[0]['ods_id']
+  # df_edges['target'] = res_dfs[0]['indicador_id']
+  # df_edges['weight'] = res_dfs[0]['similaridad_cos']
+
+  # for pid, group in res_df.groupby("project_id"):
+  #     best = group.sort_values("rank").iloc[0]
+  #     edges.append({"source": group["project_id"], "target": group["ods_id"], "weight": group["similaridad_cos"]})
+  # df_edges = pd.DataFrame(edges)#.to_tblinput(out_edges, index=False, encoding="utf-8
+
+  # html = build_graph(df_edges)
+  from sklearn.preprocessing import MinMaxScaler
+
+
+  # dfs_norm = []
+  # Initialize the MinMaxScaler
+  scaler = MinMaxScaler()
+
+  for i in range(0,3):    
+
+    if i == 0:
+      # Reshape the 'similaridad_cos' column as it needs to be 2D for the scaler
+      similarity_scores = res_dfs[i]['ods_similaridad_cos'].values.reshape(-1, 1)
+      # Fit and transform the data
+      res_dfs[i]['ods_similaridad_cos_normalized'] = scaler.fit_transform(similarity_scores)
+      # df_sim = res_dfs[i][['ODS_ID',	'OBJETIVO',	'rank',	'similaridad_cos']]
+      # df_simnorm = res_dfs[i][['ODS_ID',	'OBJETIVO',	'ods_rank', 'ods_similaridad_cos_normalized']]
+      # df_simnorm.columns = ['ODS_ID',	'OBJETIVO',	'rank',	'similaridad_cos']
+      # dfs_norm.append(df_simnorm)
+    if i == 1:
+      # Reshape the 'similaridad_cos' column as it needs to be 2D for the scaler
+      similarity_scores = res_dfs[i]['meta_similaridad_cos'].values.reshape(-1, 1)
+      # Fit and transform the data
+      res_dfs[i]['meta_similaridad_cos_normalized'] = scaler.fit_transform(similarity_scores)
+      # df_sim = res_dfs[i][['META_ID',	'META',	'rank',	'similaridad_cos']]
+      # df_simnorm = res_dfs[i][['META_ID',	'META',	'rank', 'similaridad_cos_normalized']]
+      # df_simnorm.columns = ['META_ID',	'META',	'rank',	'similaridad_cos']
+      # dfs_norm.append(df_simnorm)
+    if i == 2:
+      # Reshape the 'similaridad_cos' column as it needs to be 2D for the scaler
+      similarity_scores = res_dfs[i]['indicador_similaridad_cos'].values.reshape(-1, 1)
+      # Fit and transform the data
+      res_dfs[i]['indicador_similaridad_cos_normalized'] = scaler.fit_transform(similarity_scores)
+      # # df_sim = res_dfs[i][['INDICADOR_ID',	'INDICADOR',	'rank',	'similaridad_cos']]
+      # df_simnorm = res_dfs[i][['INDICADOR_ID',	'INDICADOR',	'rank', 'similaridad_cos_normalized']]
+      # df_simnorm.columns = ['INDICADOR_ID',	'INDICADOR',	'rank',	'similaridad_cos']
+      # dfs_norm.append(df_simnorm)
+    
+    bdl_ods = res_dfs[0].merge(res_dfs[1], 'inner', left_on='ODS_ID', right_on='ODS_ID')
+    bdl_ods = bdl_ods.merge(res_dfs[2],'inner', left_on=['ODS_ID','META_ID'], right_on=['ODS_ID','META_ID'])
+    print(f'Tamaño BDL: {len(bdl_ods)}')
+
+    
+
+  return (query, res_dfs[0], res_dfs[1], res_dfs[2], res_dfs[3], res_dfs[4], res_dfs[5], res_dfs[6], res_dfs[7], res_dfs[8], bdl_ods)
+
+
+
+# ============================================================================
+# Función para normalizar
+# ============================================================================
+
+
+

src/visualizaciones_ods.py

@@ -0,0 +1,835 @@
+"""
+VISUALIZACIONES PARA ANÁLISIS DE SIMILARIDAD COSENO - INDICADORES ODS
+========================================================================
+
+Este script genera visualizaciones interactivas y estáticas para ponderar
+el valor de similaridad_cos como proxy de similaridad al consultar una
+iniciativa ciudadana con una base de indicadores ODS.
+
+Autor: Análisis ODS
+Fecha: Octubre 2025
+"""
+
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+import seaborn as sns
+from matplotlib.gridspec import GridSpec
+import plotly.graph_objects as go
+import plotly.express as px
+from plotly.subplots import make_subplots
+import warnings
+
+warnings.filterwarnings('ignore')
+
+# Configuración estética
+plt.style.use('seaborn-v0_8-darkgrid')
+sns.set_palette("husl")
+
+# ============================================================================
+# 1. CARGA Y PREPARACIÓN DE DATOS
+# ============================================================================
+
+def cargar_datos(ruta_archivo):
+    """
+    Carga los datos desde el archivo markdown y los convierte a DataFrame
+    """
+    # Leer el archivo saltando la línea de separación
+    df = pd.read_csv(ruta_archivo, sep='|', skiprows=[1])
+    
+    # Limpiar columnas (eliminar espacios)
+    df.columns = df.columns.str.strip()
+    
+    # Eliminar columnas vacías (primera y última por el formato markdown)
+    df = df.drop(df.columns[[0, -1]], axis=1)
+    
+    # Limpiar espacios en valores de texto
+    for col in df.select_dtypes(include=['object']).columns:
+        df[col] = df[col].str.strip()
+    
+    return df
+
+
+# ============================================================================
+# 2. GRÁFICA 1: DISTRIBUCIÓN DE SIMILARIDAD POR ODS (Box Plot Interactivo)
+# ============================================================================
+
+def viz_1_distribucion_por_ods(df, id_lvl, score, titulo):
+    """
+    LÓGICA: Esta visualización muestra la distribución de valores de similaridad
+    coseno agrupados por cada ODS. Permite identificar:
+    - Qué ODS tienen mayor rango de similaridad
+    - La mediana de similaridad por ODS
+    - Outliers o valores atípicos
+    - Consistencia interna de cada ODS
+    
+    INTERPRETACIÓN:
+    - Cajas más altas → Mayor variabilidad en la similaridad dentro del ODS
+    - Medianas altas → El ODS tiene indicadores más similares a la consulta
+    - Outliers superiores → Indicadores específicos muy relevantes
+    """
+    
+    fig = go.Figure()
+    
+    for idx, ods in enumerate(sorted(df['ODS_ID'].unique())):
+        datos_ods = df[df['ODS_ID'] == ods][score]
+        
+        fig.add_trace(go.Box(
+            y=datos_ods,
+            name=f'ODS {ods}',
+            boxmean='sd',  # Mostrar media y desviación estándar
+            marker_color=px.colors.qualitative.Plotly[int(ods) % len(px.colors.qualitative.Plotly)]
+        ))
+    
+    fig.update_layout(
+        title={
+            'text': f'Distribución de Similaridad Coseno por {titulo}<br><sub>Análisis de dispersión y tendencia central por objetivo</sub>',
+            'x': 0.5,
+            'xanchor': 'center'
+        },
+        # xaxis_title='Objetivo de Desarrollo Sostenible',
+        xaxis_title=id_lvl,
+        yaxis_title='Similaridad Coseno',
+        height=600,
+        showlegend=False,
+        hovermode='x unified'
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 3. GRÁFICA 2: HEATMAP DE SIMILARIDAD (ODS vs Rango de Ranking)
+# ============================================================================
+
+def viz_2_heatmap_ods_ranking(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Matriz de calor que muestra la intensidad de similaridad en función
+    de dos dimensiones: ODS (eje Y) y posición en el ranking (eje X agrupado).
+    
+    Se divide el ranking en deciles (10 grupos) para visualizar cómo se
+    distribuye la similaridad a lo largo de la relevancia ordenada.
+    
+    INTERPRETACIÓN:
+    - Colores cálidos (rojo/naranja) → Alta similaridad
+    - Colores fríos (azul) → Baja similaridad
+    - Patrón horizontal → Un ODS domina en ciertas posiciones
+    - Patrón vertical → Ciertas posiciones tienen alta similaridad en varios ODS
+    - Diagonal descendente → Comportamiento esperado (mayor rank → menor similaridad)
+    """
+    
+    # Crear deciles de ranking
+    df['rank_decil'] = pd.qcut(df[rank], q=10, labels=[f'D{i+1}' for i in range(10)])
+    
+    # Crear matriz pivote
+    pivot_table = df.pivot_table(
+        values=score,
+        index=id_lvl,
+        columns='rank_decil',
+        aggfunc='mean'
+    )
+    
+    fig, ax = plt.subplots(figsize=(14, 8))
+    
+    sns.heatmap(
+        pivot_table,
+        annot=True,
+        fmt='.3f',
+        cmap='RdYlGn',
+        center=df[score].median(),
+        cbar_kws={'label': 'Similaridad Coseno Promedio'},
+        linewidths=0.5,
+        ax=ax
+    )
+    
+    ax.set_title(
+        f'Heatmap: Similaridad Coseno por {id_lvl} y Decil de Ranking\n'
+        'Visualización de patrones de relevancia en función del orden',
+        fontsize=14,
+        pad=20
+    )
+    ax.set_xlabel('Decil de Ranking (D1=Top 10%, D10=Bottom 10%)', fontsize=12)
+    ax.set_ylabel(id_lvl, fontsize=12)
+    
+    plt.tight_layout()
+    return fig
+
+
+# ============================================================================
+# 4. GRÁFICA 3: SCATTER PLOT 3D (ODS, Indicador, Similaridad)
+# ============================================================================
+
+def viz_3_scatter_3d_interactivo(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Visualización tridimensional que permite explorar la relación
+    entre tres variables:
+    - Eje X: ODS ID
+    - Eje Y: Número de indicador dentro del ODS (extraído del indicador_id)
+    - Eje Z: Similaridad coseno
+    - Tamaño: Inversamente proporcional al ranking (más relevantes = más grandes)
+    - Color: Por ODS
+    
+    INTERPRETACIÓN:
+    - Puntos altos (eje Z) → Alta similaridad
+    - Clusters verticales → Varios indicadores de un ODS son similares
+    - Puntos grandes en altura → Indicadores relevantes y bien posicionados
+    - Permite rotar e interactuar para descubrir patrones espaciales
+    """
+    
+    # Extraer número de indicador
+    df['indicador_num'] = df[id_lvl].str.extract(r'\.(\d+)\.').astype(float)
+    
+    fig = go.Figure()
+    
+    for ods in sorted(df['ODS_ID'].unique()):
+        datos_ods = df[df['ODS_ID'] == ods]
+        
+        fig.add_trace(go.Scatter3d(
+            x=datos_ods['ODS_ID'],
+            y=datos_ods['indicador_num'],
+            z=datos_ods[score],
+            mode='markers',
+            name=f'ODS {ods}',
+            marker=dict(
+                size=10 - (datos_ods[rank] / len(df) * 8),  # Tamaño inversamente proporcional al rank
+                opacity=0.7,
+                line=dict(width=0.5, color='white')
+            ),
+            text=datos_ods[id_lvl],
+            hovertemplate='<b>%{text}</b><br>' +
+                          'ODS: %{x}<br>' +
+                          'Similaridad: %{z:.4f}<br>' +
+                          '<extra></extra>'
+        ))
+    
+    fig.update_layout(
+        title='Visualización 3D: ODS × Indicador × Similaridad<br><sub>Exploración espacial de patrones de relevancia</sub>',
+        scene=dict(
+            xaxis_title='ODS ID',
+            yaxis_title='Número de Indicador',
+            zaxis_title='Similaridad Coseno',
+            camera=dict(eye=dict(x=1.5, y=1.5, z=1.3))
+        ),
+        height=700,
+        showlegend=True
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 5. GRÁFICA 4: RADAR CHART - Similaridad Promedio por ODS
+# ============================================================================
+
+def viz_4_radar_chart_ods(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Gráfico de radar (spider chart) que muestra la similaridad promedio
+    de cada ODS en forma circular. Útil para comparar rápidamente el perfil
+    de relevancia de todos los ODS.
+    
+    INTERPRETACIÓN:
+    - Áreas más grandes → Mayor similaridad promedio con la consulta
+    - Forma del polígono → Perfil de cobertura de la iniciativa
+    - Picos → ODS altamente relevantes
+    - Valles → ODS menos relacionados
+    - Simetría → Iniciativa balanceada entre ODS vs. especializada
+    """
+    
+    # Calcular promedios por ODS
+    ods_stats = df.groupby(id_lvl).agg({
+        score: ['mean', 'max', 'count']
+    }).reset_index()
+    
+    ods_stats.columns = [id_lvl, 'sim_promedio', 'sim_max', 'count_indicadores']
+    ods_stats = ods_stats.sort_values(id_lvl)
+    
+    fig = go.Figure()
+    
+    # Similaridad promedio
+    fig.add_trace(go.Scatterpolar(
+        r=ods_stats['sim_promedio'],
+        theta=['ODS ' + str(x) for x in ods_stats[id_lvl]],
+        fill='toself',
+        name='Similaridad Promedio',
+        line_color='blue',
+        fillcolor='rgba(0, 0, 255, 0.2)'
+    ))
+    
+    # Similaridad máxima
+    fig.add_trace(go.Scatterpolar(
+        r=ods_stats['sim_max'],
+        theta=['ODS ' + str(x) for x in ods_stats[id_lvl]],
+        fill='toself',
+        name='Similaridad Máxima',
+        line_color='red',
+        fillcolor='rgba(255, 0, 0, 0.1)'
+    ))
+    
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                visible=True,
+                range=[0.85, 0.95]  # Ajustar según datos reales
+            )
+        ),
+        title=f'Radar Chart: Perfil de Similaridad por {titulo}<br><sub>Comparación de promedios y máximos</sub>',
+        showlegend=True,
+        height=600
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 6. GRÁFICA 5: SUNBURST - Jerarquía ODS → Indicadores
+# ============================================================================
+
+def viz_5_sunburst_jerarquia(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Diagrama de sunburst (sol radiante) que muestra la jerarquía
+    ODS → Indicadores con el tamaño proporcional a la similaridad.
+    
+    El círculo interior representa los ODS y los anillos exteriores los
+    indicadores dentro de cada ODS.
+    
+    INTERPRETACIÓN:
+    - Segmentos grandes → Indicadores o grupos de indicadores muy similares
+    - Colores → Gradiente de similaridad (más oscuro = mayor similaridad)
+    - Permite drill-down interactivo
+    - Visualiza la contribución relativa de cada indicador al ODS
+    """
+    
+    # Preparar datos para sunburst
+    df_sun = df.copy()
+    df_sun['ods_label'] = 'ODS ' + df_sun['ODS_ID'].astype(str)
+    df_sun['path'] = df_sun['ods_label'] + ' / ' + df_sun[id_lvl]
+    
+    # Limitar a top 100 para mejor visualización
+    df_sun_top = df_sun.nsmallest(100, rank)
+    
+    fig = px.sunburst(
+        df_sun_top,
+        path=['ods_label', id_lvl],
+        values=score,
+        color=score,
+        color_continuous_scale='Viridis',
+        hover_data=[rank],
+        title=f'Sunburst: Jerarquía {titulo} → Indicadores (Top 100)<br><sub>Tamaño proporcional a similaridad</sub>'
+    )
+    
+    fig.update_layout(
+        height=700,
+        coloraxis_colorbar=dict(title="Similaridad")
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 7. GRÁFICA 6: CASCADA - Top Indicadores por ODS
+# ============================================================================
+
+def viz_6_top_indicadores_por_ods(df, id_lvl, score, rank, titulo, top_n=3):
+    """
+    LÓGICA: Para cada ODS, muestra los top N indicadores con mayor similaridad
+    en un formato de barras horizontales agrupadas.
+    
+    Permite comparar:
+    - Cuál es el mejor indicador de cada ODS
+    - La brecha entre el mejor y los siguientes
+    - Qué ODS tiene los indicadores más relevantes en general
+    
+    INTERPRETACIÓN:
+    - Barras más largas → Mayor similaridad
+    - Agrupación densa → Varios indicadores igualmente relevantes
+    - Gaps grandes → Un indicador destaca sobre el resto en ese ODS
+    """
+    
+    # Obtener top N por ODS
+    top_indicadores = df.groupby('ODS_ID').apply(
+        lambda x: x.nsmallest(top_n, rank)
+    ).reset_index(drop=True)
+    
+    fig = px.bar(
+        top_indicadores,
+        x=score,
+        y=id_lvl,
+        color=id_lvl,
+        orientation='h',
+        facet_row=id_lvl,
+        height=300 * len(df[id_lvl].unique()) // 3,
+        title=f'Top {top_n} Indicadores con Mayor Similaridad por ODS<br><sub>Análisis de relevancia por objetivo</sub>',
+        labels={score: 'Similaridad Coseno', id_lvl: 'Indicador'},
+        color_continuous_scale='Plasma'
+    )
+    
+    fig.update_yaxes(showticklabels=True, matches=None)
+    fig.update_xaxes(matches='x')
+    
+    return fig
+
+
+# ============================================================================
+# 8. GRÁFICA 7: STREAM GRAPH - Evolución de Similaridad
+# ============================================================================
+
+def viz_7_streamgraph_similaridad(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Gráfico de área apilada que muestra cómo contribuye cada ODS
+    a la similaridad acumulada a lo largo del ranking.
+    
+    El eje X es el ranking (ordenado) y el eje Y muestra el área acumulada
+    de similaridad por ODS.
+    
+    INTERPRETACIÓN:
+    - Áreas más anchas → ODS con mayor presencia en ese rango de ranking
+    - Cambios de color dominante → Transición de relevancia entre ODS
+    - Posición en ranking bajo → Indicadores más relevantes
+    - Permite ver qué ODS domina en qué rangos de relevancia
+    """
+    
+    # Crear bins de ranking
+    df['rank_bin'] = pd.cut(df[rank], bins=20, labels=False)
+    
+    # Agrupar por rank_bin y ODS
+    stream_data = df.groupby(['rank_bin', id_lvl])[score].sum().reset_index()
+    
+    # Pivotar para streamgraph
+    stream_pivot = stream_data.pivot(index='rank_bin', columns=id_lvl, values=score).fillna(0)
+    
+    fig = go.Figure()
+    
+    for ods in stream_pivot.columns:
+        fig.add_trace(go.Scatter(
+            x=stream_pivot.index,
+            y=stream_pivot[ods],
+            mode='lines',
+            name=f'ODS {ods}',
+            stackgroup='one',
+            groupnorm='percent',  # Normalizar a porcentaje
+            hovertemplate='ODS %{fullData.name}<br>Contribución: %{y:.1f}%<extra></extra>'
+        ))
+    
+    fig.update_layout(
+        title='Stream Graph: Contribución de cada ODS por Rango de Ranking<br><sub>Evolución de relevancia normalizada</sub>',
+        xaxis_title='Rango de Ranking (agrupado)',
+        yaxis_title='Contribución Porcentual',
+        height=600,
+        hovermode='x unified'
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 9. GRÁFICA 8: VIOLIN PLOT - Comparación Detallada de Distribuciones
+# ============================================================================
+
+def viz_8_violin_plot_ods(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Similar al box plot pero muestra la distribución completa de
+    densidad de probabilidad de la similaridad para cada ODS.
+    
+    El ancho del "violín" representa la concentración de valores en ese rango.
+    
+    INTERPRETACIÓN:
+    - Violines anchos → Muchos valores en ese rango de similaridad
+    - Violines angostos → Pocos valores en ese rango
+    - Forma bimodal → Dos grupos de indicadores con diferente similaridad
+    - Forma unimodal → Indicadores homogéneos en similaridad
+    - Permite ver distribuciones no normales que el box plot no captura
+    """
+    
+    fig = go.Figure()
+    
+    for ods in sorted(df[id_lvl].unique()):
+        datos_ods = df[df[id_lvl] == ods][score]
+        
+        fig.add_trace(go.Violin(
+            y=datos_ods,
+            name=f'ODS {ods}',
+            box_visible=True,
+            meanline_visible=True,
+            fillcolor=px.colors.qualitative.Plotly[int(ods) % len(px.colors.qualitative.Plotly)],
+            opacity=0.6,
+            x0=f'ODS {ods}'
+        ))
+    
+    fig.update_layout(
+        title='Violin Plot: Distribución de Densidad de Similaridad por ODS<br><sub>Análisis detallado de concentración de valores</sub>',
+        yaxis_title='Similaridad Coseno',
+        xaxis_title='Objetivo de Desarrollo Sostenible',
+        height=600,
+        showlegend=False
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 10. GRÁFICA 9: DASHBOARD INTEGRADO - Métricas Clave
+# ============================================================================
+
+def viz_9_dashboard_metricas(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Dashboard con múltiples paneles que resume las métricas clave:
+    - Panel 1: Top 10 indicadores con mayor similaridad
+    - Panel 2: Estadísticas por ODS (media, std, max, min)
+    - Panel 3: Distribución global de similaridad (histograma)
+    - Panel 4: Correlación entre rank y similaridad
+    
+    INTERPRETACIÓN:
+    - Vista holística de la calidad del matching
+    - Permite validar que el ranking está bien correlacionado con similaridad
+    - Identifica outliers o problemas en el cálculo
+    - Facilita comunicación de resultados a stakeholders
+    """
+    
+    fig = make_subplots(
+        rows=2, cols=2,
+        subplot_titles=(
+            'Top 10 Indicadores por Similaridad',
+            'Estadísticas por ODS',
+            'Distribución Global de Similaridad',
+            'Correlación: Rank vs Similaridad'
+        ),
+        specs=[
+            [{"type": "bar"}, {"type": "table"}],
+            [{"type": "histogram"}, {"type": "scatter"}]
+        ]
+    )
+    
+    # Panel 1: Top 10
+    top_10 = df.nsmallest(10, rank)
+    fig.add_trace(
+        go.Bar(
+            x=top_10[score],
+            y=top_10['indicador_id'],
+            orientation='h',
+            marker_color='lightblue',
+            text=top_10[score].round(4),
+            textposition='auto'
+        ),
+        row=1, col=1
+    )
+    
+    # Panel 2: Tabla de estadísticas
+    stats_ods = df.groupby(id_lvl)[score].agg(['mean', 'std', 'min', 'max', 'count']).reset_index()
+    stats_ods.columns = ['ODS', 'Media', 'Std', 'Min', 'Max', 'Count']
+    stats_ods = stats_ods.round(4)
+    
+    fig.add_trace(
+        go.Table(
+            header=dict(values=list(stats_ods.columns),
+                       fill_color='paleturquoise',
+                       align='left'),
+            cells=dict(values=[stats_ods[col] for col in stats_ods.columns],
+                      fill_color='lavender',
+                      align='left')
+        ),
+        row=1, col=2
+    )
+    
+    # Panel 3: Histograma
+    fig.add_trace(
+        go.Histogram(
+            x=df[score],
+            nbinsx=30,
+            marker_color='indianred',
+            name='Distribución'
+        ),
+        row=2, col=1
+    )
+    
+    # Panel 4: Scatter rank vs similaridad
+    fig.add_trace(
+        go.Scatter(
+            x=df[rank],
+            y=df[score],
+            mode='markers',
+            marker=dict(
+                size=5,
+                color=df[id_lvl],
+                colorscale='Viridis',
+                showscale=True,
+                colorbar=dict(title="ODS", x=1.15)
+            ),
+            text=df['indicador_id']
+        ),
+        row=2, col=2
+    )
+    
+    # Añadir línea de tendencia
+    z = np.polyfit(df[rank], df[score], 1)
+    p = np.poly1d(z)
+    fig.add_trace(
+        go.Scatter(
+            x=df[rank],
+            y=p(df[rank]),
+            mode='lines',
+            line=dict(color='red', dash='dash'),
+            name='Tendencia'
+        ),
+        row=2, col=2
+    )
+    
+    fig.update_xaxes(title_text="Similaridad", row=1, col=1)
+    fig.update_xaxes(title_text="Similaridad", row=2, col=1)
+    fig.update_xaxes(title_text="Rank", row=2, col=2)
+    fig.update_yaxes(title_text="Indicador", row=1, col=1)
+    fig.update_yaxes(title_text="Frecuencia", row=2, col=1)
+    fig.update_yaxes(title_text="Similaridad", row=2, col=2)
+    
+    fig.update_layout(
+        height=900,
+        showlegend=False,
+        title_text="Dashboard Integrado: Métricas Clave de Similaridad ODS",
+        title_x=0.5
+    )
+    
+    return fig
+
+
+# ============================================================================
+# 11. GRÁFICA 10: MATRIZ DE TRANSICIÓN - Cambios de ODS por Ranking
+# ============================================================================
+
+def viz_10_matriz_transicion(df, id_lvl, score, rank, titulo):
+    """
+    LÓGICA: Muestra cómo cambia el ODS dominante a medida que avanzamos
+    en el ranking. Divide el ranking en cuartiles y muestra qué ODS
+    tiene más presencia en cada cuartil.
+    
+    INTERPRETACIÓN:
+    - Permite ver si un ODS domina consistentemente
+    - Identifica cambios de dominancia (ej: ODS 5 domina top rankings,
+      luego ODS 17)
+    - Útil para entender si la iniciativa es más afín a ciertos ODS
+    - Ayuda a explicar por qué ciertos ODS aparecen más arriba
+    """
+    
+    # Crear cuartiles
+    df['cuartil'] = pd.qcut(df[rank], q=4, labels=['Q1 (Top)', 'Q2', 'Q3', 'Q4 (Bottom)'])
+    
+    # Contar presencia de ODS por cuartil
+    matriz = pd.crosstab(df[id_lvl], df['cuartil'], normalize='columns') * 100
+    
+    fig, ax = plt.subplots(figsize=(12, 8))
+    
+    sns.heatmap(
+        matriz,
+        annot=True,
+        fmt='.1f',
+        cmap='YlOrRd',
+        cbar_kws={'label': '% de Presencia en Cuartil'},
+        linewidths=0.5,
+        ax=ax
+    )
+    
+    ax.set_title(
+        'Matriz de Transición: Presencia de ODS por Cuartil de Ranking\n'
+        'Análisis de dominancia y evolución',
+        fontsize=14,
+        pad=20
+    )
+    ax.set_xlabel('Cuartil de Ranking', fontsize=12)
+    ax.set_ylabel('ODS ID', fontsize=12)
+    
+    plt.tight_layout()
+    return fig
+
+
+# ============================================================================
+# 12. FUNCIÓN PRINCIPAL - GENERAR TODAS LAS VISUALIZACIONES
+# ============================================================================
+
+def generar_todas_visualizaciones(ruta_archivo, guardar=True, formato='html'):
+    """
+    Función principal que genera todas las visualizaciones.
+    
+    Parámetros:
+    -----------
+    ruta_archivo : str
+        Ruta al archivo markdown con los datos
+    guardar : bool
+        Si True, guarda las visualizaciones en archivos
+    formato : str
+        Formato de salida: 'html' para interactivas, 'png' para estáticas
+    
+    Retorna:
+    --------
+    dict : Diccionario con todas las figuras generadas
+    """
+    
+    print("Cargando datos...")
+    df = cargar_datos(ruta_archivo)
+    print(f"Datos cargados: {len(df)} registros, {df[id_lvl].nunique()} ODS únicos")
+    
+    figuras = {}
+    
+    print("\n" + "="*70)
+    print("GENERANDO VISUALIZACIONES")
+    print("="*70)
+    
+    # Visualización 1
+    print("\n[1/10] Generando distribución por ODS (Box Plot)...")
+    figuras['viz1_boxplot'] = viz_1_distribucion_por_ods(df)
+    if guardar:
+        figuras['viz1_boxplot'].write_html('viz1_boxplot_ods.html')
+    
+    # Visualización 2
+    print("[2/10] Generando heatmap ODS vs Ranking...")
+    figuras['viz2_heatmap'] = viz_2_heatmap_ods_ranking(df)
+    if guardar:
+        figuras['viz2_heatmap'].savefig('viz2_heatmap.png', dpi=300, bbox_inches='tight')
+        plt.close()
+    
+    # Visualización 3
+    print("[3/10] Generando scatter 3D interactivo...")
+    figuras['viz3_scatter3d'] = viz_3_scatter_3d_interactivo(df)
+    if guardar:
+        figuras['viz3_scatter3d'].write_html('viz3_scatter3d.html')
+    
+    # Visualización 4
+    print("[4/10] Generando radar chart por ODS...")
+    figuras['viz4_radar'] = viz_4_radar_chart_ods(df)
+    if guardar:
+        figuras['viz4_radar'].write_html('viz4_radar_ods.html')
+    
+    # Visualización 5
+    print("[5/10] Generando sunburst jerárquico...")
+    figuras['viz5_sunburst'] = viz_5_sunburst_jerarquia(df)
+    if guardar:
+        figuras['viz5_sunburst'].write_html('viz5_sunburst.html')
+    
+    # Visualización 6
+    print("[6/10] Generando top indicadores por ODS...")
+    figuras['viz6_topn'] = viz_6_top_indicadores_por_ods(df, top_n=5)
+    if guardar:
+        figuras['viz6_topn'].write_html('viz6_top_indicadores.html')
+    
+    # Visualización 7
+    print("[7/10] Generando stream graph...")
+    figuras['viz7_stream'] = viz_7_streamgraph_similaridad(df)
+    if guardar:
+        figuras['viz7_stream'].write_html('viz7_streamgraph.html')
+    
+    # Visualización 8
+    print("[8/10] Generando violin plot...")
+    figuras['viz8_violin'] = viz_8_violin_plot_ods(df)
+    if guardar:
+        figuras['viz8_violin'].write_html('viz8_violin_plot.html')
+    
+    # Visualización 9
+    print("[9/10] Generando dashboard integrado...")
+    figuras['viz9_dashboard'] = viz_9_dashboard_metricas(df)
+    if guardar:
+        figuras['viz9_dashboard'].write_html('viz9_dashboard.html')
+    
+    # Visualización 10
+    print("[10/10] Generando matriz de transición...")
+    figuras['viz10_matriz'] = viz_10_matriz_transicion(df)
+    if guardar:
+        figuras['viz10_matriz'].savefig('viz10_matriz_transicion.png', dpi=300, bbox_inches='tight')
+        plt.close()
+    
+    print("\n" + "="*70)
+    print("GENERACIÓN COMPLETADA")
+    print("="*70)
+    print(f"\nTotal de visualizaciones generadas: {len(figuras)}")
+    
+    if guardar:
+        print("\nArchivos guardados:")
+        print("  - Visualizaciones interactivas (HTML): 8 archivos")
+        print("  - Visualizaciones estáticas (PNG): 2 archivos")
+    
+    return figuras, df
+
+
+# ============================================================================
+# 13. ANÁLISIS ESTADÍSTICO COMPLEMENTARIO
+# ============================================================================
+
+def analisis_estadistico(df):
+    """
+    Genera estadísticas descriptivas complementarias para el análisis
+    """
+    print("\n" + "="*70)
+    print("ANÁLISIS ESTADÍSTICO COMPLEMENTARIO")
+    print("="*70)
+    
+    print("\n1. ESTADÍSTICAS GLOBALES")
+    print("-" * 70)
+    print(f"   Similaridad media: {df[score].mean():.4f}")
+    print(f"   Desviación estándar: {df[score].std():.4f}")
+    print(f"   Similaridad mínima: {df[score].min():.4f}")
+    print(f"   Similaridad máxima: {df[score].max():.4f}")
+    print(f"   Mediana: {df[score].median():.4f}")
+    
+    print("\n2. ESTADÍSTICAS POR ODS")
+    print("-" * 70)
+    stats_ods = df.groupby(id_lvl)[score].agg([
+        ('count', 'count'),
+        ('mean', 'mean'),
+        ('std', 'std'),
+        ('min', 'min'),
+        ('max', 'max')
+    ]).round(4)
+    print(stats_ods.to_string())
+    
+    print("\n3. ODS MÁS REPRESENTADOS EN TOP 50")
+    print("-" * 70)
+    top_50_ods = df.nsmallest(50, rank)[id_lvl].value_counts()
+    print(top_50_ods.to_string())
+    
+    print("\n4. CORRELACIÓN RANK vs SIMILARIDAD")
+    print("-" * 70)
+    correlacion = df[rank].corr(df[score])
+    print(f"   Correlación de Pearson: {correlacion:.4f}")
+    print(f"   Interpretación: {'Negativa fuerte' if correlacion < -0.7 else 'Negativa moderada' if correlacion < -0.4 else 'Negativa débil'}")
+    print(f"   (Esperado: correlación negativa, a mayor rank → menor similaridad)")
+    
+    return stats_ods
+
+
+# ============================================================================
+# EJECUCIÓN DEL SCRIPT
+# ============================================================================
+
+if __name__ == "__main__":
+    # Configurar ruta del archivo
+    RUTA_ARCHIVO = '/mnt/user-data/uploads/indicadores_markdown.txt'
+    
+    print("\n" + "="*70)
+    print("SISTEMA DE VISUALIZACIÓN - ANÁLISIS DE SIMILARIDAD ODS")
+    print("="*70)
+    print("\nEste script genera 10 visualizaciones avanzadas para analizar")
+    print("la similaridad coseno como proxy de relevancia entre una iniciativa")
+    print("ciudadana y los indicadores ODS.")
+    
+    # Generar todas las visualizaciones
+    figuras, df = generar_todas_visualizaciones(
+        RUTA_ARCHIVO,
+        guardar=True,
+        formato='html'
+    )
+    
+    # Análisis estadístico
+    stats = analisis_estadistico(df)
+    
+    print("\n" + "="*70)
+    print("RECOMENDACIONES DE USO")
+    print("="*70)
+    print("""
+    1. Use el Dashboard (viz9) como punto de partida para exploración general
+    2. Use el Heatmap (viz2) para identificar patrones temporales de relevancia
+    3. Use el Radar Chart (viz4) para comunicar el perfil ODS de la iniciativa
+    4. Use el Scatter 3D (viz3) para exploración detallada e interactiva
+    5. Use el Violin Plot (viz8) para análisis estadístico profundo
+    6. Use el Sunburst (viz5) para presentaciones ejecutivas
+    7. Use la Matriz de Transición (viz10) para análisis de consistencia
+    
+    NOTA: Los archivos HTML son interactivos - ábralos en un navegador
+    """)
+    
+    print("\n¡Proceso completado exitosamente!")