/* =========================================================
   LOGIN V2
   Arquivo: /css/login.css
========================================================= */


/* =========================================================
   RESET BÁSICO
========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;

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

    color: #24342c;
}


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

.login2-body {
    min-height: 100vh;

    background: #f4f7f5;
}

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

    display: grid;

    grid-template-columns:
        minmax(430px, 1.08fr)
        minmax(420px, .92fr);
}


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

.login2-brand-panel {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

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

    padding: 3rem;

    background:
        linear-gradient(
            145deg,
            #064f31 0%,
            #087443 48%,
            #0c8a51 100%
        );

    color: #fff;
}

.login2-brand-panel::after {
    content: "+";

    position: absolute;

    right: -70px;
    bottom: -130px;

    color: rgba(255, 255, 255, .045);

    font-family: Arial, sans-serif;

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

    line-height: 1;

    transform: rotate(-6deg);

    pointer-events: none;
}

.login2-brand-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(4px);

    pointer-events: none;
}

.login2-brand-glow-one {
    width: 320px;
    height: 320px;

    top: -150px;
    right: -100px;

    background:
        rgba(255, 255, 255, .08);
}

.login2-brand-glow-two {
    width: 240px;
    height: 240px;

    bottom: 70px;
    left: -120px;

    background:
        rgba(141, 224, 179, .13);
}


/* =========================================================
   EMPRESA
========================================================= */

.login2-brand-content,
.login2-brand-footer {
    position: relative;
    z-index: 2;
}

.login2-company {
    display: flex;
    align-items: center;

    gap: 1rem;
}


/* =========================================================
   LOGO DESKTOP
========================================================= */

.login2-company-logo {
    width: 118px;
    height: 88px;

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

    flex-shrink: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .10);
}

.login2-company-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.login2-company > div:last-child {
    display: flex;
    flex-direction: column;
}

.login2-company strong {
    font-size: .95rem;
    font-weight: 750;
}

.login2-company span {
    margin-top: .08rem;

    color:
        rgba(255, 255, 255, .72);

    font-size: .62rem;
}


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

.login2-brand-message {
    max-width: 540px;

    margin-top: 16vh;
}

.login2-eyebrow {
    display: block;

    margin-bottom: .35rem;

    color: #16935a;

    font-size: .65rem;
    font-weight: 750;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.login2-brand-message
.login2-eyebrow {
    color:
        rgba(255, 255, 255, .72);
}

.login2-brand-message h1 {
    max-width: 520px;

    margin: 0;

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

    font-weight: 720;

    line-height: 1.08;

    letter-spacing: -.035em;
}

.login2-brand-message p {
    max-width: 480px;

    margin: 1rem 0 0;

    color:
        rgba(255, 255, 255, .76);

    font-size: .92rem;

    line-height: 1.65;
}


/* =========================================================
   ÍCONES INSTITUCIONAIS
========================================================= */

.login2-pharmacy-icons {
    display: flex;
    align-items: center;

    gap: .65rem;

    margin-top: 2rem;
}

.login2-pharmacy-icons > div {
    display: flex;
    align-items: center;

    gap: .42rem;

    padding:
        .48rem .65rem;

    border:
        1px solid rgba(255, 255, 255, .13);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .07);

    color:
        rgba(255, 255, 255, .86);

    font-size: .62rem;
}

.login2-pharmacy-icons i {
    font-size: .68rem;
}


/* =========================================================
   RODAPÉ PAINEL VERDE
========================================================= */

.login2-brand-footer {
    color:
        rgba(255, 255, 255, .5);

    font-size: .58rem;

    letter-spacing: .03em;
}


/* =========================================================
   PAINEL DO FORMULÁRIO
========================================================= */

.login2-form-panel {
    min-height: 100vh;

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

    padding: 3rem;

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

.login2-form-wrapper {
    width: 100%;
    max-width: 410px;
}


/* =========================================================
   LOGO RESPONSIVO / TELA MENOR
========================================================= */

.login2-mobile-logo {
    display: none;

    width: 210px;
    height: 125px;

    margin-bottom: 1.7rem;

    overflow: hidden;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 10px 28px
        rgba(24, 51, 38, .07);
}

.login2-mobile-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


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

.login2-heading {
    margin-bottom: 1.7rem;
}

.login2-heading h2 {
    margin: 0;

    color: #183326;

    font-size: 1.75rem;
    font-weight: 720;

    letter-spacing: -.025em;
}

.login2-heading p {
    margin: .45rem 0 0;

    color: #718078;

    font-size: .76rem;

    line-height: 1.55;
}


/* =========================================================
   ERRO
========================================================= */

.login2-error {
    display: flex;
    align-items: flex-start;

    gap: .55rem;

    margin-bottom: 1rem;

    padding: .7rem .8rem;

    border:
        1px solid #f2c9c9;

    border-radius: 10px;

    background: #fff4f4;

    color: #a33636;

    font-size: .67rem;

    line-height: 1.45;
}

.login2-error i {
    margin-top: .08rem;

    flex-shrink: 0;
}


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

.login2-form {
    display: flex;
    flex-direction: column;

    gap: 1rem;
}

.login2-field {
    display: flex;
    flex-direction: column;

    gap: .35rem;
}

.login2-field label {
    color: #30453a;

    font-size: .66rem;
    font-weight: 650;
}

.login2-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.login2-help {
    color: #8b9891;

    font-size: .5rem;

    text-align: right;
}


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

.login2-input-wrapper {
    min-height: 48px;

    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr) auto;

    align-items: center;

    overflow: hidden;

    border:
        1px solid #d9e2dd;

    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 4px 14px
        rgba(20, 50, 35, .025);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.login2-input-wrapper:focus-within {
    border-color: #118451;

    box-shadow:
        0 0 0 3px
        rgba(17, 132, 81, .09);
}

.login2-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #799087;

    font-size: .72rem;
}

.login2-input-wrapper input {
    width: 100%;
    height: 46px;

    min-width: 0;

    padding: 0 .3rem;

    border: 0;
    outline: 0;

    background: transparent;

    color: #263b30;

    font: inherit;

    font-size: .75rem;
}

.login2-input-wrapper input::placeholder {
    color: #a5aea9;
}


/* =========================================================
   MOSTRAR / OCULTAR SENHA
========================================================= */

.login2-password-toggle {
    width: 42px;
    height: 46px;

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

    border: 0;

    background: transparent;

    color: #7c8e85;

    cursor: pointer;
}

.login2-password-toggle:hover {
    color: #087443;
}


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

.login2-submit {
    min-height: 48px;

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

    gap: 1rem;

    margin-top: .25rem;

    padding: 0 1rem;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #087443,
            #0b8950
        );

    color: #fff;

    font-size: .72rem;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(8, 116, 67, .17);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

.login2-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(8, 116, 67, .23);
}

.login2-submit:disabled {
    opacity: .7;

    cursor: wait;

    transform: none;
}


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

.login2-security {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .4rem;

    margin-top: 1.25rem;

    color: #8a9790;

    font-size: .53rem;

    text-align: center;
}

.login2-security i {
    color: #198758;
}


/* =========================================================
   TABLET / TELAS MENORES
========================================================= */

@media (max-width: 991.98px) {

    .login2-page {
        grid-template-columns: 1fr;
    }

    .login2-brand-panel {
        display: none;
    }

    .login2-form-panel {
        min-height: 100vh;

        padding: 2rem;
    }

    .login2-mobile-logo {
        display: block;
    }

}


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

@media (max-width: 575.98px) {

    .login2-form-panel {
        padding:
            1.5rem 1.1rem;
    }

    .login2-form-wrapper {
        max-width: 100%;
    }

    .login2-mobile-logo {
        width: 190px;
        height: 114px;

        margin-bottom: 1.5rem;
    }

    .login2-heading h2 {
        font-size: 1.5rem;
    }

    .login2-label-row {
        align-items: flex-start;
        flex-direction: column;

        gap: .15rem;
    }

    .login2-help {
        text-align: left;
    }

}


/* =========================================================
   MOBILE MUITO PEQUENO
========================================================= */

@media (max-width: 380px) {

    .login2-mobile-logo {
        width: 170px;
        height: 102px;
    }

    .login2-form-panel {
        padding:
            1.25rem .9rem;
    }

}