body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #B7CACF 0%, #FFFAF4 45%, #E9E3D7 100%); }
    .login-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 2.5rem; max-width: 400px; width: 90%; }
    .login-card h1 { font-family: var(--font-brand); font-weight: 400; color: var(--primary-color); font-size: 1.5rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .login-card .subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
    .form-group { margin-bottom: 1.25rem; }
    .form-label { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }
    .form-input { width: 100%; padding: 10px 12px; border: 2px solid var(--border-color); border-radius: var(--radius); font-size: 1rem; }
    .form-input:focus { outline: none; border-color: var(--primary-color); }
    .btn { width: 100%; padding: 12px; border: none; border-radius: var(--radius); font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
    .error { background: #ffebee; color: var(--danger-color); padding: 10px; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; }
    .logo { height: 48px; margin-bottom: 1rem; }
    .login-card .logo-principal { width: min(100%, 280px); height: auto; }

    html[data-theme="dark"] body { background: linear-gradient(160deg, #B7CACF 0%, #FFFAF4 45%, #E9E3D7 100%); color: #231F20; }
    html[data-theme="dark"] .login-card { background: #FFFAF4; color: #231F20; color-scheme: light; }
    html[data-theme="dark"] .login-card .subtitle { color: #495057; }
    html[data-theme="dark"] .login-card .form-label { color: #231F20; }
    html[data-theme="dark"] .form-input { background: #ffffff; color: #231F20; border-color: #B7CACF; }