/* ═══════════════════════════════════════════════════════
   Módulo de marcas de agua (watermarks)
   ═══════════════════════════════════════════════════════ */

/* ── Paleta semántica: cada clasificación/estado fija --wm-c / --wm-c-bg ── */
.wm-c-slate  { --wm-c: #9ca3af; --wm-c-bg: #f3f4f6; }
.wm-c-gray   { --wm-c: #6b7280; --wm-c-bg: #f3f4f6; }
.wm-c-blue   { --wm-c: #2563eb; --wm-c-bg: #dbeafe; }
.wm-c-indigo { --wm-c: #1d4ed8; --wm-c-bg: #dbeafe; }
.wm-c-violet { --wm-c: #5b21b6; --wm-c-bg: #ede9fe; }
.wm-c-purple { --wm-c: #7c3aed; --wm-c-bg: #ede9fe; }
.wm-c-green  { --wm-c: #16a34a; --wm-c-bg: #dcfce7; }
.wm-c-emerald{ --wm-c: #15803d; --wm-c-bg: #bbf7d0; }
.wm-c-amber  { --wm-c: #b45309; --wm-c-bg: #fef3c7; }
.wm-c-orange { --wm-c: #c2410c; --wm-c-bg: #ffedd5; }
.wm-c-red    { --wm-c: #dc2626; --wm-c-bg: #fee2e2; }
.wm-c-rose   { --wm-c: #be123c; --wm-c-bg: #ffe4e6; }
.wm-c-sky    { --wm-c: #0369a1; --wm-c-bg: #e0f2fe; }

/* ── Badges con dot (clasificación / estado de limpieza) ── */
.wm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--wm-c-bg);
  color: var(--wm-c);
  white-space: nowrap;
}

.wm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wm-c);
  flex-shrink: 0;
}

.wm-dot--pulse { animation: wm-pulse 1s infinite; }

@keyframes wm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Chips de contadores (polling en vivo) ── */
.wm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.wm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.75rem;
}

.wm-chip-count { font-weight: 700; color: var(--wm-c); }
.wm-chip-label { color: var(--color-text-muted); }

/* Chips clickeables: filtran el grid por estado/clasificación (toggle) */
.wm-chip--btn {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.wm-chip--btn:hover {
  border-color: var(--wm-c);
  text-decoration: none;
}

.wm-chip--active {
  background: var(--wm-c-bg);
  border-color: var(--wm-c);
}

.wm-chip--active .wm-chip-label { color: var(--wm-c); font-weight: 600; }

.wm-chip-x {
  font-size: 0.65rem;
  color: var(--wm-c);
  opacity: 0.7;
}

.wm-live-hint { color: var(--color-primary); font-weight: 600; }

/* ── Selects compactos de la barra de filtros (espejo de .products-sort) ── */
.wm-select {
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.wm-filter-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
}

.wm-filter-clear {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.wm-filter-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Paneles con acento (lote Grok / pipeline automático) ── */
.wm-panel { border-left: 4px solid var(--wm-c, var(--color-primary)); }

.wm-panel-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wm-panel-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wm-c, var(--color-text));
  margin-bottom: 0.25rem;
}

.wm-panel-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.5;
}

.wm-panel-desc strong { color: var(--color-text); }

.wm-panel-aside { flex-shrink: 0; }

/* (El antiguo .btn-grok se reemplazó por .btn--cost del design system) */

/* Resumen-línea de los paneles CTA colapsables (clasificar / limpiar) */
.wm-panel--collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wm-panel--collapsible > summary::-webkit-details-marker { display: none; }

.wm-panel--collapsible > summary::before {
  content: "▸";
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.wm-panel--collapsible[open] > summary::before { content: "▾"; }

.wm-panel--collapsible > summary .wm-panel-title { margin-bottom: 0; }

.wm-panel--collapsible[open] > summary { margin-bottom: var(--space-2); }

.wm-panel-summary-meta {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Aviso de lotes deshabilitados durante la búsqueda (q solo filtra el grid) */
.wm-q-warning .wm-panel-desc { max-width: none; }

/* ── Barra de presupuesto mensual (gasto real + proyección del lote) ── */
.wm-budget { margin-top: 0.6rem; max-width: 420px; }

.wm-budget-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.wm-budget-bar {
  height: 8px;
  background: var(--color-bg);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.wm-budget-fill,
.wm-budget-fill--projected {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.wm-budget-fill { background: var(--wm-c, #7c3aed); }
.wm-budget-fill--projected { background: var(--wm-c-bg, #ddd6fe); }

.wm-budget-over {
  font-size: 0.72rem;
  color: var(--color-danger);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Desglose de rechazos de moderación (fee facturado sin generar imagen) */
.wm-budget-rejected {
  font-size: 0.72rem;
  color: #b45309;
  margin-top: 0.25rem;
}

/* Nota bajo los checkboxes del lote (categorías críticas, etc.) */
.wm-panel-hint {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin: 0 0 0.35rem 1.5rem;
  line-height: 1.4;
}

/* Límite de productos por lote (control de costo del envío a Grok) */
.wm-cap-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.wm-cap-input {
  width: 5rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Lotes Batch API (asíncronos) ── */
/* Panel plegable: el <summary> es la barra de título clickeable. */
.wm-batch-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wm-batch-details > summary::-webkit-details-marker { display: none; }

.wm-batch-details > summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.wm-batch-details[open] > summary::before { content: "▾"; }

.wm-batch-summary .wm-panel-title { margin-bottom: 0; }

.wm-batch-summary-meta {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wm-batch-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.wm-batch-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
}

.wm-batch-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.wm-batch-id { font-weight: 600; color: var(--color-text); }

.wm-batch-scope {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
}

.wm-batch-meta {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.wm-batch-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.wm-batch-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg);
  border-radius: 9999px;
  overflow: hidden;
}

.wm-batch-fill {
  height: 100%;
  background: var(--wm-c, #1d4ed8);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.wm-batch-counts,
.wm-batch-cost {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wm-batch-error {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--color-danger);
}

/* ── Grid de cards de imágenes ── */
.wm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.875rem;
}

.wm-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wm-card-img-wrap {
  background: #f8fafc;
  position: relative;
}

.wm-card-img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  display: block;
  padding: 0.5rem;
  box-sizing: border-box;
  cursor: zoom-in;
}

.wm-card-badges {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  pointer-events: none;
}

.wm-card-meta {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.wm-card-product {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.wm-card-product-link {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.75rem;
}

.wm-card-product-link:hover { text-decoration: underline; }

.wm-card-filename { font-weight: 500; color: var(--color-text); }

.wm-card-stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  font-size: 0.68rem;
}

.wm-conf--ok { color: var(--color-success); }
.wm-conf--low { color: var(--color-danger); }

.wm-warn-text,
.wm-panel-desc strong.wm-warn-text { color: var(--color-danger); font-weight: 600; }

.wm-card-error {
  color: var(--color-danger);
  margin-top: 0.2rem;
  font-size: 0.7rem;
  word-break: break-word;
}

/* ── Selección rápida: checkbox en la card + barra flotante de lote ── */
.wm-card-select {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 10px 14px 8px; /* hit-area generosa para marcar rápido */
  cursor: pointer;
  line-height: 0;
}

.wm-card-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.wm-card:has(.wm-card-check:checked) {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.wm-select-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}

.wm-select-hint {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.wm-select-hint kbd {
  padding: 0 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  font-size: 0.68rem;
}

.wm-select-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25);
  font-size: 0.8rem;
}

.wm-select-bar[hidden] { display: none; }

.wm-select-bar-sep { color: var(--color-text-muted); }

.wm-select-bar .wm-action-btn--bar {
  flex: 0 0 auto;
  width: auto;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--wm-c);
  border-radius: 9999px;
  background: var(--wm-c-bg);
  color: var(--wm-c);
  font-size: 0.75rem;
  font-weight: 600;
}

.wm-select-bar .wm-action-btn--bar:hover { background: var(--wm-c); color: white; }

.wm-select-bar-clear {
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.wm-select-bar-clear:hover { color: var(--color-text); }

/* ── Footer de acciones de la card ── */
.wm-card-footer {
  display: flex;
  border-top: 1px solid var(--color-border);
}

.wm-card-review-link {
  display: block;
  flex: 1;
  padding: 0.4rem 0.75rem;
  background: #faf5ff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
}

.wm-card-review-link:hover { background: #f3e8ff; }

.wm-card-footer form { flex: 1; display: flex; }

.wm-action-btn {
  flex: 1;
  width: 100%;
  padding: 0.45rem 0.2rem;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 0;
  border-top: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.wm-action-btn:hover { background: var(--color-bg); }

.wm-action-btn--revert { color: #0369a1; font-weight: 500; }

.wm-action-btn--active {
  font-weight: 700;
  color: var(--wm-c);
  background: var(--wm-c-bg);
  border-top: 2px solid var(--wm-c);
  cursor: default;
}

.wm-action-btn--active:hover { background: var(--wm-c-bg); }

/* ── Revisión: comparación original vs limpia ── */
.wm-review-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wm-review-item--flagged { border-left: 4px solid var(--color-danger); }

.wm-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.wm-review-meta {
  font-size: 0.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.wm-review-check { margin-top: 2px; width: 16px; height: 16px; cursor: pointer; }

.wm-review-badges { display: flex; gap: 4px; }

.wm-review-warn {
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Motivo del desvío a revisión (review_reason del post-proceso) */
.wm-review-reason {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  margin-top: 0.2rem;
}

.wm-bulk-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
}

.wm-bulk-bar .form-check { font-size: 0.78rem; cursor: pointer; }

.wm-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 700px) {
  .wm-compare { grid-template-columns: 1fr; }
}

.wm-compare-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

.wm-compare-label--clean { color: #7c3aed; }

.wm-compare-frame {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.wm-compare-frame--clean { border-color: #ddd6fe; }

.wm-compare-img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  display: block;
  padding: 0.5rem;
  box-sizing: border-box;
  cursor: zoom-in;
}

.wm-compare-missing {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8rem;
}

.wm-review-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Estado vacío / sin acción disponible ── */
.wm-empty {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted);
}

.wm-none {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0;
}

/* ── Móvil: paneles apilados, acciones de lote a ancho completo, barra
   flotante contenida y filas de batch en columna ── */
@media (max-width: 700px) {
  .wm-panel-row { flex-direction: column; }

  .wm-panel-aside {
    width: 100%;
  }

  .wm-panel-aside form { width: 100%; }

  .wm-panel-aside .btn {
    width: 100%;
    padding: 0.6rem 0.75rem;
  }

  .wm-budget { max-width: none; }

  .wm-batch-meta {
    margin-left: 0;
    flex-basis: 100%;
  }

  .wm-batch-scope { max-width: none; }

  .wm-select-bar {
    width: calc(100% - 1.5rem);
    justify-content: center;
    flex-wrap: wrap;
    bottom: 0.75rem;
  }

  .wm-review-actions { justify-content: stretch; }

  .wm-review-actions .btn { flex: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   Watermarks v2 — dashboard por etapas con tarjetas de producto
   (stepper, tabs, cards agrupadas, panel de progreso)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Pipeline header: stepper + presupuesto ─────────────────────────────── */
.wm-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

.wm-stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.wm-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s, border-color 0.15s;
}

.wm-step:hover { background: var(--wm-c-bg, var(--color-bg)); }

.wm-step--active {
  background: var(--wm-c-bg, var(--color-bg));
  border-color: var(--wm-c, var(--color-primary));
}

.wm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--wm-c-bg, var(--color-bg));
  color: var(--wm-c, var(--color-text));
  border: 1.5px solid var(--wm-c, var(--color-border));
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.wm-step--active .wm-step-num {
  background: var(--wm-c, var(--color-primary));
  color: #fff;
}

.wm-step-body { display: flex; flex-direction: column; line-height: 1.15; }
.wm-step-label { font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; }
.wm-step-count { font-size: 0.95rem; color: var(--wm-c, var(--color-text)); }
.wm-step-arrow { color: var(--color-border); font-size: 0.9rem; user-select: none; }
.wm-step--alert .wm-step-num { border-style: dashed; }

.wm-pipeline-side {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.wm-pipeline-budget {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 170px;
  font-size: 0.8rem;
}

.wm-pipeline-budget-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Conteos del stepper en cero se atenúan (actualizado por polling) */
.wm-step-count--zero { opacity: 0.45; }
.wm-step--active .wm-step-label { color: var(--wm-c, var(--color-text)); font-weight: 600; }

/* Popover de presupuesto del stepper (gasto + barra + rechazos compactados) */
.wm-budget-pop { position: relative; }

.wm-budget-pop > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 170px;
  font-size: var(--text-sm);
}

.wm-budget-pop > summary::-webkit-details-marker { display: none; }

.wm-budget-pop[open] > summary { color: var(--color-primary); }

.wm-budget-pop-body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 320px;
  max-width: 86vw;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wm-budget-pop-hint { margin: 0; }

/* Timestamp del polling dormido («actualizado hace Xs») */
.wm-updated-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Link «Deshacer» dentro del toast del toggle a-tienda */
.wm-undo-link {
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
  white-space: nowrap;
}

/* ── Búsqueda ───────────────────────────────────────────────────────────── */
.wm-search-input { min-width: 200px; }

/* ── Grid de tarjetas de producto ───────────────────────────────────────── */
.wm-pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 480px) {
  .wm-pgrid { grid-template-columns: 1fr; }
}

.wm-pcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.wm-pcard:hover { box-shadow: var(--shadow-md); }

/* En Por Revisar la card ocupa el ancho completo (lista vertical) */
.wm-pcard--review { width: 100%; margin-bottom: 1rem; }

.wm-pcard-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.wm-pcard-select { display: flex; align-items: center; padding-top: 0.15rem; }

.wm-pcard-check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.wm-pcard-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.wm-pcard-title .filter-chip { align-self: flex-start; }

.wm-pcard-unlinked { color: var(--color-text-muted); font-style: italic; }
.wm-pcard-unlinked-chip { background: var(--color-bg); }

.wm-pcard-suppliers {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.wm-pcard-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
}

.wm-pcard--review .wm-pcard-thumbs { flex-direction: column; gap: 1rem; }

.wm-pcard-thumbs--collapsed .wm-pthumb--extra { display: none; }

.wm-pcard-more {
  align-self: flex-start;
  margin: 0 0.9rem 0.4rem;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.wm-pcard-more:hover { text-decoration: underline; }

.wm-pcard-summary {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  border-top: 1px dashed var(--color-border);
}

.wm-pcard-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  margin-top: auto;
}

.wm-pcard-foot:empty { display: none; }

.wm-pcard-hint { font-size: 0.74rem; color: var(--color-text-muted); }

/* «ficha 1 de 2 de este producto» (cards multi-proveedor del mismo maestro) */
.wm-pcard-ficha { font-style: italic; }

/* Errores del pipeline como texto visible (no solo tooltip del thumbnail) */
.wm-pcard-issues {
  padding: var(--space-2) 0.9rem;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wm-pcard-issue {
  font-size: var(--text-xs);
  color: var(--c-danger);
  line-height: 1.4;
  word-break: break-word;
}

.wm-pcard-issue--more { color: var(--color-text-muted); }

.wm-inline-form { display: inline-flex; }

.wm-cta-cost { font-weight: 400; opacity: 0.85; }

/* ── Thumbnails con mini-badge ──────────────────────────────────────────── */
.wm-pthumb {
  position: relative;
  width: 86px;
  height: 86px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  flex-shrink: 0;
}

.wm-pthumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  cursor: zoom-in;
  display: block;
}

/* Checkbox de LOTE (cuadrado, arriba-izquierda, familia violeta «acción»):
   marca fotos para una acción puntual. No confundir con el pin de TIENDA
   (redondo, abajo-derecha, azul/esmeralda): ese decide qué se publica. */
.wm-pthumb-select {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--c-cost-border);
  padding: 1px;
  display: flex;
}

.wm-pthumb-select .wm-card-check { accent-color: var(--c-cost); }

.wm-pthumb-badges {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  display: flex;
  gap: 2px;
  align-items: center;
  pointer-events: none;
}

.wm-badge--mini {
  padding: 2px 4px;
  border-radius: 999px;
  pointer-events: auto;
}

.wm-badge--mini .wm-dot { margin: 0; }

.wm-pthumb-warn {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 0 3px;
  pointer-events: auto;
}

.wm-pthumb-revert {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--color-text-muted);
}

.wm-pthumb-revert:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* Volver a limpiar (junto al revertir, en la esquina del thumbnail) */
.wm-pthumb-reclean {
  position: absolute;
  top: 3px;
  right: 30px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--color-text-muted);
}

.wm-pthumb-reclean:hover { color: #7c3aed; border-color: #7c3aed; }

/* ── Selección para tienda: ring por estado + badge-toggle + parqueadas ──
   Lectura en 1 segundo: con color y borde = va a la tienda; gris apagada =
   se queda fuera (sin costo); esmeralda = limpia y publicada. */
.wm-pthumb--selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1.5px #2563eb;
}

.wm-pthumb--published {
  border-color: #15803d;
  box-shadow: 0 0 0 1.5px #15803d;
}

.wm-pthumb--parked .wm-pthumb-img {
  filter: grayscale(1);
  opacity: 0.55;
}

.wm-pthumb--parked:hover .wm-pthumb-img { opacity: 0.85; }

.wm-selbadge-form,
.wm-selbadge--static {
  position: absolute;
  bottom: 3px;
  right: 3px;
  z-index: 3;
}

.wm-selbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1.5px solid var(--wm-c, var(--color-border));
  border-radius: 999px;
  background: var(--wm-c-bg, #fff);
  color: var(--wm-c, var(--color-text));
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.12s;
}

button.wm-selbadge { cursor: pointer; }
button.wm-selbadge:hover { transform: scale(1.2); }

/* Fila "A tienda" de la card: dot-meter + contador + costo Grok pendiente */
.wm-pcard-selection {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  border-top: 1px dashed var(--color-border);
}

.wm-pcard-selection-label { color: var(--color-text-muted); }

.wm-seldots {
  letter-spacing: 1.5px;
  color: #2563eb;
  font-size: 0.7rem;
}

.wm-pcard-selection-cost { color: var(--color-text-muted); }

.wm-panel-savings { color: #15803d; }

/* ── Bloque de revisión dentro de la card (antes/después inline) ────────── */
.wm-review-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  width: 100%;
}

.wm-review-block-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.wm-review-block-pos {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ── Empty state por tab ────────────────────────────────────────────────── */
.wm-stage-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.wm-stage-empty-emoji { font-size: 2.2rem; }
.wm-stage-empty h3 { margin: 0; font-size: 1.05rem; }
.wm-stage-empty p { margin: 0 0 0.6rem; color: var(--color-text-muted); font-size: 0.85rem; }

/* ── Panel flotante de progreso (polling) ───────────────────────────────── */
.wm-progress-panel {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 1000;
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wm-progress-panel--visible { transform: translateY(0); }

@media (max-width: 700px) {
  .wm-pipeline { flex-direction: column; align-items: flex-start; }
  .wm-step-arrow { display: none; }
  .wm-search-input { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Galería de gestión de imágenes (products#images / supplier_products#images)
   ══════════════════════════════════════════════════════════════════════ */
.wm-mi-wrap { display: flex; flex-direction: column; gap: 1rem; }
.wm-mi-legend { display: flex; flex-direction: column; gap: .5rem; }
.wm-mi-summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; }
.wm-mi-hint { font-size: .78rem; line-height: 1.5; margin: 0; }

.wm-mi-store {
  font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 100px;
  white-space: nowrap; border: 1px solid transparent;
}
.wm-mi-store.is-on  { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.wm-mi-store.is-off { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }

.wm-mi-group { padding: .9rem 1rem; }
.wm-mi-group-head {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-size: .9rem; margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}
.wm-mi-group-link { font-size: .75rem; margin-left: auto; text-decoration: none; color: #7c3aed; }

.wm-mi-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.wm-mi {
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.wm-mi-frame { position: relative; aspect-ratio: 1; background: #f8fafc; }
.wm-mi-img {
  width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block;
}
.wm-mi-frame .wm-mi-store {
  position: absolute; top: 6px; left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.wm-mi-body {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .5rem .55rem 0;
}
.wm-mi-warn { color: #d97706; font-size: .85rem; }
.wm-mi-error {
  padding: .35rem .55rem 0;
  font-size: var(--text-xs);
  color: var(--c-danger);
  line-height: 1.4;
  word-break: break-word;
}
.wm-mi-actions {
  display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem;
}
.wm-mi-actions .btn { font-size: .72rem; padding: .25rem .5rem; }
.wm-mi-form { display: inline; margin: 0; }

.wm-mi-reclass { padding: 0 .55rem .55rem; }
.wm-mi-reclass summary {
  font-size: .68rem; color: #64748b; cursor: pointer; list-style: none; padding: .2rem 0;
}
.wm-mi-reclass summary::-webkit-details-marker { display: none; }
.wm-mi-reclass summary::before { content: "✎ "; }
.wm-mi-reclass[open] summary { color: #0f172a; font-weight: 600; }
.wm-mi-reclass-opts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.wm-mi-reclass-opts .btn { font-size: .7rem; padding: .22rem .45rem; }

/* ══════════════════════════════════════════════════════════════════════
   Lightbox (lightbox_controller.js — overlay antes/después con teclado)
   Migrado de estilos inline JS a clases; el overlay es role=dialog.
   ══════════════════════════════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.93);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: zoom-out;
  padding: var(--space-4);
}

.lightbox-badge {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.lightbox-img {
  max-width: 94vw;
  max-height: 76vh;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.lightbox-img--toggleable { cursor: pointer; }

.lightbox-hint {
  font-size: var(--text-xs);
  color: var(--gray-300);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: var(--gray-200);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.lightbox-pos {
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: var(--space-2);
}

.lightbox-pill {
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--gray-300);
  border: 1px solid var(--gray-600);
}

.lightbox-pill--active {
  background: var(--color-surface);
  color: var(--gray-800);
  border-color: var(--color-surface);
}

/* Pill de selección de la card (toggle con S sin cerrar el lightbox) */
.lightbox-sel {
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: var(--space-2);
  background: transparent;
  color: var(--c-success-border);
  border: 1px dashed var(--c-success);
}

.lightbox-sel--checked {
  background: var(--c-success);
  color: var(--color-surface);
  border-style: solid;
}