:root {
    --brand-dark: #00393f;
    --brand-middle: #006f79;
    --brand-light: #07aabd;

    --primary: #08b8c7;
    --primary-dark: #008c99;

    --accent-purple: #8f45c7;
    --accent-purple-light: #bb6be6;

    --background: #ffffff;
    --surface: #ffffff;
    --input-background: #f8fafb;

    --text: #092036;
    --text-secondary: #71808d;
    --text-light: #9aa8b2;

    --border: #d8e3e8;
    --border-focus: #0bb7c6;

    --danger: #c83b3b;
    --danger-background: #fff1f1;
    --danger-border: #f1c5c5;

    --success: #127a55;
    --success-background: #ecfaf4;
    --success-border: #bfe8d7;

    --shadow:
        0 1.5rem 3rem
        rgba(18, 48, 61, 0.08);

    --radius: 0.85rem;
}

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

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

html {
    font-size: 16px;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);
    color: var(--text);

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   ESTRUTURA
========================================================= */

.login-page {
    width: 100%;
    min-height: 100vh;

    display: grid;
    grid-template-columns:
        minmax(32rem, 1.08fr)
        minmax(34rem, 0.92fr);
}


/* =========================================================
   PAINEL ESQUERDO
========================================================= */

.login-brand {
    position: relative;

    min-height: 100vh;

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

    padding: clamp(2.5rem, 5vw, 6rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(187, 107, 230, 0.14),
            transparent 21%
        ),
        radial-gradient(
            circle at 9% 82%,
            rgba(143, 69, 199, 0.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 10% 0%,
            rgba(0, 215, 226, 0.13),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--brand-dark) 0%,
            #005760 52%,
            var(--brand-light) 135%
        );

    color: #ffffff;
}

.brand-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.16;
}

.brand-decoration-one {
    width: 28rem;
    height: 28rem;

    right: -16rem;
    bottom: -11rem;

    border:
        0.08rem solid
        rgba(187, 107, 230, 0.72);

    box-shadow:
        0 0 3rem
        rgba(143, 69, 199, 0.16);

    opacity: 0.34;
}

.brand-decoration-two {
    width: 18rem;
    height: 18rem;

    left: -10rem;
    top: -8rem;

    background:
        radial-gradient(
            circle,
            rgba(187, 107, 230, 0.34),
            transparent 70%
        );

    opacity: 0.3;
}

.brand-content {
    position: relative;
    z-index: 2;

    width: min(100%, 38rem);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.brand-logo {
    width: clamp(11rem, 14vw, 15rem);
    max-width: 65%;

    height: auto;

    object-fit: contain;
}

.brand-badge {
    margin-top: 1.4rem;

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

    min-height: 2rem;

    padding: 0.35rem 1rem;

    border:
        0.08rem solid
        rgba(255, 255, 255, 0.42);

    border-radius: 99rem;

    box-shadow:
        0 0 1.35rem
        rgba(187, 107, 230, 0.12);

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.brand-badge::before {
    content: "";

    width: 0.46rem;
    height: 0.46rem;

    margin-right: 0.58rem;

    border-radius: 50%;

    background: var(--accent-purple-light);

    box-shadow:
        0 0 0.85rem
        rgba(187, 107, 230, 0.72);
}

.brand-content h1 {
    margin-top: 1.55rem;

    max-width: 34rem;

    font-size:
        clamp(
            2.25rem,
            3.6vw,
            4rem
        );

    line-height: 1.02;

    letter-spacing: -0.04em;
}

.brand-content h1::after {
    content: "";

    display: block;

    width: 4.5rem;
    height: 0.2rem;

    margin:
        1rem
        auto
        -0.25rem;

    border-radius: 99rem;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent-purple-light) 32%,
            #24c3cf 68%,
            transparent
        );

    box-shadow:
        0 0 1rem
        rgba(187, 107, 230, 0.22);
}

.brand-content p {
    margin-top: 1.45rem;

    max-width: 34rem;

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

    font-size:
        clamp(
            0.95rem,
            1.15vw,
            1.1rem
        );

    line-height: 1.65;
}


/* =========================================================
   ÁREA DO LOGIN
========================================================= */

.login-area {
    min-height: 100vh;

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

    padding:
        clamp(2rem, 4vw, 5rem);

    background: #ffffff;
}

.login-container {
    width: min(100%, 31rem);
}

.mobile-logo {
    display: none;
}

.login-header {
    margin-bottom: 1.8rem;
}

.login-company {
    color: var(--primary-dark);

    font-size: 0.76rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.login-header h2 {
    margin-top: 0.65rem;

    font-size:
        clamp(
            2rem,
            2.4vw,
            2.8rem
        );

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.login-header p {
    margin-top: 0.8rem;

    color: var(--text-secondary);

    font-size: 0.98rem;
    line-height: 1.55;
}


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

.login-alert {
    width: 100%;

    display: flex;
    align-items: flex-start;

    gap: 0.7rem;

    margin-bottom: 1.15rem;

    padding: 0.9rem 1rem;

    border: 0.08rem solid;
    border-radius: 0.7rem;

    font-size: 0.85rem;
    line-height: 1.45;
}

.login-alert-icon {
    width: 1.45rem;
    height: 1.45rem;

    flex-shrink: 0;

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

    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 900;
}

.login-alert-error {
    color: var(--danger);

    border-color: var(--danger-border);
    background: var(--danger-background);
}

.login-alert-error .login-alert-icon {
    background: var(--danger);
    color: #ffffff;
}

.login-alert-success {
    color: var(--success);

    border-color: var(--success-border);
    background: var(--success-background);
}

.login-alert-success .login-alert-icon {
    background: var(--success);
    color: #ffffff;
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-group > label {
    display: inline-block;

    margin-bottom: 0.5rem;

    font-size: 0.83rem;
    font-weight: 750;
}

.input-wrapper {
    position: relative;

    width: 100%;
}

.input-icon {
    position: absolute;

    left: 1rem;
    top: 50%;

    width: 1.2rem;
    height: 1.2rem;

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

    color: #93a3ad;

    transform: translateY(-50%);

    pointer-events: none;
}

.input-icon svg {
    width: 100%;
    height: 100%;
}

.input-wrapper input {
    width: 100%;
    height: 3.55rem;

    padding:
        0
        3.2rem
        0
        3rem;

    border:
        0.08rem solid
        var(--border);

    border-radius: 0.75rem;

    outline: none;

    background: var(--input-background);

    color: var(--text);

    font-size: 0.95rem;

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

.input-wrapper input::placeholder {
    color: #aab6be;
}

.input-wrapper input:focus {
    border-color: var(--border-focus);

    background: #ffffff;

    box-shadow:
        0 0 0 0.2rem
        rgba(8, 184, 199, 0.12);
}

.input-wrapper.has-error input {
    border-color: #dc7777;

    box-shadow:
        0 0 0 0.18rem
        rgba(200, 59, 59, 0.08);
}

.password-toggle {
    position: absolute;

    right: 0.75rem;
    top: 50%;

    width: 2.4rem;
    height: 2.4rem;

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

    border: 0;
    border-radius: 0.55rem;

    background: transparent;

    color: #96a5af;

    cursor: pointer;

    transform: translateY(-50%);
}

.password-toggle:hover {
    color: var(--primary-dark);

    background:
        rgba(8, 184, 199, 0.06);
}

.password-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.field-message {
    display: block;

    min-height: 0;

    margin-top: 0.35rem;

    font-size: 0.74rem;
}

.field-error {
    color: var(--danger);
}

.caps-lock-warning {
    display: none;

    margin-top: 0.4rem;

    color: #b77300;

    font-size: 0.74rem;
    font-weight: 650;
}

.caps-lock-warning.visible {
    display: block;
}


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

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin:
        0.35rem
        0
        1.35rem;
}

.remember-option {
    display: inline-flex;
    align-items: center;

    gap: 0.55rem;

    color: #42525c;

    font-size: 0.79rem;

    cursor: pointer;
}

.remember-option input {
    position: absolute;

    width: 0;
    height: 0;

    opacity: 0;
}

.custom-checkbox {
    position: relative;

    width: 1.15rem;
    height: 1.15rem;

    flex-shrink: 0;

    border:
        0.08rem solid
        #bcc9cf;

    border-radius: 0.28rem;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.remember-option input:checked
+ .custom-checkbox {
    border-color: var(--primary);
    background: var(--primary);
}

.remember-option input:checked
+ .custom-checkbox::after {
    content: "";

    position: absolute;

    left: 0.34rem;
    top: 0.14rem;

    width: 0.28rem;
    height: 0.52rem;

    border:
        solid #ffffff;

    border-width:
        0
        0.12rem
        0.12rem
        0;

    transform: rotate(45deg);
}

.forgot-link {
    color: var(--primary-dark);

    font-size: 0.79rem;
    font-weight: 700;
}

.forgot-link:hover,
.register-link:hover {
    text-decoration: underline;
}


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

.login-button {
    width: 100%;
    height: 3.55rem;

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

    gap: 0.6rem;

    border: 0;
    border-radius: 0.75rem;

    background:
        linear-gradient(
            90deg,
            #0699a8,
            #0bc3d1
        );

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 0.75rem 1.7rem
        rgba(8, 184, 199, 0.17);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.login-button:hover {
    filter: brightness(1.03);

    transform: translateY(-0.08rem);

    box-shadow:
        0 0.9rem 2rem
        rgba(8, 184, 199, 0.22);
}

.login-button:disabled {
    cursor: wait;

    opacity: 0.78;

    transform: none;
}

.button-spinner {
    display: none;

    width: 1.1rem;
    height: 1.1rem;

    border:
        0.13rem solid
        rgba(255, 255, 255, 0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        login-spin
        0.7s
        linear
        infinite;
}

.login-button.loading
.button-spinner {
    display: block;
}

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   CADASTRO / SEGURANÇA / RODAPÉ
========================================================= */

.register-area {
    margin-top: 1.15rem;

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

    gap: 0.35rem;

    color: var(--text-secondary);

    font-size: 0.78rem;
}

.register-link {
    color: var(--primary-dark);
    font-weight: 750;
}

.security-message {
    margin-top: 1.45rem;

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

    gap: 0.45rem;

    color: var(--text-light);

    font-size: 0.7rem;
}

.security-message svg {
    width: 0.95rem;
    height: 0.95rem;

    color: var(--primary);
}

.login-footer {
    margin-top: 1.45rem;

    padding-top: 1.15rem;

    border-top:
        0.08rem solid
        #edf2f4;

    color: #9aa6ae;

    text-align: center;

    font-size: 0.68rem;
}

.login-footer span {
    margin: 0 0.3rem;
}


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

@media (max-width: 78rem) {

    .login-page {
        grid-template-columns:
            minmax(27rem, 1fr)
            minmax(30rem, 1fr);
    }

    .login-brand {
        padding:
            3rem
            2.5rem;
    }

    .login-area {
        padding:
            3rem
            2.5rem;
    }

}


@media (max-width: 58rem) {

    .login-page {
        display: block;
    }

    .login-brand {
        display: none;
    }

    .login-area {
        min-height: 100vh;

        padding:
            2rem
            1.25rem;
    }

    .login-container {
        width: min(100%, 31rem);
    }

    .mobile-logo {
        display: flex;
        justify-content: center;

        margin-bottom: 1.7rem;
    }

    .mobile-logo img {
        width: 8rem;
        height: auto;
    }

}


@media (max-width: 34rem) {

    .login-area {
        align-items: flex-start;

        padding:
            1.5rem
            1rem;
    }

    .login-header h2 {
        font-size: 1.9rem;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.8rem;
    }

    .register-area {
        flex-wrap: wrap;
    }

}