/* ==========================================================
   TRAZION CLOUD
   SOLICITUD DE ACCESO - WIZARD
   ========================================================== */

.trazion-auth-page-request {

    --trz-request-navy: #0B1D3A;
    --trz-request-slate: #44566F;
    --trz-request-blue: #2563EB;
    --trz-request-light: #D6DCE6;
    --trz-request-bg: #F8FAFC;

}


/* La tarjeta puede ser un poco más ancha */
.trazion-auth-page-request
.trazion-auth-content-request {

    width: min(100%, 690px) !important;
}


.trazion-auth-page-request
.trazion-auth-request-card {

    width: 100% !important;
}


/* ==========================================================
   INDICADOR SUPERIOR
   ========================================================== */

.trazion-request-wizard-top {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin:
        3px
        0
        9px;
}


.trazion-request-wizard-top > div {

    display: flex;
    flex-direction: column;
    gap: 2px;
}


.trazion-request-step-label {

    color: #64748B;

    font-size: 11px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .055em;
}


.trazion-request-wizard-top strong {

    color: #0B1D3A;

    font-size: 14px;
    font-weight: 700;
}


.trazion-request-step-percent {

    color: #2563EB;

    font-size: 12px;
    font-weight: 700;
}


.trazion-request-progress {

    width: 100%;
    height: 5px;

    margin-bottom: 23px;

    overflow: hidden;

    background: #E7EDF4;

    border-radius: 999px;
}


.trazion-request-progress span {

    display: block;

    width: 25%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #0B1D3A 0%,
            #2563EB 100%
        );

    border-radius: inherit;

    transition:
        width .35s cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================
   BS STEPPER
   ========================================================== */

.trazion-bs-stepper {

    background: transparent !important;

    box-shadow: none !important;
}


.trazion-bs-stepper
.bs-stepper-header {

    margin:
        0
        0
        28px;

    padding:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


.trazion-bs-stepper
.step-trigger {

    padding:
        0 !important;

    flex-direction:
        column;

    gap:
        6px;

    font-family:
        Inter,
        sans-serif;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


.trazion-bs-stepper
.bs-stepper-circle {

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin:
        0 !important;

    color:
        #64748B;

    background:
        #EEF2F7;

    border:
        1px solid
        #D6DCE6;

    border-radius:
        50%;

    font-size:
        12px;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.trazion-bs-stepper
.bs-stepper-label {

    margin:
        0 !important;

    color:
        #64748B;

    font-size:
        10.5px;
    font-weight:
        650;

    transition:
        color .22s ease;
}


.trazion-bs-stepper
.step.active
.bs-stepper-circle {

    color:
        #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #0B1D3A,
            #2563EB
        );

    border-color:
        transparent;

    box-shadow:
        0 7px 15px
        rgba(37,99,235,.20);

    transform:
        scale(1.04);
}


.trazion-bs-stepper
.step.active
.bs-stepper-label {

    color:
        #0B1D3A;
}


.trazion-bs-stepper
.line {

    min-width:
        22px;

    height:
        1px;

    margin:
        18px
        7px
        0;

    background:
        #D6DCE6;
}


/* ==========================================================
   CONTENIDO
   ========================================================== */

.trazion-bs-stepper
.bs-stepper-content {

    padding:
        0 !important;
}


.trazion-bs-stepper
.content {

    padding:
        0 !important;

    opacity:
        0;

    transform:
        translateY(5px);
}


.trazion-bs-stepper
.content.active {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .24s ease,
        transform .24s ease;
}


/* ==========================================================
   CABECERA DE CADA PASO
   ========================================================== */

.trazion-wizard-heading {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-bottom:
        24px;
}


.trazion-wizard-heading-icon {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #2563EB;

    background:
        #EFF6FF;

    border:
        1px solid
        #DBEAFE;

    border-radius:
        12px;

    font-size:
        14px;
}


.trazion-wizard-heading-icon-success {

    color:
        #047857;

    background:
        #ECFDF5;

    border-color:
        #D1FAE5;
}


.trazion-wizard-heading h3 {

    margin:
        1px
        0
        4px;

    color:
        #0B1D3A;

    font-size:
        18px;

    font-weight:
        750;

    letter-spacing:
        -.02em;
}


.trazion-wizard-heading p {

    max-width:
        540px;

    margin:
        0;

    color:
        #64748B;

    font-size:
        12.5px;

    line-height:
        1.5;
}


/* ==========================================================
   FORM
   ========================================================== */

.trazion-access-request-form
.form-group {

    margin-bottom:
        18px;
}


.trazion-access-request-form
label {

    margin-bottom:
        6px;

    color:
        #0B1D3A;

    font-size:
        12.5px;

    font-weight:
        650;
}


.trazion-access-request-form
.form-control {

    min-height:
        44px;

    color:
        #0B1D3A;

    background:
        #FFFFFF;

    border:
        1px solid
        #CBD5E1;

    border-radius:
        9px;

    font-family:
        Inter,
        sans-serif;

    font-size:
        13.5px;

    box-shadow:
        none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.trazion-access-request-form
textarea.form-control {

    min-height:
        auto;

    padding:
        11px
        12px;

    resize:
        vertical;
}


.trazion-access-request-form
.form-control:focus {

    border-color:
        #2563EB;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.09) !important;
}


.trazion-textarea-counter {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        6px;

    color:
        #94A3B8;

    font-size:
        10.5px;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.trazion-wizard-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        28px;
}


.trazion-wizard-actions-end {

    justify-content:
        flex-end;
}


.trazion-wizard-next,
.trazion-wizard-submit {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        8px
        16px;

    color:
        #FFFFFF !important;

    background:
        linear-gradient(
            90deg,
            #0B1D3A 0%,
            #2563EB 100%
        ) !important;

    border:
        0 !important;

    border-radius:
        9px !important;

    font-size:
        12.5px;

    font-weight:
        700;

    box-shadow:
        0 7px 16px
        rgba(37,99,235,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.trazion-wizard-next:hover,
.trazion-wizard-submit:hover {

    color:
        #FFFFFF !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 19px
        rgba(37,99,235,.24);
}


.trazion-wizard-back {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        14px;

    color:
        #44566F !important;

    background:
        #FFFFFF !important;

    border:
        1px solid
        #CBD5E1 !important;

    border-radius:
        9px !important;

    font-size:
        12.5px;

    font-weight:
        650;

    box-shadow:
        none !important;
}


.trazion-wizard-back:hover {

    color:
        #2563EB !important;

    border-color:
        #2563EB !important;
}


/* ==========================================================
   RESUMEN
   ========================================================== */

.trazion-request-summary {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        10px;

    margin-bottom:
        18px;
}


.trazion-summary-item {

    min-width:
        0;

    padding:
        13px
        14px;

    background:
        #F8FAFC;

    border:
        1px solid
        #E2E8F0;

    border-radius:
        11px;
}


.trazion-summary-item small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #64748B;

    font-size:
        10.5px;

    font-weight:
        600;
}


.trazion-summary-item strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #0B1D3A;

    font-size:
        12.5px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .trazion-bs-stepper
    .bs-stepper-header {

        margin-bottom:
            23px;
    }


    .trazion-bs-stepper
    .bs-stepper-circle {

        width:
            34px;

        height:
            34px;

        font-size:
            11px;
    }


    .trazion-bs-stepper
    .line {

        margin-top:
            16px;

        margin-left:
            3px;

        margin-right:
            3px;
    }


    .trazion-bs-stepper
    .bs-stepper-label {

        font-size:
            9px;
    }


    .trazion-wizard-heading h3 {

        font-size:
            17px;
    }


    .trazion-request-summary {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 480px) {

    .trazion-request-wizard-top strong {

        font-size:
            13px;
    }


    .trazion-bs-stepper
    .bs-stepper-label {

        display:
            none;
    }


    .trazion-bs-stepper
    .line {

        margin:
            16px
            2px
            0;
    }


    .trazion-wizard-heading-icon {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .trazion-wizard-actions {

        align-items:
            stretch;
    }


    .trazion-wizard-back,
    .trazion-wizard-next,
    .trazion-wizard-submit {

        flex:
            1;
    }

}



/* ==========================================================
   TRAZION SOLICITUD DE ACCESO V2
   Integración visual con Login V4
   ========================================================== */


/* ==========================================================
   CONTENIDO DERECHO
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-auth-content-request {

    width:
        min(100%, 720px) !important;

    max-width:
        720px !important;

    margin:
        auto !important;

    padding:
        35px
        0
        45px !important;

}


/*
 * Quitamos la vieja "tarjeta dentro de tarjeta".
 */
.trazion-auth-page-request-v4
.trazion-auth-request-card {

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

}


/* ==========================================================
   CABECERA
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-auth-login-head {

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        13px !important;

    margin-bottom:
        25px !important;

}


.trazion-auth-page-request-v4
.trazion-auth-login-head img {

    width:
        48px !important;

    height:
        48px !important;

    flex:
        0 0 48px;

    object-fit:
        contain !important;

}


.trazion-auth-page-request-v4
.trazion-auth-login-head h2 {

    margin:
        0
        0
        4px !important;

    color:
        #0B1D3A !important;

    font-size:
        25px !important;

    line-height:
        1.12 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.03em !important;

}


.trazion-auth-page-request-v4
.trazion-auth-login-head p {

    max-width:
        600px;

    margin:
        0 !important;

    color:
        #64748B !important;

    font-size:
        12.5px !important;

    line-height:
        1.45 !important;

}


/* ==========================================================
   WIZARD CONTAINER
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-request-wizard {

    width:
        100%;

    padding:
        27px
        29px
        29px;

    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(214,220,230,.78);

    border-radius:
        20px;

    box-shadow:
        0 14px 38px
        rgba(11,29,58,.055);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


/* ==========================================================
   CORRECCIÓN CRÍTICA DEL CONTENIDO
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-bs-stepper
.bs-stepper-content {

    display:
        block !important;

    position:
        relative !important;

    min-height:
        330px;

    overflow:
        visible !important;

}


.trazion-auth-page-request-v4
.trazion-bs-stepper
.bs-stepper-content
.content {

    display:
        none;

    width:
        100%;

    opacity:
        0;

    transform:
        translateY(7px);

}


.trazion-auth-page-request-v4
.trazion-bs-stepper
.bs-stepper-content
.content.active,

.trazion-auth-page-request-v4
.trazion-bs-stepper
.bs-stepper-content
.content.dstepper-block {

    display:
        block !important;

    opacity:
        1 !important;

    transform:
        translateY(0) !important;

    animation:
        trazionWizardStepIn
        .25s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes trazionWizardStepIn {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   TRANSICIÓN ENTRE PASOS
   ========================================================== */

.trazion-auth-page-request-v4
.bs-stepper-content {

    transition:
        opacity .18s ease,
        transform .18s ease;

}


.trazion-auth-page-request-v4
.bs-stepper-content.trazion-step-changing {

    opacity:
        .94;

    transform:
        translateY(2px);

}


/* ==========================================================
   HEADER STEPPER
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-bs-stepper
.bs-stepper-header {

    padding:
        3px
        2px
        4px !important;

}


.trazion-auth-page-request-v4
.trazion-bs-stepper
.step-trigger {

    cursor:
        default !important;

}


/* ==========================================================
   CAMPOS
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-access-request-form
.form-control {

    min-height:
        46px !important;

    background:
        #FFFFFF !important;

    border:
        1px solid
        #CBD5E1 !important;

    border-radius:
        10px !important;

    color:
        #0B1D3A !important;

    font-size:
        13.5px !important;

}


.trazion-auth-page-request-v4
.trazion-access-request-form
.form-control:focus {

    border-color:
        #2563EB !important;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.09) !important;

}


.trazion-auth-page-request-v4
.trazion-access-request-form
textarea.form-control {

    min-height:
        100px !important;

}


/* ==========================================================
   BOTONES
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-wizard-next,

.trazion-auth-page-request-v4
.trazion-wizard-submit {

    background:
        linear-gradient(
            90deg,
            #0B1D3A 0%,
            #2563EB 100%
        ) !important;

    color:
        #FFFFFF !important;

    border:
        0 !important;

    border-radius:
        9px !important;

}


/* ==========================================================
   FOOTER
   Evitamos que se monte sobre un wizard alto.
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-auth-bottom-links {

    position:
        static !important;

    margin:
        16px
        auto
        0 !important;

    padding:
        0
        10px
        12px !important;

}


/* ==========================================================
   VOLVER AL LOGIN
   ========================================================== */

.trazion-auth-page-request-v4
.trazion-auth-help-link {

    z-index:
        20 !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .trazion-auth-page-request-v4
    .trazion-auth-content-request {

        width:
            calc(100% - 28px) !important;

        max-width:
            600px !important;

        padding:
            28px
            0
            35px !important;

    }


    .trazion-auth-page-request-v4
    .trazion-request-wizard {

        padding:
            22px
            17px
            24px;

        border-radius:
            17px;

    }


    .trazion-auth-page-request-v4
    .trazion-auth-login-head h2 {

        font-size:
            22px !important;

    }


    .trazion-auth-page-request-v4
    .trazion-bs-stepper
    .bs-stepper-content {

        min-height:
            390px;

    }

}