/* ============================================================
   RR AUDIOCAR PRO — Buttons
   API:
     .rrac-btn                  (base)
     .rrac-btn--primary         (rojo brand, gradient)
     .rrac-btn--secondary       (outline brand)
     .rrac-btn--ghost           (transparente)
     .rrac-btn--success         (verde)
     .rrac-btn--ink             (negro)
     .rrac-btn--sm | --md | --lg | --xl  (tamaños)
     .rrac-btn--block           (full width)
     .rrac-btn--icon            (solo icon, circular)
     .rrac-btn--loading         (estado loading)
   ============================================================ */

.rrac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rrac-space-2);
  height: var(--rrac-btn-h-md);
  padding: 0 var(--rrac-space-4);
  border: 1.5px solid transparent;
  border-radius: var(--rrac-radius-xl);
  background: var(--rrac-surface);
  color: var(--rrac-text);
  font-family: var(--rrac-font-sans);
  font-size: var(--rrac-text-sm);
  font-weight: var(--rrac-weight-bold);
  letter-spacing: var(--rrac-tracking-tight);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--rrac-dur-fast) var(--rrac-ease-spring),
    background var(--rrac-dur-fast) var(--rrac-ease-smooth),
    border-color var(--rrac-dur-fast) var(--rrac-ease-smooth),
    color var(--rrac-dur-fast) var(--rrac-ease-smooth),
    filter var(--rrac-dur-fast) var(--rrac-ease-smooth),
    box-shadow var(--rrac-dur-fast) var(--rrac-ease-smooth);
}

/* Tamaños */
.rrac-btn--sm { height: var(--rrac-btn-h-sm); padding: 0 var(--rrac-space-3); font-size: var(--rrac-text-xs); }
.rrac-btn--md { height: var(--rrac-btn-h-md); }
.rrac-btn--lg { height: var(--rrac-btn-h-lg); padding: 0 var(--rrac-space-5); font-size: var(--rrac-text-base); }
.rrac-btn--xl { height: var(--rrac-btn-h-xl); padding: 0 var(--rrac-space-6); font-size: var(--rrac-text-lg); }

.rrac-btn--block { width: 100%; }

/* Variant: PRIMARY (CTA principal) */
.rrac-btn--primary {
  background: linear-gradient(180deg, var(--rrac-brand-500), var(--rrac-brand-600));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--rrac-shadow-brand-sm);
}
.rrac-btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--rrac-shadow-brand-md);
}
.rrac-btn--primary:active { transform: translateY(0); }

/* Variant: SECONDARY (outline brand) */
.rrac-btn--secondary {
  background: transparent;
  border-color: var(--rrac-primary);
  color: var(--rrac-primary);
}
.rrac-btn--secondary:hover {
  background: var(--rrac-primary-soft);
  transform: translateY(-1px);
}

/* Variant: GHOST */
.rrac-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rrac-text-soft);
}
.rrac-btn--ghost:hover {
  background: var(--rrac-bg-subtle);
  color: var(--rrac-text);
}

/* Variant: SUCCESS */
.rrac-btn--success {
  background: var(--rrac-success);
  color: #fff;
}
.rrac-btn--success:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Variant: INK (negro) */
.rrac-btn--ink {
  background: var(--rrac-ink-900);
  color: #fff;
}
.rrac-btn--ink:hover { background: var(--rrac-ink-800); transform: translateY(-1px); }

/* Variant: ICON ONLY (circular) */
.rrac-btn--icon {
  width: var(--rrac-btn-h-md);
  padding: 0;
  border-radius: var(--rrac-radius-full);
  background: var(--rrac-bg-subtle);
  color: var(--rrac-text-soft);
}
.rrac-btn--icon:hover {
  background: var(--rrac-border);
  color: var(--rrac-text);
}
.rrac-btn--icon.rrac-btn--sm { width: var(--rrac-btn-h-sm); }
.rrac-btn--icon.rrac-btn--lg { width: var(--rrac-btn-h-lg); }

/* Loading */
.rrac-btn--loading,
.rrac-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.rrac-btn--loading::after,
.rrac-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  top: 50%; left: 50%;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: rrac-spin 0.6s linear infinite;
  color: rgba(255,255,255,.6);
}
@keyframes rrac-spin { to { transform: rotate(360deg); } }

/* Disabled */
.rrac-btn:disabled,
.rrac-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.3);
  transform: none !important;
  box-shadow: none !important;
}

/* Arrow inside */
.rrac-btn--arrow::after {
  content: "→";
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  margin-left: var(--rrac-space-1);
  transition: transform var(--rrac-dur-fast) var(--rrac-ease-smooth);
}
.rrac-btn--arrow:hover::after { transform: translateX(3px); }