/* ============================================================
   PYM360 · COMPONENT — Badge / Pill / Status
   Capa 2 — primitivo del DS.

   Markup:
     <span class="pym-badge">123</span>
     <span class="pym-badge pym-badge--success">✓ ok</span>
     <span class="pym-status pym-status--success">Activo</span>
     <span class="pym-pill">Filtro</span>

   Tres patrones:
     .pym-badge   contadores numéricos pequeños
     .pym-status  estados con icono (encontrado, aprendido, error...)
     .pym-pill    chips de filtro/categoría más prominentes
   ============================================================ */

/* ===== BADGE — contador numérico ===== */
.pym-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--pym-fs-xs);
  font-weight:var(--pym-fw-semibold);
  font-family:var(--pym-font-mono);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-dim);
  padding:1px 7px;
  min-width:20px;
  border-radius:var(--pym-radius-md);
  line-height:1.4;
}
.pym-badge--accent{background:var(--pym-color-accent-dim);color:var(--pym-color-accent-2)}
.pym-badge--success{background:var(--pym-color-success-dim);color:var(--pym-color-success)}
.pym-badge--warning{background:var(--pym-color-warning-dim);color:var(--pym-color-warning)}
.pym-badge--danger{background:var(--pym-color-danger-dim);color:var(--pym-color-danger)}
.pym-badge--purple{background:var(--pym-color-purple-dim);color:var(--pym-color-purple)}
.pym-badge--gold{background:var(--pym-color-gold-dim);color:var(--pym-color-gold)}

/* ===== STATUS — etiqueta con estado y opcionalmente icono ===== */
.pym-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:var(--pym-fw-semibold);
  padding:2px 8px;
  border-radius:var(--pym-radius-sm);
  letter-spacing:.02em;
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-dim);
  white-space:nowrap;
}
.pym-status--success{background:var(--pym-color-success-dim);color:var(--pym-color-success)}
.pym-status--learned{background:var(--pym-color-purple-dim);color:var(--pym-color-purple)}
.pym-status--review{background:var(--pym-color-warning-dim);color:var(--pym-color-warning)}
.pym-status--notfound{background:var(--pym-color-danger-dim);color:var(--pym-color-danger)}
.pym-status--info{background:var(--pym-color-info-dim);color:var(--pym-color-info)}
.pym-status--cheapest{
  background:linear-gradient(135deg,rgba(125,208,109,.18),rgba(125,208,109,.08));
  color:var(--pym-color-success);
  border:1px solid rgba(125,208,109,.25);
}

/* ===== PILL — chip prominente para filtros/categorías ===== */
.pym-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:var(--pym-fs-sm);
  font-weight:var(--pym-fw-medium);
  padding:3px 10px;
  border-radius:var(--pym-radius-pill);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-dim);
  border:1px solid var(--pym-color-border);
  cursor:default;
  white-space:nowrap;
}
.pym-pill--accent{background:var(--pym-color-accent-dim);color:var(--pym-color-accent-2);border-color:rgba(73,124,251,.2)}
.pym-pill--success{background:var(--pym-color-success-dim);color:var(--pym-color-success);border-color:rgba(125,208,109,.2)}
.pym-pill--warning{background:var(--pym-color-warning-dim);color:var(--pym-color-warning);border-color:rgba(245,185,85,.2)}
.pym-pill--danger{background:var(--pym-color-danger-dim);color:var(--pym-color-danger);border-color:rgba(255,141,123,.2)}
.pym-pill--clickable{cursor:pointer;transition:all var(--pym-trans-fast)}
.pym-pill--clickable:hover{background:var(--pym-color-surface-3);border-color:var(--pym-color-border-strong)}

/* ===== PROVIDER PILL — colores específicos por proveedor ===== */
.pym-prov{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:var(--pym-fs-sm);
  padding:2px 8px;
  border-radius:var(--pym-radius-sm);
  font-weight:var(--pym-fw-medium);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-dim);
  white-space:nowrap;
}
/* Mapeos por proveedor — alineados con codes de PROV_CLASSES (state.js) */
.pym-prov--D{background:var(--pym-color-warning-dim);color:var(--pym-color-warning)}        /* Dipy */
.pym-prov--TM{background:var(--pym-color-accent-dim);color:var(--pym-color-accent-2)}       /* Tecnomas */
.pym-prov--I{background:var(--pym-color-purple-dim);color:var(--pym-color-purple)}          /* Imperial */
.pym-prov--PR{background:var(--pym-color-success-dim);color:var(--pym-color-success)}       /* Prodalam */
.pym-prov--DP{background:var(--pym-color-danger-dim);color:var(--pym-color-danger)}         /* Diplas */
.pym-prov--CH{background:rgba(220,38,38,.15);color:#fca5a5}                                 /* Chacabuco */
.pym-prov--P{background:var(--pym-color-info-dim);color:var(--pym-color-info)}              /* Passol */
.pym-prov--T{background:var(--pym-color-info-dim);color:var(--pym-color-info)}              /* Treck */
.pym-prov--VT{background:var(--pym-color-gold-dim);color:var(--pym-color-gold)}             /* Vitel */
.pym-prov--AP{background:rgba(89,212,184,.12);color:#5fd4b8}                                /* Apro */
.pym-prov--LQ{background:#dc2626;color:#ffffff}                                              /* Liquimax · rojo+blanco distintivo */
.pym-prov--C{background:var(--pym-color-surface-3);color:var(--pym-color-text-dim)}         /* Custom */

/* ===== COLOR SWATCH (para colores de productos) ===== */
.pym-swatch{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-dim);
}
.pym-swatch::before{
  content:'';
  width:9px;height:9px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.15);
  background:#666;
}
.pym-swatch--rojo::before{background:#E5484D}
.pym-swatch--azul::before{background:#5aafff}
.pym-swatch--amarillo::before{background:#f5b955}
.pym-swatch--verde::before{background:#7dd06d}
.pym-swatch--negro::before{background:#222}
.pym-swatch--blanco::before{background:#fafafa}
.pym-swatch--gris::before{background:#888}