/* ============================================================
   status.css — canonical status-badge system.

   Single source of truth for status chips. Loaded after components.css
   in base.html, so it reads tokens.css var(--…) and overrides Bootstrap's
   .badge base by source order.

   Layers:
     1. .status-badge base + semantic .status-badge--* modifiers
        (success/danger/warning/info/brand/neutral, solid + soft) —
        the global logical-state vocabulary, ONE color per state.
     2. .cs-* sales-order LIFECYCLE palette — the coherent order-pipeline
        language shared by commercial / bitacora / facturacion. Kept as an
        intentional accent set (NOT collapsed onto the 6 semantic colors);
        the gray→blue→orange→green→purple gradient encodes pipeline position.
     3. .comm-status-badge alias — reproduces the sales-order chip geometry
        those three dashboards used, so their markup is untouched for now.

   Page-specific geometry (PO truncating chips, ticket fixed-width chips,
   click affordances, dropdown menus, responsive shrink) stays as thin
   scoped deltas in each template.
   ============================================================ */

/* ── Base chip ──────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375em;
  padding: 0.35em 0.65em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);   /* 6px */
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 600;
  line-height: var(--lh-tight);      /* 1 */
  white-space: nowrap;
  text-align: center;
}

/* ── Semantic SOLID modifiers — one color per logical state ──── */
.status-badge--success { background-color: var(--success);     color: #fff; }
.status-badge--danger  { background-color: var(--danger);      color: #fff; }
.status-badge--warning { background-color: var(--warning);     color: #fff; }
.status-badge--info    { background-color: var(--info);        color: #fff; }
.status-badge--brand   { background-color: var(--brand);       color: var(--brand-fg); }
.status-badge--neutral { background-color: var(--neutral-500); color: #fff; }

/* ── Semantic SOFT/TINT modifiers — soft bg + dark fg ───────── */
.status-badge--success-soft { background-color: var(--success-bg);  color: var(--success-fg); }
.status-badge--danger-soft  { background-color: var(--danger-bg);   color: var(--danger-fg);  }
.status-badge--warning-soft { background-color: var(--warning-bg);  color: var(--warning-fg); }
.status-badge--info-soft    { background-color: var(--info-bg);     color: var(--info-fg);    }
.status-badge--brand-soft   { background-color: var(--brand-soft);  color: var(--brand-hover);}
.status-badge--neutral-soft { background-color: var(--neutral-200); color: var(--neutral-600);}

/* ── Sales-order LIFECYCLE palette (cs-*) ───────────────────────
   Shared by commercial / bitacora / facturacion. Apply on a chip
   (.status-badge or the legacy .comm-status-badge alias below). */
.cs-pending     { background: #e2e8f0; color: #475569; }  /* Por confirmar / Pendiente  */
.cs-confirmed   { background: #3b82f6; color: #fff;    }  /* Confirmado                 */
.cs-queued      { background: #ff8e29; color: #fff;    }  /* En fila                    */
.cs-fulfilling  { background: #86efac; color: #14532d; }  /* Surtiendo / En Preparación */
.cs-fulfilled   { background: #16a34a; color: #fff;    }  /* Surtido                    */
.cs-in-delivery { background: #a78bfa; color: #fff;    }  /* En tránsito                */
.cs-delivered   { background: #6d28d9; color: #fff;    }  /* Entregado / Completado     */
.cs-cancelled   { background: #ef4444; color: #fff;    }  /* Cancelado                  */
.cs-unknown     { background: #6c757d; color: #fff;    }  /* fallback                   */
.cs-lab-done    { background: #e2e8f0; color: #94a3b8; }  /* Entregado (LAB, greyed)    */

/* ── Legacy alias: commercial/bitacora/facturacion render the chip as
   .comm-status-badge. Reproduces their exact prior geometry so the Jinja
   markup is untouched. A later pass can rename to .status-badge + delete. */
.comm-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  padding: 0.35em 0.65em;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  border: none;
  min-width: 7.5em;
  text-align: center;
}