/* ════════════════════════════════════════════
   FORMS
════════════════════════════════════════════ */
.form-group { margin-bottom: var(--sp-4); }

.form-group label,
.form-group .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=number],
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;   /* touch target ≥ 48px */
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 16px;    /* evita zoom automático no iOS */
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(23,69,141,.12);
}
.form-group input::placeholder { color: var(--c-placeholder); }

/* Error state */
.field-error input { border-color: var(--c-error-bd); }
.field-error input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }


/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
/* Base — todos os botões herdam */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary */
.btn-primary {
  width: 100%;
  background: var(--c-brand);
  color: var(--c-white);
  border-color: var(--c-brand);
  box-shadow: 0 1px 4px rgba(23,69,141,.25);
}
.btn-primary:hover:not(:disabled) {
  background: var(--c-brand-lt);
  border-color: var(--c-brand-lt);
  box-shadow: 0 3px 8px rgba(23,69,141,.3);
}

/* Admin variant */
.btn-admin {
  background: var(--c-brand-dk);
  border-color: var(--c-brand-dk);
  font-size: var(--text-xs);
}
.btn-admin:hover:not(:disabled) { background: var(--c-brand-dker); border-color: var(--c-brand-dker); }

/* Outline */
.btn-outline {
  background: transparent;
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.btn-outline:hover:not(:disabled) { background: rgba(23,69,141,.06); }

/* Ghost */
.btn-ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-muted);
}
.btn-ghost:hover:not(:disabled) { background: var(--c-bg); }

/* Danger outline */
.btn-danger {
  background: transparent;
  border-color: var(--c-error-bd);
  color: var(--c-error);
}
.btn-danger:hover:not(:disabled) { background: var(--c-error-bg); }

/* Small */
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--text-xs); border-radius: var(--r-sm); }

/* Icon-only */
.btn-icon { min-height: 36px; width: 36px; padding: 0; border-radius: var(--r-sm); }

/* Loading state */
.btn.loading { pointer-events: none; }
.btn.loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline width */
.btn-auto { width: auto; }


/* ════════════════════════════════════════════
   ALERTS / FEEDBACK
════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert-error {
  background: var(--c-error-bg);
  border-color: var(--c-error-bd);
  color: var(--c-error);
}
.alert-success {
  background: var(--c-success-bg);
  border-color: var(--c-success-bd);
  color: var(--c-success);
  font-weight: 600;
}
.alert + .alert { margin-top: var(--sp-3); }