/**
 * Quiniela Liga MX - Botones
 * Estilos de todos los botones de la aplicación
 */

/* ===== BUTTONS ===== */
.btn {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--secondary-color);
  color: var(--text-dark);
}

.btn-primary:hover:not(:disabled) {
  background: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--primary-color);
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary-color);
  color: white;
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-outline-white:hover:not(:disabled) {
  background: white;
  color: var(--primary-color);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn-full {
  width: 100%;
}

.btn-hero {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 10px 30px rgba(255, 184, 28, 0.3);
}

.btn-hero:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 184, 28, 0.4);
}