/* ============================================================
   AMX TELECOM - LOGIN
   ============================================================ */


.login-body {

    margin: 0;

    min-height: 100vh;

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

    background: #f6f9fd;

}


.login-background {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(26, 124, 221, 0.09),
            transparent 27%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(26, 124, 221, 0.08),
            transparent 30%
        ),

        #f6f9fd;

}


.login-container {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 520px;

    padding: 30px;

    box-sizing: border-box;

}


.login-box {

    position: relative;

    overflow: hidden;

    box-sizing: border-box;

    padding:

        38px
        44px
        34px
        44px;

    border-radius: 18px;

    background:

        linear-gradient(
            145deg,
            #073a6c 0%,
            #032b51 50%,
            #064c87 100%
        );

    box-shadow:

        0 22px 55px
        rgba(
            1,
            31,
            60,
            0.25
        );

}


.login-box::before {

    content: "";

    position: absolute;

    top: -150px;

    right: -140px;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background:

        rgba(
            22,
            126,
            226,
            0.13
        );

}


.login-box::after {

    content: "";

    position: absolute;

    bottom: -180px;

    left: -160px;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background:

        rgba(
            0,
            88,
            173,
            0.18
        );

}


.login-logo {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}


.login-logo-img {

    display: block;

    width: 240px;

    max-width: 80%;

    height: auto;

    object-fit: contain;

}


.login-subtitulo {

    position: relative;

    z-index: 2;

    margin-bottom: 34px;

    text-align: center;

    color: #d7e5f3;

    font-size: 19px;

    font-weight: 400;

}


.login-campo {

    position: relative;

    z-index: 2;

    margin-bottom: 22px;

}


.login-campo label {

    display: block;

    margin-bottom: 9px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

}


.login-input-container {

    position: relative;

    display: flex;

    align-items: center;

}


.login-input-icon {

    position: absolute;

    left: 17px;

    z-index: 3;

    width: 22px;

    display: flex;

    justify-content: center;

    color: #59718b;

    font-size: 18px;

    pointer-events: none;

}


.login-input-container input {

    width: 100%;

    height: 58px;

    box-sizing: border-box;

    padding:

        0
        18px
        0
        52px;

    border:

        1px solid
        #d6dee8;

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #263b50;

    font-size: 16px;

    transition:

        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.login-input-container input::placeholder {

    color: #8998a9;

}


.login-input-container input:focus {

    border-color: #2596f5;

    box-shadow:

        0 0 0 3px
        rgba(
            37,
            150,
            245,
            0.18
        );

}


.login-botao {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 60px;

    margin-top: 8px;

    border: 0;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    background:

        linear-gradient(
            90deg,
            #20a3f6 0%,
            #1479f3 100%
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:

        0 8px 20px
        rgba(
            17,
            117,
            235,
            0.25
        );

    transition:

        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.login-botao:hover {

    transform: translateY(-1px);

    box-shadow:

        0 11px 25px
        rgba(
            17,
            117,
            235,
            0.35
        );

}


.login-botao-seta {

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

}


.login-footer {

    position: relative;

    z-index: 2;

    margin-top: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    color: #92abc3;

    font-size: 12px;

}


.login-footer-linha {

    width: 55px;

    height: 1px;

    background:

        rgba(
            146,
            171,
            195,
            0.50
        );

}


.login-erro {

    position: relative;

    z-index: 2;

    margin-bottom: 20px;

    padding: 12px 15px;

    border-radius: 8px;

    background: #fee4e2;

    color: #b42318;

    font-size: 14px;

}


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


@media (
    max-width: 600px
) {

    .login-container {

        padding: 18px;

    }


    .login-box {

        padding:

            30px
            24px
            27px
            24px;

        border-radius: 15px;

    }


    .login-logo-img {

        width: 205px;

    }


    .login-subtitulo {

        font-size: 17px;

        margin-bottom: 28px;

    }


    .login-input-container input {

        height: 55px;

    }


    .login-footer {

        margin-top: 30px;

    }

}