/**
 * ═══════════════════════════════════════════════════════════
 * BLACK BIRD — Components (BEM Methodology)
 * Nomenclatura: [bloque]__[elemento]--[modificador]
 * Orden: botones, nav, cards, formularios, footer
 * ═══════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   BOTONES — .btn
   ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-3) var(--bb-space-8);
  font-family: var(--bb-font-sans);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-semibold);
  letter-spacing: var(--bb-tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--bb-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--bb-duration-base) var(--bb-ease-out),
    border-color var(--bb-duration-base) var(--bb-ease-out),
    color var(--bb-duration-base) var(--bb-ease-out),
    box-shadow var(--bb-duration-base) var(--bb-ease-out),
    transform var(--bb-duration-fast) var(--bb-ease-spring);
  min-height: 48px; /* WCAG touch target */
}

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

/* Primario — Azul corporativo sólido */
.btn--primary {
  background-color: var(--bb-color-blue-primary);
  color: var(--bb-text-inverse);
  border-color: var(--bb-color-blue-primary);
}

.btn--primary:hover {
  background-color: var(--bb-color-blue-deepest);
  border-color: var(--bb-color-blue-deepest);
  color: var(--bb-text-inverse);
  box-shadow: var(--bb-shadow-blue);
}

/* Secundario — Outlined */
.btn--secondary {
  background-color: transparent;
  color: var(--bb-text-primary);
  border-color: var(--bb-color-gray-80);
}

.btn--secondary:hover {
  background-color: var(--bb-color-blue-tint);
  border-color: var(--bb-color-blue-primary);
  color: var(--bb-color-blue-primary);
}

/* Modificadores de forma y estilo */
.btn--pill {
  border-radius: var(--bb-radius-full);
  padding-left: var(--bb-space-10);
  padding-right: var(--bb-space-10);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--bb-color-surface-high);
  color: var(--bb-text-secondary);
  backdrop-filter: blur(8px);
}

.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: var(--bb-color-gray-40);
  color: var(--bb-text-primary);
}

.btn__icon {
  font-size: 1.2em;
  transition: transform var(--bb-duration-base) var(--bb-ease-out);
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}

/* Nav CTA */
.btn--nav {
  padding: var(--bb-space-2) var(--bb-space-5);
  font-size: var(--bb-text-xs);
  min-height: 36px;
}

/* Submit full-width */
.btn--submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--bb-space-4);
}