/* ==========================================
   RESET
========================================== */

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

:root {

    --primary: #ef4444;
    --primary-dark: #dc2626;

    --dark: #111827;
    --dark-2: #1f2937;

    --gray: #6b7280;
    --gray-light: #e5e7eb;

    --white: #ffffff;

    --radius: 20px;

    --shadow:
        0 20px 50px rgba(0,0,0,.15);

    font-family:
        Inter,
        Arial,
        sans-serif;
}

body {

    background:
        #f5f6fa;

    color:
        var(--dark);

    min-height:
        100vh;
}


/* ==========================================
   LAYOUT
========================================== */

.login-page{

    display:grid;

    grid-template-columns:
        1fr
        520px;

    min-height:
        100vh;
}


/* ==========================================
   LADO ESQUERDO
========================================== */

.login-visual{

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:70px;
}

.login-visual-content{

    max-width:500px;
}

.brand-mark{

    width:90px;
    height:90px;

    border-radius:24px;

    background:#ef4444;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;
}

.brand-eyebrow{

    color:#fecaca;

    font-size:15px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.login-visual h1{

    margin-top:18px;

    font-size:48px;

    line-height:1.15;
}

.login-visual p{

    margin-top:24px;

    color:#d1d5db;

    font-size:18px;

    line-height:1.8;
}

.login-benefits{

    margin-top:40px;

    list-style:none;

    display:grid;

    gap:18px;
}

.login-benefits li{

    padding:18px 22px;

    background:

        rgba(255,255,255,.08);

    border-radius:16px;

    backdrop-filter:blur(8px);

    font-size:17px;
}


/* ==========================================
   PAINEL
========================================== */

.login-panel{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;
}

.login-card{

    width:100%;

    max-width:430px;

    background:white;

    border-radius:24px;

    padding:40px;

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


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

.login-header{

    display:flex;

    gap:18px;

    align-items:center;

    margin-bottom:35px;
}

.login-logo{

    width:70px;
    height:70px;

    border-radius:18px;

    background:#ef4444;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;
}

.login-subtitle{

    color:#ef4444;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:.15em;
}

.login-header h2{

    margin-top:5px;

    font-size:30px;
}


/* ==========================================
   FORMULÁRIO
========================================== */

.login-form{

    display:grid;

    gap:24px;
}

.form-group{

    display:grid;

    gap:10px;
}

.form-group label{

    font-weight:600;
}

.form-group input{

    width:100%;

    height:54px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid #d1d5db;

    font-size:15px;

    transition:.2s;
}

.form-group input:focus{

    outline:none;

    border-color:#ef4444;

    box-shadow:
        0 0 0 4px
        rgba(239,68,68,.15);
}


/* ==========================================
   SENHA
========================================== */

.password-field{

    position:relative;
}

.password-toggle{

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    color:#ef4444;

    font-weight:600;
}


/* ==========================================
   CHECKBOX
========================================== */

.remember-field{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    cursor:pointer;
}

.remember-field input{

    width:18px;

    height:18px;
}


/* ==========================================
   BOTÃO
========================================== */

.login-button{

    height:56px;

    border:none;

    border-radius:16px;

    background:#ef4444;

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.login-button:hover{

    background:#dc2626;

    transform:translateY(-2px);
}


/* ==========================================
   ERROS
========================================== */

.field-error{

    color:#dc2626;

    font-size:13px;
}

.login-message{

    margin-bottom:22px;

    padding:15px;

    border-radius:14px;

    font-size:14px;

    background:#fee2e2;

    color:#991b1b;
}


/* ==========================================
   AJUDA
========================================== */

.login-help{

    margin-top:30px;

    text-align:center;
}

.login-help p{

    color:#6b7280;

    margin-bottom:10px;
}

.login-help a{

    color:#ef4444;

    text-decoration:none;

    font-weight:600;
}


/* ==========================================
   FOOTER
========================================== */

.login-footer{

    margin-top:35px;

    text-align:center;
}

.login-footer a{

    color:#6b7280;

    text-decoration:none;
}

.login-footer a:hover{

    color:#ef4444;
}


/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:1000px){

.login-page{

    grid-template-columns:1fr;
}

.login-visual{

    display:none;
}

.login-panel{

    padding:30px 18px;
}

.login-card{

    padding:30px;
}

.login-header h2{

    font-size:26px;
}

}