/* =====================================================
   BUTTONS - Sistema de botones unificado
   Sprint 2: Sistema Visual Unificado

   Clases disponibles:
   - .btn-mercana-primary: Boton principal (fondo solido)
   - .btn-mercana-secondary: Boton secundario (outline)
   - .btn-mercana-ghost: Boton ghost (solo texto)
   - .btn-mercana-danger: Boton de peligro/eliminar
   - .btn-mercana-success: Boton de exito/confirmar

   Modificadores de tamanio:
   - .btn-sm: Pequenio
   - .btn-lg: Grande
   ===================================================== */

/* =====================================================
   ESTILOS BASE DE BOTONES
   ===================================================== */
.btn-mercana-primary,
.btn-mercana-secondary,
.btn-mercana-ghost,
.btn-mercana-danger,
.btn-mercana-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-all);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-mercana-primary:focus,
.btn-mercana-secondary:focus,
.btn-mercana-ghost:focus,
.btn-mercana-danger:focus,
.btn-mercana-success:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.btn-mercana-primary:disabled,
.btn-mercana-secondary:disabled,
.btn-mercana-ghost:disabled,
.btn-mercana-danger:disabled,
.btn-mercana-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* =====================================================
   BOTON PRIMARIO
   Uso: Acciones principales (Agregar al carrito, Enviar, etc.)
   ===================================================== */
.btn-mercana-primary {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.btn-mercana-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
}

.btn-mercana-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Efecto shimmer al hover */
.btn-mercana-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-mercana-primary:hover::before {
  left: 100%;
}

/* =====================================================
   BOTON SECUNDARIO (Outline)
   Uso: Acciones secundarias (Cancelar, Ver mas, etc.)
   ===================================================== */
.btn-mercana-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-mercana-secondary:hover {
  background: var(--color-primary);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-mercana-secondary:active {
  transform: translateY(0);
}

/* Variante con color secundario */
.btn-mercana-secondary.secondary-color {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-mercana-secondary.secondary-color:hover {
  background: var(--color-secondary);
  color: var(--text-inverse);
}

/* =====================================================
   BOTON GHOST
   Uso: Acciones terciarias, links sutiles
   ===================================================== */
.btn-mercana-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding: var(--spacing-2) var(--spacing-4);
}

.btn-mercana-ghost:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
}

.btn-mercana-ghost:active {
  background: rgba(var(--color-primary-rgb), 0.2);
}

/* =====================================================
   BOTON DANGER
   Uso: Acciones destructivas (Eliminar, Borrar, etc.)
   ===================================================== */
.btn-mercana-danger {
  background: var(--color-error);
  color: var(--text-inverse);
  border-color: var(--color-error);
  box-shadow: var(--shadow-md);
}

.btn-mercana-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.btn-mercana-danger:active {
  transform: translateY(0);
}

.btn-mercana-danger:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* Variante outline */
.btn-mercana-danger.outline {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-mercana-danger.outline:hover {
  background: var(--color-error);
  color: var(--text-inverse);
}

/* =====================================================
   BOTON SUCCESS
   Uso: Confirmaciones, exito
   ===================================================== */
.btn-mercana-success {
  background: var(--gradient-accent);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.btn-mercana-success:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.btn-mercana-success:active {
  transform: translateY(0);
}

.btn-mercana-success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* =====================================================
   MODIFICADORES DE TAMANIO
   ===================================================== */

/* Pequenio */
.btn-mercana-primary.btn-sm,
.btn-mercana-secondary.btn-sm,
.btn-mercana-ghost.btn-sm,
.btn-mercana-danger.btn-sm,
.btn-mercana-success.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  gap: var(--spacing-1);
}

/* Grande */
.btn-mercana-primary.btn-lg,
.btn-mercana-secondary.btn-lg,
.btn-mercana-ghost.btn-lg,
.btn-mercana-danger.btn-lg,
.btn-mercana-success.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--text-lg);
  gap: var(--spacing-3);
}

/* =====================================================
   BOTON CON ICONO
   ===================================================== */
.btn-mercana-primary i,
.btn-mercana-secondary i,
.btn-mercana-ghost i,
.btn-mercana-danger i,
.btn-mercana-success i,
.btn-mercana-primary .bi,
.btn-mercana-secondary .bi,
.btn-mercana-ghost .bi,
.btn-mercana-danger .bi,
.btn-mercana-success .bi {
  font-size: 1.1em;
  line-height: 1;
}

/* Solo icono (cuadrado) */
.btn-icon-only {
  padding: var(--spacing-3);
  aspect-ratio: 1;
}

.btn-icon-only.btn-sm {
  padding: var(--spacing-2);
}

.btn-icon-only.btn-lg {
  padding: var(--spacing-4);
}

/* =====================================================
   BOTON FULL WIDTH
   ===================================================== */
.btn-block {
  width: 100%;
}

/* =====================================================
   ESTADO DE CARGA
   ===================================================== */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  top: 50%;
  left: 50%;
  margin-left: -0.625em;
  margin-top: -0.625em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.75s linear infinite;
}

.btn-mercana-primary.btn-loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-right-color: white;
}

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

/* =====================================================
   GRUPO DE BOTONES
   ===================================================== */
.btn-group {
  display: inline-flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 576px) {
  .btn-mercana-primary,
  .btn-mercana-secondary,
  .btn-mercana-ghost,
  .btn-mercana-danger,
  .btn-mercana-success {
    padding: var(--spacing-2-5) var(--spacing-5);
    font-size: var(--text-sm);
  }

  .btn-mercana-primary.btn-lg,
  .btn-mercana-secondary.btn-lg,
  .btn-mercana-ghost.btn-lg,
  .btn-mercana-danger.btn-lg,
  .btn-mercana-success.btn-lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--text-base);
  }

  /* Full width en movil */
  .btn-mobile-block {
    width: 100%;
  }
}