:root {
    --green-cool-vivid-10: #B7F5BD;
    --green-cool-vivid-20: #70E17B;
    --green-cool-vivid-30: #21C834;
    --green-cool-vivid-40: #00A91C;
    --green-cool-vivid-50: #168821;
    --green-cool-vivid-60: #216E1F;
    --green-cool-vivid-70: #154C21;
    --green-cool-vivid-80: #19311E;

    --blue-warm-vivid-10: #D4E5FF;
    --blue-warm-vivid-20: #ADCDFF;
    --blue-warm-vivid-30: #81AEFC;
    --blue-warm-vivid-40: #5992ED;
    --blue-warm-vivid-50: #2670E8;
    --blue-warm-vivid-60: #155BCB;
    --blue-warm-vivid-70: #1351B4;
    --blue-warm-vivid-80: #0C326F;
    --blue-warm-vivid-90: #071D41;

}

/* MODAL DOCUMENTS WIZARD */
/* HEADER */

.modal-gradient-header {
    background: var(--blue-warm-vivid-10);
}

.btn-close-white-small {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
}

/* ALERTA */
.alert-info-soft {
    background: #fff;
    border: none;
    color: var(--blue-warm-vivid-80);
    font-size: .9rem;
    padding: .6rem .9rem;
}

/* WIZARD */
/* WIZARD */
.wizard-container {
    margin-bottom: 2rem;
    margin-top: 2rem;
}


/* Steps */
.wizard-icons {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.wizard-step {
    position: relative;
    flex: 1;
    text-align: center;
}

.wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    /* centro do círculo */
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--blue-warm-vivid-70);
    z-index: 1;
}

/* Círculo */

.wizard-circle {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--blue-warm-vivid-80);
    color: var(--blue-warm-vivid-80);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: relative;
    z-index: 2;
    /* acima da linha */
}

.wizard-circle .wizard-check {
    display: none;
}

/* Texto */
.wizard-step span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--blue-warm-vivid-80);
}


.current-step .wizard-circle {
    background: var(--blue-warm-vivid-80);
    color: #fff;
    transform: translateY(-3px);
}

.btn-click-steps {
    cursor: pointer;
    text-decoration: none;
}

.completed-step .wizard-circle {
    background: #fff;
    color: var(--blue-warm-vivid-80);
    border-color: var(--blue-warm-vivid-80);
}

.completed-step .wizard-text {
    color: var(--green-cool-vivid-50);
}

.completed-step .wizard-check {
    position: absolute;
    right: -6px;
    /* empurra para fora */
    top: -10px;
    /* canto inferior direito */
    width: 22px;
    height: 22px;
    background: var(--green-cool-vivid-50);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {

    .wizard-icons span {
        display: none;
    }

    .wizard-circle {
        margin: 0 12px 0 0;
    }
}




/* INPUTS MAIS MODERNOS */
.form-control,
.form-select {
    padding: .55rem .75rem;
    font-size: .9rem;
}

.form-label {
    font-size: .85rem;
    margin-bottom: .3rem;
}

/* BOTÃO GRADIENTE */
.btn-nextStep {
    background: var(--blue-warm-vivid-80);
    border: 1px solid black;
    box-shadow: 0 6px 18px rgba(37, 117, 252, 0.18);
    color: white;

}

.btn-nextStep:hover {
    opacity: .9;
    transform: scale(1.03);
    background: var(--blue-warm-vivid-90);
    border: 1px solid black;
    color: white;
}

.btn-prevStep {
    background-color: var(--blue-warm-vivid-40);
    box-shadow: 0 6px 18px rgba(37, 117, 252, 0.18);
    color: white;
}

.btn-prevStep:hover {
    opacity: .9;
    transform: scale(1.03s);
    background-color: var(--blue-warm-vivid-60);
    color: white;
    border: 1px solid black;
}

/* 
/*  */
/* */
/*  */

/* FORMULARIO  */

input {
    margin-top: 10px;
    margin-bottom: 35px;
}

select {
    margin-bottom: 35px;
}

.custom-tooltip {
    --bs-tooltip-bg: #343a40;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-opacity: 1;
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 8px 10px;
}

input::placeholder {
    font-size: 0.90rem;
    color: #6c757d;
}

/* Card mais compacto */
.compact-card {
    padding: 1rem !important;
    border-radius: 10px;
}

/* Inputs mais baixos e elegantes */
.compact-input {
    padding: 12px 10px !important;
    font-size: 16px !important;
    font-weight: 500;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.404);
    box-shadow: 0.5px 0.5px 0.2px rgba(0, 0, 0, 0.212);
}

/* Label pequena, elegante */
.form-label-compact {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .25rem;
    color: black;
}

/* Ícones menores */
.form-label-compact i {
    font-size: .9rem;
}