/*
 * KummaraDS — kds-badge
 * ============================================================
 * Badge unico y reutilizable para TODO el sistema. Reemplaza las ~42 clases
 * badge-* legacy (badge-green/amber/rose/teal/cyan/violet/blue/gray + -light/-dark,
 * badge-tipo-*, badge-stock-*, bg-*): un base .kds-badge + 5 intents semanticos
 * + 3 acentos de marca = 8 variantes, TINTEADAS por defecto (fondo pastel suave +
 * texto saturado legible, mismo craft que kds-pe__badge--f). Token-driven via
 * color-mix (una sola indireccion --_c / --_cd). Modificadores: --solid (pills
 * saturados: contadores / chips de filtro), --pill (radio 999), --sm (chico).
 *
 *   .kds-badge                 base (tinteado, neutral por defecto)
 *   .kds-badge--neutral        gris  · inactivo/secundario/ARS/default de estados
 *   .kds-badge--success        verde · activo/pagada/vigente/stock>0/OK
 *   .kds-badge--warning        ambar · pendiente/parcial/Combo
 *   .kds-badge--danger         rose  · suspendido/anulado/stock 0/deuda
 *   .kds-badge--info           cyan  · en transito/reversion/"N formas"
 *   .kds-badge--brand          teal  · Predeterminado/Principal/#ID/Producto/contadores
 *   .kds-badge--accent         violeta · moneda no-ARS (USD/EUR)/Servicio/Alquiler
 *   .kds-badge--blue           azul  · Variante/Mayorista/Enviada
 *   .kds-badge--solid          relleno saturado + texto blanco (combinable)
 *   .kds-badge--pill           radio 999px  ·  .kds-badge--sm  chico
 *   .kds-badge__x              icono removible (chips de filtro)
 *
 * NOTA (Fase 0 / shim): al final del archivo se re-tokenizan las clases badge-*
 * legacy al look tinteado para que TODO el sistema lo herede sin tocar vistas. Es
 * temporal: a medida que cada BC migra a .kds-badge--* se puede borrar su alias.
 * Si el browser no soporta color-mix, la declaracion del shim se descarta y el
 * badge cae solo a su relleno solido original (fallback automatico).
 * ============================================================
 */

/* ---- Base (tinteado, con fallback solido para browsers sin color-mix) ---- */
.kds-badge {
    --_c: var(--color-gray, #606060);
    --_cd: var(--color-gray-dark, #333);
    --_tint: 14%;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25em .6em;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    border-radius: .375rem;
    white-space: nowrap;
    vertical-align: middle;
    background: #eef1f4; /* fallback si no hay color-mix */
    background: color-mix(in srgb, var(--_c) var(--_tint), #fff);
    color: var(--_cd);
}

/* ---- Intents semanticos (85% de los usos) ---- */
.kds-badge--neutral { --_c: var(--color-gray, #606060);  --_cd: var(--color-gray-dark, #333);    --_tint: 14%; }
.kds-badge--success { --_c: var(--color-green, #77b65d); --_cd: var(--color-green-dark, #459b40); --_tint: 16%; }
.kds-badge--warning { --_c: var(--color-amber, #E8B30E); --_cd: var(--ds-text-on-warning, #334155); --_tint: 20%; }
.kds-badge--warning i { color: var(--color-amber-dark, #C4960A); }
.kds-badge--danger  { --_c: var(--color-rose, #E6607B);  --_cd: var(--color-rose-dark, #D03355);  --_tint: 16%; }
.kds-badge--info    { --_c: var(--color-cyan, #83d5cf);  --_cd: var(--color-cyan-dark, #309c9f);  --_tint: 26%; }

/* ---- Acentos de marca (donde los intents no alcanzan) ---- */
.kds-badge--brand   { --_c: var(--color-teal, #2EB8A8);   --_cd: var(--color-teal-dark, #1FA090);
                      background: var(--color-mint-soft, #e6f6f2); }
.kds-badge--accent  { --_c: var(--color-violet, #9B51E0); --_cd: var(--color-violet-dark, #8A3FCC); --_tint: 14%; }
.kds-badge--blue    { --_c: var(--color-blue, #4A90D9);   --_cd: var(--color-blue-dark, #2E6DB4);  --_tint: 14%; }

/* ---- Modificadores ---- */
.kds-badge--solid { background: var(--_c); color: #fff; }
.kds-badge--pill  { border-radius: 62.4375rem; }
.kds-badge--sm    { font-size: .62rem; padding: .2em .45em; }
.kds-badge--lg    { font-size: .82rem; padding: .32em .7em; }

.kds-badge__x {
    cursor: pointer;
    opacity: .7;
    transition: opacity .13s, transform .13s;
}
.kds-badge__x:hover { opacity: 1; transform: scale(1.15); }

/* ============================================================
 * SHIM (Fase 0) — re-tokeniza las clases badge-* legacy de theme-buttons.css al
 * look tinteado. Carga DESPUES de theme-buttons (bundle DS) y usa !important para
 * ganarle a sus reglas (que tambien son !important). Deja SOLIDOS los contadores
 * (badge-counter/filter) y no toca badge-rol/badge-alquiler/bg-* (page-CSS o
 * Bootstrap, se migran por BC). Temporal: borrar el alias de cada BC cuando migre.
 * ============================================================ */

/* success (verde/lima/forest + stock ok) */
.badge-green, .badge-green-light, .badge-green-dark,
.badge-lime, .badge-lime-light, .badge-lime-dark,
.badge-forest, .badge-forest-light, .badge-forest-dark,
.badge-stock-ok {
    background: color-mix(in srgb, var(--color-green, #77b65d) 16%, #fff) !important;
    color: var(--color-green-dark, #459b40) !important;
}

/* warning (ambar/amarillo/durazno + tipo combo) */
.badge-amber, .badge-amber-light, .badge-amber-dark,
.badge-yellow, .badge-yellow-light, .badge-yellow-dark,
.badge-peach, .badge-peach-light, .badge-peach-dark,
.badge-tipo-combo {
    background: color-mix(in srgb, var(--color-amber, #E8B30E) 20%, #fff) !important;
    color: var(--ds-text-on-warning, #334155) !important;
}
.badge-amber i, .badge-amber-light i, .badge-amber-dark i,
.badge-yellow i, .badge-yellow-light i, .badge-yellow-dark i,
.badge-peach i, .badge-peach-light i, .badge-peach-dark i,
.badge-tipo-combo i {
    color: var(--color-amber-dark, #C4960A) !important;
}

/* danger (rose/pink + stock cero) */
.badge-rose, .badge-rose-light, .badge-rose-dark,
.badge-pink, .badge-pink-light, .badge-pink-dark,
.badge-stock-zero {
    background: color-mix(in srgb, var(--color-rose, #E6607B) 16%, #fff) !important;
    color: var(--color-rose-dark, #D03355) !important;
}

/* info (cyan) */
.badge-cyan, .badge-cyan-light, .badge-cyan-dark {
    background: color-mix(in srgb, var(--color-cyan, #83d5cf) 30%, #fff) !important;
    color: var(--color-cyan-dark, #309c9f) !important;
}

/* brand (teal/mint + tipo producto) */
.badge-teal, .badge-teal-light, .badge-teal-dark,
.badge-mint, .badge-mint-light, .badge-mint-dark,
.badge-tipo-producto {
    background: var(--color-mint-soft, #e6f6f2) !important;
    color: var(--color-teal-dark, #1FA090) !important;
}

/* accent (violeta + tipo servicio) */
.badge-violet, .badge-violet-light, .badge-violet-dark,
.badge-tipo-servicio {
    background: color-mix(in srgb, var(--color-violet, #9B51E0) 14%, #fff) !important;
    color: var(--color-violet-dark, #8A3FCC) !important;
}

/* blue (azul + tipo variantes) */
.badge-blue, .badge-blue-light, .badge-blue-dark,
.badge-tipo-variantes {
    background: color-mix(in srgb, var(--color-blue, #4A90D9) 14%, #fff) !important;
    color: var(--color-blue-dark, #2E6DB4) !important;
}

/* neutral (gris) */
.badge-gray, .badge-gray-light, .badge-gray-dark {
    background: color-mix(in srgb, var(--color-gray, #606060) 12%, #fff) !important;
    color: var(--color-gray-dark, #333) !important;
}