Update app.py

app.py

@@ -10,20 +10,15 @@ custom_css = """
 
 /* Variables globales */
 :root {
-  --primary-color: #7c3aed;           /* Violeta intenso */
-  --primary-hover: #6d28d9;           /* Violeta más oscuro al hacer hover */
-  
-  --secondary-color: #f1f5f9;         /* Gris muy claro para fondos (más neutro que blanco puro) */
-  
-  --text-primary: #1e293b;   /* Azul grisáceo oscuro, re-contrastante */
-  --text-secondary: #334155; /* Gris azulado, claro pero firme */
-  
-  --border-color: #cbd5e1;            /* Gris medio, elegante y suave para bordes */
-  
-  --success-color: #10b981;           /* Verde esmeralda */
-  --error-color: #ef4444;             /* Rojo coral */
-  --warning-color: #f59e0b;           /* Mostaza vibrante */
-  
+  --primary-color: #7c3aed;
+  --primary-hover: #6d28d9;
+  --secondary-color: #f1f5f9;
+  --text-primary: #0f172a;       /* texto principal fuerte */
+  --text-secondary: #475569;     /* texto gris oscuro */
+  --border-color: #cbd5e1;
+  --success-color: #10b981;
+  --error-color: #ef4444;
+  --warning-color: #f59e0b;
   --gradient-bg: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
 }
 
@@ -256,24 +251,19 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scrape
         )
 
     gr.HTML("""
-    <div class="app-header" style="margin-top: 1rem; background-color: #e0f2ff; color: #1e293b; padding: 1.5rem; border-radius: 12px; border: 1px solid #b6defc; font-size: 0.95rem; line-height: 1.6; font-weight: 500;">
-  <div style="margin-bottom: 0.75rem; font-weight: 700; color: #0369a1;">
-    🔹 Información de uso
-  <div class="app-header" style="margin-top: 1rem; color: #1e293b; font-size: 0.95rem; line-height: 1.6; background-color: #e0f2fe; border-radius: 10px; padding: 1rem; border: 1px solid #bae6fd;">
-  <div style="margin-bottom: 0.5rem; color: #2563eb; font-weight: bold;">
-    <span style="color: #3b82f6;">🔷 Información de uso</span>
-  </div>
-
-  <div style="padding-left: 1rem;">
-    <div><strong style="color: #0f172a;">URLs flexibles:</strong> <span style="color: #334155;">Intenta normalizar URLs incompletas (e.g., añadiendo <code>https://</code>).</span></div>
-    <div><strong style="color: #0f172a;">Detección de contenido:</strong> <span style="color: #334155;">Identifica si la URL es una imagen o una página web.</span></div>
-    <div><strong style="color: #0f172a;">Optimizado para Copilot:</strong> <span style="color: #334155;">Los archivos generados buscan compatibilidad.</span></div>
-    <div><strong style="color: #0f172a;">Formatos:</strong> <span style="color: #334155;">PDF (preserva estructura visual si es texto o imagen directa) y TXT (texto plano).</span></div>
-    <div><strong style="color: #0f172a;">Codificación:</strong> <span style="color: #334155;">UTF-8 para TXT. Soporte Unicode para PDF con fuentes DejaVu (si están disponibles en el servidor) o Arial.</span></div>
-    <div><strong style="color: #0f172a;">Fuente PDF:</strong> <span style="color: #334155;">Si el archivo <code>DejaVuSansCondensed.ttf</code> está en el servidor o en una carpeta <code>fonts</code>, se usará para mejor soporte Unicode.</span></div>
-  </div>
+<div style="background-color: var(--secondary-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; max-width: 720px; margin: auto; font-family: 'Segoe UI', sans-serif; color: var(--text-primary);">
+  <h3 style="color: var(--primary-color); font-weight: 700; margin-bottom: 1rem;">🔷 Información de uso</h3>
+  
+  <ul style="list-style: none; padding-left: 0; line-height: 1.7;">
+    <li><strong>URLs flexibles:</strong> <span style="color: var(--text-secondary);">Intenta normalizar URLs incompletas (e.g., añadiendo <code>https://</code>).</span></li>
+    <li><strong>Detección de contenido:</strong> <span style="color: var(--text-secondary);">Identifica si la URL es una imagen o una página web.</span></li>
+    <li><strong>Optimizado para Copilot:</strong> <span style="color: var(--text-secondary);">Los archivos generados buscan compatibilidad.</span></li>
+    <li><strong>Formatos:</strong> <span style="color: var(--text-secondary);">PDF (preserva estructura visual si es texto o imagen directa) y TXT (texto plano).</span></li>
+    <li><strong>Codificación:</strong> <span style="color: var(--text-secondary);">UTF-8 para TXT. Soporte Unicode para PDF con fuentes DejaVu o Arial.</span></li>
+    <li><strong>Fuente PDF:</strong> <span style="color: var(--text-secondary);">Si el archivo <code>DejaVuSansCondensed.ttf</code> está en el servidor o en una carpeta <code>fonts</code>, se usará para mejor soporte Unicode.</span></li>
+  </ul>
 
-  <div style="margin-top: 0.5rem; color: #334155;">Desarrollado para facilitar la integración con herramientas de IA.</div>
+  <p style="margin-top: 1rem; color: var(--text-secondary);">Desarrollado para facilitar la integración con herramientas de IA.</p>
 </div>
     """)