Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import os
 import re
 import json
@@ -1267,18 +1266,14 @@ def info_html() -> str:
     <div class="info-card pop-in">
       <h2>Metodología de evaluación y construcción del resultado</h2>
       <p>Esta aplicación está diseñada para que cualquier persona pueda entender de dónde salen los resultados. El sistema evalúa la formulación de un reto a partir de la lógica del marco Cynefin y luego muestra una lectura cuantificada que puede auditarse. El resultado no debe leerse como una verdad absoluta. Debe leerse como una operacionalización transparente de rasgos de complejidad.</p>
-
       <h3>1. Qué es Cynefin y por qué se usa aquí</h3>
       <p>Cynefin es un marco de sentido y decisión desarrollado por Dave Snowden y colaboradores para distinguir contextos simples, complicados, complejos, caóticos y de desorden. Su utilidad central consiste en recordar que no todos los problemas admiten la misma forma de intervención. En contextos complejos no suele existir una respuesta única previa. Lo apropiado es explorar, observar patrones emergentes y ajustar. Ese principio es la base conceptual del evaluador.</p>
-
       <p><b>Referencias centrales</b><br>
       Kurtz, C. F., & Snowden, D. J. 2003. The new dynamics of strategy. IBM Systems Journal, 42(3), 462–483.<br>
       Snowden, D. J., & Boone, M. E. 2007. A Leader’s Framework for Decision Making. Harvard Business Review, 85(11), 68–76.<br>
       Snowden, D. J. 2010. The Cynefin framework and naturalizing sense-making.</p>
-
       <h3>2. Qué intenta medir la aplicación</h3>
       <p>La aplicación no intenta determinar si un reto es “bueno” en términos generales. Intenta estimar qué tan visible es su estructura de complejidad. Para ello usa siete criterios que condensan rasgos frecuentes de los problemas complejos en la literatura de Cynefin y en su uso práctico para diseño de intervención.</p>
-
       <table style="width:100%;border-collapse:collapse;background:white;border:1px solid #e5e7eb;">
         <tr style="background:#eff6ff;">
           <th style="padding:10px;text-align:left;">ID</th>
@@ -1329,10 +1324,8 @@ def info_html() -> str:
           <td style="padding:10px;">Snowden 2010, sense-making adaptativo y patrones emergentes.</td>
         </tr>
       </table>
-
       <h3>3. Flujo metodológico completo</h3>
       <p>La aplicación sigue una secuencia fija de procesamiento. Cada capa cumple una función distinta y puede dejar rastros visibles en la pestaña de diagnóstico.</p>
-
       <table style="width:100%;border-collapse:collapse;background:white;border:1px solid #e5e7eb;">
         <tr style="background:#eff6ff;">
           <th style="padding:10px;text-align:left;">Fase</th>
@@ -1360,13 +1353,10 @@ def info_html() -> str:
           <td style="padding:10px;">Mantiene la app utilizable en escenarios mínimos.</td>
         </tr>
       </table>
-
       <h3>4. Papel del LLM dentro de la metodología</h3>
       <p>El LLM no define la teoría. La teoría la define Cynefin. El LLM solo intenta producir una evaluación estructurada en formato JSON a partir de un prompt que ya está guiado por criterios, ejemplos y restricciones de salida. Si responde bien, su salida se usa. Si no responde, la aplicación cambia a métodos locales controlados. En otras palabras, el LLM es una capa de conveniencia y no la fuente conceptual del sistema.</p>
-
       <h3>5. Papel del motor semántico local</h3>
       <p>El motor local usa un modelo multilingüe de sentence-transformers para representar texto como vectores. Luego compara el reto con dos tipos de referencia. Primero con anclas conceptuales específicas por criterio. Segundo con ejemplos guía completos. Esa doble comparación permite medir afinidad conceptual aunque la redacción del usuario no use exactamente las mismas palabras.</p>
-
       <h3>6. Fórmula del puntaje global</h3>
       <div style="background:white;border:1px solid #e5e7eb;border-radius:20px;padding:16px;margin:14px 0;">
         <div style="font-family:monospace;background:#f8fafc;border-radius:12px;padding:12px;">
@@ -1374,7 +1364,6 @@ def info_html() -> str:
         </div>
       </div>
       <p>La aplicación usa promedio simple para preservar interpretabilidad. Todos los criterios pesan igual en la capa final. Esa decisión es metodológica y busca trazabilidad. Quien lea el resultado puede reproducir el cálculo sin una caja negra adicional.</p>
-
       <h3>7. Fórmula del puntaje por criterio en modo semántico local</h3>
       <div style="background:white;border:1px solid #e5e7eb;border-radius:20px;padding:16px;margin:14px 0;">
         <div style="font-family:monospace;background:#f8fafc;border-radius:12px;padding:12px;">
@@ -1385,7 +1374,6 @@ def info_html() -> str:
           boost_actores)
         </div>
       </div>
-
       <table style="width:100%;border-collapse:collapse;background:white;border:1px solid #e5e7eb;">
         <tr style="background:#eff6ff;">
           <th style="padding:10px;text-align:left;">Componente</th>
@@ -1413,7 +1401,6 @@ def info_html() -> str:
           <td style="padding:10px;">Compensa que la multiplicidad de actores necesita una señal específica.</td>
         </tr>
       </table>
-
       <h3>8. Cómo se transforma la similitud a un score interpretable</h3>
       <div style="background:white;border:1px solid #e5e7eb;border-radius:20px;padding:16px;margin:14px 0;">
         <div style="font-family:monospace;background:#f8fafc;border-radius:12px;padding:12px;">
@@ -1423,14 +1410,12 @@ def info_html() -> str:
         </div>
       </div>
       <p>La similitud semántica cruda no se entrega directamente porque no sería intuitiva para un usuario general. Por eso se reescala a un rango más legible. El límite inferior evita falsos ceros absolutos. El límite superior evita que cualquier parecido moderado dispare máximos artificiales.</p>
-
       <h3>9. Calibración global posterior</h3>
       <p>Después del promedio simple, la aplicación puede aplicar un piso si el reto se parece mucho a los ejemplos guía. Esto existe para corregir un problema frecuente. Algunos retos tienen buena estructura compleja, pero expresan esa estructura con vocabulario distinto y por eso podrían salir subestimados.</p>
       <ul>
         <li>Si la similitud con ejemplos guía es al menos 0.58 y el promedio cae debajo de 72, se eleva a 72.</li>
         <li>Si la similitud con ejemplos guía es al menos 0.68 y el promedio cae debajo de 78, se eleva a 78.</li>
       </ul>
-
       <h3>10. Cómo se interpreta cada rango</h3>
       <table style="width:100%;border-collapse:collapse;background:white;border:1px solid #e5e7eb;">
         <tr style="background:#eff6ff;">
@@ -1459,13 +1444,10 @@ def info_html() -> str:
           <td style="padding:10px;">El texto ofrece poca evidencia para sostener ese criterio.</td>
         </tr>
       </table>
-
-      <h3>11. Cómo leer la explicabilidad por criterio</h3>
+      <h3>11. Cómo se leer la explicabilidad por criterio</h3>
       <p>Para cada criterio la aplicación puede mostrar cuatro huellas. Términos detectados, fragmentos activados del texto, similitud con anclas y score final. Eso permite reconstruir por qué un criterio pudo salir más alto o más bajo que otro. La app intenta que el número no quede separado de su rastro.</p>
-
       <h3>12. Qué ocurre si el acceso remoto falla</h3>
       <p>Si aparece un error 401 Unauthorized o no llega una respuesta válida desde Hugging Face, la aplicación cambia a motor local. La teoría evaluativa sigue siendo la misma. Lo que cambia es la capa computacional utilizada para producir el número.</p>
-
       <h3>13. Bibliografía básica utilizada en el diseño conceptual</h3>
       <p>Snowden, D. J., & Boone, M. E. 2007. A Leader’s Framework for Decision Making. Harvard Business Review, 85(11), 68–76.<br>
       Kurtz, C. F., & Snowden, D. J. 2003. The new dynamics of strategy. IBM Systems Journal, 42(3), 462–483.<br>
@@ -1482,7 +1464,7 @@ def reset_all():
         [],
         idx,
         stepper_html(idx),
-        "", "", "<div></div>", "Sin diagnóstico todavía.", "", "", "", "", "Sin actores agregados todavía.", None, "", "", None, gr.update(value=None, visible=False), "🔴 Estado remoto no verificado",
+        "", "", "<div></div>", "Sin diagnóstico todavía.", "", "", "", "", "Sin actores agregados todavía.", None, "", "", None, gr.update(value=None, visible=False), "🟡 Verificando disponibilidad del LLM…",
         *render_step_visibility(idx),
         gr.update(interactive=False),
         gr.update(interactive=False)
@@ -1499,34 +1481,400 @@ def build_app():
     theme = gr.themes.Soft(primary_hue="blue", secondary_hue="slate", neutral_hue="slate")
 
     css = """
-    .app-shell {max-width: 1280px; margin: 0 auto;}
-    .hero {padding: 10px 4px 18px 4px;}
-    .hero h1 {font-size: 32px; font-weight: 800; margin: 0 0 6px 0;}
-    .hero p {color: #6b7280; margin: 0;}
-    .one-card, .wizard-card, .info-card, .diag-card {border-radius: 28px; border: 1px solid #e5e7eb; padding: 18px; background: #fbfbfd;}
-    .stepper {display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 18px 0;}
-    .step {padding:10px 14px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#6b7280; font-weight:700; transition: all .25s ease;}
-    .step.active {background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; transform: translateY(-1px);}
-    .step.done {background:#ecfdf5; color:#15803d; border-color:#bbf7d0;}
-    .criterion-grid {display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; margin-top:16px;}
-    .criterion-card {border-radius:22px; border:1px solid #e5e7eb; background:white; padding:16px; box-shadow: 0 1px 0 rgba(17,24,39,.03);}
-    .criterion-head {display:flex; justify-content:space-between; gap:12px; align-items:center;}
-    .criterion-id {font-weight:800; color:#2563eb;}
-    .criterion-label {margin-top:8px; color:#111827; font-weight:600;}
-    .criterion-score {font-size:20px; font-weight:800;}
-    .global-score-card {border-radius:24px; background:white; border:1px solid #e5e7eb; padding:18px;}
-    .global-score-label {color:#6b7280; font-size:14px;}
-    .global-score-value {font-size:34px; font-weight:800; margin-top:4px;}
-    .global-score-model {font-size:12px; color:#6b7280; margin-top:4px;}
-    .bar {height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin-top:10px;}
-    .fill {height:100%; border-radius:999px;}
-    .animate-fill {animation: fillin .6s ease;}
-    .nav-row {display:flex; gap:12px;}
-    .pop-in {animation: popin .28s ease;}
-    .tag-pill {display:inline-block; font-size:11px; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; margin-right:6px; margin-top:8px;}
-    .evidence-pills {margin-top:8px;}
-    @keyframes fillin {from {width:0;} to {width:100%;}}
-    @keyframes popin {from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);}}
+    .app-shell {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding-left: 12px;
+        padding-right: 12px;
+        box-sizing: border-box;
+    }
+
+    .hero {
+        padding: 10px 4px 18px 4px;
+    }
+
+    .hero h1 {
+        font-size: 32px;
+        font-weight: 800;
+        margin: 0 0 6px 0;
+        line-height: 1.15;
+    }
+
+    .hero p {
+        color: #6b7280;
+        margin: 0;
+        line-height: 1.45;
+    }
+
+    .one-card, .wizard-card, .info-card, .diag-card {
+        border-radius: 28px;
+        border: 1px solid #e5e7eb;
+        padding: 18px;
+        background: #fbfbfd;
+        box-sizing: border-box;
+    }
+
+    .wizard-card {
+        overflow: hidden;
+    }
+
+    .stepper {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin: 8px 0 18px 0;
+    }
+
+    .step {
+        padding: 10px 14px;
+        border-radius: 999px;
+        border: 1px solid #e5e7eb;
+        background: #fff;
+        color: #6b7280;
+        font-weight: 700;
+        transition: all .25s ease;
+        white-space: nowrap;
+    }
+
+    .step.active {
+        background: #dbeafe;
+        color: #1d4ed8;
+        border-color: #bfdbfe;
+        transform: translateY(-1px);
+    }
+
+    .step.done {
+        background: #ecfdf5;
+        color: #15803d;
+        border-color: #bbf7d0;
+    }
+
+    .criterion-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 14px;
+        margin-top: 16px;
+    }
+
+    .criterion-card {
+        border-radius: 22px;
+        border: 1px solid #e5e7eb;
+        background: white;
+        padding: 16px;
+        box-shadow: 0 1px 0 rgba(17,24,39,.03);
+        box-sizing: border-box;
+    }
+
+    .criterion-head {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+    }
+
+    .criterion-id {
+        font-weight: 800;
+        color: #2563eb;
+    }
+
+    .criterion-label {
+        margin-top: 8px;
+        color: #111827;
+        font-weight: 600;
+        line-height: 1.35;
+    }
+
+    .criterion-score {
+        font-size: 20px;
+        font-weight: 800;
+        white-space: nowrap;
+    }
+
+    .global-score-card {
+        border-radius: 24px;
+        background: white;
+        border: 1px solid #e5e7eb;
+        padding: 18px;
+        box-sizing: border-box;
+    }
+
+    .global-score-label {
+        color: #6b7280;
+        font-size: 14px;
+    }
+
+    .global-score-value {
+        font-size: 34px;
+        font-weight: 800;
+        margin-top: 4px;
+        line-height: 1;
+    }
+
+    .global-score-model {
+        font-size: 12px;
+        color: #6b7280;
+        margin-top: 6px;
+        line-height: 1.4;
+    }
+
+    .bar {
+        height: 10px;
+        border-radius: 999px;
+        background: #e5e7eb;
+        overflow: hidden;
+        margin-top: 10px;
+    }
+
+    .fill {
+        height: 100%;
+        border-radius: 999px;
+    }
+
+    .animate-fill {
+        animation: fillin .6s ease;
+    }
+
+    .nav-row {
+        display: flex;
+        gap: 12px;
+        margin-top: 8px;
+    }
+
+    .pop-in {
+        animation: popin .28s ease;
+    }
+
+    .tag-pill {
+        display: inline-block;
+        font-size: 11px;
+        padding: 4px 8px;
+        border-radius: 999px;
+        background: #eff6ff;
+        color: #1d4ed8;
+        margin-right: 6px;
+        margin-top: 8px;
+    }
+
+    .evidence-pills {
+        margin-top: 8px;
+    }
+
+    .llm-status-wrap {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+
+    .llm-status-wrap .gr-button,
+    .primary-action-row .gr-button,
+    .nav-row .gr-button,
+    .actor-actions-mobile .gr-button {
+        min-height: 48px;
+    }
+
+    .primary-action-row {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    .actor-actions-mobile {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+
+    .gradio-container .gr-box,
+    .gradio-container .gr-panel {
+        box-sizing: border-box;
+    }
+
+    .gradio-container textarea,
+    .gradio-container input,
+    .gradio-container select {
+        font-size: 16px !important;
+    }
+
+    @keyframes fillin {
+        from {width: 0;}
+        to {width: 100%;}
+    }
+
+    @keyframes popin {
+        from {opacity: 0; transform: translateY(6px);}
+        to {opacity: 1; transform: translateY(0);}
+    }
+
+    @media (max-width: 1024px) {
+        .criterion-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .app-shell {
+            max-width: 100%;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .hero {
+            padding: 6px 2px 14px 2px;
+        }
+
+        .hero h1 {
+            font-size: 25px;
+            line-height: 1.15;
+            margin-bottom: 8px;
+        }
+
+        .hero p {
+            font-size: 14px;
+            line-height: 1.45;
+        }
+
+        .one-card, .wizard-card, .info-card, .diag-card {
+            padding: 12px;
+            border-radius: 20px;
+        }
+
+        .stepper {
+            gap: 8px;
+            margin: 6px 0 14px 0;
+            overflow-x: auto;
+            flex-wrap: nowrap;
+            padding-bottom: 4px;
+            scrollbar-width: thin;
+        }
+
+        .step {
+            padding: 9px 12px;
+            font-size: 13px;
+            flex: 0 0 auto;
+        }
+
+        .global-score-card,
+        .criterion-card {
+            border-radius: 18px;
+            padding: 14px;
+        }
+
+        .global-score-value {
+            font-size: 30px;
+        }
+
+        .criterion-score {
+            font-size: 18px;
+        }
+
+        .criterion-label {
+            font-size: 14px;
+        }
+
+        .primary-action-row,
+        .nav-row,
+        .actor-actions-mobile {
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .primary-action-row > *,
+        .nav-row > *,
+        .actor-actions-mobile > * {
+            width: 100%;
+        }
+
+        .llm-status-wrap {
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .llm-status-wrap .gr-button,
+        .primary-action-row .gr-button,
+        .nav-row .gr-button,
+        .actor-actions-mobile .gr-button {
+            width: 100%;
+        }
+
+        .evidence-pills {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+        }
+
+        .tag-pill {
+            margin-right: 0;
+            margin-top: 0;
+        }
+
+        .gradio-container .gr-markdown table {
+            display: block;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
+    }
+
+    @media (max-width: 520px) {
+        .app-shell {
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+
+        .hero h1 {
+            font-size: 22px;
+        }
+
+        .hero p {
+            font-size: 13px;
+        }
+
+        .one-card, .wizard-card, .info-card, .diag-card {
+            padding: 10px;
+            border-radius: 16px;
+        }
+
+        .step {
+            padding: 8px 11px;
+            font-size: 12px;
+        }
+
+        .global-score-card,
+        .criterion-card {
+            padding: 12px;
+            border-radius: 16px;
+        }
+
+        .global-score-value {
+            font-size: 28px;
+        }
+
+        .global-score-model {
+            font-size: 11px;
+        }
+
+        .criterion-head {
+            gap: 8px;
+        }
+
+        .criterion-score {
+            font-size: 17px;
+        }
+
+        .criterion-label {
+            font-size: 13px;
+        }
+
+        .gradio-container .gr-button {
+            font-size: 15px !important;
+        }
+
+        .gradio-container .gr-form,
+        .gradio-container .gr-box,
+        .gradio-container .gr-panel {
+            min-width: 0 !important;
+        }
+    }
     """
 
     with gr.Blocks(theme=theme, css=css, title=APP_NAME) as demo:
@@ -1547,13 +1895,21 @@ def build_app():
                     stepper = gr.HTML(stepper_html(0))
 
                     with gr.Group(visible=True) as step0:
-                        remote_status = gr.Markdown("🟡 Verificando disponibilidad del LLM…")
-                        remote_ping_btn = gr.Button("Volver a probar disponibilidad del LLM")
-                        reto_input = gr.Textbox(label="Paso 1 • Escribe el reto", lines=6, placeholder="Escribe una pregunta de al menos 100 caracteres.")
+                        with gr.Column(elem_classes=["llm-status-wrap"]):
+                            remote_status = gr.Markdown("🟡 Verificando disponibilidad del LLM…")
+                            remote_ping_btn = gr.Button("Volver a probar disponibilidad del LLM")
+
+                        reto_input = gr.Textbox(
+                            label="Paso 1 • Escribe el reto",
+                            lines=6,
+                            placeholder="Escribe una pregunta de al menos 100 caracteres."
+                        )
                         gr.Examples(examples=examples, inputs=[reto_input], label="Ejemplos guía")
-                        with gr.Row():
+
+                        with gr.Row(elem_classes=["primary-action-row"]):
                             eval_btn = gr.Button("Evaluar y continuar", variant="primary")
                             clear_btn = gr.Button("Reiniciar")
+
                         eval_md = gr.Markdown()
                         eval_chart = gr.HTML("<div></div>")
                         diagnostics_md = gr.Markdown("Sin diagnóstico todavía.")
@@ -1579,10 +1935,11 @@ def build_app():
                         with gr.Row():
                             actor_name = gr.Textbox(label="Actor", scale=3)
                             actor_role = gr.Textbox(label="Rol", scale=3)
-                        actor_add_btn = gr.Button("Agregar actor")
+                        with gr.Row(elem_classes=["actor-actions-mobile"]):
+                            actor_add_btn = gr.Button("Agregar actor")
+                            actor_remove_btn = gr.Button("Eliminar actor seleccionado")
                         actor_md = gr.Markdown("Sin actores agregados todavía.")
                         actor_select_remove = gr.Dropdown(label="Selecciona un actor para eliminar", choices=[], value=None)
-                        actor_remove_btn = gr.Button("Eliminar actor seleccionado")
 
                     with gr.Group(visible=False) as step5:
                         gr.Markdown("## Paso 6 • Gobernanza")
@@ -1638,19 +1995,28 @@ def build_app():
         )
 
         ask_def.click(
-            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(reto, "definicion", {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}),
+            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(
+                reto, "definicion",
+                {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}
+            ),
             inputs=[reto_hidden, definicion, relevancia, conexion, gobernanza, iniciativas, actors_state],
             outputs=[definicion]
         )
 
         ask_rel.click(
-            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(reto, "relevancia", {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}),
+            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(
+                reto, "relevancia",
+                {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}
+            ),
             inputs=[reto_hidden, definicion, relevancia, conexion, gobernanza, iniciativas, actors_state],
             outputs=[relevancia]
         )
 
         ask_con.click(
-            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(reto, "conexion", {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}),
+            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(
+                reto, "conexion",
+                {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}
+            ),
             inputs=[reto_hidden, definicion, relevancia, conexion, gobernanza, iniciativas, actors_state],
             outputs=[conexion]
         )
@@ -1668,13 +2034,19 @@ def build_app():
         )
 
         ask_gob.click(
-            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(reto, "gobernanza", {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}),
+            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(
+                reto, "gobernanza",
+                {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}
+            ),
             inputs=[reto_hidden, definicion, relevancia, conexion, gobernanza, iniciativas, actors_state],
             outputs=[gobernanza]
         )
 
         ask_ini.click(
-            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(reto, "iniciativas", {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}),
+            fn=lambda reto, d, r, c, g, i, actors: suggest_section_answer(
+                reto, "iniciativas",
+                {"definicion": d, "relevancia": r, "conexion": c, "gobernanza": g, "iniciativas": i, "actors": actors}
+            ),
             inputs=[reto_hidden, definicion, relevancia, conexion, gobernanza, iniciativas, actors_state],
             outputs=[iniciativas]
         )
@@ -1705,6 +2077,7 @@ def build_app():
             fn=lambda: "Sin diagnóstico todavía.",
             outputs=[diagnostics_tab_md]
         )
+
         demo.load(fn=remote_status_text, outputs=[remote_status])
 
     return demo