Upload 2 files

app.py

@@ -22,6 +22,7 @@ load_dotenv()
 st.set_page_config(page_title="Proyelec Sourcing Pro", layout="wide", page_icon="💎", initial_sidebar_state="expanded")
 
 # --- CACHE DE ESTILOS PARA EVITAR PARPADEO ---
+@st.cache_data
 def get_css():
     try:
         with open('style.css', 'r', encoding='utf-8') as f:
@@ -237,8 +238,14 @@ if not st.session_state.logged_in:
 # --- NAVBAR RENDER ---
 st.markdown(f"""
     <div class="top-navbar">
-        <div style="font-size: 20px; font-weight: 800; color: #58A6FF; letter-spacing: -0.5px;">💎 PROYELEC <span style="color:white; font-weight:300;">SOURCING PRO</span></div>
-        <div style="font-size: 13px; color: #8B949E;">Usuario: <b style="color:#F0F6FC;">{st.session_state.username}</b> &nbsp;<span style="background:#1E2A3A;color:#58A6FF;padding:2px 8px;border-radius:10px;font-size:11px;">{st.session_state.role}</span> &nbsp;| {datetime.now().strftime("%d/%m/%Y")}</div>
+        <div class="top-navbar-logo">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+            PROYELEC &nbsp;<span style="color:var(--text-muted); font-weight:300;">Sourcing Pro</span>
+        </div>
+        <div class="top-navbar-meta">
+            <span style="color:var(--text-muted);">{datetime.now().strftime("%d %b %Y")}</span>
+            <span class="user-badge">{st.session_state.username} · {st.session_state.role}</span>
+        </div>
     </div>
     <div class="main-content-spacer"></div>
 """, unsafe_allow_html=True)
@@ -405,11 +412,11 @@ with st.sidebar:
     try:
         _r = requests.get(f"{API_URL_BASE.replace('/api/v1','')}/", timeout=2, headers=API_HEADERS)
         if _r.status_code == 200:
-            st.markdown("<div style='background:#1a3a1a;border:1px solid #238636;border-radius:8px;padding:8px 12px;font-size:12px;color:#3fb950;margin-bottom:10px;'>🟢 Motor IA <b>Activo</b></div>", unsafe_allow_html=True)
+            st.markdown("<div class='ia-status-on' style='margin-bottom:10px;'>Motor IA activo</div>", unsafe_allow_html=True)
         else:
-            st.markdown("<div style='background:#3a1a1a;border:1px solid #f85149;border-radius:8px;padding:8px 12px;font-size:12px;color:#f85149;margin-bottom:10px;'>🔴 Motor IA <b>Sin respuesta</b></div>", unsafe_allow_html=True)
+            st.markdown("<div class='ia-status-off' style='margin-bottom:10px;'>Motor IA sin respuesta</div>", unsafe_allow_html=True)
     except Exception:
-        st.markdown("<div style='background:#3a1a1a;border:1px solid #f85149;border-radius:8px;padding:8px 12px;font-size:12px;color:#f85149;margin-bottom:10px;'>🔴 Motor IA <b>Apagado</b> — Ejecuta run.bat</div>", unsafe_allow_html=True)
+        st.markdown("<div class='ia-status-off' style='margin-bottom:10px;'>Motor IA apagado — ejecuta run.bat</div>", unsafe_allow_html=True)
 
     if st.session_state.role == "Gerencia":
         with st.expander("⚙️ Configuración y Llaves", expanded=False):
@@ -1128,81 +1135,44 @@ with tab_main:
         total_reng = int(df_hist_kpi['Renglones'].sum()) if not df_hist_kpi.empty and 'Renglones' in df_hist_kpi.columns else 0
         ultima_act = df_hist_kpi['Fecha Proceso'].iloc[0][:10] if not df_hist_kpi.empty else "Sin actividad"
 
-        st.markdown("<br><br>", unsafe_allow_html=True)
+        st.markdown("<br>", unsafe_allow_html=True)
         st.markdown(f"""
-        <div style='text-align:center; margin-bottom: 12px;'>
-            <span style='font-size:12px; color:#58A6FF; font-weight:700; letter-spacing:3px; text-transform:uppercase;'>MOTOR DE INTELIGENCIA DE SOURCING</span>
+        <div style='text-align:center; margin-bottom: 8px;'>
+            <span style='font-size:13px; color:#58A6FF; font-weight:600; letter-spacing:2px; text-transform:uppercase;'>Centro de Mando</span>
         </div>
-        <h1 style='text-align:center; margin:0 0 8px 0; font-weight:800; font-size: 38px;' class='premium-gradient-text'>PROYELEC SOURCING PRO</h1>
-        <p style='text-align:center; color:#8B949E; margin-bottom:32px; font-size:15px; font-family:"Inter",sans-serif;'>
-            Bienvenido, <b style="color:#F0F6FC;">{st.session_state.username}</b> &nbsp;|&nbsp; Gestión automatizada de procura para el Canal de Panamá
-        </p>
+        <h2 style='text-align:center; color:#F0F6FC; margin:0 0 6px 0; font-weight:800;'>Bienvenido, {st.session_state.username}</h2>
+        <p style='text-align:center; color:#8B949E; margin-bottom:28px; font-size:14px;'>Sistema de Inteligencia de Sourcing — Proyelec</p>
         """, unsafe_allow_html=True)
 
         k1, k2, k3, k4 = st.columns(4)
-        
-        # Métrica 1
-        with k1:
-            st.markdown(f"""
-            <div style="background:#161B22; border:1px solid #1E2A3A; padding:18px; border-radius:12px;">
-                <div style="font-size:11px; color:#8B949E; text-transform:uppercase; letter-spacing:0.05em;">Licitaciones Procesadas</div>
-                <div style="font-size:28px; color:#E6EDF3; font-weight:800; margin-top:4px;">{total_lic}</div>
-            </div>
-            """, unsafe_allow_html=True)
-            
-        # Métrica 2
-        with k2:
-            st.markdown(f"""
-            <div style="background:#161B22; border:1px solid #1E2A3A; padding:18px; border-radius:12px;">
-                <div style="font-size:11px; color:#8B949E; text-transform:uppercase; letter-spacing:0.05em;">Renglones Analizados</div>
-                <div style="font-size:28px; color:#E6EDF3; font-weight:800; margin-top:4px;">{total_reng}</div>
-            </div>
-            """, unsafe_allow_html=True)
-            
-        # Métrica 3
-        with k3:
-            st.markdown(f"""
-            <div style="background:#161B22; border:1px solid #1E2A3A; padding:18px; border-radius:12px;">
-                <div style="font-size:11px; color:#8B949E; text-transform:uppercase; letter-spacing:0.05em;">Última Actividad</div>
-                <div style="font-size:20px; color:#E6EDF3; font-weight:800; margin-top:11px;">{ultima_act}</div>
-            </div>
-            """, unsafe_allow_html=True)
-            
-        # Métrica 4 (Glow Animation)
-        with k4:
-            st.markdown(f"""
-            <div style="background:#161B22; border:1px solid #1E2A3A; padding:16px 18px; border-radius:12px; height:100%; display:flex; flex-direction:column; justify-content:center;">
-                <div style="font-size:11px; color:#8B949E; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;">Motor de IA Central</div>
-                <div class="active-pulse-container">
-                    <span class="pulse-dot"></span>
-                    <b style="font-size:12px; color:#3FB950;">Gemini 2.5 Flash Activo</b>
-                </div>
-            </div>
-            """, unsafe_allow_html=True)
+        k1.metric("Licitaciones Procesadas", total_lic)
+        k2.metric("Renglones Analizados", total_reng)
+        k3.metric("Ultima Actividad", ultima_act)
+        k4.metric("Motor IA", "Gemini 2.5 Flash")
 
-        st.markdown("<br><br>", unsafe_allow_html=True)
-        st.markdown("<p style='text-align:center;color:#8B949E;font-size:13.5px;margin-bottom:28px;'>Para comenzar, sube el pliego en el panel izquierdo y presiona <b style='color:#58A6FF'>🚀 Procesar con IA</b></p>", unsafe_allow_html=True)
+        st.markdown("<br>", unsafe_allow_html=True)
+        st.markdown("<p style='text-align:center;color:#484f58;font-size:13px;margin-bottom:20px;'>Para comenzar, sube el pliego en el panel izquierdo y presiona <b style=\'color:#58A6FF\'>Procesar con IA</b></p>", unsafe_allow_html=True)
 
         c1, c2, c3 = st.columns(3)
         with c1:
             st.markdown("""
-            <div class='glass-card'>
+            <div class='step-card'>
                 <div class='step-icon'>📄</div>
-                <h4 style="color:#58A6FF; font-size:16px; margin: 0 0 10px 0; font-weight:700;">1. Carga el Pliego</h4>
-                <p style='color:#8B949E; font-size:13px; line-height:1.5; margin:0;'>Sube el PDF oficial de la licitación. Soporta pliego principal y anexos técnicos simultáneamente.</p>
+                <h4>1. Carga el Pliego</h4>
+                <p style='color:#8B949E; font-size:14px;'>Sube el PDF oficial de la licitacion. Soporta pliego principal y anexos tecnicos simultaneamente.</p>
             </div>
             """, unsafe_allow_html=True)
         with c2:
             st.markdown("""
-            <div class='glass-card'>
+            <div class='step-card'>
                 <div class='step-icon'>🧠</div>
-                <h4 style="color:#3FB950; font-size:16px; margin: 0 0 10px 0; font-weight:700;">2. Análisis con IA</h4>
-                <p style='color:#8B949E; font-size:13px; line-height:1.5; margin:0;'>Gemini extrae renglones, códigos, cantidades y cruza automáticamente con el histórico de precios.</p>
+                <h4>2. Analisis con IA</h4>
+                <p style='color:#8B949E; font-size:14px;'>Gemini extrae renglones, codigos, cantidades y cruza automaticamente con el historico de precios.</p>
             </div>
             """, unsafe_allow_html=True)
         with c3:
             st.markdown("""
-            <div class='glass-card'>
+            <div class='step-card'>
                 <div class='step-icon'>🎯</div>
                 <h4>3. Sourcing Global</h4>
                 <p style='color:#8B949E; font-size:14px;'>Busca los mejores proveedores, genera RFQs y organiza cotizaciones en tu bandeja inteligente.</p>

style.css

@@ -1,319 +1,734 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-/* ===== BASE ===== */
-html, body, [data-testid="stAppViewContainer"] {
-    background-color: #0A0E1A;
-    color: #E0E6F0;
-    font-family: 'Inter', sans-serif;
+/* =====================================================
+   PROCURA AI — Vercel-Inspired Design System
+   Paleta: Negro absoluto + Blanco/gris ultrafino
+   ===================================================== */
+
+/* ===== DESIGN TOKENS ===== */
+:root {
+    --bg:           #000000;
+    --bg-raised:    #0a0a0a;
+    --bg-surface:   #111111;
+    --bg-hover:     #1a1a1a;
+    --border:       rgba(255, 255, 255, 0.08);
+    --border-hover: rgba(255, 255, 255, 0.18);
+    --border-focus: rgba(255, 255, 255, 0.35);
+
+    --text-primary:   #ededed;
+    --text-secondary: #888888;
+    --text-muted:     #555555;
+
+    --accent:         #ffffff;
+    --accent-blue:    #0070f3;
+    --accent-green:   #50e3c2;
+    --accent-amber:   #f5a623;
+    --accent-red:     #ff4444;
+    --accent-orange:  #f97316;
+
+    --blue-dim:   rgba(0, 112, 243, 0.12);
+    --green-dim:  rgba(80, 227, 194, 0.12);
+    --amber-dim:  rgba(245, 166, 35, 0.12);
+    --red-dim:    rgba(255, 68, 68, 0.12);
+
+    --radius-sm:  6px;
+    --radius-md:  8px;
+    --radius-lg:  12px;
+    --radius-xl:  16px;
+    --radius-pill: 999px;
+
+    --shadow-sm:  0 1px 2px rgba(0,0,0,0.8);
+    --shadow-md:  0 4px 12px rgba(0,0,0,0.6);
+    --shadow-lg:  0 8px 30px rgba(0,0,0,0.5);
+    --shadow-glow-blue: 0 0 20px rgba(0, 112, 243, 0.25);
+
+    --transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+/* ===== RESET & BASE ===== */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body,
+[data-testid="stAppViewContainer"],
+[data-testid="stApp"] {
+    background-color: var(--bg) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+[data-testid="stAppViewBlockContainer"] {
+    padding-top: 12px;
+}
+
+/* ===== SIDEBAR ===== */
 [data-testid="stSidebar"] {
-    background: linear-gradient(180deg, #0D1117 0%, #0A0E1A 100%);
-    border-right: 1px solid #1E2A3A;
+    background-color: var(--bg-raised) !important;
+    border-right: 1px solid var(--border) !important;
+}
+
+[data-testid="stSidebar"] > div {
+    background-color: transparent !important;
+}
+
+/* ===== HEADER / TOOLBAR ===== */
+[data-testid="stHeader"] {
+    background-color: transparent !important;
+    border-bottom: none !important;
+}
+
+/* ===== STREAMLIT OVERRIDES ===== */
+[data-testid="stMarkdown"] p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 14px;
+}
+
+.stCaption { color: var(--text-muted) !important; font-size: 12px !important; }
+.stDivider { border-color: var(--border) !important; }
+label { color: var(--text-secondary) !important; font-size: 13px !important; }
+
+/* ===== INPUTS ===== */
+[data-testid="stTextInput"] input,
+[data-testid="stTextArea"] textarea,
+[data-baseweb="select"] {
+    background-color: var(--bg-surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 14px !important;
+    transition: var(--transition) !important;
+}
+
+[data-testid="stTextInput"] input:focus,
+[data-testid="stTextArea"] textarea:focus {
+    border-color: var(--border-focus) !important;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
+    outline: none !important;
+}
+
+/* ===== BUTTONS ===== */
+.stButton > button,
+.stDownloadButton > button,
+[data-testid="stBaseButton-secondary"],
+[data-testid="stBaseButton-primary"] {
+    background-color: var(--bg-surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 6px 16px !important;
+    min-height: 34px !important;
+    transition: var(--transition) !important;
+    box-shadow: none !important;
+    letter-spacing: 0 !important;
+    cursor: pointer !important;
+}
+
+.stButton > button:hover,
+.stDownloadButton > button:hover,
+[data-testid="stBaseButton-secondary"]:hover {
+    background-color: var(--bg-hover) !important;
+    border-color: var(--border-hover) !important;
+    color: var(--accent) !important;
+}
+
+/* Botón primario — Vercel usa blanco sobre negro */
+.stButton > button[kind="primary"],
+[data-testid="stBaseButton-primary"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: #000000 !important;
+    font-weight: 600 !important;
+}
+
+.stButton > button[kind="primary"]:hover,
+[data-testid="stBaseButton-primary"]:hover {
+    background-color: #e0e0e0 !important;
+    border-color: #e0e0e0 !important;
+}
+
+/* ===== TABS ===== */
+[data-testid="stTabs"] [role="tablist"] {
+    background: transparent !important;
+    border-bottom: 1px solid var(--border) !important;
+    gap: 0 !important;
+}
+
+[data-testid="stTabs"] button[role="tab"] {
+    background: transparent !important;
+    border: none !important;
+    color: var(--text-muted) !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 10px 16px !important;
+    border-radius: 0 !important;
+    transition: var(--transition) !important;
+}
+
+[data-testid="stTabs"] button[role="tab"]:hover {
+    color: var(--text-primary) !important;
+}
+
+[data-testid="stTabs"] button[role="tab"][aria-selected="true"] {
+    color: var(--text-primary) !important;
+    border-bottom: 2px solid var(--accent) !important;
+    font-weight: 600 !important;
+}
+
+/* ===== EXPANDER ===== */
+[data-testid="stExpander"] {
+    background-color: var(--bg-surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+}
+
+[data-testid="stExpander"] summary {
+    color: var(--text-secondary) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+}
+
+/* ===== METRICS ===== */
+div[data-testid="metric-container"] {
+    background-color: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 16px 20px;
+    transition: var(--transition);
+}
+
+div[data-testid="metric-container"]:hover {
+    border-color: var(--border-hover);
+    background-color: var(--bg-hover);
+}
+
+div[data-testid="metric-container"] [data-testid="stMetricLabel"] {
+    color: var(--text-muted) !important;
+    font-size: 11px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    font-weight: 500;
+}
+
+div[data-testid="metric-container"] [data-testid="stMetricValue"] {
+    color: var(--text-primary) !important;
+    font-size: 24px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.03em;
+}
+
+/* ===== DATAFRAME ===== */
+[data-testid="stDataFrame"] {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+/* ===== ALERTS / INFO / WARNING / ERROR ===== */
+[data-testid="stAlert"] {
+    border-radius: var(--radius-md) !important;
+    border: 1px solid var(--border) !important;
+    font-size: 13px !important;
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+
+/* ===== ANIMATIONS ===== */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shimmer {
+    0%   { background-position: -200% center; }
+    100% { background-position:  200% center; }
 }
-[data-testid="stHeader"] { background-color: transparent !important; }
-[data-testid="stAppViewBlockContainer"] { padding-top: 10px; }
+
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.4; }
+}
+
+/* =====================================================
+   COMPONENTES CUSTOM DE PROCURA AI
+   ===================================================== */
 
 /* ===== NAVBAR ===== */
 .top-navbar {
     position: fixed;
     top: 0; left: 0;
     width: 100%;
-    background: rgba(13, 17, 23, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    padding: 14px 60px;
-    border-bottom: 1px solid rgba(88, 166, 255, 0.3);
+    height: 52px;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    padding: 0 24px;
+    border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 9999;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
 }
-.main-content-spacer { margin-top: 65px; }
 
-/* ===== GRADIENTE DE TEXTO PREMIUM ===== */
-.premium-gradient-text {
-    background: linear-gradient(135deg, #58A6FF 0%, #10B981 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 800;
-    letter-spacing: -1px;
+.top-navbar-logo {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-/* ===== MÉTRICAS ===== */
-div[data-testid="metric-container"] {
-    background: linear-gradient(135deg, #161B22 0%, #0D1117 100%);
-    border: 1px solid #1E2A3A;
-    padding: 18px;
-    border-radius: 14px;
-    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+.top-navbar-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
-div[data-testid="metric-container"]:hover {
-    transform: translateY(-4px);
-    border-color: #58A6FF;
-    box-shadow: 0 8px 25px rgba(88, 166, 255, 0.15);
-}
-
-/* ===== CARDS CON EFECTO VIDRIO (GLASSMORPHISM) ===== */
-.glass-card {
-    background: rgba(22, 27, 34, 0.55) !important;
-    backdrop-filter: blur(12px) !important;
-    -webkit-backdrop-filter: blur(12px) !important;
-    border: 1px solid rgba(88, 166, 255, 0.15) !important;
-    border-radius: 16px !important;
-    padding: 28px 22px !important;
-    text-align: center;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
-    height: 100%;
+
+.main-content-spacer { margin-top: 60px; }
+
+/* ===== BADGE DE USUARIO ===== */
+.user-badge {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    padding: 3px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: 0.02em;
 }
-.glass-card:hover {
-    border-color: rgba(88, 166, 255, 0.4) !important;
-    transform: translateY(-6px) !important;
-    box-shadow: 0 15px 35px rgba(88, 166, 255, 0.15) !important;
+
+/* ===== STATUS BADGE ONLINE ===== */
+.status-online {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--accent-green);
+    font-weight: 500;
+}
+
+.status-online::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--accent-green);
+    border-radius: 50%;
+    animation: pulse-dot 2s ease-in-out infinite;
 }
 
+/* ===== SECTION TITLES ===== */
+.section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+    margin: 0 0 4px 0;
+}
+
+.section-subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin: 0 0 20px 0;
+    font-weight: 400;
+}
+
+/* ===== CARDS ===== */
 .detail-card {
-    background: var(--surface-1);
-    border: 1px solid var(--line-soft);
-    border-left: 4px solid var(--blue);
-    border-radius: 8px;
-    padding: 18px;
-    box-shadow: none;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    animation: fadeIn 0.2s ease;
+    transition: var(--transition);
+}
+
+.detail-card:hover {
+    border-color: var(--border-hover);
+}
+
+/* Acento azul izquierdo */
+.detail-card-accent {
+    border-left: 2px solid var(--accent-blue);
 }
+
+/* ===== PROVIDER CARDS ===== */
 .provider-card {
-    border-radius: 10px;
-    background: #161B22;
-    border: 1px solid #30363D;
-    padding: 20px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 18px;
     height: 180px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    transition: all 0.3s ease;
     overflow: hidden;
+    transition: var(--transition);
+    animation: fadeIn 0.2s ease;
+    cursor: pointer;
+    position: relative;
 }
+
+.provider-card::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-lg);
+    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 60%);
+    pointer-events: none;
+}
+
 .provider-card:hover {
-    transform: translateY(-3px);
-    border-color: #58A6FF;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    border-color: var(--border-hover);
+    background: var(--bg-hover);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
 }
+
 .provider-card h4 {
-    color: #58A6FF;
-    margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 16px;
-    line-height: 1.3;
+    color: var(--text-primary);
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.01em;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
 .provider-card p {
-    font-size: 13px;
-    color: #8B949E;
-    line-height: 1.4;
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
     flex-grow: 1;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    margin-bottom: 10px;
+    margin: 0 0 10px 0;
 }
+
 .provider-card a {
-    color: #3FB950;
-    font-weight: 700;
+    color: var(--accent-blue);
+    font-weight: 500;
     text-decoration: none;
-    font-size: 13px;
-    display: inline-block;
-}
-.provider-card a:hover {
-    text-decoration: underline;
-}
-
-.email-card, .step-card {
-    border-radius: 8px;
-    background: var(--surface-1);
-    border-color: var(--line-soft);
-    box-shadow: none;
-}
-.step-icon { font-size: 44px; margin-bottom: 15px; display: block; }
-
-/* ===== PULSO DE IA ACTIVO (GLOW ANIMATION) ===== */
-.active-pulse-container {
-    background: rgba(35, 134, 54, 0.15);
-    border: 1px solid rgba(57, 185, 80, 0.3);
-    border-radius: 20px;
-    padding: 8px 16px;
     font-size: 12px;
-    color: #3FB950;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
-    box-shadow: 0 0 15px rgba(57, 185, 80, 0.1);
-}
-.pulse-dot {
-    width: 8px;
-    height: 8px;
-    background-color: #3FB950;
-    border-radius: 50%;
-    display: inline-block;
-    box-shadow: 0 0 0 0 rgba(57, 185, 80, 0.7);
-    animation: active-glow 1.8s infinite;
+    gap: 4px;
+    transition: var(--transition);
 }
 
-@keyframes active-glow {
-    0% {
-        transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgba(57, 185, 80, 0.7);
-    }
-    70% {
-        transform: scale(1);
-        box-shadow: 0 0 0 6px rgba(57, 185, 80, 0);
-    }
-    100% {
-        transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgba(57, 185, 80, 0);
-    }
+.provider-card a:hover { text-decoration: underline; }
+
+/* ===== EMAIL CARD ===== */
+.email-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--accent-green);
+    border-radius: var(--radius-md);
+    padding: 14px 16px;
+    margin-bottom: 8px;
+    transition: var(--transition);
+    animation: fadeIn 0.2s ease;
 }
 
-/* ===== SCROLLBAR ===== */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: #0A0E1A; }
-::-webkit-scrollbar-thumb { background: #1E2A3A; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #58A6FF; }
+.email-card:hover {
+    border-color: var(--border-hover);
+    border-left-color: var(--accent-blue);
+    background: var(--bg-hover);
+}
 
-/* ===== DATAFRAME ===== */
-[data-testid="stDataFrame"] { border-radius: 12px; overflow: hidden; }
+/* ===== STEP CARDS ===== */
+.step-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 28px 20px;
+    text-align: center;
+    height: 100%;
+    transition: var(--transition-slow);
+    animation: fadeIn 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
 
-/* ===== CONFIG VARIABLES ===== */
-:root {
-    --bg-main: #080C12;
-    --surface-1: #0F141C;
-    --surface-2: #151B24;
-    --line-soft: #242C38;
-    --text-main: #E8EDF5;
-    --text-muted: #8C98A8;
-    --blue: #4F9CF9;
-    --green: #31C48D;
-    --amber: #F6B44B;
-    --orange: #F08A3C;
-    --red: #EF5B5B;
-    --gray: #748091;
+.step-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.5s ease;
 }
 
-.section-title {
-    margin: 2px 0 12px 0;
-    color: var(--text-main);
-    font-size: 18px;
-    font-weight: 750;
+.step-card:hover::before { transform: translateX(100%); }
+
+.step-card:hover {
+    border-color: var(--border-hover);
+    background: var(--bg-hover);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-lg);
 }
-.section-subtitle {
-    margin: -8px 0 16px 0;
-    color: var(--text-muted);
-    font-size: 13px;
+
+.step-icon {
+    font-size: 36px;
+    margin-bottom: 12px;
+    display: block;
+    filter: grayscale(20%);
 }
 
+/* ===== MONITOR ROW ===== */
 .monitor-row {
-    background: var(--surface-1);
-    border: 1px solid var(--line-soft);
-    border-left: 4px solid var(--status-color, var(--blue));
-    border-radius: 8px;
-    padding: 12px 14px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--status-color, var(--accent-blue));
+    border-radius: var(--radius-md);
+    padding: 14px 16px;
+    transition: var(--transition);
+    margin-bottom: 2px;
+}
+
+.monitor-row:hover {
+    border-color: var(--border-hover);
+    border-left-color: var(--status-color, var(--accent-blue));
+    background: var(--bg-hover);
 }
+
 .monitor-row-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 14px;
 }
+
 .monitor-id {
-    color: var(--text-main);
-    font-size: 16px;
-    font-weight: 800;
+    color: var(--text-primary);
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
     line-height: 1.2;
 }
+
 .monitor-owner {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: 10px;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
-    margin-bottom: 3px;
+    letter-spacing: 0.08em;
+    font-weight: 500;
+    margin-bottom: 2px;
 }
+
 .monitor-object {
-    color: #B8C2D0;
+    color: var(--text-secondary);
     font-size: 12px;
-    line-height: 1.35;
-    margin-top: 5px;
+    line-height: 1.4;
+    margin-top: 4px;
 }
+
 .monitor-meta {
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
     gap: 6px;
-    margin-top: 8px;
+    margin-top: 10px;
 }
+
+/* ===== STATUS BADGE ===== */
 .status-badge {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    background: color-mix(in srgb, var(--status-color, var(--blue)) 14%, transparent);
-    color: var(--status-color, var(--blue));
-    border: 1px solid color-mix(in srgb, var(--status-color, var(--blue)) 42%, transparent);
-    border-radius: 999px;
-    padding: 3px 9px;
+    gap: 5px;
+    background: color-mix(in srgb, var(--status-color, var(--accent-blue)) 10%, transparent);
+    color: var(--status-color, var(--accent-blue));
+    border: 1px solid color-mix(in srgb, var(--status-color, var(--accent-blue)) 30%, transparent);
+    border-radius: var(--radius-pill);
+    padding: 3px 8px;
     font-size: 11px;
-    font-weight: 700;
+    font-weight: 600;
     white-space: nowrap;
+    letter-spacing: 0.01em;
 }
+
 .status-dot {
-    width: 7px;
-    height: 7px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    background: var(--status-color, var(--blue));
+    background: var(--status-color, var(--accent-blue));
+    flex-shrink: 0;
 }
+
+/* ===== MINI PILL ===== */
 .mini-pill {
-    background: #0B1017;
-    border: 1px solid var(--line-soft);
-    border-radius: 999px;
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
     color: var(--text-muted);
-    padding: 3px 9px;
+    padding: 2px 8px;
     font-size: 11px;
     white-space: nowrap;
+    font-weight: 400;
 }
 
+/* ===== SLI SUMMARY ===== */
 .sli-summary {
-    margin: 8px 0 10px 0;
-    background: #0B1017;
-    border: 1px solid var(--line-soft);
-    border-left: 3px solid var(--amber);
-    border-radius: 8px;
-    padding: 10px 12px;
+    margin: 10px 0;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--accent-amber);
+    border-radius: var(--radius-md);
+    padding: 10px 14px;
 }
+
 .sli-summary-title {
-    color: var(--amber);
-    font-size: 11px;
-    font-weight: 800;
-    letter-spacing: 0.04em;
+    color: var(--accent-amber);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.07em;
     text-transform: uppercase;
-    margin-bottom: 4px;
+    margin-bottom: 5px;
 }
+
 .sli-summary-body {
-    color: #D9E2EF;
+    color: var(--text-secondary);
     font-size: 12px;
-    line-height: 1.35;
+    line-height: 1.5;
 }
 
-.stButton > button,
-.stDownloadButton > button,
-[data-testid="stBaseButton-secondary"],
-[data-testid="stBaseButton-primary"] {
-    border-radius: 7px !important;
-    min-height: 36px;
-    font-weight: 650;
+/* ===== WORK PANEL ===== */
+.work-panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 16px;
 }
-.stButton > button[kind="primary"],
-[data-testid="stBaseButton-primary"] {
-    background: #2F7FD8 !important;
-    border-color: #2F7FD8 !important;
+
+/* ===== INFO GRID / TILES ===== */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 8px;
+    margin-bottom: 14px;
+}
+
+.info-tile {
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 12px 14px;
+}
+
+.info-label {
+    color: var(--text-muted);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.info-value {
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+}
+
+/* ===== TAG BADGE ===== */
+.tag-badge {
+    display: inline-block;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 2px 8px;
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 500;
+    margin-right: 4px;
+    letter-spacing: 0.01em;
+}
+
+/* ===== ACTION BUTTON LEGACY ===== */
+.action-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    margin-right: 8px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--text-primary) !important;
+    padding: 8px 16px;
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 13px;
+    transition: var(--transition);
+}
+
+.action-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-hover);
+}
+
+/* ===== SHIMMER TEXT (para títulos premium) ===== */
+.shimmer-text {
+    background: linear-gradient(
+        90deg,
+        var(--text-secondary) 0%,
+        var(--text-primary) 30%,
+        var(--text-secondary) 60%,
+        var(--text-primary) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 4s linear infinite;
+}
+
+/* ===== MOTOR IA STATUS ===== */
+.ia-status-on {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(80, 227, 194, 0.06);
+    border: 1px solid rgba(80, 227, 194, 0.2);
+    border-radius: var(--radius-pill);
+    padding: 5px 12px;
+    font-size: 12px;
+    color: var(--accent-green);
+    font-weight: 500;
+}
+
+.ia-status-off {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(255, 68, 68, 0.06);
+    border: 1px solid rgba(255, 68, 68, 0.2);
+    border-radius: var(--radius-pill);
+    padding: 5px 12px;
+    font-size: 12px;
+    color: var(--accent-red);
+    font-weight: 500;
 }