* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mesa-btn {
  min-height: 100px;
  font-size: 1.25rem;
  border-radius: 1rem;
  transition: all 0.15s ease;
}

.mesa-btn:active {
  transform: scale(0.95);
}

.producto-btn {
  min-height: 80px;
  font-size: 1.1rem;
  border-radius: 1rem;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.producto-btn:active {
  transform: scale(0.95);
}

.mod-btn {
  min-height: 48px;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mod-btn.selected {
  border-color: #ea580c;
  background-color: #fff7ed;
}

.ticket-item {
  transition: all 0.15s ease;
}

.ticket-item:active {
  transform: scale(0.98);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#toast {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}

.category-tab {
  white-space: nowrap;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
}

.category-tab.active {
  background-color: #ea580c;
  color: white;
}

.category-tab:not(.active) {
  background-color: #e5e7eb;
  color: #374151;
}

.category-tab:first-child.active {
  background-color: #dc2626;
  box-shadow: 0 0 0 2px #fecaca;
}

.category-tab:first-child:not(.active) {
  background-color: #fee2e2;
  color: #dc2626;
}

.category-tab:active {
  transform: scale(0.95);
}

/* Hide scrollbar for catalog tabs */
#categoria-tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#categoria-tabs::-webkit-scrollbar {
  display: none;
}

.kpi-card {
  min-height: 100px;
}

/* Mobile table improvements */
@media (max-width: 640px) {
  .responsive-table td, .responsive-table th {
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
  }
  .responsive-table .hide-mobile {
    display: none;
  }
  .responsive-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
}
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}
button, a, input, select, textarea {
  min-height: 44px;
}
button, a {
  touch-action: manipulation;
}

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin {
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}