/* PURPOSE: Botón base + variantes (primary, secondary, tertiary, outline, ghost, link, label-m, badge).
   KEY CLASSES: .btn, .btn-{variant}, .btn-{size}, .btn-full, .has-light .btn-badge.
   DEPENDS ON: --btn-primary-* / --btn-secondary-* / --btn-outline-* (theme), --btn-radius (theme), --hg-spacing-* / --hg-color-* / --hg-typo-* (config).
   DEMO: dist/componentes.html#buttons */

/* ============================================
   BASE
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hg-spacing-8);
  font-family: var(--hg-typo-font-family-primary-regular);
  font-size: var(--hg-typo-font-size-13);
  font-weight: var(--hg-typo-font-weight-400);
  line-height: 1;
  text-decoration: none;
  border: var(--border-width) var(--border-style) transparent;
  border-radius: var(--btn-radius, var(--border-radius));
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
  box-sizing: border-box;
}

/* Iconos heredan el color de texto del botón.
   Reemplaza ~30 reglas específicas (`btn-primary svg path`, etc.) por una sola. */
.btn svg,
.btn svg * {
  fill: currentColor;
  stroke: currentColor;
}

.btn svg circle:not([fill]) {
  fill: none;
}

/* ============================================
   TAMAÑOS — réplica Ramp (dos tamaños canon)
   sm  = "See a demo"          (nav / pill)
   lg  = "Get started for free" (hero CTA)

   El padding-bottom de 3px es una corrección óptica:
   con line-height 1 las fuentes geométricas (Neutrif /
   Lausanne) sitúan el texto visualmente bajo respecto al
   centro geométrico. 3px lo sube a su sitio.
   ============================================ */
.btn-sm {
  padding: 0 16px 3px;
  font-size: 14px;
  line-height: 20px;
  height: 40px;        /* fija, no min-height */
  min-height: 40px;
}

.btn-lg {
  padding: 0 16px 3px;
  font-size: 15px;
  line-height: 21px;
  height: 42px;
  min-height: 42px;
}

@media (min-width: 992px) {
  .btn-lg {
    padding: 0 20px 3px;
    font-size: 16px;
    line-height: 22px;
    height: 51px;
    min-height: 51px;
  }
}

.btn-full { width: 100%; }

/* ============================================
   PRIMARY
   ============================================ */
.btn-primary {
  color: var(--btn-primary-color, var(--hg-color-white));
  background-color: var(--btn-primary-bg, var(--hg-color-primary));
  border-color: var(--btn-primary-bg, var(--hg-color-primary));
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--btn-primary-hover-bg, var(--hg-color-dark-grey));
  border-color: var(--btn-primary-hover-bg, var(--hg-color-dark-grey));
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary.disabled {
  background-color: var(--hg-color-bg-light);
  border-color: var(--hg-color-bg-light);
  color: var(--hg-color-dark-grey);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   SECONDARY
   ============================================ */
.btn-secondary {
  color: var(--btn-secondary-color, var(--hg-color-black));
  background-color: var(--btn-secondary-bg, var(--hg-color-white));
  border-color: var(--btn-secondary-color, var(--hg-color-black));
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  background-color: var(--btn-secondary-hover-bg, var(--hg-color-white));
  border-color: var(--hg-color-dark-grey);
}

.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-secondary.disabled {
  background-color: var(--hg-color-bg-light);
  border-color: var(--hg-color-bg-light);
  color: var(--hg-color-dark-grey);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   OUTLINE
   ============================================ */
.btn-outline {
  color: var(--btn-outline-color, var(--hg-color-primary));
  background-color: transparent;
  border-color: var(--btn-outline-border, var(--hg-color-primary));
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  background-color: var(--btn-outline-hover-bg, var(--hg-color-primary));
  color: var(--btn-outline-hover-color, var(--hg-color-white));
}

/* ============================================
   GHOST (sin borde, hover suave)
   ============================================ */
.btn-ghost {
  color: var(--btn-ghost-color, var(--hg-color-primary));
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--btn-ghost-hover-bg, var(--hg-color-light-grey));
}

/* ============================================
   TERTIARY (texto plano, sin fondo)
   ============================================ */
.btn-tertiary {
  background-color: transparent;
  border: 0 solid transparent;
  color: var(--hg-color-primary);
  height: auto;
  min-height: auto;
  padding: 6px 0;
  line-height: 1;
  min-width: 24px;
}

.btn-tertiary:hover,
.btn-tertiary:focus { background-color: transparent; }

.btn-tertiary.active {
  border-bottom: 0.5px solid var(--hg-color-primary);
}

.btn-tertiary:disabled,
.btn-tertiary[disabled],
.btn-tertiary.disabled {
  color: var(--hg-color-dark-grey);
  pointer-events: none;
  cursor: default;
}

/* ============================================
   LABEL-M (similar a tertiary, con tracking)
   ============================================ */
.btn-label-m {
  background-color: transparent;
  border: 0 solid transparent;
  color: var(--hg-color-primary);
  height: auto;
  min-height: auto;
  padding: 6px 0;
  line-height: 1;
  letter-spacing: 0.16em;
}

.btn-label-m:hover,
.btn-label-m:focus {
  font-family: var(--hg-typo-font-family-primary-bold);
  font-weight: var(--hg-typo-font-weight-500);
}

.btn-label-m.active {
  border-bottom: 0.5px solid var(--hg-color-primary);
}

.btn-label-m:disabled,
.btn-label-m[disabled],
.btn-label-m.disabled {
  color: var(--hg-color-dark-grey);
  pointer-events: none;
  cursor: default;
}

/* ============================================
   LINK (texto subrayable, sin caja)
   ============================================ */
.btn-link {
  background-color: transparent;
  border: 0;
  color: var(--hg-color-primary);
  padding: 0;
  min-height: auto;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--hg-color-dark-grey);
}

.btn-link:disabled,
.btn-link[disabled],
.btn-link.disabled {
  color: var(--hg-color-dark-grey);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================
   BADGE (chip pequeño con padding)
   ============================================ */
.btn-badge {
  min-height: auto;
  padding: var(--hg-spacing-4) var(--hg-spacing-12);
  background-color: transparent;
  color: var(--hg-color-dark-grey);
  font-size: var(--hg-typo-font-size-12);
}

.btn-badge:hover,
.btn-badge:focus,
.btn-badge.active {
  color: var(--hg-color-primary);
  background-color: transparent;
}

.btn-badge:disabled,
.btn-badge[disabled],
.btn-badge.disabled {
  color: var(--hg-color-middle-grey);
  pointer-events: none;
}

/* Variante para fondos oscuros */
.has-light .btn-badge { color: var(--hg-color-white); }
.has-light .btn-badge:hover,
.has-light .btn-badge.active { color: var(--hg-color-white); }
.has-light .btn-badge:disabled { color: var(--hg-color-light-grey); }