/* UIX01/HANDOFF-058 — FASE 5, sub-fatia A (2ª passada): a CARTEIRA DE CLIENTES.
   Namespaces: `.ct-*` (lista), `.cm-*` (métricas e painel), `.cr-*` (recompra),
   `.cp-*` (ficha do cliente).

   GATE: as rotas `#/carteira*` e `#/companies/*` só existem com `uix01_comercial` ON,
   então com a flag OFF nenhuma destas classes chega ao DOM.

   CORES: nenhuma literal. ⚠️ A v1 desta área é a mais literal do app — um avatar
   colorido por hash do nome (paleta de 6 hexes), `border-left-color` inline em cada
   mini-KPI, gráficos SVG desenhados à mão. Nada disso acompanha o tema. Aqui a cor de
   estado vem dos tokens e o avatar usa o tinte neutro; a diferenciação continua onde
   informa — no selo escrito ao lado. */

/* ====================================================================== */
/* LISTA                                                                  */
/* ====================================================================== */
.ct { font-size: 13px }
.ct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px }
.ct h1 { font-size: 20px; margin: 0 0 2px }
.ct-sub { font-size: 12.5px; color: var(--u-texto-2) }
.ct-head-acoes { display: flex; gap: 8px; flex-wrap: wrap }
.ct-kpi-click { cursor: pointer }
.ct-kpi-click:hover { background: var(--u-hover) }
.ct-kpi-click:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }
.ct .kpi.ativo { border-color: var(--u-verde-marca); box-shadow: inset 0 0 0 1px var(--u-verde-marca) }

.ct-recompra {
  background: var(--u-superficie); border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px); padding: 12px 14px; margin-bottom: 14px;
}
.ct-recompra h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--u-texto-2); margin: 0 0 10px;
}
.ct-recompra-grade { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.ct-mini {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; text-decoration: none;
  background: var(--u-fundo); border: 1px solid var(--u-linha);
  border-left: 3px solid var(--u-linha-forte); border-radius: var(--u-raio-controle, 8px);
}
.ct-mini > span { font-size: 11.5px; color: var(--u-texto-2) }
.ct-mini b { font-size: 17px; color: var(--u-texto) }
.ct-mini.ok { border-left-color: var(--u-verde-marca) }
.ct-mini.warn { border-left-color: var(--u-ambar) }
.ct-mini.block { border-left-color: var(--u-erro) }
.ct-mini.ltv { flex: 1.6 1 220px; border-left-color: var(--u-verde-texto) }
a.ct-mini:hover { background: var(--u-hover) }

.ct-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px }
.ct-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.ct-barra select {
  height: var(--u-altura-controle, 38px); padding: 0 11px;
  border: 1px solid var(--u-linha-forte); border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie); color: var(--u-texto); font: inherit; font-size: 13px;
}

.ct-lista { display: flex; flex-direction: column; gap: 8px }
.ct-card {
  display: grid; grid-template-columns: 40px minmax(0, 2fr) 150px 140px 150px 150px;
  gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none;
  background: var(--u-superficie); border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px); color: var(--u-texto);
}
@media (max-width: 1100px) { .ct-card { grid-template-columns: 40px minmax(0, 1fr) 150px; row-gap: 8px } }
/* 🔴 O realce do cartao e BORDA, nao preenchimento. Medido pelo gate: com
   `background: var(--u-hover)`, o ambar de "ha 44 dias" cai de 4,98 para **4,41** —
   toda cor de ESTADO reprova sobre esse tinte. Trocar a tinta no hover apagaria o
   significado da cor; trocar o tinte por borda preserva os dois. */
.ct-card:hover { border-color: var(--u-linha-forte); box-shadow: 0 0 0 1px var(--u-linha-forte) }
/* sem tinte no hover, o secundario segue sobre a superficie: nada a corrigir */
.ct-card:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }
/* Avatar: tinte NEUTRO com a tinta do tinte. A v1 sorteia uma de seis cores literais
   pelo hash do nome — cor decorativa que não acompanha o tema e não informa nada que
   o nome ao lado já não diga. */
.ct-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--u-neutro-fundo); color: var(--u-neutro-ink);
  border: 1px solid var(--u-linha-forte); font-size: 12px; font-weight: 700;
}
.ct-card-nome b { display: block; font-size: 13.5px }
/* `align-items: flex-start` — sem isto o flex ESTICA os filhos e o selo de situacao,
   que e `inline-block`, vira uma pilula da largura da coluna inteira. Achado do olho
   na captura: o medidor nao reprova um selo largo, so um selo ilegivel. */
.ct-card-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0 }
.ct-card-acao { align-items: flex-end }
.ct-meta { font-size: 12px; color: var(--u-texto-2) }
.ct-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--u-texto-2) }
.ct-valor { font-size: 14px; font-weight: 700 }
.ct-idade { font-size: 13px; font-weight: 600 }
.ct-idade.nova { color: var(--u-verde-ink) }
.ct-idade.atencao { color: var(--u-ambar) }
.ct-idade.fria { color: var(--u-erro) }
.ct-idade.sem { color: var(--u-texto-2); font-weight: 400 }
.ct-vazio { padding: 28px; text-align: center; color: var(--u-texto-2);
  background: var(--u-superficie); border: 1px solid var(--u-linha); border-radius: var(--u-raio-cartao, 10px) }

/* ====================================================================== */
/* MÉTRICAS E PAINEL                                                      */
/* ====================================================================== */
.cm { font-size: 13px }
.cm-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start }
.cm-largo { grid-column: 1 / -1 }
.cm-bloco {
  background: var(--u-superficie); border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px); padding: 12px 14px; min-width: 0;
}
.cm-bloco h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--u-texto-2); margin: 0 0 10px;
}
/* Barra proporcional: elemento NÃO textual, então usa a MARCA (a mesma decisão da
   `.uix-barra` de pedidos-v2.css). O valor vai escrito ao lado, em texto. */
.cm-barra { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 5px }
/* ⚠️ Cada linha e um GRID PROPRIO — `max-content` no rotulo faria cada barra comecar
   num x diferente. Por isso a coluna e fixa, e por isso ela precisa de uma medida por
   CONTEXTO: 62px cabe "ago/26", nao cabe "Interessados". O gate mediu o estouro
   (68 > 62) no painel de recompra. */
.cm-funil .cm-barra { grid-template-columns: 104px minmax(0, 1fr) auto }
.cm-barra-rot { font-size: 11.5px; color: var(--u-texto-2); white-space: nowrap }
.cm-barra-trilha { background: var(--u-hover); border-radius: 3px; height: 12px; overflow: hidden }
.cm-barra-trilha > i { display: block; height: 100%; background: var(--u-verde-marca) }
.cm-barra-val { font-size: 12px; color: var(--u-texto); white-space: nowrap; text-align: right }
.cm-classes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.cm-tabela { min-width: 0 }
.cm-tabela a { color: var(--u-verde-texto) }
.cm-nulo { color: var(--u-texto-2) }
/* A opacidade varia com o percentual; a TINTA é fixa e legível no mínimo aplicado. */
.cm-coorte { display: inline-block; padding: 1px 7px; border-radius: 10px;
  background: var(--u-verde-fundo); color: var(--u-verde-ink); font-weight: 600 }

/* ====================================================================== */
/* CENTRAL DE RECOMPRA                                                    */
/* ====================================================================== */
.cr-filtros { margin-bottom: 12px }
.cr-tabela { min-width: 1100px }
.cr-tabela a { color: var(--u-texto) }
.cr-pendente { margin-top: 16px }

/* ====================================================================== */
/* FICHA DO CLIENTE                                                       */
/* ====================================================================== */
.cp { font-size: 13px }
.cp-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.cp-avatar { width: 44px; height: 44px; font-size: 14px }
.cp-titulo { flex: 1; min-width: 0 }
.cp-titulo h1 { font-size: 20px; margin: 0 }
.cp-receita { text-align: right }
.cp-receita span { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--u-texto-2) }
.cp-receita b { font-size: 19px; color: var(--u-texto) }
.cp-abas { margin-bottom: 14px }
.cp-abas .ld-aba { text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
.cp-corpo { display: flex; flex-direction: column; gap: 14px }
.cp-conversa { max-width: 860px }
.cp-erro { color: var(--u-erro); font-size: 12px; max-width: 220px }
.cp-rodape { margin-top: 10px }

@media (pointer: coarse) {
  .ct-barra select, .ct-card, .cp-abas .ld-aba { min-height: var(--u-alvo-toque, 44px) }
}