/* ARQUIVO: css/style.css */

/* --- 1. ESTILOS GERAIS E ANIMAÇÕES --- */

.fade-in {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Esconde barra de scroll */
.trail-scroll::-webkit-scrollbar {
    display: none;
}
.trail-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: scroll; 
}

/* Gradiente de Fundo Animado (Claro/Cinza) */
.animated-gradient {
    background-image: 
        url('../css/log.png'), 
        linear-gradient(180deg, #e3e6eb, #e3e6eb, #e3e6eb);
    background-size: 20% auto, 100% 300%;
    background-position: left center, 0% 0%;
    
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, scroll;
    
    animation: gradient-move 20s ease infinite alternate;
}
@keyframes gradient-move {
    0% { background-position: 3px center, 0% 0%; }
    100% { background-position: 1440px center, 0% 100%; }
}
/* --- 2. ESTILOS DOS CARDS DA TRILHA --- */

/* Estrutura base do Card */
.trail-step-card {
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    background-color: rgba(255,255,255,0.02);
    border-width: 2px;
}

/* === ESTADO 1: CONCLUÍDO (Verde Sólido) === */
.trail-step-card.status-completed {
    background-color: #17a460;
    border-color: #17a460;
    box-shadow: 0 10px 15px -3px rgba(23, 164, 96, 0.2);
    opacity: 1;
    transform: scale(1);
}

.trail-step-card.status-completed .step-text,
.trail-step-card.status-completed .step-icon {
    color: white;
}

/* === ESTADO 2: BLOQUEADO / FUTURO (Vidro/Cinza) === */
.trail-step-card.status-locked {
    background-color: rgba(209, 209, 210, 0.05); /* Fundo sutil */
    backdrop-filter: blur(4px); 
    border-color: rgba(36, 33, 73, 0.05);
    box-shadow: none;
    opacity: 1;
    transform: scale(0.95);
}

/* Hover no card bloqueado */
.trail-step-card.status-locked:hover {
    background-color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1);
}

/* Cor do texto bloqueado */
.trail-step-card.status-locked .step-text,
.trail-step-card.status-locked .step-icon {
    color: #242149; 
    opacity: 0.6;
}

/* === ESTADO 3: ATUAL / DISPONÍVEL (AZUL ESCURO) === */
.trail-step-card.status-current {
    /* Fundo mudado para AZUL ESCURO conforme seu pedido */
    background-color: #ffffff; 
    backdrop-filter: blur(12px);
    opacity: 1;
}

.trail-step-card.status-current:hover {
    transform: scale(1.05);
}

/* CORREÇÃO CRÍTICA AQUI: */
/* Como o fundo é azul escuro, o texto TEM que ser BRANCO */
.trail-step-card.status-current .step-text,
.trail-step-card.status-current .step-icon {
    color: #1a4266 !important; 
}

/* --- 3. ESTILOS DOS CÍRCULOS NUMÉRICOS --- */

.step-number-circle {
    transition: all 0.3s ease;
}

/* Círculo Bloqueado */
.step-number-circle.status-locked {
    background-color: rgba(255, 255, 255, 0.5);
    color: #1a4266;
    box-shadow: none;
    border: 2px solid rgba(26, 66, 102, 0.2);
}

/* Hover no grupo pai */
.trail-step-card.status-locked:hover ~ .step-number-circle.status-locked,
.group:hover .step-number-circle.status-locked {
    background-color: #18589A;
    color: white;
    border-color: #18589A;
}

/* Círculo Atual */
.step-number-circle.status-current {
    background-color: #ffffff; /* Bola branca */
    color: #1a4266;            /* Número azul */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    border: 2px solid #1a4266;
}

/* --- 4. ESTILOS DAS LINHAS (SVG) --- */

.trail-path-line {
    transition: all 0.5s ease;
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.trail-path-line.status-completed {
    stroke: #23ba71;
    opacity: 1;
    stroke-dasharray: 0;
}

.trail-path-line.status-locked {
    stroke: #A7A7A8; /* Azul semitransparente */
    opacity: 0.5;
    stroke-dasharray: 8, 8;
}