/* Botones. El primario es el «sello» de la marca: Azul Duoris lleno.
   Feedback al pulsar en :active (funciona en táctil y ratón);
   el hover solo existe donde hay puntero fino. */

.btn {
  --btn-bg: var(--duoris);
  --btn-fg: var(--blanco);
  --btn-bg-hover: var(--duoris-press);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.25);
  min-height: 3rem;
  padding: 0 calc(var(--u) * 2.75);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-ui) ease,
    color var(--t-ui) ease,
    border-color var(--t-ui) ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn .icon {
  transition: transform var(--t-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--btn-bg-hover);
  }

  .btn:hover .icon--arrow {
    transform: translateX(3px);
  }

  .btn:hover .icon--arrow-up {
    transform: translate(2px, -2px);
  }
}

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

.btn--lg {
  min-height: 3.5rem;
  padding-inline: calc(var(--u) * 3.5);
  font-size: 1.0625rem;
}

/* Secundario: filete fino de documento */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bg-hover: var(--blanco);
  --btn-border: var(--rule-strong);
}

/* Sobre Azul Duoris o Azul Noche */
.btn--paper {
  --btn-bg: var(--blanco);
  --btn-fg: var(--noche);
  --btn-bg-hover: var(--niebla);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--blanco);
  --btn-bg-hover: rgb(255 255 255 / 0.08);
  --btn-border: rgb(255 255 255 / 0.35);
}

/* Spinner del estado «enviando» */
.btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 600ms linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Enlace de texto con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  font-weight: 600;
  color: var(--duoris);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover {
    text-decoration-color: currentColor;
  }
}