Update app.py

app.py

@@ -1,4 +1,3 @@
-# app.py
 import gradio as gr
 import anthropic
 import os  # Importa el módulo os para manejar variables de entorno
@@ -45,7 +44,25 @@ logo_colors = {
     "text_color": "#212529"
 }
 
-with gr.Blocks(css=".gradio-container { background-color: " + logo_colors["background"] + "; }") as demo:
+with gr.Blocks(css="""
+    .gradio-container { background-color: """ + logo_colors["background"] + """; }
+    @media (max-width: 768px) {
+        .gradio-column {
+            width: 100% !important;
+            margin-bottom: 20px;
+        }
+    }
+    @media (min-width: 769px) {
+        .gradio-row {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .gradio-column {
+            flex: 1;
+            padding: 10px;
+        }
+    }
+    """) as demo:
     gr.Markdown(
         f"""
         <h1 style="color: {logo_colors['primary']}; text-align: center;">Generador de Titulares</h1>
@@ -54,13 +71,14 @@ with gr.Blocks(css=".gradio-container { background-color: " + logo_colors["backg
     )
     
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=2, elem_id="input-col"):
             number_of_headlines = gr.Number(label="Número de Titulares", value=5)
             target_audience = gr.Textbox(label="Público Objetivo", placeholder="Ejemplo: Estudiantes Universitarios")
             product = gr.Textbox(label="Producto", placeholder="Ejemplo: Curso de Inglés")
+        
+        with gr.Column(scale=1, elem_id="result-col", align="end"):
             submit_btn = gr.Button("Generar Titulares", elem_id="submit-btn")
-    
-    output = gr.Textbox(label="Titulares Generados", lines=10)
+            output = gr.Textbox(label="Titulares Generados", lines=10)
 
     submit_btn.click(
         fn=gradio_generate_headlines,