/*======================================================
  STREAMING PERUANO CRM
  LOGIN
======================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
    -webkit-tap-highlight-color:transparent;
}

body{

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

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;

    background:
        radial-gradient(circle at 80% 80%, rgba(8,131,252,.18), transparent 30%),
        radial-gradient(circle at 20% 20%, rgba(45,73,243,.12), transparent 25%),
        linear-gradient(
            135deg,
            #05081d 0%,
            #08133b 35%,
            #0d1d63 70%,
            #1239b5 100%
       );

    background-size:140% 140%;

    animation:none;

}

/*--------------------------------------------------*/

.login-wrapper{

    width:100%;

    padding:30px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*--------------------------------------------------*/

.login-card{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    z-index:10;

    filter:drop-shadow(0 35px 70px rgba(8,131,252,.15));

    background:#ffffff;

    width:100%;

    max-width:460px;

    padding:50px 42px 42px;

    border-radius:14px;
    

    border:1px solid rgba(255,255,255,.45);

    box-shadow:
    0 30px 70px rgba(0,0,0,.28);

    animation:fadeUp .65s cubic-bezier(.19,1,.22,1);

    transform:translateY(-10px);

}

/*--------------------------------------------------
MARCA
--------------------------------------------------*/

.login-brand{

    text-align:center;

    margin-bottom:34px;

    user-select:none;

}

.brand-small{

    display:block;

    font-size:12px;

    font-weight:700;

    letter-spacing:6px;

    color:#e9790d;

    text-transform:uppercase;

    margin-bottom:12px;

}

.brand-title{

    position:relative;

    margin:0;

    font-size:58px;

    font-weight:800;

    line-height:1;

    letter-spacing:3px;

    color:#FFFFFF;

    background:linear-gradient(
        180deg,
        #2D49F3,
        #0883FC
    );

    background-clip:text;
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.brand-title::after{

    content:"";

    display:block;

    width:48px;

    height:2px;

    margin:16px auto 18px;

    background:#e9790d;

    border-radius:2px;

}

/*--------------------------------------------------*/

.login-subtitle{

    text-align:center;

    color:#8F9BAA;

    font-size:14px;

    margin-top:18px;

    margin-bottom:46px;

    user-select:none;

}

/*--------------------------------------------------*/

.form-label{

    font-weight:600;

    color:#3D4A57;

}

.form-label i{

    color:#e9790d;

    margin-right:6px;

}

/*--------------------------------------------------*/

.form-control{

    height:56px;

    border-radius:12px;

    border:1px solid #DCE6F2;

    background:#F8FAFD;

    padding:0 18px;

    font-size:15px;

    color:#263238;

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

    outline:none;

    font-weight:500;

}

.form-control:focus{

    background:#FFF;

    border-color:#2D49F3;

    box-shadow:
        0 0 0 4px rgba(45,73,243,.12);

}

.form-control::placeholder{

    color:#A5B0BC;

    font-weight:400;

}

/*--------------------------------------------------*/

.btn-login{

    width:100%;

    height:58px;

    cursor:pointer;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        90deg,
        #2D49F3,
        #0883FC
    );

    background-size:200% auto;

    color:#FFF;

    font-size:16px;

    font-weight:600;

    transition:
        background-position .35s,
        transform .30s,
        box-shadow .30s;

    letter-spacing:.3px;

    box-shadow:
        0 8px 20px rgba(45,73,243,.20);

    position:relative;

    overflow:hidden;

    will-change:transform;

}

.btn-login::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:50%;

    height:100%;

    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .7s;

}

.btn-login:hover{

    background-position:right center;

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(45,73,243,.35);

}

.btn-login:hover::before{

    left:150%;

}

.btn-login:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(45,73,243,.25),
        0 18px 35px rgba(45,73,243,.35);

}

/*--------------------------------------------------*/

.alert{

    border-radius:14px;

    font-size:14px;

}

/*--------------------------------------------------*/

.login-footer{

    text-align:center;

    margin-top:28px;

    color:#98A3AF;

    font-size:13px;

    user-select:none;

}

/*--------------------------------------------------*/

@keyframes backgroundMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/*--------------------------------------------------*/

@media(max-width:576px){

    .login-card{

        padding:35px 25px;

        border-radius:18px;

    }

    .brand-small{

        font-size:12px;

        letter-spacing:3px;

    }

    .brand-title{

        font-size:40px;

    }

    .login-subtitle{

        font-size:14px;

    }

}

/*==========================================
FONDO MODERNO
==========================================*/

body::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-500px;

    bottom:-450px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(8,131,252,.95) 0%,
            rgba(45,73,243,.85) 45%,
            transparent 72%);

}

body::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    left:-620px;

    top:-360px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(255,255,255,.03),
            rgba(45,73,243,.14),
            transparent 72%);

}

/*==========================================
PASSWORD
==========================================*/

.password-wrapper{

    position:relative;

}

.password-input{

    padding-right:55px;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    border:none;

    background:transparent;

    color:#7f8c8d;

    cursor:pointer;

    transition:
        color .25s,
        transform .25s;

    font-size:18px;

    will-change:transform;

}

.toggle-password:hover{

    color:#2D49F3;

    transform:translateY(-50%) scale(1.10);

}

.password-wrapper:focus-within .toggle-password{

    color:#2D49F3;

}

/*==========================================
ARCO AZUL
==========================================*/

.login-wrapper::before{

    content:"";

    position:absolute;

    width:1100px;

    height:1100px;

    border-radius:50%;

    right:-620px;

    bottom:-650px;

    border:2px solid rgba(17,217,181,.40);

    z-index:0;

}

.login-wrapper::after{

    content:"";

    position:absolute;

    width:920px;

    height:920px;

    border-radius:50%;

    right:-540px;

    bottom:-560px;

    border:1px solid rgba(8,131,252,.45);

    z-index:0;

}

.login-card::after{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#e9790d;

    left:-110px;

    bottom:60px;

    box-shadow:
        0 0 18px rgba(233,121,13,.45);

}

/*==========================================
PUNTOS IZQUIERDA
==========================================*/

.login-wrapper{

    position:relative;

}

.login-wrapper .dots-left{

    position:absolute;

    left:55px;

    top:180px;

    width:150px;

    height:150px;

    opacity:.45;

    background-image:radial-gradient(#4d7dff 1.8px, transparent 1.8px);

    background-size:18px 18px;

    z-index:0;

}

.login-wrapper .dots-right{

    position:absolute;

    right:70px;

    bottom:90px;

    width:150px;

    height:150px;

    opacity:.45;

    background-image:radial-gradient(#74b8ff 1.8px, transparent 1.8px);

    background-size:18px 18px;

    z-index:0;

}