:root {
    --total-dark: #405b9d;
    --total-blue: #16d8f9;
    --total-cyan: #2dc2e7;
    --total-turquoise: #28a9a5;

    --text-dark: #35415e;
    --text-light: #7b8499;

    --background: #f5f8fc;
    --border: #e4eaf1;
}


/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;

    font-family: 'Karla', sans-serif;

    background:
        linear-gradient(
            135deg,
            #f7fbfd 0%,
            #edf6fa 50%,
            #f8fafc 100%
        );

    color: var(--text-dark);

    overflow-x: hidden;
}


/* =====================================================
   LOGIN PAGE
===================================================== */

.login-page {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 40px 0;

    overflow: hidden;
}


/* DECORACIONES DE FONDO */

.login-decoration {
    position: absolute;

    transform: rotate(30deg);

    border-radius: 50px;

    pointer-events: none;
}

.decoration-one {
    width: 430px;
    height: 850px;

    top: -330px;
    left: -100px;

    background: linear-gradient(
        180deg,
        rgba(64, 229, 236, 0.45),
        rgba(22, 216, 249, 0.18)
    );
}

.decoration-two {
    width: 260px;
    height: 700px;

    bottom: -400px;
    right: -60px;

    background: linear-gradient(
        180deg,
        rgba(64, 91, 157, 0.10),
        rgba(22, 216, 249, 0.20)
    );
}


/* =====================================================
   TARJETA
===================================================== */

.login-card {
    position: relative;

    max-width: 1000px;

    margin: auto;

    background: #ffffff;

    border: none;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(38, 69, 106, 0.16);

    z-index: 10;
}


/* =====================================================
   SECCIÓN IZQUIERDA
===================================================== */

.login-brand-section{
    position:relative;

    min-height:570px;

    display:flex;

    padding:55px 45px;

    background:linear-gradient(
        145deg,
        #405b9d 0%,
        #2e75b4 35%,
        #19c7e5 70%,
        #42e3d3 100%
    );

    color:#fff;

    overflow:hidden;
}


/* Formas internas */

.login-brand-section::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 550px;

    background: rgba(255, 255, 255, 0.09);

    transform: rotate(30deg);

    top: -210px;
    right: -150px;

    border-radius: 60px;
}

.login-brand-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 500px;

    background: rgba(255, 255, 255, 0.06);

    transform: rotate(30deg);

    bottom: -330px;
    left: -100px;

    border-radius: 60px;
}

.brand-content{
    position:relative;
    z-index:2;

    width:100%;

    display:flex;
    flex-direction:column;

    justify-content:space-between;

    height:100%;
     padding-left:25px;
    padding-right:20px;
}

.login-logo {
    display: block;

    max-width: 240px;
    width: 100%;
    height: auto;

    margin-bottom: 30px;
}

.brand-divider{
    width:70px;
    height:5px;
    border-radius:20px;

    background:linear-gradient(
        90deg,
        #ffffff,
        rgba(255,255,255,.4)
    );

    margin-bottom:30px;
}


.brand-content h1{
    font-size:38px;
    line-height:1.15;
    font-weight:700;
    margin-bottom:18px;
}

.brand-content h1 span{
    font-weight:300;
}

.brand-content p {
    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 15px;
    line-height: 1.6;
}

/* =====================================================
   FORMULARIO
===================================================== */

.login-form-section {
    min-height: 570px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 70px;
}


.login-header {
    margin-bottom: 33px;
}


.login-small-title {
    display: block;

    margin-bottom: 7px;

    color: var(--total-turquoise);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.login-header h2 {
    margin-bottom: 8px;

    color: var(--total-dark);

    font-size: 31px;

    font-weight: 700;
}

.login-header p {
    margin: 0;

    color: var(--text-light);

    font-size: 14px;
}


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

.form-group {
    margin-bottom: 23px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #59647b;

    font-size: 13px;

    font-weight: 700;
}

.input-group-custom {
    position: relative;
}

.input-group-custom > i {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    color: #8c99ac;

    font-size: 20px;

    z-index: 5;
}


.input-group-custom .form-control {
    height: 52px;

    padding-left: 49px;
    padding-right: 45px;

    background: #f9fbfd;

    color: #45516b;

    border: 1px solid var(--border);

    border-radius: 9px;

    font-size: 14px;

    transition: all .2s ease;
}

.input-group-custom .form-control::placeholder {
    color: #adb6c4;
}

.input-group-custom .form-control:focus {
    background: #ffffff;

    border-color: var(--total-cyan);

    box-shadow:
        0 0 0 3px rgba(22, 216, 249, 0.12);
}


.input-group-custom:focus-within > i {
    color: var(--total-dark);
}


/* VER CONTRASEÑA */

.show-password {
    position: absolute;

    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    padding: 0;

    background: transparent;

    border: none;
    outline: none;

    color: #8c99ac;

    font-size: 20px;

    cursor: pointer;
}

.show-password:hover {
    color: var(--total-dark);
}

/* =====================================================
   BOTÓN
===================================================== */

.login-btn {
    height: 52px;

    margin-top: 10px;

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

    gap: 10px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #405b9d 0%,
            #3383bc 45%,
            #20bdd8 100%
        );

    border: none;

    border-radius: 9px;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
        0 10px 24px rgba(64, 91, 157, 0.20);

    transition: all .2s ease;
}


.login-btn:hover {
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 13px 30px rgba(64, 91, 157, 0.28);
}


.login-btn:active {
    transform: translateY(0);
}

.login-btn i {
    font-size: 19px;
}

/* =====================================================
   FOOTER
===================================================== */

.login-footer {
    margin-top: 38px;

    padding-top: 21px;

    border-top: 1px solid #eef1f5;

    text-align: center;
}

.login-footer p {
    margin-bottom: 3px;

    color: #68738a;

    font-size: 12px;
}


.login-footer > span {
    color: #a1a9b7;

    font-size: 11px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .login-form-section {
        padding: 50px;
    }

    .login-brand-section {
        padding: 45px 35px;
    }

}

@media (max-width: 767px) {

    .login-page {
        padding: 25px 15px;
    }

    .login-card {
        border-radius: 18px;
    }

    .login-brand-section {
        min-height: auto;

        padding: 35px 30px;
    }

    .login-logo {
        max-width: 230px;

        margin-bottom: 20px;
    }

    .brand-divider {
        margin-bottom: 18px;
    }

    .brand-content h1 {
        font-size: 24px;
    }

    .brand-content p {
        font-size: 14px;
    }

    .login-form-section {
        min-height: auto;

        padding: 40px 30px;
    }

    .login-header h2 {
        font-size: 27px;
    }

}

@media (max-width: 420px) {

    .login-page {
        padding: 15px 10px;
    }

    .login-brand-section {
        padding: 30px 23px;
    }

    .login-form-section {
        padding: 35px 23px;
    }

    .brand-content h1 {
        font-size: 22px;
    }

}

.brand-content h1,
.brand-content p{

    padding-left:25px;
}