@import url("/analytics-blocos.css");
/* #422 / #752 Base de clientes. Só tokens (var(--ds-*), var(--ink), var(--line)…): nada de cor literal,
   para a tela seguir o tema do cliente. Tudo sob .base-clientes (a folha carrega no app inteiro). */
.base-clientes h2 small, .base-clientes .sub { color: var(--muted); font-weight: 400; font-size: var(--ds-fs); }
.base-clientes h2 { margin: var(--ds-s6) 0 var(--ds-s2); }
.base-clientes .base-carimbo p { margin: var(--ds-s1) 0; }
.base-clientes .base-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.base-clientes .base-kpis small { display: inline-block; margin-right: 6px; }
.base-clientes .base-periodo { margin-top: var(--ds-s8); border-top: 1px solid var(--line); }

/* cards dos segmentos */
.base-clientes .base-segmentos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-s2); margin: var(--ds-s3) 0 var(--ds-s4); }
.base-clientes .base-seg { text-align: left; border: 1px solid var(--line); border-radius: var(--ds-r); padding: var(--ds-s3);
  background: var(--panel); color: var(--ink); cursor: pointer; min-height: 44px; font: inherit; }
.base-clientes .base-seg .nome { display: block; font-weight: 600; font-size: var(--ds-fs); }
.base-clientes .base-seg strong { display: block; font-size: var(--ds-fs-xl); margin: var(--ds-s1) 0; font-variant-numeric: tabular-nums; }
.base-clientes .base-seg small { display: block; color: var(--muted); font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }
.base-clientes .base-seg:hover { border-color: var(--ds-accent); }
.base-clientes .base-seg:focus-visible, .base-clientes .base-matriz button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.base-clientes .base-seg.ligado { border-color: var(--ds-accent); box-shadow: inset 0 0 0 1px var(--ds-accent); }
.base-clientes .base-seg.vazio { min-height: 104px; cursor: default; }
.base-clientes .base-tend { color: var(--ink) !important; }

/* matriz 5x5: um só tom (accent), intensidade = participação na base */
.base-clientes .base-matriz-rol { overflow-x: auto; }
.base-clientes .base-matriz { border-collapse: separate; border-spacing: 4px; width: 100%; max-width: 760px; }
.base-clientes .base-matriz th { color: var(--muted); font-weight: 600; font-size: var(--ds-fs-sm); padding: 0 var(--ds-s1); white-space: nowrap; }
.base-clientes .base-matriz td { padding: 0; }
.base-clientes .base-matriz button { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: var(--ds-r-sm); cursor: pointer;
  color: var(--ink); font: inherit; padding: var(--ds-s1);
  background: color-mix(in srgb, var(--ds-accent) calc(var(--peso, 0) * 55%), var(--panel)); }
.base-clientes .base-matriz button strong { display: block; font-variant-numeric: tabular-nums; }
.base-clientes .base-matriz button small { display: block; font-size: var(--ds-fs-xs); color: var(--ink); opacity: .8; font-variant-numeric: tabular-nums; }
.base-clientes .base-matriz button.ligado { outline: 2px solid var(--ink); outline-offset: -2px; }
.base-clientes .base-matriz.vazio { height: 240px; max-width: 760px; border-radius: var(--ds-r); background: var(--panel); border: 1px solid var(--line); }

/* lista */
.base-clientes .base-filtros { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: center; margin-bottom: var(--ds-s2); }
.base-clientes .base-filtros input[type=search] { flex: 1 1 220px; min-width: 0; min-height: 36px; }
.base-clientes .base-filtros select { min-height: 36px; max-width: 100%; }
.base-clientes .base-chip { border: 1px solid var(--ds-accent); border-radius: var(--ds-r-pill); background: transparent; color: var(--ink); padding: 4px 12px; cursor: pointer; min-height: 36px; }
.base-clientes .base-acoes { display: flex; gap: var(--ds-s2); margin-left: auto; flex-wrap: wrap; }
.base-clientes .base-acoes button { min-height: 40px; padding: 0 var(--ds-s3); border-radius: var(--ds-r-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.base-clientes .base-acoes button.primaria:not(:disabled) { background: var(--ds-accent); color: var(--ds-accent-ink); border-color: var(--ds-accent); }
.base-clientes .base-acoes button:disabled { opacity: .5; cursor: not-allowed; }
.base-clientes .base-contatos .ds-tabela td:not(.num) { text-align: left; }
.base-clientes .base-id { display: block; color: var(--muted-2); font-size: var(--ds-fs-xs); font-family: var(--ds-font-mono); }
.base-clientes .ds-tabela td small { color: var(--muted); font-size: var(--ds-fs-xs); }
.base-clientes .base-paginas { display: flex; gap: var(--ds-s3); align-items: center; justify-content: flex-end; margin-top: var(--ds-s2); }
.base-clientes .base-paginas button { min-width: 44px; min-height: 44px; }
.base-clientes .base-vazio { padding: var(--ds-s4); border: 1px dashed var(--line); border-radius: var(--ds-r); }

@media (max-width: 980px) {
  .base-clientes .base-kpis, .base-clientes .base-segmentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .base-clientes .base-kpis, .base-clientes .base-segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .base-clientes .base-acoes { margin-left: 0; width: 100%; }
  .base-clientes .base-acoes button { flex: 1 1 auto; }
  .base-clientes .base-matriz button { min-height: 44px; }
  .base-clientes .base-matriz button small { display: none; }
  /* no celular o card do contato fica com o que decide: quem, como chamar, quanto vale, quando comprou */
  .base-clientes .base-contatos .ds-tabela td.base-largo { display: none; }
  .base-clientes .base-seg small:last-child { display: none; }
}