/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at center,
            #f8fafc 0%,
            #e9edf3 55%,
            #dfe5ee 100%
        );

    color: #26354a;

    overflow: hidden;
}


/* =====================================================
   FUNDO
===================================================== */

.background-logo {
    position: fixed;

    pointer-events: none;

    opacity: 0.035;

    z-index: 0;
}


.background-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: invert(20%);
}


.background-logo-top {
    width: 300px;
    height: 300px;

    top: 90px;
    right: 20%;
}


.background-logo-bottom {
    width: 280px;
    height: 280px;

    bottom: -40px;
    left: 28%;
}


/* =====================================================
   WRAPPER
===================================================== */

.login-wrapper {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

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

    position: relative;

    z-index: 1;

    padding-bottom: 25px;

}


/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

.login-container {

    width: 625px;
    height: 505px;

    display: grid;

    grid-template-columns: 46% 54%;

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(34, 49, 75, 0.16);

}


/* =====================================================
   LADO ESQUERDO
===================================================== */

.login-brand {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            #071c2c,
            #0c2a41
        );

    color: #ffffff;

}


.brand-content {

    position: relative;

    z-index: 3;

    padding:

        30px
        28px;

}


.brand-logo {

    width: 46px;
    height: 46px;

    margin-bottom: 8px;

}


.brand-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =====================================================
   BRAND NAME
===================================================== */

.brand-name {

    font-size: 22px;

    letter-spacing: 0.2px;

    margin-bottom: 7px;

}


.brand-name strong {

    font-weight: 800;

}


.brand-name span {

    font-weight: 400;

    opacity: 0.9;

}


/* =====================================================
   DESCRIÇÃO
===================================================== */

.brand-description {

    font-size: 12px;

    line-height: 1.5;

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

}


/* =====================================================
   LINHA
===================================================== */

.brand-line {

    width: 20px;
    height: 2px;

    margin:

        12px
        0;

    background: #2c7de9;

}


/* =====================================================
   FEATURES
===================================================== */

.brand-features {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.brand-feature {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 14px;

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

}


.brand-feature i {

    width: 10px;

    color: #d7e6f5;

    font-size: 9px;

}


/* =====================================================
   IMAGEM DO EDIFÍCIO
===================================================== */

.brand-image {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 155px;

    background-image:

        linear-gradient(
            to top,
            rgba(4, 14, 24, 0.20),
            rgba(4, 14, 24, 0.02)
        ),

        url("../images/login/egmosil-building.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0.8;

}


/* =====================================================
   RODAPÉ BRAND
===================================================== */

.brand-footer {

    position: absolute;

    left: 20px;
    bottom: 16px;

    z-index: 4;

    font-size: 9px;

    line-height: 1.8;

    letter-spacing: 2px;

    font-weight: 700;

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

}


/* =====================================================
   LADO DIREITO
===================================================== */

.login-form-area {

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

}


.login-form-content {

    width: 100%;

    padding:

        32px
        30px;

}


/* =====================================================
   HEADER
===================================================== */

.welcome-label {

    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.6px;

    color: #728198;

}


.login-header h1 {

    font-size: 22px;

    font-weight: 800;

    color: #202d40;

    margin-bottom: 26px;
    

}


.login-header p {

    font-size: 12px;

    line-height: 1.5;

    color: #6c7a8e;

    margin-bottom: 22px;

}


/* =====================================================
   ALERTAS
===================================================== */

.login-alert {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 10px;

    border-radius: 6px;

    margin-bottom: 15px;

    font-size: 12px;

}


.login-alert.success {

    background: #edf8f1;

    color: #27714b;

}


.login-alert.error {

    background: #fff0f0;

    color: #b63b3b;

}


/* =====================================================
   FORM GROUP
===================================================== */

.form-group {

    margin-bottom: 15px;

}


.form-group label {

    display: block;

    margin-bottom: 6px;

    font-size: 14px;

    font-weight: 700;

    color: #354358;

}


/* =====================================================
   INPUT
===================================================== */

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


.input-wrapper > i {

    position: absolute;

    left: 13px;

    color: #7e8b9c;

    font-size: 10px;

}


.input-wrapper input {

    width: 100%;

    height: 38px;

    padding:

        0
        38px
        0
        34px;

    border:

        1px solid #d7dde6;

    border-radius: 8px;

    background: #ffffff;

    outline: none;

    font-size: 14px;

    color: #344156;

    transition: 0.2s;

}


.input-wrapper input::placeholder {

    color: #97a2b1;

}


.input-wrapper input:focus {

    border-color: #4775d1;

    box-shadow:

        0 0 0 3px

        rgba(71,117,209,0.10);

}


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

.toggle-password {

    position: absolute;

    right: 10px;

    border: none;

    background: transparent;

    cursor: pointer;

    color: #7f8c9d;

    font-size: 10px;

}


/* =====================================================
   OPÇÕES
===================================================== */

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:

        0
        0
        16px;

}


/* CHECKBOX */

.remember-me {

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 10px;

    color: #67758a;

}


.remember-me input {

    display: none;

}


.custom-checkbox {

    width: 11px;
    height: 11px;

    border:

        1px solid #cbd3df;

    border-radius: 3px;

    background: white;

}


.remember-me input:checked
+ .custom-checkbox {

    background: #2868c7;

    border-color: #2868c7;

}


/* ESQUECI-ME PASSWORD */

.forgot-password {

    font-size: 9px;

    font-weight: 600;

    color: #356ac1;

    text-decoration: none;

}


.forgot-password:hover {

    text-decoration: underline;

}


/* =====================================================
   BOTÃO
===================================================== */

.login-button {

    width: 100%;
    height: 40px;

    display: flex;

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

    gap: 13px;

    border: none;

    border-radius: 7px;

    background:

        linear-gradient(
            135deg,
            #1e67c7,
            #2364bd
        );

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;

    box-shadow:

        0 8px 18px

        rgba(31,99,191,0.20);

}


.login-button:hover {

    transform: translateY(-1px);

    box-shadow:

        0 11px 22px

        rgba(31,99,191,0.28);

}


.login-button i {

    font-size: 10px;

}


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

.login-footer {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 16px;

    font-size: 10px;

    color: #77859a;

}


.footer-dot {

    color: #aab3bf;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 700px) {

    body {
        overflow-y: auto;
    }


    .login-wrapper {

        padding:

            30px
            15px;

    }


    .login-container {

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

        height: auto;

        grid-template-columns: 1fr;

    }


    .login-brand {

        min-height: 220px;

    }


    .brand-image {

        height: 130px;

    }


    .login-form-content {

        padding: 30px 25px;

    }


    .background-logo {

        display: none;

    }

}