/* ==========================================================================
   crm-clientes.css — linguagem visual das telas CRM e Clientes (proposta v4).
   Arquivo separado a pedido do Rafael: styles.css já passou de 14.9k linhas.
   Prefixo `nx-` pra não colidir com as classes .crm-* / .rfm-* legadas, que
   seguem no styles.css atendendo o restante do produto.
   Referência visual aprovada: web/preview/crm-v4.html e clientes-v4.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faixa de estado — responde "como tô" antes de qualquer número.
   Cor da borda esquerda e do título carregam o estado; nunca decoração.
   -------------------------------------------------------------------------- */
.nx-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--dim);
  border-radius: 10px;
  background: var(--surface-2);
}

.nx-state.is-stopped {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(255, 95, 87, .09), transparent 55%), var(--surface-2);
}

.nx-state.is-running {
  border-left-color: var(--success);
  background: linear-gradient(90deg, rgba(53, 226, 154, .08), transparent 55%), var(--surface-2);
}

.nx-state.is-warn {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(246, 189, 67, .08), transparent 55%), var(--surface-2);
}

.nx-state__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  color: var(--muted);
  background: var(--surface-3);
}

.nx-state.is-stopped .nx-state__mark { color: var(--danger); background: rgba(255, 95, 87, .14); }
.nx-state.is-running .nx-state__mark { color: var(--success); background: rgba(53, 226, 154, .14); }
.nx-state.is-warn .nx-state__mark { color: var(--warning); background: rgba(246, 189, 67, .14); }

.nx-state__body { min-width: 0; }

.nx-state__body strong {
  display: block;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.nx-state.is-stopped .nx-state__body strong { color: var(--danger); }
.nx-state.is-running .nx-state__body strong { color: var(--success); }
.nx-state.is-warn .nx-state__body strong { color: var(--warning); }

.nx-state__body p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.nx-state__act {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.nx-why {
  max-width: 220px;
  margin: 0;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: right;
}

/* --------------------------------------------------------------------------
   2. Botões — laranja é reservado pra ação primária habilitada.
   -------------------------------------------------------------------------- */
.nx-btn {
  min-height: 38px;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  color: #100804;
  background: var(--orange);
  font: 800 12.5px/1 "Aptos", "Segoe UI", system-ui, sans-serif;
  transition: filter .15s ease;
}

.nx-btn:hover { filter: brightness(1.08); }

.nx-btn[disabled] {
  cursor: not-allowed;
  color: var(--dim);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.nx-btn.is-ghost {
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.nx-btn.is-ghost:hover { background: rgba(55, 213, 255, .08); }
.nx-btn.is-danger { color: #fff; background: var(--danger); }

.nx-btn.is-sm {
  min-height: 30px;
  padding: 6px 11px;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   3. Chips de fato — ✓ / ✕ / ? carregam o estado sem precisar ler a frase.
   -------------------------------------------------------------------------- */
.nx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.nx-fact {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11px;
  font-weight: 700;
}

.nx-fact::before { content: "○"; color: var(--dim); font-weight: 900; }
.nx-fact.is-ok { color: #b9f4da; background: rgba(53, 226, 154, .08); box-shadow: inset 0 0 0 1px rgba(53, 226, 154, .3); }
.nx-fact.is-ok::before { content: "✓"; color: var(--success); }
.nx-fact.is-bad { color: #ffc3bf; background: rgba(255, 95, 87, .08); box-shadow: inset 0 0 0 1px rgba(255, 95, 87, .3); }
.nx-fact.is-bad::before { content: "✕"; color: var(--danger); }
.nx-fact.is-unknown::before { content: "?"; color: var(--warning); }
.nx-fact b { color: var(--text); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. Card e cabeçalho de 2 níveis (h3 + meta). Sem eyebrow encadeado.
   -------------------------------------------------------------------------- */
.nx-card {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.nx-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.nx-head h3 { margin: 0; font-size: 15px; letter-spacing: -.015em; }
.nx-head h3 b { color: var(--dim); font-weight: 700; }
.nx-meta { color: var(--dim); font-size: 11px; }

.nx-note {
  margin: 12px 0 0;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.5;
}

.nx-foot {
  margin: 16px 0 0;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. Medidor de travas — quantas liberaram, quantas ainda bloqueiam.
   -------------------------------------------------------------------------- */
.nx-gauge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  margin-bottom: 14px;
}

.nx-gauge__num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.nx-gauge__num small { color: var(--dim); font-size: 15px; font-weight: 700; }

.nx-gauge__bar {
  display: flex;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 95, 87, .2);
}

.nx-gauge__bar i { display: block; height: 100%; background: var(--success); }
.nx-gauge__cap { grid-column: 2; color: var(--muted); font-size: 11px; }
.nx-gauge__cap b { color: var(--danger); }

.nx-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nx-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .028);
  font-size: 12px;
  line-height: 1.35;
}

.nx-check b { display: block; font-weight: 700; }
.nx-check span { display: block; margin-top: 2px; color: var(--dim); font-size: 10.5px; }
.nx-check i { font-style: normal; font-size: 13px; font-weight: 900; line-height: 1.25; }
.nx-check.is-ok { color: var(--muted); }
.nx-check.is-ok i { color: var(--success); }
.nx-check.is-bad { color: var(--text); background: rgba(255, 95, 87, .07); box-shadow: inset 0 0 0 1px rgba(255, 95, 87, .2); }
.nx-check.is-bad i { color: var(--danger); }

/* --------------------------------------------------------------------------
   6. Linha de números — KPI compacto com rótulo e contexto.
   -------------------------------------------------------------------------- */
.nx-nums {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
}

.nx-nums--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-nums--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nx-nums > div { min-width: 0; padding: 11px 12px; background: var(--bg-soft); }

.nx-nums strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.nx-nums strong.is-zero { color: var(--dim); }
.nx-nums strong.is-good { color: var(--success); }
.nx-nums strong.is-bad { color: var(--danger); }
.nx-nums strong.is-queue { color: var(--blue); }

.nx-nums span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nx-nums small { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; line-height: 1.35; }

/* --------------------------------------------------------------------------
   7. Ritmo diário por régua — enviado sólido, fila hachurada.
   -------------------------------------------------------------------------- */
.nx-pace-list { margin-top: 16px; }

.nx-pace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.nx-pace:last-child { border-bottom: 0; }

.nx-pace__name {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}

.nx-pace__name em {
  padding: 2px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nx-pace__name em.on { color: var(--success); background: rgba(53, 226, 154, .13); }
.nx-pace__name em.off { color: var(--warning); background: rgba(246, 189, 67, .13); }

.nx-pace__val {
  white-space: nowrap;
  font: 800 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.nx-pace__val u { color: var(--dim); font-weight: 700; text-decoration: none; }

.nx-pace__track {
  position: relative;
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.nx-pace__track i { display: block; height: 100%; background: var(--success); }

.nx-pace__track u {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: repeating-linear-gradient(135deg, rgba(55, 213, 255, .42) 0 4px, rgba(55, 213, 255, .16) 4px 8px);
}

.nx-pace__legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--dim);
  font-size: 10.5px;
}

.nx-pace__legend b { color: var(--muted); font-weight: 700; }
.nx-pace__legend .is-queue, .nx-pace__legend .is-queue b { color: var(--blue); }

/* --------------------------------------------------------------------------
   8. Funil — barra proporcional em vez de lista de números.
   -------------------------------------------------------------------------- */
.nx-funnel {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.nx-funnel li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.nx-funnel span { color: var(--muted); font-size: 11.5px; }

.nx-funnel__bar {
  height: 22px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-3);
}

.nx-funnel__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), rgba(55, 213, 255, .35));
}

.nx-funnel li:last-child .nx-funnel__bar i {
  background: linear-gradient(90deg, var(--success), rgba(53, 226, 154, .35));
}

.nx-funnel b {
  min-width: 58px;
  text-align: right;
  font: 800 15px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.nx-funnel b.is-zero { color: var(--dim); }

/* --------------------------------------------------------------------------
   9. Vazio explicado — zero que é verdade, não falha de leitura.
   -------------------------------------------------------------------------- */
.nx-zero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(246, 189, 67, .06);
  box-shadow: inset 0 0 0 1px rgba(246, 189, 67, .22);
}

.nx-zero__mark { color: var(--warning); font-size: 16px; font-weight: 900; line-height: 1.1; }
.nx-zero strong { display: block; color: var(--warning); font-size: 13px; }
.nx-zero p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Tabela operacional.
   -------------------------------------------------------------------------- */
.nx-tablewrap {
  margin: 0 -18px;
  padding: 0 18px;
  overflow-x: auto;
}

/* O .sr-only do styles.css está escopado em .crm-page, que a tela de Clientes
   não usa — sem esta regra a <caption> de acessibilidade vaza na tela. */
.nx-table caption.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nx-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 12px;
}

.nx-table th {
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  text-align: left;
  white-space: nowrap;
  font: 800 9.5px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nx-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(113, 232, 255, .07);
  vertical-align: middle;
}

.nx-table tr:last-child td { border-bottom: 0; }
.nx-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-table tbody tr:hover td { background: rgba(55, 213, 255, .035); }

.nx-rule { display: flex; gap: 9px; align-items: center; min-width: 0; }

.nx-rule__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
}

.nx-rule__dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(53, 226, 154, .16); }
.nx-rule__dot.off { background: var(--warning); box-shadow: 0 0 0 3px rgba(246, 189, 67, .13); }
.nx-rule b { display: block; font-size: 12.5px; }
.nx-rule span { display: block; margin-top: 2px; color: var(--dim); font-size: 10.5px; }

.nx-quota { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

.nx-quota__bar {
  width: 46px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.nx-quota__bar.is-off { background: transparent; }
.nx-quota__bar i { display: block; height: 100%; background: var(--success); }

.nx-read {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--dim);
  background: rgba(255, 255, 255, .04);
  font-size: 10.5px;
  font-weight: 800;
}

.nx-read.is-ok { color: var(--success); background: rgba(53, 226, 154, .11); }
.nx-read.is-warn { color: var(--warning); background: rgba(246, 189, 67, .11); }

/* --------------------------------------------------------------------------
   11. Trilha de lifecycle do warm-up.
   -------------------------------------------------------------------------- */
.nx-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

.nx-track > div {
  padding: 10px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px var(--line);
}

.nx-track em {
  display: block;
  color: var(--dim);
  font-style: normal;
  font: 800 9.5px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nx-track b { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.nx-track > div.is-now { background: rgba(246, 189, 67, .1); box-shadow: inset 0 0 0 1px rgba(246, 189, 67, .35); }
.nx-track > div.is-now em, .nx-track > div.is-now b { color: var(--warning); }
.nx-track > div.is-done { background: rgba(53, 226, 154, .08); box-shadow: inset 0 0 0 1px rgba(53, 226, 154, .26); }
.nx-track > div.is-done em, .nx-track > div.is-done b { color: var(--success); }

/* --------------------------------------------------------------------------
   12. Sinais ativos do monitor — incidente aberto, não aviso genérico.
   -------------------------------------------------------------------------- */
.nx-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(255, 95, 87, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 95, 87, .22);
}

.nx-signals strong {
  flex: 1 0 100%;
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nx-signals span {
  padding: 4px 10px;
  border-radius: 999px;
  color: #ffc3bf;
  background: rgba(255, 95, 87, .12);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   13. Nav de seção.
   -------------------------------------------------------------------------- */
.nx-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 14, 17, .8);
}

.nx-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.nx-nav a:hover { color: var(--text); background: rgba(55, 213, 255, .09); }
.nx-nav a.is-alert { color: var(--danger); background: rgba(255, 95, 87, .1); }

.nx-nav-badge {
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #1a0705;
  background: var(--danger);
  font: 800 10px/1.5 var(--font-mono);
}

/* --------------------------------------------------------------------------
   14. Seletor de período / filtro segmentado.
   -------------------------------------------------------------------------- */
.nx-period {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.nx-period button {
  min-height: 28px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.nx-period button.is-active { color: #06121a; background: var(--blue); }
.nx-period button.is-active.is-channel { background: var(--success); }

/* --------------------------------------------------------------------------
   15. Disclosure — detalhe sob demanda, 1 linha de título.
   -------------------------------------------------------------------------- */
.nx-more {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.nx-more > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 700;
}

.nx-more > summary::-webkit-details-marker { display: none; }
.nx-more > summary::after { content: "›"; color: var(--dim); font-size: 18px; transform: rotate(90deg); }
.nx-more[open] > summary::after { transform: rotate(-90deg); }
.nx-more > summary .nx-meta { margin-left: auto; margin-right: 6px; font-weight: 500; }
.nx-more__body { padding: 0 18px 18px; }

.nx-audit { margin: 0; padding: 0; list-style: none; }

.nx-audit li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(113, 232, 255, .07);
  font-size: 12px;
}

.nx-audit li:last-child { border-bottom: 0; }
.nx-audit i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); font-style: normal; }
.nx-audit time { color: var(--dim); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   16. Clientes — filtros e KPIs (1 herói + 4 de apoio).
   -------------------------------------------------------------------------- */
.nx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 12px;
}

.nx-filters > em {
  color: var(--dim);
  font-style: normal;
  font: 800 9.5px/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.nx-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.nx-kpis > div { min-width: 0; padding: 14px 15px; background: var(--bg-soft); }
.nx-kpis > div.is-hero { background: linear-gradient(135deg, rgba(55, 213, 255, .1), transparent 60%), var(--bg-soft); }

.nx-kpis span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nx-kpis strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.nx-kpis .is-hero strong { font-size: 36px; }
.nx-kpis small { display: block; margin-top: 7px; color: var(--dim); font-size: 10.5px; line-height: 1.35; }
.nx-kpis .c-money strong { color: var(--blue); }
.nx-kpis .c-good strong { color: var(--success); }
.nx-kpis .c-warn strong { color: var(--warning); }

/* --------------------------------------------------------------------------
   17. Clientes — composição da base (uma barra antes de oito cards).
   -------------------------------------------------------------------------- */
.nx-split {
  display: flex;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3);
}

.nx-split i {
  display: grid;
  place-items: center;
  height: 100%;
  color: #040a0c;
  font-style: normal;
  font: 800 11px/1 var(--font-mono);
}

.nx-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
}

.nx-split-legend span { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11.5px; }
.nx-split-legend u { width: 9px; height: 9px; border-radius: 3px; text-decoration: none; }
.nx-split-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   18. Clientes — famílias e cards de segmento.
   -------------------------------------------------------------------------- */
.nx-fam { margin-top: 16px; }
.nx-fam:first-child { margin-top: 0; }
.nx-fam__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.nx-fam__head h4 { margin: 0; font-size: 12.5px; letter-spacing: .01em; color: var(--fam, var(--text)); }
.nx-fam__head span { color: var(--dim); font-size: 11px; }

.nx-segs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.nx-seg {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--seg, var(--dim));
  transition: background .15s ease, transform .15s ease;
}

.nx-seg:hover { background: rgba(255, 255, 255, .055); transform: translateY(-1px); }

.nx-seg.is-open {
  background: color-mix(in srgb, var(--seg, var(--dim)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg, var(--dim)) 45%, transparent), inset 3px 0 0 var(--seg, var(--dim));
}

.nx-seg__top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.nx-seg__top b { font-size: 12.5px; text-transform: capitalize; }
.nx-seg__top em { color: var(--seg, var(--muted)); font-style: normal; font: 800 11px/1 var(--font-mono); }
.nx-seg__num { display: flex; gap: 8px; align-items: baseline; }

.nx-seg__num strong {
  color: var(--seg, var(--text));
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.nx-seg__num u { color: var(--dim); font-size: 11px; text-decoration: none; }
.nx-seg__bar { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.nx-seg__bar i { display: block; height: 100%; background: var(--seg, var(--dim)); }
.nx-seg__row { display: flex; gap: 12px; color: var(--muted); font-size: 10.5px; }
.nx-seg__row b { color: var(--text); font-variant-numeric: tabular-nums; }
.nx-seg__act { color: var(--orange); font-size: 11px; font-weight: 800; }

/* --------------------------------------------------------------------------
   19. Clientes — layout com drill-down colado ao gatilho.
   -------------------------------------------------------------------------- */
.nx-two {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, .9fr);
  gap: 12px;
  align-items: start;
}

.nx-drill { position: sticky; top: 16px; }
.nx-drill__list { max-height: 430px; overflow: auto; }

.nx-cust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(113, 232, 255, .08);
}

.nx-cust:last-child { border-bottom: 0; }
.nx-cust b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nx-cust > div > span { display: block; margin-top: 2px; color: var(--dim); font-size: 10px; }

.nx-cust__nums {
  display: flex;
  gap: 10px;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.nx-cust__nums u { color: var(--dim); text-decoration: none; }
.nx-cust__rec.ok { color: var(--success); }
.nx-cust__rec.warn { color: var(--warning); }
.nx-cust__rec.risk { color: var(--danger); }
.nx-cust__reach { grid-column: 1 / -1; color: var(--dim); font-size: 10px; }
.nx-cust__reach.on { color: var(--success); }

/* --------------------------------------------------------------------------
   20. Clientes — retenção por safra.
   -------------------------------------------------------------------------- */
.nx-cohort { min-width: 560px; }
.nx-cohort td.cell { padding: 4px; text-align: center; }

.nx-cohort .heat {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--blue) var(--s, 0%), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) calc(var(--s, 0%) + 8%), transparent);
  font: 700 11px/1 var(--font-mono);
}

.nx-cohort .heat.base { color: var(--dim); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
.nx-cohort .empty { color: rgba(255, 255, 255, .16); }

.nx-heat-legend { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 10.5px; }

.nx-heat-legend i {
  display: block;
  width: 90px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(55, 213, 255, .07), var(--blue));
}

.nx-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 3px; background: var(--seg, var(--dim)); }

/* --------------------------------------------------------------------------
   21. Responsivo — tem que funcionar em 375px, não quebrar.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nx-two { grid-template-columns: 1fr; }
  .nx-drill { position: static; }
}

@media (max-width: 980px) {
  .nx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-kpis > div.is-hero { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nx-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nx-checks { grid-template-columns: 1fr; }
  .nx-nums--4, .nx-nums--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .nx-state { grid-template-columns: auto minmax(0, 1fr); }
  .nx-state__act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nx-state__act .nx-btn { flex: 1 1 140px; }
  .nx-why { max-width: none; text-align: left; }
  .nx-funnel li { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-funnel__bar { grid-column: 1 / -1; }
  .nx-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .nx-segs { grid-template-columns: 1fr; }
  .nx-card { padding: 14px; }
  .nx-tablewrap { margin: 0 -14px; padding: 0 14px; }
}