:root{

    --cst-primary:#002b3b;
    --cst-primary-hover:#003d54;

    --cst-bg:#f5f7fb;
    --cst-card:#ffffff;
    --cst-border:#e6ebf2;

    --cst-text:#1f2937;
    --cst-muted:#6b7280;

    --cst-input:#f8f9fc;

}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body.login-campus-body{

    font-family:"Segoe UI",Roboto,Arial,sans-serif;

    background:
        radial-gradient(circle at top left,rgba(0,43,59,.08),transparent 35%),
        radial-gradient(circle at bottom right,rgba(0,43,59,.05),transparent 30%),
        linear-gradient(135deg,#f8f9fc 0%,#eef2f7 100%);

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

    overflow:hidden;

}

/*==================================================
CARD
==================================================*/

.login-campus-wrapper{

    width:100%;
    max-width:520px;

    padding:20px;

}

.login-campus-card{

    position:relative;

    background:#fff;

    border-radius:28px;

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

    padding:120px 40px 35px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08),

        0 10px 20px rgba(0,43,59,.05);

    overflow:visible;

    margin-top: 50px;

}

.login-campus-card:before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:8px;

    background:#002b3b;

    border-radius:28px 28px 0 0;

}

/*==================================================
LOGO
==================================================*/

.login-campus-logo{

    position:absolute;

    left:50%;

    top:-85px;

    transform:translateX(-50%);

}

.login-campus-logo-circle{

    width:180px;
    height:180px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:22px;

    border:1px solid #edf1f5;

    box-shadow:

        0 15px 40px rgba(0,0,0,.10),

        0 0 0 12px rgba(255,255,255,.55);

}

.login-campus-logo-circle img{

    width:100%;
    height:auto;

    object-fit:contain;

}

.login-campus-logo img{

    width:180px;
    height:180px;

    border-radius:50%;

    object-fit:cover;

}

/*==================================================
TITULO
==================================================*/

.login-campus-header{

    text-align:center;

    margin-bottom:30px;

}

.login-campus-header h1{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:#002b3b;

}

.login-campus-header p{

    margin-top:8px;

    color:#6b7280;

    font-size:14px;

}

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

.form-group{

    margin-bottom:18px;

}

.form-group label{

    color:#002b3b;

    font-weight:600;

    font-size:13px;

    margin-bottom:8px;

}

/*==================================================
INPUTS
==================================================*/

.login-campus-input{

    height:50px;

    border-radius:15px;

    background:#f8f9fc;

    border:1px solid #dfe6ef;

    font-size:15px;

    font-weight:600;

    color:#002b3b;

    transition:.25s;

    box-shadow:none!important;

    letter-spacing:.2px;

}

.login-campus-input::placeholder{

    color:#7b8794;

    font-weight:500;

    opacity:1;

}

.login-campus-input:focus{

    background:#fff;

    border-color:#002b3b;

    box-shadow:0 0 0 .18rem rgba(0,43,59,.12)!important;

}

/*==================================================
BOTON
==================================================*/

.login-campus-btn{

    height:52px;

    margin-top:10px;

    border-radius:15px;

    background:#002b3b!important;

    border-color:#002b3b!important;

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.25s;

    box-shadow:

        0 10px 22px rgba(0,43,59,.18);

}

.login-campus-btn:hover{

    background:#003d54!important;

    border-color:#003d54!important;

    transform:translateY(-2px);

    box-shadow:

        0 15px 28px rgba(0,43,59,.22);

}

/*==================================================
COPYRIGHT
==================================================*/

.login-campus-copy{

    text-align:center;

    margin-top:28px;

    margin-bottom:0;

    color:#6b7280;

    font-size:13px;

}

/*==================================================
ALERTA
==================================================*/

.login-campus-alert{

    margin-top:20px;

    border-radius:15px;

}

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

@media(max-width:576px){

    .login-campus-wrapper{

        padding:18px;

    }

    .login-campus-card{

        padding:105px 25px 28px;

        border-radius:22px;

    }

    .login-campus-logo{

        top:-72px;

    }

    .login-campus-logo-circle{

        width:150px;
        height:150px;

        padding:18px;

    }

    .login-campus-header h1{

        font-size:25px;

    }

}

.login-campus-version{

    display:inline-block;

    margin-top:12px;

    padding:6px 14px;

    background:#eef5f8;

    color:#002b3b;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}