/* Estilos específicos para la vista de login */
:root {
    --background-light: #f9fafb;
    --background-dark: #111827;
    --card-background-light: #ffffff;
    --card-background-dark: #1f2937;
    --text-primary-light: #111827;
    --text-primary-dark: #f9fafb;
    --text-secondary-light: #6b7280;
    --text-secondary-dark: #9ca3af;
    --border-light: #e5e7eb;
    --border-dark: #374151;
    --accent-blue: #0A84FF;
}

html.light {
    --bg-primary: var(--background-light);
    --bg-card: var(--card-background-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --border-color: var(--border-light);
}

html.dark {
    --bg-primary: var(--background-dark);
    --bg-card: var(--card-background-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --border-color: var(--border-dark);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.alert {
    border-radius: 12px;
}

.logo {
    width: 12.5rem;
}