Upload 2 files

app.py

@@ -25,7 +25,7 @@ st.set_page_config(page_title="Proyelec Sourcing Pro", layout="wide", page_icon=
 @st.cache_data
 def get_css():
     try:
-        with open('style.css', 'r', encoding='utf-8') as f:
+        with open('style_aesthetic_test.css', 'r', encoding='utf-8') as f:
             return f'<style>{f.read()}</style>'
     except:
         return ""
@@ -1129,44 +1129,81 @@ 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>", unsafe_allow_html=True)
+        st.markdown("<br><br>", unsafe_allow_html=True)
         st.markdown(f"""
-        <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 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>
-        <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>
+        <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>
         """, unsafe_allow_html=True)
 
         k1, k2, k3, k4 = st.columns(4)
-        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")
+        
+        # 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)
 
-        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)
+        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)
 
         c1, c2, c3 = st.columns(3)
         with c1:
             st.markdown("""
-            <div class='step-card'>
+            <div class='glass-card'>
                 <div class='step-icon'>📄</div>
-                <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>
+                <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>
             </div>
             """, unsafe_allow_html=True)
         with c2:
             st.markdown("""
-            <div class='step-card'>
+            <div class='glass-card'>
                 <div class='step-icon'>🧠</div>
-                <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>
+                <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>
             </div>
             """, unsafe_allow_html=True)
         with c3:
             st.markdown("""
-            <div class='step-card'>
+            <div class='glass-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,162 +1,192 @@
-@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;
-}
-[data-testid="stSidebar"] {
-    background: linear-gradient(180deg, #0D1117 0%, #0A0E1A 100%);
-    border-right: 1px solid #1E2A3A;
-}
-[data-testid="stHeader"] { background-color: transparent !important; }
-[data-testid="stAppViewBlockContainer"] { padding-top: 10px; }
-
-/* ===== 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);
-    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; }
-
-/* ===== 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;
-}
-div[data-testid="metric-container"]:hover {
-    transform: translateY(-4px);
-    border-color: #58A6FF;
-    box-shadow: 0 8px 25px rgba(88, 166, 255, 0.15);
-}
-
-/* ===== CARDS ===== */
-.detail-card {
-    background: linear-gradient(135deg, #161B22 0%, #0D1117 100%);
-    padding: 25px;
-    border-radius: 16px;
-    border-top: 3px solid #58A6FF;
-    border-left: 1px solid #1E2A3A;
-    border-right: 1px solid #1E2A3A;
-    border-bottom: 1px solid #1E2A3A;
-    margin-top: 20px;
-    animation: fadeInUp 0.3s ease;
-}
-.provider-card {
-    border: 1px solid #1E2A3A;
-    border-radius: 14px;
-    padding: 20px;
-    background: linear-gradient(135deg, #0D1117 0%, #0A0E1A 100%);
-    border-left: 3px solid #58A6FF;
-    height: 100%;
-    transition: all 0.25s ease;
-    margin-top: 15px;
-}
-.provider-card:hover {
-    border-left-color: #10B981;
-    transform: translateY(-4px);
-    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
-}
-.email-card {
-    background: linear-gradient(135deg, #161B22 0%, #0D1117 100%);
-    border-left: 3px solid #10B981;
-    padding: 18px;
-    border-radius: 12px;
-    margin-bottom: 12px;
-    border-top: 1px solid #1E2A3A;
-    border-right: 1px solid #1E2A3A;
-    border-bottom: 1px solid #1E2A3A;
-    transition: all 0.2s ease;
-    animation: fadeInUp 0.3s ease;
-}
-.email-card:hover {
-    border-left-color: #58A6FF;
-    box-shadow: 0 4px 20px rgba(88, 166, 255, 0.1);
-}
-.step-card {
-    background: linear-gradient(135deg, #161B22 0%, #0D1117 100%);
-    border: 1px solid #1E2A3A;
-    padding: 30px 20px;
-    border-radius: 18px;
-    text-align: center;
-    height: 100%;
-    transition: all 0.3s ease;
-    animation: fadeInUp 0.4s ease;
-}
-.step-card:hover {
-    border-color: #58A6FF;
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(88, 166, 255, 0.12);
-}
-.step-icon { font-size: 44px; margin-bottom: 15px; display: block; }
-
-/* ===== BADGES ===== */
-.tag-badge {
-    background: linear-gradient(90deg, #1a3a1a, #238636);
-    color: #3fb950;
-    border: 1px solid #238636;
-    padding: 3px 10px;
-    border-radius: 20px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin-right: 4px;
-}
-
-/* ===== BOTONES LEGACY ===== */
-.action-btn {
-    display: inline-block;
-    margin-top: 10px; margin-right: 10px;
-    background: linear-gradient(90deg, #238636, #2ea043);
-    color: white !important;
-    padding: 10px 18px;
-    border-radius: 8px;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 13px;
-    transition: all 0.25s ease;
-    box-shadow: 0 2px 8px rgba(35, 134, 54, 0.3);
-}
-.action-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(35, 134, 54, 0.4);
-}
-
-/* ===== ANIMACIONES ===== */
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(12px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes pulse-blue {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.3); }
-    50%       { box-shadow: 0 0 0 8px rgba(88, 166, 255, 0); }
-}
-
-/* ===== 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; }
-
+@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;
+}
+[data-testid="stSidebar"] {
+    background: linear-gradient(180deg, #0D1117 0%, #0A0E1A 100%);
+    border-right: 1px solid #1E2A3A;
+}
+[data-testid="stHeader"] { background-color: transparent !important; }
+[data-testid="stAppViewBlockContainer"] { padding-top: 10px; }
+
+/* ===== 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);
+    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;
+}
+
+/* ===== 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;
+}
+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%;
+}
+.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;
+}
+
+.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;
+}
+.provider-card {
+    border-radius: 10px;
+    background: #161B22;
+    border: 1px solid #30363D;
+    padding: 20px;
+    height: 180px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+.provider-card:hover {
+    transform: translateY(-3px);
+    border-color: #58A6FF;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+.provider-card h4 {
+    color: #58A6FF;
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 16px;
+    line-height: 1.3;
+    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;
+    flex-grow: 1;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+.provider-card a {
+    color: #3FB950;
+    font-weight: 700;
+    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;
+}
+
+@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);
+    }
+}
+
+/* ===== 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; }
+
 /* ===== DATAFRAME ===== */
 [data-testid="stDataFrame"] { border-radius: 12px; overflow: hidden; }
 
-/* ===== OPERATIONS UI REFRESH ===== */
+/* ===== CONFIG VARIABLES ===== */
 :root {
     --bg-main: #080C12;
     --surface-1: #0F141C;
@@ -172,38 +202,18 @@ div[data-testid="metric-container"]:hover {
     --gray: #748091;
 }
 
-div[data-testid="metric-container"] {
-    background: var(--surface-1);
-    border: 1px solid var(--line-soft);
-    border-radius: 8px;
-    box-shadow: none;
-}
-
-div[data-testid="metric-container"]:hover {
-    transform: none;
-    border-color: #344255;
-    box-shadow: none;
-}
-
 .section-title {
     margin: 2px 0 12px 0;
     color: var(--text-main);
     font-size: 18px;
     font-weight: 750;
 }
-
 .section-subtitle {
     margin: -8px 0 16px 0;
     color: var(--text-muted);
     font-size: 13px;
 }
 
-.monitor-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
 .monitor-row {
     background: var(--surface-1);
     border: 1px solid var(--line-soft);
@@ -211,21 +221,18 @@ div[data-testid="metric-container"]:hover {
     border-radius: 8px;
     padding: 12px 14px;
 }
-
 .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;
     line-height: 1.2;
 }
-
 .monitor-owner {
     color: var(--text-muted);
     font-size: 11px;
@@ -233,14 +240,12 @@ div[data-testid="metric-container"]:hover {
     letter-spacing: 0.04em;
     margin-bottom: 3px;
 }
-
 .monitor-object {
     color: #B8C2D0;
     font-size: 12px;
     line-height: 1.35;
     margin-top: 5px;
 }
-
 .monitor-meta {
     display: flex;
     justify-content: flex-end;
@@ -248,7 +253,6 @@ div[data-testid="metric-container"]:hover {
     gap: 6px;
     margin-top: 8px;
 }
-
 .status-badge {
     display: inline-flex;
     align-items: center;
@@ -262,14 +266,12 @@ div[data-testid="metric-container"]:hover {
     font-weight: 700;
     white-space: nowrap;
 }
-
 .status-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--status-color, var(--blue));
 }
-
 .mini-pill {
     background: #0B1017;
     border: 1px solid var(--line-soft);
@@ -288,7 +290,6 @@ div[data-testid="metric-container"]:hover {
     border-radius: 8px;
     padding: 10px 12px;
 }
-
 .sli-summary-title {
     color: var(--amber);
     font-size: 11px;
@@ -297,65 +298,12 @@ div[data-testid="metric-container"]:hover {
     text-transform: uppercase;
     margin-bottom: 4px;
 }
-
 .sli-summary-body {
     color: #D9E2EF;
     font-size: 12px;
     line-height: 1.35;
 }
 
-.work-panel {
-    background: var(--surface-1);
-    border: 1px solid var(--line-soft);
-    border-radius: 8px;
-    padding: 14px;
-}
-
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 8px;
-    margin-bottom: 14px;
-}
-
-.info-tile {
-    background: var(--surface-1);
-    border: 1px solid var(--line-soft);
-    border-radius: 8px;
-    padding: 12px;
-}
-
-.info-label {
-    color: var(--text-muted);
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 5px;
-}
-
-.info-value {
-    color: var(--text-main);
-    font-size: 13px;
-    font-weight: 650;
-    line-height: 1.3;
-}
-
-.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;
-}
-
-.provider-card, .email-card, .step-card {
-    border-radius: 8px;
-    background: var(--surface-1);
-    border-color: var(--line-soft);
-    box-shadow: none;
-}
-
 .stButton > button,
 .stDownloadButton > button,
 [data-testid="stBaseButton-secondary"],
@@ -364,7 +312,6 @@ div[data-testid="metric-container"]:hover {
     min-height: 36px;
     font-weight: 650;
 }
-
 .stButton > button[kind="primary"],
 [data-testid="stBaseButton-primary"] {
     background: #2F7FD8 !important;