/* Layout exclusivo para celulares e tablets em modo retrato. */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
    }

    body {
        min-height: 100svh;
        align-items: stretch;
        overflow-x: hidden;
    }

    #main-login {
        width: 100%;
        min-height: 100svh;
        height: auto;
        box-sizing: border-box;
        justify-content: center;
        padding: 24px 16px;
    }

    #area-login {
        width: min(100%, 390px);
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        border-radius: 12px;
        outline-width: 1px;
        box-shadow: 0 6px 20px rgba(31, 41, 55, 0.3);
    }

    #bloco-login_info {
        width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        padding: 18px 22px 12px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 3px 12px rgba(31, 41, 55, 0.2);
    }

    #area_titulo_login {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: center;
        gap: 14px;
        margin-top: 0;
    }

    #img-logo_login {
        width: 78px;
        height: 78px;
        object-fit: contain;
    }

    .subtitle {
        font-size: 1.2rem;
        line-height: 1.25;
        text-align: left;
    }

    #span_versao {
        align-self: flex-end;
        margin: 8px 0 0;
        font-size: 0.72rem;
    }

    #bloco-login_auth {
        width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        padding: 24px 22px 26px;
        border-radius: 0 0 12px 12px;
        background-color: #fff;
    }

    #form_login {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        gap: 17px;
        margin: 0;
    }

    .campos_login,
    .span-campos_login {
        width: 100%;
        min-width: 0;
    }

    .campos_login label {
        font-size: 1rem;
    }

    .span-campos_login input {
        min-height: 46px;
        padding: 11px 12px 11px 40px;
        font-size: 1rem;
    }

    .span-campos_login img {
        left: 13px;
        width: 19px;
        height: 19px;
    }

    #msg-login_error {
        width: 100%;
        font-size: 0.82rem;
    }

    #btn_login {
        width: 100%;
        min-height: 46px;
        margin-top: 3px;
        font-size: 1rem;
        border-radius: 6px;
    }
}

@media (max-width: 360px) {
    #main-login {
        padding: 16px 12px;
    }

    #bloco-login_info {
        padding-inline: 16px;
    }

    #bloco-login_auth {
        padding: 21px 16px 23px;
    }

    #img-logo_login {
        width: 68px;
        height: 68px;
    }

    .subtitle {
        font-size: 1.05rem;
    }
}