/* ==========================================================
   ArgosHIS
   UI-LOGIN.1-B
   Login institucional

   ARQUITETURA:
   - background independente;
   - card funcional independente;
   - background substituível por campanha;
   - autenticação fora da camada visual.
   ========================================================== */


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


body.argos-login-body {
    min-height: 100vh;
    overflow-x: hidden;

    background:
        #062441;

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


/* ==========================================================
   SHELL
   ========================================================== */

.argos-login-shell {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    box-sizing: border-box;

    padding:
        clamp(28px, 6vh, 72px)
        clamp(30px, 8vw, 150px);

    isolation: isolate;

}


/* ==========================================================
   BACKGROUND INSTITUCIONAL

   Para campanhas futuras:
   substituir apenas:

   static/argosui/img/login-hnsc.png
   ========================================================== */

.argos-login-background {

    position: fixed;

    inset: 0;

    z-index: -3;

    background-image:
        url("../img/login-hnsc.png");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;

}


/* ==========================================================
   OVERLAY

   Permite trocar a arte sem perder legibilidade do card.
   ========================================================== */

.argos-login-overlay {

    position: fixed;

    inset: 0;

    z-index: -2;

    background:

        linear-gradient(
            90deg,
            rgba(3, 22, 50, 0.03) 0%,
            rgba(3, 22, 50, 0.02) 45%,
            rgba(3, 22, 50, 0.08) 63%,
            rgba(3, 22, 50, 0.24) 100%
        );

}


/* ==========================================================
   ACCESS AREA
   ========================================================== */

.argos-login-access {

    width:
        min(
            100%,
            410px
        );

    display: flex;

    justify-content: center;

}


/* ==========================================================
   CARD
   ========================================================== */

.argos-login-card {

    width: 100%;

    overflow: hidden;

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

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

    border-radius:
        18px;

    box-shadow:

        0 28px 70px
        rgba(
            3,
            24,
            57,
            0.30
        ),

        0 5px 18px
        rgba(
            3,
            24,
            57,
            0.14
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* ==========================================================
   HEADER
   ========================================================== */

.argos-login-card-header {

    padding:
        28px
        34px
        25px;

    text-align:
        center;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #075269 0%,
            #08788b 100%
        );

}


.argos-login-brand {

    margin: 0;

    font-size:
        clamp(
            28px,
            3vw,
            34px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -0.7px;

}


.argos-login-subtitle {

    margin-top:
        8px;

    font-size:
        13px;

    line-height:
        1.45;

    font-weight:
        500;

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

}


/* ==========================================================
   BODY
   ========================================================== */

.argos-login-card-body {

    padding:
        30px
        34px
        28px;

}


.argos-login-form {

    margin: 0;

}


.argos-login-field {

    margin-bottom:
        20px;

}


.argos-login-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #17283a;

    font-size:
        14px;

    font-weight:
        700;

}


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

.argos-login-input {

    display:
        block;

    width:
        100%;

    min-height:
        50px;

    box-sizing:
        border-box;

    padding:
        0 14px;

    border:
        1px solid
        #cbd6df;

    border-radius:
        9px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #17283a;

    font:
        inherit;

    font-size:
        15px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


.argos-login-input::placeholder {

    color:
        #8795a4;

}


.argos-login-input:hover {

    border-color:
        #9dafbd;

}


.argos-login-input:focus {

    border-color:
        #08798f;

    box-shadow:

        0 0 0 3px
        rgba(
            8,
            121,
            143,
            0.13
        );

}


/* ==========================================================
   BOTAO
   ========================================================== */

.argos-login-button {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        4px;

    border:
        0;

    border-radius:
        9px;

    cursor:
        pointer;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #08798f 0%,
            #05677b 100%
        );

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;

}


.argos-login-button:hover {

    filter:
        brightness(1.04);

    box-shadow:

        0 8px 18px
        rgba(
            8,
            121,
            143,
            0.22
        );

}


.argos-login-button:active {

    transform:
        translateY(1px);

}


/* ==========================================================
   MESSAGES
   ========================================================== */

.argos-login-messages {

    margin-bottom:
        20px;

}


.argos-login-alert {

    padding:
        12px 14px;

    border:
        1px solid
        #f0b7b7;

    border-radius:
        9px;

    background:
        #fff4f4;

    color:
        #9e2323;

    font-size:
        14px;

    line-height:
        1.4;

    text-align:
        center;

}


.argos-login-alert--success {

    border-color:
        #addcc0;

    background:
        #effbf3;

    color:
        #17643a;

}


/* ==========================================================
   FOOTER DO CARD
   ========================================================== */

.argos-login-card-footer {

    padding:
        18px
        24px;

    border-top:
        1px solid
        #e3e9ee;

    background:
        #fbfcfd;

    text-align:
        center;

    color:
        #788593;

    font-size:
        12px;

    line-height:
        1.4;

}


/* ==========================================================
   DESKTOP GRANDE
   ========================================================== */

@media (
    min-width: 1440px
) {

    .argos-login-shell {

        padding-right:
            clamp(
                110px,
                10vw,
                200px
            );

    }


    .argos-login-access {

        width:
            430px;

    }

}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (
    min-width: 901px
)
and (
    max-width: 1280px
) {

    .argos-login-shell {

        padding-right:
            5vw;

    }


    .argos-login-access {

        width:
            380px;

    }


    .argos-login-card-body {

        padding:
            26px
            30px
            25px;

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (
    max-width: 900px
) {

    .argos-login-shell {

        justify-content:
            center;

        padding:
            26px 18px;

    }


    .argos-login-background {

        background-position:
            35% center;

    }


    .argos-login-overlay {

        background:
            rgba(
                3,
                24,
                57,
                0.28
            );

    }


    .argos-login-access {

        width:
            min(
                100%,
                390px
            );

    }

}


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

@media (
    max-width: 480px
) {

    .argos-login-shell {

        padding:
            16px 12px;

    }


    .argos-login-card {

        border-radius:
            14px;

    }


    .argos-login-card-header {

        padding:
            24px 22px 22px;

    }


    .argos-login-card-body {

        padding:
            24px 22px 22px;

    }


    .argos-login-card-footer {

        padding:
            16px 18px;

    }

}


/* ==========================================================
   TELAS COM POUCA ALTURA
   ========================================================== */

@media (
    max-height: 650px
)
and (
    min-width: 901px
) {

    .argos-login-shell {

        align-items:
            flex-start;

        padding-top:
            24px;

        padding-bottom:
            24px;

    }


    .argos-login-card-header {

        padding:
            21px
            28px
            19px;

    }


    .argos-login-card-body {

        padding:
            21px
            28px
            20px;

    }

}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }

}