Upload 5 files

Dockerfile

@@ -1,24 +1,13 @@
 FROM python:3.11-slim
 
-# 2. Establece el directorio de trabajo dentro del contenedor.
 WORKDIR /app
 
-# 3. Copia primero el archivo de requisitos.
-#    Esto aprovecha el caché de Docker: si no cambias tus requisitos,
-#    no se volverán a instalar en cada despliegue, haciéndolo más rápido.
 COPY requirements.txt .
 
-# 4. Instala las dependencias.
 RUN pip install --no-cache-dir -r requirements.txt
 
-# 5. Copia el resto de los archivos de tu proyecto al contenedor.
-#    Esto incluye app.py, los archivos .csv y la carpeta 'assets'.
 COPY . .
 
-# 6. Expón el puerto que usará la aplicación. Hugging Face usa 7860 por defecto.
 EXPOSE 7860
 
-# 7. El comando para iniciar la aplicación.
-#    Usamos Gunicorn para ejecutar el 'server' de tu 'app.py'.
-#    El host 0.0.0.0 es crucial para que sea accesible desde fuera del contenedor.
-CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "4", "app:server"]
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--threads", "4", "app:server"]

app.py

@@ -7,6 +7,10 @@ import plotly.graph_objects as go
 import pycountry_convert as pc
 import pycountry
 import gunicorn
+from apscheduler.schedulers.background import BackgroundScheduler
+from apscheduler.triggers.interval import IntervalTrigger
+import atexit
+from datetime import datetime, timezone # <-- AÑADE timezone
 
 iracing_ragions = {
     'US':['US'],
@@ -31,10 +35,25 @@ iracing_ragions = {
     'Benelux':['NL','BE','LU']
 }
 
+DATA_STATUS = {}
+LAST_SUCCESSFUL_STATUS = {}
+
 def load_and_process_data(filename):
     """Función para cargar y pre-procesar un archivo de disciplina."""
     print(f"Loading and processing {filename}...")
     df = pd.read_csv(filename)
+
+    # Nuevas columnas en mayúsculas
+    new_columns = [
+        'DRIVER', 'CUSTID', 'LOCATION', 'CLUB_NAME', 'STARTS', 'WINS', 
+        'AVG_START_POS', 'AVG_FINISH_POS', 'AVG_POINTS', 'TOP25PCNT', 
+        'LAPS', 'LAPSLEAD', 'AVG_INC', 'CLASS', 'IRATING', 'TTRATING', 
+        'TOT_CLUBPOINTS', 'CHAMPPOINTS'
+    ]
+
+    # Reemplazar las columnas (asumiendo que el orden es correcto)
+    if len(df.columns) == len(new_columns):
+        df.columns = new_columns
     '''filename_parquet = filename.replace('.csv', '.parquet')
     df = pd.read_parquet(filename_parquet)'''
     df = df[df['IRATING'] > 1]
@@ -52,6 +71,104 @@ def load_and_process_data(filename):
     print(f"Finished processing {filename}.")
     return df
 
+def update_all_data():
+    """Actualiza todos los archivos de datos"""
+    global DATA_STATUS
+    print(f"\n{'='*60}")
+    print(f"🔄 SCHEDULED DATA UPDATE STARTED")
+    print(f"Time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+    print(f"{'='*60}")
+    
+    
+    files_to_update = {
+    'ROAD.csv': 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/ROAD.csv',
+    'FORMULA.csv': 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/FORMULA.csv',
+    'OVAL.csv': 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/OVAL.csv',
+    'DROAD.csv': 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/DROAD.csv',
+    'DOVAL.csv': 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/DOVAL.csv'
+    }
+
+
+    try:
+        status_url = 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/branch_actions/update_status.json'
+        # Leemos el JSON y lo guardamos en la variable de estado actual
+        current_status_data = pd.read_json(status_url, typ='series').to_dict()
+        DATA_STATUS = current_status_data
+        
+        # Si el estado actual es exitoso, lo guardamos como el último éxito conocido.
+        if DATA_STATUS.get('status') == 'success':
+            LAST_SUCCESSFUL_STATUS = DATA_STATUS
+
+        print(f"✅ Status file loaded successfully: {DATA_STATUS}")
+    except Exception as e:
+        print(f"❌ Could not load status file: {e}")
+        # Si no podemos leer el archivo, el estado actual es desconocido.
+        DATA_STATUS = {'status': 'unknown', 'last_update_utc': datetime.now(timezone.utc).isoformat()}
+
+    print(f"🎉 SCHEDULED DATA UPDATE COMPLETED")
+    print(f"{'='*60}\n")
+
+
+
+    for filename in files_to_update:
+        try:
+            print(f"🔄 Updating {filename}...")
+            new_data = load_and_process_data(files_to_update[filename])
+            DISCIPLINE_DATAFRAMES[filename] = new_data
+            print(f"✅ {filename} updated successfully! ({len(new_data)} records)")
+        except Exception as e:
+            print(f"❌ Error updating {filename}: {str(e)}")
+    
+    print(f"🎉 SCHEDULED DATA UPDATE COMPLETED")
+    print(f"{'='*60}\n")
+
+
+
+try:
+    status_url = 'https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/branch_actions/update_status.json'
+    DATA_STATUS = pd.read_json(status_url, typ='series').to_dict()
+    
+    # Si la carga inicial es exitosa, la guardamos como el último éxito.
+    if DATA_STATUS.get('status') == 'success':
+        LAST_SUCCESSFUL_STATUS = DATA_STATUS
+
+    print(f"✅ Initial status loaded: {DATA_STATUS}")
+except Exception as e:
+    print(f"❌ Initial status load failed: {e}")
+    DATA_STATUS = {'status': 'unknown', 'last_update_utc': datetime.now(timezone.utc).isoformat()}
+
+
+
+# CARGA INICIAL
+DISCIPLINE_DATAFRAMES = {
+    'ROAD.csv': load_and_process_data('https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/ROAD.csv'),
+    'FORMULA.csv': load_and_process_data('https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/FORMULA.csv'),
+    'OVAL.csv': load_and_process_data('https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/OVAL.csv'),
+    'DROAD.csv': load_and_process_data('https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/DROAD.csv'),
+    'DOVAL.csv': load_and_process_data('https://raw.githubusercontent.com/danielsaed/iRacing-dashboard/refs/heads/branch_actions/data/DOVAL.csv')
+}
+
+
+# CONFIGURAR EL SCHEDULER
+scheduler = BackgroundScheduler()
+scheduler.add_job(
+    func=update_all_data,
+    trigger=IntervalTrigger(hours=12),  # Ejecutar cada 2 horas
+    id='data_update_job',
+    name='Update iRacing Data',
+    replace_existing=True
+)
+
+# INICIAR EL SCHEDULER
+scheduler.start()
+print("🚀 Automatic data updater started with APScheduler!")
+print("📅 Updates scheduled every 2 hours")
+
+# ASEGURAR QUE EL SCHEDULER SE CIERRE AL CERRAR LA APP
+atexit.register(lambda: scheduler.shutdown())
+
+
+
 def create_irating_trend_line_chart(df):
     """
     Crea un gráfico de líneas que muestra el promedio de carreras corridas
@@ -101,12 +218,6 @@ def create_irating_trend_line_chart(df):
     ))
     
     fig.update_layout(
-        title=dict(
-            text='<b>iRating Range By Avg. Races</b>',
-            font=dict(color='white', size=14),
-            x=0.5,
-            xanchor='center'
-        ),
         template='plotly_dark',
         paper_bgcolor='rgba(11,11,19,1)',
         plot_bgcolor='rgba(11,11,19,1)',
@@ -125,7 +236,7 @@ def create_irating_trend_line_chart(df):
             gridwidth=1, 
             gridcolor='rgba(255,255,255,0.1)'
         ),
-        margin=dict(l=10, r=10, t=50, b=10),
+        margin=dict(l=10, r=10, t=0, b=10),
     )
     return fig
 
@@ -226,14 +337,16 @@ def create_region_bubble_chart(df):
         )
     ))
 
+
+    """title=dict(
+                text='Regions (Avg. iRating, Avg. Races, Qty. Drivers)',
+                font=dict(color='white', size=14),
+                x=0.5,
+                xanchor='center'
+            ),
+            font=GLOBAL_FONT,"""
     fig.update_layout(
-        title=dict(
-            text='<b>Regions (Avg. iRating, Avg. Races, Qty. Drivers)</b>',
-            font=dict(color='white', size=14),
-            x=0.5,
-            xanchor='center'
-        ),
-        font=GLOBAL_FONT,
+        
         #xaxis_title='Avg. iRating',
         #yaxis_title='Avg. Races',
         template='plotly_dark',
@@ -257,7 +370,7 @@ def create_region_bubble_chart(df):
             gridcolor='rgba(255,255,255,0.1)'
         ),
         # --- FIN DEL ESTILO DE GRID ---
-        margin=dict(l=10, r=10, t=50, b=10),
+        margin=dict(l=10, r=10, t=0, b=10),
     )
     return fig
 
@@ -270,9 +383,9 @@ def create_kpi_global(filtered_df, filter_context="World"):
     fig = go.Figure()
     kpis = [
         {'value': total_pilots, 'title': f"Drivers {filter_context}", 'format': ',.0f'},
-        {'value': avg_irating, 'title': "Average iRating", 'format': ',.0f'},
-        {'value': avg_starts, 'title': "Average Starts", 'format': '.1f'},
-        {'value': avg_wins, 'title': "Average Wins", 'format': '.2f'}
+        {'value': avg_irating, 'title': "Avg iRating", 'format': ',.0f'},
+        {'value': avg_starts, 'title': "Avg Starts", 'format': '.1f'},
+        {'value': avg_wins, 'title': "Avg Wins", 'format': '.2f'}
     ]
     for i, kpi in enumerate(kpis):
         fig.add_trace(go.Indicator(
@@ -287,7 +400,7 @@ def create_kpi_global(filtered_df, filter_context="World"):
         grid={'rows': 1, 'columns': 4, 'pattern': "independent"},
         template='plotly_dark',
         paper_bgcolor='rgba(0,0,0,0)',
-        plot_bgcolor='#323232',
+        plot_bgcolor="#BD1818",
         margin=dict(l=20, r=20, t=50, b=10),
         height=60,
         font=GLOBAL_FONT
@@ -306,7 +419,7 @@ def create_kpi_pilot(filtered_df, pilot_info=None, filter_context="World"):
             plot_bgcolor='rgba(0,0,0,0)',
             xaxis_visible=False,
             yaxis_visible=False,
-            height=50,
+            height=240,  # Aumentamos la altura considerablemente
             annotations=[
                 dict(
                     text="<b>Select or search a driver</b>",
@@ -323,7 +436,6 @@ def create_kpi_pilot(filtered_df, pilot_info=None, filter_context="World"):
             ]
         )
         return fig
-    # --- FIN DE LA
 
     # Si SÍ hay información del piloto, procedemos como antes.
     pilot_name = pilot_info.get('DRIVER', 'Piloto')
@@ -340,32 +452,42 @@ def create_kpi_pilot(filtered_df, pilot_info=None, filter_context="World"):
     
     kpis_piloto = [
         {'rank': rank_world, 'percentil': percentil_world, 'title': "World Rank"},
-        {'rank': rank_region, 'percentil': percentil_region, 'title': "Region Rank "},
+        {'rank': rank_region, 'percentil': percentil_region, 'title': "Region Rank"},
         {'rank': rank_country, 'percentil': percentil_country, 'title': "Country Rank"}
     ]
 
+    # Layout vertical con más espacio
     for i, kpi in enumerate(kpis_piloto):
         fig.add_trace(go.Indicator(
             mode="number",
             value=kpi['rank'],
-            number={'prefix': "#", 'font': {'size': 12}},
-            # Eliminamos el <br> y ajustamos el texto para que esté en una línea
-            title={"text": f"{kpi['title']} <span style='font-size:12px;color:gray'>(Top {100-kpi['percentil']:.2f}%)</span>", 'font': {'size': 12}},
-            domain={'row': 0, 'column': i}
+            number={'prefix': "#", 'font': {'size': 18}},  # Número más grande
+            title={
+                "text": f"<b>{kpi['title']}</b><span style='font-size:11px;color:gray'>(Top {100-kpi['percentil']:.1f}%)</span>", 
+                'font': {'size': 12}  # Título más grande
+            },
+            domain={
+                'row': i, 
+                'column': 0,
+                # AGREGAMOS ESPACIADO ESPECÍFICO PARA CADA KPI
+                'y': [0.75 - i*0.32, 0.95 - i*0.32]  # Da más espacio vertical a cada KPI
+            }
         ))
+    
     fig.update_layout(
         title={
             'text': title_text,
-            'y':0.95, 'x':0.5, 'xanchor': 'center', 'yanchor': 'top',
-            'font': {'size': 14}
+            'y': 0.98, 'x': 0.5, 'xanchor': 'center', 'yanchor': 'top',
+            'font': {'size': 28}
         },
-        grid={'rows': 1, 'columns': 3, 'pattern': "independent"},
+        # CAMBIO: Eliminamos el grid automático y usamos dominios manuales
         template='plotly_dark',
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
-        margin=dict(l=20, r=20, t=40, b=10),
-        height=60,
-        font=GLOBAL_FONT
+        margin=dict(l=20, r=20, t=35, b=15),  # Más margen arriba y abajo
+        height=240,  # Altura aumentada considerablemente
+        font=GLOBAL_FONT,
+        showlegend=False
     )
     return fig
 
@@ -407,13 +529,13 @@ def create_density_heatmap(df):
     
     max_line_trace = go.Scatter(
         x=x_trend, y=y_trend_max, mode='lines',
-        name='Tendencia Máximo AVG_INC',
+        name='Tendency Max AVG_INC',
         line=dict(color='red', width=1, dash='dash')
     )
     
     min_line_trace = go.Scatter(
         x=x_trend, y=y_trend_min, mode='lines',
-        name='Tendencia Mínimo AVG_INC',
+        name='Tendency Min AVG_INC',
         line=dict(color='lime', width=1, dash='dash')
     )
 
@@ -422,7 +544,7 @@ def create_density_heatmap(df):
         x=x_trend,
         y=y_trend_mean,
         mode='lines',
-        name='Tendencia Promedio AVG_INC',
+        name='Tendency Average Incidents',
         line=dict(color='black', width=2, dash='solid')
     )
 
@@ -431,7 +553,8 @@ def create_density_heatmap(df):
     fig = go.Figure(data=[heatmap_trace, max_line_trace, min_line_trace, mean_line_trace])
     
     fig.update_layout(
-        title='Densidad de Pilotos: iRating vs. AVG_INC',
+
+        font=GLOBAL_FONT,
         xaxis_title='iRating',
         yaxis_title='Incidents Per Race',
         template='plotly_dark',
@@ -533,7 +656,7 @@ def create_continent_map(df, selected_region='ALL', selected_country='ALL'):
             showframe=False,      # <-- Oculta el marco exterior del globo
             showcoastlines=False  # <-- Oculta las líneas de la costa
         ),
-        margin={"r":0,"t":40,"l":0,"b":0},
+        margin={"r":0,"t":0,"l":0,"b":0},
         coloraxis_showscale=show_scale,
         coloraxis_colorbar=dict(
             title='Drivers',
@@ -550,9 +673,14 @@ def create_continent_map(df, selected_region='ALL', selected_country='ALL'):
 
 def create_histogram_with_percentiles(df, column='IRATING', bin_width=100, highlight_irating=None, highlight_name=None):
     # Crear bins específicos de 100 en 100
-    min_val = df[column].min()
     max_val = df[column].max()
-    bin_edges = np.arange(min_val, max_val + bin_width, bin_width)
+    # Por ejemplo, si max_val es 11250, (ceil(11250 / 100)) = 113, * 100 = 11300.
+    upper_limit = (np.ceil(max_val / bin_width)) * bin_width
+    
+    # Creamos los bordes de los bins desde 0 hasta el límite superior, en pasos de 100.
+    # Esto generará [0, 100, 200, 300, ... , 11300]
+    bin_edges = np.arange(0, upper_limit + bin_width, bin_width)
+    # --- FIN DE LA CORRECCIÓN ---
     
     hist, bin_edges = np.histogram(df[column], bins=bin_edges)
     bin_centers = (bin_edges[:-1] + bin_edges[1:]) / 2
@@ -567,8 +695,10 @@ def create_histogram_with_percentiles(df, column='IRATING', bin_width=100, highl
         below = (df[column] < bin_edges[i+1]).sum()
         percentile = below / total * 100
         top_percent = 100 - percentile
+        
+        # --- CORRECCIÓN: Mostrar el rango correctamente (ej. 0-99) ---
         hover_text.append(
-            f"Range: {int(bin_edges[i])}-{int(bin_edges[i+1])}<br>"
+            f"Range: {int(bin_edges[i])}-{int(bin_edges[i+1]-1)}<br>"
             f"Drivers: {hist[i]}<br>"
             f"Top: {top_percent:.2f}%"
         )
@@ -609,12 +739,6 @@ def create_histogram_with_percentiles(df, column='IRATING', bin_width=100, highl
     # --- FIN DEL BLOQUE NUEVO ---
 
     fig.update_layout(
-        title=dict(
-            text='<b>iRating Histogram</b>',
-            font=dict(color='white', size=14),
-            x=0.5,
-            xanchor='center'
-        ),
         font=GLOBAL_FONT,
         xaxis=dict(
             title_text='iRating', # Texto del título
@@ -632,12 +756,12 @@ def create_histogram_with_percentiles(df, column='IRATING', bin_width=100, highl
         ),
         template='plotly_dark',
         hovermode='x unified',
-        paper_bgcolor='rgba(18,18,26,.5)',
+        paper_bgcolor='rgba(18,18,26,0)',
         plot_bgcolor='rgba(255,255,255,0)',
 
         
         # --- MODIFICACIÓN: Reducir márgenes y tamaño de fuentes ---
-        margin=dict(l=10, r=10, t=50, b=10) # Reduce los márgenes (izquierda, derecha, arriba, abajo)                 # Reduce el tamaño del título principal
+        margin=dict(l=10, r=10, t=0, b=10) # Reduce los márgenes (izquierda, derecha, arriba, abajo)                 # Reduce el tamaño del título principal
 
     )
     
@@ -666,6 +790,47 @@ def create_correlation_heatmap(df):
     )
     return fig
 
+def create_starts_vs_irating_scatter(df):
+    """Crea un gráfico de dispersión no interactivo para Carreras vs. iRating."""
+    
+    # Para un rendimiento óptimo, si hay demasiados datos, tomamos una muestra aleatoria.
+    # Esto evita sobrecargar el navegador del cliente sin perder la forma general de la distribución.
+    if len(df) > 50000:
+        df_sample = df.sample(n=50000, random_state=42)
+    else:
+        df_sample = df
+
+    # Usamos go.Scattergl que está optimizado para grandes datasets.
+    fig = go.Figure(data=go.Scattergl(
+        x=df_sample['IRATING'],
+        y=df_sample['STARTS'],
+        mode='markers',
+        marker=dict(
+            color='rgba(0, 111, 255, 0.3)', # Color azul semitransparente
+            # --- CORRECCIÓN: Puntos 50% más grandes (de 4 a 6) ---
+            size=6, 
+            line=dict(width=0)
+        ),
+        # Desactivamos el hover para máxima velocidad ya que es estático.
+        hoverinfo='none'
+    ))
+    
+    fig.update_layout(
+
+        font=GLOBAL_FONT,
+        xaxis_title='iRating',
+        yaxis_title='Races (Starts)',
+        template='plotly_dark',
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        xaxis=dict(range=[0, 12000], showgrid=True, gridwidth=1, gridcolor='rgba(255,255,255,0.1)'),
+        # --- CORRECCIÓN: Altura máxima de 1500 en el eje Y ---
+        yaxis=dict(range=[0, 1500], showgrid=True, gridwidth=1, gridcolor='rgba(255,255,255,0.1)'),
+        legend=dict(yanchor="top", y=0.99, xanchor="right", x=0.99)
+    )
+    return fig
+
+
 def flag_img(code):
     url = f"https://flagcdn.com/16x12/{code.lower()}.png"
     # La función ahora asume que si el código llega aquí, es válido.
@@ -674,14 +839,6 @@ def flag_img(code):
 
 GLOBAL_FONT = {'family': "Lato, sans-serif"}
 
-DISCIPLINE_DATAFRAMES = {
-    'ROAD.csv': load_and_process_data('ROAD.csv'),
-    'FORMULA.csv': load_and_process_data('FORMULA.csv'),
-    'OVAL.csv': load_and_process_data('OVAL.csv'),
-    'DROAD.csv': load_and_process_data('DROAD.csv'),
-    'DOVAL.csv': load_and_process_data('DOVAL.csv')
-}
-
 country_coords = {
     'ES': {'lat': 40.4, 'lon': -3.7}, 'US': {'lat': 39.8, 'lon': -98.5},
     'BR': {'lat': -14.2, 'lon': -51.9}, 'DE': {'lat': 51.1, 'lon': 10.4},
@@ -749,14 +906,18 @@ df = df[['DRIVER','IRATING','LOCATION','STARTS','WINS','AVG_START_POS','AVG_FINI
 #df['LOCATION'] = 'a'
 density_heatmap = dcc.Graph(
     id='density-heatmap',
-    style={'height': '30vh', 'borderRadius': '15px', 'overflow': 'hidden'},
-    figure=create_density_heatmap(df_for_graphs)
+    # --- CORRECCIÓN: Ajustamos la altura para que sea más visible ---
+    style={'height': '600px', 'borderRadius': '15px', 'overflow': 'hidden'},
+    figure=create_density_heatmap(df_for_graphs),
+    config={'displayModeBar': False} # <-- AÑADIMOS ESTO
 )
 correlation_heatmap = dcc.Graph(
     id='correlation-heatmap',
-    style={'height': '70vh'}, # Ajusta la altura para que quepan los 3 gráficos
+    # --- CORRECCIÓN: Ajustamos la altura a un valor más estándar ---
+    style={'height': '500px'},
     # Usamos las columnas numéricas del dataframe original
-    figure=create_correlation_heatmap(df[['IRATING', 'STARTS', 'WINS','TOP25PCNT','AVG_INC','AVG_FINISH_POS']])
+    figure=create_correlation_heatmap(df[['IRATING', 'STARTS', 'WINS','TOP25PCNT','AVG_INC','AVG_FINISH_POS']]),
+    config={'displayModeBar': False} # <-- AÑADIMOS ESTO
 )
 
 
@@ -786,49 +947,51 @@ interactive_table = dash_table.DataTable(
     sort_mode="single",
     page_action="custom",
     page_current=0,
-    page_size=20,
-    page_count=len(df_table) // 20 + (1 if len(df_table) % 20 > 0 else 0),
+    page_size=100,  # CAMBIO: De 20 a 100 elementos por página
+    page_count=len(df_table) // 100 + (1 if len(df_table) % 100 > 0 else 0),  # CAMBIO: Actualizar cálculo
     virtualization=False,
     style_as_list_view=True,
     active_cell={'row': 21,'column':1},
     
-    
-    # --- ELIMINAMOS selected_rows Y AÑADIMOS active_cell ---
-    # selected_rows=[],  # <-- ELIMINAR ESTA LÍNEA
-    
     style_table={
-        #'tableLayout': 'fixed', # <-- DESCOMENTA O AÑADE ESTA LÍNEA
         'overflowX': 'auto',
-        'height': '70vh',
-        'minHeight': '0',
+        'overflowY': 'auto',  # SCROLL VERTICAL habilitado
+        'height': '100%',     # CAMBIO: Usar 100% del contenedor padre
+        'maxHeight': '100%',  # CAMBIO: Usar 100% del contenedor padre
+        'minHeight': '700px', # CAMBIO: Altura mínima aumentada
         'width': '100%',
         'borderRadius': '15px',
         'overflow': 'hidden',
         'backgroundColor': 'rgba(11,11,19,1)',
-        'textOverflow': 'ellipsis',
         'border': '1px solid #4A4A4A'
-        
     },
     
     style_cell={
         'textAlign': 'center',
-        'padding': '1px',
+        'padding': '6px 3px',  # CAMBIO: Padding más compacto para aprovechar espacio
         'backgroundColor': 'rgba(11,11,19,1)',
         'color': 'rgb(255, 255, 255,.8)',
-        'border': '1px solid rgba(255, 255, 255, 0)',
+        'border': '1px solid rgba(255, 255, 255, 0.1)',
         'overflow': 'hidden',
         'textOverflow': 'ellipsis',
-        'whiteSpace': 'nowrap', # <-- AÑADE ESTA LÍNEA
-        'maxWidth': 0
+        'whiteSpace': 'nowrap',
+        'maxWidth': 0,
+        'fontSize': '11px'  # CAMBIO: Fuente ligeramente más pequeña para más filas
     },
+    
     style_header={
         'backgroundColor': 'rgba(30,30,38,1)',
         'fontWeight': 'bold',
         'color': 'white',
-        'border': 'none',
+        'border': '1px solid rgba(255, 255, 255, 0.2)',
         'textAlign': 'center',
-        'fontSize': 10
+        'fontSize': '12px',
+        'position': 'sticky',  # Header pegajoso
+        'top': 0,              # Se queda arriba al hacer scroll
+        'zIndex': 10,          # Prioridad visual
+        'padding': '6px 3px'   # CAMBIO: Padding más compacto
     },
+    
     # --- AÑADIMOS ESTILO PARA LA FILA SELECCIONADA Y LAS CLASES ---
     style_data_conditional=[
         {
@@ -882,7 +1045,7 @@ interactive_table = dash_table.DataTable(
 
 scatter_irating_starts = dcc.Graph(
     id='scatter-irating',
-    style={'height': '20vh','borderRadius': '15px','overflow': 'hidden'},
+    style={'height': '30vh','borderRadius': '15px','overflow': 'hidden'},
     # Usamos go.Scattergl en lugar de px.scatter para un rendimiento masivo
     figure=go.Figure(data=go.Scattergl(
         x=df['IRATING'],
@@ -927,191 +1090,700 @@ region_bubble_chart = dcc.Graph(
 app = dash.Dash(__name__)
 server = app.server # <-- AÑADE ESTA LÍNEA
 
-# Layout principal
+# Layout principal MODIFICADO
 app.layout = html.Div(
-    #style={'height': '100vh', 'display': 'flex', 'flexDirection': 'column', 'backgroundColor': '#1E1E1E'},
-    style={},
+    style={
+        'margin': '0',
+        'padding': '0',
+        'backgroundColor': 'rgba(5,5,15,255)',
+        'color': '#ffffff',
+        'fontFamily': 'Lato, sans-serif',
+        'minHeight': '100vh'
+    },
     children=[
-        
-        
-        # --- CONTENEDOR PRINCIPAL CON 3 COLUMNAS ---
+        # CONTENEDOR PRINCIPAL CENTRADO
         html.Div(
-            id='main-content-container',
-            #style={'display': 'flex', 'flex': 1, 'minHeight': 0, 'padding': '0 10px 10px 10px'},
-            style={'display': 'flex', 'padding': '0px 10px 10px 10px'},
+            style={
+                'maxWidth': '1400px',
+                'margin': '0 auto',
+                'padding': '20px 5vw',
+                'minHeight': '100vh',
+                'display': 'flex',
+                'flexDirection': 'column',
+                'gap': '30px'
+            },
             children=[
                 
-                # --- COLUMNA IZQUIERDA (FILTROS Y TABLA) ---
+                # 1. SECCIÓN HEADER - Título y Botones
                 html.Div(
-                    id='left-column',
-                    style={'width': '25%', 'padding': '1%', 'display': 'flex', 'flexDirection': 'column'},
+                    style={
+                        'textAlign': 'center',
+                        'marginBottom': '20px'
+                    },
                     children=[
-                        # Contenedor de Filtros
-                        html.Div(
-                            style={'display': 'flex', 'width': '60%', 'justifyContent': 'space-between', 'margin': '0 auto 10px auto'},
-                            children=[
-                                # --- MODIFICACIÓN: Centramos el texto del contenedor del filtro de Región ---
-                                html.Div([
-                                    html.Label("Region:", style={'color': 'white', 'fontSize': 2}),
-                                    dcc.Dropdown(
-                                        id='region-filter',
-                                        options=[{'label': 'All', 'value': 'ALL'}] + 
-                                               [{'label': region, 'value': region} for region in sorted(iracing_ragions.keys())],
-                                        value='ALL',
-                                        className='iracing-dropdown',
-                                        # --- AÑADIMOS ESTILO INICIAL ---
-
-                                    )
-                                ], style={'flex': 1, 'marginRight': '10px', 'textAlign': 'center'}),
-
-                                # --- MODIFICACIÓN: Centramos el texto del contenedor del filtro de País ---
-                                html.Div([
-                                    html.Label("Country:", style={'color': 'white', 'fontSize': 10}),
-                                    dcc.Dropdown(
-                                        id='country-filter',
-                                        options=[{'label': 'All', 'value': 'ALL'}],
-                                        value='ALL',
-                                        className='iracing-dropdown',
-                                        # --- AÑADIMOS ESTILO INICIAL ---
-
-                                    )
-                                ], style={'flex': 1, 'marginRight': '10px', 'textAlign': 'center'}),
+                        html.H1(
+                            "🏁 Top iRating", 
+                            style={
+                                'fontSize': 'clamp(36px, 5vw, 48px)',
+                                'color': 'white',
+                                'margin': '0 0 20px 0',
+                                'fontWeight': '900'
+                            }
+                        ),
 
-                                
-                            ]
+                        # --- AÑADE ESTE COMPONENTE AQUÍ ---
+                        html.P(
+                            id='last-update-display',
+                            style={
+                                'color': '#A0A0A0',
+                                'fontSize': '12px',
+                                'margin': '-15px 0 20px 0', # Margen para acercarlo al título
+                                'fontStyle': 'italic'
+                            }
                         ),
-                        # Contenedor de la Tabla
-                        html.Div(
-                            [
-                                html.Label("Search Driver:", style={'color': 'white', 'fontSize': 10}),
-                                dcc.Dropdown(
-                                    id='pilot-search-dropdown',
-                                    options=[],
-                                    placeholder='Search Driver...',
-                                    className='iracing-dropdown',
-                                    searchable=True,
-                                    clearable=True,
-                                    search_value='',
-                                    # Se elimina el estilo de aquí para aplicarlo al contenedor.
-                                )
-                            ],
-                            # --- MODIFICACIÓN: Centramos el texto del contenedor de búsqueda ---
-                            style={'width': '60%', 'marginBottom': '10px', 'margin': '0 auto 10px auto', 'color':'white', 'textAlign': 'center'}
+                        html.P(
+                            "Only drivers with 1 < race start and 1 < irating are consider",
+                            style={
+                                'color': '#A0A0A0',
+                                'fontSize': '12px',
+                                'margin': '-15px 0 20px 0', # Margen para acercarlo al título
+                                'fontStyle': 'italic'
+                            }
                         ),
+                        # --- FIN DEL BLOQUE A AÑADIR ---
                         
                         html.Div(
-                            kpi_pilot, 
                             style={
-                                'marginTop': '1%',
-                                'marginBottom': '1%'       # Pone los KPIs por delante del mapa
-                            }
-                        ),
-                        html.Div(interactive_table, style={'flex': 1})
+                                'display': 'flex',
+                                'justifyContent': 'center',
+                                'gap': '10px',
+                                'flexWrap': 'wrap'
+                            },
+                            children=[
+                                html.Button('Sports Car', id='btn-road', n_clicks=0, className='dashboard-type-button'),
+                                html.Button('Formula', id='btn-formula', n_clicks=0, className='dashboard-type-button'),
+                                html.Button('Oval', id='btn-oval', n_clicks=0, className='dashboard-type-button'),
+                                html.Button('Dirt Road', id='btn-dirt-road', n_clicks=0, className='dashboard-type-button'),
+                                html.Button('Dirt Oval', id='btn-dirt-oval', n_clicks=0, className='dashboard-type-button'),
+                            ]
+                        )
                     ]
                 ),
                 
-                # --- COLUMNA CENTRAL ---
+                # 2. SECCIÓN MAPA Y KPIs GLOBALES - Solo KPIs globales superpuestos
                 html.Div(
-                    id='middle-column',
-                    # --- MODIFICACIÓN: Añadimos position: 'relative' ---
-                    # Esto convierte a la columna en el contenedor de referencia para el posicionamiento absoluto.
-                    style={'width': '45%', 'padding': '1%', 'display': 'flex', 'flexDirection': 'column', 'position': 'relative'},
-                    children=[                
+                    style={
+                        'position': 'relative',
+                        'top': '0px',
+                        'backgroundColor': 'transparent',  # Fondo transparente
+                        'borderRadius': '0px',             # Sin bordes redondeados
+                        'border': '0px solid #4A4A4A',
+                        'padding': '20px',
+                        'overflow': 'hidden'
+                    },
+                    children=[
+                        # Solo KPIs globales superpuestos
                         html.Div(
-                            style={'textAlign': 'center'},
+                            style={
+                                'position': 'absolute',
+                                'top': '0px',
+                                'left': '50%',
+                                'transform': 'translateX(-50%)',
+                                'width': '80%',
+                                'maxWidth': '800px',
+                                'zIndex': '10',
+                                'backgroundColor': 'rgba(11,11,19,0)',
+                                'borderRadius': '10px',
+                                'border': '0px solid #4A4A4A',
+                                'padding': '10px'
+                            },
                             children=[
-                                html.H1("Top iRating", style={'fontSize': 48, 'color': 'white', 'margin': '-10px 0 10px 0'}),
-                                html.Div([
-                                    # <-- AÑADIDO
-                                    html.Button('Sports Car', id='btn-road', n_clicks=0, className='dashboard-type-button'),
-                                    html.Button('Formula', id='btn-formula', n_clicks=0, className='dashboard-type-button'),
-                                    html.Button('Oval', id='btn-oval', n_clicks=0, className='dashboard-type-button'),
-                                    html.Button('Dirt Road', id='btn-dirt-road', n_clicks=0, className='dashboard-type-button'),
-                                    html.Button('Dirt Oval', id='btn-dirt-oval', n_clicks=0, className='dashboard-type-button'),
-                                ], style={'display': 'flex', 'justifyContent': 'center', 'gap': '10px'})
+                                dcc.Graph(id='kpi-global', style={'height': '50px', 'margin': '0'})
                             ]
                         ),
-        
+                        # Mapa de fondo
+                        dcc.Graph(
+                            id='continent-map',
+                            
+                            style={'height': '650px',
+                                   'backgroundColor': 'transparent', 
+                                    'margin': '0'},
+                            config={'displayModeBar': False}
+                        )
+                    ]
+                ),
+                
+                # 3. SECCIÓN FILTROS Y TABLA - Lado a lado CON KPIs DEL PILOTO
+                html.Div(
+                    style={
+                        'display': 'flex',
+                        'gap': '20px',
+                        'flexWrap': 'wrap'
+                        
+                    },
+                    children=[
+                        # Contenedor de Filtros CON KPIs DEL PILOTO
                         html.Div(
-                            kpi_global, 
                             style={
+                                'flex': '1',
+                                'minWidth': '300px',
+                                'maxWidth': '600px',
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '20px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Filters", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '20px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
                                 
-                                'width': '70%',
-                                'margin': '0 auto',
-                                'position': 'relative', # Necesario para que z-index funcione
-                                'z-index': '10'         # Pone los KPIs por delante del mapa
-                            }
+                                # Filtros de región y país
+                                html.Div(
+                                    style={
+                                        'display': 'flex',
+                                        'gap': '15px',
+                                        'marginBottom': '20px',
+                                        'flexDirection': 'column'
+                                    },
+                                    children=[
+                                        html.Div([
+
+                                            html.Label(
+                                                "Region:", 
+                                                style={
+                                                    'color': 'white',
+                                                    'fontSize': '14px',
+                                                    'marginBottom': '5px',
+                                                    'display': 'block',
+                                                    'textAlign': 'center'
+                                                }
+                                            ),
+                                            dcc.Dropdown(
+                                                id='region-filter',
+                                                options=[{'label': 'All', 'value': 'ALL'}] + 
+                                                       [{'label': region, 'value': region} for region in sorted(iracing_ragions.keys())],
+                                                value='ALL',
+                                                className='iracing-dropdown'
+                                            )
+                                        ]),
+                                        
+                                        html.Div([
+                                            html.Label(
+                                                "Country:", 
+                                                style={
+                                                    'color': 'white',
+                                                    'fontSize': '14px',
+                                                    'marginBottom': '5px',
+                                                    'display': 'block',
+                                                    'textAlign': 'center'
+                                                }
+                                            ),
+                                            dcc.Dropdown(
+                                                id='country-filter',
+                                                options=[{'label': 'All', 'value': 'ALL'}],
+                                                value='ALL',
+                                                className='iracing-dropdown'
+                                            )
+                                        ])
+                                    ]
+                                ),
+                                
+                                # Búsqueda de piloto
+                                html.Div([
+                                    html.Label(
+                                        "Search Driver:", 
+                                        style={
+                                            'color': 'white',
+                                            'fontSize': '14px',
+                                            'marginBottom': '5px',
+                                            'display': 'block',
+                                            'textAlign': 'center'
+                                        }
+                                    ),
+                                    dcc.Dropdown(
+                                        id='pilot-search-dropdown',
+                                        options=[],
+                                        placeholder='Search Driver...',
+                                        className='iracing-dropdown',
+                                        searchable=True,
+                                        clearable=True,
+                                        search_value=''
+                                    ),
+                                    # --- NUEVOS COMPONENTES PARA DEBOUNCING ---
+                                    dcc.Interval(
+                                        id='search-debounce-interval',
+                                        interval=400,  # 400ms de delay
+                                        n_intervals=0,
+                                        disabled=True  # Inicialmente deshabilitado
+                                    ),
+                                    dcc.Store(id='last-search-store', data='')
+                                ]),
+                                
+                                # NUEVA SECCIÓN: KPIs del piloto debajo de los filtros
+                                html.Div(
+                                    style={
+                                        'marginTop': '30px',
+                                        'padding': '15px',
+                                        'backgroundColor': 'rgba(11,11,19,0.8)',
+                                        'borderRadius': '10px',
+                                        'border': '1px solid #4A4A4A'
+                                    },
+                                    children=[
+                                        html.H4(
+                                            "Selected Driver", 
+                                            style={
+                                                'color': 'white',
+                                                'textAlign': 'center',
+                                                'marginBottom': '15px',
+                                                'fontSize': '16px',
+                                                'fontWeight': '700'
+                                            }
+                                        ), 
+                                        dcc.Graph(
+                                            id='kpi-pilot', 
+                                            style={
+                                                'height': '260px',  # Aumentamos altura del contenedor
+                                                'margin': '0'
+                                            }
+                                        )
+                                    ]
+                                )
+                            ]
                         ),
+                        
+                        # Contenedor de Tabla MODIFICADO
                         html.Div(
-                            continent_map, 
                             style={
-                                'flex': 1, 
-                                'minHeight': 0,
-                                'marginTop': '-5%'
-                            }
-                        ),
-                        # --- MODIFICACIÓN: Se elimina el posicionamiento absoluto ---
-                        # El histograma ahora está en el flujo normal de la página.
-                        html.Div(
-                            histogram_irating, 
+                                'flex': '2',
+                                'minWidth': '300px',
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '20px',
+                                'display': 'flex',          # CAMBIO: Usar flexbox
+                                'flexDirection': 'column',  # CAMBIO: Dirección vertical
+                                'height': '880px'          # CAMBIO: Altura fija del contenedor
+                            },
+                            children=[
+                                html.H3(
+                                    "Rankings", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '20px',
+                                        'fontWeight': '700',
+                                        'flexShrink': 0  # CAMBIO: No se encoge
+                                    }
+                                ),
+                                # Contenedor específico para la tabla
+                                html.Div(
+                                    style={
+                                        'flex': '1',           # CAMBIO: Ocupa todo el espacio restante
+                                        'display': 'flex',
+                                        'flexDirection': 'column',
+                                        'minHeight': 0         # CAMBIO: Permite que se encoja si es necesario
+                                    },
+                                    children=[
+                                        dash_table.DataTable(
+                                            id='datatable-interactiva',
+                                            data=[],
+                                            sort_action="custom",
+                                            sort_mode="single",
+                                            page_action="custom",
+                                            page_current=0,
+                                            page_size=100,  # CAMBIO: 100 elementos por página
+                                            page_count=len(df_table) // 100 + (1 if len(df_table) % 100 > 0 else 0),
+                                            virtualization=False,
+                                            style_as_list_view=True,
+                                            active_cell={'row': 101,'column':1},
+                                            
+                                            style_table={
+                                                'overflowX': 'auto',
+                                                'overflowY': 'auto',
+                                                'height': '100%',     # CAMBIO: Usa todo el espacio del contenedor padre
+                                                'maxHeight': '100%',  # CAMBIO: No limitar altura
+                                                'minHeight': '820px',
+                                                'width': '100%',
+                                                'borderRadius': '15px',
+                                                'overflow': 'hidden',
+                                                'backgroundColor': 'rgba(11,11,19,1)',
+                                                'border': '1px solid #4A4A4A'
+                                            },
+                                            
+                                            style_cell={
+                                                'textAlign': 'center',
+                                                'padding': '3px 1px',  # Padding más compacto
+                                                'backgroundColor': 'rgba(11,11,19,1)',
+                                                'height': '15px',
+                                                'color': 'rgb(255, 255, 255,.8)',
+                                                'border': '1px solid rgba(255, 255, 255, 0.1)',
+                                                'overflow': 'hidden',
+                                                'textOverflow': 'ellipsis',
+                                                'whiteSpace': 'nowrap',
+                                                'maxWidth': 0,
+                                                'fontSize': '11px'  # Fuente más compacta
+                                            },
+                                            
+                                            style_header={
+                                                'backgroundColor': 'rgba(30,30,38,1)',
+                                                'fontWeight': 'bold',
+                                                'color': 'white',
+                                                'border': '1px solid rgba(255, 255, 255, 0.2)',
+                                                'textAlign': 'center',
+                                                'fontSize': '12px',
+                                                'position': 'sticky',
+                                                'top': 0,
+                                                'zIndex': 10,
+                                                'padding': '6px 3px'
+                                            },
+                                            
+                                            # Mantén todos tus estilos existentes
+                                            style_data_conditional=[
+                                                {
+                                                    'if': {'state': 'active'},
+                                                    'backgroundColor': 'rgba(0, 111, 255, 0.3)',
+                                                    'border': '1px solid rgba(0, 111, 255)'
+                                                },
+                                                {
+                                                    'if': {'state': 'selected'},
+                                                    'backgroundColor': 'rgba(0, 111, 255, 0)',
+                                                    'border': '1px solid rgba(0, 111, 255,0)'
+                                                },
+                                                # --- REGLAS MEJORADAS CON BORDES REDONDEADOS ---
+                                                {'if': {'filter_query': '{CLASS} contains "P"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(54,54,62,255)', 'color': 'rgba(166,167,171,255)', 'fontWeight': 'bold','border': '1px solid rgba(134,134,142,255)'},
+                                                
+                                                {'if': {'filter_query': '{CLASS} contains "A"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(0,42,102,255)', 'color': 'rgba(107,163,238,255)', 'fontWeight': 'bold','border': '1px solid rgba(35,104,195,255)'},
+                                                
+                                                {'if': {'filter_query': '{CLASS} contains "B"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(24,84,14,255)', 'color': 'rgba(139,224,105,255)', 'fontWeight': 'bold','border': '1px solid rgba(126,228,103,255)'},
+                                                
+                                                {'if': {'filter_query': '{CLASS} contains "C"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(81,67,6,255)', 'color': 'rgba(224,204,109,255)', 'fontWeight': 'bold','border': '1px solid rgba(220,193,76,255)'},
+                                                
+                                                {'if': {'filter_query': '{CLASS} contains "D"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(102,40,3,255)', 'color': 'rgba(255,165,105,255)', 'fontWeight': 'bold','border': '1px solid rgba(208,113,55,255)'},
+                                                
+                                                {'if': {'filter_query': '{CLASS} contains "R"','column_id': 'CLASS'}, 
+                                                 'backgroundColor': 'rgba(91,19,20,255)', 'color': 'rgba(225,125,123,255)', 'fontWeight': 'bold','border': '1px solid rgba(172,62,61,255)'},
+                                            ],
+                                            
+                                            style_cell_conditional=[
+                                                {'if': {'column_id': 'CLASS'},        'width': '5%', 'minWidth': '5%', 'maxWidth': '5%'},
+                                                {'if': {'column_id': 'Rank World'},   'width': '10%', 'minWidth': '10%', 'maxWidth': '10%'},
+                                                {'if': {'column_id': 'Rank Region'},  'width': '10%', 'minWidth': '10%', 'maxWidth': '10%'},
+                                                {'if': {'column_id': 'Rank Country'}, 'width': '10%', 'minWidth': '10%', 'maxWidth': '10%'},
+                                                {'if': {'column_id': 'DRIVER'},       'width': '30%', 'minWidth': '30%', 'maxWidth': '30%', 'textAlign': 'center'},
+                                                {'if': {'column_id': 'IRATING'},      'width': '10%', 'minWidth': '10%', 'maxWidth': '10%'},
+                                                {'if': {'column_id': 'LOCATION'},     'width': '5%', 'minWidth': '5%', 'maxWidth': '5%', 'justify-content': 'center', 'align-items': 'center'},
+                                                {'if': {'column_id': 'WINS'},         'width': '5%', 'minWidth': '5%', 'maxWidth': '5%'},
+                                                {'if': {'column_id': 'STARTS'},       'width': '5%', 'minWidth': '5%', 'maxWidth': '5%'},
+                                                {'if': {'column_id': 'REGION'},       'width': '20%', 'minWidth': '20%', 'maxWidth': '20%'},
+                                            ]
+                                        )
+                                    ]
+                                )
+                            ]
+                        )
+                    ]
+                ),
+                
+                # 4. SECCIÓN HISTOGRAMA - Ancho completo (sin cambios)
+                html.Div(
+                    style={
+                        'backgroundColor': 'rgba(18,18,26,.5)',
+                        'borderRadius': '15px',
+                        'border': '1px solid #4A4A4A',
+                        'padding': '20px'
+                    },
+                    children=[
+                        html.H3(
+                            "iRating Distribution", 
                             style={
-                                'width':'100%',
-                                'height': '26vh',       # Mantenemos una altura definida
-                                'marginTop': '1%'       # Añadimos un margen superior para separarlo del mapa
+                                'color': 'white',
+                                'textAlign': 'center',
+                                'marginBottom': '20px',
+                                'fontWeight': '700'
                             }
                         ),
-                        
+                        dcc.Graph(
+                            id='histogram-plot',
+                            style={'height': '350px'},
+                            config={'displayModeBar': False}
+                        )
                     ]
                 ),
                 
-                # --- COLUMNA DERECHA ---
+                # 5. SECCIÓN GRÁFICOS ADICIONALES (sin cambios)
                 html.Div(
-                    id='right-column',
-                    style={'width': '25%', 'padding': '1%', 'display': 'flex', 'flexDirection': 'column'},
+                    style={
+                        'display': 'flex',
+                        'flexDirection': 'column',
+                        'gap': '20px'
+                    },
                     children=[
+                        # Primera fila: Tabla de competitividad (sin cambios)
+                        html.Div(
+                            style={
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '20px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Top Competitive Regions & Countries", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '10px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
+                                html.P(
+                                    "Based on average iRating of top 100 drivers per region/country (minimum 100 drivers required)",
+                                    style={
+                                        'color': '#CCCCCC',
+                                        'textAlign': 'center',
+                                        'marginBottom': '20px',
+                                        'fontSize': '12px',
+                                        'fontStyle': 'italic'
+                                    }
+                                ),
+                                html.Div(id='competitiveness-tables-container')
+                            ]
+                        ),
                         
-                        # --- MODIFICACIÓN: Contenedor vacío para las tablas de competitividad ---
-                        html.Div(id='competitiveness-tables-container'),
-                        
-                        # --- MODIFICACIÓN: Gráfico de burbujas vacío ---
-                        dcc.Graph(
-                            id='region-bubble-chart',
-                            style={'height': '32vh', 'marginTop': '3.5%','borderRadius': '10px','border': '1px solid #4A4A4A', 'overflow': 'hidden'}
+                        # CAMBIO: Ahora los gráficos están en columna vertical
+                        # Primer gráfico: Regional Analysis
+                        html.Div(
+                            style={
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '20px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Regional Analysis", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '5px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
+                                html.P(
+                                    "Average races with average iRating relation, bubble size represents quantity drivers in region.",
+                                    style={
+                                        'color': '#CCCCCC',
+                                        'textAlign': 'center',
+                                        'marginBottom': '20px',
+                                        'fontSize': '12px',
+                                        'fontStyle': 'italic'
+                                    }
+                                ),
+                                dcc.Graph(
+                                    id='region-bubble-chart',
+                                    style={'height': '400px'},  # Aumentamos altura ya que ahora ocupa todo el ancho
+                                    config={'displayModeBar': False}
+                                )
+                            ]
                         ),
                         
-                        # --- MODIFICACIÓN: Gráfico de líneas vacío ---
-                        dcc.Graph(
-                            id='irating-starts-scatter',
-                            style={'height': '32vh', 'marginTop': '7.4%', 'borderRadius': '10px', 'border': '1px solid #4A4A4A', 'overflow': 'hidden'},
-                            config={'displayModeBar': False}
+                        # Segundo gráfico: Experience vs Performance
+                        html.Div(
+                            style={
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '20px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Average Races vs iRating", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '5px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
+                                html.P(
+                                    "Average races for iRating ranges",
+                                    style={
+                                        'color': '#CCCCCC',
+                                        'textAlign': 'center',
+                                        'marginBottom': '20px',
+                                        'fontSize': '12px',
+                                        'fontStyle': 'italic'
+                                    }
+                                ),
+                                dcc.Graph(
+                                    id='irating-starts-scatter',
+                                    style={'height': '400px'},  # Aumentamos altura ya que ahora ocupa todo el ancho
+                                    config={'displayModeBar': False}
+                                )
+                            ]
+                        ),
+
+                        # --- INICIO DE GRÁFICOS AÑADIDOS ---
+
+                        # Tercer gráfico: Density Heatmap (iRating vs Incidents)
+                        html.Div(
+                            style={
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '10px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Incidents vs iRating", 
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '5px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
+                                html.P(
+                                    "Correlation between incidents and iRating",
+                                    style={
+                                        'color': '#CCCCCC',
+                                        'textAlign': 'center',
+                                        'marginBottom': '0px',
+                                        'fontSize': '12px',
+                                        'fontStyle': 'italic'
+                                    }
+                                ),
+                                # Usamos la variable que ya definimos
+                                density_heatmap
+                            ]
+                        ),
+                        html.Div(
+                            style={
+                                'backgroundColor': 'rgba(18,18,26,.5)',
+                                'borderRadius': '15px',
+                                'border': '1px solid #4A4A4A',
+                                'padding': '10px'
+                            },
+                            children=[
+                                html.H3(
+                                    "Races vs iRating", # <-- Título actualizado
+                                    style={
+                                        'color': 'white',
+                                        'textAlign': 'center',
+                                        'marginBottom': '5px',
+                                        'fontWeight': '700'
+                                    }
+                                ),
+                                html.P(
+                                    "iRating - races scatter",
+                                    style={
+                                        'color': '#CCCCCC',
+                                        'textAlign': 'center',
+                                        'marginBottom': '0px',
+                                        'fontSize': '12px',
+                                        'fontStyle': 'italic'
+                                    }
+                                ),
+                                # Añadimos el nuevo gráfico aquí
+                                dcc.Graph(
+                                    id='starts-vs-irating-heatmap',
+                                    style={'height': '600px'},
+                                    config={'staticPlot': True} # <-- CLAVE: Hace el gráfico no interactivo
+                                )
+                            ]
                         )
+                        # --- FIN DE GRÁFICOS AÑADIDOS ---
                     ]
                 )
             ]
         ),
         
-        # Componentes ocultos
-        # --- ELIMINA EL dcc.Store ---
+        # Componentes ocultos (sin cambios)
         dcc.Store(id='active-discipline-store', data='ROAD.csv'),
         dcc.Store(id='shared-data-store', data={}),
         dcc.Store(id='shared-data-store_1', data={}),
-        html.Div(id='pilot-info-display', style={'display': 'none'})
+        html.Div(id='pilot-info-display', style={'display': 'none'}),
+        # --- AÑADE ESTE COMPONENTE AQUÍ ---
+        dcc.Interval(
+            id='update-timestamp-interval',
+            interval=60 * 1000,  # Cada minuto (en milisegundos)
+            n_intervals=0
+        )
+        # --- FIN DEL BLOQUE A AÑADIR ---
     ]
 )
 
 # --- 4. Callbacks ---
 
+# --- CALLBACK MODIFICADO PARA MOSTRAR LA FECHA CON ESTADO Y COLORES ---
+@app.callback(
+    Output('last-update-display', 'children'),
+    Input('update-timestamp-interval', 'n_intervals')
+)
+def update_timestamp_display(n):
+    if not DATA_STATUS:
+        return "Checking data status..."
+
+    status = DATA_STATUS.get('status', 'unknown')
+    
+    try:
+        # Convertimos la fecha UTC del archivo a un objeto datetime
+        last_update_utc = datetime.fromisoformat(DATA_STATUS['last_update_utc'].replace('Z', '+00:00'))
+        # Calculamos cuánto tiempo ha pasado
+        age = datetime.now(timezone.utc) - last_update_utc
+        
+        # Convertimos a la hora local para mostrarla
+        last_update_local = last_update_utc.astimezone(tz=None)
+        formatted_time = last_update_local.strftime('%B %d, %Y')
+
+        # Lógica de colores y mensajes
+        if status.lower() != 'success':
+            color = '#FF5A5A' # Rojo para fallos
+            message = f"⚠️ Last update attempt failed on: {formatted_time}"
+        elif age.total_seconds() > (13 * 3600): # Si tiene más de 13 horas (damos 1h de margen)
+            color = '#FFA500' # Naranja para datos viejos
+            message = f"Warning: Data is over 12 hours old. Last updated: {formatted_time}"
+        else:
+            color = '#50C878' # Verde para éxito
+            message = f"Data last updated on: {formatted_time}"
+
+    except Exception as e:
+        color = '#FF5A5A'
+        message = f"Error reading update status: {e}"
+
+    # Devolvemos un componente html.P para poder aplicarle el estilo de color
+    return html.P(message, style={'color': color, 'margin': 0, 'padding': 0})
+
+# --- FIN DEL CALLBACK MODIFICADO ---
+
+
+
 
 # --- NUEVO CALLBACK PARA ACTUALIZAR GRÁFICOS DE LA COLUMNA DERECHA ---
 @app.callback(
     Output('competitiveness-tables-container', 'children'),
     Output('region-bubble-chart', 'figure'),
     Output('irating-starts-scatter', 'figure'),
-    Input('active-discipline-store', 'data')
-)
+    Output('density-heatmap', 'figure'),
+    # --- CAMBIO: Reemplazamos la salida del gráfico de correlación por el nuevo ---
+    Output('starts-vs-irating-heatmap', 'figure'),
+    Input('active-discipline-store', 'data'))
+
 def update_right_column_graphs(filename):
     # 1. Cargar y procesar los datos de la disciplina seleccionada
-    df_discipline = pd.read_csv(filename)
+    df_discipline = DISCIPLINE_DATAFRAMES[filename]
     df_discipline = df_discipline[df_discipline['IRATING'] > 1]
     df_discipline = df_discipline[df_discipline['STARTS'] > 1]
     df_discipline = df_discipline[df_discipline['CLASS'].str.contains('D|C|B|A|P|R', na=False)]
@@ -1124,69 +1796,173 @@ def update_right_column_graphs(filename):
     top_regions.insert(0, '#', range(1, 1 + len(top_regions)))
     top_countries.insert(0, '#', range(1, 1 + len(top_countries)))
 
-    # --- MODIFICACIÓN: Traducir códigos de país a nombres completos ---
+    # Traducir códigos de país a nombres completos
     def get_country_name(code):
         try:
             return pycountry.countries.get(alpha_2=code).name
         except (LookupError, AttributeError):
-            return code # Devuelve el código si no se encuentra
+            return code
 
     top_countries['LOCATION'] = top_countries['LOCATION'].apply(get_country_name)
-    # --- FIN DE LA MODIFICACIÓN ---
 
+    # ESTILOS CORREGIDOS - Control estricto de ancho
     table_style_base = {
-        'style_table': {'borderRadius': '10px', 'overflow': 'hidden', 'border': '1px solid #4A4A4A','backgroundColor': 'rgba(11,11,19,1)'},
-        'style_cell': {'textAlign': 'center', 'padding': '0px', 'backgroundColor': 'rgba(11,11,19,1)', 'color': 'rgb(255, 255, 255,.8)', 'border': 'none', 'font_size': '10px','textOverflow': 'ellipsis',
-        'whiteSpace': 'normal'},
-        'style_header': {'backgroundColor': 'rgba(30,30,38,1)', 'fontWeight': 'bold', 'color': 'white', 'border': 'none', 'textAlign': 'center'},
+        'style_table': {
+            'borderRadius': '10px', 
+            'overflow': 'hidden', 
+            'border': '1px solid #4A4A4A',
+            'backgroundColor': 'rgba(11,11,19,1)',
+            'height': '350px',
+            'overflowY': 'auto',
+            'overflowX': 'hidden',  # CLAVE: Prevenir scroll horizontal
+            'width': '100%',
+            'maxWidth': '100%'  # CLAVE: Forzar límite de ancho
+        },
+        'style_cell': {
+            'textAlign': 'center', 
+            'padding': '6px 4px',  # Padding más compacto
+            'backgroundColor': 'rgba(11,11,19,1)', 
+            'color': 'rgb(255, 255, 255,.8)', 
+            'border': 'none', 
+            'fontSize': '11px',  # Fuente más pequeña
+            'textOverflow': 'ellipsis',
+            'whiteSpace': 'nowrap',
+            'overflow': 'hidden',
+            'maxWidth': '0'  # CLAVE: Forzar truncado de texto
+        },
+        'style_header': {
+            'backgroundColor': 'rgba(30,30,38,1)', 
+            'fontWeight': 'bold', 
+            'color': 'white', 
+            'border': 'none', 
+            'textAlign': 'center',
+            'fontSize': '12px',
+            'padding': '6px 4px',
+            'overflow': 'hidden',
+            'textOverflow': 'ellipsis'
+        },
         'style_cell_conditional': [
-            {'if': {'column_id': '#'}, 'width': '10%', 'textAlign': 'center'},
-            {'if': {'column_id': 'REGION'}, 'width': '50%', 'textAlign': 'center'},
-            {'if': {'column_id': 'LOCATION'}, 'width': '50%', 'textAlign': 'center'},
-            {'if': {'column_id': 'avg_irating'}, 'width': '40%', 'textAlign': 'center'},
+            {'if': {'column_id': '#'}, 'width': '10%', 'minWidth': '10%', 'maxWidth': '10%'},
+            {'if': {'column_id': 'REGION'}, 'width': '60%', 'minWidth': '60%', 'maxWidth': '60%', 'textAlign': 'left'},
+            {'if': {'column_id': 'LOCATION'}, 'width': '60%', 'minWidth': '60%', 'maxWidth': '60%', 'textAlign': 'left'},
+            {'if': {'column_id': 'avg_irating'}, 'width': '30%', 'minWidth': '30%', 'maxWidth': '30%'},
         ]
     }
 
+    # CONTENEDOR CON CONTROL ESTRICTO DE ANCHO
     competitiveness_tables = html.Div(
-        style={'display': 'flex', 'gap': '3%', 'marginTop': '1%'},
+        style={
+            'display': 'grid',
+            'gridTemplateColumns': '1fr 1fr',
+            'gap': '15px',  # Gap más pequeño
+            'width': '100%',
+            'maxWidth': '100%',
+            'overflow': 'hidden',
+            'boxSizing': 'border-box'  # CLAVE: Incluir padding en el ancho
+        },
         children=[
-            html.Div(dash_table.DataTable(
-                columns=[{'name': '#', 'id': '#'}, {'name': 'Top Regions', 'id': 'REGION'}, {'name': 'AVG iRating', 'id': 'avg_irating'}],
-                data=top_regions.to_dict('records'),
-                # --- MODIFICACIÓN: Añadimos paginación nativa ---
-                page_action='native', # Activa la paginación
-                page_size=5,          # Muestra 5 filas por página
-                # --- FIN DE LA MODIFICACIÓN ---
-                style_table={**table_style_base['style_table'], 'height': '20vh'},
-                style_cell=table_style_base['style_cell'],
-                style_header=table_style_base['style_header'],
-                style_cell_conditional=table_style_base['style_cell_conditional']
-            ), style={'width': '49%'}),
-            html.Div(dash_table.DataTable(
-                columns=[{'name': '#', 'id': '#'}, {'name': 'Top Countries', 'id': 'LOCATION'}, {'name': 'AVG iRating', 'id': 'avg_irating'}],
-                data=top_countries.to_dict('records'),
-                # --- MODIFICACIÓN: Añadimos paginación nativa ---
-                page_action='native', # Activa la paginación
-                page_size=5,          # Muestra 5 filas por página
-                # --- FIN DE LA MODIFICACIÓN ---
-                style_table={**table_style_base['style_table'], 'height': '20vh'},
-                style_cell=table_style_base['style_cell'],
-                style_header=table_style_base['style_header'],
-                style_cell_conditional=table_style_base['style_cell_conditional']
-            ), style={'width': '49%'})
+            # Tabla de Regiones
+            html.Div(
+                style={
+                    'width': '100%',
+                    'maxWidth': '100%',
+                    'overflow': 'hidden',
+                    'boxSizing': 'border-box'  # CLAVE: Control de ancho
+                },
+                children=[
+                    html.H4(
+                        "Top Regions", 
+                        style={
+                            'color': 'white', 
+                            'textAlign': 'center', 
+                            'marginBottom': '10px',
+                            'fontSize': '14px',
+                            'margin': '0 0 10px 0'
+                        }
+                    ),
+                    html.Div(
+                        style={
+                            'width': '100%',
+                            'maxWidth': '100%',
+                            'overflow': 'hidden'
+                        },
+                        children=[
+                            dash_table.DataTable(
+                                columns=[
+                                    {'name': '#', 'id': '#'}, 
+                                    {'name': 'Region', 'id': 'REGION'}, 
+                                    {'name': 'Avg iRating', 'id': 'avg_irating', 'type': 'numeric', 'format': {'specifier': '.0f'}}
+                                ],
+                                data=top_regions.to_dict('records'),
+                                page_action='none',
+                                style_table=table_style_base['style_table'],
+                                style_cell=table_style_base['style_cell'],
+                                style_header=table_style_base['style_header'],
+                                style_cell_conditional=table_style_base['style_cell_conditional']
+                            )
+                        ]
+                    )
+                ]
+            ),
+            
+            # Tabla de Países
+            html.Div(
+                style={
+                    'width': '100%',
+                    'maxWidth': '100%',
+                    'overflow': 'hidden',
+                    'boxSizing': 'border-box'  # CLAVE: Control de ancho
+                },
+                children=[
+                    html.H4(
+                        "Top Countries", 
+                        style={
+                            'color': 'white', 
+                            'textAlign': 'center', 
+                            'marginBottom': '10px',
+                            'fontSize': '14px',
+                            'margin': '0 0 10px 0'
+                        }
+                    ),
+                    html.Div(
+                        style={
+                            'width': '100%',
+                            'maxWidth': '100%',
+                            'overflow': 'hidden'
+                        },
+                        children=[
+                            dash_table.DataTable(
+                                columns=[
+                                    {'name': '#', 'id': '#'}, 
+                                    {'name': 'Country', 'id': 'LOCATION'}, 
+                                    {'name': 'Avg iRating', 'id': 'avg_irating', 'type': 'numeric', 'format': {'specifier': '.0f'}}
+                                ],
+                                data=top_countries.to_dict('records'),
+                                page_action='none',
+                                style_table=table_style_base['style_table'],
+                                style_cell=table_style_base['style_cell'],
+                                style_header=table_style_base['style_header'],
+                                style_cell_conditional=table_style_base['style_cell_conditional']
+                            )
+                        ]
+                    )
+                ]
+            )
         ]
     )
 
     # 3. Crear los otros gráficos
     bubble_chart_fig = create_region_bubble_chart(df_discipline)
     line_chart_fig = create_irating_trend_line_chart(df_discipline)
-
-    # 4. Devolver todos los componentes actualizados
-    return competitiveness_tables, bubble_chart_fig, line_chart_fig
-
-
+    # --- AÑADIMOS LA CREACIÓN DE LOS NUEVOS GRÁFICOS ---
+    density_fig = create_density_heatmap(df_discipline)
+    # --- CAMBIO: Creamos la figura para el nuevo gráfico ---
+    starts_scatter_fig = create_starts_vs_irating_scatter(df_discipline)
 
 
+    # 4. Devolver todos los componentes actualizados
+    # --- CAMBIO: Devolvemos la nueva figura en lugar de la antigua ---
+    return competitiveness_tables, bubble_chart_fig, line_chart_fig, density_fig, starts_scatter_fig
 
 # --- ELIMINA EL CALLBACK update_data_source ---
 
@@ -1269,67 +2045,86 @@ def update_country_filter_on_map_click(clickData):
     # Devolvemos el código del país, que actualizará el valor del dropdown 'country-filter'.
     return country_code
 
+# CALLBACK 1: Inicia el temporizador de debouncing cuando el usuario escribe.
+@app.callback(
+    Output('search-debounce-interval', 'disabled'),
+    Input('pilot-search-dropdown', 'search_value')
+)
+def start_search_debounce(search_value):
+    # Si el texto de búsqueda es muy corto, deshabilita el temporizador.
+    if not search_value or len(search_value) < 3:
+        return True  # Deshabilitado
+    # Si hay texto válido, habilita el temporizador (se disparará en 400ms).
+    return False # Habilitado
+
+# CALLBACK 2: Ejecuta la búsqueda real cuando el temporizador se dispara.
 @app.callback(
     Output('pilot-search-dropdown', 'options'),
-    Input('pilot-search-dropdown', 'search_value'),
+    Output('last-search-store', 'data'),
+    Output('search-debounce-interval', 'disabled', allow_duplicate=True), # Deshabilita el timer después de usarlo
+    Input('search-debounce-interval', 'n_intervals'), # Se activa por el temporizador
+    State('pilot-search-dropdown', 'search_value'),
     State('pilot-search-dropdown', 'value'),
     State('region-filter', 'value'),
     State('country-filter', 'value'),
-    # --- MODIFICACIÓN: Añadimos el State para saber la disciplina activa ---
     State('active-discipline-store', 'data'),
-    prevent_initial_call=True,
+    State('last-search-store', 'data'),
+    prevent_initial_call=True
 )
-def update_pilot_search_options(search_value, current_selected_pilot, region_filter, country_filter, active_discipline_filename):
-    # --- MODIFICACIÓN: Cargamos el DataFrame correcto al inicio de la función ---
-    # 1. Cargar los datos de la disciplina actual
-    df_current_discipline = pd.read_csv(active_discipline_filename)
-    # Aplicamos los mismos filtros iniciales que en el callback principal
-    df_current_discipline = df_current_discipline[df_current_discipline['IRATING'] > 1]
-    df_current_discipline = df_current_discipline[df_current_discipline['STARTS'] > 1]
-    df_current_discipline = df_current_discipline[df_current_discipline['CLASS'].str.contains('D|C|B|A|P|R', na=False)]
-    
-    # Asignamos la región para poder filtrar por ella
-    country_to_region_map = {country: region for region, countries in iracing_ragions.items() for country in countries}
-    df_current_discipline['REGION'] = df_current_discipline['LOCATION'].map(country_to_region_map).fillna('International')
-    # --- FIN DE LA MODIFICACIÓN ---
-
-    # Si no hay texto de búsqueda, pero ya hay un piloto seleccionado,
-    # nos aseguramos de que su opción esté disponible para que no desaparezca.
-    if not search_value:
-        if current_selected_pilot:
-            return [{'label': current_selected_pilot, 'value': current_selected_pilot}]
-        return []
-
-    # Mantenemos la optimización de no buscar con texto muy corto
-    if len(search_value) < 2:
-        return []
+def update_pilot_search_options_debounced(n, search_value, current_selected_pilot, 
+                                         region_filter, country_filter, active_discipline_filename, 
+                                         last_search):
+    
+    # --- OPTIMIZACIONES CLAVE ---
+    # 1. Si la búsqueda es inválida o es la misma que la anterior, no hacer nada.
+    if not search_value or len(search_value) < 3 or search_value == last_search:
+        # Devolvemos dash.no_update para las opciones y el store, y deshabilitamos el timer.
+        return dash.no_update, dash.no_update, True
 
-    # 1. La lógica de filtrado ahora usa el DataFrame correcto
-    if not region_filter: region_filter = 'ALL'
-    if not country_filter: country_filter = 'ALL'
+    print(f"🚀 EXECUTING OPTIMIZED SEARCH for: '{search_value}'")
+    
+    # --- LÓGICA DE BÚSQUEDA (sin cambios, pero ahora se ejecuta mucho menos) ---
+    df_current_discipline = DISCIPLINE_DATAFRAMES[active_discipline_filename]
 
+    # Filtramos el DataFrame una sola vez
     filtered_df = df_current_discipline
-    if region_filter != 'ALL':
+    if region_filter and region_filter != 'ALL':
         filtered_df = filtered_df[filtered_df['REGION'] == region_filter]
-    if country_filter != 'ALL':
+    if country_filter and country_filter != 'ALL':
         filtered_df = filtered_df[filtered_df['LOCATION'] == country_filter]
 
-    # 2. La búsqueda de coincidencias no cambia
-    matches = filtered_df[filtered_df['DRIVER'].str.contains(search_value, case=False)]
-    top_matches = matches.nlargest(20, 'IRATING')
+    # Búsqueda de coincidencias (más eficiente en un DF ya filtrado)
+    # Usamos `na=False` para evitar errores con valores nulos
+    matches = filtered_df[filtered_df['DRIVER'].str.contains(search_value, case=False, na=False)]
+    
+    # OPTIMIZACIÓN: Devolvemos menos resultados para que la respuesta sea más ligera.
+    top_matches = matches.nlargest(15, 'IRATING') 
 
-    # 3. Creamos las opciones a partir de las coincidencias
     options = [{'label': row['DRIVER'], 'value': row['DRIVER']} 
                for _, row in top_matches.iterrows()]
 
-    # 4. LA CLAVE: Si el piloto ya seleccionado no está en la nueva lista de opciones
-    # (porque borramos el texto, por ejemplo), lo añadimos para que no se borre de la vista.
+    # Asegurarse de que el piloto seleccionado no desaparezca de las opciones
     if current_selected_pilot and not any(opt['value'] == current_selected_pilot for opt in options):
         options.insert(0, {'label': current_selected_pilot, 'value': current_selected_pilot})
     
-    print(f"DEBUG: Búsqueda de '{search_value}' encontró {len(options)} coincidencias.")
-    
-    return options
+    # Devolvemos las nuevas opciones, actualizamos el 'last_search' y deshabilitamos el timer.
+    return options, search_value, True
+
+# CALLBACK 3: Limpia las opciones si el usuario borra el texto.
+@app.callback(
+    Output('pilot-search-dropdown', 'options', allow_duplicate=True),
+    Input('pilot-search-dropdown', 'search_value'),
+    State('pilot-search-dropdown', 'value'),
+    prevent_initial_call=True
+)
+def clear_options_on_empty_search(search_value, current_selected_pilot):
+    if not search_value:
+        # Si no hay texto, solo muestra la opción del piloto seleccionado (si existe).
+        if current_selected_pilot:
+            return [{'label': current_selected_pilot, 'value': current_selected_pilot}]
+        return []
+    return dash.no_update
+
 
 # --- CALLBACK para limpiar la búsqueda si cambian los filtros ---
 @app.callback(
@@ -1443,8 +2238,8 @@ def update_button_styles(formula_clicks, road_clicks, oval_clicks, dirt_road_cli
 def update_table_and_search(
     region_filter, country_filter, selected_pilot,
     page_current, page_size, sort_by, state_active_cell,
-    active_discipline_filename, # <-- Nuevo argumento desde el State
-    discipline_change_trigger # <-- Nuevo argumento desde el Input
+    active_discipline_filename,
+    discipline_change_trigger
 ):
     
     ctx = dash.callback_context
@@ -1458,22 +2253,8 @@ def update_table_and_search(
     # Leemos y procesamos el archivo seleccionado
     #df = pd.read_csv(filename)
     df = DISCIPLINE_DATAFRAMES[active_discipline_filename]
-    '''df = df[df['IRATING'] > 1]
-    df = df[df['STARTS'] > 1]
-    df = df[df['CLASS'].str.contains('D|C|B|A|P|R', na=False)]
 
-    country_to_region_map = {country: region for region, countries in iracing_ragions.items() for country in countries}
-    df['REGION'] = df['LOCATION'].map(country_to_region_map).fillna('International')
-    
-    df['Rank World'] = df['IRATING'].rank(method='first', ascending=False).fillna(0).astype(int)
-    df['Rank Region'] = df.groupby('REGION')['IRATING'].rank(method='first', ascending=False).fillna(0).astype(int)
-    df['Rank Country'] = df.groupby('LOCATION')['IRATING'].rank(method='first', ascending=False).fillna(0).astype(int)
-    
-    df['CLASS'] = df['CLASS'].str[0]'''
     df_for_graphs = df.copy() # Copia para gráficos que no deben ser filtrados
-
-    # --- 3. LÓGICA DE FILTRADO Y VISUALIZACIÓN (sin cambios) ---
-    # El resto de la función sigue igual, pero ahora opera sobre el 'df' que acabamos de cargar.
     
     # Lógica de columnas dinámicas
     base_cols = ['DRIVER', 'IRATING', 'LOCATION', 'REGION','CLASS', 'STARTS', 'WINS' ]
@@ -1519,17 +2300,15 @@ def update_table_and_search(
     elif triggered_id == 'pilot-search-dropdown' and selected_pilot:
         match_index = filtered_df.index.get_loc(df[df['DRIVER'] == selected_pilot].index[0])
         if match_index is not None:
-            target_page = match_index // page_size
+            target_page = match_index // 100  # CAMBIO: Usar 100 en lugar de page_size
             driver_column_index = list(filtered_df.columns).index('DRIVER')
             new_active_cell = {
-                'row': match_index % page_size,
-                'row_id': match_index % page_size,
+                'row': match_index % 100,  # CAMBIO: Usar 100 en lugar de page_size
+                'row_id': match_index % 100,  # CAMBIO: Usar 100
                 'column': driver_column_index,
                 'column_id': 'DRIVER'
             }
 
-   
-
     # --- 5. GENERACIÓN DE COLUMNAS PARA LA TABLA ---
     columns_definition = []
     for col_name in filtered_df.columns:
@@ -1545,8 +2324,8 @@ def update_table_and_search(
             columns_definition.append({"name": col_name.title(), "id": col_name})
 
     # --- 6. PAGINACIÓN ---
+    page_size = 100  # FORZAR: Siempre usar 100 elementos por página
     start_idx = target_page * page_size
-
     end_idx = start_idx + page_size
     
     # Aplicamos el formato de bandera a los datos de la página actual
@@ -1555,7 +2334,7 @@ def update_table_and_search(
     page_data = page_df.to_dict('records')
     
     total_pages = len(filtered_df) // page_size + (1 if len(filtered_df) % page_size > 0 else 0)
-
+    
     # --- 7. ACTUALIZACIÓN DE GRÁFICOS ---
     graph_indices = filtered_df.index
     highlight_irating = None
@@ -1700,21 +2479,9 @@ def update_active_cell_from_store(active_cell,ds,ds1,a,b):
         ds1 = ds
         return ds.get('active_cell'),ds1
 
-    
-    
-    
-    '''active_cell = a
-    selected_pilot = shared_data.get('selected_pilot', '')
-    print('..............')
-    print(shared_data)
-    
-    print(f"DEBUG: Recuperando active_cell del store: {active_cell}")
-    print(f"DEBUG: Piloto asociado: {selected_pilot}")
-    shared_data['shared_data'] = ''
-    
-    
-    return active_cell'''
-
 
 if __name__ == "__main__":
-       app.run(debug=True)
+       app.run(debug=True)
+
+
+

assets/custom.css

@@ -0,0 +1,63 @@
+/* assets/custom.css */
+.dash-table-container .dash-spreadsheet-container .dash-cell {
+    height: calc(70vh / 21.5); /* 70vh dividido por el número de filas por página */
+    min-height: 1px;
+    max-height: 5px;
+}
+
+
+@font-face {
+  font-family: 'DashboardFont'; /* Dale un nombre para usarla en tu app */
+  src: url('ADDCN___.ttf') format('truetype'); /* Apunta al archivo de tu fuente */
+}
+/* 2. Aplica la fuente a toda la aplicación */
+/* body {
+  font-family: 'DashboardFont', sans-serif; Usa tu fuente. 'sans-serif' es un respaldo 
+} */
+
+
+/* Opcional: Asegúrate de que los títulos también la usen */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'DashboardFont', 'Lato', sans-serif;
+}
+
+.iracing-dropdown .Select-control {
+    background-color: rgba(11, 11, 19, 1) !important; /* Fondo gris oscuro */
+    border: 1px solid #4A4A4A !important; /* Borde sutil un poco más claro */
+    border-radius: 4px !important;  
+    box-shadow: none !important; /* Sin sombras */
+}
+
+/* Texto de la opción seleccionada */
+.iracing-dropdown .Select-value-label {
+    color: #E0E0E0 !important; /* Color de texto gris claro */
+}
+
+/* Flecha del dropdown */
+.iracing-dropdown .Select-arrow {
+    border-color: #E0E0E0 transparent transparent !important; /* Hace la flecha del color del texto */
+}
+
+/* Menú que se despliega */
+.iracing-dropdown .Select-menu-outer {
+    background-color: #323232 !important; /* Mismo fondo que el control */
+    border: 1px solid #4A4A4A !important; /* Mismo borde */
+    border-radius: 4px !important;
+}
+
+/* Estilo de cada opción en el menú */
+.iracing-dropdown .Select-option {
+    background-color: #323232 !important; /* Fondo de la opción */
+    color: #E0E0E0 !important; /* Color del texto de la opción */
+}
+
+/* Estilo de la opción cuando el ratón está encima (hover) */
+.iracing-dropdown .Select-option:hover {
+    background-color: #4A4A4A !important; /* Un gris un poco más claro para el hover */
+}
+
+/* Estilo de la opción que está seleccionada/enfocada */
+.iracing-dropdown .Select-option.is-focused {
+    background-color: #4A4A4A !important;
+}
+

assets/style.css

@@ -0,0 +1,437 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
+
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: rgba(5,5,15,255);
+  color: #ffffff;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  animation: fadeIn 0.8s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* RESPONSIVE DESIGN PARA EL NUEVO LAYOUT */
+
+/* Diseño responsive para la sección de filtros y tabla */
+@media (max-width: 1024px) {
+  /* Filtros y tabla se vuelven verticales en tablets */
+  .filters-table-container {
+    flex-direction: column !important;
+  }
+  
+  .filters-table-container > div {
+    min-width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+@media (max-width: 768px) {
+  /* Contenedor principal con menos padding en móvil */
+  .main-container {
+    padding: 10px 3vw !important;
+  }
+  
+  /* Grid de gráficos adicionales en una sola columna */
+  .additional-charts-grid {
+    grid-template-columns: 1fr !important;
+  }
+  
+  /* Ajustar títulos para móvil */
+  h1 {
+    font-size: clamp(28px, 8vw, 36px) !important;
+  }
+  
+  h3 {
+    font-size: clamp(16px, 4vw, 20px) !important;
+  }
+  
+  /* Botones más pequeños en móvil */
+  .dashboard-type-button {
+    width: 70px !important;
+    font-size: 10px !important;
+    padding: 6px 4px !important;
+  }
+  
+  /* KPIs overlay más pequeño en móvil */
+  .kpi-overlay {
+    width: 95% !important;
+    top: 10px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Contenedor muy compacto para móviles pequeños */
+  .main-container {
+    padding: 5px 2vw !important;
+    gap: 15px !important;
+  }
+  
+  /* Secciones con menos padding */
+  .section-container {
+    padding: 10px !important;
+  }
+  
+  /* Filtros en columna única */
+  .filters-row {
+    flex-direction: column !important;
+    gap: 10px !important;
+  }
+}
+
+/* ESTILOS PARA LOS BOTONES DEL TIPO DE TABLERO */
+.dashboard-type-button {
+    background-color: rgba(18,18,26,.5);
+    color: white;
+    border: 1px solid #4A4A4A;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    width: 100px;
+    text-align: center;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+.dashboard-type-button:hover {
+    background-color: rgba(0, 111, 255, 0.3);
+    border-color: rgb(0, 111, 255);
+}
+
+/* ESTILOS PARA DROPDOWNS ACTIVOS */
+.iracing-dropdown.active-filter .Select-control {
+    background-color: rgba(0, 111, 255, 0.25) !important;
+    border: 1px solid rgba(0, 111, 255, 0.7) !important;
+    box-shadow: 0 0 10px rgba(0, 111, 255, 0.3) !important;
+}
+
+.iracing-dropdown.active-filter .Select-placeholder,
+.iracing-dropdown.active-filter .Select-value-label {
+    color: #FFFFFF !important;
+}
+
+.iracing-dropdown.active-filter .Select-arrow {
+    border-top-color: #FFFFFF !important;
+}
+
+/* ESTILOS PARA LA TABLA INTERACTIVA */
+#datatable-interactiva .dash-cell {
+    font-size: clamp(8px, 0.6vw, 12px) !important;
+    padding: 1px 1px !important;
+}
+
+#datatable-interactiva .dash-header {
+    font-size: clamp(9px, 0.7vw, 10px) !important;
+    padding: 2px 1px !important;
+}
+
+/* ESTILOS ESPECÍFICOS POR COLUMNA */
+#datatable-interactiva .dash-cell[data-dash-column="REGION"] {
+    font-size: 10px !important;
+}
+
+#datatable-interactiva .dash-cell[data-dash-column="DRIVER"] {
+    font-size: 10px !important;
+}
+
+#datatable-interactiva .dash-cell[data-dash-column="CLASS"] {
+    font-size: 12px !important;
+}
+
+#datatable-interactiva .dash-cell[data-dash-column="IRATING"] {
+    font-size: 10px !important;
+}
+
+#datatable-interactiva .dash-cell[data-dash-column="STARTS"] {
+    font-size: 10px !important;
+}
+
+#datatable-interactiva .dash-cell[data-dash-column="WINS"] {
+    font-size: 10px !important;
+}
+
+/* ESTILOS PARA DROPDOWNS Y LABELS */
+.iracing-dropdown, 
+.iracing-dropdown .Select-value-label, 
+.iracing-dropdown .Select-placeholder {
+    font-size: clamp(10px, 0.8vw, 14px) !important;
+}
+
+label {
+    font-size: clamp(11px, 0.8vw, 14px) !important;
+}
+
+/* ESTILOS PARA LAS TABLAS DE COMPETITIVIDAD */
+#competitiveness-tables-container .pagination {
+  justify-content: center;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+#competitiveness-tables-container .page-item .page-link {
+  background-color: rgba(11,11,19,1);
+  color: rgb(255, 255, 255, .8);
+  border: 1px solid #4A4A4A;
+  font-size: 12px;
+  padding: 4px 10px;
+  margin: 0 2px;
+  border-radius: 4px;
+}
+
+#competitiveness-tables-container .page-item:not(.active) .page-link:hover {
+  background-color: #323232;
+  color: white;
+}
+
+#competitiveness-tables-container .page-item.active .page-link {
+  background-color: rgba(0, 111, 255, 0.5);
+  border-color: rgb(0, 111, 255);
+  color: white;
+  font-weight: bold;
+}
+
+#competitiveness-tables-container .page-item.disabled .page-link {
+  background-color: rgba(11,11,19,1);
+  color: #4A4A4A;
+  border-color: #323232;
+}
+
+/* ESTILOS ESPECÍFICOS PARA LAS TABLAS DE COMPETITIVIDAD */
+#competitiveness-tables-container .dash-table-container {
+    border-radius: 10px !important;
+    overflow: hidden !important;
+    max-width: 100% !important;
+}
+
+#competitiveness-tables-container .dash-spreadsheet-container {
+    max-height: 350px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
+#competitiveness-tables-container .dash-cell {
+    font-size: 12px !important;
+    padding: 6px 8px !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+}
+
+#competitiveness-tables-container .dash-header {
+    font-size: 13px !important;
+    font-weight: bold !important;
+    padding: 8px 6px !important;
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 10 !important;
+}
+
+/* SCROLL PERSONALIZADO PARA LAS TABLAS DE COMPETITIVIDAD */
+#competitiveness-tables-container .dash-spreadsheet-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+#competitiveness-tables-container .dash-spreadsheet-container::-webkit-scrollbar-track {
+    background: rgba(30,30,38,1);
+    border-radius: 3px;
+}
+
+#competitiveness-tables-container .dash-spreadsheet-container::-webkit-scrollbar-thumb {
+    background: #4A4A4A;
+    border-radius: 3px;
+}
+
+#competitiveness-tables-container .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover {
+    background: #6c6c6c;
+}
+
+/* RESPONSIVE: En móvil las tablas se vuelven verticales */
+@media (max-width: 768px) {
+    #competitiveness-tables-container > div {
+        grid-template-columns: 1fr !important;
+        gap: 15px !important;
+    }
+    
+    #competitiveness-tables-container .dash-spreadsheet-container {
+        max-height: 300px !important;
+    }
+}
+
+/* ASEGURAR QUE LOS CONTENEDORES NO SE SALGAN */
+.chart-card {
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+}
+
+.chart-card > div {
+    max-width: 100% !important;
+    overflow: hidden !important;
+}
+
+/* UTILIDADES RESPONSIVE */
+.container-fluid {
+  max-width: 100%;
+  padding: 0;
+}
+
+.no-gutters {
+  margin: 0;
+  padding: 0;
+}
+
+/* SCROLLBAR PERSONALIZADO */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(18,18,26,.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4A4A4A;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6c6c6c;
+}
+
+/* ESTILOS MEJORADOS PARA LA TABLA CON SCROLL */
+#datatable-interactiva .dash-table-container {
+    border-radius: 15px !important;
+    overflow: hidden !important;
+    max-height: 450px !important;
+}
+
+#datatable-interactiva .dash-spreadsheet-container {
+    max-height: 450px !important;
+    overflow-y: auto !important;
+    overflow-x: auto !important;
+}
+
+/* SCROLL PERSONALIZADO PARA LA TABLA PRINCIPAL */
+#datatable-interactiva .dash-spreadsheet-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+#datatable-interactiva .dash-spreadsheet-container::-webkit-scrollbar-track {
+    background: rgba(30,30,38,1);
+    border-radius: 4px;
+}
+
+#datatable-interactiva .dash-spreadsheet-container::-webkit-scrollbar-thumb {
+    background: #4A4A4A;
+    border-radius: 4px;
+}
+
+#datatable-interactiva .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover {
+    background: #6c6c6c;
+}
+
+#datatable-interactiva .dash-spreadsheet-container::-webkit-scrollbar-corner {
+    background: rgba(30,30,38,1);
+}
+
+/* ASEGURAR QUE EL HEADER PERMANEZCA VISIBLE */
+#datatable-interactiva .dash-header {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 10 !important;
+    background-color: rgba(30,30,38,1) !important;
+}
+
+/* ESTILOS MEJORADOS PARA LOS KPIs VERTICALES DEL PILOTO */
+#kpi-pilot .main-svg {
+    background: rgba(0,0,0,0) !important;
+}
+
+#kpi-pilot .indicator {
+    text-align: center !important;
+}
+
+/* RESPONSIVE: Ajustar en móvil */
+@media (max-width: 768px) {
+    #datatable-interactiva .dash-spreadsheet-container {
+        max-height: 400px !important;
+    }
+    
+    /* KPIs del piloto más compactos en móvil */
+    #kpi-pilot {
+        height: 220px !important;
+    }
+}
+
+/* ESTILOS PARA LA TABLA KPI DEL PILOTO */
+#kpi-pilot .dash-table-container {
+    background: transparent !important;
+    border: none !important;
+}
+
+#kpi-pilot .dash-spreadsheet-container {
+    background: transparent !important;
+    border: none !important;
+}
+
+#kpi-pilot .dash-cell {
+    background: transparent !important;
+    border: none !important;
+    font-family: 'Lato, sans-serif' !important;
+}
+
+#kpi-pilot .dash-header {
+    display: none !important;
+}
+
+/* Hover effect sutil para las filas de KPI */
+#kpi-pilot tr:hover {
+    background-color: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 8px;
+    transition: background-color 0.2s ease;
+}
+
+/* Responsive para la tabla KPI */
+@media (max-width: 768px) {
+    #kpi-pilot {
+        height: 220px !important;
+    }
+    
+    #kpi-pilot .dash-cell {
+        padding: 8px 4px !important;
+        font-size: 12px !important;
+    }
+    
+    #kpi-pilot .dash-cell[data-dash-column="value"] {
+        font-size: 18px !important;
+    }
+}
+#pilot-search-dropdown .Select-input > input,
+#pilot-search-dropdown .Select-input input {
+    color: #FFFFFF !important;
+    background-color: transparent !important;
+    border: none !important;
+    outline: none !important;
+    font-family: 'Lato', sans-serif !important;
+    caret-color: #FFFFFF !important; /* Color del cursor de texto */
+}
+
+#pilot-search-dropdown .Select-input > input::placeholder {
+    color: #A0A0A0 !important;
+    opacity: 1 !important;
+}
+
+#pilot-search-dropdown .Select-placeholder {
+    color: #A0A0A0 !important;
+}
+
+#pilot-search-dropdown .Select-input > input:focus {
+    color: #FFFFFF !important;
+    background-color: rgba(11,11,19,1) !important;
+}