:root {

    /*
     * Identidade Estratégia
     */

    --estrategia-red: #d40012;
    --estrategia-red-hover: #b80010;
    --estrategia-red-soft: #fff2f3;

    --graphite-950: #242426;
    --graphite-900: #2d2d2f;
    --graphite-850: #333335;
    --graphite-800: #39393b;
    --graphite-700: #4a4a4d;

    --gray-700: #55585d;
    --gray-600: #6b6e73;
    --gray-500: #8b8e94;
    --gray-400: #b2b5ba;
    --gray-300: #d4d6da;
    --gray-200: #e5e7ea;
    --gray-100: #f3f4f5;
    --gray-050: #f8f9fa;

    --white: #ffffff;

    --text-primary: #2b2c2f;
    --text-secondary: #74777d;

    --shadow:
        0 24px 65px rgba(25, 28, 34, 0.10);

}


/*
 * Reset
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {

    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text-primary);

    background: var(--gray-050);

    -webkit-font-smoothing: antialiased;

}


/*
 * Estrutura principal
 */

.login-layout {

    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(460px, 47%)
        minmax(480px, 53%);

}


/*
 * Painel esquerdo
 */

.brand-panel {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--graphite-950) 0%,
            var(--graphite-900) 50%,
            var(--graphite-800) 100%
        );

}


/*
 * Pequeno brilho para quebrar
 * o fundo totalmente chapado.
 */

.brand-panel::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -180px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.055) 0%,
            rgba(255,255,255,0) 70%
        );

}


/*
 * Elementos vermelhos discretos.
 */

.brand-decoration {

    position: absolute;

    background:
        var(--estrategia-red);

    opacity: 0.95;

}

.decoration-one {

    width: 6px;
    height: 160px;

    left: 0;
    top: 18%;

}

.decoration-two {

    width: 180px;
    height: 3px;

    right: -60px;
    bottom: 22%;

    opacity: 0.35;

}


/*
 * Conteúdo do painel esquerdo
 */

.brand-container {

    position: relative;
    z-index: 2;

    min-height: 100vh;

    padding:
        clamp(44px, 5vw, 84px)
        clamp(48px, 6vw, 100px);

    display: flex;
    flex-direction: column;

}

.brand-header {

    display: flex;
    align-items: center;

}

.brand-logo {

    display: block;

    width:
        clamp(230px, 21vw, 340px);

    max-height: 100px;

    object-fit: contain;

    object-position: left center;

}

.brand-main {

    max-width: 600px;

    margin-top: auto;
    margin-bottom: auto;

}

.portal-label {

    display: inline-flex;

    align-items: center;

    margin-bottom: 24px;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 6px;

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

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.6px;

}

.brand-main h1 {

    margin:
        0 0 26px;

    color: white;

    font-size:
        clamp(46px, 5vw, 74px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing:
        -2.6px;

}

.brand-main h1::after {

    content: "";

    display: block;

    width: 60px;
    height: 4px;

    margin-top: 28px;

    border-radius: 2px;

    background:
        var(--estrategia-red);

}

.brand-main p {

    max-width: 510px;

    margin: 0;

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

    font-size:
        clamp(17px, 1.5vw, 21px);

    line-height: 1.6;

}

.brand-footer {

    display: flex;
    align-items: center;

    gap: 15px;

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

    font-size: 12px;

}

.brand-footer-line {

    width: 26px;
    height: 2px;

    background:
        var(--estrategia-red);

}


/*
 * Painel direito
 */

.login-panel {

    position: relative;

    min-height: 100vh;

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

    padding:
        clamp(35px, 6vw, 90px);

    background:
        radial-gradient(
            circle at 100% 0%,
            #ffffff 0%,
            transparent 35%
        ),
        var(--gray-050);

}


/*
 * Detalhe discreto atrás
 * da caixa.
 */

.login-panel::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -160px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(212, 0, 18, 0.025);

}

.login-container {

    position: relative;
    z-index: 2;

    width: 100%;

    max-width: 480px;

}

.login-card {

    width: 100%;

    padding:
        46px 48px 30px;

    border:
        1px solid
        var(--gray-200);

    border-radius: 18px;

    background: white;

    box-shadow:
        var(--shadow);

}


/*
 * Cabeçalho do login
 */

.login-header {

    margin-bottom: 35px;

}

.login-logo {

    display: block;

    width: 210px;
    max-height: 72px;

    margin-bottom: 28px;

    object-fit: contain;

    object-position: left center;

}

.portal-name {

    margin-bottom: 9px;

    color:
        var(--estrategia-red);

    font-size: 12px;

    font-weight: 750;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.login-header h2 {

    margin:
        0 0 10px;

    color:
        var(--text-primary);

    font-size: 31px;

    line-height: 1.15;

    letter-spacing:
        -0.8px;

}

.login-header p {

    max-width: 370px;

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 14px;

    line-height: 1.55;

}


/*
 * Mensagens
 */

.alert {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 23px;

    padding:
        13px 14px;

    border:
        1px solid #efc5c8;

    border-radius: 8px;

    background:
        var(--estrategia-red-soft);

    color: #a3121e;

    font-size: 13px;

}

.alert-icon {

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background:
        var(--estrategia-red);

    color: white;

    font-size: 12px;
    font-weight: 800;

}


/*
 * Campos
 */

.form-field {

    margin-bottom: 20px;

}

.form-field label {

    display: block;

    margin-bottom: 8px;

    color:
        #4b4d52;

    font-size: 13px;

    font-weight: 650;

}

.field-header {

    display: flex;
    justify-content: space-between;

}

.input-container {

    position: relative;

}

.input-container input {

    width: 100%;
    height: 54px;

    padding:
        0 47px;

    border:
        1px solid
        var(--gray-300);

    border-radius: 8px;

    outline: none;

    background:
        #fcfcfd;

    color:
        var(--text-primary);

    font-family: inherit;

    font-size: 15px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;

}

.input-container input::placeholder {

    color:
        #a6a8ad;

}

.input-container input:hover {

    border-color:
        #bfc1c6;

}

.input-container input:focus {

    border-color:
        var(--estrategia-red);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(212, 0, 18, 0.075);

}

.input-icon {

    position: absolute;

    left: 16px;
    top: 50%;

    display: flex;

    transform:
        translateY(-50%);

    color:
        #82858b;

    pointer-events: none;

}

.password-toggle {

    position: absolute;

    right: 9px;
    top: 50%;

    width: 36px;
    height: 36px;

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

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 6px;

    background: transparent;

    color:
        #74777d;

    cursor: pointer;

}

.password-toggle:hover {

    background:
        var(--gray-100);

    color:
        var(--graphite-800);

}


/*
 * Opções
 */

.login-options {

    margin:
        4px 0 27px;

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

    gap: 20px;

    font-size: 13px;

}

.remember-option {

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--gray-600);

}

.remember-option input {

    accent-color:
        var(--estrategia-red);

}

.forgot-password {

    color:
        var(--estrategia-red);

    opacity: 0.55;

}


/*
 * Botão
 */

.login-button {

    width: 100%;
    height: 55px;

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

    gap: 12px;

    border: none;

    border-radius: 8px;

    background:
        var(--estrategia-red);

    color: white;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(212, 0, 18, 0.17);

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;

}

.login-button:hover {

    background:
        var(--estrategia-red-hover);

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 25px
        rgba(212, 0, 18, 0.22);

}

.login-button:active {

    transform:
        translateY(0);

}


/*
 * Rodapé
 */

.login-footer {

    margin-top: 32px;

    padding-top: 22px;

    border-top:
        1px solid
        var(--gray-200);

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

    gap: 16px;

    color:
        var(--gray-500);

    font-size: 11px;

}

.security-indicator {

    display: flex;
    align-items: center;

    gap: 7px;

}

.security-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #3caf6b;

}


/*
 * Tablet / notebook menor
 */

@media (
    max-width: 1050px
) {

    .login-layout {

        grid-template-columns:
            42%
            58%;

    }

    .brand-container {

        padding:
            45px;

    }

    .brand-main h1 {

        font-size:
            48px;

    }

}


/*
 * Mobile
 */

@media (
    max-width: 820px
) {

    .login-layout {

        display: block;

    }

    .brand-panel {

        display: none;

    }

    .login-panel {

        min-height: 100vh;

        padding:
            26px 20px;

        background:
            linear-gradient(
                to bottom,
                var(--graphite-900) 0,
                var(--graphite-900) 180px,
                var(--gray-050) 180px,
                var(--gray-050) 100%
            );

    }

    .login-container {

        max-width:
            460px;

    }

    .login-card {

        padding:
            36px 30px 26px;

        border-radius:
            15px;

    }

    .login-logo {

        width:
            190px;

        margin-bottom:
            28px;

    }

}


/*
 * Celulares pequenos
 */

@media (
    max-width: 480px
) {

    .login-panel {

        padding:
            20px 14px;

    }

    .login-card {

        padding:
            31px 22px 24px;

    }

    .login-header h2 {

        font-size:
            27px;

    }

    .login-options {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }

    .login-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}