/* ============================================
   MercadoAgro.mx — Design Tokens & Global CSS
   v1.0 MVP — Unified token system
   ============================================ */

:root {
  --ma-green-50: #f0f9f4;
  --ma-green-100: #dcf1e4;
  --ma-green-200: #bbe3cd;
  --ma-green-300: #8eccad;
  --ma-green-400: #5cb086;
  --ma-green-500: #3a936a;
  --ma-green-600: #2b7756;
  --ma-green-700: #245f47;
  --ma-green-800: #1f4c3a;
  --ma-green-900: #1a3f31;
  --ma-green-950: #0e231c;
  --ma-yellow-400: #fbbf24;
  --ma-yellow-500: #f59e0b;
  --ma-earth-700: #5d4037;
  --ma-surface: #fcfdfc;
  --ma-surface-dark: #0e231c;
  --ma-sidebar-w: 16rem;
  --ma-header-h: 4rem;
  --ma-bottom-nav-h: 4.5rem;
}

/* === Base === */
* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ma-green-300); border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: var(--ma-green-800); }

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,147,106,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(59,147,106,0); }
}
@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.animate-fade-in { animation: fadeIn 0.4s ease-out both; }
.animate-slide-left { animation: slideInLeft 0.3s ease-out both; }
.animate-slide-up { animation: slideUp 0.5s ease-out both; }
.animate-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-countdown { animation: countdownPulse 1s ease-in-out infinite; }
.animate-float { animation: floatBadge 2s ease-in-out infinite; }

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* === Glass === */
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.25);
}
.dark .glass {
  background: rgba(14,35,28,0.8);
  border-color: rgba(255,255,255,0.08);
}

/* === Card Hover === */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -4px rgba(36,95,71,0.12);
}

/* === Shimmer Loading === */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* === Sidebar === */
#ma-sidebar {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
#ma-sidebar.sidebar-closed {
  transform: translateX(-100%);
}
@media (min-width: 768px) {
  #ma-sidebar { transform: translateX(0) !important; }
}

/* === Sidebar overlay (mobile) === */
#ma-sidebar-overlay {
  transition: opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}
#ma-sidebar-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

/* === Status Badges === */
.badge-creada { background: #e0f2fe; color: #0369a1; }
.badge-confirmada { background: #dcfce7; color: #15803d; }
.badge-pagada { background: #fef9c3; color: #a16207; }
.badge-transito { background: #dbeafe; color: #1d4ed8; }
.badge-entregada { background: #d1fae5; color: #047857; }
.badge-disputa { background: #fee2e2; color: #b91c1c; }
.badge-devolucion { background: #fce7f3; color: #be185d; }
.badge-cancelada { background: #f3f4f6; color: #6b7280; }

/* === Role Switcher === */
.role-pill {
  transition: all 0.2s ease;
  cursor: pointer;
}
.role-pill:hover { background: var(--ma-green-100); }
.role-pill.active {
  background: var(--ma-green-700);
  color: white;
}
.dark .role-pill:hover { background: var(--ma-green-900); }
.dark .role-pill.active { background: var(--ma-green-500); }

/* === Trust Score Ring === */
.trust-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  position: relative;
}
.trust-ring::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--ma-green-400);
  border-top-color: transparent;
  animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Bento Grid === */
.bento-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
}

/* === Bottom Nav (mobile only) === */
#ma-bottom-nav {
  transition: transform 0.3s ease;
}

/* === Material Symbols === */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* === Print === */
@media print {
  #ma-sidebar, #ma-bottom-nav, #ma-header { display: none !important; }
  .md\:ml-64 { margin-left: 0 !important; }
}