/* ============================================================
   Fiflouu Design System · Botones
   Depende de: colors_and_type.css
   ============================================================ */

.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  user-select: none;
  padding: 0 var(--space-5);
  height: 44px;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: var(--ring-focus); }

/* --- tamaños --- */
.btn--sm { height: 36px; font-size: var(--fs-sm); padding: 0 var(--space-4); border-radius: var(--radius-sm); gap: var(--space-2); }
.btn--md { height: 44px; font-size: var(--fs-sm); padding: 0 var(--space-5); }
.btn--lg { height: 52px; font-size: var(--fs-base); padding: 0 var(--space-6); border-radius: var(--radius-md); }
.btn--block { display: flex; width: 100%; }

/* --- iconos dentro del botón --- */
.btn svg, .btn [data-lucide] { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; }
.btn--sm svg, .btn--sm [data-lucide] { width: 16px; height: 16px; }
.btn--lg svg, .btn--lg [data-lucide] { width: 20px; height: 20px; }

/* ---------- VARIANTES ---------- */

/* primary — morado, una sola por pantalla */
.btn--primary {
  background: var(--purple-600);
  color: var(--fg-inverse);
}
.btn--primary:hover { background: var(--purple-700); }
.btn--primary:active { background: var(--purple-800); transform: scale(0.98); }

/* secondary — gris neutro con borde */
.btn--secondary {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-default);
}
.btn--secondary:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.btn--secondary:active { background: var(--gray-200); }

/* ghost — sin fondo, solo texto morado */
.btn--ghost {
  background: transparent;
  color: var(--purple-600);
}
.btn--ghost:hover { background: var(--purple-50); }
.btn--ghost:active { background: var(--purple-100); }

/* accent — verde, para confirmaciones o CTAs sobre fondo morado */
.btn--accent {
  background: var(--green-500);
  color: var(--fg-inverse);
}
.btn--accent:hover { background: var(--green-600); }
.btn--accent:active { background: var(--green-700); transform: scale(0.98); }

/* danger — rojo, para destructivos */
.btn--danger {
  background: var(--error-500);
  color: var(--fg-inverse);
}
.btn--danger:hover { background: var(--error-600); }
.btn--danger:active { background: var(--error-700); }

/* link — sin padding, subraya en hover */
.btn--link {
  background: transparent;
  color: var(--fg-link);
  padding: 0;
  height: auto;
  border-radius: 0;
}
.btn--link:hover { text-decoration: underline; }

/* icon-only — cuadrado, solo para acciones secundarias con aria-label */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg-2);
  border: 1px solid transparent;
}
.btn--icon:hover { background: var(--bg-sunken); color: var(--fg-1); }
.btn--icon:active { background: var(--gray-200); }
.btn--icon.btn--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.btn--icon.btn--lg { width: 48px; height: 48px; }

/* ---------- ESTADOS ---------- */

/* disabled */
.btn[disabled], .btn.is-disabled {
  background: var(--gray-100);
  color: var(--fg-4);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn--primary[disabled], .btn--primary.is-disabled,
.btn--accent[disabled],  .btn--accent.is-disabled,
.btn--danger[disabled],  .btn--danger.is-disabled {
  background: var(--gray-100);
  color: var(--fg-4);
}

/* loading — reemplaza contenido con spinner */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--fg-inverse);
  animation: btn-spin 600ms linear infinite;
}
.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after,
.btn--link.is-loading::after,
.btn--icon.is-loading::after { color: var(--fg-2); }

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

/* ---------- GRUPO DE BOTONES ---------- */

.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.btn-group .btn:focus-visible { position: relative; z-index: 1; }