:root { --h-input: 48px; }

@media (max-width:1366px) {
    :root { --h-input: 42px; }
}

@media (max-width:768px) {
    :root { --h-input: 36px; }
}

/* ================= RESET BASE ================= */
*,
*::before,
*::after{
    box-sizing:border-box;
}

/* ===== FIX IOS INPUT ===== */
input, textarea, select, button {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: none;
}

/* evita zoom no iOS */
input, textarea, select {
    font-size: 16px;
}

html{
    width:100%;
    height:100%;
}

/* ================= BODY ================= */
body {
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--body);
    overflow: hidden;
    margin: 0;
    align-items: center;
    justify-content: center;
}

/* ================= WRAP ================= */
.wrap-login {
    width: 100%;
    height: 100%;
    display: flex;
    max-width: none;
    max-height: none;
    align-items: center;
    justify-content: center;
}

/* ================= CARD ================= */
.card-login {
    width: 100%;
    height: 100%;
    max-width: 40vh;
    max-height: 72vh;    
    display: flex;
    flex-direction: column;
    background: var(--corpreta);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: var(--padding-padrao-36);
    overflow: hidden;
    align-items: stretch;
    justify-content: space-between;
}

/* ================= LOGO ================= */
.logo-login{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-login img {
    width: 46%;
    max-width: 256px;
    min-width: 96px;
    height: auto;
}

/* ================= FORM ================= */
.form-login{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* ================= LABEL ================= */
.label-login{
    display:block;
    width:100%;
    margin-bottom:4px;
}

/* ================= GRUPO ================= */
.field-login{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:4px;
}

/* ================= INPUT ================= */
.input-login{
    width:100%;
    height:var(--h-input);
    padding:0 12px;
    display:flex;
    align-items:center;
    outline:none;
    border: 1px solid rgba(255,255,255,.5);
    background: var(--footer);
    border-radius: var(--radius_button);
    outline: none;
    box-sizing: border-box;
    transition: var(--transicao_pq);
}

.input-login:hover,
.input-login:hover{
    background:var(--corbranca);
}

.input-login:focus,
.input-login:focus{
    background:var(--corbranca);
    border-color:rgba(255,255,255,0.9);
}

/* ================= SENHA ================= */
.password-wrapper-login{
    position:relative;
    width:100%;
}

.password-wrapper-login .input-login{
    padding-right:44px;
}

.toggle-password-login{
    position:absolute;
    top:50%;
    right:var(--gap-10);
    transform:translateY(-50%);
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.toggle-password-login img{
    width:18px;
    height:18px;
    opacity:0.85;
}

/* ================= BOTAO ================= */
.btn-login{
    width:100%;
    height: 100%;
    height:var(--h-input);
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    cursor:pointer;
    border-radius:var(--radius_button);
    border:1px solid var(--corerro01);
    background:var(--corvermelhahorus);
    transition:var(--transicao_pq);
}

.btn-login:hover{
    border:1px solid var(--header);
    background:var(--corvermelha);
    transition:var(--transicao_pq);   
}

.btn-login:active{
    background:var(--card);
    transition:var(--transicao_pq);    
}

/* ================= ERRO ================= */
.err-login{
    width:100%;
    height: 100%;
    min-height:var(--h-input);
    max-height:var(--h-input);    
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    background:var(--corerro02);
    border:1px solid var(--corerro01);
    border-radius:var(--radius_button);
    line-height:1;
}

/* ================= FOOTER ================= */
.footer-login{
    width:100%;
    margin-top:12px;
    text-align:center;
}

/* ================= HONEYPOT ================= */
.hp-login{
    position:absolute;
    left:-9999px;
}

/* ================= RESPONSIVO 1366px ================= */
@media (max-width:1366px){
.card-login {
    max-width: 44vh;
    max-height: 84vh;
    }
    
}

/* ================= RESPONSIVO 1024px ================= */
@media (max-width:1024px){
    .card-login {
    max-width: 38vh;
    padding: var(--padding-padrao-18);
    }
}

/* ================= RESPONSIVO 768px ================= */
@media (max-width:768px){
    .card-login {
    max-width: 38vh;
    max-height: 78vh;
    }
}

/* =========================================================
   MOBILE EM ORIENTAÇÃO HORIZONTAL
   Corrige telas largas, porém com pouca altura.
========================================================= */
@media (orientation: landscape) and (max-height: 550px) {

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

    body {
        overflow-y: auto;
        align-items: flex-start;
    }

    .wrap-login {
        width: 100%;
        min-height: 100dvh;
        height: auto;
        padding: 16px;
        align-items: flex-start;
    }

    .card-login {
        /*
         * No modo horizontal, não usar vh para definir a largura:
         * 38vh em uma tela de 430px gera um card de apenas ~163px.
         */
        width: min(92vw, 620px);
        max-width: 620px;

        height: auto;
        min-height: 0;
        max-height: none;

        margin: auto;
        padding: var(--padding-padrao-18);

        overflow: visible;
    }

    .logo-login img {
        width: auto;
        min-width: 0;
        max-width: none;
        height: min(22vh, 92px);
    }

    .spacer-40 {
        height: 12px !important;
        min-height: 12px !important;
    }

    .spacer-20 {
        height: 8px !important;
        min-height: 8px !important;
    }

    .spacer-10 {
        height: 4px !important;
        min-height: 4px !important;
    }

    .input-login,
    .btn-login {
        height: 34px;
        min-height: 34px;
    }

    .err-login {
        min-height: 34px;
        max-height: 34px;
    }
}

/* =========================================================
   MOBILE PEQUENO (<= 360px)
========================================================= */
@media (max-width: 360px) {

    .wrap-login{
        padding:12px;
    }

    .card-login{

        width:calc(100% - 24px);
        max-width:none;

        padding:14px;

        border-radius:12px;
    }

    .logo-login img{
        width:44%;
        min-width:92px;
        max-width:140px;
    }

    .input-login,
    .btn-login{
        height:34px;
        font-size:15px;
    }

    .err-login{
        min-height:34px;
        max-height:34px;
        font-size:13px;
    }

    .spacer-40{
        height:14px !important;
        min-height:14px !important;
    }

    .spacer-20{
        height:8px !important;
        min-height:8px !important;
    }

    .spacer-10{
        height:5px !important;
        min-height:5px !important;
    }
}