/* nexsell-prodcanales.css: productos por canal (selector, chips, filtro, masivo). */

/* Selector "Se vende en" en la ficha */
.nxpc-field { grid-column: 1 / -1; }
.nxpc-hint { font-weight: 400; color: var(--text-muted); }
.nxpc-box { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nxpc-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: var(--text-secondary); background: var(--bg-tertiary);
  border: 1px solid var(--border-soft, var(--border-color));
  transition: border-color .15s, background .15s, color .15s;
}
.nxpc-opt:hover { border-color: var(--accent-primary); }
.nxpc-opt { position: relative; }
.nxpc-box .nxpc-opt input[type=checkbox] {
  position: absolute !important; opacity: 0 !important; pointer-events: none;
  width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
}
.nxpc-opt.is-on {
  color: var(--accent-primary); border-color: var(--accent-primary);
  background: var(--accent-soft, rgba(16, 185, 129, .12));
}
.nxpc-opt.is-on::before { content: "✓"; font-size: 11px; font-weight: 800; }
.nxpc-opt:focus-within { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Chips en la tarjeta del producto */
.nxpc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.nxpc-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); background: var(--bg-tertiary);
  border: 1px solid var(--border-soft, var(--border-color)); white-space: nowrap;
}
.nxpc-tag--more { color: var(--text-muted); }

/* Pestañas por canal en el catálogo: una sola fila con scroll horizontal (rápido en celular) */
.nxpc-filtro {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px; margin: 0 0 10px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  border-bottom: 1px solid var(--border-soft, var(--border-color));
}
.nxpc-filtro[hidden] { display: none; }
.nxpc-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; scroll-snap-align: start;
  min-height: 44px; padding: 0 12px; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s, background .15s;
}
.nxpc-pill:hover { background: var(--bg-tertiary); }
.nxpc-pill.is-on { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: transparent; }
.nxpc-pill.is-empty:not(.is-on) { opacity: .6; }
.nxpc-pill:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.nxpc-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 18px;
  color: var(--text-muted); background: var(--bg-tertiary);
}
.nxpc-pill.is-on .nxpc-n { color: var(--accent-primary); background: var(--accent-soft, rgba(16, 185, 129, .12)); }

/* Asignación masiva */
.nxpc-bulk .form-control { min-width: 130px; }