/* clientes-v3.css — skin "calma" da aba Clientes (gated por html.cl3)
   Princípios: bordas 0.5px, cor só com significado, 1 destaque por tela,
   escala tipográfica única (16/13/12), mono para CNJ/valores. */

html.cl3 {
  --cl3-border: rgba(28, 25, 23, 0.12);
  --cl3-border-2: rgba(28, 25, 23, 0.22);
  --cl3-bg: #fff;
  --cl3-bg-soft: #FAFAF9;
  --cl3-text: #1C1917;
  --cl3-text-2: #6B7280;
  --cl3-text-3: #9CA3AF;
  --cl3-amber-bg: #FAEEDA; --cl3-amber-tx: #854F0B;
  --cl3-teal-bg: #E1F5EE;  --cl3-teal-tx: #085041; --cl3-teal-bd: #5DCAA5;
  --cl3-blue-bg: #E6F1FB;  --cl3-blue-tx: #0C447C;
  --cl3-green-bg: #EAF3DE; --cl3-green-tx: #27500A;
  --cl3-red-bg: #FCEBEB;   --cl3-red-tx: #791F1F;
  --cl3-gray-bg: #F1EFE8;  --cl3-gray-tx: #444441;
  --cl3-r: 12px;
}

/* ── A. Hero compacto: título + KPIs + ações, sem teatro ────────────────── */
html.cl3 .clientes-v2 .hero-eyebrow,
html.cl3 .clientes-v2 .hero-sub,
html.cl3 .clientes-v2 .kpi-foot { display: none !important; }
html.cl3 .clientes-v2 .hero { padding-top: 18px !important; padding-bottom: 14px !important; }
html.cl3 .clientes-v2 .hero .display { font-size: 22px !important; }
html.cl3 .clientes-v2 .kpis { margin-top: 12px !important; }
html.cl3 .clientes-v2 .kpi { padding: 10px 14px !important; }
html.cl3 .clientes-v2 .kpi-bar { display: none !important; }
html.cl3 .clientes-v2 .kpi.cl3-kpi-click { cursor: pointer; }
html.cl3 .clientes-v2 .kpi.cl3-kpi-click:hover { outline: 1px solid rgba(255,255,255,.25); }

/* ── E. Menos controles e status discreto ───────────────────────────────── */
/* "Ordenar por…" duplica o sort do cabeçalho da tabela */
html.cl3 .clientes-v2 #sort-clientes { display: none !important; }
/* Cliente ativo é a regra, não a exceção: vira texto neutro (cor fica
   reservada para prospect/inativo, que são os desvios) */
html.cl3 .clientes-v2 .schip.ativo {
  background: transparent !important;
  border: none !important;
  color: var(--cl3-text-3) !important;
  font-weight: 500 !important;
}

/* Célula "Próximo evento" (substitui Tribunal quando há evento) */
.cl3-next { font-size: 12px; color: var(--cl3-text-2); white-space: nowrap; }

/* ── Tabela enxuta: 50 linhas dizendo "Ativo · ATUALIZAÇÃO hoje" é ruído ── */
/* Colunas Status (4ª) e Última atividade (6ª) saem; o status vira chip ao
   lado do nome SÓ quando é exceção (prospect/inativo); o espaço liberado vai
   para "Próximo evento", que estava cortando texto em 140px. */
html.cl3 .clientes-v2 .list-head > .th:nth-child(4),
html.cl3 .clientes-v2 .client-row > .td:nth-child(4),
html.cl3 .clientes-v2 .list-head > .th:nth-child(6),
html.cl3 .clientes-v2 .client-row > .td:nth-child(6) { display: none !important; }

@media (min-width: 769px) {
  html.cl3 .clientes-v2 .list-head,
  html.cl3 .clientes-v2 .client-row {
    grid-template-columns: 40px 48px minmax(0, 1fr) 96px 230px 48px !important;
  }
  html.cl3 .clientes-v2 .list-wrap.no-select .list-head,
  html.cl3 .clientes-v2 .list-wrap.no-select .client-row {
    grid-template-columns: 8px 48px minmax(0, 1fr) 96px 230px 48px !important;
  }
}

/* Chip de status inline (só prospect/inativo) e tribunal no subtítulo */
.cl3-st { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; vertical-align: 1px; margin-left: 6px; }
.cl3-st--prospect { background: var(--cl3-blue-bg); color: var(--cl3-blue-tx); }
.cl3-st--inativo { background: var(--cl3-gray-bg); color: var(--cl3-gray-tx); }

/* ── F. Cards: entra na régua 0.5px ─────────────────────────────────────── */
html.cl3 .clientes-v2 .cards-grid > * { box-shadow: none !important; }

/* "Ativo" é a regra, não exceção: a barra de cor de status some nas linhas e
   nos cards (50 barras verdes = ruído). Prospect/inativo mantêm a cor. */
html.cl3 .clientes-v2 .client-row.s-ativo { border-left-color: transparent !important; }
html.cl3 .clientes-v2 .card-accent.s-ativo { background: transparent !important; }

/* ── Lista: silêncio visual ─────────────────────────────────────────────── */
html.cl3 .clientes-v2 .list-wrap,
html.cl3 .clientes-v2 .cards-grid > * {
  border-color: var(--cl3-border) !important;
  box-shadow: none !important;
}
html.cl3 .clientes-v2 .list-head { background: transparent !important; }
html.cl3 .clientes-v2 .filters { box-shadow: none !important; border-color: var(--cl3-border) !important; }

/* ── Modal detalhe: base ────────────────────────────────────────────────── */
/* ALTURA FIXA: o modal nunca muda de tamanho ao trocar de tab — o conteúdo
   rola dentro dele. Também um pouco mais largo p/ a linha do tempo respirar. */
html.cl3 .cliente-detail-v2 .cd-modal {
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.18) !important;
  height: min(88vh, 920px) !important;
  max-height: 88vh !important;
  max-width: 1020px !important;
}
/* Footer legado só tinha um "Fechar" duplicado (o X do header já fecha) —
   removido para devolver ~70px de área útil ao conteúdo. */
html.cl3 .cliente-detail-v2 .cd-modal > footer { display: none !important; }
/* Tab "Atividades" legada ficou redundante: a linha do tempo da tab Processos
   agora absorve pagamentos, acordos e o marco de cadastro (e ainda tem DJE+prazos). */
html.cl3 .cliente-detail-v2 .tab-btn[data-tab="timeline"],
html.cl3 .cliente-detail-v2 .tab-content[data-tab="timeline"] { display: none !important; }
html.cl3 .cliente-detail-v2 .cd-head { border-bottom: 0.5px solid var(--cl3-border) !important; }
html.cl3 .cliente-detail-v2 .cd-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
html.cl3 .cliente-detail-v2 .cd-action {
  border: 0.5px solid var(--cl3-border-2) !important;
  background: var(--cl3-bg) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
}
html.cl3 .cliente-detail-v2 .cd-action:hover { background: var(--cl3-bg-soft) !important; }

/* Tabs: underline preto, sem azul */
html.cl3 .cliente-detail-v2 .tab-btn {
  color: var(--cl3-text-2) !important;
  border-bottom-color: transparent !important;
  font-size: 13px !important;
}
html.cl3 .cliente-detail-v2 .tab-btn.active {
  color: var(--cl3-text) !important;
  border-bottom-color: var(--cl3-text) !important;
}

/* ── Dossiê (KPIs injetados pela v3) ────────────────────────────────────── */
/* A v3 injeta sua própria faixa de indicadores (mais completa) — esconde a legada */
html.cl3 .cliente-detail-v2 .cd-kpis-row { display: none !important; }

.cl3-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 32px 4px;
}
.cl3-kpi {
  background: var(--cl3-bg-soft);
  border: 0.5px solid var(--cl3-border);
  border-radius: var(--cl3-r);
  padding: 10px 14px;
}
.cl3-kpi-lbl { font-size: 11.5px; color: var(--cl3-text-2); margin-bottom: 2px; }
.cl3-kpi-val { font-size: 18px; font-weight: 600; color: var(--cl3-text); font-variant-numeric: tabular-nums; }
.cl3-kpi-val .cl3-chip { vertical-align: 2px; }
.cl3-kpi--alerta { background: var(--cl3-amber-bg); border-color: transparent; }
.cl3-kpi--alerta .cl3-kpi-lbl { color: var(--cl3-amber-tx); opacity: .8; }
.cl3-kpi--alerta .cl3-kpi-val { color: var(--cl3-amber-tx); font-size: 14px; line-height: 1.35; }

.cl3-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
}
.cl3-chip--amber { background: var(--cl3-amber-bg); color: var(--cl3-amber-tx); }
.cl3-chip--teal  { background: var(--cl3-teal-bg);  color: var(--cl3-teal-tx); }
.cl3-chip--blue  { background: var(--cl3-blue-bg);  color: var(--cl3-blue-tx); }
.cl3-chip--gray  { background: var(--cl3-gray-bg);  color: var(--cl3-gray-tx); }
.cl3-chip--red   { background: var(--cl3-red-bg);   color: var(--cl3-red-tx); }
.cl3-chip--green { background: var(--cl3-green-bg); color: var(--cl3-green-tx); }

/* ── Linha do tempo (tab Processos) ─────────────────────────────────────── */
.cl3-proc { font-size: 13px; color: var(--cl3-text); }
.cl3-proc-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--cl3-bg); border: 0.5px solid var(--cl3-border-2);
  border-radius: var(--cl3-r); padding: 11px 14px; margin-bottom: 10px;
}
.cl3-proc-head .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.cl3-proc-head .cl3-proc-sub { font-size: 12px; color: var(--cl3-text-2); }

.cl3-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.cl3-filtro {
  font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 0.5px solid var(--cl3-border); color: var(--cl3-text-2); background: transparent;
}
.cl3-filtro.on { border-color: var(--cl3-border-2); color: var(--cl3-text); background: var(--cl3-bg); font-weight: 600; }

.cl3-tl { position: relative; padding-left: 34px; }
.cl3-tl::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 2px; background: var(--cl3-border);
}
.cl3-ev { position: relative; margin-bottom: 12px; }
.cl3-ev-dot {
  position: absolute; left: -34px; top: 0; width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cl3-gray-bg); color: var(--cl3-gray-tx); font-size: 14px;
}
.cl3-ev-dot--pub  { background: var(--cl3-blue-bg);  color: var(--cl3-blue-tx); }
.cl3-ev-dot--aud  { background: var(--cl3-teal-bg);  color: var(--cl3-teal-tx); }
.cl3-ev-dot--task { background: var(--cl3-amber-bg); color: var(--cl3-amber-tx); }
.cl3-ev-dot--fin  { background: var(--cl3-green-bg); color: var(--cl3-green-tx); font-size: 11px; font-weight: 700; }
.cl3-ev-card {
  background: var(--cl3-bg); border: 0.5px solid var(--cl3-border);
  border-radius: var(--cl3-r); padding: 11px 14px;
}
.cl3-ev--futuro .cl3-ev-card { border-color: var(--cl3-teal-bd); }
.cl3-ev-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cl3-ev-tit { font-size: 13.5px; font-weight: 600; }
.cl3-ev-data { margin-left: auto; font-size: 11.5px; color: var(--cl3-text-2); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.cl3-ev-sub { font-size: 12.5px; color: var(--cl3-text-2); margin-top: 5px; line-height: 1.5; }
.cl3-ev-acoes { display: flex; gap: 8px; margin-top: 9px; }
.cl3-ev-btn {
  font-size: 12px; padding: 4px 11px; border-radius: 8px; cursor: pointer;
  border: 0.5px solid var(--cl3-border-2); background: var(--cl3-bg); color: var(--cl3-text);
}
.cl3-ev-btn:hover { background: var(--cl3-bg-soft); }
a.cl3-ev-btn { text-decoration: none; display: inline-flex; align-items: center; }
.cl3-ev-btn--teal { background: var(--cl3-teal-bg); color: var(--cl3-teal-tx); border-color: transparent; font-weight: 600; }
.cl3-ev-btn--teal:hover { background: var(--cl3-teal-bg); filter: brightness(.97); }

/* Análise da IA expandível (contexto / prazo / passo-a-passo) */
.cl3-ev-ia {
  margin-top: 9px; padding: 10px 12px;
  background: var(--cl3-bg-soft); border: 0.5px solid var(--cl3-border);
  border-radius: 10px; font-size: 12.5px; color: var(--cl3-text);
  line-height: 1.6; white-space: pre-line;
}

/* WhatsApp inteligente no KPI de próxima audiência */
.cl3-wa {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  background: var(--cl3-green-bg); color: var(--cl3-green-tx);
}
.cl3-wa::before { content: "✆"; font-size: 13px; }
.cl3-wa:hover { filter: brightness(.96); }
.cl3-ev-marco { font-size: 12px; color: var(--cl3-text-2); padding-top: 5px; }
.cl3-tl-secao {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cl3-text-3); margin: 16px 0 10px;
}
.cl3-vazio { font-size: 13px; color: var(--cl3-text-2); padding: 18px 4px; }
.cl3-skel { height: 64px; border-radius: var(--cl3-r); background: var(--cl3-bg-soft); border: 0.5px solid var(--cl3-border); margin-bottom: 10px; animation: cl3pulse 1.4s ease-in-out infinite; }
@keyframes cl3pulse { 50% { opacity: .55; } }

/* ── Tabs legadas (Acordos/Audiências/Financeiro): entram na régua ──────── */
/* Sem sombras dentro do conteúdo das tabs e bordas suavizadas — unifica com
   a linguagem 0.5px do restante do modal sem tocar no HTML legado. */
html.cl3 .cliente-detail-v2 .tab-content [class*="shadow"] { box-shadow: none !important; }
html.cl3 .cliente-detail-v2 .tab-content .border,
html.cl3 .cliente-detail-v2 .tab-content [class*="border-gray"] {
  border-color: var(--cl3-border) !important;
}

/* ── Botão de rollback (flutuante, só na view clientes) ─────────────────── */
.cl3-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 0.5px solid var(--cl3-border-2); background: var(--cl3-bg); color: var(--cl3-text-2);
  box-shadow: 0 4px 16px rgba(0,0,0,.10); display: none;
}
.cl3-toggle.show { display: block; }