/**
 * ============================================
 * INVLAB CARROSSEL - Indicadores Econômicos
 * Sistema de carrossel com dados do BCB API
 * ============================================
 */

/* Container principal do carrossel */
#invlab-carousel-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 0 28px !important; /* CORRIGIDO: padding-bottom de 28px para cobertura total do gap */
    background: #0D0D0D; /* 100% OPACO - evita vazamento de conteúdo */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001; /* Acima do header (1000) */
    overflow: hidden;
    border-bottom: 1px solid rgba(42, 127, 255, 0.15);
}

.invlab-carousel-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Container dos slides */
.invlab-carousel-slides {
    display: flex;
    gap: 20px; /* AUMENTADO: 4px → 20px para mais respiro entre slides */
    overflow-x: hidden;
    padding: 0 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: max-content;
    will-change: transform;
    animation: invlabScrollLeft 30s linear infinite;
}

.invlab-carousel-slides::-webkit-scrollbar {
    display: none;
}

/* Slide individual */
.invlab-carousel-slide {
    min-width: auto; /* ALTERADO: width automático para conteúdo horizontal */
    max-width: none;
    height: auto;
    border-radius: 0;
    padding: 0; /* REMOVIDO: sem padding para layout mais limpo */
    display: flex;
    flex-direction: row; /* ALTERADO: row para layout horizontal */
    justify-content: center;
    align-items: center;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* ALTERADO: visible para não cortar texto */
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    background: transparent;
    backdrop-filter: none;
}

.invlab-carousel-slide:hover {
    transform: none; /* REMOVIDO: sem efeito hover */
    box-shadow: none;
}

/* Conteúdo do slide - HORIZONTAL */
.invlab-slide-content {
    display: flex;
    flex-direction: row; /* ALTERADO: row para label e valor lado a lado */
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 4px; /* Gap entre label e valor */
    white-space: nowrap; /* Evita quebra de linha */
}

/* Label (nome do indicador) */
.invlab-slide-label {
    font-size: 11px; /* AUMENTADO: 10px → 11px (proporção com valor) */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6); /* Levemente mais suave para não competir com valor */
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Mais espaçamento para elegância */
}

/* Valor - ESTILO PREMIUM */
.invlab-slide-value {
    font-size: 14px; /* REDUZIDO: 24px → 14px (equilibrio com cores + barra) */
    font-weight: 700; /* Bold mantido */
    color: #FFFFFF; /* Cor padrão (será sobrescrita pelas cores inteligentes) */
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CORES INTELIGENTES POR CATEGORIA
   Sistema de cores premium baseado em função
   ============================================ */

/* SELIC - Verde (rendimento positivo) */
.invlab-carousel-slide.selic .invlab-slide-value {
    color: #00e887; /* Verde lima suave */
}

/* IPCA - Azul (inflação/frio) */
.invlab-carousel-slide.ipca .invlab-slide-value {
    color: #4aa8ff; /* Azul claro */
}

/* CDI - Verde (rendimento positivo) */
.invlab-carousel-slide.cdi .invlab-slide-value {
    color: #00e887; /* Verde lima suave */
}

/* POUPANÇA - Amarelo (alerta/tradicional) */
.invlab-carousel-slide.poupanca .invlab-slide-value {
    color: #ffdb4d; /* Amarelo suave */
}

/* DÓLAR - Roxo (internacional/premium) */
.invlab-carousel-slide.dolar .invlab-slide-value {
    color: #c084fc; /* Roxo suave */
}

/* EURO - Roxo Claro (câmbio europeu) */
.invlab-carousel-slide.euro .invlab-slide-value {
    color: #a78bfa; /* Roxo claro */
}

/* IGP-M - Laranja (inflação contratos) */
.invlab-carousel-slide.igpm .invlab-slide-value {
    color: #fb923c; /* Laranja suave */
}

/* IBOVESPA - Teal (bolsa de valores) */
.invlab-carousel-slide.ibovespa .invlab-slide-value {
    color: #2dd4bf; /* Teal suave */
}

/* BITCOIN - Laranja Bitcoin */
.invlab-carousel-slide.bitcoin .invlab-slide-value {
    color: #f7931a; /* Laranja Bitcoin oficial */
}

/* ETHEREUM - Azul Ethereum */
.invlab-carousel-slide.ethereum .invlab-slide-value {
    color: #627eea; /* Azul Ethereum oficial */
}

/* BOVA11 - Verde (Ibovespa) */
.invlab-carousel-slide.bova11 .invlab-slide-value {
    color: #10b981; /* Verde INVLAB */
}

/* IVVB11 - Azul (S&P 500) */
.invlab-carousel-slide.ivvb11 .invlab-slide-value {
    color: #3b82f6; /* Azul forte */
}

/* SMAL11 - Rosa (Small Caps) */
.invlab-carousel-slide.smal11 .invlab-slide-value {
    color: #ec4899; /* Rosa vibrante */
}

/* DIVO11 - Ciano (Dividendos) */
.invlab-carousel-slide.divo11 .invlab-slide-value {
    color: #14b8a6; /* Ciano */
}

/* ============================================
   BARRA LUMINOSA INFERIOR - ESTILO PREMIUM
   Linha sutil de 3px que diferencia cada indicador
   ============================================ */

/* SELIC - Barra verde suave */
.invlab-carousel-slide.selic {
    border-bottom: 3px solid #00e88733; /* Verde com 20% opacidade */
}

/* IPCA - Barra azul suave */
.invlab-carousel-slide.ipca {
    border-bottom: 3px solid #4aa8ff33; /* Azul com 20% opacidade */
}

/* CDI - Barra verde suave */
.invlab-carousel-slide.cdi {
    border-bottom: 3px solid #00e88733; /* Verde com 20% opacidade */
}

/* POUPANÇA - Barra amarela suave */
.invlab-carousel-slide.poupanca {
    border-bottom: 3px solid #ffdb4d33; /* Amarelo com 20% opacidade */
}

/* DÓLAR - Barra roxa suave */
.invlab-carousel-slide.dolar {
    border-bottom: 3px solid #c084fc33; /* Roxo com 20% opacidade */
}

/* EURO - Barra roxa clara */
.invlab-carousel-slide.euro {
    border-bottom: 3px solid #a78bfa33; /* Roxo claro com 20% opacidade */
}

/* IGP-M - Barra laranja */
.invlab-carousel-slide.igpm {
    border-bottom: 3px solid #fb923c33; /* Laranja com 20% opacidade */
}

/* IBOVESPA - Barra teal */
.invlab-carousel-slide.ibovespa {
    border-bottom: 3px solid #2dd4bf33; /* Teal com 20% opacidade */
}

/* BITCOIN - Barra laranja Bitcoin */
.invlab-carousel-slide.bitcoin {
    border-bottom: 3px solid #f7931a33; /* Laranja Bitcoin com 20% opacidade */
}

/* ETHEREUM - Barra azul Ethereum */
.invlab-carousel-slide.ethereum {
    border-bottom: 3px solid #627eea33; /* Azul Ethereum com 20% opacidade */
}

/* BOVA11 - Barra verde */
.invlab-carousel-slide.bova11 {
    border-bottom: 3px solid #10b98133; /* Verde INVLAB com 20% opacidade */
}

/* IVVB11 - Barra azul */
.invlab-carousel-slide.ivvb11 {
    border-bottom: 3px solid #3b82f633; /* Azul com 20% opacidade */
}

/* SMAL11 - Barra rosa */
.invlab-carousel-slide.smal11 {
    border-bottom: 3px solid #ec489933; /* Rosa com 20% opacidade */
}

/* DIVO11 - Barra ciano */
.invlab-carousel-slide.divo11 {
    border-bottom: 3px solid #14b8a633; /* Ciano com 20% opacidade */
}

/* Botão de ação - REMOVIDO (carrossel meramente informativo) */

/* Cores específicas por slide - REMOVIDAS (sem bordas) */

/* Animação de scroll contínuo */
@keyframes invlabScrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20%);
    }
}

/* Responsividade - Tablet */
@media (max-width: 1024px) {
    #invlab-carousel-container {
        padding: 10px 0 24px !important; /* CORRIGIDO: padding-bottom para cobertura total */
    }
    
    .invlab-carousel-wrapper {
        padding: 0 24px;
    }
    
    .invlab-carousel-slides {
        gap: 16px; /* Respiro reduzido para tablet */
    }
    
    .invlab-slide-label {
        font-size: 10px; /* Tablet: proporção mantida */
    }
    
    .invlab-slide-value {
        font-size: 13px; /* Tablet: proporção mantida (14px → 13px) */
    }
}

/* Responsividade - Mobile */
@media (max-width: 768px) {
    #invlab-carousel-container {
        padding: 8px 0 22px !important; /* CORRIGIDO: padding-bottom para cobertura total */
    }
    
    .invlab-carousel-wrapper {
        padding: 0 20px;
    }
    
    .invlab-carousel-slides {
        gap: 12px; /* Respiro reduzido para mobile */
        padding: 0 4px;
        animation: invlabScrollLeft 20s linear infinite;
    }
    
    .invlab-slide-label {
        font-size: 9px; /* Mobile: legível mas compacto */
    }
    
    .invlab-slide-value {
        font-size: 12px; /* Mobile: proporção mantida (14px → 12px) */
    }
}

/* Responsividade - Mobile Pequeno */
@media (max-width: 480px) {
    #invlab-carousel-container {
        padding: 6px 0 20px !important; /* CORRIGIDO: padding-bottom para cobertura total */
    }
    
    .invlab-carousel-wrapper {
        padding: 0 15px;
    }
    
    .invlab-carousel-slides {
        gap: 10px; /* Respiro reduzido para mobile pequeno */
        padding: 0 3px;
        animation: invlabScrollLeft 15s linear infinite;
    }
    
    .invlab-slide-label {
        font-size: 8px; /* Mobile pequeno: compacto */
    }
    
    .invlab-slide-value {
        font-size: 11px; /* Mobile pequeno: proporção mantida (14px → 11px) */
    }
}

/* Loading state */
.invlab-carousel-loading {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.invlab-carousel-loading::after {
    content: '...';
    animation: invlabLoadingDots 1.5s infinite;
}

@keyframes invlabLoadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Error state */
.invlab-carousel-error {
    text-align: center;
    padding: 40px;
    color: #EF4444;
    font-size: 14px;
}