/* =========================================
   TAviS
   LOGIN — BLACK EDITION
   ========================================= */


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

* {
    box-sizing: border-box;
}


/* =========================================
   BODY
   ========================================= */

body {
    margin: 0;

    font-family:
        'DM Sans',
        sans-serif;

    background: #000000;

    color: #ffffff;

    min-height: 100vh;
}


/* =========================================
   PÁGINA
   ========================================= */

.login-page {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px 20px;

    background: #000000;

}


/* =========================================
   CONTENEDOR
   ========================================= */

.login-container {

    width: 100%;

    max-width: 430px;

    text-align: center;

}


/* =========================================
   MARCA
   ========================================= */

.login-brand {

    margin-bottom: 30px;

}


.login-brand h1 {

    margin: 0;

    font-family:
        'Playfair Display',
        serif;

    font-size: 48px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #ffffff;

}


.login-brand p {

    margin: 8px 0 0;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;

    color: #9ca3af;

}


/* =========================================
   TARJETA
   ========================================= */

.login-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 40px 35px;

    box-shadow:
        0 25px 60px
        rgba(255, 255, 255, 0.08);

    text-align: left;

}


/* =========================================
   TÍTULO
   ========================================= */

.login-card h2 {

    margin:
        0 0 8px;

    font-family:
        'DM Sans',
        sans-serif;

    font-size:
        27px;

    font-weight:
        600;

    letter-spacing:
        -0.5px;

    color:
        #000000;

}


/* =========================================
   SUBTÍTULO
   ========================================= */

.subtitle {

    margin:
        0 0 30px;

    font-size:
        15px;

    color:
        #6b7280;

    line-height:
        1.5;

}


/* =========================================
   ERROR
   ========================================= */

.login-error {

    margin-bottom:
        20px;

    padding:
        12px 14px;

    border-radius:
        10px;

    background:
        #f3f3f3;

    color:
        #000000;

    border-left:
        4px solid #000000;

    font-size:
        14px;

}


/* =========================================
   FORMULARIO
   ========================================= */

.form-group {

    margin-bottom:
        20px;

}


/* =========================================
   LABEL
   ========================================= */

.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        14px;

    font-weight:
        600;

    color:
        #111111;

}


/* =========================================
   INPUT
   ========================================= */

.form-group input {

    width:
        100%;

    height:
        52px;

    padding:
        0 16px;

    border:
        1px solid #d1d1d1;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #000000;

    font-family:
        'DM Sans',
        sans-serif;

    font-size:
        15px;

    outline:
        none;

    transition:
        all 0.2s ease;

}


.form-group input::placeholder {

    color:
        #999999;

}


.form-group input:focus {

    border-color:
        #000000;

    box-shadow:
        0 0 0 3px
        rgba(0, 0, 0, 0.08);

}


/* =========================================
   BOTÓN
   ========================================= */

.login-button {

    width:
        100%;

    height:
        52px;

    margin-top:
        8px;

    border:
        none;

    border-radius:
        10px;

    background:
        #000000;

    color:
        #ffffff;

    font-family:
        'DM Sans',
        sans-serif;

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        0.3px;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

}


.login-button:hover {

    background:
        #222222;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.25);

    transform:
        translateY(-1px);

}


.login-button:active {

    transform:
        translateY(0);

}


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

.login-footer {

    margin-top:
        25px;

    font-size:
        12px;

    color:
        #777777;

    letter-spacing:
        0.5px;

}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 500px) {

    .login-page {

        padding:
            20px 16px;

    }


    .login-brand {

        margin-bottom:
            24px;

    }


    .login-brand h1 {

        font-size:
            42px;

    }


    .login-card {

        padding:
            30px 22px;

        border-radius:
            17px;

    }


    .login-card h2 {

        font-size:
            24px;

    }

}