body{

    margin:0;
    padding:0;

    min-height:100vh;

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

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background:
    linear-gradient(
        135deg,
        #0f172a 0%,
        #1e293b 45%,
        #334155 100%
    );

    overflow:hidden;
}

/* EFECTO FONDO */

body::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(37,99,235,0.18);

    border-radius:50%;

    top:-120px;
    left:-120px;

    filter:blur(80px);
}

body::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:rgba(14,165,233,0.15);

    border-radius:50%;

    bottom:-120px;
    right:-120px;

    filter:blur(90px);
}

/* LOGIN CARD */

.login-card{

    position:relative;

    z-index:2;

    width:420px;

    border:none;

    border-radius:24px;

    overflow:hidden;

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

    backdrop-filter:blur(10px);

    box-shadow:
    0 15px 40px rgba(0,0,0,0.35);
}

/* HEADER */

.login-header{

    background:
    linear-gradient(
        135deg,
        #111827,
        #1e293b
    );

    color:white;

    padding:35px 25px;

    text-align:center;
}

.logo-circle{

    width:85px;
    height:85px;

    margin:auto;
    margin-bottom:15px;

    border-radius:50%;

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

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    box-shadow:
    0 6px 20px rgba(37,99,235,0.4);
}

.logo-circle i{

    font-size:38px;
    color:white;
}

.login-header h3{

    margin:0;
    font-weight:bold;
}

.login-header p{

    margin-top:8px;
    font-size:14px;
    opacity:0.8;
}

/* BODY */

.login-body{

    padding:35px 30px;
}

/* LABELS */

.form-label{

    font-weight:600;

    color:#111827;

    margin-bottom:8px;
}

/* INPUTS */

.form-control,
.form-select{

    height:50px;

    border-radius:14px;

    border:1px solid #d1d5db;

    padding-left:15px;

    font-size:15px;

    transition:0.3s;
}

.form-control:focus,
.form-select:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.15);
}

/* ICON INPUT */

.input-group-text{

    border-radius:14px 0 0 14px;

    border:1px solid #d1d5db;

    background:#f8fafc;

    color:#2563eb;

    font-size:18px;
}

/* BOTON */

.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    font-size:16px;
    font-weight:600;

    color:white;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    transition:0.3s;
}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:
    0 8px 20px rgba(37,99,235,0.35);
}

/* FOOTER */

.login-footer{

    text-align:center;

    padding:15px;

    color:#64748b;

    font-size:13px;
}

/* RESPONSIVE */

@media(max-width:500px){

    .login-card{

        width:92%;
    }

    .login-body{

        padding:25px 20px;
    }
}