mejora diseño

src/pages/comparacion.py

@@ -3,14 +3,13 @@ import streamlit as st
 from src.config import PARES_ATAQUE_LOCAL, PARES_ATAQUE_VISITANTE
 from src.statistics import construir_comparacion, mostrar_comparacion
 from src.charts import grafico_radar
-from src.utils import sec
+from src.utils import sec, no_match_page
 
 st.session_state["_current_page"] = "comparacion"
 
 ctx = st.session_state.get("_ctx", {})
 if not ctx:
-    st.warning("Selecciona un partido en la página de Inicio.")
-    st.stop()
+    no_match_page()
 
 eq_l = ctx["eq_l"]
 eq_v = ctx["eq_v"]

src/pages/cuotas_kelly.py

@@ -7,14 +7,13 @@ from src.config import (
     KELLY_MIN_RECOMENDADO, BANK_MIN, BANK_DEFAULT, BANK_STEP,
 )
 from src.charts import _THEME as _CHART_THEME
-from src.utils import sec
+from src.utils import sec, no_match_page
 
 st.session_state["_current_page"] = "cuotas_kelly"
 
 ctx = st.session_state.get("_ctx", {})
 if not ctx:
-    st.warning("Selecciona un partido en la página de Inicio.")
-    st.stop()
+    no_match_page()
 
 eq_l      = ctx["eq_l"]
 eq_v      = ctx["eq_v"]
@@ -161,20 +160,20 @@ def _color_kelly(v) -> str:
     try:
         n = float(v)
         if n > KELLY_MIN_RECOMENDADO:
-            return "background-color:#0D9E6E;color:white;font-weight:bold"
+            return "background-color:#D1FAE5;color:#065F46;font-weight:700"
         elif n > 0:
-            return "background-color:#4CAF7D;color:white"
+            return "background-color:#ECFDF5;color:#047857;font-weight:600"
         else:
-            return "background-color:#D93025;color:white"
+            return "background-color:#FEE2E2;color:#991B1B;font-weight:600"
     except Exception:
         return ""
 
 def _color_ve(v) -> str:
     try:
         return (
-            "background-color:#0D6E4E;color:white;font-weight:bold"
+            "background-color:#D1FAE5;color:#065F46;font-weight:700"
             if float(v) > 0
-            else "background-color:#B71C1C;color:white"
+            else "background-color:#FEE2E2;color:#991B1B;font-weight:600"
         )
     except Exception:
         return ""

src/pages/estadisticas.py

@@ -4,14 +4,13 @@ import pandas as pd
 from src.config import KELLY_MIN_RECOMENDADO
 from src.data_loader import ultimos_n
 from src.statistics import mostrar_tabla_partidos
-from src.utils import sec, med
+from src.utils import sec, med, no_match_page
 
 st.session_state["_current_page"] = "estadisticas"
 
 ctx = st.session_state.get("_ctx", {})
 if not ctx:
-    st.warning("Selecciona un partido en la página de Inicio.")
-    st.stop()
+    no_match_page()
 
 eq_l     = ctx["eq_l"]
 eq_v     = ctx["eq_v"]
@@ -217,10 +216,10 @@ def _center_compare(df_l: pd.DataFrame, col_l: str,
         f'<div style="margin-bottom:8px">'
         f'<div style="font-size:10px;color:var(--text-muted);margin-bottom:3px">🏠 {eq_l}</div>'
         f'<div style="height:8px;border-radius:4px;background:var(--bg-hover);overflow:hidden">'
-        f'<div style="width:{pct_l:.0f}%;height:100%;background:#2570D4;border-radius:4px"></div></div>'
+        f'<div style="width:{pct_l:.0f}%;height:100%;background:var(--blue);border-radius:4px"></div></div>'
         f'<div style="font-size:10px;color:var(--text-muted);margin:5px 0 3px">✈️ {eq_v}</div>'
         f'<div style="height:8px;border-radius:4px;background:var(--bg-hover);overflow:hidden">'
-        f'<div style="width:{pct_v:.0f}%;height:100%;background:#D93025;border-radius:4px"></div></div>'
+        f'<div style="width:{pct_v:.0f}%;height:100%;background:var(--red);border-radius:4px"></div></div>'
         f'</div>',
         unsafe_allow_html=True,
     )

src/pages/inicio.py

@@ -1,4 +1,4 @@
-from datetime import date
+from datetime import date, datetime as _dt
 
 import streamlit as st
 
@@ -12,7 +12,28 @@ if df_proximos is None:
     st.stop()
 
 today = date.today()
-df_up = df_proximos[df_proximos["Date"].dt.date >= today].copy()
+_now  = _dt.now()
+
+
+def _es_proximo(row) -> bool:
+    """True si el partido aún no ha comenzado (fecha futura, o hoy y hora no pasada)."""
+    d = row["Date"].date()
+    if d > today:
+        return True
+    if d < today:
+        return False
+    # Mismo día: comparar hora local de inicio
+    t = str(row.get("Time_local", "") or "")
+    if not t:
+        return True   # sin hora → mantener por precaución
+    try:
+        h, m = map(int, t.split(":"))
+        return (h, m) > (_now.hour, _now.minute)
+    except Exception:
+        return True
+
+
+df_up = df_proximos[df_proximos.apply(_es_proximo, axis=1)].copy()
 
 sort_cols = ["Date", "Time_local"] if "Time_local" in df_up.columns else ["Date"]
 df_up = df_up.sort_values(sort_cols, na_position="last").reset_index(drop=True)

src/pages/prediccion_rf.py

@@ -14,7 +14,7 @@ from src.config import (
 )
 from src.charts import _THEME as _CHART_THEME
 from src.models import mostrar_rf_equipo
-from src.utils import sec, get_pred
+from src.utils import sec, get_pred, no_match_page
 
 _IMG_COLORS = {
     "BG":      "#0F1117",
@@ -193,8 +193,7 @@ st.session_state["_current_page"] = "prediccion_rf"
 
 ctx = st.session_state.get("_ctx", {})
 if not ctx:
-    st.warning("Selecciona un partido en la página de Inicio.")
-    st.stop()
+    no_match_page()
 
 eq_l = ctx["eq_l"]
 eq_v = ctx["eq_v"]

src/src/config.py

@@ -15,16 +15,16 @@ PAGE_LAYOUT = "wide"
 # --- Colores ---
 COLOR_LOCAL = "#2570D4"
 COLOR_VISITANTE = "#7C4DCC"
-COLOR_EMPATE = "#9BA3AE"
+COLOR_EMPATE = "#94A3B8"
 COLOR_POSITIVO = "#0D9E6E"
 COLOR_NEGATIVO = "#D93025"
-COLOR_NEUTRO = "#5A6270"
+COLOR_NEUTRO = "#64748B"
 COLOR_MEDIA = "#B07D0E"
-COLOR_ADVERTENCIA = "#f9a825"
-COLOR_LOCAL_ALPHA = "rgba(37,112,212,0.3)"
-COLOR_VISITANTE_ALPHA = "rgba(124,77,204,0.3)"
-COLOR_LOCAL_HT = "#7DAAED"
-COLOR_VISITANTE_HT = "#B599E0"
+COLOR_ADVERTENCIA = "#F59E0B"
+COLOR_LOCAL_ALPHA = "rgba(37,112,212,0.2)"
+COLOR_VISITANTE_ALPHA = "rgba(124,77,204,0.2)"
+COLOR_LOCAL_HT = "#93C5FD"
+COLOR_VISITANTE_HT = "#C4B5FD"
 
 # --- Hiperparámetros del modelo Random Forest ---
 RF_N_ESTIMATORS = 100

src/src/statistics.py

@@ -74,11 +74,11 @@ def _colorear_diferencia_serie(series: pd.Series) -> list[str]:
         if pd.isna(v):
             result.append("")
         elif abs(v) <= umbral:
-            result.append(f"background-color: {COLOR_ADVERTENCIA}; color: black; font-weight: bold")
+            result.append("background-color: #FEF3C7; color: #92400E; font-weight: 600")
         elif v > 0:
-            result.append(f"background-color: {COLOR_POSITIVO}; color: white; font-weight: bold")
+            result.append("background-color: #D1FAE5; color: #065F46; font-weight: 600")
         else:
-            result.append(f"background-color: {COLOR_NEGATIVO}; color: white; font-weight: bold")
+            result.append("background-color: #FEE2E2; color: #991B1B; font-weight: 600")
     return result
 
 
@@ -93,11 +93,11 @@ def _colorear_desv(series: pd.Series) -> list[str]:
         if pd.isna(v):
             result.append("")
         elif v <= q33:
-            result.append(f"background-color: {COLOR_POSITIVO}; color: white; font-weight: bold")
+            result.append("background-color: #D1FAE5; color: #065F46; font-weight: 600")
         elif v <= q66:
-            result.append(f"background-color: {COLOR_ADVERTENCIA}; color: black; font-weight: bold")
+            result.append("background-color: #FEF3C7; color: #92400E; font-weight: 600")
         else:
-            result.append(f"background-color: {COLOR_NEGATIVO}; color: white; font-weight: bold")
+            result.append("background-color: #FEE2E2; color: #991B1B; font-weight: 600")
     return result
 
 

src/src/styles.py

@@ -1,586 +1,792 @@
 import streamlit as st
 
 _CSS = """<style>
+/* ── Google Inter font ── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
 :root {
-  --bg-primary:    #F6F8FA;
+  /* ── Surfaces ── */
+  --bg-primary:    #F8FAFC;
   --bg-secondary:  #FFFFFF;
   --bg-card:       #FFFFFF;
-  --bg-hover:      #F0F2F5;
-  --bg-active:     #EBF2FF;
-  --border:        #E2E6EA;
-  --border-light:  #EAECEF;
-  --text-primary:  #1A1F2E;
-  --text-secondary:#5A6270;
-  --text-muted:    #9BA3AE;
-  --green:         #0D9E6E;
-  --green-dim:     rgba(13,158,110,0.08);
+  --bg-hover:      #F1F5F9;
+  --bg-active:     #EFF6FF;
+
+  /* ── Borders ── */
+  --border:        #E2E8F0;
+  --border-light:  #F1F5F9;
+
+  /* ── Text ── */
+  --text-primary:  #0F172A;
+  --text-secondary:#475569;
+  --text-muted:    #94A3B8;
+
+  /* ── Brand (kept identical to config.py constants) ── */
   --blue:          #2570D4;
-  --blue-dim:      rgba(37,112,212,0.08);
-  --yellow:        #B07D0E;
-  --yellow-dim:    rgba(176,125,14,0.08);
+  --blue-dim:      rgba(37,112,212,0.09);
+  --blue-mid:      rgba(37,112,212,0.18);
   --red:           #D93025;
-  --red-dim:       rgba(217,48,37,0.08);
+  --red-dim:       rgba(217,48,37,0.09);
+  --green:         #0D9E6E;
+  --green-dim:     rgba(13,158,110,0.09);
+  --yellow:        #B07D0E;
+  --yellow-dim:    rgba(176,125,14,0.09);
   --purple:        #7C4DCC;
-  --purple-dim:    rgba(124,77,204,0.08);
-  --radius-sm:     6px;
-  --radius-md:     10px;
-  --radius-lg:     14px;
-  --shadow:        0 2px 12px rgba(0,0,0,0.06);
-  --shadow-md:     0 4px 20px rgba(0,0,0,0.1);
-  --font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --purple-dim:    rgba(124,77,204,0.09);
+
+  /* ── Radius ── */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  /* ── Shadows ── */
+  --shadow-xs: 0 1px 3px rgba(15,23,42,0.06);
+  --shadow:    0 2px 10px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.04);
+  --shadow-md: 0 6px 20px rgba(15,23,42,0.09), 0 2px 6px rgba(15,23,42,0.05);
+
+  /* ── Font ── */
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-/* ─── App shell ─── */
-.stApp { background:var(--bg-primary) !important; font-family:var(--font) !important; }
+/* ════════════════════════════════════
+   APP SHELL
+════════════════════════════════════ */
+.stApp {
+  background: var(--bg-primary) !important;
+  font-family: var(--font) !important;
+}
 .main .block-container {
-  background:var(--bg-primary) !important;
-  padding:24px 28px 60px !important;
-  max-width:1400px !important;
+  background: var(--bg-primary) !important;
+  padding: 20px 28px 60px !important;
+  max-width: 1400px !important;
 }
 
 /* ─── Hide Sidebar ─── */
 [data-testid="stSidebar"],
 [data-testid="stSidebarCollapsedControl"],
 [data-testid="stSidebarNav"],
-section[data-testid="stSidebar"] {
-  display:none !important;
-}
-.main { margin-left:0 !important; }
+section[data-testid="stSidebar"] { display: none !important; }
+.main { margin-left: 0 !important; }
 
 /* ─── Typography ─── */
-h1,h2,h3,h4,h5 { font-family:var(--font) !important; color:var(--text-primary) !important; }
+h1,h2,h3,h4,h5 {
+  font-family: var(--font) !important;
+  color: var(--text-primary) !important;
+  letter-spacing: -0.02em !important;
+}
+
+/* ════════════════════════════════════
+   STREAMLIT NATIVE COMPONENTS
+════════════════════════════════════ */
 
 /* ─── Metrics ─── */
 [data-testid="stMetric"] {
-  background:var(--bg-card) !important;
-  border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important;
-  padding:14px 16px !important;
-  box-shadow:var(--shadow) !important;
-}
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  padding: 14px 16px !important;
+  box-shadow: var(--shadow-xs) !important;
+  transition: box-shadow 0.15s !important;
+}
+[data-testid="stMetric"]:hover { box-shadow: var(--shadow) !important; }
 [data-testid="stMetricValue"] {
-  color:var(--green) !important; font-size:24px !important; font-weight:700 !important;
+  color: var(--text-primary) !important;
+  font-size: 22px !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.03em !important;
 }
 [data-testid="stMetricLabel"] {
-  color:var(--text-muted) !important; font-size:10px !important;
-  font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.5px !important;
+  color: var(--text-muted) !important;
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.6px !important;
 }
-[data-testid="stMetricDelta"] { font-size:11px !important; }
+[data-testid="stMetricDelta"] { font-size: 11px !important; font-weight: 500 !important; }
 
 /* ─── Dataframes ─── */
 [data-testid="stDataFrame"] {
-  border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important;
-  overflow:hidden !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  overflow: hidden !important;
+  box-shadow: var(--shadow-xs) !important;
 }
 
 /* ─── Expanders ─── */
 [data-testid="stExpander"] {
-  background:var(--bg-card) !important;
-  border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important;
-  overflow:hidden !important;
-  box-shadow:none !important;
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  overflow: hidden !important;
+  box-shadow: var(--shadow-xs) !important;
 }
 [data-testid="stExpander"] details summary {
-  background:var(--bg-card) !important;
-  color:var(--text-secondary) !important;
-  font-size:13px !important; font-weight:500 !important; padding:12px 16px !important;
+  background: var(--bg-card) !important;
+  color: var(--text-secondary) !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  padding: 12px 16px !important;
+}
+[data-testid="stExpander"] details summary:hover {
+  background: var(--bg-hover) !important;
+  color: var(--text-primary) !important;
 }
-[data-testid="stExpander"] details summary:hover { background:var(--bg-hover) !important; }
 
 /* ─── Select boxes ─── */
-[data-testid="stSelectbox"]>div>div {
-  background:var(--bg-card) !important;
-  border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important;
-  color:var(--text-primary) !important; font-size:13px !important;
+[data-testid="stSelectbox"] > div > div {
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  color: var(--text-primary) !important;
+  font-size: 13px !important;
+  box-shadow: var(--shadow-xs) !important;
 }
 [data-testid="stSelectbox"] label {
-  color:var(--text-secondary) !important; font-size:11px !important;
-  font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.4px !important;
+  color: var(--text-muted) !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.5px !important;
 }
 
 /* ─── Buttons ─── */
-.stButton>button {
-  background:var(--green) !important; color:#fff !important;
-  border:none !important; border-radius:var(--radius-md) !important;
-  font-weight:600 !important; font-size:13px !important;
-  padding:9px 22px !important; transition:opacity 0.15s !important; box-shadow:none !important;
+.stButton > button {
+  background: linear-gradient(135deg, var(--green), #0b8a5f) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: var(--radius-md) !important;
+  font-weight: 600 !important;
+  font-size: 13px !important;
+  padding: 9px 22px !important;
+  transition: opacity 0.15s, transform 0.1s !important;
+  box-shadow: 0 2px 8px rgba(13,158,110,0.25) !important;
+  letter-spacing: 0.01em !important;
+}
+.stButton > button:hover {
+  opacity: 0.9 !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 12px rgba(13,158,110,0.3) !important;
+}
+.stButton > button[kind="primary"],
+.stButton > button[data-testid="stBaseButton-primary"] {
+  background: linear-gradient(135deg, var(--blue), #1a5ec0) !important;
+  box-shadow: 0 2px 8px rgba(37,112,212,0.25) !important;
+}
+.stButton > button[kind="primary"]:hover,
+.stButton > button[data-testid="stBaseButton-primary"]:hover {
+  box-shadow: 0 4px 12px rgba(37,112,212,0.3) !important;
+}
+.stButton > button[kind="secondary"],
+.stButton > button[data-testid="stBaseButton-secondary"] {
+  background: var(--bg-card) !important;
+  color: var(--text-secondary) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-xs) !important;
+}
+.stButton > button[kind="secondary"]:hover {
+  background: var(--bg-hover) !important;
+  color: var(--text-primary) !important;
+  box-shadow: var(--shadow) !important;
+  transform: translateY(-1px) !important;
 }
-.stButton>button:hover { opacity:0.88 !important; border:none !important; }
-.stButton>button[kind="primary"] { background:var(--blue) !important; }
 
 /* ─── Alerts ─── */
-[data-testid="stAlert"] { border-radius:var(--radius-md) !important; font-size:13px !important; }
+[data-testid="stAlert"] { border-radius: var(--radius-md) !important; font-size: 13px !important; }
 
 /* ─── Number input ─── */
 [data-testid="stNumberInput"] input {
-  background:var(--bg-card) !important; border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important; color:var(--text-primary) !important;
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  color: var(--text-primary) !important;
 }
 
 /* ─── Slider ─── */
 [data-testid="stSlider"] label {
-  color:var(--text-secondary) !important; font-size:11px !important;
-  font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.4px !important;
+  color: var(--text-secondary) !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.5px !important;
+}
+
+/* ─── Text input ─── */
+[data-testid="stTextInput"] input {
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-md) !important;
+  color: var(--text-primary) !important;
+  font-size: 13px !important;
+  padding: 8px 12px !important;
+}
+[data-testid="stTextInput"] input:focus {
+  border-color: var(--blue) !important;
+  box-shadow: 0 0 0 3px rgba(37,112,212,0.12) !important;
 }
 
 /* ─── Caption ─── */
-[data-testid="stCaptionContainer"] { color:var(--text-muted) !important; font-size:11px !important; }
+[data-testid="stCaptionContainer"] {
+  color: var(--text-muted) !important;
+  font-size: 11px !important;
+}
 
 /* ─── Tabs ─── */
 .stTabs [data-testid="stTabBar"] {
-  background:var(--bg-card) !important;
-  border:1px solid var(--border) !important;
-  border-radius:var(--radius-md) !important;
-  padding:4px !important; gap:2px !important;
-  margin-bottom:20px !important;
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-lg) !important;
+  padding: 5px !important;
+  gap: 2px !important;
+  margin-bottom: 20px !important;
+  box-shadow: var(--shadow-xs) !important;
 }
 .stTabs [data-testid="stTabBar"] button {
-  border-radius:var(--radius-sm) !important;
-  font-size:12px !important; font-weight:500 !important;
-  color:var(--text-secondary) !important;
-  background:transparent !important; border:none !important;
-  padding:8px 16px !important; white-space:nowrap !important;
-  transition:all 0.15s !important;
-}
-.stTabs [data-testid="stTabBar"] button:hover { color:var(--text-primary) !important; }
+  border-radius: var(--radius-md) !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  color: var(--text-secondary) !important;
+  background: transparent !important;
+  border: none !important;
+  padding: 8px 16px !important;
+  white-space: nowrap !important;
+  transition: all 0.15s !important;
+}
+.stTabs [data-testid="stTabBar"] button:hover {
+  color: var(--text-primary) !important;
+  background: var(--bg-hover) !important;
+}
 .stTabs [data-testid="stTabBar"] button[aria-selected="true"] {
-  background:var(--bg-secondary) !important;
-  color:var(--text-primary) !important;
-  font-weight:600 !important;
-  box-shadow:0 1px 4px rgba(0,0,0,0.1) !important;
+  background: var(--blue) !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(37,112,212,0.3) !important;
 }
-[data-testid="stTabPanel"] { padding:0 !important; }
+[data-testid="stTabPanel"] { padding: 0 !important; }
+
+/* ─── Spinner ─── */
+[data-testid="stSpinner"] > div { border-top-color: var(--blue) !important; }
 
 /* ─── Hide branding ─── */
-#MainMenu { visibility:hidden; }
-footer { visibility:hidden; }
-[data-testid="stToolbar"] { display:none !important; }
-[data-testid="stDecoration"] { display:none !important; }
+#MainMenu { visibility: hidden; }
+footer { visibility: hidden; }
+[data-testid="stToolbar"] { display: none !important; }
+[data-testid="stDecoration"] { display: none !important; }
 
-/* ══════════════════════════════════
+/* ════════════════════════════════════
    CUSTOM COMPONENTS
-══════════════════════════════════ */
+════════════════════════════════════ */
 
-/* Sidebar header */
-.fs-sb-header {
-  display:flex; align-items:center; gap:10px;
-  padding:16px 0 14px;
-  border-bottom:1px solid var(--border);
-  margin-bottom:16px;
-}
-.fs-sb-logo {
-  width:34px; height:34px; background:var(--green); border-radius:9px;
-  display:flex; align-items:center; justify-content:center;
-  font-size:17px; flex-shrink:0;
+/* ── Page navigation links ── */
+[data-testid="stPageLink"] { margin: 1px 0 !important; }
+[data-testid="stPageLink"] a {
+  border-radius: var(--radius-md) !important;
+  padding: 7px 12px !important;
+  font-size: 12px !important;
+  color: var(--text-secondary) !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  transition: all 0.15s !important;
+  text-decoration: none !important;
+  font-weight: 500 !important;
+  white-space: nowrap !important;
 }
-.fs-sb-title { font-size:14px; font-weight:700; color:var(--text-primary); line-height:1.2; }
-.fs-sb-sub { font-size:10px; color:var(--text-muted); }
-
-/* Sidebar section label */
-.fs-sb-sec {
-  font-size:10px; text-transform:uppercase; letter-spacing:0.8px;
-  color:var(--text-muted); font-weight:600; margin:14px 0 6px;
+[data-testid="stPageLink"] a:hover {
+  background: var(--bg-hover) !important;
+  color: var(--text-primary) !important;
 }
-
-/* Sidebar match mini card */
-.fs-match-mini {
-  background:var(--bg-active); border:1px solid rgba(37,112,212,0.3);
-  border-radius:var(--radius-md); padding:10px 12px; margin:10px 0;
+[data-testid="stPageLink"] a[aria-current="page"] {
+  background: var(--blue) !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(37,112,212,0.28) !important;
 }
-.fs-match-mini .home { color:var(--blue); font-weight:700; font-size:12px; }
-.fs-match-mini .away { color:var(--red); font-weight:700; font-size:12px; }
-.fs-match-mini .vs   { color:var(--text-muted); font-size:11px; padding:0 5px; }
-.fs-match-mini .meta { font-size:10px; color:var(--text-muted); margin-top:5px; }
 
-/* Sidebar stat pill */
-.fs-sb-pills {
-  display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;
-}
-.fs-sb-pill {
-  display:inline-flex; align-items:center; gap:3px;
-  background:var(--bg-hover); border:1px solid var(--border);
-  border-radius:20px; padding:3px 9px;
-  font-size:11px; color:var(--text-secondary);
+/* ── Topbar ── */
+.fs-topbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex-shrink: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
 }
-.fs-sb-pill span { font-weight:700; color:var(--text-primary); }
-
-/* Page header */
+.fs-topbar-logo .tl-icon {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  box-shadow: 0 2px 8px rgba(37,112,212,0.3);
+}
+
+/* ── Match context bar ── */
+.fs-match-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  background: linear-gradient(135deg, rgba(37,112,212,0.06), rgba(124,77,204,0.04));
+  border: 1px solid rgba(37,112,212,0.2);
+  border-left: 3px solid var(--blue);
+  border-radius: var(--radius-md);
+  padding: 9px 14px;
+  margin-bottom: 14px;
+  font-size: 13px;
+}
+.fs-match-bar .home { color: var(--blue); font-weight: 700; }
+.fs-match-bar .away { color: var(--red);  font-weight: 700; }
+.fs-match-bar .vs   { color: var(--text-muted); padding: 0 4px; font-size: 11px; }
+.fs-match-bar .meta { color: var(--text-muted); font-size: 11px; margin-left: 2px; }
+
+/* ── Page header ── */
 .fs-header {
-  display:flex; align-items:center; gap:14px;
-  padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 20px;
 }
 .fs-header h1 {
-  font-size:22px !important; font-weight:700 !important;
-  color:var(--text-primary) !important; margin:0 !important;
-  padding:0 !important; line-height:1.2 !important;
-}
-.fs-header .sub { font-size:12px; color:var(--text-muted); margin-top:3px; }
-
-/* Section title */
+  font-size: 24px !important;
+  font-weight: 800 !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1.15 !important;
+  letter-spacing: -0.03em !important;
+}
+.fs-header .sub {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+  font-weight: 400;
+}
+
+/* ── Section title ── */
 .fs-sec {
-  display:flex; align-items:center; gap:8px;
-  font-size:11px; text-transform:uppercase; letter-spacing:0.8px;
-  color:var(--text-muted); font-weight:600; margin:20px 0 12px;
-}
-.fs-sec::after { content:''; flex:1; height:1px; background:var(--border-light); }
-
-/* Stats summary bar */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-secondary);
+  font-weight: 700;
+  margin: 28px 0 14px;
+  padding-left: 10px;
+  border-left: 3px solid var(--blue);
+  line-height: 1.4;
+}
+
+/* ── Stats summary bar ── */
 .fs-stats-bar {
-  display:flex; align-items:stretch;
-  background:var(--bg-card); border:1px solid var(--border);
-  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:20px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  margin-bottom: 22px;
+  overflow: hidden;
 }
 .fs-stats-bar .si {
-  flex:1; text-align:center; padding:14px 16px;
-  border-right:1px solid var(--border-light);
-}
-.fs-stats-bar .si:last-child { border-right:none; }
-.fs-stats-bar .sn { font-size:24px; font-weight:700; color:var(--green); line-height:1; }
-.fs-stats-bar .sn.blue   { color:var(--blue); }
-.fs-stats-bar .sn.red    { color:var(--red); }
-.fs-stats-bar .sn.yellow { color:var(--yellow); }
+  text-align: center;
+  padding: 18px 16px;
+  border-right: 1px solid var(--border-light);
+  transition: background 0.15s;
+}
+.fs-stats-bar .si:last-child { border-right: none; }
+.fs-stats-bar .si:hover { background: var(--bg-hover); }
+.fs-stats-bar .sn {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--green);
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+.fs-stats-bar .sn.blue   { color: var(--blue); }
+.fs-stats-bar .sn.red    { color: var(--red); }
+.fs-stats-bar .sn.yellow { color: var(--yellow); }
 .fs-stats-bar .sl {
-  font-size:10px; color:var(--text-muted);
-  text-transform:uppercase; letter-spacing:0.5px; margin-top:4px;
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-top: 5px;
+  font-weight: 500;
 }
 
-/* Team analysis panels */
+/* ── Team analysis panels ── */
 .fs-panel-home {
-  background:var(--bg-card);
-  border:1px solid var(--border);
-  border-top:3px solid var(--blue);
-  border-radius:var(--radius-lg);
-  padding:16px 16px 4px;
-  margin-bottom:12px;
+  background: var(--bg-card);
+  border: 1px solid rgba(37,112,212,0.2);
+  border-radius: var(--radius-lg);
+  padding: 0;
+  margin-bottom: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-xs);
 }
 .fs-panel-away {
-  background:var(--bg-card);
-  border:1px solid var(--border);
-  border-top:3px solid var(--red);
-  border-radius:var(--radius-lg);
-  padding:16px 16px 4px;
-  margin-bottom:12px;
+  background: var(--bg-card);
+  border: 1px solid rgba(217,48,37,0.2);
+  border-radius: var(--radius-lg);
+  padding: 0;
+  margin-bottom: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-xs);
 }
 .fs-panel-title {
-  font-size:14px; font-weight:700; margin-bottom:12px;
-  display:flex; align-items:center; gap:8px;
-}
-.fs-panel-title.home { color:var(--blue); }
-.fs-panel-title.away { color:var(--red); }
-
-/* Probability bar */
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-bottom: 0;
+}
+.fs-panel-title.home {
+  background: linear-gradient(135deg, rgba(37,112,212,0.1), rgba(37,112,212,0.04));
+  color: var(--blue);
+  border-bottom: 1px solid rgba(37,112,212,0.12);
+}
+.fs-panel-title.away {
+  background: linear-gradient(135deg, rgba(217,48,37,0.1), rgba(217,48,37,0.04));
+  color: var(--red);
+  border-bottom: 1px solid rgba(217,48,37,0.12);
+}
+
+/* ── Probability bar ── */
 .fs-prob {
-  background:var(--bg-card); border:1px solid var(--border);
-  border-radius:var(--radius-md); padding:16px; margin-bottom:14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 18px 20px;
+  margin-bottom: 14px;
+  box-shadow: var(--shadow-xs);
 }
 .fs-prob .labels {
-  display:flex; justify-content:space-between;
-  font-size:12px; color:var(--text-secondary); margin-bottom:10px; font-weight:500;
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+  font-weight: 500;
 }
 .fs-prob .bar {
-  height:10px; border-radius:5px; background:var(--bg-hover); overflow:hidden; display:flex;
-}
-.fs-prob .seg { height:100%; transition:width 0.5s; }
-.fs-prob .seg.h { background:#2570D4; }
-.fs-prob .seg.d { background:#C0C6CE; }
-.fs-prob .seg.a { background:#D93025; }
+  height: 14px;
+  border-radius: 7px;
+  background: var(--border-light);
+  overflow: hidden;
+  display: flex;
+  gap: 2px;
+}
+.fs-prob .seg { height: 100%; transition: width 0.5s ease; }
+.fs-prob .seg.h { background: linear-gradient(90deg, #1a5ec0, var(--blue)); }
+.fs-prob .seg.d { background: #CBD5E1; }
+.fs-prob .seg.a { background: linear-gradient(90deg, var(--red), #b52219); }
 .fs-prob .vals {
-  display:flex; justify-content:space-between;
-  margin-top:10px; font-size:14px; font-weight:700;
-}
-.fs-prob .vh { color:#2570D4; }
-.fs-prob .vd { color:var(--text-secondary); }
-.fs-prob .va { color:#D93025; }
-
-/* Odds cards (1X2) */
-.fs-odds { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.fs-prob .vh { color: var(--blue); }
+.fs-prob .vd { color: var(--text-secondary); }
+.fs-prob .va { color: var(--red); }
+
+/* ── Odds cards (1X2) ── */
+.fs-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
 .fs-odds .oc {
-  background:var(--bg-card); border:1px solid var(--border);
-  border-radius:var(--radius-md); padding:16px 12px; text-align:center;
-  transition:border-color 0.15s;
-}
-.fs-odds .oc.best { border-color:var(--green); background:var(--green-dim); }
-.fs-odds .oc .on { font-size:11px; color:var(--text-muted); margin-bottom:6px; font-weight:500; }
-.fs-odds .oc .ov { font-size:26px; font-weight:700; color:var(--text-primary); line-height:1; }
-.fs-odds .oc.best .ov { color:var(--green); }
-.fs-odds .oc .op { font-size:11px; color:var(--text-secondary); margin-top:6px; }
-.fs-odds .oc .ove { font-size:11px; margin-top:3px; font-weight:600; }
-.fs-odds .oc .ove.pos { color:var(--green); }
-.fs-odds .oc .ove.neg { color:var(--red); }
-
-/* Kelly result cards */
-.fs-kelly-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 18px 14px;
+  text-align: center;
+  transition: box-shadow 0.15s, transform 0.1s;
+  box-shadow: var(--shadow-xs);
+}
+.fs-odds .oc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
+.fs-odds .oc.best {
+  border-color: rgba(13,158,110,0.4);
+  background: linear-gradient(180deg, rgba(13,158,110,0.06), #fff);
+  box-shadow: 0 4px 16px rgba(13,158,110,0.12);
+}
+.fs-odds .oc .on { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+.fs-odds .oc .ov { font-size: 30px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.04em; }
+.fs-odds .oc.best .ov { color: var(--green); }
+.fs-odds .oc .op { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
+.fs-odds .oc .ove { font-size: 12px; margin-top: 4px; font-weight: 700; }
+.fs-odds .oc .ove.pos { color: var(--green); }
+.fs-odds .oc .ove.neg { color: var(--red); }
+
+/* ── Kelly result cards ── */
+.fs-kelly-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
 .fs-kelly-card {
-  background:var(--bg-card); border:1px solid var(--border);
-  border-top:4px solid var(--border);
-  border-radius:var(--radius-lg); padding:20px 14px; text-align:center;
-}
-.fs-kelly-card.positive { border-top-color:var(--green); background:var(--green-dim); border-color:rgba(13,158,110,0.2); }
-.fs-kelly-card.yellow   { border-top-color:var(--yellow); background:var(--yellow-dim); border-color:rgba(176,125,14,0.2); }
-.fs-kelly-card.negative { border-top-color:var(--red); }
-.fs-kelly-card .kc-result { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:600; margin-bottom:4px; }
-.fs-kelly-card .kc-team { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.fs-kelly-card .kc-odd { font-size:32px; font-weight:700; color:var(--text-primary); line-height:1; margin-bottom:10px; }
-.fs-kelly-card.positive .kc-odd { color:var(--green); }
-.fs-kelly-card .kc-sep { width:32px; height:2px; background:var(--border); margin:0 auto 10px; border-radius:2px; }
-.fs-kelly-card .kc-pct { font-size:20px; font-weight:700; line-height:1; }
-.fs-kelly-card.positive .kc-pct { color:var(--green); }
-.fs-kelly-card.yellow   .kc-pct { color:var(--yellow); }
-.fs-kelly-card.negative .kc-pct { color:var(--red); }
-.fs-kelly-card .kc-label { font-size:10px; color:var(--text-muted); margin-top:3px; }
-.fs-kelly-card .kc-meta { margin-top:10px; padding-top:10px; border-top:1px solid var(--border-light); font-size:11px; color:var(--text-secondary); }
-.fs-kelly-card .kc-meta .pos { color:var(--green); font-weight:700; }
-.fs-kelly-card .kc-meta .neg { color:var(--red);   font-weight:700; }
-
-/* Recommendation banner */
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 22px 16px;
+  text-align: center;
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow 0.15s, transform 0.1s;
+}
+.fs-kelly-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
+.fs-kelly-card.positive {
+  border-color: rgba(13,158,110,0.3);
+  background: linear-gradient(180deg, rgba(13,158,110,0.07) 0%, #fff 60%);
+  box-shadow: 0 4px 20px rgba(13,158,110,0.12);
+}
+.fs-kelly-card.yellow {
+  border-color: rgba(176,125,14,0.3);
+  background: linear-gradient(180deg, rgba(176,125,14,0.07) 0%, #fff 60%);
+}
+.fs-kelly-card.negative {
+  border-color: rgba(217,48,37,0.2);
+  background: linear-gradient(180deg, rgba(217,48,37,0.04) 0%, #fff 60%);
+}
+.fs-kelly-card .kc-result { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
+.fs-kelly-card .kc-team { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
+.fs-kelly-card .kc-odd { font-size: 36px; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 12px; letter-spacing: -0.04em; }
+.fs-kelly-card.positive .kc-odd { color: var(--green); }
+.fs-kelly-card .kc-sep { width: 36px; height: 2px; background: var(--border); margin: 0 auto 12px; border-radius: 2px; }
+.fs-kelly-card .kc-pct { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
+.fs-kelly-card.positive .kc-pct { color: var(--green); }
+.fs-kelly-card.yellow   .kc-pct { color: var(--yellow); }
+.fs-kelly-card.negative .kc-pct { color: var(--text-muted); }
+.fs-kelly-card .kc-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
+.fs-kelly-card .kc-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 11px; color: var(--text-secondary); }
+.fs-kelly-card .kc-meta .pos { color: var(--green); font-weight: 700; }
+.fs-kelly-card .kc-meta .neg { color: var(--red); font-weight: 700; }
+
+/* ── Recommendation / no-bet banners ── */
 .fs-recommend {
-  display:flex; align-items:center; gap:14px;
-  background:var(--green-dim); border:1px solid rgba(13,158,110,0.25);
-  border-radius:var(--radius-md); padding:14px 18px; margin-top:4px;
-}
-.fs-recommend .rec-icon { font-size:24px; flex-shrink:0; }
-.fs-recommend .rec-title { font-size:13px; font-weight:700; color:var(--green); }
-.fs-recommend .rec-detail { font-size:12px; color:var(--text-secondary); margin-top:2px; }
-.fs-no-bet {
-  display:flex; align-items:center; gap:14px;
-  background:var(--red-dim); border:1px solid rgba(217,48,37,0.2);
-  border-radius:var(--radius-md); padding:14px 18px; margin-top:4px;
-}
-.fs-no-bet .nb-icon { font-size:22px; flex-shrink:0; }
-.fs-no-bet .nb-text { font-size:13px; font-weight:600; color:var(--red); }
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: linear-gradient(135deg, rgba(13,158,110,0.08), rgba(13,158,110,0.04));
+  border: 1px solid rgba(13,158,110,0.3);
+  border-left: 4px solid var(--green);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  margin-top: 4px;
+}
+.fs-recommend .rec-icon { font-size: 22px; flex-shrink: 0; }
+.fs-recommend .rec-title { font-size: 13px; font-weight: 700; color: var(--green); }
+.fs-recommend .rec-detail { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
 
-/* AI panel */
-.fs-ai {
-  background:linear-gradient(135deg,rgba(37,112,212,0.05),rgba(217,48,37,0.05));
-  border:1px solid rgba(37,112,212,0.2);
-  border-radius:var(--radius-md); padding:16px;
-}
-.fs-ai .ai-hdr { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
-.fs-ai .ai-ico {
-  width:32px; height:32px; background:var(--blue-dim); border:1px solid var(--blue);
-  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px;
-}
-.fs-ai .ai-title { font-size:14px; font-weight:700; color:var(--blue); }
-.fs-ai .ai-sub { font-size:10px; color:var(--text-muted); }
-
-/* Empty state */
+.fs-no-bet {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: rgba(217,48,37,0.05);
+  border: 1px solid rgba(217,48,37,0.2);
+  border-left: 4px solid var(--red);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  margin-top: 4px;
+}
+.fs-no-bet .nb-icon { font-size: 20px; flex-shrink: 0; }
+.fs-no-bet .nb-text { font-size: 13px; font-weight: 600; color: var(--red); }
+
+/* ── Empty state ── */
 .fs-empty {
-  text-align:center; padding:40px 20px;
-  color:var(--text-muted); font-size:13px;
+  text-align: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 13px;
 }
-.fs-empty .em-icon { font-size:32px; margin-bottom:8px; }
+.fs-empty .em-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.7; }
 
-/* ─── Match selection cards ─── */
+/* ── Match selection cards ── */
 .fs-mc {
-  background:#FFFFFF;
-  border:1px solid #DDE3EA;
-  border-radius:var(--radius-lg);
-  overflow:hidden;
-  transition:box-shadow 0.15s, border-color 0.15s;
-  margin-bottom:4px;
-  box-shadow:0 1px 4px rgba(0,0,0,0.05);
+  background: #FFFFFF;
+  border: 1px solid #DDE3EA;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
+  margin-bottom: 4px;
+  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
 }
 .fs-mc:hover {
-  border-color:#B8C6DC;
-  box-shadow:0 4px 14px rgba(37,112,212,0.1);
+  border-color: #A8BFDE;
+  box-shadow: 0 6px 20px rgba(37,112,212,0.12);
+  transform: translateY(-2px);
 }
 .fs-mc.selected {
-  border-color:rgba(13,158,110,0.45);
-  box-shadow:0 0 0 2px rgba(13,158,110,0.18), 0 4px 14px rgba(13,158,110,0.1);
+  border-color: rgba(13,158,110,0.5);
+  box-shadow: 0 0 0 3px rgba(13,158,110,0.12), 0 6px 20px rgba(13,158,110,0.1);
+  transform: none;
 }
 
-/* top strip: liga + time */
+/* top strip */
 .fs-mc .mc-top {
-  display:flex; align-items:center; justify-content:space-between;
-  padding:7px 12px 6px;
-  background:#F4F7FB;
-  border-bottom:1px solid #E8EEF5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 12px 6px;
+  background: #F4F7FB;
+  border-bottom: 1px solid #E8EEF5;
 }
 .fs-mc.selected .mc-top {
-  background:#EBF7F2;
-  border-bottom-color:rgba(13,158,110,0.2);
-}
-.fs-mc .mc-league {
-  font-size:10px; font-weight:700; color:#5A6270;
-  text-transform:uppercase; letter-spacing:0.5px;
-}
-.fs-mc .mc-time {
-  font-size:11px; font-weight:600; color:#7C4DCC;
-  background:#F0EBF9; border-radius:4px; padding:1px 7px;
+  background: linear-gradient(135deg, #EBF7F2, #F0FBF6);
+  border-bottom-color: rgba(13,158,110,0.18);
 }
+.fs-mc .mc-league { font-size: 10px; font-weight: 700; color: #5A6270; text-transform: uppercase; letter-spacing: 0.5px; }
+.fs-mc .mc-time   { font-size: 11px; font-weight: 600; color: var(--purple); background: rgba(124,77,204,0.08); border-radius: 5px; padding: 2px 8px; }
 
 /* teams row */
-.fs-mc .mc-teams {
-  display:flex; align-items:stretch;
-  min-height:72px;
-}
-.fs-mc .mc-team {
-  flex:1; display:flex; flex-direction:column;
-  align-items:center; justify-content:center;
-  padding:12px 8px;
-}
-.fs-mc .mc-team.home { background:#EEF4FD; }
-.fs-mc .mc-team.away { background:#FDF0EF; }
-.fs-mc .mc-name {
-  font-size:13px; font-weight:700; text-align:center; line-height:1.25;
-}
-.fs-mc .mc-team.home .mc-name { color:#1B5EC0; }
-.fs-mc .mc-team.away .mc-name { color:#B52A1E; }
-.fs-mc .mc-role {
-  font-size:9px; text-transform:uppercase; letter-spacing:0.5px;
-  margin-top:4px; font-weight:600;
-}
-.fs-mc .mc-team.home .mc-role { color:#6A9FDE; }
-.fs-mc .mc-team.away .mc-role { color:#DC7068; }
+.fs-mc .mc-teams  { display: flex; align-items: stretch; min-height: 72px; }
+.fs-mc .mc-team   { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; }
+.fs-mc .mc-team.home { background: linear-gradient(135deg, #EEF4FD, #F5F9FF); }
+.fs-mc .mc-team.away { background: linear-gradient(135deg, #FDF0EF, #FFF5F5); }
+.fs-mc .mc-name   { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; }
+.fs-mc .mc-team.home .mc-name { color: #1B5EC0; }
+.fs-mc .mc-team.away .mc-name { color: #B52A1E; }
+.fs-mc .mc-role   { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; font-weight: 600; }
+.fs-mc .mc-team.home .mc-role { color: #6A9FDE; }
+.fs-mc .mc-team.away .mc-role { color: #DC7068; }
 
 /* VS badge */
-.fs-mc .mc-vs-wrap {
-  display:flex; align-items:center; justify-content:center;
-  padding:0 10px; background:#FFFFFF; flex-shrink:0;
-}
-.fs-mc .mc-vs {
-  font-size:10px; font-weight:800; color:#C0C6CE;
-  letter-spacing:1px;
-  background:#F4F7FB; border:1px solid #DDE3EA;
-  border-radius:5px; padding:3px 7px;
-}
+.fs-mc .mc-vs-wrap { display: flex; align-items: center; justify-content: center; padding: 0 10px; background: #FFFFFF; flex-shrink: 0; }
+.fs-mc .mc-vs { font-size: 9px; font-weight: 800; color: #B0BAC6; letter-spacing: 1px; background: #F4F7FB; border: 1px solid #DDE3EA; border-radius: 5px; padding: 3px 7px; }
 
 /* odds strip */
 .fs-mc .mc-odds {
-  display:flex; justify-content:space-around; align-items:center;
-  padding:6px 12px;
-  background:#FAFBFD;
-  border-top:1px solid #E8EEF5;
-}
-.fs-mc .mc-odd {
-  font-size:11px; font-weight:700;
-  border-radius:4px; padding:2px 8px;
-}
-.fs-mc .mc-odd.home { color:#1B5EC0; background:#EEF4FD; }
-.fs-mc .mc-odd.draw { color:#5A6270; background:#F4F7FB; }
-.fs-mc .mc-odd.away { color:#B52A1E; background:#FDF0EF; }
-
-/* selected tint override for teams */
-.fs-mc.selected .mc-team.home { background:#D8EFDA; }
-.fs-mc.selected .mc-team.home .mc-name { color:#0A6B42; }
-.fs-mc.selected .mc-team.home .mc-role { color:#4CAF7D; }
-.fs-mc.selected .mc-team.away { background:#D8EFDA; }
-.fs-mc.selected .mc-team.away .mc-name { color:#0A6B42; }
-.fs-mc.selected .mc-team.away .mc-role { color:#4CAF7D; }
-.fs-mc.selected .mc-vs { background:#EBF7F2; border-color:rgba(13,158,110,0.3); color:#4CAF7D; }
-.fs-mc.selected .mc-odds { background:#EBF7F2; border-top-color:rgba(13,158,110,0.2); }
-.fs-mc.selected .mc-odd.home { background:#C8EBCF; color:#0A6B42; }
-.fs-mc.selected .mc-odd.draw { background:#D8F0DD; color:#3A7A52; }
-.fs-mc.selected .mc-odd.away { background:#C8EBCF; color:#0A6B42; }
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 6px 12px;
+  background: #FAFBFD;
+  border-top: 1px solid #E8EEF5;
+}
+.fs-mc .mc-odd { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 9px; }
+.fs-mc .mc-odd.home { color: #1B5EC0; background: #EEF4FD; }
+.fs-mc .mc-odd.draw { color: #5A6270; background: #F4F7FB; }
+.fs-mc .mc-odd.away { color: #B52A1E; background: #FDF0EF; }
+
+/* selected tint */
+.fs-mc.selected .mc-team.home { background: linear-gradient(135deg, #D8EFDA, #E8F7EA); }
+.fs-mc.selected .mc-team.home .mc-name { color: #0A6B42; }
+.fs-mc.selected .mc-team.home .mc-role { color: #4CAF7D; }
+.fs-mc.selected .mc-team.away { background: linear-gradient(135deg, #D8EFDA, #E8F7EA); }
+.fs-mc.selected .mc-team.away .mc-name { color: #0A6B42; }
+.fs-mc.selected .mc-team.away .mc-role { color: #4CAF7D; }
+.fs-mc.selected .mc-vs { background: #EBF7F2; border-color: rgba(13,158,110,0.3); color: #4CAF7D; }
+.fs-mc.selected .mc-odds { background: #EBF7F2; border-top-color: rgba(13,158,110,0.15); }
+.fs-mc.selected .mc-odd.home { background: rgba(13,158,110,0.12); color: #0A6B42; }
+.fs-mc.selected .mc-odd.draw { background: rgba(13,158,110,0.08); color: #3A7A52; }
+.fs-mc.selected .mc-odd.away { background: rgba(13,158,110,0.12); color: #0A6B42; }
 
 /* date group label */
 .fs-date-label {
-  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
-  color:var(--text-muted); padding:14px 0 8px; border-bottom:1px solid var(--border-light);
-  margin-bottom:10px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  padding: 16px 0 8px;
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 12px;
 }
 
-/* Sidebar no-match state */
-.fs-sb-welcome {
-  text-align:center; padding:20px 8px;
-  color:var(--text-muted); font-size:12px;
-}
-.fs-sb-welcome .sw-icon { font-size:28px; margin-bottom:8px; }
-.fs-sb-welcome .sw-text { line-height:1.5; }
-
-/* ─── Page navigation links ─── */
-[data-testid="stPageLink"] {
-  margin:2px 0 !important;
-}
-[data-testid="stPageLink"] a {
-  border-radius:var(--radius-sm) !important;
-  padding:6px 10px !important;
-  font-size:12px !important;
-  color:var(--text-secondary) !important;
-  display:flex !important; align-items:center !important; gap:6px !important;
-  transition:all 0.15s !important;
-  text-decoration:none !important;
-  font-weight:500 !important;
-  white-space:nowrap !important;
-}
-[data-testid="stPageLink"] a:hover {
-  background:var(--bg-hover) !important;
-  color:var(--text-primary) !important;
-}
-[data-testid="stPageLink"] a[aria-current="page"] {
-  background:var(--bg-active) !important;
-  color:var(--blue) !important;
-  font-weight:600 !important;
-}
-
-/* ─── Topbar ─── */
-.fs-topbar {
-  display:flex; align-items:center; gap:10px;
-  padding:8px 0 12px; border-bottom:1px solid var(--border); margin-bottom:16px;
-}
-.fs-topbar-logo {
-  display:flex; align-items:center; gap:8px; flex-shrink:0;
-  font-size:15px; font-weight:700; color:var(--text-primary);
-}
-.fs-topbar-logo .tl-icon {
-  width:30px; height:30px; background:var(--green); border-radius:8px;
-  display:flex; align-items:center; justify-content:center; font-size:15px;
-}
-
-/* ─── Match context bar (shown when match is selected) ─── */
-.fs-match-bar {
-  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
-  background:var(--bg-active); border:1px solid rgba(37,112,212,0.2);
-  border-radius:var(--radius-md); padding:8px 14px; margin-bottom:14px;
-  font-size:13px;
-}
-.fs-match-bar .home { color:var(--blue); font-weight:700; }
-.fs-match-bar .away { color:var(--red);  font-weight:700; }
-.fs-match-bar .vs   { color:var(--text-muted); padding:0 4px; font-size:11px; }
-.fs-match-bar .meta { color:var(--text-muted); font-size:11px; margin-left:4px; }
-
-/* ─── Result pills (last X results) ─── */
-.fs-result-pills {
-  display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;
-}
+/* ── Compact comparison cell ── */
+.fs-compare-cell {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 14px 12px;
+  text-align: center;
+  margin-bottom: 10px;
+  box-shadow: var(--shadow-xs);
+}
+.fs-compare-cell .cc-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); }
+.fs-compare-cell .cc-lbl { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
+.fs-compare-cell .cc-delta { font-size: 12px; font-weight: 700; margin-top: 8px; }
+.fs-compare-cell .cc-delta.pos { color: var(--green); }
+.fs-compare-cell .cc-delta.neg { color: var(--red); }
+.fs-compare-cell .cc-delta.neu { color: var(--text-muted); }
+
+/* ── Result pills ── */
+.fs-result-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding: 4px 0; }
 .rp {
-  min-width:28px; height:28px; border-radius:6px;
-  display:flex; align-items:center; justify-content:center;
-  font-size:12px; font-weight:700; color:#fff;
-  padding:0 5px;
-}
-
-/* ─── Category stats header ─── */
+  min-width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  padding: 0 5px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
+/* ── Category stats header ── */
 .fs-cat-label {
-  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
-  color:var(--text-muted); margin-bottom:6px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
 }
 
-/* ─── Compact comparison cell ─── */
-.fs-compare-cell {
-  background:var(--bg-card); border:1px solid var(--border);
-  border-radius:var(--radius-md); padding:14px 12px;
-  text-align:center; margin-bottom:10px;
-}
-.fs-compare-cell .cc-val { font-size:24px; font-weight:700; line-height:1; }
-.fs-compare-cell .cc-lbl { font-size:10px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.4px; }
-.fs-compare-cell .cc-delta { font-size:12px; font-weight:600; margin-top:6px; }
-.fs-compare-cell .cc-delta.pos { color:var(--green); }
-.fs-compare-cell .cc-delta.neg { color:var(--red); }
-.fs-compare-cell .cc-delta.neu { color:var(--text-muted); }
-
-/* ─── Date filter bar ─── */
-.fs-date-filter {
-  display:flex; align-items:center; justify-content:flex-end; gap:10px;
-  margin-bottom:8px;
-}
-.fs-date-filter label {
-  font-size:11px; font-weight:600; text-transform:uppercase;
-  letter-spacing:0.5px; color:var(--text-muted);
+/* ── AI panel ── */
+.fs-ai {
+  background: linear-gradient(135deg, rgba(37,112,212,0.05), rgba(124,77,204,0.04));
+  border: 1px solid rgba(37,112,212,0.2);
+  border-radius: var(--radius-md);
+  padding: 16px;
 }
+.fs-ai .ai-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
+.fs-ai .ai-ico {
+  width: 32px; height: 32px;
+  background: var(--blue-dim);
+  border: 1px solid rgba(37,112,212,0.3);
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px;
+}
+.fs-ai .ai-title { font-size: 14px; font-weight: 700; color: var(--blue); }
+.fs-ai .ai-sub { font-size: 10px; color: var(--text-muted); }
+
+/* ── Sidebar components (kept for compatibility) ── */
+.fs-sb-header { display: flex; align-items: center; gap: 10px; padding: 16px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
+.fs-sb-logo { width: 34px; height: 34px; background: linear-gradient(135deg, var(--blue), var(--purple)); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
+.fs-sb-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
+.fs-sb-sub { font-size: 10px; color: var(--text-muted); }
+.fs-sb-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); font-weight: 600; margin: 14px 0 6px; }
+
+.fs-match-mini { background: var(--bg-active); border: 1px solid rgba(37,112,212,0.25); border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0; }
+.fs-match-mini .home { color: var(--blue); font-weight: 700; font-size: 12px; }
+.fs-match-mini .away { color: var(--red); font-weight: 700; font-size: 12px; }
+.fs-match-mini .vs   { color: var(--text-muted); font-size: 11px; padding: 0 5px; }
+.fs-match-mini .meta { font-size: 10px; color: var(--text-muted); margin-top: 5px; }
+
+.fs-sb-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+.fs-sb-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; font-size: 11px; color: var(--text-secondary); }
+.fs-sb-pill span { font-weight: 700; color: var(--text-primary); }
+
+.fs-sb-welcome { text-align: center; padding: 20px 8px; color: var(--text-muted); font-size: 12px; }
+.fs-sb-welcome .sw-icon { font-size: 28px; margin-bottom: 8px; }
+.fs-sb-welcome .sw-text { line-height: 1.5; }
+
+/* ── Date filter bar ── */
+.fs-date-filter { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 8px; }
+.fs-date-filter label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
+
+/* ── Divider refinement ── */
+hr { border-color: var(--border-light) !important; }
 </style>"""
 
 

src/src/utils.py

@@ -1,6 +1,43 @@
 import pandas as pd
 
 
+def no_match_page() -> None:
+    """Estado vacío con CTA cuando no hay partido seleccionado. Llama st.stop()."""
+    import streamlit as st
+    st.markdown(
+        """
+        <div style="
+          display:flex;flex-direction:column;align-items:center;
+          justify-content:center;min-height:42vh;
+          text-align:center;padding:60px 20px;
+        ">
+          <div style="
+            width:80px;height:80px;border-radius:20px;
+            background:linear-gradient(135deg,rgba(37,112,212,0.12),rgba(124,77,204,0.10));
+            border:1px solid rgba(37,112,212,0.2);
+            display:flex;align-items:center;justify-content:center;
+            font-size:36px;margin-bottom:22px;
+          ">⚽</div>
+          <h2 style="
+            font-size:22px;font-weight:800;color:#0F172A;
+            margin:0 0 10px;letter-spacing:-0.03em;
+          ">Primero selecciona un partido</h2>
+          <p style="
+            font-size:14px;color:#94A3B8;max-width:340px;
+            margin:0 0 32px;line-height:1.6;
+          ">Ve a la página de <strong style="color:#475569">Inicio</strong>
+          para elegir un partido y comenzar el análisis.</p>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+    _, _c, _ = st.columns([3, 2, 3])
+    with _c:
+        if st.button("🏠 Ir a Inicio", use_container_width=True, type="primary"):
+            st.switch_page("pages/inicio.py")
+    st.stop()
+
+
 def sec(icon: str, title: str) -> None:
     import streamlit as st
     st.markdown(f'<div class="fs-sec"><span>{icon}</span> {title}</div>', unsafe_allow_html=True)

src/streamlit_app.py

@@ -73,12 +73,13 @@ with _col_logo:
     )
 
 with _col_nav:
+    _has_sel = bool(st.session_state.get("_selected_match"))
     _nc = st.columns(5)
     with _nc[0]: st.page_link(_p_inicio, label="Inicio",         icon="🏠")
-    with _nc[1]: st.page_link(_p_stats,  label="Estadísticas",   icon="📊")
-    with _nc[2]: st.page_link(_p_comp,   label="Comparación",    icon="⚔️")
-    with _nc[3]: st.page_link(_p_rf,     label="Predicción RF",  icon="🤖")
-    with _nc[4]: st.page_link(_p_kelly,  label="Cuotas & Kelly", icon="💰")
+    with _nc[1]: st.page_link(_p_stats,  label="Estadísticas",   icon="📊" if _has_sel else "🔒")
+    with _nc[2]: st.page_link(_p_comp,   label="Comparación",    icon="⚔️" if _has_sel else "🔒")
+    with _nc[3]: st.page_link(_p_rf,     label="Predicción RF",  icon="🤖" if _has_sel else "🔒")
+    with _nc[4]: st.page_link(_p_kelly,  label="Cuotas & Kelly", icon="💰" if _has_sel else "🔒")
 
 st.markdown("<hr style='margin:4px 0 16px;border:none;border-top:1px solid var(--border)'>", unsafe_allow_html=True)