Update app.py

app.py

@@ -34,7 +34,7 @@ def responder(mensaje):
         return f"❌ Error: {str(e)}"
 
 # ============================================================
-# ✅ INTERFAZ CENTRADA CON BARRA INFERIOR FIJA
+# ✅ INTERFAZ SIMPLIFICADA: SOLO CAMPO, LIMPIAR Y ENVIAR
 # ============================================================
 with gr.Blocks(
     title="TAILA — IA Conversacional",
@@ -66,7 +66,7 @@ with gr.Blocks(
         margin: 20px auto !important;
     }
 
-    /* ENCABEZADO SUPERIOR (CENTRADO) */
+    /* ENCABEZADO SUPERIOR */
     .header {
         background-color: #075e54 !important;
         color: white !important;
@@ -146,18 +146,24 @@ with gr.Blocks(
         gap: 8px !important;
         flex-shrink: 0 !important;
     }
-    .bottom-bar .attach-btn {
+
+    /* BOTÓN LIMPIAR (IZQUIERDA) */
+    .bottom-bar .clean-btn {
         background: none !important;
         border: none !important;
-        font-size: 1.3rem !important;
+        color: #075e54 !important;
+        font-weight: 500 !important;
         cursor: pointer !important;
-        color: #555 !important;
-        padding: 4px 8px !important;
-        transition: transform 0.2s !important;
+        padding: 4px 12px !important;
+        font-size: 0.85rem !important;
+        transition: opacity 0.2s !important;
+        flex-shrink: 0 !important;
     }
-    .bottom-bar .attach-btn:hover {
-        transform: scale(1.1) !important;
+    .bottom-bar .clean-btn:hover {
+        opacity: 0.7 !important;
     }
+
+    /* CAMPO DE TEXTO (CENTRO) */
     .bottom-bar .input-field {
         flex: 1 !important;
         padding: 8px 12px !important;
@@ -172,19 +178,8 @@ with gr.Blocks(
         border-color: #075e54 !important;
         box-shadow: 0 0 0 2px rgba(7, 94, 84, 0.2) !important;
     }
-    .bottom-bar .clean-btn {
-        background: none !important;
-        border: none !important;
-        color: #075e54 !important;
-        font-weight: 500 !important;
-        cursor: pointer !important;
-        padding: 4px 12px !important;
-        font-size: 0.85rem !important;
-        transition: opacity 0.2s !important;
-    }
-    .bottom-bar .clean-btn:hover {
-        opacity: 0.7 !important;
-    }
+
+    /* BOTÓN ENVIAR (DERECHA) */
     .bottom-bar .send-btn {
         background-color: #075e54 !important;
         border: none !important;
@@ -200,6 +195,7 @@ with gr.Blocks(
         transition: background 0.2s, transform 0.2s !important;
         padding: 0 !important;
         min-width: 38px !important;
+        flex-shrink: 0 !important;
     }
     .bottom-bar .send-btn:hover {
         background-color: #0a7a6e !important;
@@ -230,9 +226,9 @@ with gr.Blocks(
             container=False
         )
 
-        # === BARRA INFERIOR FIJA (dentro del chat) ===
+        # === BARRA INFERIOR SIMPLIFICADA ===
         with gr.Row(elem_classes="bottom-bar"):
-            gr.HTML('<button class="attach-btn">➕</button>')
+            limpiar = gr.Button("Limpiar", elem_classes="clean-btn", variant="secondary", scale=0)
             msg = gr.Textbox(
                 placeholder="Escribe un mensaje...",
                 label="",
@@ -241,7 +237,6 @@ with gr.Blocks(
                 container=False,
                 scale=0
             )
-            limpiar = gr.Button("Limpiar", elem_classes="clean-btn", variant="secondary", scale=0)
             enviar = gr.Button("➤", elem_classes="send-btn", variant="primary", scale=0)
 
     estado = gr.State([])