**Enhance UI with dark gradient theme and refined component styles**

app.py

@@ -1065,12 +1065,19 @@ with gr.Blocks(
     title="KESHERAT AI - Inspección Inteligente de Turbinas Eólicas",
     theme=gr.themes.Soft(),
     css="""
-    /* Estilos globales mejorados */
+    /* Estilos globales con fondo oscuro profesional */
+    body, html {
+        background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
+        min-height: 100vh !important;
+    }
+
     .gradio-container {
         max-width: 1400px !important;
         margin: 0 auto !important;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-        background-color: #f8f9fa !important;
+        background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
+        min-height: 100vh !important;
+        padding: 20px !important;
     }
 
     /* Professional header with industrial theme */
@@ -1118,14 +1125,14 @@ with gr.Blocks(
         font-weight: 500 !important;
     }
 
-    /* Secciones con mejor espaciado */
+    /* Secciones con mejor espaciado y contraste */
     .section-container {
-        background: white;
+        background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%);
         border-radius: 12px;
         padding: 25px;
         margin: 20px 0;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-        border: 1px solid #e9ecef;
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        border: 1px solid #95a5a6;
     }
 
     /* Professional button styling */
@@ -1316,7 +1323,7 @@ with gr.Blocks(
     .file-upload, .upload-area {
         border: 3px dashed #7f8c8d !important;
         border-radius: 15px !important;
-        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+        background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%) !important;
         padding: 40px !important;
         text-align: center !important;
         transition: all 0.3s ease !important;
@@ -1328,9 +1335,9 @@ with gr.Blocks(
     [data-testid*="video"]:hover, [data-testid*="image"]:hover,
     .file-upload:hover, .upload-area:hover {
         border-color: #2c3e50 !important;
-        background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%) !important;
+        background: linear-gradient(135deg, #d5dbdb 0%, #95a5a6 100%) !important;
         transform: translateY(-2px) !important;
-        box-shadow: 0 8px 25px rgba(44, 62, 80, 0.15) !important;
+        box-shadow: 0 8px 25px rgba(44, 62, 80, 0.25) !important;
     }
 
     /* Professional upload text styling */
@@ -1393,7 +1400,7 @@ with gr.Blocks(
     with gr.Group(visible=False) as app_group:
         # Sección de instrucciones principales
         gr.HTML("""
-        <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin: 15px 0;">
+        <div style="background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%); border: 1px solid #95a5a6; border-radius: 8px; padding: 20px; margin: 15px 0;">
             <h3 style="margin-top: 0; color: #2c3e50; font-weight: 600; font-size: 18px;">Instrucciones de Uso</h3>
             <ol style="margin-bottom: 0; padding-left: 20px; color: #2c3e50; font-weight: 400; line-height: 1.6;">
                 <li style="margin-bottom: 8px; color: #2c3e50;"><strong style="color: #2c3e50;">Selecciona el tipo de archivo:</strong> Elige entre las pestañas "Vídeo" o "Imagen" según tu contenido</li>
@@ -1442,7 +1449,7 @@ with gr.Blocks(
             # Configuración tab: classes and sensitivity controls
             with gr.TabItem("Configuración Avanzada"):
                 gr.HTML("""
-                <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin: 15px 0;">
+                <div style="background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%); border: 1px solid #95a5a6; border-radius: 8px; padding: 20px; margin: 15px 0;">
                     <h3 style="margin-top: 0; color: #2c3e50; font-weight: 600; font-size: 18px;">Personalización de Sensibilidad</h3>
                     <p style="margin-bottom: 0; color: #2c3e50; font-weight: 400; line-height: 1.6;">
                         Ajusta estos valores para controlar qué tan sensible es la detección para cada tipo de defecto.
@@ -1455,7 +1462,7 @@ with gr.Blocks(
                 with gr.Row():
                     with gr.Column():
                         gr.HTML("""
-                        <div style="background: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e0e0e0;">
+                        <div style="background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #95a5a6;">
                             <h4 style="margin-top: 0; color: #2c3e50; font-weight: 600; font-size: 16px;">Controles de Sensibilidad</h4>
                             <p style="color: #2c3e50; margin-bottom: 0; font-size: 14px; font-weight: 400;">
                                 Los cambios se aplican automáticamente. Valores recomendados para principiantes están preseleccionados.