/* ═══════════════════════════════════════════════════════════════════════
   FICHA JURÍDICA — só o que o painel ainda não tinha
   ═══════════════════════════════════════════════════════════════════════
   Reescrita do zero em 25/08/2026, depois de três tentativas em que a ficha
   jurídica continuava parecendo outro produto.

   A REGRA, e é uma só: aqui NÃO se repinta componente que já existe. Nada
   de fundo próprio, cor própria, cartão com outro raio de canto, avatar com
   outro formato. O painel de clientes tem UM visual e ele não muda conforme
   o cliente aberto — foi assim que a ficha jurídica acabou com um avatar
   quadrado enquanto o produto inteiro usa avatar redondo.

   Ficou o que o painel não tinha: a mesa de processos, o panorama do
   expediente, as providências, a auditoria, os papéis, as fontes oficiais,
   o DJEN e o cofre. Componentes NOVOS, desenhados com os tokens do próprio
   painel.

   Medido no corte: 266 regras entraram, 123 ficaram. As que saíram
   repintavam algo que main.css já desenhava.
   ═══════════════════════════════════════════════════════════════════════ */
.cli-det-juridico{
  --jur-acento:var(--clr-indigo-light,#a5b4fc);
  --jur-acento-forte:var(--clr-indigo,#6366f1);
  --jur-oficial:var(--clr-warning,#f59e0b);
  --jur-sucesso:var(--clr-success,#10b981);
  --jur-perigo:var(--clr-danger,#ef4444);
  --jur-texto:var(--clr-text,#f0f0f0);
  --jur-texto-fraco:var(--clr-text-dim,rgba(240,240,240,.35));
  --jur-linha:var(--clr-border,rgba(255,255,255,.07));
  --jur-linha-forte:var(--clr-border-strong,rgba(255,255,255,.12));
  --jur-superficie:var(--cli-cartao,var(--clr-bg-2,#111));
  min-width:0;
}
.cli-det-juridico :is(button,a,summary):focus-visible{
  outline:2px solid var(--jur-acento);
  outline-offset:2px;
}
/* ── Operação: responsáveis, providência e prova ────────────────────── */
.cli-det-juridico .cli-jur-operacao{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 13px;
  padding:11px;
  border:1px solid var(--jur-linha);
  border-radius:14px;
  background:var(--clr-bg-card,rgba(255,255,255,.03));
}
.cli-det-juridico .cli-jur-papeis{
  display:flex;
  align-content:flex-start;
  gap:7px;
  flex:1 1 210px;
  flex-wrap:wrap;
  min-width:0;
}
.cli-det-juridico .cli-jur-papel{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  max-width:100%;
  padding:5px 10px;
  border:1px solid var(--jur-linha);
  border-radius:999px;
  color:var(--jur-texto-fraco);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.68rem;
  font-weight:650;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-papel.responsavel{
  border-color:color-mix(in srgb,var(--jur-acento) 30%,transparent);
  background:color-mix(in srgb,var(--jur-acento-forte) 10%,transparent);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-jur-papel.revisor{
  border-color:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 30%,transparent);
  background:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 8%,transparent);
  color:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 82%,white);
}
.cli-det-juridico .cli-jur-providencia{
  display:flex;
  flex:2 1 360px;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:10px 12px;
  border-left:2px solid color-mix(in srgb,var(--jur-acento) 52%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--jur-acento-forte) 7%,transparent);
}
.cli-det-juridico .cli-jur-providencia-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:5px;
}
.cli-det-juridico .cli-jur-providencia-rot{
  color:var(--jur-texto-fraco);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.61rem;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.cli-det-juridico .cli-jur-providencia-texto{
  color:var(--jur-texto);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.8rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-status{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:3px 8px;
  border:1px solid var(--jur-linha);
  border-radius:999px;
  color:var(--jur-texto-fraco);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.6rem;
  font-weight:750;
  letter-spacing:.02em;
  line-height:1.25;
}
.cli-det-juridico .cli-jur-status.aguardando_analise{
  border-color:color-mix(in srgb,var(--jur-oficial) 34%,transparent);
  background:color-mix(in srgb,var(--jur-oficial) 9%,transparent);
  color:#fcd34d;
}
.cli-det-juridico .cli-jur-status.em_execucao{
  border-color:color-mix(in srgb,var(--jur-acento) 34%,transparent);
  background:color-mix(in srgb,var(--jur-acento-forte) 12%,transparent);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-jur-status.aguardando_revisao{
  border-color:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 34%,transparent);
  background:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 9%,transparent);
  color:color-mix(in srgb,var(--cli-teal,var(--clr-teal,#14b8a6)) 82%,white);
}
.cli-det-juridico .cli-jur-status.concluida{
  border-color:color-mix(in srgb,var(--jur-sucesso) 34%,transparent);
  background:color-mix(in srgb,var(--jur-sucesso) 10%,transparent);
  color:#6ee7b7;
}
.cli-det-juridico .cli-jur-providencia-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:7px;
  color:var(--jur-texto-fraco);
  font-size:.67rem;
  line-height:1.4;
}
.cli-det-juridico .cli-jur-comprovante,
.cli-det-juridico .cli-jur-providencia-vazia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:100%;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--jur-sucesso) 28%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--jur-sucesso) 8%,transparent);
  color:#6ee7b7;
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.68rem;
  font-weight:650;
  cursor:pointer;
}
.cli-det-juridico .cli-jur-comprovante:hover,
.cli-det-juridico .cli-jur-providencia-vazia:hover{
  border-color:color-mix(in srgb,var(--jur-sucesso) 48%,transparent);
  background:color-mix(in srgb,var(--jur-sucesso) 14%,transparent);
}
.cli-det-juridico .cli-jur-providencia-vazia{
  flex:2 1 280px;
  border-style:dashed;
  border-color:color-mix(in srgb,var(--jur-acento) 30%,transparent);
  background:color-mix(in srgb,var(--jur-acento-forte) 6%,transparent);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-jur-sem-prova{
  color:var(--clr-danger-light,#fca5a5);
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-prazo-pessoa{
  display:block;
  margin-top:5px;
  color:var(--jur-texto-fraco);
  font-size:.64rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-prazo-prova{
  position:absolute;
  right:6px;
  bottom:6px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--jur-sucesso) 25%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--jur-sucesso) 8%,var(--jur-superficie));
  color:#6ee7b7;
  cursor:pointer;
}
.cli-det-juridico .cli-proc-data:has(.cli-jur-prazo-prova){padding-right:50px;}
.cli-det-juridico .cli-jur-auditoria{
  margin-top:12px;
  border:1px solid var(--jur-linha);
  border-radius:12px;
  background:var(--clr-bg-card,rgba(255,255,255,.03));
  overflow:hidden;
}
.cli-det-juridico .cli-jur-auditoria summary{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:8px 12px;
  color:var(--jur-texto-fraco);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
}
.cli-det-juridico .cli-jur-auditoria[open] summary{
  border-bottom:1px solid var(--jur-linha);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-jur-auditoria-lista{display:flex;flex-direction:column;}
.cli-det-juridico .cli-jur-auditoria-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:9px 12px;
  border-bottom:1px solid var(--clr-border-faint,rgba(255,255,255,.05));
}
.cli-det-juridico .cli-jur-auditoria-item:last-child{border-bottom:0;}
.cli-det-juridico .cli-jur-auditoria-tipo{
  color:color-mix(in srgb,var(--jur-texto) 72%,transparent);
  font-size:.7rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-auditoria-meta{
  color:var(--jur-texto-fraco);
  font-size:.64rem;
  line-height:1.45;
  text-align:right;
}
.cli-det-juridico .cli-djen-atualizar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-left:0;
  padding:0 11px;
  border:1px solid var(--jur-linha);
  border-radius:9px;
  background:var(--clr-bg-card,rgba(255,255,255,.03));
  color:var(--jur-texto-fraco);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.68rem;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
}
.cli-det-juridico .cli-djen-atualizar:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--jur-acento) 38%,transparent);
  background:color-mix(in srgb,var(--jur-acento-forte) 10%,transparent);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-and-item.djen.cancelada{opacity:.72;}
/* Dentro da FICHA DAS FONTES o selo do DJEN vira linha, como o do CNJ. A
   regra mora aqui, e não em main.css, porque é aqui que ele ganha a cápsula:
   as duas têm o mesmo peso, e quem vem depois vence. */
.cli-det-juridico .cli-and-sinc .cli-djen-selo{
  min-height:0;
  padding:0 0 0 14px;
  border:0;
  border-radius:0;
  background:none;
  font-size:.66rem;
  line-height:1.5;
}
.cli-det-juridico .cli-djen-selo{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  max-width:100%;
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--jur-oficial) 26%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--jur-oficial) 8%,transparent);
  color:#fcd34d;
  font-size:.61rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-djen-selo{
  border-color:color-mix(in srgb,var(--jur-acento) 28%,transparent);
  background:color-mix(in srgb,var(--jur-acento-forte) 9%,transparent);
  color:var(--jur-acento);
}
.cli-det-juridico .cli-djen-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:7px;
  color:var(--jur-texto-fraco);
  font-size:.64rem;
  line-height:1.45;
}
.cli-det-juridico .cli-djen-meta span{overflow-wrap:anywhere;}
.cli-det-juridico .cli-djen-cancelada{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--jur-perigo) 28%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--jur-perigo) 8%,transparent);
  color:var(--clr-danger-light,#fca5a5);
  font-size:.68rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-djen-acoes{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px;
}
/* ── Cofre de evidências ─────────────────────────────────────────────── */
.cli-det-juridico .cli-cofre{
  overflow:hidden;
  border-color:color-mix(in srgb,var(--jur-sucesso) 18%,var(--jur-linha));
  background:
    radial-gradient(700px 220px at 0 0,color-mix(in srgb,var(--jur-sucesso) 8%,transparent),transparent 58%),
    var(--jur-superficie);
}
.cli-det-juridico .cli-cofre-selo{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--jur-sucesso) 30%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--jur-sucesso) 9%,transparent);
  color:#6ee7b7;
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.62rem;
  font-weight:750;
  letter-spacing:.03em;
  white-space:nowrap;
}
.cli-det-juridico .cli-cofre-intro{
  max-width:76ch;
  margin:-3px 0 15px;
  padding:10px 12px;
  border-left:2px solid color-mix(in srgb,var(--jur-sucesso) 58%,transparent);
  border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--jur-sucesso) 6%,transparent);
  color:color-mix(in srgb,var(--jur-texto) 62%,transparent);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.73rem;
  line-height:1.55;
}
.cli-det-juridico .cli-cofre .cli-doc-rastro{
  margin-top:3px;
  color:var(--jur-texto-fraco);
  font-family:var(--font-main,'Inter',sans-serif);
  font-size:.65rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-cofre .cli-doc-rastro{color:color-mix(in srgb,var(--jur-texto-fraco) 80%,transparent);}
.cli-det-juridico .cli-cofre .cli-doc.removido{
  border-style:dashed;
  opacity:.68;
  box-shadow:none;
}
/* ── Breakpoints já usados pela ficha de clientes ───────────────────── */

@media (max-width:1180px){
.cli-det-juridico .cli-jur-providencia{flex-basis:320px;}
}
@media (max-width:760px){
.cli-det-juridico .cli-jur-operacao{padding:9px;}
.cli-det-juridico .cli-jur-papeis,
.cli-det-juridico .cli-jur-providencia,
.cli-det-juridico .cli-jur-providencia-vazia{flex-basis:100%;}
.cli-det-juridico .cli-djen-atualizar{flex:1 1 145px;}
}
@media (max-width:560px){
.cli-det-juridico .cli-jur-papeis{flex-direction:column;align-items:stretch;}
.cli-det-juridico .cli-jur-papel{justify-content:center;border-radius:10px;}
.cli-det-juridico .cli-jur-providencia-topo{align-items:flex-start;}
.cli-det-juridico .cli-jur-auditoria-item{grid-template-columns:minmax(0,1fr);gap:3px;}
.cli-det-juridico .cli-jur-auditoria-meta{text-align:left;}
.cli-det-juridico .cli-cofre-selo{white-space:normal;}
}
/* ═══════════════════════════════════════════════════════════════════════
   WORKSPACE JURÍDICO — a ficha vira um dossiê, sem criar outra tela.
   Os hooks abaixo só existem no cliente jurídico e todas as regras seguem
   protegidas pelo ancestral de ramo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A COR NÃO É O QUE DISTINGUE ESTA FICHA ────────────────────────────
   Havia aqui uma paleta inteira — azul-marinho e ouro — só para o ramo
   jurídico. Isso faz o mesmo painel mudar de cor conforme o cliente aberto:
   a pessoa aprende a barra, os botões e os cartões numa cor e reencontra tudo
   noutra, sem que nada tenha mudado de função. Um produto com duas peles é um
   produto que ninguém termina de aprender.

   Os tokens continuam existindo — as 248 regras desta folha falam por eles —,
   mas passam a APONTAR para a paleta do painel de clientes, a mesma dos
   outros ramos. O que distingue a ficha jurídica é a estrutura e o
   vocabulário, não o pigmento. */
.cli-det-juridico{
  --jur-ouro:var(--cli-teal,#22d3ee);
  --jur-ouro-claro:var(--cli-teal,#22d3ee);
  --jur-azul:var(--clr-indigo-light,#a5b4fc);
  --jur-tinta:var(--cli-fundo,#060809);
  --jur-papel:var(--cli-cartao,#0b1417);
  --jur-papel-2:var(--cli-tabela,#0a1012);
  --jur-linha:rgba(255,255,255,.075);
  --jur-linha-forte:rgba(34,211,238,.35);
  --jur-texto:var(--clr-text,#f0f0f0);
  --jur-texto-fraco:rgba(240,240,240,.45);
  --jur-superficie:var(--jur-papel);
  gap:20px;
  isolation:isolate;
}
/* "Novo cliente" NÃO é do ramo — é o mesmo botão do painel inteiro. Pintá-lo
   de ouro na ficha jurídica fazia um controle global mudar de cor conforme o
   cliente aberto, e isso ensina a procurar um botão que muda de aparência sem
   mudar de função. O ouro fica para o que é mesmo do expediente. */

/* A linha calma de quem está em dia. */
/* A CAIXA SAIU. Tirei `.cli-painel` do JavaScript e esta regra continuou
   desenhando o mesmo retângulo — fundo escuro, gradiente índigo e canto de
   20px — por baixo de quatro cartões que então não tinham contorno nenhum.
   O panorama é o título e os cartões. Não há caixa. */
.cli-det-juridico .cli-jur-resumo-titulo{font-size:1.03rem;}
/* Explicação das fontes oficiais, junto da ação que usa cada uma */
.cli-det-juridico .cli-jur-fontes{
  margin:0 0 16px;
  padding:14px;
  border:1px solid rgba(99,102,241,.2);
  border-radius:14px 14px 5px 14px;
  background:
    linear-gradient(135deg,rgba(99,102,241,.08),transparent 58%),
    rgba(7,12,22,.72);
}
.cli-det-juridico .cli-jur-fontes-titulo{
  display:block;
  margin-bottom:9px;
  color:var(--jur-ouro-claro);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cli-det-juridico .cli-jur-fontes-grade{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.cli-det-juridico .cli-jur-fonte{
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px 10px 4px 10px;
  background:rgba(255,255,255,.035);
  color:rgba(240,240,240,.62);
  font-size:.7rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-fonte[data-fonte='datajud']{border-left:2px solid var(--jur-azul);}
.cli-det-juridico .cli-jur-fonte[data-fonte='djen']{border-left:2px solid var(--jur-ouro);}
.cli-det-juridico .cli-jur-fontes-aviso{
  margin:10px 0 0;
  color:rgba(240,216,154,.65);
  font-size:.66rem;
  line-height:1.45;
}
/* Teclado, toque e largura */
.cli-det-juridico :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--jur-ouro-claro);
  outline-offset:3px;
}
@media (max-width:1180px){
}
@media (max-width:760px){
.cli-det-juridico{gap:14px;}
}
@media (max-width:480px){
.cli-det-juridico .cli-jur-resumo-abrir{width:100%;justify-content:center;}
.cli-det-juridico .cli-jur-fontes-grade{grid-template-columns:minmax(0,1fr);}
}
@media (hover:none),(pointer:coarse){
}
@media (prefers-reduced-motion:reduce){
.cli-det-juridico,
.cli-det-juridico *,
.cli-det-juridico *::before,
.cli-det-juridico *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   A MESA DE PROCESSOS
   ═══════════════════════════════════════════════════════════════════════
   Coluna fixa à esquerda com os processos, área de trabalho à direita. Nada
   de cor própria: os tokens são os do painel de clientes, e o que distingue
   esta tela é o arranjo — o processo no centro, o cliente a um clique.
   ═══════════════════════════════════════════════════════════════════════ */
.cli-det-juridico .cli-mesa{
  display:grid;
  grid-template-columns:288px minmax(0,1fr);
  align-items:start;
  gap:16px;
}
.cli-det-juridico .cli-mesa-obra{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
/* ── No celular a coluna vira uma fila ──────────────────────────────────
   Coluna fixa de 288px num telefone come metade da tela. A lista passa a
   rolar na horizontal, acima do trabalho, e continua sendo o índice. */
@media (max-width:900px){
.cli-det-juridico .cli-mesa{grid-template-columns:minmax(0,1fr);}
}
/* ═══════════════════════════════════════════════════════════════════════
   A GRADE DA FICHA JURÍDICA
   ═══════════════════════════════════════════════════════════════════════
   Duas colunas do topo ao fim, e é isso que faz a página parecer UMA coisa.
   O arranjo anterior tinha três larguras empilhadas — cartão de identidade,
   coluna de processos começando mais abaixo com outra largura, abas soltas
   atravessando as duas —, e o olho não achava nenhuma linha comum.

   À esquerda, largura fixa: quem é o cliente, o processo aberto, os outros.
   À direita, o resto, sempre da largura inteira. Um gap só, o mesmo em toda
   parte, para que as bordas se alinhem sem ninguém precisar reparar nisso.
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-juridico .cli-jur-grade{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  align-items:start;
  gap:14px;
  padding:0 30px 30px;
}

.cli-det-juridico .cli-jur-coluna,
.cli-det-juridico .cli-jur-obra{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

/* A coluna acompanha a rolagem: ela é o índice da tela, e índice que sai de
   vista obriga a voltar ao topo para trocar de assunto. */
.cli-det-juridico .cli-jur-coluna{position:sticky;top:12px;}

.cli-det-juridico .cli-jur-coluna-rot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  color:rgba(240,240,240,.4);
  font-family:'Inter',sans-serif;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.cli-det-juridico .cli-jur-coluna-cont{
  min-width:19px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:.63rem;
  letter-spacing:0;
  text-align:center;
}
.cli-det-juridico .cli-jur-coluna-vazio{
  margin:0;
  color:rgba(240,240,240,.35);
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  line-height:1.45;
}
.cli-det-juridico .cli-jur-coluna-btn{
  justify-content:center;
  width:100%;
  margin-top:10px;
}
.cli-det-juridico .cli-jur-coluna-cliente{
  width:100%;
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
  background:transparent;
  color:var(--cli-teal,#22d3ee);
  font-family:'Inter',sans-serif;
  font-size:.68rem;
  cursor:pointer;
  text-align:left;
}
.cli-det-juridico .cli-jur-coluna-cliente:hover{text-decoration:underline;}

/* ── O processo aberto ─────────────────────────────────────────────── */

/* ── Os outros ─────────────────────────────────────────────────────── */
.cli-det-juridico .cli-jur-outro{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  text-align:left;
  transition:background .14s,border-color .14s;
}
.cli-det-juridico .cli-jur-outro:hover{
  border-color:rgba(34,211,238,.3);
  background:rgba(34,211,238,.07);
}
.cli-det-juridico .cli-jur-outro-num{
  color:rgba(240,240,240,.85);
  font-family:'JetBrains Mono',monospace;
  font-size:.69rem;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-outro-meta{
  color:rgba(240,240,240,.35);
  font-family:'Inter',sans-serif;
  font-size:.63rem;
}

/* ── Uma coluna no que é estreito ───────────────────────────────────── */
@media (max-width:1080px){
  .cli-det-juridico .cli-jur-grade{
    grid-template-columns:minmax(0,1fr);
    padding:0 16px 24px;
  }
  .cli-det-juridico .cli-jur-coluna{position:static;}
}

/* ═══════════════════════════════════════════════════════════════════════
   O PANORAMA DO EXPEDIENTE
   ═══════════════════════════════════════════════════════════════════════
   Eram quatro cartões idênticos, cada um com um ícone lavanda numa caixa de
   32px, e "1", "0", "0", "0" dentro. Nada dizia qual deles pedia alguma
   coisa; o dia em que um virasse "3 vencidos" continuaria parecendo os
   outros três.

   Aqui o NÚMERO é o herói e a COR significa: cinza é zero, branco é "há isto
   para fazer", âmbar é esta semana, vermelho é vencido — e um filete da cor
   do estado corre na borda de cima. De longe já se sabe para onde ir.
   ═══════════════════════════════════════════════════════════════════════ */

/* O filete de estado: 2px na borda de cima, largura inteira. */
/* Zerado nao pede nada: o filete desaparece e o numero esmaece. Assim o
   primeiro cartao que ACENDER se destaca sozinho. */

/* O numero manda: tabular para os quatro cartoes alinharem o algarismo. */

/* ═══════════════════════════════════════════════════════════════════════
   A COLUNA: um cartão para os processos
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-juridico .cli-jur-atual{
  padding:11px 12px;
  border:1px solid rgba(34,211,238,.3);
  border-radius:11px;
  background:rgba(34,211,238,.06);
}
.cli-det-juridico .cli-jur-atual-fase{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
  color:var(--cli-teal,#22d3ee);
  font-family:'Inter',sans-serif;
  font-size:.65rem;
  font-weight:600;
}
.cli-det-juridico .cli-jur-atual-ponto{
  width:6px;height:6px;border-radius:50%;
  background:var(--cli-teal,#22d3ee);
  flex:0 0 auto;
}
.cli-det-juridico .cli-jur-atual-num{
  color:var(--clr-text,#f0f0f0);
  font-family:'JetBrains Mono',monospace;
  font-size:.76rem;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.cli-det-juridico .cli-jur-atual-meta{
  margin-top:3px;
  color:rgba(240,240,240,.42);
  font-family:'Inter',sans-serif;
  font-size:.65rem;
  line-height:1.4;
}
.cli-det-juridico .cli-jur-atual-prazo{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(240,240,240,.42);
  font-family:'Inter',sans-serif;
  font-size:.66rem;
}
.cli-det-juridico .cli-jur-atual-prazo.vencido{
  color:var(--clr-danger-light,#fca5a5);
  font-weight:600;
}

.cli-det-juridico .cli-jur-outros-lista{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:8px;
}

/* ── O cliente: uma LINHA, e não um link solto ─────────────────────────
   Era um texto azul sublinhado no rodapé do cartão; com o anel de foco em
   volta parecia defeito de renderização. Agora tem a forma das outras linhas
   clicáveis do produto: rótulo, explicação e seta. */
.cli-det-juridico .cli-jur-cliente-linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  margin-top:10px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  background:rgba(255,255,255,.022);
  cursor:pointer;
  text-align:left;
  transition:background .14s,border-color .14s;
}
.cli-det-juridico .cli-jur-cliente-linha:hover{
  border-color:rgba(34,211,238,.3);
  background:rgba(34,211,238,.06);
}
.cli-det-juridico .cli-jur-cliente-txt{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.cli-det-juridico .cli-jur-cliente-rot{
  color:var(--clr-text,#f0f0f0);
  font-family:'Inter',sans-serif;
  font-size:.73rem;
  font-weight:600;
}
.cli-det-juridico .cli-jur-cliente-sub{
  color:rgba(240,240,240,.36);
  font-family:'Inter',sans-serif;
  font-size:.63rem;
  line-height:1.35;
}
.cli-det-juridico .cli-jur-cliente-seta{
  flex:0 0 auto;
  color:rgba(240,240,240,.35);
  font-size:1.05rem;
  line-height:1;
}

/* ═══════════════════════════════════════════════════════════════════════
   RECOLHER O PROCESSO
   ═══════════════════════════════════════════════════════════════════════
   Um processo aberto ocupa uma tela: faixa operacional, campos, auditoria e
   a linha do tempo com dezenas de movimentos. Com três, comparar dois deles
   obriga a percorrer tudo o que está entre eles.

   Recolhido some TUDO menos o cabeçalho e uma linha de resumo — e é o CSS
   que esconde, não o JavaScript que desmonta: o conteúdo continua montado,
   então expandir de novo é instantâneo e nada se perde no caminho.
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-juridico .cli-proc-recolher{
  flex:0 0 auto;
  width:24px;height:24px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  background:transparent;
  color:rgba(240,240,240,.5);
  font-family:'Inter',sans-serif;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.cli-det-juridico .cli-proc-recolher:hover{
  border-color:rgba(34,211,238,.4);
  background:rgba(34,211,238,.08);
  color:var(--cli-teal,#22d3ee);
}

/* A linha de resumo só existe recolhido. */
.cli-det-juridico .cli-proc-resumido{display:none;}
.cli-det-juridico .cli-proc.recolhido>*{display:none;}
.cli-det-juridico .cli-proc.recolhido>.cli-proc-cab{display:flex;}
.cli-det-juridico .cli-proc.recolhido>.cli-proc-resumido{
  display:block;
  margin-top:7px;
  color:rgba(240,240,240,.4);
  font-family:'Inter',sans-serif;
  font-size:.68rem;
  line-height:1.45;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEM CAIXA EM VOLTA DA CAIXA
   ═══════════════════════════════════════════════════════════════════════
   O panorama era um painel com quatro cartões dentro: dois fundos e duas
   bordas em volta de cada número, e o resultado um bloco azulado onde nada
   tinha contorno — os cartões quase desapareciam contra o painel que os
   continha. Agora o título fica sobre a página e os cartões respondem por si.

   E a coluna virou UM painel: identidade e processos eram duas caixas com um
   vão entre elas para uma coisa só — este cliente e o que ele tem correndo.
   Um filete separa as duas metades, que é o que um filete serve para fazer.
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-juridico .cli-jur-resumo-cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 2px 10px;
}

/* O cartão do panorama agora tem o peso de um painel, porque é um. */

/* ── A coluna: um painel, duas metades ─────────────────────────────── */
.cli-det-juridico .cli-jur-lado{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow:hidden;
}
.cli-det-juridico .cli-jur-lado>.cli-foco{padding:18px 18px 16px;}
.cli-det-juridico .cli-jur-processos{
  padding:15px 18px 18px;
  border-top:1px solid rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════════════════════════════
   O PANORAMA DO EXPEDIENTE
   ═══════════════════════════════════════════════════════════════════════
   Três coisas estavam erradas ao mesmo tempo, e consertar uma de cada vez
   não resolvia nenhuma:

   1. HAVIA UMA CAIXA em volta dos cartões — fundo escuro, gradiente índigo,
      canto de 20px. Cartão dentro de caixa não tem contorno: os quatro
      sumiam contra o que os continha. Não há mais caixa: é o título e os
      cartões.

   2. OS CARTÕES ERAM LARGOS E OCOS — 379px de largura para 92px de altura,
      com todo o conteúdo encostado à esquerda e dois terços de vazio à
      direita. Agora a grade os aperta a ~200px e o conteúdo ocupa o cartão.

   3. O ÍCONE NÃO TRABALHAVA. Era lavanda, do mesmo tom nos quatro, dizendo
      apenas "isto é um cartão" — cheguei a removê-lo por isso. Ele volta
      pintado pelo ESTADO, que é o que faz um ícone valer o espaço que ocupa:
      apagado no zero, teal quando há trabalho, âmbar nesta semana, vermelho
      vencido.
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-juridico .cli-jur-resumo-grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:10px;
}

.cli-det-juridico .cli-jur-resumo-card{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 11px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:var(--cli-cartao,#0b1417);
  cursor:pointer;
  text-align:left;
  transition:border-color .14s,transform .14s;
}
.cli-det-juridico .cli-jur-resumo-card:hover{
  border-color:rgba(34,211,238,.34);
  transform:translateY(-1px);
}

/* O ícone: uma pastilha da cor do estado, ocupando a primeira coluna nas
   duas linhas — é o que ancora o cartão. */
.cli-det-juridico .cli-jur-resumo-ico{
  grid-row:1 / span 2;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(34,211,238,.12);
  color:var(--cli-teal,#22d3ee);
}
.cli-det-juridico .cli-jur-resumo-card.atencao .cli-jur-resumo-ico{
  background:rgba(245,158,11,.13);color:var(--clr-warning,#f59e0b);
}
.cli-det-juridico .cli-jur-resumo-card.critico .cli-jur-resumo-ico{
  background:rgba(239,68,68,.13);color:var(--clr-danger,#ef4444);
}
.cli-det-juridico .cli-jur-resumo-card.zerado .cli-jur-resumo-ico{
  background:rgba(255,255,255,.045);color:rgba(240,240,240,.25);
}

.cli-det-juridico .cli-jur-resumo-corpo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

.cli-det-juridico .cli-jur-resumo-rotulo{
  font-family:'Inter',sans-serif;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1.3;
  text-transform:uppercase;
  color:rgba(240,240,240,.44);
}

.cli-det-juridico .cli-jur-resumo-numero{
  font-family:'Inter',sans-serif;
  font-size:1.42rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--clr-text,#f0f0f0);
}
.cli-det-juridico .cli-jur-resumo-card.zerado .cli-jur-resumo-numero{color:rgba(240,240,240,.3);}
.cli-det-juridico .cli-jur-resumo-card.atencao .cli-jur-resumo-numero{color:var(--clr-warning,#f59e0b);}
.cli-det-juridico .cli-jur-resumo-card.critico .cli-jur-resumo-numero{color:var(--clr-danger-light,#fca5a5);}

.cli-det-juridico .cli-jur-resumo-detalhe{
  grid-column:2;
  font-family:'Inter',sans-serif;
  font-size:.65rem;
  line-height:1.35;
  color:rgba(240,240,240,.34);
}

/* ── Vazio não merece um painel inteiro ────────────────────────────────
   "Próximos acompanhamentos" ocupava ~130px de altura para dizer que não há
   nada: um vão no meio da coluna, com um botão largo embaixo. Sem
   compromisso, o bloco encolhe para o título e uma linha, e o convite deixa
   de ser uma barra do tamanho da coluna. */
.cli-det-juridico .cli-acomp.vazio{padding-bottom:14px;}
.cli-det-juridico .cli-acomp.vazio .cli-lado-vazio{
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  color:rgba(240,240,240,.34);
  font-family:'Inter',sans-serif;
  font-size:.72rem;
}
/* O botão FICA: é o único caminho para criar um compromisso. Ele só deixa
   de ser uma barra da largura inteira embaixo de um vão. */
.cli-det-juridico .cli-acomp.vazio .cli-btn-largo{
  width:auto;
  margin-top:10px;
  padding:6px 13px;
}

/* ── A COBRANÇA DO PREPARO ─────────────────────────────────────────────
   Cinza quando o preparo ainda está por vir; âmbar no dia; vermelho quando
   passou. Só o vermelho grita, e ele grita ENQUANTO AINDA DÁ TEMPO — depois
   do vencimento não há mais o que avisar. */
.cli-det-juridico .cli-jur-prazo-preparo{
  display:block;
  margin-top:3px;
  font-family:'Inter',sans-serif;
  font-size:.63rem;
  line-height:1.35;
  color:rgba(240,240,240,.34);
}
.cli-det-juridico .cli-jur-prazo-preparo.hoje{color:var(--clr-warning,#f59e0b);font-weight:600;}
.cli-det-juridico .cli-jur-prazo-preparo.atrasado{
  color:var(--clr-danger-light,#fca5a5);
  font-weight:600;
}

/* O campo no editor acompanha a largura dos outros da mesma linha. */
.cli-det-juridico .cli-pz-preparo{min-width:0;width:100%;}

/* ── A FAIXA DE IMPEDIMENTO ────────────────────────────────────────────
   Vermelha e no topo, acima da grade. Um impedimento não é detalhe de
   rodapé: quem abre a ficha precisa saber antes de ler o resto. */
.cli-det-juridico .cli-jur-conflito{
  margin:0 30px 4px;
  padding:13px 16px;
  border:1px solid rgba(239,68,68,.34);
  border-radius:14px;
  background:rgba(239,68,68,.07);
}
.cli-det-juridico .cli-jur-conflito .cli-conflito-grave{
  color:var(--clr-danger-light,#fca5a5);
  font-family:'Inter',sans-serif;
  font-size:.79rem;
  font-weight:700;
  line-height:1.45;
}
.cli-det-juridico .cli-conflito-caso{
  display:block;
  margin-top:6px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(240,240,240,.72);
  font-family:'Inter',sans-serif;
  font-size:.71rem;
  cursor:pointer;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cli-det-juridico .cli-conflito-caso:hover{color:var(--cli-teal,#22d3ee);}
.cli-det-juridico .cli-jur-conflito .cli-conflito-rodape{
  margin-top:9px;
  color:rgba(240,240,240,.4);
  font-family:'Inter',sans-serif;
  font-size:.66rem;
  line-height:1.45;
}
@media (max-width:1080px){
  .cli-det-juridico .cli-jur-conflito{margin:0 16px 4px;}
}

/* ── O SELO DE PROCEDÊNCIA ─────────────────────────────────────────────
   Pequeno e discreto: ele qualifica o dado, não compete com ele. Só aparece
   no que veio de fonte oficial — selo em tudo não distingue nada. */
.cli-det-juridico .cli-proc-val-com-fonte{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.cli-det-juridico .cli-jur-fonte-selo{
  flex:0 0 auto;
  padding:1px 6px;
  border:1px solid rgba(34,211,238,.3);
  border-radius:5px;
  background:rgba(34,211,238,.08);
  color:var(--cli-teal,#22d3ee);
  font-family:'Inter',sans-serif;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.08em;
  cursor:help;
}

/* ── O JARGÃO TRADUZIDO ────────────────────────────────────────────────
   Embaixo do movimento oficial e apagado: ajuda quem não é do foro e não
   atrapalha quem é.

   O FILETE À ESQUERDA SAIU em 26/08/2026. Ele existia para dizer "isto é
   comentário, e não mais um fato do tribunal" — mas quando o rótulo e o
   movimento passaram a dividir a mesma linha, a explicação ficou sozinha
   embaixo e o filete virou o único elemento desalinhado da coluna. O recado
   continua sendo dado pelo que sempre o deu de verdade: corpo menor, cor mais
   apagada e o fato inteiro acima dela. */
.cli-det-juridico .cli-and-glos{
  margin:4px 0 0;
  font-family:'Inter',sans-serif;
  font-size:.685rem;
  line-height:1.5;
  color:rgba(240,240,240,.36);
}

/* ═══════════════════════════════════════════════════════════════════════
   A MESA DO ESCRITÓRIO
   ═══════════════════════════════════════════════════════════════════════
   Componente NOVO — não repinta nada. É um modal preso ao body, e por isso
   fora de #cli-view: todo token vem com fallback, senão a cor não resolve.

   A cor da linha é a mesma régua da ficha (vencido vermelho, hoje âmbar) e
   ela NUNCA anda sozinha: o "quanto falta" fica escrito ao lado, porque cor
   sozinha exclui quem não a distingue. */
.cli-mesa{width:min(860px,94vw);max-height:88dvh;display:flex;flex-direction:column;}
.cli-mesa-abas{display:flex;gap:6px;border-bottom:1px solid var(--clr-border,rgba(255,255,255,.07));margin-bottom:14px;}
.cli-mesa-aba{appearance:none;border:none;background:none;cursor:pointer;padding:8px 12px 10px;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:rgba(240,240,240,.42);transition:color .15s,border-color .15s;}
.cli-mesa-aba:hover{color:rgba(240,240,240,.72);}
.cli-mesa-aba.ativa{color:var(--cli-teal,#22d3ee);border-bottom-color:var(--cli-teal,#22d3ee);}
.cli-mesa-corpo{overflow-y:auto;flex:1;padding-right:4px;margin-right:-4px;}

/* ── A janela: 7, 15 ou 30 dias ─────────────────────────────────────── */
.cli-mesa-janelas{display:flex;gap:6px;margin-bottom:14px;}
.cli-mesa-janela{appearance:none;cursor:pointer;padding:5px 12px;border-radius:20px;border:1px solid var(--clr-border,rgba(255,255,255,.07));background:rgba(255,255,255,.025);font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;color:rgba(240,240,240,.5);transition:all .15s;}
.cli-mesa-janela:hover{color:rgba(240,240,240,.8);border-color:rgba(255,255,255,.14);}
.cli-mesa-janela.ativa{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.32);color:var(--cli-teal,#22d3ee);}

/* ── Os três grupos ─────────────────────────────────────────────────── */
.cli-mesa-grupo{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:rgba(240,240,240,.55);}
.cli-mesa-grupo:first-child{margin-top:0;}
.cli-mesa-grupo-cont{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.06);color:rgba(240,240,240,.45);}
.cli-mesa-atrasado{color:#fca5a5;}
.cli-mesa-atrasado .cli-mesa-grupo-cont{background:rgba(239,68,68,.14);color:#fca5a5;}
.cli-mesa-hoje{color:#fcd34d;}
.cli-mesa-hoje .cli-mesa-grupo-cont{background:rgba(245,158,11,.14);color:#fcd34d;}
.cli-mesa-lista{display:flex;flex-direction:column;gap:6px;}

/* ── A linha ────────────────────────────────────────────────────────── */
.cli-mesa-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;padding:10px 13px;border-radius:11px;border:1px solid var(--clr-border,rgba(255,255,255,.07));background:rgba(255,255,255,.018);font-family:'Inter',sans-serif;transition:border-color .16s,background .16s;}
.cli-mesa-item:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.035);}
.cli-mesa-item-ico{flex-shrink:0;display:flex;color:rgba(240,240,240,.34);}
.cli-mesa-item-ico svg{width:16px;height:16px;}
.cli-mesa-item-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cli-mesa-item-tit{font-size:.8rem;font-weight:600;color:rgba(240,240,240,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cli-mesa-item-sub{font-size:.71rem;color:rgba(240,240,240,.38);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cli-mesa-item-quando{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;}
.cli-mesa-item-quando b{font-size:.74rem;font-weight:700;color:rgba(240,240,240,.72);}
.cli-mesa-item-quando span{font-size:.67rem;color:rgba(240,240,240,.34);}
.cli-mesa-item-vence{font-size:.65rem!important;color:rgba(240,240,240,.26)!important;}
.cli-mesa-item.vencido{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.05);}
.cli-mesa-item.vencido .cli-mesa-item-ico,
.cli-mesa-item.vencido .cli-mesa-item-quando b,
.cli-mesa-item.vencido .cli-mesa-item-quando span{color:#fca5a5;}
.cli-mesa-item.hoje{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.05);}
.cli-mesa-item.hoje .cli-mesa-item-ico,
.cli-mesa-item.hoje .cli-mesa-item-quando b,
.cli-mesa-item.hoje .cli-mesa-item-quando span{color:#fcd34d;}
.cli-mesa-vazio{font-family:'Inter',sans-serif;font-size:.78rem;line-height:1.6;color:rgba(240,240,240,.34);text-align:center;padding:26px 12px;}

/* ── As publicações por inscrição ───────────────────────────────────── */
.cli-mesa-oab-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.cli-mesa-oab-num{flex:1;min-width:150px;}
.cli-mesa-oab-uf{width:110px;}
.cli-mesa-oab-dias{width:150px;}
.cli-mesa-oab-aviso{font-family:'Inter',sans-serif;font-size:.71rem;line-height:1.6;color:rgba(240,240,240,.34);margin:0 0 14px;}
.cli-mesa-oab-cont{font-family:'Inter',sans-serif;font-size:.73rem;font-weight:600;color:rgba(240,240,240,.5);margin:0 0 10px;}
.cli-mesa-oab-espera{font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.4);padding:20px 0;text-align:center;}
.cli-mesa-oab-erro{font-family:'Inter',sans-serif;font-size:.78rem;line-height:1.6;color:#fca5a5;padding:14px;border:1px solid rgba(239,68,68,.28);border-radius:11px;background:rgba(239,68,68,.06);}
.cli-mesa-pub-lista{display:flex;flex-direction:column;gap:8px;}
.cli-mesa-pub{padding:12px 14px;border-radius:11px;border:1px solid var(--clr-border,rgba(255,255,255,.07));background:rgba(255,255,255,.018);font-family:'Inter',sans-serif;}
.cli-mesa-pub-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:.75rem;color:rgba(240,240,240,.4);}
.cli-mesa-pub-cab b{font-size:.79rem;font-weight:700;color:rgba(240,240,240,.9);}
.cli-mesa-pub-data{margin-left:auto;font-weight:600;}
.cli-mesa-pub-orgao{margin-top:3px;font-size:.71rem;color:rgba(240,240,240,.34);}
.cli-mesa-pub-texto{margin:8px 0 0;font-size:.75rem;line-height:1.6;color:rgba(240,240,240,.62);max-height:7.2em;overflow:hidden;}
.cli-mesa-pub-abrir{margin-top:9px;appearance:none;cursor:pointer;padding:5px 12px;border-radius:9px;border:1px solid rgba(34,211,238,.3);background:rgba(34,211,238,.1);font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;color:var(--cli-teal,#22d3ee);transition:all .15s;}
.cli-mesa-pub-abrir:hover{background:rgba(34,211,238,.2);}
/* O selo que a consulta por número nunca teve como dar: saiu publicação de
   um processo que não está cadastrado em lugar nenhum daqui. */
.cli-mesa-pub-fora{display:inline-block;margin-top:9px;padding:4px 10px;border-radius:20px;border:1px solid rgba(245,158,11,.28);background:rgba(245,158,11,.08);font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:#fcd34d;}

@media (max-width:640px){
  .cli-mesa-item{flex-wrap:wrap;}
  .cli-mesa-item-quando{align-items:flex-start;text-align:left;width:100%;padding-left:27px;flex-direction:row;gap:7px;align-items:baseline;}
  .cli-mesa-oab-uf,.cli-mesa-oab-dias{flex:1;width:auto;}
}

/* ── O BOTÃO FORTE, DENTRO DA MESA ─────────────────────────────────────
   O .cli-btn-forte se pinta com --cli-teal-forte e --cli-verde, e as duas
   são declaradas em #cli-view. A mesa é um modal preso ao body, FORA dele:
   sem valor, o gradiente inteiro vira declaração inválida e o botão cai no
   fundo quase transparente do botão comum — com a cor de texto escura por
   cima, que é o que o deixava ilegível.

   A correção é só daqui. O botão do painel continua sendo pintado pelo
   main.css, sem uma linha alterada. */
.cli-mesa .cli-btn-forte{
  background:linear-gradient(135deg,var(--cli-teal-forte,#06b6d4),var(--cli-verde,#10b981));
  color:#04231f;
}
.cli-mesa .cli-btn-forte:disabled{opacity:.5;cursor:default;}

/* O botão da mesa, dentro dos Filtros, embaixo dos três "Mostrar apenas…".
   Aqueles mudam quem aparece na TABELA; este abre outra tela, e o espaço a
   mais é o que diz isso.

   SEM FILETE: a primeira versão tinha um border-top aqui para separar, e ele
   simplesmente sumia — o botão já tem borda própria, e a linha extra só
   engrossava a aresta de cima. Separador que não separa é enfeite.

   A classe leva o nome da mesa de propósito: esta folha só pode pintar o que
   é dela, e a regra do teste guarda isso pelo prefixo. */
.cli-mesa-aparte{
  margin-top:20px;
}

/* A porta do processo para o Financeiro. Fica no rodapé do cartão, com o
   peso de ação secundária: lançar honorário é decisão, não rotina. */
.cli-det-juridico .cli-jur-lancar{
  margin-top:10px;
  width:100%;
  justify-content:center;
}

/* A carteira da banca somada: de que lado ela está, e o dinheiro. */
.cli-mesa-conta{display:flex;flex-direction:column;gap:2px;}
.cli-mesa-conta-linha{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 13px;border-radius:10px;background:rgba(255,255,255,.018);border:1px solid var(--clr-border,rgba(255,255,255,.07));font-family:'Inter',sans-serif;}
.cli-mesa-conta-linha span{font-size:.78rem;color:rgba(240,240,240,.55);}
.cli-mesa-conta-linha b{font-size:.82rem;font-weight:700;color:rgba(240,240,240,.92);white-space:nowrap;}
/* O que ainda não dá para confiar — processo sem polo, honorário combinado e
   não lançado — fica em âmbar: não é erro, é trabalho pendente. */
.cli-mesa-conta-linha.incerto{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.05);}
.cli-mesa-conta-linha.incerto b{color:#fcd34d;}

/* ═══════════════════════════════════════════════════════════════════════
   A SINCRONIZAÇÃO NO CARTÃO DO PROCESSO
   ═══════════════════════════════════════════════════════════════════════
   Fica DENTRO do cartão que já existe. Uma aba nova separaria "os dados do
   processo" de "o que o tribunal diz", e a pessoa passaria a comparar duas
   telas para responder uma pergunta só.

   A cor dos estados é a do CORES.md, e cada um diz uma coisa diferente:
   novidade é o azul da marca (é informação, não alarme), sem novidade é
   neutro, espera é âmbar e erro é vermelho. "Indisponível" e "nenhuma
   novidade" pintados iguais fariam a pessoa parar de olhar para os dois.

   TODO SELETOR NASCE SOB `.cli-det-juridico`, e isso é regra da folha
   inteira: nada aqui pode alcançar um cliente que não é de banca. Uma aba
   "Processos" na ficha de um nutricionista seria uma aba permanentemente
   vazia, e aba vazia ensina a ignorar as outras. Guardado por
   test/clientes-operacao-juridica.test.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* A DATA DA BASE NÃO É LETRA MIÚDA. Ela é a diferença entre "o tribunal não
   moveu nada" e "a base ainda não recebeu" — e esconder isso é o pior
   desfecho possível deste recurso. Fica legível, não apagada. */

/* ── A TIMELINE ──────────────────────────────────────────────────────── */
/* O que a pessoa ainda não viu. Uma marca discreta e um fio à esquerda: piscar
   ou colorir a linha inteira faria a timeline parecer um alarme, e ela é
   histórico. */

/* ── A ÚLTIMA CONSULTA E A IDADE DA BASE ───────────────────────────────
   Duas informações que respondem à mesma pergunta — "isto está atualizado?" —
   e que precisam existir mesmo quando o clique não encontra novidade: sem
   elas um botão que funciona é indistinguível de um botão quebrado.

   A base velha ganha cor de aviso, e não de erro: atraso de carga em lote é o
   comportamento normal do DataJud, não uma falha do sistema. */
.cli-det-juridico .cli-cnj-consulta{
  font-size:.72rem;color:rgba(240,240,240,.55);
}
.cli-det-juridico .cli-cnj-selo.antiga{
  color:#fbbf24;
}

/* A consulta ao vivo no tribunal ganha cor própria: ela é a diferença entre
   "li a base do CNJ de vinte dias atrás" e "abri a tela do tribunal agora",
   e pintá-la igual à outra apagaria a única informação que importa aqui. */
.cli-det-juridico .cli-cnj-selo.aovivo{
  color:#6ee7b7;
}

/* O selo "PJe" no tema escuro: verde-menta, ao lado do âmbar do CNJ. Duas
   fontes, duas cores — ler "CNJ" num movimento de ontem faria concluir que a
   base nacional está em dia, e ela não está. */
.cli-det-juridico .cli-and-fonte.pje{
  border-color:rgba(110,231,183,.34);
  background:rgba(110,231,183,.12);
  color:#6ee7b7;
}