body, html {
    width: 100%;
    height: 100%;
    position: relative;
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("/images/login/bg-login-dark.svg");
        background-size: cover;
        background-position: center;
        /*filter: blur(2px);*/
        z-index: -1;
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        /*background-color: #000a23a1;*/
        mix-blend-mode: multiply;
        z-index: -1;
    }

.container {
    width: 100%;
    height: 100%;
    margin-top: 0px !important;
}

main {
    width: 100%;
    height: 100%;
}

.login-container {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.card-header {
    padding: 1.6rem 1.9em;
    padding-bottom: 7px;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: unset;
}

.card-body {
    padding: 1rem 1.9rem;
}

.card-title {
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.33;
}

.form-control {
    height: 2.7rem;
    color: #262626;
    padding: 10.5px 14px 10.5px 12px;
    font-size: 14px;
}

    .form-control:focus {
        box-shadow: rgba(22, 119, 255, 0.2) 0px 0px 0px 2px;
    }    

    .form-control:hover {
        border-color: #86b7fe;
    }

.btn:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem transparent !important;
}

.btn-primary {
    transition: transform 0.1s ease-in-out;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: scaleX(1.01) scaleY(1.03);
    }

    .btn-primary:focus {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .btn-primary:active {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: scale(0.98, 0.98);
    }

.btn-secondary {
    color: #292929;
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    transition: transform 0.1s ease-in-out;
}

    .btn-secondary:hover {
        color: #292929;
        background-color: #e9e9e9;
        border-color: #e9e9e9;
        transform: scaleX(1.01) scaleY(1.03);
    }

    .btn-secondary:active {
        color: #292929;
        background-color: #e9e9e9;
        border-color: #e9e9e9;
        transform: scale(0.98, 0.98);
    }

.form-text {
    margin: 0px;
    font-size: 14px;
    line-height: 1.57;
    text-decoration: none;
    color: #414141;
}

    .form-text:hover {
        color: #414141;
        cursor: pointer;
        text-decoration: underline;
    }

.spinner-border {
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    display: inline-block;
    vertical-align: text-bottom;
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

#codigo-verificacion .digit-input {
    width: 40px;
    font-size: 14px;
    text-align: center;
}

/* Ajustar padding para el input de contraseña */
#passwordInput {
    padding-right: 2.5rem; /* coincide con pe-5 (~3rem) */
}

/* Opcional: cambiar color del ícono */
#togglePassword {
    color: #6c757d;
}

    #togglePassword:hover {
        color: #495057;
    }