/* ==========================================================================
   MARKETNEWS: MÓDULOS FINANCIEROS (MODERNIZADO)
   ========================================================================== */

/* --- 1. Ticker Financiero (Clean Terminal Look) --- */
.market-ticker-wrapper { 
    border-bottom: 1px solid #f0f0f0; 
    background-color: #ffffff;
    height: 44px; 
    overflow: hidden; 
    position: relative; 
    display: flex; 
    align-items: center; 
}
.market-ticker-track { 
    display: flex; 
    white-space: nowrap; 
    animation: tickerScroll 35s linear infinite; 
    padding-left: 2rem; 
}
.market-ticker-wrapper:hover .market-ticker-track { 
    animation-play-state: paused; 
}
.market-ticker-item { 
    color: #4b5563 !important; 
    font-size: 0.95rem; 
    font-weight: 500;
    text-decoration: none; 
    margin-right: 3rem; 
    display: flex; 
    align-items: center; 
    transition: color 0.2s ease; 
}
.market-ticker-item:hover { 
    color: #004b87 !important; 
}

/* Indicadores visuales minimalistas para el Ticker */
.ticker-badge { 
    border-radius: 50%; 
    margin-right: 0.6rem; 
    width: 10px; 
    height: 10px; 
    display: inline-block;
    flex-shrink: 0;
}
.t-badge-riesgo { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
.t-badge-oportunidad { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.t-badge-tendencia { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }

@keyframes tickerScroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
    .market-ticker-wrapper { height: 40px; }
    @keyframes tickerScroll {
        0%   { transform: translateX(100%); }
        100% { transform: translateX(-150%); }
    }
}

/* --- 2. Tarjetas Globales y Tipo de Cambio --- */
.market-card { 
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.015) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.market-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important; 
}
.text-marketnews { 
    color: #112240 !important; 
    font-size: 1.15rem !important; 
    font-weight: 800; 
    letter-spacing: -0.3px;
}

/* Botón Histórico Modernizado */
.historico { 
    font-size: 0.8rem; 
    font-weight: 700;
    color: #004b87; 
    background: #f0f4f8;
    text-decoration: none; 
    display: inline-flex; 
    align-items: center;
    gap: 5px;
    padding: 6px 12px; 
    border-radius: 8px; 
    transition: all 0.3s ease; 
}
.historico:hover { 
    background: #8bc34a; 
    color: #ffffff !important; 
}

/* --- 3. Sliders Verticales (Metales y Macro) --- */
.vertical-slider-viewport { 
    height: 120px; 
    overflow: hidden; 
    position: relative; 
    /* Efecto fade en los bordes top/bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.vertical-slider-track { 
    display: flex; 
    flex-direction: column; 
    animation: scrollVertical 15s linear infinite; 
}
.vertical-slider-viewport:hover .vertical-slider-track { 
    animation-play-state: paused; 
}
@keyframes scrollVertical { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-50%); } 
}
.vertical-item { 
    height: 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 0; 
    border-bottom: 1px solid #f3f4f6;
}
.vertical-item:last-child { border-bottom: none; }

/* Colores de tendencia para Metales y Macro */
.trend-up { color: #10b981 !important; }
.trend-down { color: #ef4444 !important; }
.bg-trend-up { background-color: #10b981 !important; }
.bg-trend-down { background-color: #ef4444 !important; }