/* ═══════════════════════════════════════════════════════════════════════
   Sbalott Marketplace — Seller Hub (panel del vendedor)
   Estilo inspirado en eBay Seller Hub / AliExpress Seller Center:
   barra superior global, menú lateral claro por secciones, tarjetas planas,
   indicadores, tareas pendientes y tablas de inventario.
   Se carga DESPUÉS de panel.css y solo afecta a .sbmp-hub.
   ═══════════════════════════════════════════════════════════════════════ */

.sbmp-hub {
  --sb-primary:     #ea580c;
  --sb-primary-dk:  #c2410c;
  --sb-primary-lt:  #fff4ec;
  --sb-primary-mid: #fdba74;
  --sb-bg:          #f3f4f6;
  --sb-bg-2:        #eceef1;
  --sb-border:      #e3e6ea;
  --sb-border-2:    #cfd4da;
  --sb-text:        #111827;
  --sb-text-2:      #374151;
  --sb-muted:       #6b7280;
  --sb-light:       #9ca3af;
  --hub-topbar:     60px;
  --hub-side:       248px;
  --hub-radius:     10px;
  --hub-ring:       0 0 0 3px rgba(234, 88, 12, .18);

  display: grid !important;
  grid-template-columns: var(--hub-side) minmax(0, 1fr);
  grid-template-rows: var(--hub-topbar) minmax(0, 1fr);
  grid-template-areas: "top top" "side main";
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sbmp-hub .sbmp-ico { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* ══ BARRA SUPERIOR ══════════════════════════════════════════════════ */
.sbmp-hub .sbmp-topbar.sbmp-hubbar {
  grid-area: top;
  height: var(--hub-topbar);
  padding: 0 20px;
  gap: 14px;
  background: #fff;
  border-bottom: 1px solid var(--sb-border);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  position: sticky; top: 0; z-index: 300;
}
/* Sin la franja de 12 px que dejaba la barra separada del borde superior de la página */
body:has(.sbmp-app.sbmp-hub) .sbmp-app.sbmp-hub { margin-top: 0 !important; }
/* Algunos temas ponen todos los botones en MAYÚSCULAS: en el panel, no */
.sbmp-hub button, .sbmp-hub .sbmp-btn, .sbmp-hub .sbmp-hubbar a, .sbmp-hub .sbmp-hubbar input { text-transform: none !important; letter-spacing: 0 !important; }
.sbmp-hub .sbmp-hub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex-shrink: 0; }
.sbmp-hub .sbmp-hub-logo { height: 38px; width: auto; max-width: 190px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.sbmp-hub .sbmp-hub-logo-txt { font-size: 22px; font-weight: 900; letter-spacing: -.5px; color: #f97316; }
.sbmp-hub .sbmp-hub-brand-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-primary-dk); background: var(--sb-primary-lt);
  border: 1px solid var(--sb-primary-mid); border-radius: 999px; padding: 3px 9px;
}
.sbmp-hub .sbmp-topbar-title {
  flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--sb-muted);
  padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--sb-border);
  white-space: nowrap;
}
.sbmp-hub .sbmp-hub-search {
  flex: 1 1 auto; max-width: 520px; margin: 0 auto 0 8px;
  display: flex; align-items: center; gap: 8px;
  background: #f3f4f6; border: 1.5px solid transparent; border-radius: 8px;
  padding: 0 12px; height: 38px; color: var(--sb-muted);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.sbmp-hub .sbmp-hub-search:focus-within { background: #fff; border-color: var(--sb-primary); box-shadow: var(--hub-ring); }
.sbmp-hub .sbmp-hub-search input {
  flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important;
  box-shadow: none !important; font: inherit; font-size: 13.5px; color: var(--sb-text); padding: 0 !important; height: 100%;
}
.sbmp-hub .sbmp-topbar-right { margin-left: auto; gap: 10px; }
.sbmp-hub .sbmp-hub-cta {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  background: var(--sb-primary); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; transition: background .15s, box-shadow .15s;
}
.sbmp-hub .sbmp-hub-cta:hover { background: var(--sb-primary-dk); box-shadow: 0 4px 12px rgba(234, 88, 12, .3); }
.sbmp-hub .sbmp-hub-cta .sbmp-ico { width: 16px; height: 16px; }
.sbmp-hub .sbmp-topbar-btn {
  height: 38px; border-radius: 8px; background: #fff; border: 1.5px solid var(--sb-border-2);
  color: var(--sb-text-2); font-weight: 600; padding: 0 14px;
}
.sbmp-hub .sbmp-topbar-btn .sbmp-ico { width: 15px; height: 15px; }
.sbmp-hub .sbmp-topbar-btn:hover { background: var(--sb-bg); color: var(--sb-text); border-color: var(--sb-muted); }

/* Menú de usuario */
.sbmp-hub .sbmp-user { position: relative; }
.sbmp-hub .sbmp-user-btn {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; cursor: pointer;
  background: transparent; border: 1.5px solid transparent; border-radius: 999px; font: inherit; color: var(--sb-text-2);
}
.sbmp-hub .sbmp-user-btn:hover, .sbmp-hub .sbmp-user.open .sbmp-user-btn { background: var(--sb-bg); border-color: var(--sb-border); }
.sbmp-hub .sbmp-user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--sb-bg-2); }
.sbmp-hub .sbmp-user-name { font-size: 13px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbmp-hub .sbmp-user-btn .sbmp-ico { width: 14px; height: 14px; color: var(--sb-muted); }
.sbmp-hub .sbmp-user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 400;
  background: #fff; border: 1px solid var(--sb-border); border-radius: var(--hub-radius);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .14); padding: 6px;
}
.sbmp-hub .sbmp-user.open .sbmp-user-menu { display: block; }
.sbmp-hub .sbmp-user-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--sb-border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.sbmp-hub .sbmp-user-head strong { font-size: 13.5px; color: var(--sb-text); }
.sbmp-hub .sbmp-user-head span { font-size: 12px; color: var(--sb-muted); }
.sbmp-hub .sbmp-user-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--sb-text-2); font-size: 13.5px; font-weight: 500; text-decoration: none !important;
}
.sbmp-hub .sbmp-user-menu a:hover { background: var(--sb-bg); color: var(--sb-text); }
.sbmp-hub .sbmp-user-menu a .sbmp-ico { color: var(--sb-muted); }

/* ══ MENÚ LATERAL (oscuro, letras blancas) ═══════════════════════════
   El color de fondo viene de --sb-sidebar-bg (Mi Cuenta Pro → Colores).
   Mi Cuenta Pro pinta con !important todo elemento cuya clase contenga "sbmp-nav";
   por eso aquí todo lleva !important para que el menú se lea siempre. */
.sbmp-hub .sbmp-sidebar {
  grid-area: side;
  width: auto; min-height: 0;
  position: sticky; top: var(--hub-topbar); height: calc(100vh - var(--hub-topbar));
  background: var(--sb-sidebar-bg, #1e1b4b) !important;
  border-right: 0;
  display: flex; flex-direction: column; z-index: 200;
  color: #fff !important;
}
.sbmp-hub .sbmp-sidebar * { box-sizing: border-box; }
.sbmp-hub .sbmp-side-store { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.sbmp-hub .sbmp-side-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .85); background: #fff; }
.sbmp-hub .sbmp-side-logo-ph {
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, #f97316, #ea580c); border: 2px solid rgba(255, 255, 255, .85);
}
.sbmp-hub .sbmp-side-store-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbmp-hub .sbmp-side-store-info strong { font-size: 14px; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbmp-hub .sbmp-side-status { font-size: 11.5px; color: #bbf7d0 !important; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sbmp-hub .sbmp-side-status i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .3); }
.sbmp-hub .sbmp-nav { padding: 8px 10px 12px; gap: 2px; overflow-y: auto; background: transparent !important; }
.sbmp-hub .sbmp-nav-section-label {
  background: transparent !important;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62) !important; padding: 16px 10px 6px;
}
.sbmp-hub .sbmp-nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px;
  border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none !important;
  color: #fff !important; background: transparent !important; text-transform: none; letter-spacing: 0;
  transition: background-color .12s;
}
.sbmp-hub .sbmp-nav-item:hover { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.sbmp-hub .sbmp-nav-item.active { background: rgba(255, 255, 255, .22) !important; color: #fff !important; font-weight: 800; box-shadow: inset 3px 0 0 #fff; }
.sbmp-hub .sbmp-nav-icon { width: 20px; display: flex; align-items: center; justify-content: center; font-size: 0; color: #fff !important; background: transparent !important; opacity: .92; }
.sbmp-hub .sbmp-nav-item.active .sbmp-nav-icon { opacity: 1; }
.sbmp-hub .sbmp-nav-icon .sbmp-ico { stroke: #fff; }
.sbmp-hub .sbmp-nav-label { flex: 1; color: #fff !important; background: transparent !important; }
.sbmp-hub .sbmp-nav-badge {
  min-width: 24px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff !important; color: #1f2937 !important;
}
.sbmp-hub .sbmp-sidebar-footer { margin-top: auto; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .16); background: transparent !important; }
.sbmp-hub .sbmp-back-link { color: #fff !important; font-size: 13px; font-weight: 700; padding: 8px 8px; border-radius: 6px; display: block; text-decoration: none !important; background: transparent !important; }
.sbmp-hub .sbmp-back-link:hover { background: rgba(255, 255, 255, .14) !important; }

/* Refuerzo por ID: el menú SIEMPRE con letras blancas, aunque un tema o plugin pinte encima */
#sbmpSidebar .sbmp-nav-item,
#sbmpSidebar .sbmp-nav-label,
#sbmpSidebar .sbmp-nav-icon,
#sbmpSidebar .sbmp-nav-icon svg,
#sbmpSidebar .sbmp-side-store-info strong,
#sbmpSidebar .sbmp-back-link { color: #fff !important; }
#sbmpSidebar .sbmp-nav-section-label { color: rgba(255, 255, 255, .7) !important; }
#sbmpSidebar .sbmp-nav-badge { background: #fff !important; color: #1f2937 !important; }

/* Fondo oscuro del menú móvil */
.sbmp-hub .sbmp-backdrop { display: none; }

/* ══ CONTENIDO ═══════════════════════════════════════════════════════ */
.sbmp-hub .sbmp-main { grid-area: main; background: var(--sb-bg) !important; min-width: 0; }
.sbmp-hub .sbmp-tab { padding: 24px 28px 48px; max-width: 1320px; width: 100%; margin: 0 auto; background: transparent; }
.sbmp-hub .sbmp-tab.active { background: transparent; }
.sbmp-hub .sbmp-page-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.sbmp-hub .sbmp-page-sub { color: var(--sb-muted); font-size: 13.5px; }
.sbmp-hub .sbmp-section-header { margin-bottom: 16px; }

/* Botones (más planos, estilo Seller Hub) */
.sbmp-hub .sbmp-btn { border-radius: 8px; font-weight: 600; letter-spacing: 0; }
.sbmp-hub .sbmp-btn:hover { transform: none; }
.sbmp-hub .sbmp-btn-primary { background: var(--sb-primary); border-color: var(--sb-primary); }
.sbmp-hub .sbmp-btn-primary:hover { background: var(--sb-primary-dk); border-color: var(--sb-primary-dk); box-shadow: 0 4px 12px rgba(234, 88, 12, .28); }
.sbmp-hub .sbmp-btn-outline { background: #fff; color: var(--sb-text-2); border-color: var(--sb-border-2); }
.sbmp-hub .sbmp-btn-outline:hover { background: var(--sb-bg); color: var(--sb-text); border-color: var(--sb-muted); }
.sbmp-hub .sbmp-btn-ghost { background: transparent; border-color: transparent; color: var(--sb-primary-dk); }
.sbmp-hub .sbmp-btn-ghost:hover { background: var(--sb-primary-lt); color: var(--sb-primary-dk); }
.sbmp-hub .sbmp-btn-sm { padding: 6px 12px; border-radius: 7px; }
.sbmp-hub .sbmp-btn-danger { border-radius: 7px; }
.sbmp-hub .sbmp-input:focus, .sbmp-hub .sbmp-select:focus, .sbmp-hub .sbmp-textarea:focus { border-color: var(--sb-primary); box-shadow: var(--hub-ring); }

/* ══ TARJETA DE LA TIENDA (hero) ═════════════════════════════════════ */
.sbmp-hub .sbmp-hero {
  position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 16px; color: #fff;
  background: linear-gradient(120deg, #1f2937 0%, #111827 55%, #7c2d12 130%);
  background-image: var(--hero-img, linear-gradient(120deg, #1f2937 0%, #111827 55%, #7c2d12 130%));
  background-size: cover; background-position: center;
}
.sbmp-hub .sbmp-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 24, 39, .88) 0%, rgba(17, 24, 39, .6) 60%, rgba(17, 24, 39, .35) 100%); }
.sbmp-hub .sbmp-hero-body { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; flex-wrap: wrap; }
.sbmp-hub .sbmp-hero-logo { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; border: 3px solid rgba(255, 255, 255, .9); background: #fff; flex-shrink: 0; }
.sbmp-hub .sbmp-hero-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); }
.sbmp-hub .sbmp-hero-text { flex: 1; min-width: 200px; }
.sbmp-hub .sbmp-hero-hi { margin: 0 0 2px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.sbmp-hub .sbmp-hero-name { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.4px; color: #fff; line-height: 1.2; }
.sbmp-hub .sbmp-hero-meta { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.sbmp-hub .sbmp-hero-meta a { color: #fdba74; text-decoration: none; font-weight: 600; }
.sbmp-hub .sbmp-hero-meta a:hover { text-decoration: underline; }
.sbmp-hub .sbmp-chip-st { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.sbmp-hub .sbmp-chip-ok { background: rgba(16, 185, 129, .2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .45); }
.sbmp-hub .sbmp-chip-boost { background: rgba(251, 191, 36, .2); color: #fde68a; border: 1px solid rgba(251, 191, 36, .5); }
.sbmp-hub .sbmp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sbmp-hub .sbmp-hero .sbmp-hero-ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
.sbmp-hub .sbmp-hero .sbmp-hero-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ══ INDICADORES ═════════════════════════════════════════════════════ */
.sbmp-hub .sbmp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.sbmp-hub .sbmp-kpi {
  display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--sb-border);
  border-radius: var(--hub-radius); padding: 16px 16px; transition: border-color .15s, box-shadow .15s;
}
.sbmp-hub .sbmp-kpi[role="button"] { cursor: pointer; }
.sbmp-hub .sbmp-kpi[role="button"]:hover { border-color: var(--sb-primary-mid); box-shadow: 0 4px 14px rgba(17, 24, 39, .06); }
.sbmp-hub .sbmp-kpi[role="button"]:focus-visible, .sbmp-hub .sbmp-inv-row:focus-visible { outline: 0; box-shadow: var(--hub-ring); }
.sbmp-hub .sbmp-kpi-ico { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sbmp-hub .sbmp-kpi-ico .sbmp-ico { width: 20px; height: 20px; }
.sbmp-hub .sbmp-k-blue   { background: #e0edff; color: #1d4ed8; }
.sbmp-hub .sbmp-k-green  { background: #dcfce7; color: #15803d; }
.sbmp-hub .sbmp-k-orange { background: #ffedd5; color: #c2410c; }
.sbmp-hub .sbmp-k-violet { background: #ede9fe; color: #6d28d9; }
.sbmp-hub .sbmp-kpi > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.sbmp-hub .sbmp-kpi-val { font-size: 24px; font-weight: 800; color: var(--sb-text); letter-spacing: -.5px; line-height: 1.15; }
.sbmp-hub .sbmp-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--sb-text-2); margin-top: 2px; }
.sbmp-hub .sbmp-kpi-sub { font-size: 12px; color: var(--sb-muted); margin-top: 3px; }
.sbmp-hub .sbmp-kpi-sub b { color: var(--sb-text-2); font-weight: 700; }

/* ══ TARJETAS DE PANEL ═══════════════════════════════════════════════ */
.sbmp-hub .sbmp-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.sbmp-hub .sbmp-cols > .sbmp-panel-card { margin-bottom: 0; }
.sbmp-hub .sbmp-panel-card { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--hub-radius); padding: 18px 20px; margin-bottom: 16px; }
.sbmp-hub .sbmp-panel-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sbmp-hub .sbmp-panel-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--sb-text); }
.sbmp-hub .sbmp-count-pill { background: var(--sb-primary-lt); color: var(--sb-primary-dk); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }

/* Tareas */
.sbmp-hub .sbmp-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sbmp-hub .sbmp-task { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--sb-border); }
.sbmp-hub .sbmp-task:first-child { border-top: 0; }
.sbmp-hub .sbmp-task-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sbmp-hub .sbmp-task-ico .sbmp-ico { width: 17px; height: 17px; }
.sbmp-hub .sbmp-task-warn .sbmp-task-ico { background: #fef3c7; color: #b45309; }
.sbmp-hub .sbmp-task-info .sbmp-task-ico { background: #e0edff; color: #1d4ed8; }
.sbmp-hub .sbmp-task-tip  .sbmp-task-ico { background: #ede9fe; color: #6d28d9; }
.sbmp-hub .sbmp-task-txt { flex: 1; font-size: 13.5px; color: var(--sb-text-2); line-height: 1.4; }
.sbmp-hub .sbmp-task-ok { display: flex; align-items: center; gap: 12px; padding: 14px; background: #ecfdf5; border-radius: 8px; color: #047857; }
.sbmp-hub .sbmp-task-ok .sbmp-ico { width: 26px; height: 26px; }
.sbmp-hub .sbmp-task-ok div { display: flex; flex-direction: column; }
.sbmp-hub .sbmp-task-ok span { font-size: 12.5px; color: #065f46; }

/* Inventario */
.sbmp-hub .sbmp-inv-row { padding: 9px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.sbmp-hub .sbmp-inv-row:hover { background: var(--sb-bg); }
.sbmp-hub .sbmp-inv-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--sb-text-2); margin-bottom: 6px; }
.sbmp-hub .sbmp-inv-top b { color: var(--sb-text); font-weight: 700; }
.sbmp-hub .sbmp-inv-track { height: 8px; background: var(--sb-bg-2); border-radius: 999px; overflow: hidden; }
.sbmp-hub .sbmp-inv-bar { height: 100%; border-radius: 999px; transition: width .4s ease; min-width: 0; }
.sbmp-hub .sbmp-bar-green { background: #10b981; }
.sbmp-hub .sbmp-bar-amber { background: #f59e0b; }
.sbmp-hub .sbmp-bar-red   { background: #ef4444; }
.sbmp-hub .sbmp-empty-mini { padding: 18px 4px; font-size: 13.5px; color: var(--sb-muted); }

/* ══ LISTADO DE PRODUCTOS ════════════════════════════════════════════ */
.sbmp-hub .sbmp-listing-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sbmp-hub .sbmp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sbmp-hub .sbmp-fchip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--sb-border-2); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--sb-text-2); transition: all .12s;
}
.sbmp-hub .sbmp-fchip b { font-size: 12px; font-weight: 700; color: var(--sb-muted); background: var(--sb-bg-2); border-radius: 999px; padding: 1px 8px; }
.sbmp-hub .sbmp-fchip:hover { border-color: var(--sb-muted); }
.sbmp-hub .sbmp-fchip.active { background: var(--sb-text); border-color: var(--sb-text); color: #fff; }
.sbmp-hub .sbmp-fchip.active b { background: rgba(255, 255, 255, .2); color: #fff; }
.sbmp-hub .sbmp-products-toolbar { margin: 0; }
.sbmp-hub .sbmp-products-toolbar .sbmp-input { height: 36px; min-width: 260px; border-radius: 8px; }

.sbmp-hub .sbmp-table-wrap { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--hub-radius); overflow-x: auto; }
.sbmp-hub .sbmp-panel-card .sbmp-table-wrap { border: 0; border-radius: 0; }
.sbmp-hub .sbmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sbmp-hub .sbmp-table th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sb-muted); background: #f9fafb; padding: 11px 16px; border-bottom: 1px solid var(--sb-border); white-space: nowrap;
}
.sbmp-hub .sbmp-table td { padding: 12px 16px; border-bottom: 1px solid var(--sb-border); vertical-align: middle; color: var(--sb-text-2); }
.sbmp-hub .sbmp-table tbody tr:last-child td { border-bottom: 0; }
.sbmp-hub .sbmp-table tbody tr:hover td { background: #fafafa; }
.sbmp-hub .sbmp-table .sbmp-num { text-align: right; white-space: nowrap; }
.sbmp-hub .sbmp-table-sm td, .sbmp-hub .sbmp-table-sm th { padding: 10px 14px; }
.sbmp-hub .sbmp-tact-h { text-align: right; }
.sbmp-hub .sbmp-tactions { text-align: right; white-space: nowrap; }
.sbmp-hub .sbmp-tactions .sbmp-btn { margin-left: 4px; }
.sbmp-hub .sbmp-tprod { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.sbmp-hub .sbmp-tprod-img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--sb-bg-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sb-border); font-size: 20px; }
.sbmp-hub .sbmp-tprod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbmp-hub .sbmp-tprod-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbmp-hub .sbmp-tprod-title {
  font-weight: 600; color: var(--sb-text); text-decoration: none !important; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px;
}
.sbmp-hub .sbmp-tprod-title:hover { color: var(--sb-primary-dk); }
.sbmp-hub .sbmp-tprod-sub { font-size: 12px; color: var(--sb-muted); }
.sbmp-hub .sbmp-old { color: var(--sb-light); font-weight: 400; font-size: 12px; }

.sbmp-hub .sbmp-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sbmp-hub .sbmp-pill-green { background: #dcfce7; color: #15803d; }
.sbmp-hub .sbmp-pill-amber { background: #fef3c7; color: #b45309; }
.sbmp-hub .sbmp-pill-red   { background: #fee2e2; color: #b91c1c; }
.sbmp-hub .sbmp-pill-gray  { background: #f3f4f6; color: #4b5563; }
.sbmp-hub .sbmp-pill-blue  { background: #dbeafe; color: #1d4ed8; }

.sbmp-hub .sbmp-pagination { justify-content: center; margin-top: 16px; }
.sbmp-hub .sbmp-page-btn { border-radius: 8px; min-width: 36px; height: 36px; }
.sbmp-hub .sbmp-page-btn.active, .sbmp-hub .sbmp-page-btn:hover { background: var(--sb-primary); border-color: var(--sb-primary); }
.sbmp-hub .sbmp-recent-card { border-radius: var(--hub-radius); }
.sbmp-hub .sbmp-recent-card-price { color: var(--sb-text); }
.sbmp-hub .sbmp-empty { background: #fff; border: 1px dashed var(--sb-border-2); border-radius: var(--hub-radius); }

/* Tarjetas de formularios de las demás pestañas: más planas y consistentes */
.sbmp-hub .sbmp-card, .sbmp-hub .sbmp-form-card, .sbmp-hub .sbmp-store-card { border-radius: var(--hub-radius); box-shadow: none; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sbmp-hub .sbmp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbmp-hub .sbmp-topbar-title { display: none; }
}
@media (max-width: 900px) {
  .sbmp-hub .sbmp-cols { grid-template-columns: 1fr; }
  .sbmp-hub .sbmp-hub-brand-tag { display: none; }
  .sbmp-hub .sbmp-hub-cta span, .sbmp-hub .sbmp-topbar-btn span, .sbmp-hub .sbmp-user-name { display: none; }
  .sbmp-hub .sbmp-hub-cta, .sbmp-hub .sbmp-topbar-btn { padding: 0 11px; }
  .sbmp-hub .sbmp-topbar-btn { display: inline-flex; }
}
@media (max-width: 768px) {
  .sbmp-hub { display: block !important; }
  .sbmp-hub .sbmp-topbar.sbmp-hubbar { padding: 0 12px; gap: 8px; }
  .sbmp-hub .sbmp-menu-toggle { display: flex; }
  .sbmp-hub .sbmp-hub-search { display: none; }
  .sbmp-hub .sbmp-sidebar {
    position: fixed; top: var(--hub-topbar); left: 0; bottom: 0; height: auto; width: 280px; max-width: 86vw;
    transform: translateX(-102%); transition: transform .25s ease;
  }
  .sbmp-hub .sbmp-sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(17, 24, 39, .22); }
  .sbmp-hub .sbmp-sidebar.open + .sbmp-backdrop { display: block; position: fixed; inset: var(--hub-topbar) 0 0 0; background: rgba(17, 24, 39, .45); z-index: 150; }
  .sbmp-hub .sbmp-tab { padding: 16px 14px 40px; }
  .sbmp-hub .sbmp-hero-body { padding: 18px 16px; }
  .sbmp-hub .sbmp-hero-name { font-size: 20px; }
  .sbmp-hub .sbmp-hero-actions { width: 100%; }
  .sbmp-hub .sbmp-hero-actions .sbmp-btn { flex: 1; }
  .sbmp-hub .sbmp-products-toolbar, .sbmp-hub .sbmp-products-toolbar .sbmp-input { width: 100%; min-width: 0; }
  .sbmp-hub .sbmp-listing-bar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
  /* Tabla → tarjetas apiladas */
  .sbmp-hub .sbmp-table thead { display: none; }
  .sbmp-hub .sbmp-table, .sbmp-hub .sbmp-table tbody, .sbmp-hub .sbmp-table tr, .sbmp-hub .sbmp-table td { display: block; width: 100%; }
  .sbmp-hub .sbmp-table tr { padding: 12px 14px; border-bottom: 1px solid var(--sb-border); }
  .sbmp-hub .sbmp-table tbody tr:last-child { border-bottom: 0; }
  .sbmp-hub .sbmp-table td { border: 0 !important; padding: 4px 0; text-align: left !important; }
  .sbmp-hub .sbmp-table td[data-l]:not([data-l="Producto"])::before { content: attr(data-l); display: inline-block; min-width: 92px; font-size: 12px; font-weight: 600; color: var(--sb-muted); }
  .sbmp-hub .sbmp-tprod { min-width: 0; }
  .sbmp-hub .sbmp-tprod-title { max-width: none; }
  .sbmp-hub .sbmp-tactions { padding-top: 8px !important; display: flex !important; gap: 6px; }
  .sbmp-hub .sbmp-tactions .sbmp-btn { margin: 0; flex: 1; justify-content: center; }
  .sbmp-hub .sbmp-tactions .sbmp-btn-danger { flex: 0 0 44px; }
}
@media (max-width: 520px) {
  .sbmp-hub .sbmp-hub-logo { height: 32px; max-width: 130px; }
  .sbmp-hub .sbmp-kpis { grid-template-columns: 1fr; }
  .sbmp-hub .sbmp-user-avatar { width: 28px; height: 28px; }
}

/* ── Envíos (4.19) ── */
.sbmp-hub .sbmp-ship{margin-bottom:14px}
.sbmp-hub .sbmp-ship-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.sbmp-hub .sbmp-ship-code{font:700 14px/1 ui-monospace,Menlo,Consolas,monospace;background:#f3f4f6;color:#111;padding:5px 9px;border-radius:6px;letter-spacing:.5px}
.sbmp-hub .sbmp-ship-order{margin-left:auto;color:#6b7280;font-size:13px}
.sbmp-hub .sbmp-ship-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px}
.sbmp-hub .sbmp-ship-body ul{margin:4px 0 0;padding-left:18px}
.sbmp-hub .sbmp-ship-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14px}
.sbmp-hub .sbmp-ship-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-top:12px;border-top:1px dashed #e5e7eb}
.sbmp-hub .sbmp-ship-form .sbmp-input{width:auto;min-width:170px}
.sbmp-hub .sbmp-ship-hint{flex-basis:100%;font-size:12.5px;color:#6b7280}
.sbmp-hub .sbmp-fee-chips{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:700px){.sbmp-hub .sbmp-ship-body{grid-template-columns:1fr}.sbmp-hub .sbmp-ship-order{margin-left:0}.sbmp-hub .sbmp-ship-form .sbmp-input{flex:1 1 100%}}