@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #4f46e5;
  --primary-light: #6366f1;
  --primary-dark: #4338ca;
  --secondary: #10b981;
  --background: #f9fafb;
  --surface: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}
body {
  @apply bg-background text-text-primary;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f8f9fa;
}

.main-content {
  margin-left: 250px;
  padding: 2rem;
  min-height: 100vh;
}
.tab-content {
  @apply transition-all duration-300 ease-in-out;
  padding: 20px;
}
/* Cards */
.card {
  @apply bg-surface rounded-xl shadow-lg p-6;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Buttons */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
  @apply bg-primary hover:bg-primary-dark text-white;
}

.btn-secondary {
  @apply bg-secondary hover:bg-emerald-600 text-white;
}
.btn-outline {
  @apply border border-gray-300 hover:border-primary hover:text-primary;
  margin-right: 5px;
}

.alert-duplicate {
  color: red;
  font-size: 0.9em;
}

#columnMapping select {
  width: 150px;
  display: inline-block;
  margin-right: 10px;
}

#cartTotal, #facturaTotal { 
  color: green; 
}
/* Table styles */
.table {
  @apply w-full rounded-lg overflow-hidden;
}

.table thead {
  @apply bg-gray-50;
}
.table th {
  @apply px-4 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider;
  vertical-align: middle;
}

.table td {
  @apply px-4 py-3 text-sm text-gray-800;
  vertical-align: middle;
}
.table tbody tr {
  @apply border-t border-gray-100 hover:bg-gray-50;
  animation: fadeIn 0.3s ease-out forwards;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}