/* ==========================================================================
   Button — 07 §9.1, 03 §15
   `<a>` when it navigates, `<button>` when it acts. Never swapped.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-primary);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}

/* --- Primary. #b5502a is the only permitted primary CTA colour (03 §6.2). -- */

.btn--primary {
  background-color: var(--action-primary);
  color: var(--action-primary-text);
}

.btn--primary:hover {
  background-color: var(--action-primary-hover);
  color: var(--action-primary-text);
}

.btn--primary:active {
  background-color: var(--action-primary-active);
}

/* --- Secondary. Lower weight, never looks disabled (03 §15.2). ------------- */

.btn--secondary {
  background-color: transparent;
  color: var(--text-strong);
  border-color: var(--color-sepia);
}

.btn--secondary:hover {
  background-color: var(--surface-raised);
  border-color: var(--text-strong);
  color: var(--text-strong);
}

/* --- Text. Reads as a link but keeps the button target size. -------------- */

.btn--text {
  min-height: var(--touch-target);
  padding-inline: var(--space-2);
  background-color: transparent;
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.btn--text:hover {
  color: var(--color-cta-hover);
  text-decoration-thickness: 2px;
}

/* --- Inverse. For use on --surface-dark. --------------------------------- */

.btn--inverse {
  background-color: var(--color-papel-oscuro);
  color: var(--color-tinta);
}

.btn--inverse:hover {
  background-color: var(--color-papel);
  color: var(--color-tinta);
}

/* --- Sizes --------------------------------------------------------------- */

.btn--lg {
  min-height: 3.5rem;
  padding-inline: var(--space-7);
  font-size: var(--text-md);
}

/* --- States -------------------------------------------------------------- */

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading keeps its width so the layout does not shift (07 §9.1). */
.btn[data-loading="true"] {
  cursor: progress;
  pointer-events: none;
}

/* --- Text link — 07 §9.2 -------------------------------------------------- */

.text-link {
  color: var(--text-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.text-link:hover {
  color: var(--color-cta-hover);
  text-decoration-thickness: 2px;
}

/* --- CTA group — 07 §9.4. Primary stays first. ---------------------------- */

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 26rem) {
  .cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-group .btn {
    width: 100%;
  }
}