/* ===========================================
   PROGRESSBAR.CSS - Barra de Progresso
   Baseado no padrão do /perfil/
   =========================================== */

/* Stepper */
.stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1vh;
    position: relative;
    padding-top: 0;
}

/* Linha base (fundo cinza) */
.stepper-line {
    position: absolute;
    top: 1vh;
    left: 16.66%;
    right: 16.66%;
    height: 1.3vh;
    background-color: #7F7F7F;
    z-index: 1;
}

/* Linha de progresso (verde) */
.stepper-line-progress {
    position: absolute;
    top: 1vh;
    left: 16.66%;
    height: 1.3vh;
    background-color: #c4d82e;
    z-index: 2;
    transition: width 0.3s ease;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 3;
}

.stepper-circle {
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    background: white;
    border: 0.4vh solid #d1d5db;
    box-shadow: 0 0 0 0.3vh #183A68;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1vh;
    transition: all 0.3s ease;
}

.stepper-circle.active {
    background-color: #c4d82e;
    border-color: #c4d82e;
}

.stepper-circle.completed {
    background-color: #c4d82e;
    border-color: #c4d82e;
}

.stepper-circle svg {
    display: none;
    width: 1.8vh;
    height: 1.8vh;
}

.stepper-circle.completed svg {
    display: block;
}

.checkmark {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 0.5px #183A68) drop-shadow(0 0 0.5px #183A68);
}

.stepper-label {
    font-size: 1.5vh;
    color: rgba(255, 255, 255, 0.7);
}

.stepper-label.active {
    color: white;
    font-weight: 600;
}

.stepper-label.completed {
    color: rgba(255, 255, 255, 0.9);
}

/* Classes de progresso - apenas width */
/* Cadastro (0% a 33%) */
.progress-cadastro-1 { width: 0%; }
.progress-cadastro-2 { width: 11%; }
.progress-cadastro-3 { width: 22%; }
.progress-cadastro-4 { width: 33%; }

/* Perfil (33% a 66%) - 8 etapas */
.progress-perfil-1 { width: 33%; }
.progress-perfil-2 { width: 37%; }
.progress-perfil-3 { width: 42%; }
.progress-perfil-4 { width: 46%; }
.progress-perfil-5 { width: 50%; }
.progress-perfil-6 { width: 54%; }
.progress-perfil-7 { width: 58%; }
.progress-perfil-8 { width: 59%; }
.progress-perfil-parabens { width: 60%; }
.progress-perfil-cnpj { width: 61%; }
.progress-perfil-comissao { width: 62%; }
.progress-perfil-selecao { width: 63%; }

/* Docs (66% a 100%) */
.progress-docs-upload { width: 66%; }
.progress-docs-1 { width: 66%; }
.progress-docs-2 { width: 77%; }
.progress-docs-3 { width: 88%; }
.progress-docs-4 { width: 100%; }

/* Completo */
.progress-completo { width: 100%; }

/* ===========================================
   RESPONSIVIDADE TABLETS - Stepper
   =========================================== */

/* Tablets pequenos (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .stepper-circle {
        width: 3.5vh;
        height: 3.5vh;
        min-width: 3.5vh;
        min-height: 3.5vh;
        border: 0.4vh solid #d1d5db;
        box-shadow: 0 0 0 0.3vh #183A68;
    }

    .stepper-circle svg {
        width: 2vh;
        height: 2vh;
    }

    .stepper-label {
        font-size: 1.6vh;
        margin-top: 0.5vh;
    }

    .stepper-line,
    .stepper-line-progress {
        height: 1.5vh;
        top: 1.2vh;
    }

    .stepper {
        margin-bottom: 1.5vh;
    }
}

/* Tablets grandes (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .stepper-circle {
        width: 3.2vh;
        height: 3.2vh;
        min-width: 3.2vh;
        min-height: 3.2vh;
        border: 0.35vh solid #d1d5db;
        box-shadow: 0 0 0 0.3vh #183A68;
    }

    .stepper-circle svg {
        width: 1.9vh;
        height: 1.9vh;
    }

    .stepper-label {
        font-size: 1.5vh;
        margin-top: 0.5vh;
    }

    .stepper-line,
    .stepper-line-progress {
        height: 1.4vh;
        top: 1.1vh;
    }
}

/* Desktop (1280px e acima) */
@media screen and (min-width: 1280px) {
    .stepper-circle {
        width: 3vh;
        height: 3vh;
        min-width: 3vh;
        min-height: 3vh;
        border: 0.3vh solid #d1d5db;
        box-shadow: 0 0 0 0.2vh #183A68;
    }

    .stepper-circle svg {
        width: 1.8vh;
        height: 1.8vh;
    }

    .stepper-label {
        font-size: 1.4vh;
    }

    .stepper-line,
    .stepper-line-progress {
        height: 1.2vh;
        top: 1vh;
    }
}