.auth-card input, #changePasswordDialog input {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  font-size: 0.9rem;
}
.auth-card input:focus, #changePasswordDialog input:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}
/* Login/register card: floats over the new background image, so it gets a
   softer, more pronounced card treatment than the flat .card default, plus
   a warm border on its inputs picking up the logo's gold accent instead of
   the site's plain neutral gray - kept scoped to .auth-card so it doesn't
   touch #changePasswordDialog's inputs (same base rule above) or any other card. */
.auth-card {
  border-radius: 16px;
  border-color: #EDE6D6;
  box-shadow: 0 12px 32px rgba(22, 50, 92, 0.14);
  padding: 48px 44px;
}
.auth-card .section-title {
  font-size: 1.3rem;
  margin-bottom: 22px;
}
.auth-card input {
  border-color: #D9C9A0;
  background: #FEFDFB;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 1rem;
}
.auth-card input:focus {
  border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); background: #fff;
}
.auth-card button[type="submit"] {
  padding: 12px 20px; font-size: 0.95rem; width: 100%;
}
/* Mi perfil: same rounded, modern language as the filter inputs - kept
   scoped to #profileView so it doesn't touch login/change-password. */
#profileView input, #profileView select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--sf-border);
  border-radius: 999px;
  font-size: 0.9rem;
  background: #fff;
}
#profileView input:focus, #profileView select:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}

.field-error { color: var(--sf-red); font-size: 0.8rem; margin: -6px 0 10px; }
.password-field { position: relative; }
.password-field input { padding-right: 36px; }
/* .auth-card input's own padding/margin (above) would otherwise win over
   .field-input-wrap's generic ones (base.css) on specificity, leaving no
   room for the status dot/check - re-reserve it here, more specifically
   scoped. The password field needs extra room again for its show/hide
   toggle on top of that. */
.auth-card .field-input-wrap input { padding-right: 34px; margin-bottom: 0; }
.auth-card .field-input-wrap.password-field input { padding-right: 68px; }
.field-input-wrap.password-field .toggle-password { right: 26px; width: 30px; }
.toggle-password {
  position: absolute; top: 0; right: 0; height: 100%; width: 36px;
  background: none; border: none; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; opacity: 0.55;
}
.toggle-password:hover { opacity: 1; }

.auth-card p { font-size: 0.9rem; margin: 14px 0 0; }
.auth-card a { color: var(--sf-blue); cursor: pointer; text-decoration: none; }
.auth-card a:hover { text-decoration: underline; }