@import url("https://fonts.googleapis.com/css?family=Open+Sans:700,600,400");

.screen a {
    display: contents;
    text-decoration: none;
}

input:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}

button {
    cursor: pointer;
}
/***********************************************************************/
/* MAQUETACIÓN
/***********************************************************************/

.form-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.validation-answer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 3.5rem;
    &:is(.fix-padding) {
        padding: 0 3rem;
    }
}

.lg-image-container {
    background-color: var(--defaultwhite);
    border-radius: 8px;
    height: 180px;
    overflow: hidden;
    position: relative;
    width: 180px;
    .image-object {
        aspect-ratio: 0.91;
        height: 144px;
        left: 50%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        width: auto;
        transform: translateX(-50%) translateY(-50%);
    }
}
body:has(.bg-light-gradient){
    background: linear-gradient(360deg, rgba(255, 255, 255, 1) 20%, rgba(243, 239, 233, 1) 86%) !important;
}

.bg-light-gradient {
    background: linear-gradient(360deg, rgba(255, 255, 255, 1) 20%, rgba(243, 239, 233, 1) 86%);
}

.logo-brand {
    aspect-ratio: 5.45;
    background-image: url(./../img/logo-bi.svg);
    background-size: 100% 100%;
    height: 48px;
    position: relative;
    width: 262px;
}

.title-welcome {
    align-items: center;
    align-self: stretch;
    color: var(--grey-700);
    display: flex;
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    margin-top: 0;
    position: relative;
    text-align: center;
    line-height: 42px;
    height: auto;
    .ic_user {
        aspect-ratio: 1;
        background-image: url(./../img/fi-rr-user.svg);
        background-size: 28px 28px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .ic_shield {
        aspect-ratio: 1;
        background-image: url(./../img/ic-shield-check.svg);
        background-size: 28px 28px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.title {
    align-items: center;
    align-self: stretch;
    color: var(--grey-700);
    display: flex;
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 400;
    justify-content: left;
    letter-spacing: 0;
    margin-top: 0;
    position: relative;
    text-align: center;
    line-height: 42px;
    height: auto;
    .ic_user {
        aspect-ratio: 1;
        background-image: url(./../img/fi-rr-user.svg);
        background-size: 28px 28px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .ic_shield {
        aspect-ratio: 1;
        background-image: url(./../img/ic-shield-check.svg);
        background-size: 28px 28px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .ic_password {
        aspect-ratio: 1;
        background-image: url(./../img/ic_password.svg);
        background-size: 28px 28px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.form-container {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 80px;
    &:is(.boxed) {
        position: relative;
        display: flex;
        width: 100%;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 32px;
        padding: 40px;
        background-color: var(--defaultwhite);
        border-radius: 24px;
        box-shadow: 0px 0px 12px #61380014;
        align-items: flex-start;
    }
}

.info-box-widget {
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    display: flex;
    flex: 0 0 auto;
    gap: 16px;
    padding: 16px 20px;
    position: relative;
    width: 100%;
    &:is(.warning){
        background-color: var(--warningwarning--50);
        .ic_exclamation_circle_fill {
            aspect-ratio: 1;
            background-image: url(./../img/subtract.svg);
            background-size: 100% 100%;
            height: 24px;
            position: relative;
            width: 24px;
        }
        p {
            color: var(--warningwarning--600);
        }
    }
}

.requirements_items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    .requirement-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        .bi-icon {
            background: var(--primaryprimary--400);
            width: 1rem;
            display: block;
            height: 1rem;
            border-radius: 50%;
        }
        & :is(.icon-check) {
            background: url(./../img/check.svg) no-repeat center center;
        }
    }
}

.galley-wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 24px;
    margin-bottom: -24px;
    .image-item {
        border: 1.5px solid var(--grey--600);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            object-fit: cover;
        }
    }
    :is(.selected) {
        border-color: var(--secondarysecondary--900);
    }
}

/*********************************************************************/
/* CARRUSEL LADO IZQUIERDO
/*********************************************************************/
.brand {
    position: absolute;
    top: 6%;
    left: 6%;
    width: min(60%, 320px);
    aspect-ratio: 4.39;
    background-image: url(./../img/logo-bi-w.svg);
    background-repeat: no-repeat;
    background-size: contain;
}


.swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
}


.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);!important;
}
.swiper-pagination-bullet {
    aspect-ratio: 1;
    background-color: var(--defaultwhite);
    border-radius: 7.51px;
    height: 15.02px;
    position: relative;
    width: 15.02px;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background-color: var(--grey-100);
    border-radius: 9.38px;
    height: 15.02px;
    position: relative;
    width: 26.28px;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 45px;
}

.title-icon, .box_ic_w {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--primaryprimary--200);
    border-radius: 100px;
    display: flex;
    height: 48px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 48px;
}

.ic_shield_check {
    height: 28px;
    position: relative;
    width: 28px;
}

.title_body_web-1 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    position: relative;
    width: 100%;
}

.subtitle-body-1 {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 27.0px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

.a-continuacin-esco {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 21.6px;
    position: relative;
}

.frame-1321314965 {
    align-items: center;
    gap: 24px;
}

.card_web_pregunta_seguridad {
    align-items: flex-end;
    background-color: var(--defaultwhite);
    border: 1px solid;
    border-color: var(--primaryprimary--200);
    border-radius: 16px;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 1;
    gap: 24px;
    padding: 40px 24px;
    position: relative;
}

.pregunta-1 {
    align-self: stretch;
    letter-spacing: 0;
    line-height: 20.3px;
    margin-top: -1.00px;
    position: relative;
}

.input-1 {
    align-items: center;
    align-self: stretch;
    background-color: var(--defaultwhite);
    border: 2px solid;
    border-color: var(--error--400);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    height: 48px;
    padding: 12px 16px;
    position: relative;
    width: 100%;
}

.helper-text {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
    width: 100%;
}

.header_login_web {
    -webkit-backdrop-filter: blur(50px) brightness(100%);
    align-items: center;
    backdrop-filter: blur(50px) brightness(100%);
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 32px 108px;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.right {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 28px;
    justify-content: flex-end;
    position: relative;
}

.stepper-container {
    align-items: center;
    align-self: stretch;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 28px;
    position: relative;
    .stepper_wrapper {
        align-items: flex-end;
        display: inline-flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 8px;
        position: relative;
        .steps {
            align-items: center;
            display: inline-flex;
            flex: 0 0 auto;
            gap: 4px;
            position: relative;
            .step {
                background-color: var(--grey-300);
                border-radius: 15px;
                height: 6px;
                position: relative;
                width: 36px;
            }
            .active {
                background-color: var(--primaryprimary--700);
                border-radius: 15px;
                height: 6px;
                position: relative;
                width: 36px;
            }
        }

    }
}

.form-question-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    .fisaLabel-login {
        color: var(--grey-700);
    }

    .question-wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 40px 24px;
        border: 1px solid var(--primaryprimary--200);
        border-radius: 16px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        .dijitSelect .dijitSelectLabel {
            color: var(--grey--400);
        }

        &.is-active {
            border-color: transparent;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
        }
    }
}

.ic_sign_out_alt {
    height: 16px;
    position: relative;
    width: 16px;
}

.list-screens {
    li {
        list-style: square;
        a {
            color: var(--primaryprimary--700);
            text-decoration: underline;
        }
    }
}

.label {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    position: relative;
    width: 100%;
}

.text-label, .fisaLabel-login {
    flex: 1;
    letter-spacing: 0;
    line-height: 18.9px;
    margin-top: -1.00px;
    position: relative;
    color: var(--grey--600);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 600;
}

.helper-text {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 400;
    flex: 1;
    letter-spacing: 0;
    line-height: 18.9px;
    margin-top: -1.00px;
    position: relative;
    .error-message {
        color: var(--error--400);
    }
    .warninng-message {}
    .info-message {}
}

.carousel-main {
    height: 944px;
    left: 40px;
    position: absolute;
    top: 40px;
    width: 669px;
}

.slide-content {
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    max-height: 942px;
}

.bg-gradient {
    display: block;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
    height: 111px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.slider-indicadores {
    align-items: center;
    display: inline-flex;
    gap: 16.89px;
    left: calc(50.00% - 62px);
    position: absolute;
    top: 885px;
}

.slide {
    aspect-ratio: 1;
    background-color: var(--defaultwhite);
    border-radius: 7.51px;
    height: 15.02px;
    position: relative;
    width: 15.02px;
}

.slide-activo {
    background-color: var(--grey-100);
    border-radius: 9.38px;
    height: 15.02px;
    position: relative;
    width: 26.28px;
}

.help_wrapper {
    align-items: center;
    background-color: var(--grey--50);
    border-radius: 16px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;
    width: 100%;
    height: 60px;
}

.ic_interrogation {
    aspect-ratio: 1;
    height: 20px;
    position: relative;
    width: 20px;
}

.paragraph-1 {
    letter-spacing: 0;
    line-height: 20.3px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: normal;
    width: fit-content;
}

.ic_eye_close {
    height: 20px;
    position: relative;
    width: 20px;
}

.frame-1321314993 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.el-mejor-viaje-de-mi-vida {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 21.6px;
    position: relative;
    text-align: center;
    width: 226px;
}

.navbar_w {
    align-items: center;
    align-self: stretch;
    display: flex;
    height: 56px;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.sections-content {
    align-items: center;
    background: linear-gradient(270deg, rgba(242, 109, 33, 1) 0%, rgba(242, 139, 0, 1) 100%);
    border-radius: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    height: 56px;
    padding: 0px 8px;
    position: relative;
}

.navbar_buttons_w {
    align-items: center;
    border-radius: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    height: 40px;
    padding: 0px 12px;
    position: relative;
}

.ic_document_signed {
    height: 16px;
    position: relative;
    width: 16px;
}

.ic_products {
    height: 16px;
    position: relative;
    width: 16px;
}

.text-1 {
    line-height: 21.6px;
}

.ic_document_check {
    height: 16px;
    position: relative;
    width: 16px;
}

.text-2 {
    line-height: 21.6px;
}

.badge_notifications_web {
    aspect-ratio: 1;
    background-color: var(--grey--500);
    border: 2px solid;
    border-color: var(--defaultwhite);
    border-radius: 20px;
    height: 12px;
    position: absolute;
    right: 14px;
    top: -4px;
    width: 12px;
}

.ic_more_services {
    height: 16px;
    position: relative;
    width: 16px;
}

.text-3 {
    line-height: 21.6px;
}

.x-content {
    align-items: center;
    background-color: var(--defaultwhite);
    border: 1px solid;
    border-color: var(--primaryprimary--700);
    border-radius: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    height: 56px;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    position: relative;
}

.navbar_buttons_w-1 {
    background-color: var(--defaultwhite);
    display: inline-flex;
    gap: 8px;
    padding: 0px 12px;
}

.ic_building {
    height: 16px;
    position: relative;
    width: 16px;
}

.text-4 {
    color: var(--grey-700);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-m);
    font-weight: 600;
    line-height: 16.9px;
}

.ic_angle_small_down-3 {
    aspect-ratio: 1;
}

.navbar_buttons_w-2 {
    background-color: var(--defaultwhite);
    display: flex;
    justify-content: center;
    width: 40px;
}

.ic_search {
    height: 20px;
    position: relative;
    width: 20px;
}

.navbar_buttons_w-3 {
    background-color: var(--primaryprimary--700);
    display: flex;
    justify-content: center;
    width: 40px;
}

.breadcrumb_w {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    height: 48px;
    position: relative;
    width: 100%;
}

.breadcrumb_item_w {
    align-items: center;
    border: 0px none;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    height: 48px;
    justify-content: center;
    padding: 8px 0px 8px 8px;
    position: relative;
}

.item-1 {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 21.6px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

.item-1-1 {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 21.6px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

.ic_angle_small_down-4 {
    height: 16px;
    position: relative;
    width: 16px;
}

.navbar_buttons_w-4 {
    align-items: center;
    border-radius: 40px;
    height: 40px;
    position: relative;
}

.text-5 {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

/*********************************************************************/
/* DOJO COMPONENTS
/*********************************************************************/

/*********************************************************************/
/* RESET COMPONENT
/*********************************************************************/

.dijitReset {
    margin: 0;
    border: 0;
    padding: 0;
    line-height: normal;
    color: inherit;
    font-size: var(--text-2sm);
    font-family: var(--font-sans);
}

/*********************************************************************/
/* INPUT BOX
/*********************************************************************/

.dijitTextBox {
    font-family: var(--font-sans);
    .dijitInputContainer {
        flex: 1;
        letter-spacing: 0;
        position: relative;
        align-items: center;
        align-self: stretch;
        background: var(--defaultwhite);
        border: 1px solid var(--grey-400);
        border-radius: 8px;
        display: flex;
        gap: 16px;
        height: 48px;
        padding: 12px 16px;
        width: 100%;
        transition: 3ms all ease-in-out;
        .dijitInputInner {
            font-size: var(--text-2sm);
            background-color: transparent;
            border: 0;
            flex: 1;
            height: 20px;
            letter-spacing: 0;
            line-height: 20.3px;
            padding: 0;
            position: relative;
            z-index: 2;
        }
        .dijitPlaceHolder {
            position: absolute;
            font-size: var(--text-2sm);
            left: 0;
            height: 48px;
            line-height: 48px;
            color: #6a6b6e99;
            top: 0;
            padding: 0 16px;
            width: 100%;
        }
    }
}

.dijitTextBox.dijitTextBoxHover,
.dijitTextBox.dijitTextBoxHoverFocused,
.dijitTextBox.dijitTextBoxFocused,
.dijitTextBox.dijitFocused {
    .dijitInputContainer {
        border-color: var(--primaryprimary--700);
        border-width: 2px;
    }
}

.dijitTextBox.dijitTextBoxError {
    .dijitInputContainer {
        border-color: var(--error--400);
        border-width: 2px;
    }
}

/*********************************************************************/
/* CUSTOM ICONS INPUT BOX
/*********************************************************************/

.user-icon {
    .dijitTextBox {
        .dijitInputContainer {
            background: url(./../img/icon-user.svg) no-repeat var(--defaultwhite) calc(100% - 16px) center;
            background-size: 20px;
        }
    }
}

.password-icon {
    .dijitTextBox {
        .dijitInputContainer {
            background: url(./../img/icon-eye-close.svg) no-repeat var(--defaultwhite) calc(100% - 16px) center;
            background-size: 20px;
            cursor: pointer;
        }
    }

    &.show-password {
        .dijitTextBox {
            .dijitInputContainer {
                background-image: url(./../img/icon-eye-open.svg) !important;
            }
        }
    }
}

.computer-icon {
    .dijitTextBox {
        .dijitInputContainer {
            background: url(./../img/ic-computer.svg) no-repeat var(--defaultwhite) calc(100% - 16px) center;
            background-size: 20px;
        }
    }
}

.angle-down-icon {
    .dijitTextBox {
        .dijitInputContainer {
            background: url(./../img/ic-angle-small-down-gray.svg) no-repeat var(--defaultwhite) calc(100% - 16px) center;
            background-size: 20px;
        }
    }
}

/*********************************************************************/
/* BUTTON
/*********************************************************************/

.dijitButton {
    position: relative;

    .dijitButtonNode {
        background: linear-gradient(90deg, rgba(246, 97, 0, 1) 0%, rgba(242, 139, 0, 1) 50%);
        cursor: pointer;
        display: flex;
        height: 48px;
        justify-content: center;
        padding: 14px 20px;
        min-width: 288px;
        align-items: center;
        border-radius: 30px;
        gap: 8px;
        overflow: hidden;
        position: relative;
        transition: 200ms all ease-in-out;

        .dijitButtonContents {
            .dijitIcon {
                display: inline-block;
                width: 20px;
                height: 20px;
            }

            .dijitToggleButtonIconChar {
                display: none;
            }

            .dijitButtonText {
                color: var(--defaultwhite);
                font-family: var(--font-sans);
                font-size: var(--text-base);
                font-style: normal;
                font-weight: 700;
                margin-top: -2px;
                white-space: nowrap;
                width: fit-content;
                align-items: center;
                display: flex;
                justify-content: center;
                letter-spacing: 0;
                line-height: 21.6px;
                position: relative;
                text-align: center;
            }

            .dijitNoIcon {
                display: none;
            }
        }
    }

    .dijitButtonNode::before {
        content: "";
        position: absolute;
        top: 0;
        left: -180%;
        width: 300%;
        height: 100%;
        background: linear-gradient(
                120deg,
                transparent 0%,
                rgba(255,255,255,0.25) 40%,
                rgba(255,255,255,0.8) 50%,
                rgba(255,255,255,0.25) 60%,
                transparent 100%
        );
        transform: skewX(45deg);
        transition: 0.3s;
        opacity: 0;
    }

    .dijitButtonNode:hover::before {
        left: -20%;
        opacity: 1;
    }

    .dijitOffScreen {
        position: absolute;
        left: 0;
        top: 0;
    }

    &.dijitDisabled,
    &.dijitButtonDisabled {
        .dijitButtonNode {
            background: var(--grey-200) !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
            pointer-events: none !important;
        }

        .dijitButtonNode::before,
        .dijitButtonNode:hover::before {
            opacity: 0 !important;
            left: -180% !important;
        }

        .dijitButtonContents {
            .dijitButtonText {
                color: var(--grey--500) !important;
            }
        }
    }
}

/* Aplicar active/focus solo cuando NO esté disabled */
.dijitButton:not(.dijitDisabled):not(.dijitButtonDisabled).dijitButtonActive,
.dijitButton:not(.dijitDisabled):not(.dijitButtonDisabled).dijitButtonFocused {
    .dijitButtonNode {
        background: linear-gradient(90deg, rgba(242, 139, 0, 1) 0%, rgba(246, 97, 0, 1) 50%);
        inset: 0;
        border-radius: 30px;
        box-shadow: 0 0 6px rgba(0,0,0,0.3) inset;
    }
}

.dijitButton.dojoGrayButton {
    .dijitButtonNode {
        background: var(--defaultwhite);
        cursor: pointer;
        display: flex;
        height: 48px;
        justify-content: center;
        padding: 14px 20px;
        min-width: 288px;
        align-items: center;
        border-radius: 30px;
        gap: 8px;
        overflow: hidden;
        position: relative;
        transition: 200ms all ease-in-out;
        border: 1px solid var(--secondarysecondary--900);

        .dijitButtonContents {
            .dijitIcon {
                display: inline-block;
                width: 20px;
                height: 20px;
            }

            .dijitToggleButtonIconChar {
                display: none;
            }

            .dijitButtonText {
                color: var(--secondarysecondary--900);
                font-family: var(--font-sans);
                font-size: var(--text-base);
                font-style: normal;
                font-weight: 700;
                margin-top: -2px;
                white-space: nowrap;
                width: fit-content;
                align-items: center;
                display: flex;
                justify-content: center;
                letter-spacing: 0;
                line-height: 21.6px;
                position: relative;
                text-align: center;
            }

            .dijitNoIcon {
                display: none;
            }
        }
    }

    .dijitButtonNode:hover::before {
        background: var(--primaryprimary--200);
    }

    &.dijitDisabled,
    &.dijitButtonDisabled {
        .dijitButtonNode {
            background: var(--grey-100) !important;
            border-color: var(--grey-300) !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
            pointer-events: none !important;
        }

        .dijitButtonContents {
            .dijitButtonText {
                color: var(--grey--500) !important;
            }
        }

        .dijitButtonNode::before,
        .dijitButtonNode:hover::before {
            opacity: 0 !important;
            left: -180% !important;
        }
    }
}

/* Aplicar active/focus al gris solo cuando NO esté disabled */
.dijitButton.dojoGrayButton:not(.dijitDisabled):not(.dijitButtonDisabled).dijitButtonActive,
.dijitButton.dojoGrayButton:not(.dijitDisabled):not(.dijitButtonDisabled).dijitButtonFocused {
    .dijitButtonNode {
        background: var(--primaryprimary--200);
        inset: 0;
        border-radius: 30px;
        box-shadow: 0 0 6px rgba(0,0,0,0.3) inset;
    }
}

.crb-borderless-button {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    .dijitButtonNode {
        border: none !important;
    }
}

.kill-session-buttons {
    .button-section {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .dijitButton {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .dijitButton .dijitButtonNode {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        box-sizing: border-box;
        justify-content: center;
    }

    .dijitButton .dijitButtonContents {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dijitButton .dijitButtonText {
        text-align: center;
        justify-content: center;
    }
}

.auth-token {
    .dijitTextBox {
        .dijitInputContainer {
            width: 48px;


            .dijitInputInner, .dijitInputField {
                font-size: var(--text-xl) !important;
                color: var(--black) !important;
                max-width: 100%;
            }
        }
    }
}

/*********************************************************************/
/* Validacion de otp 6 inputs
/*********************************************************************/


.otp-error-container {
    margin-top: 8px;
}

.otp-error-text {
    color: var(--error--400);
    font-size: 14px;
    font-weight: 400;
}

#auth-token .otp-box .dijitInputContainer{
    border: 1px solid var(--neutral--200, #d9d9d9);
    border-radius: 10px; /* ajusta si tu diseño usa otro radio */
    transition: border-color 150ms ease, border-width 150ms ease;
}

#auth-token input.otp-digit{
    outline: none;
}

#auth-token:hover .otp-box .dijitInputContainer,
#auth-token:focus-within .otp-box .dijitInputContainer{
    border-color: var(--primaryprimary--700);
    border-width: 2px;
}

#auth-token.otp-has-error .otp-box .dijitInputContainer{
    border-color: var(--error--400);
    border-width: 2px;
}

#auth-token.otp-has-error:hover .otp-box .dijitInputContainer,
#auth-token.otp-has-error:focus-within .otp-box .dijitInputContainer{
    border-color: var(--error--400);
    border-width: 2px;
}


/* Texto clickable "Reenviar código" */
#otp-resend-text.otp-resend-link {
    color: var(--primaryprimary--700);
    font-weight: 600;
    cursor: pointer;
}

/* ==== TOAST TOP-CENTER ==== */
.otp-toast-container{
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.otp-toast{
    pointer-events: auto;
    width: 520px;
    background: #0b0c0f;
    color: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.otp-toast-icon{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #3BB54A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
}

.otp-toast-text{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
}

.otp-toast-progress{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,.18);
}
.otp-toast-progress > span{
    display: block;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.75);
    transform-origin: left;
    animation-name: otpToastProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes otpToastProgress{
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/*********************************************************************/
/* IMAGEN DE VALIDACIÓN
/*********************************************************************/

.validation-image-wrapper {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    width: 100%;
    .image-container {
        background-color: var(--defaultwhite);
        border-radius: 8px;
        height: 128px;
        overflow: hidden;
        position: relative;
        width: 128px;
        .image-object {
            aspect-ratio: 0.91;
            height: 100%;
            left: 4.30%;
            object-fit: cover;
            position: absolute;
            top: 0;
            width: 91.41%;
        }
    }
    .text-container {
        color: var(--grey-700);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-style: normal;
        font-weight: 400;
        align-items: center;
        display: flex;
        justify-content: center;
        letter-spacing: 0;
        line-height: 21.6px;
        position: relative;
        text-align: center;
        width: 226px;
    }
}

/*********************************************************************/
/* BOTON PEQUEÑO CON ICONO
/*********************************************************************/

.sm-button {
    padding: 8px 16px;
    background: var(--grey-200);
    border-radius: 30px;
    display: flex;
    gap: 8px;
    height: 36px;
    align-items: center;
    justify-content: center;
}

.sm-button:hover {
    background: var(--grey-300);
}

.sm-button:active, .sm-button:focus {
    background: var(--grey-300);
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) inset;
}


/*********************************************************************/
/* BOTONES BLOQUEO PERMANENTE
/*********************************************************************/
/* asegura que el wrapper sí sea flex y centre */
.form-container .form-button-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

/* cada fila de botón ocupa todo el ancho y centra el contenido */
.form-container .form-button-wrapper .button-section{
    width: 100%;
    display: flex;
    justify-content: center;
}

/* por si algún estilo del tema “empuja” el botón */
.form-container .form-button-wrapper .dijitButton{
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Solo OTP screen */
#otp-box{
    position: relative;   /* ancla para absolute */
    overflow: visible;    /* evita recorte */
}

/* Toast dentro del box (no fixed) */
#otp-box .otp-toast-container{
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}


/* ==========================================================
   RECOVER USER – estilos scoped (solo esta pantalla)
   Objetivo: evitar “saltos” por focus/error y mantener layout
   ========================================================== */

/* ----------------------------------------------------------
   0) Contenedor
   ---------------------------------------------------------- */
#recoverUserScreen .form-container.boxed{
    width: 100%;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 32px 40px;
    box-sizing: border-box;

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

/* ==========================================================
   Reserva fija para error inline del Kit (NO reflow)
   ========================================================== */
#recoverUserScreen .field-error-slot{
    display: block !important;     /* pisa display:none si el Kit lo toca */
    min-height: 18.9px;            /* 1 línea */
    line-height: 18.9px;
    margin-bottom: 10px;
    margin-top: -10px;

    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--error--400);

    visibility: hidden;            /* oculto pero ocupa espacio */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#recoverUserScreen .field-error-slot:not(:empty){
    visibility: visible;
}

/* ----------------------------------------------------------
   2) TextBox base (tamaño estable)
   ---------------------------------------------------------- */
#recoverUserScreen .dijitTextBox .dijitInputContainer{
    box-sizing: border-box !important;
    width: 90%;
    margin-bottom: 1.63%;
    border-width: 1px !important;
    height: 52px;
}

/* ----------------------------------------------------------
   3) Estados TextBox: hover/focus/error (sin saltos)
   ---------------------------------------------------------- */

/* Fuerza border-width del theme (según tu solución actual) */
#recoverUserScreen .dijitTextBox.dijitTextBoxHover .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxHoverFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxError .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxErrorFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.fisaFieldError .dijitInputContainer{
    border-width: 2px !important;
}

/* Focus/Hover (solo color) */
#recoverUserScreen .dijitTextBox.dijitTextBoxHover .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxHoverFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBoxFocused .dijitInputContainer{
    border-color: var(--primaryprimary--700) !important;
}

/* Error (solo color) */
#recoverUserScreen .dijitTextBox.dijitTextBoxError .dijitInputContainer,
#recoverUserScreen .dijitTextBox.dijitTextBoxErrorFocused .dijitInputContainer,
#recoverUserScreen .dijitTextBox.fisaFieldError .dijitInputContainer{
    border-color: var(--error--400) !important;
}

/* ----------------------------------------------------------
   4) Select (dijit.form.Select = TABLE) base + estados
   ---------------------------------------------------------- */

/* Base: la TABLE es la “caja” real del select */
#recoverUserScreen .dijitSelect{
    display: inline-table;
    width: 90%;
    max-height: 48px !important;
    box-sizing: border-box;
    margin-bottom: 1.63%;
    border: 1px solid var(--grey-400);
    border-radius: 8px !important;
    background: var(--defaultwhite);
    box-shadow: none;

    /* claves para que NO se vea cuadrado */
    overflow: hidden;                       /* recorta lo interno */
    border-collapse: separate !important;   /* evita que el borde se “cuadre” */
    border-spacing: 0 !important;
    font-family: var(--font-sans);
    transition: border-color .3s cubic-bezier(0.4, 0, 0.2, 1),
    border-width .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Asegura altura/box model interno estable */
#recoverUserScreen .dijitSelect .dijitButtonContents,
#recoverUserScreen .dijitSelect .dijitButtonNode{
    height: 48px;
    box-sizing: border-box;
}

/* El theme a veces pinta fondo en las celdas y tapa el radio:
   dejamos el fondo en la tabla (no en las celdas) */
#recoverUserScreen .dijitSelect .dijitButtonContents,
#recoverUserScreen .dijitSelect .dijitButtonNode{
    background: transparent;
}

/* Refuerza radio por lados (por si el theme hace cosas raras) */
#recoverUserScreen .dijitSelect .dijitButtonContents{
    border-radius: 8px 0 0 8px;
}
#recoverUserScreen .dijitSelect .dijitButtonNode{
    border-radius: 0 8px 8px 0;
}

/* Evita que el label se parta y mantén alineación */
#recoverUserScreen .dijitSelectLabel{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Border-width 2px en estados (igual que TextBox) ---------- */
/* Hover (según theme) */
#recoverUserScreen .dijitSelect.dijitHover,
#recoverUserScreen .dijitSelect.dijitSelectHover,
    /* Focus (en tu HTML aparece dijitSelectFocused + dijitFocused) */
#recoverUserScreen .dijitSelect.dijitSelectFocused,
#recoverUserScreen .dijitSelect.dijitFocused,
#recoverUserScreen .dijitSelect.dijitValidationTextBoxFocused,
    /* Error (varias variantes por theme) */
#recoverUserScreen .dijitSelect.dijitError,
#recoverUserScreen .dijitSelect.dijitValidationTextBoxError,
#recoverUserScreen .dijitSelect.dijitSelectError,
#recoverUserScreen .dijitSelect.fisaFieldError{
    border-width: 2px !important;
}

/* ---------- Focus / Hover (solo color) ---------- */
#recoverUserScreen .dijitSelect.dijitHover,
#recoverUserScreen .dijitSelect.dijitSelectHover,
#recoverUserScreen .dijitSelect.dijitSelectFocused,
#recoverUserScreen .dijitSelect.dijitFocused,
#recoverUserScreen .dijitSelect.dijitValidationTextBoxFocused{
    border-color: var(--primaryprimary--700) !important;
}

table.dijitMenuTable.dijitSelectMenu tr.dijitMenuItemHover td.dijitMenuItemLabel,
table.dijitMenuTable.dijitSelectMenu tr.dijitSelectSelectedOption td.dijitMenuItemLabel,
table.dijitMenuTable.dijitSelectMenu tr.dijitMenuItemSelected td.dijitMenuItemLabel,
table.dijitMenuTable.dijitSelectMenu tr.dijitMenuItemActive td.dijitMenuItemLabel {
    background: var(--grey--50) !important;
}


/* ---------- Error (solo color) ---------- */
#recoverUserScreen .dijitSelect.dijitError,
#recoverUserScreen .dijitSelect.dijitValidationTextBoxError,
#recoverUserScreen .dijitSelect.dijitSelectError,
#recoverUserScreen .dijitSelect.fisaFieldError{
    border-color: var(--error--400) !important;
}

/* TextBox: estado normal → 1px (igual que Select) */
#crb-security-questions-picker .dijitTextBox .dijitInputContainer {
    box-sizing: border-box !important;
    border-width: 1px !important;
}

/* TextBox: hover / focus → 2px color primario */
#crb-security-questions-picker .dijitTextBox.dijitTextBoxHover .dijitInputContainer,
#crb-security-questions-picker .dijitTextBox.dijitTextBoxHoverFocused .dijitInputContainer,
#crb-security-questions-picker .dijitTextBox.dijitTextBoxFocused .dijitInputContainer,
#crb-security-questions-picker .dijitTextBox.dijitFocused .dijitInputContainer {
    border-width: 2px !important;
    border-color: var(--primaryprimary--700) !important;
}

/* TextBox: error → 2px color error */
#crb-security-questions-picker .dijitTextBox.dijitTextBoxError .dijitInputContainer,
#crb-security-questions-picker .dijitTextBox.dijitTextBoxErrorFocused .dijitInputContainer,
#crb-security-questions-picker .dijitTextBox.fisaFieldError .dijitInputContainer {
    border-width: 2px !important;
    border-color: var(--error--400) !important;
}

/* ===========================================================
   securityQuestion.jsp — #crb-security-questions-picker
   Select: replica el patrón de #recoverUserScreen para que
   border-radius funcione sobre TABLE y .dijitButtonNode no
   altere el borde exterior.
   =========================================================== */

/* Base TABLE */
#crb-security-questions-picker .dijitSelect {
    display: inline-table;
    width: 100%;
    max-height: 48px !important;
    box-sizing: border-box;
    border: 1px solid var(--grey-400);
    border-radius: 8px !important;
    background: var(--defaultwhite);
    box-shadow: none;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: var(--font-sans);
    transition: border-color .3s cubic-bezier(0.4, 0, 0.2, 1),
    border-width .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Celdas internas: altura y fondo */
#crb-security-questions-picker .dijitSelect .dijitButtonContents,
#crb-security-questions-picker .dijitSelect .dijitButtonNode {
    height: 48px;
    box-sizing: border-box;
    background: transparent;
}

/* Refuerza border-radius por lados */
#crb-security-questions-picker .dijitSelect .dijitButtonContents {
    border-radius: 8px 0 0 8px;
}
#crb-security-questions-picker .dijitSelect .dijitButtonNode {
    border-radius: 0 8px 8px 0;
}

/* Label sin corte */
#crb-security-questions-picker .dijitSelectLabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover / Focus → 2px primario */
#crb-security-questions-picker .dijitSelect.dijitHover,
#crb-security-questions-picker .dijitSelect.dijitSelectHover,
#crb-security-questions-picker .dijitSelect.dijitSelectFocused,
#crb-security-questions-picker .dijitSelect.dijitFocused,
#crb-security-questions-picker .dijitSelect.dijitValidationTextBoxFocused {
    border-width: 2px !important;
    border-color: var(--primaryprimary--700) !important;
}

/* Error → 2px error */
#crb-security-questions-picker .dijitSelect.dijitError,
#crb-security-questions-picker .dijitSelect.dijitValidationTextBoxError,
#crb-security-questions-picker .dijitSelect.dijitSelectError,
#crb-security-questions-picker .dijitSelect.fisaFieldError {
    border-width: 2px !important;
    border-color: var(--error--400) !important;
}

/* Icono ángulo: flecha abajo / arriba */
#crb-security-questions-picker .angle-down-icon .dijitSelect .dijitArrowButtonContainer {
    width: 44px;
}
#crb-security-questions-picker .angle-down-icon .dijitSelect .dijitButtonContents {
    padding-right: 44px;
}
#crb-security-questions-picker .angle-down-icon .dijitSelect .dijitArrowButtonInner {
    background: url(./../img/ic-angle-small-down-gray.svg) no-repeat center !important;
    background-size: 20px !important;
    border: 0 !important;
}
#crb-security-questions-picker .angle-down-icon .dijitSelect.crbSelectOpen .dijitArrowButtonInner {
    background: url(./../img/ic_angle_small_up.svg) no-repeat center !important;
    background-size: 20px !important;
}

/* ----------------------------------------------------------
   5) Icono angle-down (CSS PLANO, no SCSS)
   - Para dijit.form.Select (flecha derecha)
   ---------------------------------------------------------- */

/* Define el ancho del área de la flecha (celda derecha) */
#recoverUserScreen .angle-down-icon .dijitSelect .dijitArrowButtonContainer{
    width: 44px;
}

/* Evita que el texto se meta debajo del área derecha */
#recoverUserScreen .angle-down-icon .dijitSelect .dijitButtonContents{
    padding-right: 44px;
}

/* Coloca tu SVG como icono de flecha */
#recoverUserScreen .angle-down-icon .dijitSelect .dijitArrowButtonInner{
    background: url(./../img/ic-angle-small-down-gray.svg) no-repeat center !important;
    background-size: 20px !important;
}

#recoverUserScreen .angle-down-icon .dijitSelect.crbSelectOpen .dijitArrowButtonInner{
    background: url(./../img/ic_angle_small_up.svg) no-repeat center !important;
    background-size: 20px !important;
}

/* Contenedor visual real: TABLE */
table.dijitMenuTable.crbSelectMenu,
table.dijitMenuTable.crb-security-questions-menu{
    background: #FFFFFF !important;                 /* fondo blanco */
    background-color: #FFFFFF !important;
    border: 1px solid #E6E6E6 !important;
    border-radius: 12px !important;                 /* contenedor ovalado 12px */
    padding: 10px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;                    /* recorta esquinas */
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Quitar highlight global (naranja/marrón) que aplican al TR */
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItem,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemHover,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemSelected,
table.dijitMenuTable.crbSelectMenu tr.dijitSelectSelectedOption,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemActive,
table.dijitMenuTable.crbSelectMenu .dijitMenuItem,
table.dijitMenuTable.crbSelectMenu .dijitMenuItemHover,
table.dijitMenuTable.crbSelectMenu .dijitMenuItemSelected,
table.dijitMenuTable.crbSelectMenu .dijitSelectSelectedOption,
table.dijitMenuTable.crbSelectMenu .dijitMenuItemActive,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItem,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemHover,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemSelected,
table.dijitMenuTable.crb-security-questions-menu tr.dijitSelectSelectedOption,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemActive,
table.dijitMenuTable.crb-security-questions-menu .dijitMenuItem,
table.dijitMenuTable.crb-security-questions-menu .dijitMenuItemHover,
table.dijitMenuTable.crb-security-questions-menu .dijitMenuItemSelected,
table.dijitMenuTable.crb-security-questions-menu .dijitSelectSelectedOption,
table.dijitMenuTable.crb-security-questions-menu .dijitMenuItemActive{
    background: transparent !important;
    background-color: transparent !important;
}

/* Label base de cada opción */
table.dijitMenuTable.crbSelectMenu td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu td.dijitMenuItemLabel{
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #2a2a33 !important;

    background: transparent !important;
    background-color: transparent !important;

    border-radius: 0 !important;                    /* sin hover: sin "pastilla" */
    font-weight: 700 !important;                    /* NEGRITA real */
}

/* Refuerzo extra por si el theme pisa el font-weight en hijos */
table.dijitMenuTable.crbSelectMenu td.dijitMenuItemLabel *,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItem *,
table.dijitMenuTable.crb-security-questions-menu td.dijitMenuItemLabel *,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItem *{
    font-weight: 700 !important;
    font-family: 'Open Sans';
}

/* Hover/Active/Selected: fondo gris claro */
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemHover td.dijitMenuItemLabel,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemActive td.dijitMenuItemLabel,
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemSelected td.dijitMenuItemLabel,
table.dijitMenuTable.crbSelectMenu tr.dijitSelectSelectedOption td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemHover td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemActive td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemSelected td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitSelectSelectedOption td.dijitMenuItemLabel{
    background: #E9E9E9 !important;
    background-color: #E9E9E9 !important;
    border-radius: 8px !important;
}

/* El seleccionado NO debe ponerse naranja */
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemSelected td.dijitMenuItemLabel,
table.dijitMenuTable.crbSelectMenu tr.dijitSelectSelectedOption td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemSelected td.dijitMenuItemLabel,
table.dijitMenuTable.crb-security-questions-menu tr.dijitSelectSelectedOption td.dijitMenuItemLabel{
    color: #2a2a33 !important;
}

/* Si el placeholder disabled "Seleccionar" está oculto con display:none,
   esto no afecta; si no lo ocultaras, aquí lo mantendrías legible */
table.dijitMenuTable.crbSelectMenu tr.dijitMenuItemDisabled,
table.dijitMenuTable.crb-security-questions-menu tr.dijitMenuItemDisabled{
    opacity: 1 !important; /* opcional: evita que se vea "apagado" si se mostrara */
}

/* (Opcional) si el theme trae un sprite o pseudo-elemento extra, lo neutralizas */
#recoverUserScreen .angle-down-icon .dijitSelect .dijitArrowButtonInner{
    border: 0 !important;
}
/* ===============================
   ZOOM SAFE – ESTABILIDAD GLOBAL
   =============================== */

html, body {
    height: 100%;
    overflow-x: hidden;
}

/* Evita saltos por bordes */
.dijitInputContainer,
.dijitButtonNode {
    box-sizing: border-box;
    border-width: 2px !important;
}

/* Botones no crecen con el texto */
.dijitButtonNode {
    width: 100%;
}

/* Imágenes del carrusel */
.bg-cover-slide {
    width: 100%;
    object-fit: cover;
}

/* Toggle password visibility - versión expandida para asegurar que se aplique */
.password-icon.show-password .dijitTextBox .dijitInputContainer {
    background-image: url(./../img/icon-eye-open.svg) !important;
}


.machineGrid .dojoxGrid {
    width: 100% !important;
}


.tmpuser-popup-tight-lines .opensans-normal-bunker-16px {
    margin: 0 !important;
}

.tmpuser-popup-tight-lines .flex.flex-col.gap-6.px-5 > p.opensans-normal-bunker-16px:nth-of-type(2) {
    margin-bottom: -25px !important;
}

.tmpuser-popup-tight-lines .flex.flex-col.gap-6.px-5 > p.opensans-normal-bunker-16px:nth-of-type(3) {
    margin-top: 0 !important;
}

#securityQuestionLabel{
    text-transform: lowercase !important;
}

#securityQuestionLabel::first-letter{
    text-transform: uppercase !important;
}

/* Estilos para SecurityQuestionsPicker - texto de select en minúsculas */
#crb-security-questions-picker .dijitSelect .dijitButtonText,
#crb-security-questions-picker .dijitSelect .dijitSelectLabel {
    text-transform: lowercase !important;
}

#crb-security-questions-picker .dijitSelect .dijitButtonText::first-letter,
#crb-security-questions-picker .dijitSelect .dijitSelectLabel::first-letter {
    text-transform: uppercase !important;
}

#secQModal .mb-8 { margin-bottom: 2rem !important; }

#machineMainContainer .title-welcome {
    flex-direction: column;
}

.bi-styled-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    li {
        display: grid;
        grid-template-columns: 9px auto;
        column-gap: 14px;
        &:before {
            content: "";
            display: block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--primaryprimary--700);
            margin-top: 8px;
        }
    }
}

.qr-wrapper {
    width: 225px;
    height: 225px;
    img {
        object-fit: cover;
        width: 100%;
        height: auto;
    }
}



#crb-create-userpass-wrapper .req-anim{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease;
    will-change: max-height, opacity, transform;
}
#crb-create-userpass-wrapper .req-anim.req-open{
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom:15px;
}


#crb-create-userpass-wrapper .input-widget{
    display: flex;
    flex-direction: column;
}

#crb-create-userpass-wrapper .input-widget > label{ order: 0; }

#crb-create-userpass-wrapper .input-widget > .dijitTextBox{ order: 1; }
#crb-create-userpass-wrapper .input-widget > table.fisaCmpMsgWrap{
    order: 1;
    width: 100%;
    margin: 0;
}

#crb-create-userpass-wrapper .input-widget > table.fisaCmpMsgWrap td:first-child{ width: 100%; }
#crb-create-userpass-wrapper .input-widget > table.fisaCmpMsgWrap td:last-child{
    width: 1%;
    white-space: nowrap;
}

#crb-create-userpass-wrapper .input-widget > .requirements-wrapper{ order: 3; }

#crb-create-userpass-wrapper .fisaCmpMsgWrap,
#crb-create-userpass-wrapper .fisaCmpMsgWrap tbody,
#crb-create-userpass-wrapper .fisaCmpMsgWrap tr,
#crb-create-userpass-wrapper .fisaCmpMsgWrap td{
    padding: 0 !important;
    border: 0 !important;
}

#crb-create-userpass-wrapper .dijitTextBox .dijitInputContainer{
    box-sizing: border-box !important;
    border-width: 2px !important;
}

#crb-create-userpass-wrapper #crb-newpwd-wrap .fisaValidTooltipRelative,
#crb-create-userpass-wrapper #crb-newpwd-wrap .fisaValidTooltip,
#crb-create-userpass-wrapper #crb-newpwd-wrap .fisaValidTooltipConnector,
#crb-create-userpass-wrapper #crb-newpwd-wrap .fisaValidTooltipContainer{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

#crb-create-userpass-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap .fisaValidTooltipRelative,
#crb-create-userpass-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap .fisaValidTooltip{
    display:none !important;
}


#crb-create-userpass-wrapper table.fisaCmpMsgWrap tr:has(.fisaValidTooltipRelative)
.dijitTextBox .dijitInputContainer{
    border-color: var(--error--400) !important;
}

#crb-create-userpass-wrapper table.fisaCmpMsgWrap tr:has(.fisaValidTooltipRelative)
.dijitTextBox{
    outline: none !important;
}

#crb-create-userpass-wrapper table.fisaCmpMsgWrap tr:has(.fisaValidTooltipRelative)
.dijitPlaceHolder{
    color: var(--error--400) !important;
    opacity: .75;
}


#crb-create-userpass-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap tr:has(.fisaValidTooltipRelative)
.dijitTextBox .dijitInputContainer{
    border-color: inherit !important;
}

#form-wrapper #crb-newpwd-wrap .fisaValidTooltipRelative,
#form-wrapper #crb-newpwd-wrap .fisaValidTooltip,
#form-wrapper #crb-newpwd-wrap .fisaValidTooltipConnector,
#form-wrapper #crb-newpwd-wrap .fisaValidTooltipContainer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#form-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap .fisaValidTooltipRelative,
#form-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap .fisaValidTooltip {
    display: none !important;
}

#form-wrapper #crb-newpwd-wrap table.fisaCmpMsgWrap tr:has(.fisaValidTooltipRelative)
.dijitTextBox .dijitInputContainer {
    border-color: inherit !important;
}

/* Estilos para animación de requisitos en userPasswdRecoveryStepThreeOne.jsp */
#form-wrapper .req-anim {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease;
    will-change: max-height, opacity, transform;
}
#form-wrapper .req-anim.req-open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 15px;
}

/* Estilos para dropdown de preguntas de seguridad */
#crb-security-questions-picker .dijitSelect {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    overflow: hidden !important;
    box-sizing: border-box;
    max-height: 48px !important;
    border: 1px solid var(--grey-400);
    border-radius: 8px !important;
    background: var(--defaultwhite);
    box-shadow: none;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: var(--font-sans);
    transition: border-color .3s cubic-bezier(0.4, 0, 0.2, 1),
    border-width .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Altura y box-model interno estable */
#crb-security-questions-picker .dijitSelect .dijitButtonContents,
#crb-security-questions-picker .dijitSelect .dijitButtonNode {
    height: 48px;
    box-sizing: border-box;
    background: transparent;
}

/* Refuerza border-radius por lados */
#crb-security-questions-picker .dijitSelect .dijitButtonContents {
    border-radius: 8px 0 0 8px;
    overflow: hidden !important;
}
#crb-security-questions-picker .dijitSelect .dijitButtonNode {
    border-radius: 0 8px 8px 0;
}

/* --- Estados: hover / focus --- */
#crb-security-questions-picker .dijitSelect.dijitHover,
#crb-security-questions-picker .dijitSelect.dijitSelectHover,
#crb-security-questions-picker .dijitSelect.dijitSelectFocused,
#crb-security-questions-picker .dijitSelect.dijitFocused {
    border-width: 2px !important;
    border-color: var(--primaryprimary--700) !important;
}

/* --- Estado: error --- */
#crb-security-questions-picker .dijitSelect.dijitError,
#crb-security-questions-picker .dijitSelect.dijitSelectError,
#crb-security-questions-picker .dijitSelect.fisaFieldError {
    border-width: 2px !important;
    border-color: var(--error--400) !important;
}

/* --- Ícono flecha (angle-down) --- */
#crb-security-questions-picker .angle-down-icon .dijitSelect .dijitArrowButtonContainer {
    width: 44px;
}
#crb-security-questions-picker .angle-down-icon .dijitSelect .dijitArrowButtonInner {
    background: url(./../img/ic-angle-small-down-gray.svg) no-repeat center !important;
    background-size: 20px !important;
    border: 0 !important;
}
#crb-security-questions-picker .angle-down-icon .dijitSelect.crbSelectOpen .dijitArrowButtonInner {
    background: url(./../img/ic_angle_small_up.svg) no-repeat center !important;
    background-size: 20px !important;
}

#crb-security-questions-picker .dijitSelect .dijitButtonText {
    display: block !important;
    overflow: hidden !important;
}
#crb-security-questions-picker .dijitSelect .dijitSelectLabel {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Menú dropdown específico para preguntas de seguridad */
.crb-security-questions-menu {
    width: 268px !important;
    max-width: 268px !important;
}
.crb-security-questions-menu .dijitMenuItemLabel {
    max-width: 260px !important;
    white-space: normal !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.crb-security-questions-menu::-webkit-scrollbar,
.crb-security-questions-menu *::-webkit-scrollbar {
    width: 4px;
}
.crb-security-questions-menu::-webkit-scrollbar-button,
.crb-security-questions-menu *::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
}
.crb-security-questions-menu::-webkit-scrollbar-thumb,
.crb-security-questions-menu *::-webkit-scrollbar-thumb {
    background: var(--grey--300);
    border-radius: 4px;
}

#unlockUserScreen .form-container.boxed {
    border-radius: 24px;
    max-height: 210px;
}

.unlock-success-text {
    font-size:14px;
}

#borderContainerTwo,
#fisaStandbyContainer,
.dijitTabContainer,
.dijitTabPaneWrapper,
.dijitTabContainerTopChildWrapper,
#dijit_layout_ContentPane_0,
#dijit_layout_ContentPane_1,
#machineMainContainer {
    width: 100% !important;
    max-width: none !important;
}

#machineMainContainer .dojoxGridScrollbox{
    overflow-x:hidden !important;
    overflow-y:hidden !important;
}

/* =========================================
   FIX RESPONSIVE SOLO PARA EL CARRUSEL LOGIN
   ========================================= */

#left-side {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 400px) {
    #left-side {
        padding-right: 4em;
    }
}

@media (min-width: 900px) {
    #left-side {
        padding-right: 5em;
    }
}

@media (min-width: 1200px) {
    #left-side {
        padding-right: 6em;
    }
}

#left-side .swiper {
    width: 100%;
    max-width: 669px;
    height: auto !important;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
}

#left-side .swiper-wrapper {
    width: 100%;
    height: auto !important;
}

#left-side .swiper-slide {
    width: 100%;
    height: auto !important;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#left-side .slide-content {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1400 / 2180;
    overflow: hidden;
    border-radius: 24px;
}

#left-side .bg-cover-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#left-side .brand {
    position: absolute;
    top: 6%;
    left: 6%;
    width: min(60%, 320px);
    aspect-ratio: 4.39;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    z-index: 2;
}

#left-side .bg-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(90px, 12%, 140px);
    z-index: 1;
}

#left-side .slide-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    height: clamp(100px, 24%, 240px);
    background-image: url("./../img/banner-detail.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    z-index: 1;
    pointer-events: none;
}

#left-side .swiper-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(16px, 3vw, 32px) !important;
    width: auto !important;
    max-width: calc(100% - 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    z-index: 3;
}

#left-side .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
#left-side .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px !important;
}

#left-side .swiper-pagination-bullet {
    flex: 0 0 auto;
}

@media (max-width: 1200px) {
    #left-side .swiper {
        max-width: 560px;
    }
}

@media (max-width: 1024px) {
    #left-side {
        max-width: 560px;
        margin: 0 auto;
    }
}


/* =========================================
   AJUSTE SOLO PARA ESTA JSP EN 2K / 4K
   Evita exceso de espacio entre izquierda y derecha
   ========================================= */

@media (min-width: 2200px) {
    #mainwindow > #mainContainer > #main-container {
        grid-template-columns: minmax(620px, 760px) minmax(490px, 490px) !important;
        justify-content: center;
        column-gap: clamp(32px, 4vw, 72px);
    }

    #mainwindow > #mainContainer > #main-container > #left-side {
        width: 100%;
        max-width: 760px;
        justify-self: end;
    }

    #mainwindow > #mainContainer > #main-container > #right-side {
        width: 100%;
        max-width: 490px;
        justify-self: start;
    }
}

@media (min-width: 3200px) {
    #mainwindow > #mainContainer > #main-container {
        grid-template-columns: minmax(680px, 820px) minmax(490px, 490px) !important;
        justify-content: center;
        column-gap: clamp(40px, 3vw, 80px);
    }

    #mainwindow > #mainContainer > #main-container > #left-side {
        max-width: 820px;
    }
}


/* Preparamos el escenario para contener el lienzo */
#mainwindow, #mainContainer {

    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* El lienzo fijo */
#mainContainer > [id="main-container login"] {

    width: 1536px !important;
    height: 1000px !important;
    min-width: 1536px !important;
    min-height: 1000px !important;
    flex-shrink: 0 !important; /* Evita que flexbox intente aplastarlo */

    transform-origin: center center !important;
    will-change: transform; /* Optimización de rendimiento */

    /* El resto de tu grid original */
    display: grid !important;
    grid-template-columns: 42% minmax(490px, 490px) !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 24px 32px !important;
}

/* Estilo blindado solo para esta sección */
.utilities-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important; /* Agrupa todo al centro */
    align-items: center !important;
    gap: 50px !important; /* Espacio simétrico entre los links y el divisor */
    width: 100% !important;
    margin: 0 auto !important;
}

.utilities-actions .cta-wrapper {
    /* Eliminamos el efecto de los anchos fijos */
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    display: flex !important;
    justify-content: center !important;
}

.utilities-actions .cta-link {
    white-space: normal !important; /* Permite el salto de línea como en tu imagen */
    text-align: center !important;
    max-width: 170px !important; /* Limita el ancho para forzar el salto de línea si es necesario */
    display: block !important;
}

.utilities-actions .divider_web {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Ajuste para que en pantallas muy pequeñas no se amontone */
@media (max-width: 480px) {
    .utilities-actions {
        gap: 10px !important;
    }
    .utilities-actions .cta-link {
        font-size: 13px !important;
    }
}


.dijitContentPaneLoading { visibility: hidden !important; }

#downloadAppModal { visibility: hidden !important; }
#downloadAppModal.opacity-100 { visibility: visible !important; }
.cnt-modal-card {background-clip: padding-box;}