/*
 * .c-button: pill buttons (the rounded stroke of the isotipo). Every button is >= 48 px tall.
 *
 *   <a class="c-button c-button--primary" href="...">Registra tu negocio</a>
 *   <button class="c-button c-button--secondary" type="button">Ver el mapa</button>
 *   <button class="c-button c-button--primary" type="button" aria-busy="true">Enviando</button>   (loading)
 *   <button class="c-button c-button--icon c-button--ghost" aria-label="Cerrar"><span class="c-icon c-icon--close" aria-hidden="true"></span></button>
 *
 * Variants: --primary (yellow, ONE per view), --secondary (deep green), --inverse (white, on dark
 * fields), --ghost (text only). Sizes: --block (full width), --icon (round, icon only).
 * Loading: put aria-busy="true" AND aria-disabled="true" on the button (the CSS blocks the pointer, the page script must ignore the activation).
 * States: hover and pressed (a currentColor overlay changes opacity, no color transition),
 * focus-visible (global ring), loading ([aria-busy="true"] or --loading), disabled ([disabled] or
 * [aria-disabled="true"]). A disabled button always has a visible reason next to it:
 *
 *   <button class="c-button c-button--primary" disabled aria-describedby="why">Seguir</button>
 *   <p class="c-button-reason" id="why">Escribe el nombre de tu negocio para seguir.</p>
 */
.c-button {
  --_bg: var(--md-color-surface-alt);
  --_fg: var(--md-color-primary);
  --_hover: 0.08;
  --_press: 0.14;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-2);
  min-block-size: var(--md-target);
  min-inline-size: var(--md-target);
  padding: 0 var(--md-space-5);
  border: 0;
  border-radius: var(--md-radius-full);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-base);
  font-weight: var(--md-weight-bold);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--md-duration-fast) var(--md-ease-out);
}

/* The state overlay sits behind the label (z-index -1 inside the isolated button). */
.c-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-fast) var(--md-ease-out);
}

@media (hover: hover) {
  .c-button:hover::before {
    opacity: var(--_hover);
  }
}

.c-button:active::before {
  opacity: var(--_press);
}

.c-button:active {
  transform: scale(0.97);
}

/* The one primary action per view: the yellow dot of ".pro". Label is always on-action. */
.c-button--primary {
  --_bg: var(--md-color-action);
  --_fg: var(--md-color-on-action);
  --_hover: 0.06;
  --_press: 0.12;
}

.c-button--secondary {
  --_bg: var(--md-color-primary);
  --_fg: var(--md-color-on-primary);
  --_hover: 0.14;
}

/* On dark fields (header, footer, brand blocks) where the deep green button would vanish. */
.c-button--inverse {
  --_bg: var(--md-color-surface);
  --_fg: var(--md-color-primary);
}

.c-button--ghost {
  --_bg: transparent;
  --_fg: var(--md-color-primary);
}

.c-button--block {
  display: flex;
  inline-size: 100%;
}

.c-button--icon {
  padding: 0;
  inline-size: var(--md-target);
}

/* Loading: a spinner arc before the label. aria-busy="true" is the semantic switch; the class is a styling alias. */
.c-button--loading,
.c-button[aria-busy='true'] {
  cursor: progress;
  /* No second submit while loading. Pair it with aria-disabled="true" so keyboards and assistive tech
     see it too (pointer-events cannot stop Enter or Space). */
  pointer-events: none;
}

.c-button--loading::after,
.c-button[aria-busy='true']::after {
  content: '';
  order: -1;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: var(--md-border-width-strong) solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--md-radius-full);
  animation: c-button-spin 800ms linear infinite;
}

@keyframes c-button-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Disabled: flat, quiet, and never alone: the reason is written next to it (see .c-button-reason). */
.c-button:disabled,
.c-button[aria-disabled='true']:not([aria-busy='true']) {
  --_bg: var(--md-color-surface-alt);
  --_fg: var(--md-color-ink-soft);
  cursor: not-allowed;
  transform: none;
}

.c-button:disabled::before,
.c-button[aria-disabled='true']:not([aria-busy='true'])::before {
  opacity: 0;
}

.c-button-reason {
  margin-block-start: var(--md-space-2);
  font-size: var(--md-font-size-sm);
  color: var(--md-color-ink-soft);
}

/* Text-only button on a dark field. */
.c-button--ghost.c-button--inverse {
  --_bg: transparent;
  --_fg: var(--md-color-on-primary);
}