/*
|--------------------------------------------------------------------------
| LOGIN PAGE
|--------------------------------------------------------------------------
*/

.login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.login-card{

    width:100%;

    max-width:520px;

    padding:40px;

    border-radius:
        var(--radius-xl);

    background:
        var(--color-bg-secondary);

    border:1px solid
        var(--color-border);

    box-shadow:
        var(--shadow-lg);
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.login-header{

    text-align:center;

    margin-bottom:35px;
}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.login-title{

    margin-bottom:15px;
}

/*
|--------------------------------------------------------------------------
| SUBTITLE
|--------------------------------------------------------------------------
*/

.login-subtitle{

    color:
        var(--color-text-muted);

    line-height:1.8;
}

/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.login-form{

    display:flex;

    flex-direction:column;

    gap:25px;
}

/*
|--------------------------------------------------------------------------
| MIGRATED FROM public/login.php
|--------------------------------------------------------------------------
*/
*{
    box-sizing:border-box;
}

body{

    margin:0;

    padding:0;

    font-family:Arial,sans-serif;

    background:#111827;

    color:#f9fafb;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;
}

/*
|--------------------------------------------------------------------------
| LOGIN BOX
|--------------------------------------------------------------------------
*/

.container{

    width:100%;

    max-width:460px;

    background:#1f2937;

    padding:40px;

    border-radius:20px;

    border:1px solid #374151;

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

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.logo{

    text-align:center;

    margin-bottom:30px;
}

.logo h1{

    margin:0;

    font-size:34px;
}

.logo p{

    margin-top:10px;

    color:#9ca3af;

    font-size:15px;
}

/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

form{

    display:flex;

    flex-direction:column;

    gap:18px;
}

input{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#374151;

    color:#fff;

    font-size:16px;

    transition:.2s;
}

input:focus{

    outline:none;

    background:#4b5563;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

button{

    padding:16px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;
}

button:hover{

    background:#1d4ed8;
}

/*
|--------------------------------------------------------------------------
| ERROR
|--------------------------------------------------------------------------
*/

.error{

    background:#7f1d1d;

    color:#fecaca;

    padding:14px;

    border-radius:12px;

    margin-bottom:20px;

    border:1px solid #991b1b;
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.footer{

    margin-top:30px;

    text-align:center;

    font-size:14px;

    color:#9ca3af;
}

.footer a{

    color:#93c5fd;

    text-decoration:none;
}

.footer a:hover{

    text-decoration:underline;
}

/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.badges{

    margin-top:25px;

    display:flex;

    gap:10px;

    justify-content:center;

    flex-wrap:wrap;
}

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    background:#374151;
}

.dev{

    background:#1d4ed8;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVO
|--------------------------------------------------------------------------
*/

@media(max-width:600px){

    .container{

        margin:20px;

        padding:30px 25px;
    }

    .logo h1{

        font-size:28px;
    }

}