/**
 * Estils per a la pàgina de login
 * Mobile First
 */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-secondary) 100%);
    padding: var(--md-spacing-md);
}

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

.login-card {
    background-color: var(--md-surface);
    border-radius: var(--md-radius-xl);
    padding: var(--md-spacing-xl);
    box-shadow: var(--md-elevation-3);
}

.login-header {
    text-align: center;
    margin-bottom: var(--md-spacing-xl);
}

.login-header h1 {
    color: var(--md-primary);
    margin-bottom: var(--md-spacing-xs);
}

.login-header p {
    color: var(--md-on-surface-variant);
    font-size: var(--md-font-size-small);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.error-message {
    background-color: var(--md-error-container);
    color: var(--md-error);
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    border-radius: var(--md-radius-md);
    margin-bottom: var(--md-spacing-md);
    font-size: var(--md-font-size-small);
}

/* Tablet i desktop */
@media (min-width: 768px) {
    .login-card {
        padding: var(--md-spacing-xl) 48px;
    }
}