Update app.py

app.py

@@ -1,531 +1,530 @@
-import streamlit as st
-import pandas as pd
-import numpy as np
-import plotly.express as px
-import plotly.graph_objects as go
-import io
-
-# Configuración de la aplicación
-st.set_page_config(page_title="Solo una cosa!... ¿Cómo priorizar ante tanto ruido?", layout="wide")
-# Display the image above the title
-st.image('OneThing.jpg', use_column_width=True)
-# Crear pestañas
-tabs = st.tabs(["Resumen del Libro", "Aplicación", "Acerca de mí"])
-
-# Función para generar contenido HTML
-def export_as_html():
-    buffer = io.StringIO()
-    # Crear una pestaña HTML interactiva (por ejemplo, la pestaña de "Aplicación")
-    with st.container():
-        st.markdown("<h1>Pestaña de Aplicación Exportada</h1>", unsafe_allow_html=True)
-        st.write("Aquí se exporta el contenido interactivo de la aplicación.")
-        
-        # Generar gráficos en HTML
-        fig = px.scatter(x=[1, 2, 3], y=[1, 3, 2])
-        fig.write_html(buffer)  # Guardar gráfico en HTML en el buffer
-    
-    return buffer.getvalue()
-
-# Pestaña 1: Resumen del libro
-with tabs[0]:
-    st.header("Resumen del libro: 'Lo Único' de Gary Keller y Jay Papasan")
-    resumen = """
-    ## 
-    "Lo Único" se centra en la premisa de que el éxito se logra al enfocar nuestros esfuerzos en una sola cosa a la vez. A través de este enfoque, podemos maximizar nuestros resultados y disminuir la sensación de agobio.
-
-    ### **Conceptos Clave del Libro**
-    
-    1. **La Falacia de la Igualdad:**
-       - No todas las cosas son igual de importantes; debemos identificar y priorizar lo que realmente importa.
-    
-    2. **El Mito de la Multitarea:**
-       - La multitarea no existe como tal; dividir nuestra atención disminuye la eficiencia.
-    
-    3. **Disciplina vs. Hábito:**
-       - El éxito se basa más en la formación de hábitos que en la autodisciplina férrea.
-    
-    4. **La Importancia de Pensar en Grande:**
-       - Establecer metas ambiciosas nos impulsa a superarnos.
-    
-    5. **El Valor del Propósito:**
-       - Un propósito claro nos ayuda a tomar decisiones rápidas y efectivas.
-
-    ### **Conclusión**
-    
-    El enfoque en "Lo Único" ofrece una guía práctica para identificar prioridades y maximizar la efectividad en todas las áreas de la vida.
-    """
-    st.markdown(resumen)
-
-# Pestaña 2: Aplicación
-with tabs[1]:
-    st.header("Identificar Lo Único")
-
-    # Descripción de cómo construir lo único
-    st.markdown("""
-    ### ¿Qué es "Lo Único"?
-
-    **"Lo Único"** es la tarea o acción más importante que puedes hacer en un área específica de tu vida o trabajo, de tal manera que, al lograrla, todo lo demás se vuelve más fácil o incluso innecesario. El enfoque es identificar la acción que tiene el mayor impacto y concentrar tus esfuerzos en ella para maximizar los resultados y reducir la dispersión de tareas no esenciales.
-
-    Para identificar **"Lo Único"** en un área de tu vida, pregúntate: 
-    > _"¿Qué es lo único que puedo hacer ahora [en relación con un área específica de mi vida o trabajo], gracias a lo cual todo lo demás me resulte más fácil o innecesario?"_
-
-    ### Pasos para construir "Lo Único":
-    1. **Evalúa tus metas a largo plazo**: Considera hacia dónde quieres dirigirte, tanto personal como profesionalmente.
-    2. **Divide tus objetivos en áreas clave**: Por ejemplo, salud, carrera, relaciones, finanzas, etc.
-    3. **Prioriza en función del impacto**: ¿Qué actividad, si se realiza, tiene el mayor impacto en esa área? Esa será "Lo Único".
-    4. **Céntrate en un solo paso a la vez**: La clave es elegir una acción concreta que puedas ejecutar, que hará que el resto de las tareas sean más fáciles o innecesarias.
-
-    """)
-
-    # Separador y llamada de atención para el input
-    st.markdown("---")  # Línea separadora para dar mayor contraste
-    
-    st.markdown("""
-    ### Ahora es tu turno:
-
-    **Escribe a continuación tu propia descripción de _"Lo Único"_ que deseas lograr.**  
-    _(Este será el primer paso clave hacia tu meta más importante)_:
-    """)
-    # Campo de texto más grande para definir "Lo Único"
-    lo_unico = st.text_area("Describe 'Lo Único' que quieres lograr", 
-                            value="Desarrollar un sistema de gestión que centralice todas las operaciones y sus resultados para reducir los tiempos de toma de decisiones", 
-                            height=150)
-
-    # Para resaltar visualmente el campo de entrada
-    st.markdown("<style>textarea {background-color: #f0f0f5; font-size: 18px;}</style>", unsafe_allow_html=True)
-
-    # Añadir un botón que resalte la acción a tomar
-    if st.button("Confirmar mi 'Lo Único'"):
-        st.success(f"Has definido tu 'Lo Único' como: {lo_unico}")
-
-    # Sidebar para mostrar DataFrames
-    st.sidebar.header("Paso 1: Ingresa las actividades que realizas actualmente (Califica tus actividades de 0 a 5)")
-    st.sidebar.markdown("##### *Realiza un listado de las actividades típicas en tu semana y analiza su nivel de importancia y urgencia para lograr lo único!*")
-    data = {
-        "Actividad": [
-            "Desarrollar sistema de gestión centralizado",   # Actividad clave para lograr "lo único"
-            "Definir la estrategia de operaciones",          # Fundamental para la centralización de operaciones
-            "Monitorear resultados y KPI críticos",          # Actividad clave para reducir tiempos de decisión
-            "Automatizar reportes de resultados",            # Directamente relacionado con la centralización y reducción de tiempo
-            "Optimización del flujo de información",         # Alineado con la eficiencia operativa
-            "Capacitar equipo en nuevas herramientas",       # Importante para la implementación del sistema
-            "Revisar el proceso de toma de decisiones",      # Relevante para el objetivo, pero no tan urgente
-            "Planificación estratégica de nuevos proyectos", # Puede apoyar a "lo único" en el futuro
-            "Optimización del proceso de ventas",            # Contribuye indirectamente al propósito general
-            "Responder emails administrativos",              # Consumidor de tiempo, pero delegable
-            "Reuniones internas no estructuradas",           # Requieren atención, pero pueden ser delegadas
-            "Revisar métricas operativas no críticas",       # Poco impacto en "lo único", urgentes pero delegables
-            "Revisar y archivar documentos antiguos",        # Poco impacto, eliminable
-            "Configurar reuniones recurrentes",              # Delegable
-            "Comprar suministros generales",                 # No relacionado con "lo único"
-            "Actualizar la base de datos no prioritaria",    # Delegable si no es crítica
-            "Limpieza y mantenimiento de oficina"            # Eliminable
-        ],
-        "Importancia": [5, 5, 5, 4, 4, 4, 4, 3, 3, 2, 2, 2, 1, 2, 2, 1, 1],  # Ajustado con base en "lo único"
-        "Urgencia": [4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1],      # Basado en la urgencia operativa
-        "Tiempo invertido (horas/semana)": [12, 10, 8, 6, 5, 5, 4, 4, 3, 3, 3, 2, 1, 2, 2, 1, 1]  # Horas ajustadas
-    }
-
-    # El total de horas suma aproximadamente 50-55 horas por semana, incluyendo interrupciones.
-
-    df = pd.DataFrame(data)
-    editable_df = st.sidebar.data_editor(df, key="editable_df")
-
-    # Sección 1: Actividades actuales y matriz de Eisenhower
-    st.header("¿En qué inviertes tu tiempo y donde te debes enfocar?")
-
-    # Matriz de Eisenhower
-    st.subheader("Matriz de Eisenhower y Pareto")
-
-    # Clasificación en la matriz de Eisenhower
-    conditions = [
-        (editable_df['Importancia'] >= 2.5) & (editable_df['Urgencia'] >= 2.5),
-        (editable_df['Importancia'] >= 2.5) & (editable_df['Urgencia'] < 2.5),
-        (editable_df['Importancia'] < 2.5) & (editable_df['Urgencia'] >= 2.5),
-        (editable_df['Importancia'] < 2.5) & (editable_df['Urgencia'] < 2.5),
-    ]
-    choices = ['Hacer ahora', 'Planificar', 'Delegar', 'Eliminar']
-    editable_df['Eisenhower'] = np.select(conditions, choices, default='No clasificado')
-
-    # Mostrar la Matriz de Eisenhower en un gráfico de burbujas
-    col1, col2 = st.columns(2)
-
-    # Definir los colores para los diferentes criterios de Eisenhower
-    color_mapping = {
-        'Hacer ahora': 'red',
-        'Planificar': 'blue',
-        'Delegar': 'green',
-        'Eliminar': 'gray'
-    }
-
-    with col1:
-        fig_eisenhower = px.scatter(
-            editable_df, 
-            x='Urgencia', 
-            y='Importancia', 
-            size='Tiempo invertido (horas/semana)',  # El tamaño de la burbuja se basa en el tiempo invertido
-            color='Eisenhower', 
-            color_discrete_map=color_mapping,  # Mapa de colores basado en 'Eisenhower'
-            hover_name='Actividad',
-            labels={'Importancia': 'Importancia', 'Urgencia': 'Urgencia'},
-            title="Matriz de Eisenhower (escala 0 a 5)"
-        )
-
-        # Fijar los rangos de los ejes x y y de 0 a 5
-        fig_eisenhower.update_xaxes(range=[0, 5.5])
-        fig_eisenhower.update_yaxes(range=[0, 5.5])
-
-        # Agregar líneas vertical y horizontal en 2.5
-        fig_eisenhower.add_shape(type="line", x0=2.5, x1=2.5, y0=0, y1=5,
-                                 line=dict(color="Black", width=2, dash="dash"))
-        fig_eisenhower.add_shape(type="line", x0=0, x1=5, y0=2.5, y1=2.5,
-                                 line=dict(color="Black", width=2, dash="dash"))
-        fig_eisenhower.update_layout(
-            template="plotly_white")
-        
-        st.plotly_chart(fig_eisenhower, use_container_width=True)
-
-    # Pareto basado en el tiempo invertido
-    editable_df['Ponderación'] = editable_df['Tiempo invertido (horas/semana)']  # Usar tiempo invertido para el Pareto
-    pareto_df = editable_df.sort_values(by='Ponderación', ascending=False)
-
-    # Gráfico de Pareto
-    # Calcular frecuencias relativas y acumuladas
-    pareto_df['Frecuencia Relativa'] = pareto_df['Ponderación'] / pareto_df['Ponderación'].sum()
-    pareto_df['Frecuencia Acumulada'] = pareto_df['Frecuencia Relativa'].cumsum()
-
-    # Asignar colores basados en la columna Eisenhower
-    pareto_df['Color'] = pareto_df['Eisenhower'].map(color_mapping)
-
-    with col2:
-        fig_pareto = go.Figure()
-
-        # Gráfico de barras para frecuencias relativas, coloreando según el criterio de Eisenhower
-        fig_pareto.add_trace(go.Bar(
-            x=pareto_df['Actividad'],
-            y=pareto_df['Frecuencia Relativa'],
-            name='Frecuencia Relativa',
-            marker_color=pareto_df['Color']  # Colorear barras según la clasificación Eisenhower
-        ))
-
-        # Gráfico de línea para frecuencias acumuladas
-        fig_pareto.add_trace(go.Scatter(
-            x=pareto_df['Actividad'],
-            y=pareto_df['Frecuencia Acumulada'],
-            name='Frecuencia Acumulada',
-            marker_color='red',
-            yaxis='y2',
-            mode='lines+markers'
-        ))
-
-        # Agregar una línea horizontal en el 80%
-        fig_pareto.add_trace(go.Scatter(
-            x=[pareto_df['Actividad'].iloc[0], pareto_df['Actividad'].iloc[-1]],
-            y=[0.8, 0.8],
-            mode='lines',
-            name='Límite del 80%',
-            line=dict(color='orange', width=2, dash='dash')
-        ))
-
-        # Ajustar el diseño del gráfico de Pareto para mejor legibilidad
-        fig_pareto.update_layout(
-            title='Pareto de Actividades por Tiempo Invertido',
-            yaxis=dict(title='Frecuencia Relativa', range=[0, 1]),  # Eje y de 0 a 1
-            yaxis2=dict(title='Frecuencia Acumulada', overlaying='y', side='right', range=[0, 1]),  # Eje y secundario de 0 a 1
-            legend=dict(x=0.1, y=0.9),
-            xaxis=dict(
-                tickangle=-45,  # Rotar las etiquetas del eje x
-                title_text='Actividades',
-                tickfont=dict(size=10)  # Reducir el tamaño de la fuente para que las etiquetas sean legibles
-            ),
-            template="plotly_white",
-            margin=dict(b=150),  # Agregar margen inferior para evitar que las etiquetas se corten
-            width=1000  # Ajustar el ancho del gráfico para mejorar la visualización
-        )
-
-        st.plotly_chart(fig_pareto, use_container_width=True)
-
-    # Sección 2: Matriz de habilidades y análisis de brechas
-    st.header("¿Qué habilidades debes desarrollar para enfocarte en lo único?")
-    # Sidebar para ajustar el journey de prioridades
-
-    st.sidebar.header("Paso 2: Ingresa los datos de tus habilidades para lograr lo Único!")
-    st.sidebar.markdown("##### *Realiza una autovaloración de las habilidades que consideras que debes desarrollar, el nivel que consideras que tienes actualmente y cual debes alcanzar*")
-    skills_data = {
-        'Habilidad': [
-            'Comunicación',                  # Importante para transmitir información y colaborar con el equipo.
-            'Gestión de Proyectos',          # Necesaria para planificar, ejecutar y supervisar proyectos eficientemente.
-            'Análisis de Datos',             # Habilidad para interpretar datos y tomar decisiones informadas.
-            'Programación Básica',           # Conocimiento de herramientas tecnológicas para implementar soluciones.
-            'Liderazgo',                     # Clave para guiar y motivar a los miembros del equipo.
-            'Pensamiento Crítico',           # Habilidad para resolver problemas y tomar decisiones efectivas.
-            'Gestión del Cambio',            # Capacidad para implementar cambios organizativos sin interrupciones.
-            'Gestión del Tiempo',            # Importante para priorizar tareas y cumplir plazos.
-            'Conocimientos en Tecnología',   # Familiaridad con herramientas y sistemas de gestión que pueden facilitar procesos.
-            'Capacitación y Desarrollo',     # Habilidad para entrenar y desarrollar al equipo en nuevas herramientas o procesos.
-            'Planificación Estratégica'       # Capacidad para alinear las operaciones con los objetivos organizacionales.
-        ],
-        'Habilidad Actual': [3, 4, 2, 3, 3, 4, 2, 3, 3, 2, 3],  # Evaluación de habilidades actuales
-        'Habilidad Requerida': [5, 5, 4, 4, 4, 5, 4, 5, 4, 3, 4]  # Habilidades necesarias para lograr el propósito
-    }
-
-    # Asegúrate de que todas las listas tengan la misma longitud
-    skills_df = pd.DataFrame(skills_data)
-    skills_df = st.sidebar.data_editor(skills_df, key="skills_df")
-
-    # Crear columnas para el heatmap y el gráfico de radar
-    col3, col4 = st.columns(2)
-
-    # Mostrar matriz de habilidades como heatmap usando Plotly
-    with col3:
-        st.markdown("### ¿Dónde estás vs. dónde debes estar?")
-
-        # Creación del heatmap con escala de color 'Greens'
-        heatmap_fig = go.Figure(data=go.Heatmap(
-            z=skills_df[['Habilidad Actual', 'Habilidad Requerida']].values,  # Los valores de habilidad actual y requerida
-            x=['Habilidad Actual', 'Habilidad Requerida'],  # Ejes x
-            y=skills_df['Habilidad'],  # Ejes y
-            colorscale='Greens',  # Escala de colores que va de verde oscuro (bajo) a verde brillante (alto)
-            colorbar=dict(title='Nivel de Habilidad')
-        ))
-
-        heatmap_fig.update_layout(
-            title='Heatmap de Habilidades',
-            template="plotly_white",
-            yaxis=dict(title='Habilidad')
-        )
-        
-        st.plotly_chart(heatmap_fig, use_container_width=True)
-
-    # Gráfico de radar para el análisis de brechas
-    with col4:
-        st.markdown("### ¿Cuál habilidad debes desarrollar más?")
-
-        fig_radar = go.Figure()
-
-        # Trazos de habilidades requeridas (verde brillante para niveles altos)
-        fig_radar.add_trace(go.Scatterpolar(
-            r=skills_df['Habilidad Requerida'],
-            theta=skills_df['Habilidad'],
-            fill='toself',
-            name='Habilidad Requerida',
-            line=dict(color='rgba(0, 100, 0, 0.7)'),  # Verde oscuros
-            fillcolor='rgba(0, 100, 0, 0.2)'  # Verde oscuro para el área
-        ))
-
-        # Trazos de habilidades actuales (verde oscuro para niveles bajos)
-        fig_radar.add_trace(go.Scatterpolar(
-            r=skills_df['Habilidad Actual'],
-            theta=skills_df['Habilidad'],
-            fill='toself',
-            name='Habilidad Actual',
-            line=dict(color='rgba(0, 235, 0, 0.7)'),  # Verde brillante 
-            fillcolor='rgba(0, 235, 0, 0.7)'  # Verde claro para el área
-        ))
-
-        fig_radar.update_layout(
-            polar=dict(
-                radialaxis=dict(
-                    visible=True,
-                    range=[0, 5]  # Rango de habilidades
-                )),
-            showlegend=True,
-            template="plotly_white",
-            title="Análisis de Brechas en Habilidades"
-        )
-
-        st.plotly_chart(fig_radar, use_container_width=True)
-
-    # Sección 3: Journey Map (Funnel o Bowtie)
-    st.header("Traza tu hoja de ruta: Escribe tus actividades prioritarias y los resultados que esperas!")
-
-    # Sidebar para ajustar el journey de prioridades
-    st.sidebar.header("Paso 3: Ingresa los datos de tu hoja de ruta y resultados esperados, y enfocate en ellos!")
-    st.sidebar.markdown("##### *En este punto ya sabes en que inviertes el tiempo y que decisiones debes tomar, además sabes las habilidades que debes desarrollar. Ingresa las actividades prioritarias para alcanzar lo único!, ingresa los resultados actuales y esperados al desarrollar lo único y concentrate en ellos!*")
-
-    # Datos de actividades prioritarias con KPI medibles y tiempos
-    journey_data = {
-        'Prioridad': [
-            'Definir la estrategia del sistema de gestión',
-            'Análisis de requerimientos',
-            'Implementación del sistema de gestión',
-            'Optimización de procesos existentes',
-            'Reuniones con clientes clave',
-            'Capacitación del equipo sobre el nuevo sistema',
-            'Revisión de KPIs establecidos'
-        ],
-        'Resultado': [
-            'Número de no conformidades',            # KPI para medir la efectividad de la estrategia
-            'Número de requerimientos definidos',     # KPI para medir el alcance del análisis
-            'Satisfacción del usuario (%)',           # KPI de satisfacción tras la implementación
-            'Eficiencia del proceso (horas)',         # KPI para evaluar la eficiencia del proceso
-            'Número de decisiones informadas',        # KPI para medir la efectividad de las reuniones
-            'Número de capacitaciones completadas',   # KPI para medir el alcance de la capacitación
-            'Costo de implementación (USD)'           # KPI relacionado con el costo
-        ],
-        'Inicio': [
-            '2024-10-01',
-            '2024-10-03',
-            '2024-10-10',
-            '2024-10-15',
-            '2024-10-20',
-            '2024-10-25',
-            '2024-10-30'
-        ],
-        'Fin': [
-            '2024-10-02',
-            '2024-10-04',
-            '2024-10-14',
-            '2024-10-25',
-            '2024-10-22',
-            '2024-10-30',
-            '2024-11-05'
-        ],
-        'KPI Actual': [15, 8, 70, 30, 5, 1, 2000],  # Valores actuales de KPIs
-        'KPI Esperado': [5, 10, 90, 10, 20, 3, 800],  # Valores esperados de KPIs
-        'Mejor': ['<', '>', '>', '<', '>', '>', '<']  # Indica si el KPI debe mejorar o disminuir
-    }
-
-    # Crear DataFrame
-    journey_df = pd.DataFrame(journey_data)
-    journey_df = st.sidebar.data_editor(journey_df, key="journey_df")
-
-    # Calcular el tiempo basado en las fechas (en horas)
-    journey_df['Inicio'] = pd.to_datetime(journey_df['Inicio'])
-    journey_df['Fin'] = pd.to_datetime(journey_df['Fin'])
-    journey_df['Tiempo (horas)'] = (journey_df['Fin'] - journey_df['Inicio']).dt.days * 8  # Suponiendo 8 horas por día
-
-    # Calcular el porcentaje de mejora considerando la dirección
-    def calculate_percentage_improvement(current, expected, direction):
-        if current == 0 and expected > 0:
-            return 100  # Mejora completa al ir de 0 a un valor positivo
-        elif current > 0 and expected == 0:
-            return -100  # Disminución completa
-        elif current == 0 and expected == 0:
-            return 0  # Sin cambio
-        else:
-            if direction == '>':
-                return ((expected - current) / current) * 100  # Mejora esperada
-            elif direction == '<':
-                return ((current - expected) / current) * 100  # Disminución esperada
-
-    # Aplicar la función para calcular el porcentaje de mejora
-    journey_df['Porcentaje Mejora'] = journey_df.apply(
-        lambda row: calculate_percentage_improvement(
-            row['KPI Actual'], 
-            row['KPI Esperado'], 
-            row['Mejor']
-        ), 
-        axis=1
-    )
-
-    # Normalizar los valores para el funnel
-    max_tiempo = journey_df['Tiempo (horas)'].max()
-    max_porcentaje_mejora = journey_df['Porcentaje Mejora'].max()
-
-    journey_df['Tiempo Normalizado'] = journey_df['Tiempo (horas)'] / max_tiempo * 100  # Normalización al rango 0-100
-    journey_df['Porcentaje Mejora Normalizado'] = journey_df['Porcentaje Mejora'] / max_porcentaje_mejora * 100  # Normalización al rango 0-100
-
-    # Obtener el número de prioridades para ajustar el eje 'y' dinámicamente
-    num_prioridades = len(journey_df['Prioridad'])
-
-    # Colores para el Funnel
-    color_actividades = 'rgba(0, 100, 255, 0.8)'  # Color azul para actividades priorizadas
-    color_resultados = 'rgba(255, 165, 0, 0.8)'  # Color naranja para resultados esperados
-
-    # Gráfico tipo funnel (bowtie) para mostrar el journey map
-    fig_journey = go.Figure()
-
-    # Funnel de actividades priorizadas (vertical)
-    fig_journey.add_trace(go.Funnel(
-        y=journey_df['Tiempo Normalizado'],
-        x=journey_df['Prioridad'],  # Mostrar el tiempo normalizado de cada actividad
-        textinfo="value+label",
-        name="Actividades Prioritarias",
-        marker=dict(color=color_actividades),  # Aplicar color uniforme para las actividades
-        orientation="v"  # Mantener orientación vertical
-    ))
-
-    # Funnel de resultados esperados (vertical)
-    fig_journey.add_trace(go.Funnel(
-        y=journey_df['Porcentaje Mejora Normalizado'],  # Usar el porcentaje de mejora como resultado
-        x=journey_df['Resultado'],  # Mostrar el KPI como resultado
-        textinfo="value+label",
-        name="Resultados Esperados",
-        marker=dict(color=color_resultados),  # Aplicar color uniforme para los resultados
-        orientation="v"  # Mantener orientación vertical
-    ))
-
-    # Actualizar la visualización del gráfico
-    fig_journey.update_layout(
-        template="plotly_white",
-        title="Journey Map: Actividades Prioritarias y Resultados Esperados",
-        funnelmode="stack"
-    )
-
-    st.plotly_chart(fig_journey, use_container_width=True)
-
-    # --------------------------- Gantt Chart -----------------------------------
-
-    # Crear DataFrame para las actividades priorizadas y fechas
-    eventos = journey_df[['Prioridad', 'Inicio', 'Fin']].copy()
-    eventos.columns = ['Evento', 'Fecha de Inicio', 'Fecha de Fin']  # Renombrar columnas
-
-    # Crear el gráfico de Gantt con una paleta de colores predefinida
-    fig_gantt = px.timeline(
-        eventos,
-        x_start="Fecha de Inicio", 
-        x_end="Fecha de Fin", 
-        y="Evento", 
-        color='Evento',  # Colores automáticos basados en la actividad
-        title='Gráfico de Gantt de Actividades Prioritarias',
-        color_discrete_sequence=px.colors.qualitative.Pastel  # Usar una paleta clara para asegurar legibilidad
-    )
-
-    # Ajustar las configuraciones del gráfico de Gantt
-    fig_gantt.update_layout(
-        template="plotly_white"  # Usar un tema claro para evitar colores oscuros en la descarga
-    )
-
-    # Mostrar el gráfico en Streamlit
-    st.plotly_chart(fig_gantt, use_container_width=True)
-
-    # --------------------------- Download Chart -----------------------------------
-    def export_figures_to_html(figures, title="Exported Figures"):
-        html = f"<html><head><title>{title}</title></head><body>"
-        for fig in figures:
-            html += fig.to_html(full_html=False, include_plotlyjs='cdn')
-        html += "</body></html>"
-        return html
-
-    # Recopilar todas las figuras que deseas exportar
-    figuras_a_exportar = [fig_eisenhower, fig_pareto, heatmap_fig, fig_radar,fig_journey, fig_gantt]
-
-    # Crear el HTML para descargar
-    html_export = export_figures_to_html(figuras_a_exportar, title="Exportación de Gráficos de la Aplicación")
-    st.markdown("### Descarga tus gráficos ")   
-    # Añadir un botón de descarga al final de la pestaña
-    st.download_button(
-        label="Descargar Gráficos en HTML",
-        data=html_export,
-        file_name="aplicacion_graficos.html",
-        mime="text/html"
-    )
-
-
-# Pestaña 3: Acerca de mí
-with tabs[2]:
-    st.header("Acerca de mí")
-    acerca_de_mi = """
-    ¡Hola! Soy Migue, desarrollo herramientas para facilitar la visualización y organización de ideas mediante visualizaciones interactivas. Esta aplicación está diseñada para ayudarte a estructurar tus pensamientos de manera eficiente y creativa, utilizando tecnologías de desarrollo de aplicaciones en Python.
-
-    **Características de la Aplicación:**
-    - **Interfaz Intuitiva:** Agrega ideas principales y sus ramas de forma sencilla.
-    - **Visualización Interactiva:** Explora tus mapas mentales de manera dinámica y visualmente atractiva.
-    - **Personalización:** Asigna imágenes y colores a tus nodos para una mejor organización y estética.
-
-    **Contacto:**
-    - **Correo Electrónico:** [mail](mailto:josemiguelaguilart.com)
-    - **LinkedIn:** [LinkedIn](https://www.linkedin.com/in/josemaguilar/)
-    """
+import streamlit as st
+import pandas as pd
+import numpy as np
+import plotly.express as px
+import plotly.graph_objects as go
+import io
+
+# Configuración de la aplicación
+st.set_page_config(page_title="Solo una cosa!... ¿Cómo priorizar ante tanto ruido?", layout="wide")
+# Display the image above the title
+st.image('OneThing.jpg', use_column_width=True)
+# Crear pestañas
+tabs = st.tabs(["Resumen del Libro", "Aplicación", "Acerca de mí"])
+
+# Función para generar contenido HTML
+def export_as_html():
+    buffer = io.StringIO()
+    # Crear una pestaña HTML interactiva (por ejemplo, la pestaña de "Aplicación")
+    with st.container():
+        st.markdown("<h1>Pestaña de Aplicación Exportada</h1>", unsafe_allow_html=True)
+        st.write("Aquí se exporta el contenido interactivo de la aplicación.")
+        
+        # Generar gráficos en HTML
+        fig = px.scatter(x=[1, 2, 3], y=[1, 3, 2])
+        fig.write_html(buffer)  # Guardar gráfico en HTML en el buffer
+    
+    return buffer.getvalue()
+
+# Pestaña 1: Resumen del libro
+with tabs[0]:
+    st.header("Resumen del libro: 'Lo Único' de Gary Keller y Jay Papasan")
+    resumen = """
+    ## 
+    "Lo Único" se centra en la premisa de que el éxito se logra al enfocar nuestros esfuerzos en una sola cosa a la vez. A través de este enfoque, podemos maximizar nuestros resultados y disminuir la sensación de agobio.
+
+    ### **Conceptos Clave del Libro**
+    
+    1. **La Falacia de la Igualdad:**
+       - No todas las cosas son igual de importantes; debemos identificar y priorizar lo que realmente importa.
+    
+    2. **El Mito de la Multitarea:**
+       - La multitarea no existe como tal; dividir nuestra atención disminuye la eficiencia.
+    
+    3. **Disciplina vs. Hábito:**
+       - El éxito se basa más en la formación de hábitos que en la autodisciplina férrea.
+    
+    4. **La Importancia de Pensar en Grande:**
+       - Establecer metas ambiciosas nos impulsa a superarnos.
+    
+    5. **El Valor del Propósito:**
+       - Un propósito claro nos ayuda a tomar decisiones rápidas y efectivas.
+
+    ### **Conclusión**
+    
+    El enfoque en "Lo Único" ofrece una guía práctica para identificar prioridades y maximizar la efectividad en todas las áreas de la vida.
+    """
+    st.markdown(resumen)
+
+# Pestaña 2: Aplicación
+with tabs[1]:
+    st.header("Identificar Lo Único")
+
+    # Descripción de cómo construir lo único
+    st.markdown("""
+    ### ¿Qué es "Lo Único"?
+
+    **"Lo Único"** es la tarea o acción más importante que puedes hacer en un área específica de tu vida o trabajo, de tal manera que, al lograrla, todo lo demás se vuelve más fácil o incluso innecesario. El enfoque es identificar la acción que tiene el mayor impacto y concentrar tus esfuerzos en ella para maximizar los resultados y reducir la dispersión de tareas no esenciales.
+
+    Para identificar **"Lo Único"** en un área de tu vida, pregúntate: 
+    > _"¿Qué es lo único que puedo hacer ahora [en relación con un área específica de mi vida o trabajo], gracias a lo cual todo lo demás me resulte más fácil o innecesario?"_
+
+    ### Pasos para construir "Lo Único":
+    1. **Evalúa tus metas a largo plazo**: Considera hacia dónde quieres dirigirte, tanto personal como profesionalmente.
+    2. **Divide tus objetivos en áreas clave**: Por ejemplo, salud, carrera, relaciones, finanzas, etc.
+    3. **Prioriza en función del impacto**: ¿Qué actividad, si se realiza, tiene el mayor impacto en esa área? Esa será "Lo Único".
+    4. **Céntrate en un solo paso a la vez**: La clave es elegir una acción concreta que puedas ejecutar, que hará que el resto de las tareas sean más fáciles o innecesarias.
+
+    """)
+
+    # Separador y llamada de atención para el input
+    st.markdown("---")  # Línea separadora para dar mayor contraste
+    
+    st.markdown("""
+    ### Ahora es tu turno:
+
+    **Escribe a continuación tu propia descripción de _"Lo Único"_ que deseas lograr.**  
+    _(Este será el primer paso clave hacia tu meta más importante)_:
+    """)
+    # Campo de texto más grande para definir "Lo Único"
+    lo_unico = st.text_area("Describe 'Lo Único' que quieres lograr", 
+                            value="Desarrollar un sistema de gestión que centralice todas las operaciones y sus resultados para reducir los tiempos de toma de decisiones", 
+                            height=150)
+
+    # Para resaltar visualmente el campo de entrada
+    st.markdown("<style>textarea {background-color: #f0f0f5; font-size: 18px;}</style>", unsafe_allow_html=True)
+
+    # Añadir un botón que resalte la acción a tomar
+    if st.button("Confirmar mi 'Lo Único'"):
+        st.success(f"Has definido tu 'Lo Único' como: {lo_unico}")
+
+    # Sidebar para mostrar DataFrames
+    st.sidebar.header("Paso 1: Ingresa las actividades que realizas actualmente (Califica tus actividades de 0 a 5)")
+    st.sidebar.markdown("##### *Realiza un listado de las actividades típicas en tu semana y analiza su nivel de importancia y urgencia para lograr lo único!*")
+    data = {
+        "Actividad": [
+            "Desarrollar sistema de gestión centralizado",   # Actividad clave para lograr "lo único"
+            "Definir la estrategia de operaciones",          # Fundamental para la centralización de operaciones
+            "Monitorear resultados y KPI críticos",          # Actividad clave para reducir tiempos de decisión
+            "Automatizar reportes de resultados",            # Directamente relacionado con la centralización y reducción de tiempo
+            "Optimización del flujo de información",         # Alineado con la eficiencia operativa
+            "Capacitar equipo en nuevas herramientas",       # Importante para la implementación del sistema
+            "Revisar el proceso de toma de decisiones",      # Relevante para el objetivo, pero no tan urgente
+            "Planificación estratégica de nuevos proyectos", # Puede apoyar a "lo único" en el futuro
+            "Optimización del proceso de ventas",            # Contribuye indirectamente al propósito general
+            "Responder emails administrativos",              # Consumidor de tiempo, pero delegable
+            "Reuniones internas no estructuradas",           # Requieren atención, pero pueden ser delegadas
+            "Revisar métricas operativas no críticas",       # Poco impacto en "lo único", urgentes pero delegables
+            "Revisar y archivar documentos antiguos",        # Poco impacto, eliminable
+            "Configurar reuniones recurrentes",              # Delegable
+            "Comprar suministros generales",                 # No relacionado con "lo único"
+            "Actualizar la base de datos no prioritaria",    # Delegable si no es crítica
+            "Limpieza y mantenimiento de oficina"            # Eliminable
+        ],
+        "Importancia": [5, 5, 5, 4, 4, 4, 4, 3, 3, 2, 2, 2, 1, 2, 2, 1, 1],  # Ajustado con base en "lo único"
+        "Urgencia": [4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1],      # Basado en la urgencia operativa
+        "Tiempo invertido (horas/semana)": [12, 10, 8, 6, 5, 5, 4, 4, 3, 3, 3, 2, 1, 2, 2, 1, 1]  # Horas ajustadas
+    }
+
+    # El total de horas suma aproximadamente 50-55 horas por semana, incluyendo interrupciones.
+
+    df = pd.DataFrame(data)
+    editable_df = st.sidebar.data_editor(df, key="editable_df")
+
+    # Sección 1: Actividades actuales y matriz de Eisenhower
+    st.header("¿En qué inviertes tu tiempo y donde te debes enfocar?")
+
+    # Matriz de Eisenhower
+    st.subheader("Matriz de Eisenhower y Pareto")
+
+    # Clasificación en la matriz de Eisenhower
+    conditions = [
+        (editable_df['Importancia'] >= 2.5) & (editable_df['Urgencia'] >= 2.5),
+        (editable_df['Importancia'] >= 2.5) & (editable_df['Urgencia'] < 2.5),
+        (editable_df['Importancia'] < 2.5) & (editable_df['Urgencia'] >= 2.5),
+        (editable_df['Importancia'] < 2.5) & (editable_df['Urgencia'] < 2.5),
+    ]
+    choices = ['Hacer ahora', 'Planificar', 'Delegar', 'Eliminar']
+    editable_df['Eisenhower'] = np.select(conditions, choices, default='No clasificado')
+
+    # Mostrar la Matriz de Eisenhower en un gráfico de burbujas
+    col1, col2 = st.columns(2)
+
+    # Definir los colores para los diferentes criterios de Eisenhower
+    color_mapping = {
+        'Hacer ahora': 'red',
+        'Planificar': 'blue',
+        'Delegar': 'green',
+        'Eliminar': 'gray'
+    }
+
+    with col1:
+        fig_eisenhower = px.scatter(
+            editable_df, 
+            x='Urgencia', 
+            y='Importancia', 
+            size='Tiempo invertido (horas/semana)',  # El tamaño de la burbuja se basa en el tiempo invertido
+            color='Eisenhower', 
+            color_discrete_map=color_mapping,  # Mapa de colores basado en 'Eisenhower'
+            hover_name='Actividad',
+            labels={'Importancia': 'Importancia', 'Urgencia': 'Urgencia'},
+            title="Matriz de Eisenhower (escala 0 a 5)"
+        )
+
+        # Fijar los rangos de los ejes x y y de 0 a 5
+        fig_eisenhower.update_xaxes(range=[0, 5.5])
+        fig_eisenhower.update_yaxes(range=[0, 5.5])
+
+        # Agregar líneas vertical y horizontal en 2.5
+        fig_eisenhower.add_shape(type="line", x0=2.5, x1=2.5, y0=0, y1=5,
+                                 line=dict(color="Black", width=2, dash="dash"))
+        fig_eisenhower.add_shape(type="line", x0=0, x1=5, y0=2.5, y1=2.5,
+                                 line=dict(color="Black", width=2, dash="dash"))
+        fig_eisenhower.update_layout(
+            template="plotly_white")
+        
+        st.plotly_chart(fig_eisenhower, use_container_width=True)
+
+    # Pareto basado en el tiempo invertido
+    editable_df['Ponderación'] = editable_df['Tiempo invertido (horas/semana)']  # Usar tiempo invertido para el Pareto
+    pareto_df = editable_df.sort_values(by='Ponderación', ascending=False)
+
+    # Gráfico de Pareto
+    # Calcular frecuencias relativas y acumuladas
+    pareto_df['Frecuencia Relativa'] = pareto_df['Ponderación'] / pareto_df['Ponderación'].sum()
+    pareto_df['Frecuencia Acumulada'] = pareto_df['Frecuencia Relativa'].cumsum()
+
+    # Asignar colores basados en la columna Eisenhower
+    pareto_df['Color'] = pareto_df['Eisenhower'].map(color_mapping)
+
+    with col2:
+        fig_pareto = go.Figure()
+
+        # Gráfico de barras para frecuencias relativas, coloreando según el criterio de Eisenhower
+        fig_pareto.add_trace(go.Bar(
+            x=pareto_df['Actividad'],
+            y=pareto_df['Frecuencia Relativa'],
+            name='Frecuencia Relativa',
+            marker_color=pareto_df['Color']  # Colorear barras según la clasificación Eisenhower
+        ))
+
+        # Gráfico de línea para frecuencias acumuladas
+        fig_pareto.add_trace(go.Scatter(
+            x=pareto_df['Actividad'],
+            y=pareto_df['Frecuencia Acumulada'],
+            name='Frecuencia Acumulada',
+            marker_color='red',
+            yaxis='y2',
+            mode='lines+markers'
+        ))
+
+        # Agregar una línea horizontal en el 80%
+        fig_pareto.add_trace(go.Scatter(
+            x=[pareto_df['Actividad'].iloc[0], pareto_df['Actividad'].iloc[-1]],
+            y=[0.8, 0.8],
+            mode='lines',
+            name='Límite del 80%',
+            line=dict(color='orange', width=2, dash='dash')
+        ))
+
+        # Ajustar el diseño del gráfico de Pareto para mejor legibilidad
+        fig_pareto.update_layout(
+            title='Pareto de Actividades por Tiempo Invertido',
+            yaxis=dict(title='Frecuencia Relativa', range=[0, 1]),  # Eje y de 0 a 1
+            yaxis2=dict(title='Frecuencia Acumulada', overlaying='y', side='right', range=[0, 1]),  # Eje y secundario de 0 a 1
+            legend=dict(x=0.1, y=0.9),
+            xaxis=dict(
+                tickangle=-45,  # Rotar las etiquetas del eje x
+                title_text='Actividades',
+                tickfont=dict(size=10)  # Reducir el tamaño de la fuente para que las etiquetas sean legibles
+            ),
+            template="plotly_white",
+            margin=dict(b=150),  # Agregar margen inferior para evitar que las etiquetas se corten
+            width=1000  # Ajustar el ancho del gráfico para mejorar la visualización
+        )
+
+        st.plotly_chart(fig_pareto, use_container_width=True)
+
+    # Sección 2: Matriz de habilidades y análisis de brechas
+    st.header("¿Qué habilidades debes desarrollar para enfocarte en lo único?")
+    # Sidebar para ajustar el journey de prioridades
+
+    st.sidebar.header("Paso 2: Ingresa los datos de tus habilidades para lograr lo Único!")
+    st.sidebar.markdown("##### *Realiza una autovaloración de las habilidades que consideras que debes desarrollar, el nivel que consideras que tienes actualmente y cual debes alcanzar*")
+    skills_data = {
+        'Habilidad': [
+            'Comunicación',                  # Importante para transmitir información y colaborar con el equipo.
+            'Gestión de Proyectos',          # Necesaria para planificar, ejecutar y supervisar proyectos eficientemente.
+            'Análisis de Datos',             # Habilidad para interpretar datos y tomar decisiones informadas.
+            'Programación Básica',           # Conocimiento de herramientas tecnológicas para implementar soluciones.
+            'Liderazgo',                     # Clave para guiar y motivar a los miembros del equipo.
+            'Pensamiento Crítico',           # Habilidad para resolver problemas y tomar decisiones efectivas.
+            'Gestión del Cambio',            # Capacidad para implementar cambios organizativos sin interrupciones.
+            'Gestión del Tiempo',            # Importante para priorizar tareas y cumplir plazos.
+            'Conocimientos en Tecnología',   # Familiaridad con herramientas y sistemas de gestión que pueden facilitar procesos.
+            'Capacitación y Desarrollo',     # Habilidad para entrenar y desarrollar al equipo en nuevas herramientas o procesos.
+            'Planificación Estratégica'       # Capacidad para alinear las operaciones con los objetivos organizacionales.
+        ],
+        'Habilidad Actual': [3, 4, 2, 3, 3, 4, 2, 3, 3, 2, 3],  # Evaluación de habilidades actuales
+        'Habilidad Requerida': [5, 5, 4, 4, 4, 5, 4, 5, 4, 3, 4]  # Habilidades necesarias para lograr el propósito
+    }
+
+    # Asegúrate de que todas las listas tengan la misma longitud
+    skills_df = pd.DataFrame(skills_data)
+    skills_df = st.sidebar.data_editor(skills_df, key="skills_df")
+
+    # Crear columnas para el heatmap y el gráfico de radar
+    col3, col4 = st.columns(2)
+
+    # Mostrar matriz de habilidades como heatmap usando Plotly
+    with col3:
+        st.markdown("### ¿Dónde estás vs. dónde debes estar?")
+
+        # Creación del heatmap con escala de color 'Greens'
+        heatmap_fig = go.Figure(data=go.Heatmap(
+            z=skills_df[['Habilidad Actual', 'Habilidad Requerida']].values,  # Los valores de habilidad actual y requerida
+            x=['Habilidad Actual', 'Habilidad Requerida'],  # Ejes x
+            y=skills_df['Habilidad'],  # Ejes y
+            colorscale='Greens',  # Escala de colores que va de verde oscuro (bajo) a verde brillante (alto)
+            colorbar=dict(title='Nivel de Habilidad')
+        ))
+
+        heatmap_fig.update_layout(
+            title='Heatmap de Habilidades',
+            template="plotly_white",
+            yaxis=dict(title='Habilidad')
+        )
+        
+        st.plotly_chart(heatmap_fig, use_container_width=True)
+
+    # Gráfico de radar para el análisis de brechas
+    with col4:
+        st.markdown("### ¿Cuál habilidad debes desarrollar más?")
+
+        fig_radar = go.Figure()
+
+        # Trazos de habilidades requeridas (verde brillante para niveles altos)
+        fig_radar.add_trace(go.Scatterpolar(
+            r=skills_df['Habilidad Requerida'],
+            theta=skills_df['Habilidad'],
+            fill='toself',
+            name='Habilidad Requerida',
+            line=dict(color='rgba(0, 100, 0, 0.7)'),  # Verde oscuros
+            fillcolor='rgba(0, 100, 0, 0.2)'  # Verde oscuro para el área
+        ))
+
+        # Trazos de habilidades actuales (verde oscuro para niveles bajos)
+        fig_radar.add_trace(go.Scatterpolar(
+            r=skills_df['Habilidad Actual'],
+            theta=skills_df['Habilidad'],
+            fill='toself',
+            name='Habilidad Actual',
+            line=dict(color='rgba(0, 235, 0, 0.7)'),  # Verde brillante 
+            fillcolor='rgba(0, 235, 0, 0.7)'  # Verde claro para el área
+        ))
+
+        fig_radar.update_layout(
+            polar=dict(
+                radialaxis=dict(
+                    visible=True,
+                    range=[0, 5]  # Rango de habilidades
+                )),
+            showlegend=True,
+            template="plotly_white",
+            title="Análisis de Brechas en Habilidades"
+        )
+
+        st.plotly_chart(fig_radar, use_container_width=True)
+
+    # Sección 3: Journey Map (Funnel o Bowtie)
+    st.header("Traza tu hoja de ruta: Escribe tus actividades prioritarias y los resultados que esperas!")
+
+    # Sidebar para ajustar el journey de prioridades
+    st.sidebar.header("Paso 3: Ingresa los datos de tu hoja de ruta y resultados esperados, y enfocate en ellos!")
+    st.sidebar.markdown("##### *En este punto ya sabes en que inviertes el tiempo y que decisiones debes tomar, además sabes las habilidades que debes desarrollar. Ingresa las actividades prioritarias para alcanzar lo único!, ingresa los resultados actuales y esperados al desarrollar lo único y concentrate en ellos!*")
+
+    # Datos de actividades prioritarias con KPI medibles y tiempos
+    journey_data = {
+        'Prioridad': [
+            'Definir la estrategia del sistema de gestión',
+            'Análisis de requerimientos',
+            'Implementación del sistema de gestión',
+            'Optimización de procesos existentes',
+            'Reuniones con clientes clave',
+            'Capacitación del equipo sobre el nuevo sistema',
+            'Revisión de KPIs establecidos'
+        ],
+        'Resultado': [
+            'Número de no conformidades',            # KPI para medir la efectividad de la estrategia
+            'Número de requerimientos definidos',     # KPI para medir el alcance del análisis
+            'Satisfacción del usuario (%)',           # KPI de satisfacción tras la implementación
+            'Eficiencia del proceso (horas)',         # KPI para evaluar la eficiencia del proceso
+            'Número de decisiones informadas',        # KPI para medir la efectividad de las reuniones
+            'Número de capacitaciones completadas',   # KPI para medir el alcance de la capacitación
+            'Costo de implementación (USD)'           # KPI relacionado con el costo
+        ],
+        'Inicio': [
+            '2024-10-01',
+            '2024-10-03',
+            '2024-10-10',
+            '2024-10-15',
+            '2024-10-20',
+            '2024-10-25',
+            '2024-10-30'
+        ],
+        'Fin': [
+            '2024-10-02',
+            '2024-10-04',
+            '2024-10-14',
+            '2024-10-25',
+            '2024-10-22',
+            '2024-10-30',
+            '2024-11-05'
+        ],
+        'KPI Actual': [15, 8, 70, 30, 5, 1, 2000],  # Valores actuales de KPIs
+        'KPI Esperado': [5, 10, 90, 10, 20, 3, 800],  # Valores esperados de KPIs
+        'Mejor': ['<', '>', '>', '<', '>', '>', '<']  # Indica si el KPI debe mejorar o disminuir
+    }
+
+    # Crear DataFrame
+    journey_df = pd.DataFrame(journey_data)
+    journey_df = st.sidebar.data_editor(journey_df, key="journey_df")
+
+    # Calcular el tiempo basado en las fechas (en horas)
+    journey_df['Inicio'] = pd.to_datetime(journey_df['Inicio'])
+    journey_df['Fin'] = pd.to_datetime(journey_df['Fin'])
+    journey_df['Tiempo (horas)'] = (journey_df['Fin'] - journey_df['Inicio']).dt.days * 8  # Suponiendo 8 horas por día
+
+    # Calcular el porcentaje de mejora considerando la dirección
+    def calculate_percentage_improvement(current, expected, direction):
+        if current == 0 and expected > 0:
+            return 100  # Mejora completa al ir de 0 a un valor positivo
+        elif current > 0 and expected == 0:
+            return -100  # Disminución completa
+        elif current == 0 and expected == 0:
+            return 0  # Sin cambio
+        else:
+            if direction == '>':
+                return ((expected - current) / current) * 100  # Mejora esperada
+            elif direction == '<':
+                return ((current - expected) / current) * 100  # Disminución esperada
+
+    # Aplicar la función para calcular el porcentaje de mejora
+    journey_df['Porcentaje Mejora'] = journey_df.apply(
+        lambda row: calculate_percentage_improvement(
+            row['KPI Actual'], 
+            row['KPI Esperado'], 
+            row['Mejor']
+        ), 
+        axis=1
+    )
+
+    # Normalizar los valores para el funnel
+    max_tiempo = journey_df['Tiempo (horas)'].max()
+    max_porcentaje_mejora = journey_df['Porcentaje Mejora'].max()
+
+    journey_df['Tiempo Normalizado'] = journey_df['Tiempo (horas)'] / max_tiempo * 100  # Normalización al rango 0-100
+    journey_df['Porcentaje Mejora Normalizado'] = journey_df['Porcentaje Mejora'] / max_porcentaje_mejora * 100  # Normalización al rango 0-100
+
+    # Obtener el número de prioridades para ajustar el eje 'y' dinámicamente
+    num_prioridades = len(journey_df['Prioridad'])
+
+    # Colores para el Funnel
+    color_actividades = 'rgba(0, 100, 255, 0.8)'  # Color azul para actividades priorizadas
+    color_resultados = 'rgba(255, 165, 0, 0.8)'  # Color naranja para resultados esperados
+
+    # Gráfico tipo funnel (bowtie) para mostrar el journey map
+    fig_journey = go.Figure()
+
+    # Funnel de actividades priorizadas (vertical)
+    fig_journey.add_trace(go.Funnel(
+        y=journey_df['Tiempo Normalizado'],
+        x=journey_df['Prioridad'],  # Mostrar el tiempo normalizado de cada actividad
+        textinfo="value+label",
+        name="Actividades Prioritarias",
+        marker=dict(color=color_actividades),  # Aplicar color uniforme para las actividades
+        orientation="v"  # Mantener orientación vertical
+    ))
+
+    # Funnel de resultados esperados (vertical)
+    fig_journey.add_trace(go.Funnel(
+        y=journey_df['Porcentaje Mejora Normalizado'],  # Usar el porcentaje de mejora como resultado
+        x=journey_df['Resultado'],  # Mostrar el KPI como resultado
+        textinfo="value+label",
+        name="Resultados Esperados",
+        marker=dict(color=color_resultados),  # Aplicar color uniforme para los resultados
+        orientation="v"  # Mantener orientación vertical
+    ))
+
+    # Actualizar la visualización del gráfico
+    fig_journey.update_layout(
+        template="plotly_white",
+        title="Journey Map: Actividades Prioritarias y Resultados Esperados",
+        funnelmode="stack"
+    )
+
+    st.plotly_chart(fig_journey, use_container_width=True)
+
+    # --------------------------- Gantt Chart -----------------------------------
+
+    # Crear DataFrame para las actividades priorizadas y fechas
+    eventos = journey_df[['Prioridad', 'Inicio', 'Fin']].copy()
+    eventos.columns = ['Evento', 'Fecha de Inicio', 'Fecha de Fin']  # Renombrar columnas
+
+    # Crear el gráfico de Gantt con una paleta de colores predefinida
+    fig_gantt = px.timeline(
+        eventos,
+        x_start="Fecha de Inicio", 
+        x_end="Fecha de Fin", 
+        y="Evento", 
+        color='Evento',  # Colores automáticos basados en la actividad
+        title='Gráfico de Gantt de Actividades Prioritarias',
+        color_discrete_sequence=px.colors.qualitative.Pastel  # Usar una paleta clara para asegurar legibilidad
+    )
+
+    # Ajustar las configuraciones del gráfico de Gantt
+    fig_gantt.update_layout(
+        template="plotly_white"  # Usar un tema claro para evitar colores oscuros en la descarga
+    )
+
+    # Mostrar el gráfico en Streamlit
+    st.plotly_chart(fig_gantt, use_container_width=True)
+
+    # --------------------------- Download Chart -----------------------------------
+    def export_figures_to_html(figures, title="Exported Figures"):
+        html = f"<html><head><title>{title}</title></head><body>"
+        for fig in figures:
+            html += fig.to_html(full_html=False, include_plotlyjs='cdn')
+        html += "</body></html>"
+        return html
+
+    # Recopilar todas las figuras que deseas exportar
+    figuras_a_exportar = [fig_eisenhower, fig_pareto, heatmap_fig, fig_radar,fig_journey, fig_gantt]
+
+    # Crear el HTML para descargar
+    html_export = export_figures_to_html(figuras_a_exportar, title="Exportación de Gráficos de la Aplicación")
+    st.markdown("### Descarga tus gráficos ")   
+    # Añadir un botón de descarga al final de la pestaña
+    st.download_button(
+        label="Descargar Gráficos en HTML",
+        data=html_export,
+        file_name="aplicacion_graficos.html",
+        mime="text/html"
+    )
+
+
+# Pestaña 3: Acerca de mí
+with tabs[2]:
+    st.header("Acerca de mí")
+    acerca_de_mi = """
+    ¡Hola! Soy Migue, desarrollo herramientas para facilitar la visualización y organización de ideas mediante visualizaciones interactivas. Esta aplicación está diseñada para ayudarte a estructurar tus pensamientos de manera eficiente y creativa, utilizando tecnologías de desarrollo de aplicaciones en Python.
+
+    **Características de la Aplicación:**
+    - **Interfaz Intuitiva:** Agrega tus ideas principales y datos en la barra lateral
+    - **Visualización Interactiva:** Explora tus visualizaciones de manera dinámica y visualmente atractiva.
+ 
+    **Contacto:**
+    - **Correo Electrónico:** [mail](mailto:josemiguelaguilart.com)
+    - **LinkedIn:** [LinkedIn](https://www.linkedin.com/in/josemaguilar/)
+    """
     st.markdown(acerca_de_mi)