/* =====================================================================
   Clientes / CRM
   ===================================================================== */

/* KPIs/toolbar/tabs/tabela/cards da V76 usam .v23-*/.v27-* (app.css) —
 * não mais os .cli-kpi*/.seg-chip*/.cli-busca*/.cli-table* antigos desta
 * tela, removidos daqui junto com o markup que os usava. */

.cli-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cli-filter-grid .field { min-width: 0; }
.cli-filter-period { display: block; min-width: 0; }
.cli-filter-period .pp,
.cli-filter-period .pp__trigger { width: 100%; min-width: 0; }

.cli-bulk {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.cli-bulk__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.cli-bulk__recorte { padding: 7px 10px; border-top: 1px solid var(--border); }
.cli-bulk__recorte .link { margin-left: 4px; }

/* ---------------------------------------------------------------- TAGS */
.tag-box { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-3); border-radius: var(--r-full);
  padding: 3px 5px 3px 10px; font-size: 12px; font-weight: 600;
}
.tag button {
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  display: grid; place-items: center; padding: 2px; border-radius: 50%;
}
.tag button:hover { background: var(--red-bg); color: var(--red); }
.tag button svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ TIMELINE */
.tl { position: relative; padding-left: 20px; }
.tl::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl__item { position: relative; padding: 0 0 18px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot {
  position: absolute; left: -19px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--surface);
}
.tl__body {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.note-item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface-2); }
.kpi.is-clickable { cursor: pointer; }
.kpi.is-clickable:hover { border-color: var(--brand); }

/* Cartões de superfícies CRM adjacentes. */
.lo-saldo-card__valores,
.cp-card__metricas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: 11px; padding: 9px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lo-saldo-card__valores > div,
.cp-card__metricas > div { min-width: 0; }
.lo-saldo-card__valores span,
.lo-saldo-card__valores b,
.cp-card__metricas span,
.cp-card__metricas b { display: block; }
.lo-saldo-card__valores b,
.cp-card__metricas b { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
.cp-card__metricas .tiny { margin-top: 2px; }
.lo-indicacao-card .badge { margin-left: auto; }
.blq-card__meta {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px;
}
.vp-card__pessoas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.vp-card__pessoas > div { min-width: 0; }
.vp-card__pessoas span { display: block; overflow-wrap: anywhere; }
.vp-card__pessoas .tiny { margin-bottom: 2px; }
.av-review-card,
.av-nps-card { cursor: pointer; }
.av-review-card__meta,
.av-convite-card__meta {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px;
}
.av-review-open {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.av-review-open:focus-visible,
.av-review-card:focus-visible,
.av-nps-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 720px) {
  .cli-filter-grid { grid-template-columns: 1fr; }
  .cli-bulk__acoes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cli-bulk__acoes::-webkit-scrollbar { display: none; }
  .cli-bulk__acoes .spacer { display: none; }
  .cli-bulk__acoes > * { flex: 0 0 auto; }
}

@media (max-width: 390px) {
  .tl { padding-left: 17px; }
  .tl__dot { left: -16px; }
  .cp-card__metricas,
  .lo-saldo-card__valores { gap: 6px; }
  .cp-card__metricas b { font-size: 12px; }
}