/* ============================================================
   GCG Design System V1 — Button
   Spec: GCG_DESIGN_SYSTEM_V1.md §9
   ============================================================ */

.gcg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gcg-space-2);
  height: 42px;
  padding: 0 var(--gcg-space-5);
  font-family: var(--gcg-font-body);
  font-size: var(--gcg-text-sm);
  font-weight: 600;
  border-radius: var(--gcg-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--gcg-transition-fast), border-color var(--gcg-transition-fast),
              color var(--gcg-transition-fast), transform var(--gcg-transition-fast), box-shadow var(--gcg-transition-fast);
  white-space: nowrap;
}
.gcg-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Primary */
.gcg-btn--primary {
  background: var(--gcg-accent);
  color: var(--gcg-bg);
  border-color: var(--gcg-accent);
}
.gcg-btn--primary:hover:not(:disabled) {
  background: var(--gcg-accent-hover);
  border-color: var(--gcg-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--gcg-shadow-cta-hover);
}
.gcg-btn--primary:active:not(:disabled) {
  background: var(--gcg-accent-active);
  border-color: var(--gcg-accent-active);
  transform: translateY(0);
}

/* Secondary */
.gcg-btn--secondary {
  background: transparent;
  color: var(--gcg-text);
  border-color: var(--gcg-border-strong);
}
.gcg-btn--secondary:hover:not(:disabled) {
  background: var(--gcg-surface-raised);
  border-color: #59616B;
}

/* Ghost — sin contenedor permanente */
.gcg-btn--ghost {
  background: transparent;
  color: var(--gcg-text-secondary);
  border-color: transparent;
  padding: 0 var(--gcg-space-2);
  height: auto;
}
.gcg-btn--ghost:hover:not(:disabled) { color: var(--gcg-accent); }

/* Danger — solo para acciones destructivas */
.gcg-btn--danger {
  background: transparent;
  color: var(--gcg-danger);
  border-color: rgba(239, 68, 68, 0.35);
}
.gcg-btn--danger:hover:not(:disabled) {
  background: var(--gcg-danger-bg);
  border-color: var(--gcg-danger);
}

/* Tamaños */
.gcg-btn--sm { height: 34px; padding: 0 var(--gcg-space-4); font-size: var(--gcg-text-xs); }
.gcg-btn--lg { height: 48px; padding: 0 var(--gcg-space-6); font-size: var(--gcg-text-base); }
.gcg-btn--block { width: 100%; }

/* Icon button — 40x40 cuadrado */
.gcg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gcg-radius-sm);
  border: 1px solid var(--gcg-border-strong);
  background: transparent;
  color: var(--gcg-text-secondary);
  cursor: pointer;
  transition: background var(--gcg-transition-fast), color var(--gcg-transition-fast), border-color var(--gcg-transition-fast);
}
.gcg-icon-btn:hover { background: var(--gcg-surface-raised); color: var(--gcg-text); border-color: var(--gcg-border-strong); }
.gcg-icon-btn svg { width: 18px; height: 18px; }