/*
==========================================================
MATILHA WEB - LOGIN DO PORTAL DO CLIENTE
==========================================================

Arquivo:
assets/css/login.css

Responsabilidade:
Controlar exclusivamente o design da tela pública de login
do Matilha Web.

Objetivos:
- Transmitir uma imagem moderna e profissional;
- Valorizar a identidade da Lobo Tecnologia;
- Diferenciar visualmente o portal do ERP interno;
- Oferecer leitura confortável e navegação simples;
- Garantir boa adaptação em desktop, tablet e smartphone.

Este arquivo não altera o layout das páginas internas do
Matilha Web.

==========================================================
*/


/* ==========================================================
VARIÁVEIS LOCAIS
========================================================== */

:root {
    --login-bg: #eef1f2;
    --login-panel: #ffffff;

    --login-dark: #101417;
    --login-dark-soft: #182025;
    --login-primary: #263238;
    --login-primary-soft: #36474f;

    --login-text: #171b1d;
    --login-muted: #737c80;
    --login-border: #dfe4e6;

    --login-success: #2e7d32;
    --login-danger: #c62828;

    --login-radius-xl: 28px;
    --login-radius-lg: 16px;
    --login-radius-md: 13px;
}


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

* {
    box-sizing: border-box;
}

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

body {
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(38, 50, 56, 0.08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #f4f6f7 0%,
            var(--login-bg) 100%
        );

    color: var(--login-text);

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

button,
input {
    font-family: inherit;
}


/* ==========================================================
PÁGINA
========================================================== */

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

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

    padding: 34px;
}

.login-shell {
    width: 100%;
    max-width: 1220px;
    min-height: 720px;

    display: grid;
    grid-template-columns: 1.06fr 0.94fr;

    overflow: hidden;

    border:
        1px solid
        rgba(17, 24, 28, 0.05);

    border-radius: var(--login-radius-xl);

    background: var(--login-panel);

    box-shadow:
        0 30px 80px rgba(22, 31, 35, 0.14),
        0 7px 22px rgba(22, 31, 35, 0.05);
}


/* ==========================================================
PAINEL INSTITUCIONAL
========================================================== */

.login-showcase {
    position: relative;

    min-height: 720px;

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

    overflow: hidden;

    padding: 54px 58px 38px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0d1113 0%,
            #151c20 48%,
            #202b30 100%
        );
}


/* ==========================================================
EFEITOS DECORATIVOS
========================================================== */

.showcase-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.showcase-glow-one {
    top: -140px;
    right: -115px;

    width: 390px;
    height: 390px;

    background:
        radial-gradient(
            circle,
            rgba(108, 140, 151, 0.24) 0%,
            rgba(108, 140, 151, 0.04) 52%,
            transparent 72%
        );
}

.showcase-glow-two {
    bottom: -170px;
    left: -130px;

    width: 360px;
    height: 360px;

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

    box-shadow:
        0 0 0 38px rgba(255, 255, 255, 0.018),
        0 0 0 78px rgba(255, 255, 255, 0.012);
}

.showcase-content,
.showcase-footer {
    position: relative;
    z-index: 1;
}


/* ==========================================================
MARCA
========================================================== */

.showcase-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.showcase-logo-box {
    min-height: 82px;

    display: flex;
    align-items: center;
}

.showcase-logo {
    display: block;

    width: auto;
    max-width: 265px;
    max-height: 90px;

    object-fit: contain;
}

.showcase-product {
    padding: 8px 13px;

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

    border-radius: 999px;

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

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

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================
TEXTO INSTITUCIONAL
========================================================== */

.showcase-copy {
    max-width: 540px;

    margin-top: 58px;
}

.showcase-eyebrow {
    display: inline-flex;

    margin-bottom: 18px;

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

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.showcase-copy h1 {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(
        2.7rem,
        4.7vw,
        4.2rem
    );

    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.showcase-copy h1 span {
    color: #aab8be;
}

.showcase-copy p {
    max-width: 500px;

    margin: 0;

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

    font-size: 1.02rem;
    line-height: 1.75;
}


/* ==========================================================
RECURSOS
========================================================== */

.showcase-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;

    max-width: 520px;

    margin-top: 44px;
}

.showcase-feature {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 14px;

    padding: 12px 14px;

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

    border-radius: 14px;

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

    backdrop-filter: blur(5px);
}

.showcase-feature-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.075);
}

.showcase-feature-icon i {
    font-size: 20px;
}

.showcase-feature strong {
    display: block;

    margin-bottom: 2px;

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

    font-size: 0.88rem;
    font-weight: 600;
}

.showcase-feature span {
    display: block;

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

    font-size: 0.77rem;
    line-height: 1.4;
}


/* ==========================================================
RODAPÉ DO PAINEL INSTITUCIONAL
========================================================== */

.showcase-footer {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 34px;

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

    font-size: 0.72rem;
}

.showcase-footer-separator {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.28);
}


/* ==========================================================
PAINEL DE LOGIN
========================================================== */

.login-panel {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 64px 74px 38px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdfd 100%
        );
}

.login-box {
    width: 100%;
    max-width: 420px;

    margin: auto;
}


/* ==========================================================
MARCA MOBILE
========================================================== */

.login-mobile-brand {
    display: none;
}


/* ==========================================================
CABEÇALHO DO FORMULÁRIO
========================================================== */

.login-heading {
    margin-bottom: 38px;
}

.login-heading-badge {
    width: 48px;
    height: 48px;

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

    margin-bottom: 23px;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--login-primary) 0%,
            var(--login-dark) 100%
        );

    box-shadow:
        0 10px 25px
        rgba(38, 50, 56, 0.18);
}

.login-heading-badge i {
    font-size: 22px;
}

.login-kicker {
    display: block;

    margin-bottom: 8px;

    color: var(--login-primary);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.login-heading h2 {
    margin: 0 0 10px;

    color: var(--login-text);

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.login-heading p {
    max-width: 390px;

    margin: 0;

    color: var(--login-muted);

    font-size: 0.92rem;
    line-height: 1.6;
}


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

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-field {
    width: 100%;
}

.login-field label {
    display: block;

    margin-bottom: 8px;

    color: #394347;

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

.login-input {
    height: 55px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 15px;

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

    border-radius: var(--login-radius-md);

    background: #f8fafb;

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

.login-input:hover {
    border-color: #cbd3d6;
}

.login-input:focus-within {
    border-color: var(--login-primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(38, 50, 56, 0.07);
}

.login-input i {
    flex: 0 0 auto;

    color: #819095;

    font-size: 21px;
}

.login-input input[type="email"],
.login-input input[type="password"] {
    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    color: #172024;
    background: transparent;

    font-size: 0.94rem;
}

.login-input input::placeholder {
    color: #a8b1b5;
}

.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172024;
    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;

    transition:
        background-color
        9999s ease-in-out 0s;
}


/* ==========================================================
MENSAGEM DO LOGIN
========================================================== */

.login-mensagem {
    margin: -2px 0 0;
    padding: 12px 14px;

    border-radius: 11px;

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

.login-mensagem.red,
.login-mensagem.red.lighten-4,
.login-mensagem.erro {
    color: var(--login-danger);

    border: 1px solid #ffcdd2;

    background: #fff5f5 !important;
}

.login-mensagem.green,
.login-mensagem.green.lighten-4,
.login-mensagem.sucesso {
    color: var(--login-success);

    border: 1px solid #c8e6c9;

    background: #f4fbf4 !important;
}


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

#btnEntrar.login-submit {
    width: 100%;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin: 2px 0 0;
    padding: 0 20px;

    border: 0;
    border-radius: var(--login-radius-md);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--login-primary) 0%,
            #151c1f 100%
        );

    box-shadow:
        0 10px 24px
        rgba(38, 50, 56, 0.18);

    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;

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

#btnEntrar.login-submit:hover,
#btnEntrar.login-submit:focus {
    background:
        linear-gradient(
            135deg,
            #1d282d 0%,
            #0d1113 100%
        );

    box-shadow:
        0 13px 28px
        rgba(38, 50, 56, 0.24);

    transform: translateY(-1px);
}

#btnEntrar.login-submit i {
    font-size: 19px;
}


/* ==========================================================
PRIMEIRO ACESSO
========================================================== */

.login-first-access {
    margin-top: 28px;
    padding-top: 24px;

    border-top:
        1px solid
        #edf0f1;

    text-align: center;
}

.login-first-access span {
    display: block;

    margin-bottom: 5px;

    color: #8b9498;

    font-size: 0.79rem;
}

.login-first-access a {
    color: var(--login-primary);

    font-size: 0.84rem;
    font-weight: 700;

    transition:
        color 0.2s ease;
}

.login-first-access a:hover,
.login-first-access a:focus {
    color: #000000;
}


/* ==========================================================
SEGURANÇA
========================================================== */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 23px;

    color: #9aa2a5;

    font-size: 0.73rem;
    text-align: center;
}

.login-security i {
    color: #7f8d92;

    font-size: 16px;
}


/* ==========================================================
RODAPÉ DO PAINEL
========================================================== */

.login-panel-footer {
    margin-top: 36px;

    color: #a0a7aa;

    font-size: 0.69rem;
    text-align: center;
}


/* ==========================================================
TABLETS
========================================================== */

@media screen and (max-width: 992px) {

    .login-page {
        padding: 22px;
    }

    .login-shell {
        max-width: 720px;
        min-height: auto;

        grid-template-columns: 1fr;
    }

    .login-showcase {
        min-height: auto;

        padding: 36px 40px;
    }

    .showcase-copy {
        margin-top: 35px;
    }

    .showcase-copy h1 {
        max-width: 540px;

        font-size: 2.5rem;
    }

    .showcase-features {
        grid-template-columns: repeat(3, 1fr);

        max-width: none;

        margin-top: 30px;
    }

    .showcase-feature {
        grid-template-columns: 1fr;

        align-items: flex-start;
    }

    .showcase-footer {
        margin-top: 28px;
    }

    .login-panel {
        padding: 48px 44px 30px;
    }

}


/* ==========================================================
DISPOSITIVOS MÓVEIS
========================================================== */

@media screen and (max-width: 600px) {

    body {
        background: #ffffff;
    }

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

        padding: 0;
    }

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

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }


    /* ======================================================
    PAINEL INSTITUCIONAL COMPACTO
    ====================================================== */

    .login-showcase {
        min-height: auto;

        padding: 25px 24px 30px;

        border-radius:
            0 0 26px 26px;
    }

    .showcase-brand {
        display: none;
    }

    .showcase-copy {
        margin: 0;
    }

    .showcase-eyebrow {
        margin-bottom: 10px;

        font-size: 0.66rem;
    }

    .showcase-copy h1 {
        margin-bottom: 12px;

        font-size: 2rem;
        line-height: 1.08;
    }

    .showcase-copy p {
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .showcase-features,
    .showcase-footer {
        display: none;
    }


    /* ======================================================
    LOGIN
    ====================================================== */

    .login-panel {
        justify-content: flex-start;

        padding: 29px 23px 26px;
    }

    .login-box {
        max-width: none;
    }

    .login-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;

        margin-bottom: 28px;
        padding-bottom: 19px;

        border-bottom:
            1px solid
            #edf0f1;
    }

    .login-mobile-brand img {
        display: block;

        width: auto;
        max-width: 170px;
        max-height: 58px;

        object-fit: contain;
    }

    .login-mobile-brand span {
        padding: 6px 10px;

        border-radius: 999px;

        color: var(--login-primary);

        background: #eef2f3;

        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .login-heading {
        margin-bottom: 29px;
    }

    .login-heading-badge {
        width: 43px;
        height: 43px;

        margin-bottom: 18px;

        border-radius: 13px;
    }

    .login-heading h2 {
        font-size: 1.55rem;
    }

    .login-heading p {
        font-size: 0.85rem;
    }

    .login-input,
    #btnEntrar.login-submit {
        height: 52px;
    }

    .login-first-access {
        margin-top: 25px;
    }

    .login-panel-footer {
        margin-top: 28px;
    }

}


/* ==========================================================
TELAS MUITO PEQUENAS
========================================================== */

@media screen and (max-width: 380px) {

    .login-showcase {
        padding-left: 20px;
        padding-right: 20px;
    }

    .login-panel {
        padding-left: 20px;
        padding-right: 20px;
    }

    .showcase-copy h1 {
        font-size: 1.78rem;
    }

    .login-mobile-brand img {
        max-width: 145px;
    }

}