/* ===== VENDLY VE — Sistema de diseño ===== */

:root {
  --vendly-bg: #F4F6F8;
  --vendly-white: #FFFFFF;
  --vendly-primary: #00A86B;
  --vendly-accent: #FF6B35;
  --vendly-text: #14181C;
  --vendly-text-soft: #8B95A1;
  --vendly-border: #F0F2F4;
  --vendly-gray-light: #E8EAED;
  --vendly-blue: #3B82F6;
  --vendly-yellow: #FFA726;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--vendly-bg);
  letter-spacing: -0.01em;
  color: var(--vendly-text);
}

.font-display { letter-spacing: -0.02em; }

.card-elevated {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
}

.skeleton {
  background: linear-gradient(90deg, #f0f0ee 25%, #e8e8e5 50%, #f0f0ee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.pill-active {
  background: var(--vendly-primary);
  color: white;
  box-shadow: 0 4px 12px -2px rgba(0,168,107,0.4);
}

.btn-primary {
  background: var(--vendly-primary);
  color: white;
  box-shadow: 0 4px 12px -2px rgba(0,168,107,0.4);
}

.btn-accent {
  background: var(--vendly-accent);
  color: white;
}

.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vendly-bg);
}

.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }

.product-img { aspect-ratio: 1; object-fit: cover; }

::-webkit-scrollbar { display: none; }

.msg-yo { background: var(--vendly-primary); color: white; border-radius: 20px 20px 4px 20px; }
.msg-otro { background: var(--vendly-white); color: var(--vendly-text); border-radius: 20px 20px 20px 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }