@charset "utf-8";
/* CSS Document */
.global-container {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    color: var(--content-container);
    border: 2px solid var(--sidebar-divider);
    background-color: var(--content-block);
    border-radius: 15px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
}

.sidebar-logo {
    max-width: 100px !important; 
    width: auto !important;
}

.sidebar-subtitle {
    font-size: 18px !important;
}

.login-section {
    background: var(--background);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-bg {
    /* Usamos min-height para que cubra toda la ventana */
    min-height: 100vh;
    width: 100%;
    background-color: var(--content-bg);
    
    /* Centramos el contenido del login */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-login {
        color: var(--content-title);
        font-weight: 600;
        margin-bottom: 5px;
}

.subtitle-login {
        color: var(--content-text);
        font-size: 16px;
        margin-bottom: 8px;
}

.text-decoration:hover {
    text-decoration: underline;
}

/* Ajuste para los textos sobre el fondo oscuro */
.login-container h1, .login-container h3 {
    color: #dedede;
    margin-bottom: 5px;
}

.login-container h1 {
    font-weight: 600;
}
.login-container h3 {
    font-weight: 400;
    margin-bottom: 24px;
}

.form-label {
    color: var(--content-text);
    font-size: 20px;
    font-weight: 500;
}

.form-control {
    height: 40px !important; 
    font-size: 16px !important; 
    margin-bottom: 10px !important; 
}

.text-button-login {
    font-size: 14px;
    color: var(--content-text-secondary);
    text-decoration: none;
}

.text-button-login:hover {
    color: var(--back-to-hover);
    text-decoration: underline;
}

.login-btn {
    font-size: 18px;
    font-weight: 600;
    background-color: var(--content-color1-contrast);
    width: 100%;
    border-radius: 15px;
    height: 40px;
    border: 1px solid #dedede;
}
.sign-up-btn {
    /* background-color: #F2F2F2; */
    color: var(--content-text);
    display: flex;
    justify-content: center;
    align-items: center;
}
.sign-up-btn:hover {
    text-decoration: underline;
}
.log-in-btn {
    background-color: var(--button);
    color: #FFFFFF;
}
.log-in-btn:hover {
    background-color: var(--button-hover);
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.checkbox-form {
    width: 15px;
    height: 15px;
}

.termsandprivacy {
    color: var(--content-text);
    font-size: 16px;
}

@media (max-width: 576px) {
    
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .login-bg {
        padding: 10px 0 0 0 !important;
        justify-content: flex-start !important;
    }

    .form-control {
        height: 38px !important; 
        font-size: 16px !important; 
        margin-bottom: 10px !important; 
    }

    .login-btn {
        font-size: 16px !important;
        height: 38px !important;
        border-radius: 12px !important; 
        max-width: 340px !important;
        margin: 0 auto !important; 
    }

    .form-label {
        font-size: 16px !important; 
        margin-bottom: 4px !important;
        display: block !important;
        text-align: left !important; 
    }
    
    .title-login {
        font-size: 22px !important;
    }

    .subtitle-login {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    .login-container {
        margin-top: 15px !important;
        margin-bottom: 0px !important;
        padding: 0 20px !important;
    }
    
    .sidebar-logo {
        max-height: 50px !important; 
        width: auto !important;
    }

    .sidebar-subtitle {
        font-size: 16px !important;
    }
}

@media (max-width: 400px) {
    .global-container, 
    section.global-container[style*="max-width: 400px"] {
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0px !important;
        padding: 20px 20px 40px 20px !important;
        background-color: var(--content-block) !important; 
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    .title-login {
        font-size: 21px !important;
    }
}

@media (max-width: 350px) {
    .global-container {
        padding: 15px 15px 30px 15px !important;
    }

    .form-control {
        height: 38px !important; 
        font-size: 14px !important; 
        margin-bottom: 8px !important; 
    }
    .subtitle-login {
        font-size: 13px !important;
        margin-bottom: 0px !important;
    }
}