/* CUSTOMER JOURNEY V1 — ficha do cliente (25/09/2026). Design System v2: tokens --vds-* com reserva nos do tema; dourado só para
   estado prioritário; sem brilho/sombra decorativa; linha do tempo discreta. Tudo escopado em #modal-cliente-detalhe. */
#modal-cliente-detalhe {
  --jr-s1: var(--vds-surface-1, var(--bg2)); --jr-s2: var(--vds-surface-2, var(--bg3)); --jr-bd: var(--vds-border-default, var(--border));
  --jr-bd-sub: var(--vds-border-subtle, var(--border)); --jr-t1: var(--vds-text-primary, var(--text)); --jr-t2: var(--vds-text-body, var(--text2));
  --jr-t3: var(--vds-text-secondary, var(--text3)); --jr-gold: var(--vds-accent, var(--vds-gold-500, var(--accent))); --jr-warn: var(--vds-warning, var(--amber, #E0A43A));
  --jr-r: var(--vds-radius-lg, 10px);
}
#vx-jr-head { padding: 0 24px; }
#vx-jr-head .vx-jr-head { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; }
#vx-jr-head .vx-jr-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#vx-jr-head .vx-jr-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jr-t3); }
#vx-jr-head .vx-jr-state { font-size: 12px; font-weight: 600; color: var(--jr-t1); border: 1px solid var(--jr-bd); border-radius: 999px; padding: 2px 10px; background: var(--jr-s2); }
#vx-jr-head .vx-jr-state.is-key { border-color: var(--jr-gold); color: var(--jr-gold); }
#vx-jr-head .vx-jr-meta { font-size: 12px; color: var(--jr-t3); line-height: 1.55; overflow-wrap: anywhere; }
#vx-jr-head .vx-jr-meta b { color: var(--jr-t2); font-weight: 600; }
#vx-jr-head .vx-jr-notes { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--jr-t3); }
#vx-jr-head .vx-jr-aya { align-self: flex-start; background: transparent; border: 1px solid var(--jr-bd); color: var(--jr-t1); border-radius: var(--jr-r); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
#vx-jr-head .vx-jr-aya:hover { border-color: var(--jr-gold); }
#mcd-kpis.vx-jr-loading { opacity: .55; transition: opacity .15s; }
#mcd-kpis.vx-jr-kpis .vx-jr-kpi { background: var(--jr-s2); border: 1px solid var(--jr-bd-sub); border-radius: var(--jr-r); padding: 10px 12px; min-width: 0; }
#mcd-kpis.vx-jr-kpis .vx-jr-kpi-l { font-size: 9.5px; font-weight: 700; color: var(--jr-t3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
#mcd-kpis.vx-jr-kpis .vx-jr-kpi-v { font-size: 14px; font-weight: 700; color: var(--jr-t1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#mcd-kpis.vx-jr-kpis .vx-jr-kpi.is-attn .vx-jr-kpi-v { color: var(--jr-warn); }
.vx-jr .vx-jr-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.vx-jr .vx-jr-f { background: transparent; border: 1px solid var(--jr-bd); color: var(--jr-t2); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.vx-jr .vx-jr-f.on { border-color: var(--jr-gold); color: var(--jr-t1); }
.vx-jr .vx-jr-month { margin-bottom: 18px; }
.vx-jr .vx-jr-mlbl { font-size: 11px; font-weight: 700; color: var(--jr-t3); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--jr-bd-sub); }
.vx-jr .vx-jr-ev { display: flex; gap: 12px; position: relative; padding: 0 0 12px; }
.vx-jr .vx-jr-ev::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 1px; background: var(--jr-bd-sub); }
.vx-jr .vx-jr-ev:last-child::before { display: none; }
.vx-jr .vx-jr-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--jr-t3); background: var(--jr-s1); flex-shrink: 0; position: relative; z-index: 1; }
.vx-jr .vx-jr-ev[data-type="SERVICE_COMPLETED"] .vx-jr-dot, .vx-jr .vx-jr-ev[data-type="PAYMENT_RECEIVED"] .vx-jr-dot { border-color: var(--jr-t1); background: var(--jr-t1); }
.vx-jr .vx-jr-ev[data-type="WORK_ORDER_CANCELLED"] .vx-jr-ev-t { color: var(--jr-t3); text-decoration: line-through; }
.vx-jr .vx-jr-body { flex: 1; min-width: 0; }
.vx-jr .vx-jr-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vx-jr .vx-jr-ev-t { font-size: 13px; font-weight: 600; color: var(--jr-t1); }
.vx-jr .vx-jr-amt { font-size: 13px; font-weight: 600; color: var(--jr-t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-jr .vx-jr-sub { font-size: 11.5px; color: var(--jr-t3); margin-top: 2px; overflow-wrap: anywhere; }
.vx-jr .vx-jr-st { color: var(--jr-t2); }
.vx-jr .vx-jr-empty, .vx-jr .vx-jr-more { text-align: center; color: var(--jr-t3); font-size: 12.5px; padding: 24px 8px; }
.vx-jr .vx-jr-more { padding: 6px 8px 0; font-size: 11.5px; }
/* 28/09/2026 — com LTV e Ticket médio de volta são 6 indicadores; o inline da ficha fixa 5 colunas. Só no desktop (celular segue 2/3). */
@media (min-width: 761px) {
  #mcd-kpis.vx-jr-kpis { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 640px) {
  #vx-jr-head { padding: 0 12px; }
  /* a ficha antiga força 3 colunas no celular (!important); a jornada usa 2 para datas e valores não quebrarem no meio */
  #modal-overlay .modal-box #mcd-kpis.vx-jr-kpis, #mcd-kpis.vx-jr-kpis { grid-template-columns: 1fr 1fr !important; }
  #mcd-kpis.vx-jr-kpis .vx-jr-kpi-v { overflow-wrap: normal; word-break: keep-all; }
  #vx-jr-head .vx-jr-aya { align-self: stretch; text-align: center; }
  .vx-jr .vx-jr-row { flex-wrap: wrap; }
}