/* ╔══════════════════════════════════════════════════════════════╗
   ║  NIKE OPERATIONS — DESIGN SYSTEM v9                        ║
   ║  "High Contrast Command Center"                            ║
   ║  Bold · Legible · Professional · Dark                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
  /* Brand */
  --red:         #E11D2C;
  --red-2:       #c0111e;
  --orange:      #FF6B00;
  --green:       #16A34A;
  --green-bright:#22C55E;
  --blue:        #2563EB;
  --blue-bright: #60a5fa;
  --amber:       #D97706;
  --purple:      #7C3AED;
  --teal:        #0891B2;

  /* Gradients */
  --g-main:   linear-gradient(135deg, #E11D2C 0%, #FF6B00 100%);
  --g-vert:   linear-gradient(180deg, #E11D2C 0%, #FF6B00 100%);
  --g-subtle: linear-gradient(135deg, rgba(225,29,44,.12) 0%, rgba(255,107,0,.06) 100%);

  /* Backgrounds — más claros que v8 para mayor contraste de contenido */
  --bg:          #09090d;
  --bg-2:        #0e0e14;
  --surface:     #131318;
  --surface-2:   #1a1a22;
  --surface-3:   #22222c;
  --surface-hover:#1e1e28;

  /* Borders — más visibles */
  --border:        #28283a;
  --border-2:      #363650;
  --border-active: rgba(225,29,44,.7);

  /* Text — contraste significativamente mejorado */
  --text:   #f2f2fa;
  --text-2: #b8b8d4;   /* era #9090a8 — mucho más legible */
  --text-3: #7878a0;   /* era #50506a — visible en todos los contextos */
  --text-4: #545470;   /* muted pero aún legible */

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.7);
  --shadow:    0 4px 20px rgba(0,0,0,.8);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.9);
  --glow-red:  0 0 24px rgba(225,29,44,.3);
  --glow-orange:0 0 20px rgba(255,107,0,.25);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html, body {
  background: var(--bg);
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
  background: #000 !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(225,29,44,.9),
    0 2px 0 rgba(225,29,44,.2),
    0 8px 32px rgba(0,0,0,.95) !important;
  height: 58px !important;
  padding: 0 20px !important;
  position: relative;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, #E11D2C 0%, #FF6B00 40%, transparent 65%);
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONNECTION BADGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.conn-btn {
  border-radius: 6px !important;
  font-size: 10px !important;
  padding: 5px 12px !important;
  letter-spacing: .09em !important;
  gap: 6px !important;
}

.conn-btn::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conn-btn.online {
  color: #4ade80 !important;
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.3) !important;
}
.conn-btn.online::before {
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E, 0 0 14px rgba(34,197,94,.4);
  animation: liveGlow 2s ease-in-out infinite;
}
@keyframes liveGlow {
  0%,100% { box-shadow: 0 0 4px #22C55E, 0 0 8px rgba(34,197,94,.3); }
  50%      { box-shadow: 0 0 10px #22C55E, 0 0 20px rgba(34,197,94,.5); }
}

.conn-btn.offline {
  color: #f87171 !important;
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.35) !important;
}
.conn-btn.offline::before { background: #ef4444; }

.conn-btn.reconnecting {
  color: #fcd34d !important;
  background: rgba(252,211,77,.09) !important;
  border-color: rgba(252,211,77,.3) !important;
}
.conn-btn.reconnecting::before { background: #f59e0b; animation: liveGlow 1s ease-in-out infinite; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS (sala)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
}

.card::before { display: none !important; }
.card::after  { display: none !important; }

.card:hover {
  border-color: var(--border-2) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.7) !important;
  transform: translateY(-2px) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV CARDS (bodega home)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s, background .15s !important;
  min-height: 140px !important;
  position: relative;
  overflow: hidden;
}

/* subtle inner glow gradient */
.nav-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-subtle);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  border-radius: inherit;
}
.nav-card::after { display: none !important; }

.nav-card:hover {
  background: var(--surface-2) !important;
  border-color: rgba(225,29,44,.4) !important;
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.75), var(--glow-red) !important;
}
.nav-card:hover::before { opacity: 1; }

.nav-card:active {
  transform: scale(.95) !important;
  transition: transform .08s !important;
  box-shadow: var(--shadow-sm) !important;
}

.nav-card-icon i {
  filter: drop-shadow(0 2px 8px currentColor) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.nav-card:hover .nav-card-icon i { transform: scale(1.22) !important; }

.nav-card-label {
  font-size: 15px !important;
  letter-spacing: .07em !important;
  color: var(--text) !important;
}

.nav-card-sub {
  color: var(--text-3) !important;
  font-size: 10px !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
}

.nav-badge {
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 12px rgba(225,29,44,.55) !important;
  letter-spacing: .03em !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAT CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat, .stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .15s, border-color .2s, box-shadow .2s !important;
  position: relative;
  overflow: hidden;
}

.stat::before, .stat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-main);
  opacity: .35;
  transition: opacity .2s, height .2s;
  pointer-events: none;
}
.stat::after, .stat-card::after { display: none !important; }

.stat:hover, .stat-card:hover {
  border-color: var(--border-2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.65) !important;
}
.stat:hover::before, .stat-card:hover::before { opacity: .9; height: 3px; }

/* ── Stat text contrast ── */
.stat-label {
  color: var(--text-3) !important;
  font-size: 9px !important;
  letter-spacing: .15em !important;
}
.stat-val {
  font-size: 32px !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ORDER CARDS (bodega)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.oc {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color .2s, background .15s, box-shadow .2s, transform .15s !important;
  border-left: 3px solid var(--border-2) !important;
}

.oc::before, .oc::after { display: none !important; }

.oc.pendiente  { border-left-color: #F59E0B !important; }
.oc.en_proceso { border-left-color: #3B82F6 !important; }

.oc:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.55) !important;
}

@keyframes newOrderPulse {
  0%   { border-left-color: #F59E0B; box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  50%  { border-left-color: #FCD34D; box-shadow: 0 0 0 5px rgba(245,158,11,.1); }
  100% { border-left-color: #F59E0B; box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.oc.new-flash { animation: newOrderPulse .5s ease 4 !important; }

/* ── Order card text contrast ── */
.oc-vendor {
  color: var(--text) !important;
  font-size: 17px !important;
}
.oc-time {
  color: var(--text-4) !important;
  font-size: 11px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ITEM TABLE (inside order cards)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.it tr:hover td { background: var(--surface-2) !important; }

.it th {
  color: var(--text-4) !important;
  font-size: 9px !important;
  letter-spacing: .13em !important;
  border-bottom-color: var(--border) !important;
}
.it td {
  color: var(--text-2) !important;      /* era #80809a — ahora #b8b8d4 */
  border-bottom-color: var(--border) !important;
  font-size: 12px !important;
}
.it-sc   { color: var(--text)   !important; font-size: 13px !important; }
.it-desc { color: var(--text-3) !important; font-size: 10px !important; }
.it-qty  { color: var(--text)   !important; font-size: 16px !important; font-weight: 900 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BIN BADGE — Mucho más legible
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bin {
  background: rgba(37,99,235,.28) !important;
  color: #bfdbfe !important;                  /* era #93c5fd */
  border: 1px solid rgba(59,130,246,.45) !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  box-shadow: 0 0 10px rgba(37,99,235,.18), inset 0 0 0 1px rgba(147,197,253,.1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATUS BADGES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-pendiente, .badge-status-pendiente {
  background: rgba(245,158,11,.15) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}
.sp-en_proceso, .badge-status-en_proceso {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59,130,246,.35) !important;
}
.sp-listo, .badge-status-listo {
  background: rgba(34,197,94,.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34,197,94,.35) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REPO POR HORA — Tablas y secciones
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rh-section, .excel-section, .hw-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}

.excel-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-main);
  border-radius: 12px 12px 0 0;
}

.rh-title  { color: var(--text)   !important; font-size: 15px !important; }
.rh-sub    { color: var(--text-3) !important; font-size: 11px !important; }

.rh-table tr:hover td { background: var(--surface-2) !important; }
.rh-table th {
  color: var(--text-4) !important;
  font-size: 9px !important;
  letter-spacing: .13em !important;
  border-bottom-color: var(--border) !important;
}
.rh-table td {
  color: var(--text-2) !important;
  border-bottom-color: var(--border) !important;
}
.rh-sc   { color: var(--text)   !important; font-size: 13px !important; }
.rh-desc { color: var(--text-3) !important; font-size: 10px !important; }
.rh-hora { color: var(--text)   !important; font-size: 15px !important; }

.rh-empty-title  { color: var(--text-3) !important; }
.rh-empty-icon   { color: var(--border-2) !important; opacity: .6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXCEL SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.excel-section { position: relative; overflow: hidden; border-radius: 12px !important; }
.excel-icon { background: var(--surface-2) !important; border: 1px solid var(--border-2) !important; border-radius: 10px !important; }
.excel-title   { color: var(--text)   !important; }
.excel-meta    { color: var(--text-3) !important; }
.excel-meta.loaded { color: #4ade80 !important; }
.excel-updated { color: var(--text-4) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-red {
  background: var(--g-main) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(225,29,44,.35) !important;
}
.btn-red:hover {
  box-shadow: 0 8px 28px rgba(225,29,44,.5) !important;
  transform: translateY(-1px) !important;
}

.btn-primary, .btn-login {
  background: var(--g-main) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(225,29,44,.35), var(--glow-red) !important;
}
.btn-primary:hover, .btn-login:hover {
  opacity: .92 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(225,29,44,.5), var(--glow-red) !important;
}
.btn-primary:active, .btn-login:active {
  transform: scale(.97) !important;
}

.btn-ghost {
  color: var(--text-2) !important;
  border-color: var(--border-2) !important;
}
.btn-ghost:hover {
  color: var(--text) !important;
  border-color: var(--text-3) !important;
  background: var(--surface-2) !important;
}

/* ub buttons (bodega upload) */
.ub {
  border-radius: 8px !important;
  color: var(--text-2) !important;
  border-color: var(--border-2) !important;
}
.ub:hover { color: var(--text) !important; border-color: var(--text-3) !important; }
.ub.primary { background: var(--text) !important; color: #060608 !important; border-color: var(--text) !important; }
.ub.orange  { background: var(--orange) !important; color: #fff !important; border-color: var(--orange) !important; box-shadow: 0 4px 14px rgba(255,107,0,.3) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tab, .fb {
  border-radius: 6px !important;
  transition: background .15s, color .15s, transform .12s, box-shadow .15s !important;
  background: transparent !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}
.tab::before, .tab::after, .fb::before, .fb::after { display: none !important; }

.tab.active, .fb.active {
  background: var(--g-main) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(225,29,44,.35) !important;
  font-weight: 900 !important;
}
.tab:not(.active):hover, .fb:not(.active):hover {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border-color: var(--border-2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INPUTS & FORMS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
input, select, textarea {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input::placeholder, textarea::placeholder { color: var(--text-4) !important; }

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(225,29,44,.14), 0 0 16px rgba(225,29,44,.08) !important;
}

input[type="checkbox"] { accent-color: var(--red) !important; }

/* date selects */
.date-sel {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  color: var(--text-2) !important;
}
.date-sel:focus { color: var(--text) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROGRESS BARS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prog-fill, .oprog-fill, .progress-fill {
  background: var(--g-main) !important;
  box-shadow: 0 0 10px rgba(225,29,44,.5), 0 0 3px rgba(255,107,0,.3) !important;
  border-radius: 99px !important;
  transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}
.prog, .oprog {
  background: var(--surface-3) !important;
  border-radius: 99px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SENT ORDERS (sala)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sent-order {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--border-2) !important;
  transition: border-left-color .2s, box-shadow .2s, background .15s !important;
}
.sent-order.pendiente  { border-left-color: #F59E0B !important; }
.sent-order.en_proceso { border-left-color: #3B82F6 !important; }
.sent-order.listo      { border-left-color: #22C55E !important; }
.sent-order:hover {
  background: var(--surface-2) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.55) !important;
}

.sent-title { color: var(--text)   !important; }
.sent-items { color: var(--text-3) !important; font-size: 11px !important; line-height: 1.6 !important; }
.sent-time  { color: var(--text-4) !important; font-size: 10px !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIZE ITEMS (sala)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.size-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
  transition: background .12s, border-color .12s, transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s !important;
}
.size-item::before, .size-item::after { display: none !important; }

.size-item:not(.no-bin):hover {
  border-color: var(--red) !important;
  background: rgba(225,29,44,.08) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.6), 0 0 14px rgba(225,29,44,.18) !important;
}
.size-item:not(.no-bin):active {
  transform: scale(.96) !important;
  transition: transform .07s !important;
}
.size-item.has-qty {
  border-color: var(--orange) !important;
  background: rgba(255,107,0,.1) !important;
  box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 6px 22px rgba(255,107,0,.14) !important;
}
.size-num { font-size: 30px !important; letter-spacing: -.01em !important; }
.size-label { color: var(--text-4) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST NOTIFICATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#_toast, .toast {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-2) !important;
  border-left: 4px solid var(--red) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.95), 0 0 0 1px rgba(225,29,44,.1) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  padding: 13px 20px !important;
  min-width: 260px !important;
  max-width: 380px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HISTORY CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hc {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  transition: background .15s, border-color .2s, transform .15s;
}
.hc:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  transform: translateX(3px);
}

.hc-vendor { color: var(--text)   !important; }
.hc-time   { color: var(--text-4) !important; }
.hc-done   { color: #4ade80 !important; font-weight: 600; }
.hc-tag    { background: var(--surface-3) !important; color: var(--text-3) !important; border-color: var(--border-2) !important; font-size: 10px !important; }
.hc-tag .hc-bin { color: #93c5fd !important; font-weight: 600 !important; }

/* day group header */
.day-title { color: var(--text) !important; }
.day-stats { color: var(--text-3) !important; }
.day-stats strong { color: var(--text-2) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHANGELOG
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#changelogContent > div {
  transition: background .15s, border-left-color .15s, transform .15s;
  border-radius: 6px;
}
#changelogContent > div:hover {
  background: var(--surface-2) !important;
  transform: translateX(3px) !important;
  border-left-color: var(--red) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EMPTY STATES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty, .rh-empty { color: var(--text-3) !important; }
.rh-empty-icon svg, .empty-icon svg { stroke: var(--border-2) !important; }
.empty-title { color: var(--text-3) !important; }
.empty-sub   { color: var(--text-4) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STOCK BANNER (sala)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stock-banner { border-radius: 8px !important; }
.stock-ok   { background: rgba(22,163,74,.08) !important; border: 1px solid rgba(34,197,94,.25) !important; }
.stock-none { background: rgba(217,119,6,.08) !important; border: 1px solid rgba(245,158,11,.25) !important; }
.stock-text.ok   { color: #4ade80 !important; }
.stock-text.none { color: #fb923c !important; }
.stock-sub   { color: var(--text-3) !important; }
.stock-updated { color: var(--text-4) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HASH WALL (sala)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hw-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.hw-box {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  transition: border-color .15s, background .15s !important;
}
.hw-box:hover {
  border-color: rgba(225,29,44,.35) !important;
  background: var(--surface-2) !important;
}
.hw-box-label { color: var(--text-2) !important; }
.hw-tab.active {
  color: var(--text) !important;
  border-bottom-color: var(--red) !important;
}
.hw-total-txt { color: var(--text-2) !important; }
.hw-total-num { color: var(--orange) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROD HEADER (sala buscar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prod-bin-badge {
  background: rgba(37,99,235,.2) !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  color: #bfdbfe !important;
  box-shadow: 0 0 12px rgba(37,99,235,.12) !important;
}
.prod-meta { color: var(--text-3) !important; }
.cart-bin {
  background: rgba(37,99,235,.25) !important;
  border: 1px solid rgba(59,130,246,.4) !important;
  color: #bfdbfe !important;
}
.cart-size { color: var(--text) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BACK BUTTON (bodega section)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.back-btn {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: var(--text-2) !important;
  transition: background .15s, border-color .15s, transform .12s !important;
}
.back-btn:hover {
  background: var(--surface-3) !important;
  border-color: rgba(225,29,44,.4) !important;
  color: var(--text) !important;
  transform: translateX(-3px) !important;
}

/* section title */
.section-title-bar {
  color: var(--text) !important;
  animation: slideInLeft .22s ease !important;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HAMBURGER MENU
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hbg-menu {
  background: #09090f !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) !important;
  overflow: hidden;
}
.hbg-item {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  transition: background .12s, color .12s, padding-left .12s !important;
  font-size: 13px !important;
}
.hbg-item:hover, .hbg-item:active {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  padding-left: 22px !important;
}
.hbg-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  transition: background .15s, border-color .15s !important;
}
.hbg-btn:hover {
  background: var(--surface-2) !important;
  border-color: rgba(225,29,44,.35) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SWOOSH BUTTON (bodega notif)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.swoosh-btn img {
  filter: brightness(0) invert(1) !important;
  opacity: .45;
  transition: opacity .2s, transform .2s !important;
}
.swoosh-btn:hover img {
  opacity: .95 !important;
  transform: scale(1.12) !important;
}
.swoosh-btn.pending img {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(2776%) hue-rotate(344deg) brightness(97%) contrast(115%) !important;
  animation: swooshPulseNew .8s ease-in-out infinite !important;
}
@keyframes swooshPulseNew {
  0%,100% { opacity: 1; filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(2776%) hue-rotate(344deg) brightness(97%) contrast(115%); }
  50%     { opacity: .6; filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(2776%) hue-rotate(344deg) brightness(200%) contrast(115%) drop-shadow(0 0 8px #E11D2C); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VENDOR CARD (sala login)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vc {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.95) !important;
  animation: scaleIn .35s cubic-bezier(.34,1.56,.64,1) both !important;
}
.vc-btn {
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
  border-radius: 10px !important;
}
.vc-btn:hover { border-color: var(--text-3) !important; color: var(--text) !important; }
.vc-btn.selected {
  border-color: var(--text) !important;
  background: var(--text) !important;
  color: #060608 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes badgePop {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(3deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.card, .stat, .stat-card { animation: fadeUp .28s ease both; }

/* Staggered entry for nav cards */
.nav-card:nth-child(1) { animation: fadeUp .3s .03s ease both; }
.nav-card:nth-child(2) { animation: fadeUp .3s .07s ease both; }
.nav-card:nth-child(3) { animation: fadeUp .3s .11s ease both; }
.nav-card:nth-child(4) { animation: fadeUp .3s .15s ease both; }
.nav-card:nth-child(5) { animation: fadeUp .3s .19s ease both; }
.nav-card:nth-child(6) { animation: fadeUp .3s .23s ease both; }
.nav-card:nth-child(7) { animation: fadeUp .3s .27s ease both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SELECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
::selection { background: rgba(225,29,44,.32); color: #fff; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE ADJUSTMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .card, .nav-card, .stat, .stat-card, .oc { animation-delay: 0s !important; }
  .nav-card:hover { transform: translateY(-3px) scale(1.01) !important; }
  .size-item:not(.no-bin):hover { transform: translateY(-2px) scale(1.02) !important; }
  .oc:hover { transform: translateX(2px) !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDUCED MOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Friendly operations polish */
.hbg-wrap { position: relative; }

.hbg-btn,
.tb-btn,
.logout-btn,
.back-btn,
.tab,
.filter-btn,
.btn,
button {
  touch-action: manipulation;
}

.hbg-btn:focus-visible,
.hbg-item:focus-visible,
.tb-btn:focus-visible,
.logout-btn:focus-visible,
.back-btn:focus-visible,
.tab:focus-visible,
.filter-btn:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(255,255,255,.9) !important;
  outline-offset: 2px !important;
}

.hbg-menu {
  min-width: 218px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.04) !important;
}

.hbg-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.hbg-item + .hbg-item {
  margin-top: 2px !important;
}

.hbg-greeting {
  margin: 2px 4px 8px !important;
  padding: 8px 8px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: var(--text-2, #b8b8d4) !important;
}

.tb-btn,
.logout-btn,
.back-btn {
  min-height: 36px !important;
  border-radius: 8px !important;
}

.topbar-right,
.tb-right {
  min-width: 0;
}

.section-bar {
  gap: 10px !important;
}

.nav-card {
  cursor: pointer;
}

.nav-card:focus-visible {
  outline: 2px solid rgba(255,255,255,.85) !important;
  outline-offset: 3px !important;
}

@media (max-width: 640px) {
  .topbar,
  .tb-left,
  .topbar-left {
    gap: 8px !important;
  }

  .tb-title,
  .topbar-title {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hbg-menu {
    position: fixed !important;
    top: 62px !important;
    right: 10px !important;
    left: auto !important;
    width: min(280px, calc(100vw - 20px)) !important;
  }

  .hbg-item {
    min-height: 46px !important;
    font-size: 13px !important;
  }

  .tb-badge,
  .badge {
    display: none !important;
  }
}

/* Guided operations layer */
:root {
  --ops-bg: #0b0b10;
  --ops-surface: #141419;
  --ops-surface-2: #1a1a20;
  --ops-line: #2a2a34;
  --ops-line-soft: rgba(255,255,255,.07);
  --ops-text: #f4f4f7;
  --ops-muted: #a9a9b6;
  --ops-dim: #747484;
}

body {
  color: var(--ops-text);
}

.main,
.content {
  width: min(100%, 1080px);
}

.card,
.section,
.stat-card,
.excel-section,
.rh-section,
.hw-card,
.oc,
.hc,
.nav-card {
  border-radius: 8px !important;
}

.nav-card {
  min-height: 132px !important;
  padding: 18px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

.nav-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.36) !important;
}

.nav-card-icon {
  margin-bottom: 10px !important;
}

.nav-card-label,
.section-title,
.page-title,
.excel-title,
.modal-title,
.cpwd-title,
.headline {
  letter-spacing: .045em !important;
}

.nav-card-sub,
.week-label,
.excel-meta,
.excel-updated,
.topbar-sub,
.stock-sub,
.stat-lbl {
  color: var(--ops-muted) !important;
}

.guided-flow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.guided-flow::-webkit-scrollbar { display: none; }

.guide-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 6px 11px 6px 7px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  overflow: hidden;
}

.guide-step::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--guide-color, var(--red, #E11D2C));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--guide-color, #E11D2C) 18%, transparent);
}

.guide-num {
  display: none;
}

.guide-copy {
  min-width: 0;
}

.guide-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ops-text);
  line-height: 1.1;
}

.guide-sub {
  display: none;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ops-muted);
  line-height: 1.25;
}

.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 10px;
}

.page-intro-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ops-text);
  line-height: .95;
}

.page-intro-sub {
  margin-top: 5px;
  max-width: 560px;
  color: var(--ops-muted);
  font-size: 12px;
  line-height: 1.45;
}

.page-intro-pill {
  flex: 0 0 auto;
  border: 1px solid var(--ops-line-soft);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--ops-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.035);
}

.btn,
.tb-btn,
.logout-btn,
.back-btn,
.btn-sec,
.btn-add,
.filter-btn,
.role-btn,
.ub,
.fb {
  border-radius: 8px !important;
}

input,
select,
textarea {
  border-radius: 8px !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 760px) {
  .page-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-intro-pill {
    align-self: flex-start;
  }

  .nav-card {
    min-height: 122px !important;
  }
}

/* Reposition menu and replenishment experience */
.nav-grid {
  gap: 10px !important;
}

.nav-card {
  min-height: 112px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 15px !important;
}

.nav-card-icon {
  width: 38px;
  height: 38px;
  display: grid !important;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}

.nav-card:hover .nav-card-icon i {
  transform: none !important;
}

.prod-shell {
  background: rgba(12,12,16,.94);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.34);
}

.prod-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}

.prod-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.prod-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sizes-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 10px !important;
}

.size-item {
  min-height: 154px;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
  padding: 14px 10px 10px !important;
  box-shadow: none !important;
}

.size-item::after {
  display: none !important;
}

.size-item:not(.no-bin):hover {
  border-color: rgba(96,165,250,.35) !important;
  background: rgba(37,99,235,.08) !important;
  transform: translateY(-2px) !important;
}

.size-item.has-qty {
  border-color: rgba(255,107,0,.62) !important;
  background: rgba(255,107,0,.105) !important;
  box-shadow: inset 0 0 0 1px rgba(255,107,0,.18), 0 10px 30px rgba(0,0,0,.22) !important;
}

.size-label {
  color: var(--ops-dim) !important;
  letter-spacing: .16em !important;
}

.size-num {
  font-size: 30px !important;
  line-height: .9 !important;
}

.size-bin-chip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #bfdbfe;
  letter-spacing: .06em;
  background: rgba(37,99,235,.18);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.22);
}

.qty-row {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.22);
}

.qty-btn {
  width: 36px !important;
  height: 38px !important;
  background: transparent !important;
  color: #b8bdd4 !important;
  font-size: 18px !important;
}

.qty-btn:hover,
.qty-btn:active {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.qty-input {
  height: 36px !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;
  font-size: 24px !important;
}

.prod-bins {
  margin-top: 0 !important;
}

#searchCard,
#cartCard {
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(12,12,16,.92) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.24);
}

#styleInput {
  min-height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
}

#styleInput:focus {
  border-color: rgba(96,165,250,.48) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}

#searchCard .btn,
#cartCard .btn {
  min-height: 44px;
}

.cart-group-hd {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

.cart-row {
  border-bottom-color: rgba(255,255,255,.065) !important;
}

.cart-bin {
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  .prod-hero {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .prod-summary {
    justify-content: flex-start;
  }

  .sizes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .size-item {
    min-height: 146px;
  }
}

/* Sala and Bodega visual refresh */
#appContent .main,
.topbar + .main {
  padding-top: 18px !important;
}

#searchCard {
  padding: 18px !important;
  margin-bottom: 16px !important;
}

#searchCard > div:first-child {
  display: none !important;
}

#searchCard > div:nth-child(2) {
  margin-bottom: 12px !important;
  color: #e7e7ef !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
}

#searchCard > div:nth-child(3) {
  gap: 10px !important;
}

#searchCard .btn-white {
  background: #f4f4f7 !important;
  color: #08080c !important;
  border-color: #f4f4f7 !important;
  box-shadow: 0 8px 22px rgba(255,255,255,.08);
}

#searchCard .btn-outline-w {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.stock-banner {
  border-radius: 14px !important;
  background: rgba(12,12,16,.76) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}

.no-stock {
  border-radius: 16px !important;
  background: rgba(12,12,16,.86) !important;
  border-color: rgba(255,255,255,.08) !important;
}

.prod-shell {
  border-radius: 18px !important;
}

.prod-name {
  font-size: clamp(24px, 4vw, 34px) !important;
}

.prod-bin-badge {
  border-radius: 999px !important;
  background: rgba(37,99,235,.16) !important;
}

#cartCard {
  overflow: hidden;
}

#cartCard > div:first-child {
  background: rgba(255,255,255,.025) !important;
}

.bodega-stats-strip {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.bodega-stat-card {
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(10,12,22,.82) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

.bodega-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16) !important;
}

.bodega-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.bodega-action-grid .nav-card {
  min-height: 138px !important;
  border-radius: 18px !important;
  padding: 16px !important;
  border-top: 0 !important;
  border-color: rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(8,10,18,.9) !important;
}

.bodega-action-grid .nav-card::before {
  display: none !important;
}

.bodega-action-grid .nav-card:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(10,14,24,.96) !important;
  transform: translateY(-3px) !important;
}

.bodega-action-grid .nav-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-bottom: 14px !important;
}

.bodega-action-grid .nav-card-icon i {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 1.8 !important;
}

.bodega-action-grid .nav-card-label {
  font-size: 17px !important;
  letter-spacing: .055em !important;
}

.bodega-action-grid .nav-card-sub {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: #9ca3b5 !important;
}

.bodega-action-grid .nav-badge {
  border-radius: 999px !important;
  top: 12px !important;
  right: 12px !important;
}

@media (max-width: 760px) {
  .bodega-stats-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .bodega-stat-card {
    padding: 12px 10px !important;
  }

  .bodega-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}