/* iOS 26 style - Glassmorphism + SF Pro */
:root {
  --p50: #FFF5F0;
  --p100: #FFE8DB;
  --p200: #FFCDB2;
  --p300: #FFB088;
  --p400: #FF9666;
  --p500: #FF7A45;
  --p600: #E8622E;
  --cream: #FFFBF7;
  --brown: #8B6356;
  --dark: #5D4037;
  --sage: #A8B5A0;
  --sage-d: #7A8B72;
  --purple: #4B2840;
  --ios-bg: #F9F6F2;
  --ios-border: rgba(139,99,86,0.12);
}

* {
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
}

body {
  background: linear-gradient(145deg, #FFFBF7 0%, #FFF3EC 45%, #FFE4D0 100%);
  min-height: 100vh;
}

/* Sidebar estilo iOS */
.sidebar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(40px);
  border-right: 0.5px solid var(--ios-border);
  box-shadow: 2px 0 20px rgba(0,0,0,0.02);
}

/* Cards con glassmorph */
.card, .card-glow {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(30px);
  border: 0.5px solid rgba(255,205,178,0.3);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.card-glow {
  border-color: rgba(255,150,102,0.3);
  box-shadow: 0 8px 24px rgba(255,107,53,0.08);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.05);
}

/* Botones estilo iOS */
.btn-p {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 40px;
  padding: 0.5rem 1.25rem;
  box-shadow: 0 2px 8px rgba(255,107,53,0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-p:active { transform: scale(0.97); opacity: 0.9; }

.btn-s {
  background: linear-gradient(135deg, #9FC49F 0%, #7A8B72 100%);
  color: white;
  font-weight: 600;
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(122,139,114,0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-s:active { transform: scale(0.97); }

.btn-ghost {
  background: rgba(255,232,219,0.4);
  border: 0.5px solid rgba(255,205,178,0.4);
  border-radius: 40px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--brown);
  transition: all 0.2s;
  cursor: pointer;
}
.btn-ghost:active { background: rgba(255,232,219,0.7); }

/* Inputs */
.inp {
  background: rgba(255,255,255,0.8);
  border: 0.5px solid var(--ios-border);
  border-radius: 14px;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  outline: none;
}
.inp:focus {
  background: white;
  border-color: var(--p500);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
}

/* Navegación */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  border-left: 3px solid transparent;
  color: var(--brown);
  font-weight: 500;
  transition: all 0.2s;
  width: 100%;
  background: none;
}
.nav-item:hover {
  background: rgba(255,150,102,0.08);
  padding-left: calc(1rem + 3px);
  border-left-color: rgba(255,122,69,0.4);
}
.nav-item.active {
  background: rgba(255,150,102,0.12);
  border-left-color: var(--p500);
  color: var(--dark);
  font-weight: 600;
}

/* Productos grid */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.7rem;
}
.prod-card {
  background: rgba(255,255,255,0.9);
  border: 0.5px solid var(--ios-border);
  border-radius: 20px;
  padding: 0.8rem 0.5rem;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}
.prod-card:active { transform: scale(0.96); }
.prod-card.top-item {
  border-color: var(--p400);
  background: linear-gradient(145deg, rgba(255,252,249,1), rgba(255,237,226,0.6));
}

/* Badges */
.badge {
  padding: 0.2rem 0.65rem;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 600;
}
.b-ok { background: rgba(167,216,167,0.25); color: #2d7a2d; }
.b-low { background: rgba(255,218,100,0.3); color: #8a6300; }
.b-urg { background: rgba(255,100,100,0.18); color: #a02020; }
.b-cash { background: rgba(168,181,160,0.22); color: var(--sage-d); }
.b-card { background: rgba(130,160,255,0.18); color: #3a56b5; }
.b-tr { background: rgba(180,150,240,0.18); color: #6b46c1; }

/* Animaciones */
.slide-in { animation: slideIn 0.32s cubic-bezier(0.2,0.9,0.4,1.1); }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,200,170,0.3);
  border-top: 3px solid var(--p500);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,150,102,0.3); border-radius: 10px; }

/* Gradiente de texto */
.peach-gradient-text {
  background: linear-gradient(135deg, #FF8C5A, #FF6B35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}