/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Segoe UI",Arial,sans-serif;

    overflow-x:hidden;

}

/* FUNDO */

.background{

    position:fixed;

    inset:0;

    background:url("../img/prorsus_branco.jpg")
    center center/cover no-repeat;

    animation:fundo 1.2s ease;

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;

    inset:0;

    background: rgba(36, 35, 35, 0.35);

}

@keyframes fundo{

    from{

        transform:scale(1.03);

    }

    to{

        transform:scale(1);

    }

}

/* CENTRALIZA */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    animation:fadeIn .4s;

}

/* CARD */

.login-modal{

    width:100%;

    max-width:420px;

    padding:42px;

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

    border-radius:22px;

    backdrop-filter:blur(10px);

    box-shadow:
        0 12px 30px rgba(37,99,235,.10),
        0 30px 70px rgba(37,99,235,.08);

    text-align:center;

    animation:modalIn .35s;

}

/* LOGO */

.login-logo{

    width:180px;

    max-width:100%;

    height:auto;

    margin-bottom:20px;

}

/* TITULO */

.login-modal h2{

    font-size:30px;

    color:#0f172a;

    margin-bottom:6px;

}

.login-subtitle{

    color:#64748b;

    margin-bottom:28px;

    font-size:15px;

}

/* INPUT */

.login-modal input{

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border-radius:12px;

    border:1px solid #dbe2ea;

    font-size:15px;

    transition:.25s;

}

.login-modal input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

/* BOTÃO */

.login-modal button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.login-modal button:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

.login-modal button:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

/* ERRO */

#erroLogin{

    margin-top:15px;

    color:#dc2626;

    min-height:20px;

}

/* ANIMAÇÕES */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes modalIn{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

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

@media (max-width:768px){

    .login-page{

        padding:30px;

    }

    .login-modal{

        padding:36px;

    }

    .login-logo{

        width:170px;

    }

}

/* ===================================================
   CELULARES
=================================================== */

@media (max-width:480px){

    .login-page{

        padding:20px;

    }

    .login-modal{

        padding:28px 24px;

        border-radius:18px;

    }

    .login-logo{

        width:150px;

        margin-bottom:18px;

    }

    .login-modal h2{

        font-size:26px;

    }

    .login-subtitle{

        font-size:14px;

        margin-bottom:22px;

    }

    .login-modal input{

        padding:14px;

        font-size:16px;

    }

    .login-modal button{

        padding:14px;

        font-size:16px;

    }

}

/* ===================================================
   CELULARES PEQUENOS
=================================================== */

@media (max-width:360px){

    .login-page{

        padding:15px;

    }

    .login-modal{

        padding:22px 18px;

    }

    .login-logo{

        width:130px;

    }

    .login-modal h2{

        font-size:22px;

    }

}