/* ═══════════════════════════════════════════════════════════════════════════
   Identidad de color por ESTADO DE PLANILLA DE COMPRA — origen único
   Grabada  gris/pizarra · Impresa  azul · Enviada  ámbar · Confirmada  verde · Anulada  rojo
   Helper JS: assets/js/components/vt-pf-state.js  (vtPfState.badge(code), .icon(code), .cls(code))
   Lo usa /PurchaseForm (stepper, chip de código, historial). NO redefinir estos colores en CSS de página.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --pf-saved-bg:     #F1F5F9; --pf-saved-fg:     #64748B;
    --pf-printed-bg:   #EFF6FF; --pf-printed-fg:   #3B82F6;
    --pf-sent-bg:      #FFFBEB; --pf-sent-fg:      #D97706;
    --pf-confirmed-bg: #ECFDF5; --pf-confirmed-fg: #10B981;
    --pf-cancelled-bg: #FEF2F2; --pf-cancelled-fg: #EF4444;
}
[data-vehitotal-theme="dark"] {
    --pf-saved-bg:     rgba(148, 163, 184, .16); --pf-saved-fg:     #cbd5e1;
    --pf-printed-bg:   rgba(59, 130, 246, .18);  --pf-printed-fg:   #60a5fa;
    --pf-sent-bg:      rgba(217, 119, 6, .2);    --pf-sent-fg:      #fbbf24;
    --pf-confirmed-bg: rgba(16, 185, 129, .18);  --pf-confirmed-fg: #34d399;
    --pf-cancelled-bg: rgba(239, 68, 68, .18);   --pf-cancelled-fg: #f87171;
}

.pf-state-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: 20px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pf-state-badge--saved     { background: var(--pf-saved-bg);     color: var(--pf-saved-fg); }
.pf-state-badge--printed   { background: var(--pf-printed-bg);   color: var(--pf-printed-fg); }
.pf-state-badge--sent      { background: var(--pf-sent-bg);      color: var(--pf-sent-fg); }
.pf-state-badge--confirmed { background: var(--pf-confirmed-bg); color: var(--pf-confirmed-fg); }
.pf-state-badge--cancelled { background: var(--pf-cancelled-bg); color: var(--pf-cancelled-fg); }

/* Puntos del stepper y leyenda: el paso actual usa el color de identidad de ESE estado (no siempre naranja) */
.pf-step__dot--current.pf-step__dot--saved     { background: var(--pf-saved-bg);     border-color: var(--pf-saved-fg);     color: var(--pf-saved-fg); }
.pf-step__dot--current.pf-step__dot--printed   { background: var(--pf-printed-bg);   border-color: var(--pf-printed-fg);   color: var(--pf-printed-fg); }
.pf-step__dot--current.pf-step__dot--sent      { background: var(--pf-sent-bg);      border-color: var(--pf-sent-fg);      color: var(--pf-sent-fg); }
.pf-step__dot--current.pf-step__dot--confirmed { background: var(--pf-confirmed-bg); border-color: var(--pf-confirmed-fg); color: var(--pf-confirmed-fg); }
.pf-step-caption--saved     i, .pf-step-caption--saved     strong { color: var(--pf-saved-fg); }
.pf-step-caption--printed   i, .pf-step-caption--printed   strong { color: var(--pf-printed-fg); }
.pf-step-caption--sent      i, .pf-step-caption--sent      strong { color: var(--pf-sent-fg); }
.pf-step-caption--confirmed i, .pf-step-caption--confirmed strong { color: var(--pf-confirmed-fg); }