/* =========================================================
   Painel interno — Machado Bazzan Potthoff
   ========================================================= */

/* O atributo hidden do HTML vale display:none, MAS qualquer regra
   nossa com display: (flex, grid, block) ganha dele — e o elemento
   reaparece com a tela escondida por baixo. Já aconteceu três vezes:
   o visualizador de documento, a bolinha do chat mostrando "0", e a
   caixa de escrever aparecendo na lista de contatos. Uma regra só
   fecha a família inteira, e o !important aqui é o uso legítimo dele:
   é uma correção de reset, não uma disputa de estilo. */
[hidden]{display:none !important}

:root{
  --navy:#0A1C54; --navy-2:#0E2569; --navy-deep:#061238;
  --orange:#F55E2E; --orange-soft:#FFE9E0;
  --white:#fff; --paper:#F6F7FA; --ink:#14183A; --muted:#5E668C;
  --line:rgba(10,28,84,.13);
  --verde:#12A150; --verde-soft:#DEF4E8;
  --bordo:#9B1C2E; --bordo-soft:#F6E3E6;
  --r:14px; --r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* -------------------------------------------------------------
     9.9.23 — as cores ganharam nome.

     Antes elas estavam escritas na mão, espalhadas por 3.000 linhas.
     Nenhuma MUDOU: cada nome abaixo vale exatamente a cor que estava
     no lugar dele. Isso foi conferido resolvendo todos os nomes de
     volta e comparando com o arquivo antigo, tela por tela.

     Sem isto não há tema escuro possível: não se troca o que não tem
     nome.

     O número no nome é o quanto a cor é clara hoje (0 preto, 100
     branco). `--roxo-96` é um roxo quase branco, de fundo de etiqueta;
     `--roxo-31` é o roxo escuro que escreve em cima dele.
     ------------------------------------------------------------- */
  --sup:#fff;            /* superfície: cartão, caixa, balão, menu */
  --sup-2:#FAFBFD;       /* a alternada: linha de tabela sob o mouse */
  --white:var(--sup);    /* nome velho, mesma coisa — não duplicar verdade */

  /* cinzas */
  --neu-12:#1d1d1f;
  --neu-13:#1e2126;
  --neu-13a:#1e1f22;
  --neu-13b:#1f2023;
  --neu-15:#232329;
  --neu-18:#2b2d31;
  --neu-21:#313338;
  --neu-22:#35373c;
  --neu-24:#3a3a42;
  --neu-27:#404249;
  --neu-46:#6b7280;
  --neu-66:#a3a6ad;
  --neu-85:#d6d6db;
  --neu-91:#e6e6ea;

  /* azuis */
  --azul-10:#0a1128;
  --azul-20:#232741;
  --azul-24:#2a3050;
  --azul-25:#0b4a72;
  --azul-25a:#2e3350;
  --azul-25b:#34344a;
  --azul-31:#3a4166;
  --azul-45:#1b6ac9;
  --azul-65:#5865f2;
  --azul-66:#7a8cd6;
  --azul-67:#9aa1bd;
  --azul-73:#a8b0cc;
  --azul-80:#b9c2de;
  --azul-81:#c2c7da;
  --azul-87:#d7dbe6;
  --azul-89:#c7d2fe;
  --azul-89a:#dfe2e8;
  --azul-90:#e1e4ec;
  --azul-91:#d9e0f5;
  --azul-91a:#dde3f2;
  --azul-94:#e4f0fb;
  --azul-94a:#ebedf2;
  --azul-95:#edeff6;
  --azul-95a:#eef0f7;
  --azul-95b:#eef1f7;
  --azul-95c:#f2f3f5;
  --azul-95d:#f2f2f5;
  --azul-96:#f3f4f8;
  --azul-96a:#f3f4f7;
  --azul-97:#eef2ff;
  --azul-97a:#f4f6fc;
  --azul-97b:#eef1ff;
  --azul-98:#f7f9fe;
  --azul-99:#fafbfd;
  --azul-99a:#fbfcfe;
  --azul-99b:#fcfcfd;

  /* azul-esverdeados */
  --teal-26:#0f766e;
  --teal-29:#0e7c86;
  --teal-31:#0e7490;
  --teal-60:#63c7cf;

  /* roxos */
  --roxo-35:#4a1d96;
  --roxo-35a:#4c1d95;
  --roxo-37:#4b1fa0;
  --roxo-38:#4b3a86;
  --roxo-39:#4b2f96;
  --roxo-42:#5b21b6;
  --roxo-45:#5b3fa8;
  --roxo-51:#6b3fc4;
  --roxo-52:#6b4fb8;
  --roxo-58:#7c3aed;
  --roxo-60:#7c5cd6;
  --roxo-73:#a794e0;
  --roxo-84:#c9b8f5;
  --roxo-87:#d6cbf2;
  --roxo-92:#ddd6fe;
  --roxo-94:#ede5fb;
  --roxo-95:#ede9fe;
  --roxo-95a:#efebfa;
  --roxo-96:#f3effc;
  --roxo-97:#f3eeff;
  --roxo-98:#f7f4fe;
  --roxo-98a:#faf5ff;
  --roxo-98b:#f7f3ff;
  --roxo-99:#fbfafe;

  /* verdes */
  --verd-20:#0b5c2e;
  --verd-21:#0b5e30;
  --verd-24:#0a6e36;
  --verd-24a:#166534;
  --verd-26:#0b7a3b;
  --verd-30:#1e7a4b;
  --verd-34:#2e7d51;
  --verd-62:#7fbf9a;
  --verd-73:#86efac;
  --verd-77:#a7e3c4;
  --verd-84:#c9e4d5;
  --verd-85:#bbf7d0;
  --verd-87:#cfeedc;
  --verd-93:#dcfce7;
  --verd-97:#f0fdf4;
  --verd-98:#f6fcf8;
  --verd-99:#fafdfb;

  /* âmbares */
  --amb-25:#7a5a08;
  --amb-31:#966c09;
  --amb-38:#b8860b;
  --amb-65:#fcd34d;
  --amb-77:#fde68a;
  --amb-85:#ffe6b0;
  --amb-89:#fef3c7;
  --amb-90:#e9e7e2;
  --amb-92:#fdf3d7;
  --amb-96:#fffbeb;

  /* laranjas */
  --lar-25:#7a4e06;
  --lar-27:#7a2e12;
  --lar-31:#8a3213;
  --lar-31a:#92400e;
  --lar-34:#9a3412;
  --lar-34a:#a96f06;
  --lar-37:#b45309;
  --lar-38:#b23a12;
  --lar-42:#c8860d;
  --lar-44:#d97706;
  --lar-56:#e0a33c;
  --lar-57:#e8a33d;
  --lar-81:#ffd9a0;
  --lar-88:#ffd5c4;
  --lar-91:#ffddd0;
  --lar-95:#fef6e7;
  --lar-95a:#fff6e8;
  --lar-99:#fffbf9;

  /* vermelhos */
  --bord-25:#6e101e;
  --bord-28:#7a1524;
  --bord-29:#7e1626;
  --bord-36:#8a3040;
  --bord-37:#bb0000;
  --bord-39:#a8361f;
  --bord-42:#b91c1c;
  --bord-46:#c0392b;
  --bord-53:#e2542a;
  --bord-59:#ed4245;
  --bord-72:#ff7b72;
  --bord-82:#fca5a5;
  --bord-82a:#e7b9c1;
  --bord-85:#ffb3be;
  --bord-89:#fecaca;
  --bord-94:#fee2e2;
  --bord-95:#fdece8;
  --bord-97:#fef2f2;
  --bord-98:#fff7f8;

  /* Estas seis servem de FUNDO e de TINTA. No escuro não podem ser a
     mesma cor: a barra do topo continua navy e o título que era navy
     precisa clarear. Por isso cada uma tem a irmã `-t`, que é a de
     escrever. No claro as duas valem igual — de propósito. */
  --navy-t:#0A1C54; --muted-t:#5E668C; --orange-t:#F55E2E;
  --verde-t:#12A150; --bordo-t:#9B1C2E; --line-t:rgba(10,28,84,.13);
  --roxo-t:var(--roxo); --roxo-42-t:var(--roxo-42); --roxo-45-t:var(--roxo-45);

  /* -------------------------------------------------------------
     Quatro nomes que o painel USAVA sem nunca ter definido. Consertado
     aqui porque tema escuro é trocar nome por valor, e nome que não
     existe não se troca:

       --roxo     11 usos, todos com a cor escrita ao lado como reserva.
                  Funcionava; agora é nome de verdade e acompanha o tema.
       --tinta    11 usos, SEM reserva: essas regras nunca valeram nada.
                  São efeitos de passar o mouse em borda e texto que
                  simplesmente não aconteciam. Agora acontecem.
       --tinta-2  1 uso, na etiqueta "publicações de" da tela de leitura.
                  Medi antes de escolher: ela renderiza hoje em #14183A,
                  herdado do corpo. Fica valendo exatamente isso, para a
                  tela não mudar de cara.
       --alto-topo  1 uso, com 56px de reserva. Fica 56px.
     ------------------------------------------------------------- */
  --roxo:#5B3FA8;
  --tinta:var(--ink);
  --tinta-2:var(--ink);
  --alto-topo:56px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--navy-t);text-decoration:none}
a:hover{color:var(--orange-t)}
img{max-width:100%;display:block}

/* ---------- topo ---------- */
.topo{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.topo__in{
  max-width:1240px;margin-inline:auto;padding:12px 22px;
  display:flex;align-items:center;gap:20px;flex-wrap:nowrap;
}
.marca{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:#fff;
  white-space:nowrap;flex-shrink:0}
.marca span{color:var(--orange-t);font-weight:600}
.marca:hover{color:#fff}
.menu{display:flex;gap:13px;margin-right:auto;flex-wrap:nowrap;flex-shrink:0}
.menu a{color:rgba(255,255,255,.72);font-weight:600;font-size:.88rem;padding:4px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover{color:#fff}
.menu a.on{color:#fff;border-bottom-color:var(--orange)}
.quem{display:flex;align-items:center;gap:12px;font-size:.86rem;
  color:rgba(255,255,255,.6);min-width:0;flex-wrap:nowrap}
.quem a{white-space:nowrap}
.quem>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quem a{color:rgba(255,255,255,.8);font-weight:600}
.quem a:hover{color:var(--orange-t)}
.quem .sair{border:1.5px solid rgba(255,255,255,.28);padding:5px 13px;border-radius:999px}

/* =========================================================
   9.9.15 — O MENU DO TOPO NO NOTEBOOK

   Achado ao conferir a reclamação das colunas, e é MAIS ANTIGO que
   ela: entre 1.101 px (onde a gaveta do celular deixa de valer) e
   ~1.430 px, o menu do administrador não cabe. São nove links mais o
   bloco da pessoa, 1.308 px de conteúdo numa faixa de 1.120 px — e a
   PÁGINA INTEIRA passava a rolar de lado, em toda tela do painel, não
   só no quadro de prazos.

   Medido na 9.9.13, sem nenhuma alteração minha: 146 px de rolagem
   lateral em 1.120 px, 66 px em 1.200 e 23 px em 1.366. Estava assim
   havia tempo.

   São dois consertos:

     1. A GAVETA passa a valer até 1.220 px, e não 1.100. Entre esses
        dois valores nem apertando o menu do administrador cabia — e a
        gaveta é o padrão que já funciona, não uma invenção nova.

     2. ACIMA DE 1.220 o menu aperta — menos espaço entre os links,
        letra um pouco menor, "hoje" do sininho escondido — e ganha de
        volta o que falta.

        O aperto vale em TODA tela de computador, e não só na faixa
        apertada: sem ele o conteúdo do topo mede 1.326 px dentro de
        uma barra de 1.240, e o "Sair" ficava fora do alinhamento da
        coluna em qualquer monitor. Só não dava rolagem porque sobrava
        margem dos lados — o defeito estava lá, invisível.

   O que NÃO fazemos é esconder link: menu que esconde item para caber
   é menu que ensina a pessoa a procurar pelo endereço.
   ========================================================= */
@media(min-width:1221px){
  .topo__in{gap:12px;padding-left:14px;padding-right:14px}
  .menu{gap:8px}
  .menu a{font-size:.8rem}
  .quem{gap:8px;font-size:.8rem}
  .quem .sair{padding:5px 10px}
  /* o número continua; some só a palavra "hoje" ao lado dele */
  .sino__rot{display:none}
}

/* ---------- estrutura ---------- */
.pag{padding:30px 22px 70px}
.miolo{max-width:1240px;margin-inline:auto}
.miolo--medio{max-width:900px}
.miolo--estreito{max-width:480px}

.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.cabeca--interna{margin-bottom:14px;align-items:center}
.cabeca__acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Envolve os campos de um formulário para o supervisor: <fieldset
   disabled> desliga tudo que está dentro de uma vez só, sem precisar
   marcar campo por campo. A classe só tira a moldura do fieldset. */
.livre{border:0;padding:0;margin:0;min-width:0}
.livre:disabled{opacity:.72}

/* aviso do perfil somente-leitura */
.so-leitura{
  margin:0 0 18px;padding:9px 15px;border-radius:999px;
  background:var(--orange-soft);color:var(--lar-31);
  font-size:.86rem;font-weight:600;display:inline-block;
}
.so-leitura strong{font-weight:800}
/* com muitas colunas o número do processo quebrava no meio; melhor rolar a tabela */
.tabela td.num>a{white-space:nowrap}
.tit{margin:0;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-t)}
.tit2{margin:0 0 14px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--navy-t)}
.sub{margin:4px 0 0;color:var(--muted-t);font-size:.92rem}
.miudo{font-size:.85rem;color:var(--muted-t)}

/* ---------- caixas ---------- */
.caixa{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;margin-bottom:22px;
}
.caixa--dobra{padding:0}
.caixa--dobra summary{
  padding:16px 22px;cursor:pointer;font-weight:700;color:var(--navy-t);list-style:none;
}
.caixa--dobra summary::-webkit-details-marker{display:none}
.caixa--dobra summary:hover{color:var(--orange-t)}
.caixa--dobra[open] summary{border-bottom:1px solid var(--line)}
.caixa--dobra form{padding:20px 22px 22px}

.colunas{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:880px){.colunas{grid-template-columns:1fr}}
/* Sem isto, um filho largo (uma tabela) força a coluna a crescer e
   empurra a página para o lado, mesmo a tabela tendo rolagem própria. */
.colunas>*{min-width:0}
.tripla>*{min-width:0}

/* ---------- formulários ---------- */
label{display:block;margin-bottom:16px;font-weight:600;color:var(--navy-t);font-size:.9rem}
label small{font-weight:400;color:var(--muted-t)}
input[type=text],input[type=password],input[type=search],input[type=date],
input[type=number],input[type=file],input[type=time],input[type=url],
input[type=email],input[type=tel],
select,textarea{
  width:100%;margin-top:6px;padding:11px 13px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--paper);
  font:inherit;font-size:.97rem;color:var(--ink);outline:none;
  transition:border-color .3s,background .3s;
}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{border-color:var(--orange);background:var(--sup)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:680px){.dupla{grid-template-columns:1fr}}
.meia{display:block;max-width:calc(50% - 9px)}
@media(max-width:680px){.meia{max-width:none}}

fieldset.bloco{border:1px dashed var(--line);border-radius:var(--r);padding:16px 18px 2px;margin:0 0 18px}
fieldset.bloco legend{padding:0 8px;font-weight:700;color:var(--navy-t);font-size:.88rem}

.acoes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.acoes-td{display:flex;gap:8px;flex-wrap:wrap}
.acoes-td form{margin:0}
.linha-form{margin:0}
.linha-form select{margin-top:0;padding:6px 9px;font-size:.86rem}

#contaDigitos.ok{color:var(--verde-t);font-weight:600}
#contaDigitos.alerta{color:var(--bordo-t);font-weight:700}
.forcar{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;
  padding:14px 16px;border-radius:var(--r);background:var(--bordo-soft);
  border:1px solid rgba(155,28,46,.25);font-weight:500;color:var(--bord-28);font-size:.9rem;
}
.forcar input{flex:0 0 auto;margin-top:3px;width:auto}

.aviso-cor{
  display:block;margin-top:8px;padding:9px 12px;border-radius:10px;
  background:var(--orange-soft);color:var(--lar-34);font-size:.84rem;font-weight:500;line-height:1.45;
}

/* ---------- botões ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;border:1.5px solid var(--orange);
  background:var(--orange);color:#fff;font:inherit;font-weight:700;font-size:.94rem;
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.bt:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px)}
/* SÓ O DESENHO, na mesma pílula (8.10). O padding lateral encolhe para
   o mesmo tanto do de cima e de baixo, e com o raio de 999px o botão
   vira um círculo do tamanho exato do irmão ao lado — mesma altura,
   mesma cor, mesmo hover. Um botão "parecido" ao lado de outro é pior
   que um botão diferente: o olho vê o desalinho antes de ler. */
.bt--so-icone{padding-left:12px;padding-right:12px}
/* A ALTURA TEM DE SER A MESMA, e não parecida.

   `.bt` tem 11px de folga em cima e embaixo; a altura do irmão com
   texto é isso mais UMA LINHA DE TEXTO. Um desenho de 18px deixava o
   botão do ícone cinco pixels mais baixo — pouco para nomear, o
   bastante para o olho ver o desalinho antes de ler.

   `1.55em` é a entrelinha do corpo, então o desenho ocupa exatamente a
   altura que a linha de texto ocuparia. Continua valendo se um dia o
   corpo da fonte mudar — que é o motivo de não ser um número em pixel
   escrito à mão aqui. */
.bt--so-icone svg{display:block;width:1.55em;height:1.55em}
.bt--vazio{background:transparent;color:var(--navy-t);border-color:var(--line)}
.bt--vazio:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bt--perigo{background:transparent;color:var(--bordo-t);border-color:rgba(155,28,46,.4)}
.bt--perigo:hover{background:var(--bordo);border-color:var(--bordo);color:#fff}
.bt--pq{padding:7px 15px;font-size:.85rem}
.bt--cheio{width:100%}

/* ---------- recados ---------- */
.recado{
  border-radius:var(--r);padding:13px 17px;margin-bottom:18px;
  font-weight:600;font-size:.93rem;border-left:4px solid;
}
.recado--ok{background:var(--verde-soft);border-color:var(--verde);color:var(--verd-20)}
.recado--erro{background:var(--bordo-soft);border-color:var(--bordo);color:var(--bord-28)}
.recado--aviso{background:var(--orange-soft);border-color:var(--orange);color:var(--lar-34)}
.recado--senha{background:var(--navy);border-color:var(--orange);color:#fff}
.recado--senha code{
  display:inline-block;margin:8px 0 4px;padding:9px 16px;border-radius:10px;
  background:rgba(255,255,255,.14);font-family:ui-monospace,Menlo,monospace;
  font-size:1.25rem;letter-spacing:.08em;
}
.recado--senha p{margin:4px 0 0;font-weight:400;font-size:.86rem;color:rgba(255,255,255,.75)}

/* ---------- filtros ---------- */
.filtros{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
}
.filtros input,.filtros select{margin-top:0;width:auto;min-width:150px}
/* A caixinha de marcar herdava o min-width:150px acima e ficava a um
   palmo do próprio rótulo, parecendo que os dois não tinham relação. */
.filtros input[type=checkbox]{min-width:0;width:auto;margin:0;flex:none}
.filtros input[type=search]{flex:1;min-width:250px}
.filtros .data{display:flex;align-items:center;gap:6px;margin:0;font-size:.86rem;color:var(--muted-t)}
.filtros .data input{margin-top:0}
.limpar{font-size:.86rem;color:var(--muted-t);text-decoration:underline}

/* ---------- tabela ---------- */
.tabela-rolo{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg)}
.tabela{width:100%;border-collapse:collapse;font-size:.92rem}
.tabela th{
  text-align:left;padding:13px 16px;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-t);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tabela td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:var(--azul-99)}
.tabela .num{font-variant-numeric:tabular-nums;font-weight:600}
.tabela--mini{font-size:.87rem}
.tabela--mini th,.tabela--mini td{padding:9px 14px}
.caixa .tabela-rolo,.caixa .tabela{border:0}
tr.apagada td{opacity:.5}

.etapa{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;margin-right:5px;
}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:700}
.pill--andamento{background:var(--orange-soft);color:var(--lar-34)}
.pill--ganho{background:var(--verde-soft);color:var(--verd-20)}
.pill--perdido{background:var(--bordo-soft);color:var(--bord-28)}
/* 5.7 — extinto usa o MESMO vermelho do perdido, de propósito: para o
   cliente é igualmente fim de linha, e inventar uma terceira cor só
   faria a tela pedir para ser decorada. O que muda é a palavra. */
.pill--extinto{background:var(--bordo-soft);color:var(--bord-28)}
.tag{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:700;
  background:rgba(10,28,84,.08);color:var(--muted-t);vertical-align:middle;
}
.tag--acao{background:var(--orange-soft);color:var(--lar-34)}
.tag--perigo{background:var(--bordo-soft);color:var(--bord-28)}
.tag--oculto{background:rgba(10,28,84,.08);color:var(--muted-t);cursor:help}
.de{color:var(--muted-t);text-decoration:line-through}
.para{color:var(--navy-t);font-weight:600}

.paginas{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:20px;font-size:.9rem;color:var(--muted-t)}
.paginas a{font-weight:700}

.vazio{
  background:var(--white);border:1.5px dashed var(--line);border-radius:var(--r-lg);
  padding:44px 24px;text-align:center;
}
.vazio strong{display:block;font-size:1.1rem;color:var(--navy-t)}
.vazio p{margin:6px 0 0;color:var(--muted-t);font-size:.92rem}

/* ---------- cartões do admin ---------- */
.cartoes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
@media(max-width:1000px){.cartoes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cartoes{grid-template-columns:1fr}}
.cartao{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
a.cartao:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(10,28,84,.6)}
.cartao strong{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:var(--orange-t);line-height:1.1}
.cartao span{display:block;margin-top:2px;font-size:.85rem;color:var(--muted-t);line-height:1.35}
.cartao--alerta strong{color:var(--bordo-t)}

.barras{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.barras a{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:12px;font-size:.86rem}
.barras__rot{color:var(--muted-t)}
.barras a:hover .barras__rot{color:var(--orange-t)}
.barras__tr{height:8px;border-radius:99px;background:rgba(10,28,84,.08);overflow:hidden}
.barras__tr > span{display:block;height:100%;background:var(--orange);border-radius:99px}
.barras__n{text-align:right;font-weight:700;color:var(--navy-t);font-variant-numeric:tabular-nums}

.logo-circ{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;border:2.5px solid var(--navy);overflow:hidden;
}
.logo-circ img{width:70%;height:70%;object-fit:contain}

/* ---------- zona de perigo ---------- */
.perigo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--bordo-soft);border:1px solid rgba(155,28,46,.25);
  border-radius:var(--r-lg);padding:18px 22px;margin-bottom:22px;
}
.perigo strong{color:var(--bord-28)}
.perigo p{margin:2px 0 0;font-size:.86rem;color:var(--bord-36)}

/* ---------- login ---------- */
.corpo-login{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:var(--navy);
  background-image:radial-gradient(circle at 20% 15%,rgba(245,94,46,.28),transparent 45%),
                   radial-gradient(circle at 85% 85%,rgba(43,71,166,.5),transparent 50%);
}
.cartao-login{
  width:100%;max-width:390px;background:var(--sup);border-radius:26px;padding:34px 32px 30px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
}
.marca--login{margin:0 0 4px;font-size:1rem;color:var(--navy-t)}
.cartao-login h1{margin:0 0 20px;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-t)}
.cartao-login .miudo{margin:18px 0 0;text-align:center;line-height:1.5}

/* =========================================================
   RELATÓRIOS
   ========================================================= */
.cartoes--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cartoes--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cartoes--4{grid-template-columns:1fr}}

.periodo{margin:0 0 20px;font-size:.9rem;color:var(--muted-t)}
.periodo strong{color:var(--navy-t)}

.destaque{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:22px;
}
.destaque__rot{font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-t)}
.destaque__num{margin:6px 0 0;font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.destaque__num span{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-left:12px;
  color:rgba(255,255,255,.75)}
.destaque__sub{margin:8px 0 0;font-size:.92rem;color:rgba(255,255,255,.72);max-width:70ch}

/* ---------- gráfico de barras ---------- */
.graf{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:9px}
.graf li{display:grid;grid-template-columns:190px 1fr minmax(46px,auto) auto;align-items:center;gap:14px}
.graf__rot{font-size:.88rem;color:var(--muted-t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graf__tr{height:20px;border-radius:5px;background:rgba(10,28,84,.06);overflow:hidden;display:flex}
.graf__fill{
  display:block;height:100%;background:var(--navy);
  border-radius:0 5px 5px 0;min-width:3px;flex:0 0 auto;
}
.graf__fill.ruimbar{background:var(--bordo)}
.graf__n{text-align:right;font-weight:800;color:var(--navy-t);font-variant-numeric:tabular-nums;
  font-size:.95rem;white-space:nowrap}
.graf__ir{font-size:.78rem;color:var(--muted-t);text-decoration:underline}
.graf__ir:hover{color:var(--orange-t)}
@media(max-width:700px){
  .graf li{grid-template-columns:1fr minmax(44px,auto) auto;gap:8px}
  .graf__rot{grid-column:1/-1;margin-bottom:-4px;white-space:normal}
}

/* barra empilhada: 2px de respiro entre as faixas */
.graf__tr--pilha{background:none;gap:2px;min-width:3px}
.seg{display:flex;align-items:center;justify-content:center;height:100%;min-width:3px;
  border-radius:2px;overflow:hidden}
.seg:first-child{border-radius:5px 2px 2px 5px}
.seg:last-child{border-radius:2px 5px 5px 2px}
.seg:only-child{border-radius:5px}
.seg__n{font-size:.72rem;font-weight:800;color:#fff;padding:0 2px}
.seg--andamento{background:var(--orange)}
.seg--ganho{background:var(--verde)}
.seg--perdido{background:var(--bordo)}
.seg--extinto{background:var(--bordo)}

.legenda{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0 0 16px;padding:0;
  font-size:.85rem;color:var(--muted-t)}
.legenda li{display:flex;align-items:center;gap:7px}
.sw{width:13px;height:13px;border-radius:4px;display:block}
.sw--andamento{background:var(--orange)}
.sw--ganho{background:var(--verde)}
.sw--perdido{background:var(--bordo)}
.sw--extinto{background:var(--bordo)}
.legenda-nota{margin:14px 0 0;font-size:.83rem;color:var(--muted-t);line-height:1.5;max-width:80ch}

.ruim{color:var(--bordo-t);font-weight:700}
.bom{color:var(--verd-20);font-weight:600;margin:0}
.rodape-rel{margin-top:26px;font-size:.8rem;color:var(--muted-t);text-align:center}

/* ---------- folha do parceiro ---------- */
.folha{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px 30px}
.folha__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  border-bottom:2px solid var(--navy);padding-bottom:20px;margin-bottom:24px}
.folha__de{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-t)}
.folha__tit{margin:6px 0 8px;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-t)}
.folha__sub{margin:0;font-size:.95rem;color:var(--muted-t);line-height:1.6}
.folha__logo{flex:0 0 auto;display:grid;place-items:center;width:72px;height:72px;
  border-radius:50%;border:3px solid var(--navy);background:#fff;overflow:hidden}
.folha__logo img{width:70%;height:70%;object-fit:contain}
.folha__nota{margin:0 0 22px;font-size:.95rem;color:var(--ink);background:var(--paper);
  padding:14px 18px;border-radius:var(--r);border-left:4px solid var(--verde)}
.folha__rodape{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted-t);line-height:1.6}
.folha .tit2{margin-top:26px}

/* ---------- impressão ---------- */
.soimprime{display:none}
@media print{
  @page{margin:14mm}
  .topo,.naoimprime,.filtros{display:none !important}
  .soimprime{display:block;font-size:1.4rem;font-weight:800;color:#000;margin:0 0 6px}
  body{background:#fff;font-size:11px}
  .pag{padding:0}
  .miolo{max-width:none}
  .caixa,.folha,.cartao,.tabela-rolo{
    border-color:#bbb !important;box-shadow:none !important;break-inside:avoid;
  }
  .caixa{padding:0 0 14px;margin-bottom:14px;border:0;border-bottom:1px solid #ddd;border-radius:0}
  .folha{border:0;padding:0}
  .quebra{break-inside:avoid}
  .destaque{background:#fff !important;color:#000 !important;border:1px solid #bbb}
  .destaque__rot,.destaque__num span,.destaque__sub{color:#444 !important}
  .destaque__num{color:#000 !important}
  .graf__tr{background:#eee}
  .tabela tbody tr:hover{background:none}
  a{color:#000 !important;text-decoration:none}
  .cartao strong{font-size:1.5rem}
  /* garante que as cores das barras saiam na impressão */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =========================================================
   FINANCEIRO
   ========================================================= */
.abas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px;width:fit-content}
.abas a{padding:9px 20px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--muted-t)}
.abas a:hover{color:var(--navy-t)}
.abas a.on{background:var(--navy);color:#fff}

.tripla{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
/* 9.9.4 — a chavinha que liga o campo de sucumbência, embaixo dele */
.chavinha{display:flex;align-items:center;gap:7px;margin:4px 0 12px;
  font-size:.82rem;color:var(--muted-t);font-weight:400;cursor:pointer}
.chavinha input{width:auto;margin:0;cursor:pointer}
.chavinha span{line-height:1.3}
/* campo desligado: cinza e com a seta de "não dá para escrever aqui" */
.campo-moeda input:disabled{background:rgba(10,28,84,.05);color:var(--muted-t);cursor:not-allowed}
@media(max-width:680px){.tripla{grid-template-columns:1fr}}

.campo-moeda{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding:0 13px;
  border-radius:var(--r);background:var(--paper);border:1.5px solid var(--line);
  transition:border-color .3s,background .3s;
}
.campo-moeda:focus-within{border-color:var(--orange);background:var(--sup)}
.campo-moeda i{font-style:normal;font-size:.9rem;font-weight:700;color:var(--muted-t)}
.campo-moeda input{
  flex:1;min-width:0;margin:0;padding:11px 0;border:0;background:none;outline:none;
  font:inherit;font-size:1rem;font-weight:600;color:var(--navy-t);
  font-variant-numeric:tabular-nums;text-align:right;
}

.somatorio{margin:10px 0 0;font-size:.92rem;color:var(--muted-t)}
.somatorio strong{color:var(--navy-t);font-variant-numeric:tabular-nums}

.parc-linha{
  display:grid;grid-template-columns:1fr 1fr auto;gap:0 14px;align-items:end;
  padding:10px 0;border-bottom:1px dashed var(--line);
}
.parc-linha label{margin-bottom:0}
.parc-linha .bt{margin-bottom:2px}
@media(max-width:680px){.parc-linha{grid-template-columns:1fr 1fr;gap:0 10px}
  .parc-linha .bt{grid-column:1/-1;margin-top:8px}}

.chips-modo{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.chips-modo label{margin:0;display:flex;align-items:center;gap:7px;font-weight:600;cursor:pointer}
.chips-modo input{width:auto;margin:0}

.dobra-baixa summary{list-style:none;cursor:pointer}
.dobra-baixa summary::-webkit-details-marker{display:none}
.form-baixa{
  margin-top:12px;padding:16px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);min-width:250px;
}
.form-baixa label{margin-bottom:12px}
.tabela .form-baixa{position:relative;z-index:2}

.repasses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.repasses{grid-template-columns:1fr}}
.repasse{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.repasse__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.repasse__rot{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-t)}
.repasse__val{margin:4px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-t);
  font-variant-numeric:tabular-nums}
.repasse__val small{display:block;font-size:.8rem;font-weight:500;color:var(--muted-t);letter-spacing:0}
.repasse details{margin-top:12px}
.repasse summary{list-style:none;cursor:pointer;display:inline-flex}
.repasse summary::-webkit-details-marker{display:none}


/* =========================================================
   CELULAR E TABLET
   Acrescentado na versão 2.5.

   O menu vira gaveta abaixo de 900px, aberta pelo botão de três
   traços. Quem abre é uma caixa de seleção escondida, não um script:
   se o JavaScript falhar, o menu continua abrindo.
   ========================================================= */

/* Faixa do meio: notebook menor. O menu inteiro ainda cabe numa linha
   se apertarmos um pouco os espaços e encurtarmos o nome de quem está
   logado. Sem isso a barra quebrava em duas linhas abaixo de 1225px. */
@media(max-width:1300px){
  .topo__in{gap:16px}
  .menu{gap:11px}
  .menu a{font-size:.85rem}
  .quem{gap:9px}
  .quem>span{max-width:120px}
}

/* a chave fica invisível, mas continua alcançável pelo teclado */
.menu-chave{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
/* o painel tem um label{margin-bottom:16px} para formulários; o hambúrguer
   também é um label e herdava essa margem, deixando a barra 16px mais alta */
.burger{display:none;margin:0}

/* no computador a gaveta não existe: os filhos dela seguem sendo
   itens da barra, exatamente como antes */
.gaveta{display:contents}

@media(max-width:1220px){
  .topo__in{padding:9px 18px;column-gap:12px;row-gap:0;align-items:center;flex-wrap:wrap}

  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:42px;height:42px;padding:10px;
    border-radius:11px;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.22);
  }
  .burger span{
    display:block;height:2px;background:#fff;border-radius:2px;
    transition:transform .25s var(--ease),opacity .2s;
  }
  .menu-chave:checked ~ .burger{background:rgba(255,255,255,.10)}
  .menu-chave:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-chave:checked ~ .burger span:nth-child(2){opacity:0}
  .menu-chave:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-chave:focus-visible ~ .burger{outline:2px solid var(--orange);outline-offset:2px}

  /* a gaveta em si */
  .gaveta{
    display:none;order:3;
    width:calc(100% + 36px);      /* estica por cima do respiro lateral da barra */
    margin:2px -18px -9px;padding:0 18px 10px;
    max-height:calc(100vh - 62px);overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .menu-chave:checked ~ .gaveta{display:block}

  .menu{display:block;margin:0}
  .menu a{
    display:block;padding:14px 12px;font-size:1rem;white-space:normal;
    border-bottom:1px solid rgba(255,255,255,.10);
    border-left:3px solid transparent;
  }
  .menu a.on{
    color:#fff;background:rgba(255,255,255,.07);
    border-bottom-color:rgba(255,255,255,.10);
    border-left-color:var(--orange);
  }

  .quem{
    display:block;padding-top:14px;font-size:.95rem;
  }
  /* na gaveta sobra largura: o nome não precisa do corte com "..."
     que a faixa do notebook aplica */
  .quem span{display:block;padding:0 12px 4px;max-width:none;overflow:visible;
    text-overflow:clip;white-space:normal;color:rgba(255,255,255,.55)}
  .quem a{display:block;padding:12px;color:#fff}
  .quem .sair{
    margin-top:8px;text-align:center;border-radius:999px;
    border-color:rgba(255,255,255,.35);
  }
}

/* ---------- conteúdo em telas estreitas ---------- */
@media(max-width:720px){
  .pag{padding:22px 16px 60px}
  .tit{font-size:1.42rem}
  .cabeca{gap:12px;margin-bottom:18px}
  .cabeca__acoes{width:100%}
  .cabeca__acoes .bt{flex:1}

  /* filtros: um por linha, cada um ocupando a largura toda.
     Antes ficavam de tamanhos diferentes, em degrau. */
  .filtros{padding:14px;gap:10px}
  .filtros input,.filtros select,
  .filtros input[type=search]{width:100%;min-width:0;flex:1 1 100%}
  .filtros .data{width:100%}
  .filtros .data input{flex:1;min-width:0}
  .filtros button{width:100%}
  .filtros .limpar{width:100%;text-align:center}

  /* abas do financeiro: uma fileira só, que desliza para o lado */
  .abas{
    width:auto;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .abas::-webkit-scrollbar{display:none}
  .abas a{white-space:nowrap;padding:9px 16px}

  /* alvo de toque decente */
  .bt{padding:12px 20px}
  .bt--pq{padding:9px 15px}
  .tabela th,.tabela td{padding:12px 13px}
  .tabela--mini th,.tabela--mini td{padding:9px 11px}
  /* R$ 2.000,00 quebrando em duas linhas fica ilegível.
     Só vale dentro de .tabela-rolo: fora dela a tabela não tem para onde
     rolar e o não-quebrar empurraria a página inteira para o lado. */
  .tabela-rolo .tabela td.num,.tabela-rolo .tabela .num strong{white-space:nowrap}

  .caixa{padding:18px 16px}
  .miolo--estreito .caixa{padding:20px 18px}
}

@media(max-width:520px){
  .pag{padding:18px 13px 55px}
  .tit{font-size:1.3rem}
  /* o botão principal do cabeçalho ocupa a linha toda; o "Voltar" e
     outros secundários continuam pequenos, para não competirem com ele */
  .cabeca>.bt:not(.bt--vazio){width:100%}
}

/* ---------- aviso de que a tabela desliza ----------
   Sombra que aparece só do lado que ainda tem coluna escondida, e some
   sozinha quando chega ao fim. Sem script: é o próprio rolar da caixa
   que move o fundo. */
.tabela-rolo{
  background-image:
    linear-gradient(to right,  var(--white) 30%, rgba(255,255,255,0)),
    linear-gradient(to left,   var(--white) 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,   rgba(15,23,60,.14), rgba(15,23,60,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(15,23,60,.14), rgba(15,23,60,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}


/* =========================================================
   QUADRO DE AJUIZAMENTOS (kanban) — versão 2.8
   ========================================================= */

.miolo--largo{max-width:1500px;margin-inline:auto}
.escondido{display:none}

/* as quatro colunas. No computador cabem lado a lado; no celular
   viram uma fileira que desliza, com encaixe em cada coluna. */
.quadro{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  /* align-items:stretch (o padrão) e NÃO start.
     Com "start" cada coluna tinha só a altura do próprio conteúdo. Numa
     coluna com 40 cartões e a vizinha com 3, ao lado do 40º cartão não
     existia zona de soltura nenhuma — arrastar para o lado não fazia
     nada, e a pessoa precisava levar o cartão lá para cima. Esticando
     todas à altura da mais alta, o alvo existe em qualquer altura. */
}
/* =========================================================
   9.9.15 — O QUADRO EM TELA DE NOTEBOOK

   Relatado em 25/09: "as colunas na aba prazos desconfiguram em telas
   menores de computador". Defeito meu, da 9.9.14.

   Como era: abaixo de um ponto de quebra, o quadro virava DIRETO a
   fileira do celular — cada coluna com 84% da largura da tela. Num
   notebook de 1366 px isso dava colunas de 1.147 px e uma coluna de
   cada vez à vista, com 5.633 px de rolagem lateral. E a 9.9.14 subiu
   esse ponto de 1.250 para 1.450 px por causa da sexta coluna, o que
   pegou justamente TODOS os notebooks comuns (1280, 1366, 1440).

   Como é: três estados, e o do meio é o que faltava.

     tela larga  — as colunas dividem o espaço em partes iguais;
     notebook    — elas ENCOLHEM até um mínimo legível e, se ainda não
                   couberem, o quadro rola de lado alguns pixels;
     celular     — aí sim a fileira que desliza com encaixe.

   O mínimo de cada quadro é a largura em que o cartão ainda se lê: o
   de prazos já vivia com 237 px na tela grande, então 210 px é encolher,
   não quebrar.
   ========================================================= */
.quadro{grid-template-columns:repeat(4,minmax(250px,1fr))}
@media(max-width:1520px){
  .quadro{
    gap:10px;overflow-x:auto;
    /* desliga o encaixe: com coluna estreita ele prenderia a rolagem
       de 210 em 210 px, que é pior do que rolar livre */
    scroll-snap-type:none;
    padding-bottom:10px;margin-inline:-13px;padding-inline:13px;
  }
}
@media(max-width:900px){
  .quadro{
    grid-template-columns:repeat(4,86vw);
    scroll-snap-type:x mandatory;
  }
  .col{scroll-snap-align:center}
}

.col{background:rgba(10,28,84,.035);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 12px;min-width:0;
  /* coluna em flex para a pilha poder crescer e ocupar o resto */
  display:flex;flex-direction:column}
.col__topo{padding:0 4px 10px}
.col__tit{margin:0;font-size:.98rem;font-weight:800;color:var(--navy-t);
  display:flex;align-items:center;gap:8px}
.col__n{background:var(--navy);color:#fff;font-size:.74rem;font-weight:800;
  min-width:22px;height:22px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 6px}
.col__nota{margin:4px 0 0;font-size:.78rem;color:var(--muted-t);line-height:1.4}
.col__pilha{display:flex;flex-direction:column;gap:10px;min-height:90px;
  border-radius:var(--r);transition:background .2s;
  /* cresce até o fim da coluna: é o que faz a área de soltura existir
     na mesma altura do cartão que está sendo arrastado */
  flex:1 1 auto}
.col__pilha--alvo{background:var(--orange-soft);outline:2px dashed var(--orange);
  outline-offset:3px}
/* Enquanto se arrasta, a coluna inteira aceita o cartão — inclusive o
   título e o espaço vazio embaixo. Alvo pequeno demais é o que obriga a
   pessoa a mirar. */
.col--recebe{background:rgba(245,94,46,.06)}
.col__vazia{margin:14px 4px;font-size:.85rem;color:var(--muted-t)}

/* o cartão */
.cartao-t{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 13px;box-shadow:0 1px 2px rgba(10,28,84,.05)}
.cartao-t--voando{opacity:.4}
.cartao-t--parada{border-color:rgba(245,94,46,.55);
  box-shadow:0 0 0 1px rgba(245,94,46,.25)}
.cartao-t__link{display:block;color:inherit}
.cartao-t__link:hover .cartao-t__cliente{color:var(--orange-t)}
.cartao-t__cliente{display:block;font-size:.96rem;font-weight:700;color:var(--navy-t);
  line-height:1.3}
.cartao-t__tese{display:block;font-size:.8rem;color:var(--muted-t);margin-top:2px}

.cartao-t__barra{height:6px;border-radius:999px;background:rgba(10,28,84,.09);
  overflow:hidden;margin:10px 0 5px}
.cartao-t__barra span{display:block;height:100%;background:var(--verde);
  border-radius:999px}
.cartao-t__conta{margin:0;font-size:.78rem;color:var(--muted-t);font-weight:600}
.cartao-t__conta--vazio{margin-top:9px;font-weight:400;font-style:italic}

.cartao-t__pe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.cartao-t__quem{font-size:.78rem;color:var(--muted-t);margin-left:auto}
.cartao-t__data{margin:8px 0 0;font-size:.74rem;color:var(--muted-t)}
.cartao-t--parada .cartao-t__data strong{color:var(--orange-t)}
.cartao-t__mover{display:block;margin:9px 0 0}
.cartao-t__mover select{margin:0;padding:5px 8px;font-size:.78rem;width:100%;
  color:var(--muted-t);background:var(--azul-99a)}
.cartao-t__mover select:hover{color:var(--navy-t);border-color:var(--orange)}
/* no computador o arrastar já resolve; o seletor fica discreto até o
   ponteiro chegar perto, para o quadro não virar uma parede de caixas */
@media(hover:hover) and (min-width:1101px){
  .cartao-t__mover{opacity:0;transition:opacity .18s;height:0;overflow:hidden}
  .cartao-t:hover .cartao-t__mover,
  .cartao-t:focus-within .cartao-t__mover{opacity:1;height:auto;overflow:visible}
}

.tag--parceiro{background:rgba(10,28,84,.08);color:var(--navy-t)}
.tag--meta{background:var(--orange-soft);color:var(--lar-31)}

/* ---------- registros de contrato dentro da tarefa ---------- */
.registro{border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px}
.registro--feito{background:var(--verde-soft);border-color:rgba(18,161,80,.3)}
.registro__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.registro__topo p{margin:4px 0 0}
.registro__quando{margin:8px 0 0;font-size:.85rem;color:var(--muted-t)}
.registro__acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:flex-start}
.registro__acoes form{margin:0}
.registro__acoes details{margin:0}
.registro__acoes summary{list-style:none;cursor:pointer;display:inline-flex}
.registro__acoes summary::-webkit-details-marker{display:none}

.anexos{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:5px}
.anexos li{display:flex;align-items:center;gap:9px;font-size:.86rem}
.anexos form{margin:0}
.lixo{background:none;border:0;color:var(--muted-t);cursor:pointer;font-size:.9rem;
  padding:2px 5px;line-height:1}
.lixo:hover{color:var(--bordo-t)}

/* ---------- linha do tempo ---------- */
/* escolha de responsáveis: caixinhas em vez de lista suspensa, porque
   agora são várias pessoas e no celular a lista múltipla é impossível */
.campo-grupo{margin:0 0 16px}
.rotulo{display:block;font-weight:600;color:var(--navy-t);font-size:.9rem;margin-bottom:7px}
.pessoas{display:flex;flex-wrap:wrap;gap:8px}
.pessoa{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;
  font-weight:600;font-size:.87rem;color:var(--muted-t);background:var(--white);
  transition:border-color .2s,color .2s,background .2s}
.pessoa:hover{border-color:var(--navy);color:var(--navy-t)}
.pessoa input{margin:0;width:auto;flex:0 0 auto}
.pessoa small{font-weight:400;font-size:.78rem;opacity:.75}
.pessoa--on{border-color:var(--orange);background:var(--orange-soft);color:var(--lar-31)}
.pessoa input:disabled{opacity:.6}
.pessoa:has(input:disabled){cursor:default;opacity:.9}
.campo-grupo>small{display:block;margin-top:8px;font-size:.82rem;color:var(--muted-t);
  font-weight:400;line-height:1.5}

.chip-check{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;
  font-weight:600;font-size:.88rem;color:var(--navy-t);cursor:pointer}
.chip-check input{margin:2px 0 0;width:auto;flex:0 0 auto}
.chip-check span{font-weight:600}

.form-comentario{margin-bottom:18px}
.form-comentario textarea{margin-bottom:8px}
.tempo{list-style:none;margin:0;padding:0}
.tempo__item{padding:11px 0 11px 16px;border-left:2px solid var(--line);
  position:relative}
.tempo__item::before{content:'';position:absolute;left:-5px;top:16px;
  width:8px;height:8px;border-radius:999px;background:var(--line)}
.tempo__item--comentario::before{background:var(--orange)}
.tempo__item--movimento::before{background:var(--navy)}
.tempo__item--ajuizamento::before{background:var(--verde)}
.tempo__item--responsavel::before{background:var(--roxo-60)}
.tempo__item--anexo::before{background:var(--teal-31)}
.tempo__cabeca{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tempo__cabeca strong{font-size:.88rem;color:var(--navy-t)}
.tempo__cabeca .miudo{font-size:.78rem}
.tempo__texto{margin:3px 0 0;font-size:.9rem;color:var(--ink);line-height:1.5}
.tempo__texto--fala{background:var(--paper);border-radius:var(--r);
  padding:9px 12px;margin-top:6px}


/* ---------------------------------------------------------
   O que falta cadastrar — atalho na lista de processos.
   Os processos que vieram da migração sem nome de cliente somem no
   meio de dez mil; este atalho é o caminho da equipe até eles.
   --------------------------------------------------------- */
.faltando{margin:-4px 0 14px;font-size:.86rem;color:var(--muted-t)}
.faltando a{color:var(--navy-t);text-decoration:none;border-bottom:1px dotted var(--navy)}
.faltando a:hover{border-bottom-style:solid}
.faltando a.ativo{background:var(--orange);color:#fff;border-bottom:0;
  padding:2px 8px;border-radius:999px;font-weight:600}
.falta-tag{display:inline-block;background:var(--bord-95);color:var(--bord-39);font-size:.72rem;
  font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;margin-right:4px}

/* =========================================================
   MENU AGRUPADO — versão 3.4

   Com a aba Prazos a barra chegaria a nove itens e quebraria em duas
   linhas no notebook. As telas de administração passaram a viver sob
   um item só. Abre no hover e no foco do teclado; no celular a gaveta
   mostra tudo aberto, então não depende de JavaScript nenhum.
   ========================================================= */
.menu-grupo{position:relative;display:flex;align-items:center}
.menu-grupo__tit::after{content:"▾";font-size:.68em;margin-left:5px;opacity:.75}
.menu-sub{
  display:none;position:absolute;left:-12px;top:calc(100% + 10px);
  background:var(--sup);border:1px solid var(--line);border-radius:14px;padding:6px;
  min-width:196px;z-index:60;
  box-shadow:0 22px 44px -20px rgba(6,18,56,.75);
}
.menu-grupo:hover .menu-sub,
.menu-grupo:focus-within .menu-sub{display:block}
/* faixa invisível que cobre o vão entre o item e a caixa, senão o
   submenu fecha quando o ponteiro atravessa o espaço */
.menu-grupo:hover .menu-sub::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
}
.menu-sub a{
  display:block;color:var(--navy-t);font-size:.88rem;font-weight:600;
  padding:9px 12px;border-radius:9px;border-bottom:0;
}
.menu-sub a:hover{background:var(--paper);color:var(--orange-t)}
.menu-sub a.on{color:var(--orange-t);background:var(--orange-soft);border-bottom-color:transparent}

@media(max-width:1220px){
  /* na gaveta não há hover: o grupo vira um bloco com os filhos
     recuados, todos visíveis */
  .menu-grupo{display:block;position:static}
  .menu-grupo__tit::after{display:none}
  .menu-sub{
    display:block;position:static;background:none;border:0;box-shadow:none;
    padding:0;min-width:0;
  }
  .menu-sub a{
    color:rgba(255,255,255,.72);padding:13px 12px 13px 28px;font-size:.95rem;
    border-radius:0;border-bottom:1px solid rgba(255,255,255,.10);
    border-left:3px solid transparent;
  }
  .menu-sub a:hover{background:none;color:#fff}
  .menu-sub a.on{
    color:#fff;background:rgba(255,255,255,.07);
    border-left-color:var(--orange);
  }
}

/* =========================================================
   QUADRO DE PRAZOS — versão 3.4
   ========================================================= */

/* cinco colunas em vez das quatro do quadro de ajuizamentos.
   9.9.15 — os três estados do bloco lá de cima valem aqui também; só
   muda o mínimo, porque cabem mais colunas no mesmo espaço. */
.quadro--5{grid-template-columns:repeat(5,minmax(230px,1fr))}
@media(max-width:900px){
  .quadro--5{grid-template-columns:repeat(5,84vw)}
}
/* 9.9.14 — SEIS. O quadro de prazos tem seis colunas desde a 8.31
   ("Preciso de ajuda"), mas continuava pedindo cinco: a sexta,
   "Concluídos", caía sozinha numa segunda linha, longe da vista.
   Grid não reclama de item sobrando — ele empurra para baixo e cala. */
.quadro--6{grid-template-columns:repeat(6,minmax(210px,1fr))}
@media(max-width:900px){
  .quadro--6{grid-template-columns:repeat(6,84vw)}
}

/* =========================================================
   9.9.14 — DOCUMENTO DO PARCEIRO: a faixa do topo e o pop-up

   A faixa é `position:fixed` no alto e empurra o corpo com um
   `padding-top` em `body.com-dpv`: faixa que cobre o menu troca um
   aviso por um estorvo.
   ========================================================= */
.dpv{position:fixed;top:0;left:0;right:0;z-index:180;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;background:var(--orange);color:#fff;
  font-size:.9rem;font-weight:600;box-shadow:0 2px 12px rgba(6,18,56,.28)}
.dpv__i{font-size:1.05rem;line-height:1}
.dpv__t{margin-right:auto;min-width:0}
.dpv__bt{background:rgba(255,255,255,.2);color:#fff;border-radius:8px;
  padding:5px 14px;font-size:.84rem;font-weight:700;text-decoration:none;white-space:nowrap}
.dpv__bt:hover{background:var(--sup);color:var(--orange-t)}
.dpv__x{background:none;border:0;color:rgba(255,255,255,.85);cursor:pointer;
  font-size:.95rem;line-height:1;padding:4px 6px}
.dpv__x:hover{color:#fff}
/* o empurrão de verdade vem do script, que MEDE a faixa: no celular a
   frase ocupa três linhas e qualquer número fixo aqui deixaria a faixa
   por cima do menu. Este valor é só o de partida, do primeiro quadro
   antes de o script medir. */
body.com-dpv{padding-top:46px}

.dpp{position:fixed;inset:0;z-index:260;display:grid;place-items:center;
  padding:20px;background:rgba(6,10,30,.72);backdrop-filter:blur(3px)}
.dpp__cx{background:var(--sup);border-radius:18px;padding:30px 28px;text-align:center;
  max-width:420px;width:100%;box-shadow:0 30px 80px -24px rgba(6,18,56,.8)}
.dpp__i{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--orange);color:#fff;font-size:1.7rem;margin-bottom:14px}
.dpp__t{margin:0 0 10px;font-size:1.45rem;line-height:1.2;color:var(--navy-t)}
.dpp__p{margin:0 0 24px;font-size:1rem;line-height:1.55;color:var(--ink)}
.dpp__q{display:inline-block;margin-top:6px;font-size:.82rem;color:var(--muted-t)}
.dpp__bts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dpp__bt{font:inherit;font-size:.98rem;font-weight:700;padding:13px 26px;
  border-radius:12px;border:1px solid var(--navy);background:var(--navy);color:#fff;
  cursor:pointer;text-decoration:none}
.dpp__bt:hover{background:var(--navy-deep);color:#fff}
.dpp__bt--vazio{background:transparent;color:var(--navy-t)}
.dpp__bt--vazio:hover{background:var(--paper);color:var(--navy-t)}
body.dpp--on{overflow:hidden}

/* 9.9.14 — os documentos do parceiro esperando o setor de prazos.
   Roxo, que é a cor que o painel já usa para "veio do parceiro" (a
   mesma do aviso no sininho) — e não o laranja do quadro, para não
   competir com os cartões que estão logo abaixo. */
.docp{border:1px solid var(--roxo-87);background:var(--roxo-98);border-radius:14px;
  padding:4px 14px;margin-bottom:16px}
.docp__t{cursor:pointer;font-weight:800;color:var(--roxo-38);padding:10px 2px;
  font-size:.95rem;list-style:none;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.docp__t::-webkit-details-marker{display:none}
.docp__t::before{content:"▸";font-size:.85em;transition:transform .15s}
.docp[open] .docp__t::before{transform:rotate(90deg)}
.docp__s{font-weight:600;font-size:.8rem;color:var(--muted-t)}
.docp__l{list-style:none;margin:0 0 10px;padding:0;
  display:flex;flex-direction:column;gap:8px}
.docp__i{display:grid;gap:4px 14px;align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1fr) auto;
  background:var(--sup);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.docp__q,.docp__o{display:flex;flex-direction:column;min-width:0}
.docp__c{font-weight:700;color:var(--navy-t)}
.docp__p,.docp__f{font-size:.78rem;color:var(--muted-t);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docp__o b{font-size:.88rem;color:var(--ink)}
.docp__z{font-size:.78rem;color:var(--muted-t)}
.docp__nada{color:var(--muted-t);font-size:.88rem;margin:0 0 16px}
@media(max-width:820px){
  .docp__i{grid-template-columns:1fr}
  .docp__i .bt{justify-self:start;margin-top:4px}
}

/* 9.9.14 — a faixa dos cartões que o quadro não sabe onde pôr */
.fora{border:1px solid var(--bordo);background:var(--bordo-soft);
  border-radius:14px;padding:14px 16px;margin-bottom:16px}
.fora__t{margin:0 0 4px;font-size:1rem;color:var(--bord-28)}
.fora__p{margin:0 0 10px;font-size:.87rem;line-height:1.5;color:var(--bord-28)}
.fora__p code{background:rgba(255,255,255,.6);padding:1px 5px;border-radius:5px}
.fora__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fora__i{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--sup);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.fora__n{font-weight:700;color:var(--navy-t)}
.fora__d{font-size:.82rem;color:var(--muted-t);margin-right:auto}
.fora__f{margin:0}

/* a tarja colorida fica na borda esquerda do cartão. Vencido pulsa
   VERMELHO e dilação pendente pulsa ROXO — são situações opostas, uma
   é a pior notícia e a outra é boa, e se pulsassem igual o vermelho
   perderia o sentido. */
.cartao-p{
  background:var(--white);border:1px solid var(--line);
  border-left:4px solid rgba(10,28,84,.18);
  border-radius:var(--r);padding:11px 12px;
  box-shadow:0 1px 2px rgba(10,28,84,.05);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
a.cartao-p:hover{transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(10,28,84,.6)}
.cartao-p--verde{border-left-color:var(--verde)}
.cartao-p--amarelo{border-left-color:var(--amb-38)}
.cartao-p--vermelho{border-left-color:var(--bordo);animation:pulsaPrazo 1.7s ease-in-out infinite}
.cartao-p--dilacao{border-left-color:var(--roxo-42);animation:pulsaDilacao 1.7s ease-in-out infinite}
.cartao-p--feito{border-left-color:rgba(10,28,84,.2);opacity:.72}
@keyframes pulsaPrazo{
  0%,100%{box-shadow:0 0 0 0 rgba(155,28,46,0)}
  50%{box-shadow:0 0 0 4px rgba(155,28,46,.22)}
}
@keyframes pulsaDilacao{
  0%,100%{box-shadow:0 0 0 0 rgba(91,33,182,0)}
  50%{box-shadow:0 0 0 4px rgba(91,33,182,.22)}
}
/* quem pediu para o sistema parar de animar recebe o mesmo aviso
   parado, e não um cartão sem sinal nenhum */
@media(prefers-reduced-motion:reduce){
  .cartao-p--vermelho{animation:none;box-shadow:0 0 0 3px rgba(155,28,46,.22)}
  .cartao-p--dilacao{animation:none;box-shadow:0 0 0 3px rgba(91,33,182,.22)}
}

.cartao-p__cliente{display:block;font-size:.94rem;font-weight:700;color:var(--navy-t);line-height:1.3}
.cartao-p__proc{display:block;font-size:.75rem;color:var(--muted-t);margin-top:2px;
  font-variant-numeric:tabular-nums}
.cartao-p__tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.tag--tipo{background:var(--navy);color:#fff}
.tag--dil{background:var(--roxo-94);color:var(--roxo-42-t)}
.tag--sino{background:var(--amb-92);color:var(--amb-25)}
.cartao-p__prazo{margin:9px 0 0;font-size:.78rem;font-weight:700}
.cartao-p__prazo--verde{color:var(--verde-t)}
.cartao-p__prazo--amarelo{color:var(--amb-31)}
.cartao-p__prazo--vermelho{color:var(--bordo-t)}
.cartao-p__prazo--dilacao{color:var(--roxo-42-t)}
.cartao-p__prazo--feito{color:var(--muted-t);font-weight:600}
.cartao-p__barra{height:5px;border-radius:999px;background:rgba(10,28,84,.09);
  overflow:hidden;margin:9px 0 4px}
.cartao-p__barra span{display:block;height:100%;background:var(--verde);border-radius:999px}
.cartao-p__conta{margin:0;font-size:.75rem;color:var(--muted-t);font-weight:600}
.cartao-p__conta--vazio{margin-top:9px;font-weight:400;font-style:italic}
.cartao-p__pe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.cartao-p__quem{font-size:.74rem;color:var(--muted-t)}
.ini{width:21px;height:21px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:.63rem;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center;flex:none}
.ini--mais{background:rgba(10,28,84,.12);color:var(--navy-t)}

/* aviso de documento já obtido em outro processo da mesma pessoa */
.aviso-doc{
  background:var(--amb-92);border:1px solid rgba(184,134,11,.35);
  border-left:4px solid var(--amb-38);border-radius:var(--r);
  padding:13px 16px;margin:0 0 18px;
}
.aviso-doc p{margin:0;font-size:.9rem;line-height:1.55}
.aviso-doc strong{color:var(--amb-25)}
.aviso-doc a{color:var(--navy-t);text-decoration:underline;font-weight:700}

/* dentro da tarefa */
.pedido{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:11px}
.pedido--ok{background:var(--verde-soft);border-color:rgba(18,161,80,.32)}
.pedido--serve{background:var(--amb-92);border-color:rgba(184,134,11,.4)}
.pedido--nao{background:var(--bordo-soft);border-color:rgba(155,28,46,.35)}
.pedido__topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pedido__nome{font-weight:700;font-size:.92rem;color:var(--navy-t)}
.pedido__marca{margin-left:auto;font-size:.72rem;font-weight:800;padding:3px 10px;
  border-radius:999px;background:rgba(10,28,84,.08);color:var(--muted-t)}
.pedido--ok .pedido__marca{background:var(--verde);color:#fff}
.pedido__nota{margin:8px 0 0;font-size:.83rem;line-height:1.5}
.pedido__nota--sim{color:var(--verd-24)}
.pedido__nota--nao{color:var(--bordo-t)}
.pedido__nota--aviso{color:var(--amb-25)}

.dilacao{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-bottom:1px dashed var(--line);font-size:.87rem}
.dilacao:last-of-type{border-bottom:0}
.dilacao__d{font-weight:700;color:var(--roxo-42-t);white-space:nowrap;font-variant-numeric:tabular-nums}
.dilacao__s{display:block;font-weight:700;margin-top:2px}
.dilacao__s--aguardando{color:var(--roxo-42-t)}
.dilacao__s--deferida{color:var(--verde-t)}
.dilacao__s--indeferida{color:var(--bordo-t)}

/* ---------- complementos da tela de prazo (3.4) ---------- */
.folha--rasa{padding:16px 18px;margin-top:12px}
.dado-linha{margin:0;font-size:.88rem;color:var(--muted-t)}
.dado-linha strong{color:var(--navy-t)}
/* rótulo curto que fica na mesma linha do botão, sem virar campo de
   formulário de largura total */
.in-linha{display:inline-flex;align-items:center;gap:6px;margin:0 8px 0 0;
  font-size:.82rem;color:var(--muted-t);font-weight:600}
.in-linha input,.in-linha select{margin:0;padding:6px 9px;font-size:.83rem;width:auto}
.linha-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.linha-form select{margin:0;padding:6px 9px;font-size:.83rem;width:auto}
.tempo__item--recebido::before{background:var(--verde)}
.tempo__item--dilacao::before{background:var(--roxo-42)}
.tempo__item--arquivo::before{background:var(--muted)}
.tempo__item--pedido::before{background:var(--orange)}
/* o botão de excluir pedido vai para a ponta direita da faixa de ações,
   longe do "Anexar" e do "Marcar recebido" */
.registro__acoes > form:last-child .lixo{margin-left:auto}

.pedido .registro__acoes{margin-top:12px;align-items:center}
.pedido .registro__acoes > form:last-child{margin-left:auto}

/* =========================================================
   CUMPRIMENTO DE SENTENÇA — versão 3.5
   Um bloco à parte, e não mais um campo no meio dos outros: marcar
   isto muda o que o CLIENTE vê e o que vai para o PARCEIRO, então
   precisa saltar aos olhos de quem está preenchendo.
   ========================================================= */
.cumpr{
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:0 0 16px;background:var(--azul-99a);
  transition:border-color .18s,background .18s;
}
.cumpr--on{border:2px solid var(--roxo-42);background:var(--roxo-94);padding:13px 15px}
.cumpr__chave{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;
  font-weight:700;color:var(--navy-t);font-size:.94rem}
.cumpr--on .cumpr__chave{color:var(--roxo-42-t)}
.cumpr__chave input{width:auto;margin:0;accent-color:var(--roxo-42)}
.cumpr__nota{margin:8px 0 0;font-size:.83rem;line-height:1.55;color:var(--muted-t)}
.cumpr--on .cumpr__nota{color:var(--roxo-35)}
.cumpr .dupla{margin-top:14px}
.cumpr--on label{color:var(--roxo-35)}
.cumpr--on label small{color:var(--roxo-51)}

/* etiqueta do cumprimento na lista de processos */
.tag--cumpr{background:var(--roxo-94);color:var(--roxo-42-t)}

/* =========================================================
   PUBLICAÇÕES DO DJEN — versão 3.5
   ========================================================= */
.djen__ultima{margin-left:auto;font-size:.82rem;color:var(--muted-t)}
.djen__dias{margin:0 0 14px;font-size:.87rem;color:var(--muted-t);display:flex;gap:14px;align-items:center}
.djen__dias a{color:var(--navy-t);font-weight:600}
.djen__dias a:hover{color:var(--orange-t)}
.djen__dias strong{color:var(--navy-t);font-variant-numeric:tabular-nums}

.djen__abas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.djen__abas a{font-size:.83rem;font-weight:600;color:var(--muted-t);
  padding:6px 13px;border-radius:999px;background:rgba(10,28,84,.05)}
.djen__abas a:hover{background:rgba(10,28,84,.1);color:var(--navy-t)}
.djen__abas a.on{background:var(--navy);color:#fff}
.djen__abas b{font-weight:800}

.pub{background:var(--sup);border:1px solid var(--line);border-left:4px solid var(--azul-45);
  border-radius:var(--r);padding:14px 16px;margin:0 0 11px}
.pub--nova{border-left-color:var(--verde)}
.pub--fora{border-left-color:var(--amb-38)}
.pub--feita{border-left-color:rgba(10,28,84,.2);opacity:.72}
.pub__topo{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pub__proc{font-weight:800;color:var(--navy-t);font-size:.95rem;font-variant-numeric:tabular-nums}
.pub__cli{font-size:.85rem;color:var(--muted-t)}
.pub__meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.tag--nova{background:var(--verde-soft);color:var(--verd-24)}
.tag--ok{background:var(--verde);color:#fff}
.tag--ja{background:rgba(10,28,84,.08);color:var(--muted-t)}

/* o texto da publicação abre e fecha; fechado mostra o começo */
.pub__det{margin:10px 0 0}
.pub__txt{cursor:pointer;list-style:none;font-size:.85rem;line-height:1.6;color:var(--azul-31);
  background:var(--paper);border-radius:10px;padding:11px 13px;
  /* o diário quebra linha entre o cabeçalho, as partes e a peça.
     Sem isto vira uma linha corrida e some a leitura rápida. */
  white-space:pre-line}
.pub__txt::-webkit-details-marker{display:none}
.pub__txt:hover{background:rgba(10,28,84,.06)}
.pub__det[open] .pub__txt{border-radius:10px 10px 0 0;font-weight:600;color:var(--navy-t)}
.pub__inteiro{margin:0;font-size:.85rem;line-height:1.65;color:var(--azul-31);
  background:var(--paper);border-radius:0 0 10px 10px;padding:0 13px 13px;
  max-height:340px;overflow-y:auto}
.pub__acoes{display:flex;gap:8px;margin:11px 0 0;flex-wrap:wrap;align-items:center}
.pub__acoes small{color:var(--muted-t);font-size:.79rem}
.pub__acoes--pq{margin-top:8px}

/* =========================================================
   O SININHO — versão 3.5
   Ao lado do nome, com o que precisa de atenção HOJE. É um <details>
   e não um menu com JavaScript, pelo mesmo motivo do botão de três
   traços: funciona mesmo se algum script falhar ao carregar.
   ========================================================= */
.sino{position:relative}
.sino__bt{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);
  font-size:.82rem;color:#fff;white-space:nowrap}
.sino__bt::-webkit-details-marker{display:none}
.sino__bt:hover{background:rgba(255,255,255,.22)}
.sino__n{background:var(--orange);color:#fff;font-weight:800;font-size:.75rem;
  min-width:20px;height:20px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 6px}
.sino__n--urg{background:var(--bordo)}
.sino__rot{color:rgba(255,255,255,.75)}
.sino[open] .sino__bt{background:rgba(255,255,255,.22)}
.sino__cx{position:absolute;right:0;top:calc(100% + 10px);z-index:70;
  background:var(--sup);border:1px solid var(--line);border-radius:14px;padding:8px;
  min-width:270px;box-shadow:0 22px 44px -20px rgba(6,18,56,.75)}
.sino__tit{margin:4px 10px 8px;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted-t)}
/* 9.9.14 — `.quem .sino__l`, e não `.sino__l` sozinho.
   `.quem a{color:rgba(255,255,255,.8)}` (0,1,1) ganhava de `.sino__l`
   (0,1,0) por especificidade, e a caixa do sininho é BRANCA: o texto
   saía branco no branco. Só os números apareciam, porque `.sino__l b`
   pinta de laranja — era por eles que dava para adivinhar o aviso. */
.quem .sino__l{display:block;padding:9px 11px;border-radius:9px;font-size:.87rem;
  color:var(--navy-t);font-weight:600}
.quem .sino__l:hover{background:var(--paper);color:var(--navy-t)}
.sino__l b{color:var(--orange-t);font-weight:800}
.sino__l--urg b{color:var(--bordo-t)}

@media(max-width:1220px){
  /* na gaveta o sininho vira uma linha comum, sem caixa flutuante */
  .sino{display:block}
  .sino__bt{width:100%;justify-content:flex-start;border-radius:10px;padding:11px 12px;
    font-size:.95rem;margin-bottom:6px}
  .sino__cx{position:static;background:none;border:0;box-shadow:none;padding:0;min-width:0}
  .sino__tit{color:rgba(255,255,255,.5)}
  /* 9.9.14 — na gaveta o fundo é escuro: ali o branco é que está certo */
  .quem .sino__l{color:#fff;padding:11px 12px}
  .quem .sino__l:hover{background:rgba(255,255,255,.07);color:#fff}
}

/* =========================================================
   O RATEIO — versão 3.6
   O dinheiro entra inteiro e depois é repassado. O número do
   escritório vira o maior porque é a pergunta que se faz ao abrir a
   tela; os outros três ficam ao lado, menores, para a soma continuar
   conferível.
   ========================================================= */
.rateio-topo{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:14px;margin:0 0 18px}
@media(max-width:900px){.rateio-topo{grid-template-columns:1fr}}
.rateio-topo__meu{
  background:var(--navy);border-radius:var(--r-lg);padding:18px 22px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
.rateio-topo__meu strong{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.rateio-topo__meu span{display:block;margin-top:5px;font-size:.8rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.rateio-topo__meu small{display:block;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.18);font-size:.78rem;line-height:1.5;
  color:rgba(255,255,255,.72)}
.rateio-topo__lado{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.rateio-topo__lado{grid-template-columns:1fr}}
.cartao--fraco strong{color:var(--muted-t);font-size:1.3rem}

/* a coluna do escritório na lista. O nowrap importa: "R$ 980,00"
   quebrando em duas linhas faz a coluna parecer duas informações. */
.num--meu{font-weight:800;color:var(--navy-t);white-space:nowrap}

/* as quatro linhas dentro de uma previsão */
.rateio{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:16px 0 0}
.rateio__l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--line)}
.rateio__l:last-child{border-bottom:0}
.rateio__l--meu{background:var(--orange-soft)}
.rateio__q{font-weight:700;color:var(--navy-t);font-size:.9rem}
.rateio__l--meu .rateio__q{color:var(--lar-31)}
.rateio__d{font-size:.79rem;color:var(--muted-t)}
.rateio__v{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy-t)}
.rateio__l--meu .rateio__v{color:var(--lar-31);font-size:1.08rem}

/* o "pulou 1 feriado" ao lado da data, na 3.7 */
.cartao-p__pulou{display:block;margin-top:2px;font-size:.72rem;font-weight:600;
  color:var(--muted-t)}
/* feriado que já passou fica mais apagado na lista */
tr.passou td{opacity:.55}

/* =========================================================
   AGENDA  (3.8)
   ========================================================= */
.ag{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.ag{grid-template-columns:1fr}}

.mes__cab{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mes__cab .tit2{margin:0;margin-right:auto}
.seta{border:1px solid var(--line);background:var(--sup);border-radius:9px;
  width:30px;height:30px;display:grid;place-items:center;color:var(--muted-t);
  font-weight:700;text-decoration:none}
.seta:hover{border-color:var(--orange);color:var(--orange-t)}

.grade{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.grade__nome{text-align:center;font-size:.7rem;font-weight:700;color:var(--muted-t);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:3px}
.dia{border:1px solid var(--line);border-radius:10px;min-height:72px;padding:5px 6px;
  background:var(--sup);display:flex;flex-direction:column;gap:3px;text-decoration:none}
.dia:hover{border-color:var(--orange)}
.dia--fora{background:var(--azul-99a);border-color:rgba(10,28,84,.06)}
.dia--fora .dia__n{color:var(--azul-81)}
.dia--hoje{border-color:var(--orange);border-width:2px;background:var(--lar-99)}
.dia--sel{background:var(--navy);border-color:var(--navy)}
.dia--sel .dia__n{color:#fff}
.dia--sel:hover{border-color:var(--orange)}
.dia__n{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1}
.dia__fer{font-size:.6rem;color:var(--bordo-t);font-weight:700;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dia--sel .dia__fer{color:var(--bord-85)}
.dia__mais{font-size:.6rem;color:var(--muted-t);font-weight:700}
.dia--sel .dia__mais{color:rgba(255,255,255,.7)}

/* os tracinhos de cada compromisso dentro do quadradinho do dia */
.pt{height:5px;border-radius:99px;background:var(--navy);display:block}
.pt--aud{background:var(--bordo)}
.pt--per{background:var(--orange)}
.pt--cli{background:var(--navy)}
.pt--int{background:var(--muted)}
.pt--tar{background:var(--verde)}
.pt--off{opacity:.35}
/* no dia selecionado o fundo é azul-marinho: o tracinho marinho sumiria */
.dia--sel .pt{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.dia--sel .pt--cli{background:var(--azul-66)}
.dia--sel .pt--int{background:var(--azul-73)}

.legenda-tipos{display:flex;gap:13px;flex-wrap:wrap;margin-top:13px;
  font-size:.77rem;color:var(--muted-t);font-weight:600}
.legenda-tipos i{display:inline-block;width:15px;vertical-align:middle;margin-right:5px}

/* ---------- a coluna do dia ---------- */
.dia-cab{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.dia-cab .tit2{margin:0}
.comp{display:block;border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:11px;padding:11px 13px;margin-bottom:9px;background:var(--sup);
  text-decoration:none;color:var(--ink)}
.comp:hover{border-color:var(--orange);color:var(--ink)}
.comp--aud{border-left-color:var(--bordo)}
.comp--per{border-left-color:var(--orange)}
.comp--int{border-left-color:var(--muted)}
.comp--tar{border-left-color:var(--verde)}
.comp--off .comp__t{text-decoration:line-through;opacity:.6}
.comp--off{background:var(--azul-99b)}
.comp__h{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.comp__hora{font-weight:800;font-size:.94rem;font-variant-numeric:tabular-nums}
.comp__t{font-weight:700;font-size:.94rem;line-height:1.3}
.comp__d{color:var(--muted-t);font-size:.83rem;margin-top:2px}
.comp__motivo{color:var(--bordo-t);font-size:.8rem;margin-top:4px;font-weight:600}

.et{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:99px;background:var(--navy);color:#fff}
.et--aud{background:var(--bordo)}
.et--per{background:var(--orange)}
.et--cli{background:var(--navy)}
.et--int{background:var(--muted)}
.et--tar{background:var(--verde)}
.et--situacao{background:var(--sup);color:var(--bordo-t);border:1.5px solid var(--bordo)}

.gente{display:flex;gap:5px;margin-top:8px;align-items:center;flex-wrap:wrap}
.av{width:24px;height:24px;border-radius:99px;background:var(--navy);color:#fff;
  font-size:.6rem;font-weight:800;display:grid;place-items:center;flex-shrink:0;
  font-style:normal}
.av--2{background:var(--orange)}
.av--3{background:var(--verde)}
.av--4{background:var(--roxo-45)}
.avisa-n{font-size:.72rem;color:var(--verde-t);font-weight:700}

.prazo-bloco{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.prazo-bloco h3{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted-t)}
.pz{display:flex;gap:9px;align-items:center;padding:7px 0;font-size:.87rem;
  border-bottom:1px solid rgba(10,28,84,.06);text-decoration:none;color:var(--ink)}
.pz:last-child{border-bottom:0}
.pz:hover{color:var(--orange-t)}
.pz__b{width:7px;height:7px;border-radius:99px;background:var(--bordo);flex-shrink:0}

/* ---------- escolher o tipo, no formulário ---------- */
.tipos{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.tipo{border:1.5px solid var(--line);border-radius:99px;padding:6px 14px;
  font-size:.85rem;font-weight:600;color:var(--muted-t);cursor:pointer;background:var(--sup)}
.tipo input{position:absolute;opacity:0;width:0;height:0}
.tipo:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
.tipo:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}

/* ---------- quem participa e quem é avisado (3.8) ----------
   Não reaproveitei .pessoas/.pessoa: aquelas são as fichinhas em
   linha dos responsáveis do prazo, com display:flex no pai. Aqui é
   uma grade de três colunas, e herdar aquele flex desmontava a
   tabela inteira. */
.avisa-lista{display:block}
.avisa-lista{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:4px}
.avisa-lista__cab{display:grid;grid-template-columns:1fr 92px 92px;gap:8px;
  padding:8px 13px;background:var(--azul-99);border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-t);text-align:center}
.avisa-lista__cab span:first-child{text-align:left}
.avisa-lista__l{display:grid;grid-template-columns:1fr 92px 92px;gap:8px;
  padding:9px 13px;align-items:center;border-bottom:1px solid rgba(10,28,84,.06)}
.avisa-lista__l:last-child{border-bottom:0}
.avisa-lista__n{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.89rem}
.avisa-lista__n small{font-weight:400;color:var(--muted-t)}
.cx-rot{display:grid;place-items:center;cursor:pointer}
.cx-rot input{position:absolute;opacity:0;width:0;height:0}
.cx{width:19px;height:19px;border:1.6px solid var(--line);border-radius:5px;
  background:var(--sup);display:grid;place-items:center;transition:all .12s}
.cx-rot input:checked + .cx{background:var(--navy);border-color:var(--navy)}
.cx-rot input:checked + .cx--v{background:var(--verde);border-color:var(--verde)}
.cx-rot input:checked + .cx::after{content:'✓';color:#fff;font-size:.72rem;font-weight:800}
.cx-rot input:focus-visible + .cx{outline:2px solid var(--orange);outline-offset:2px}
fieldset[disabled] .cx{background:var(--azul-96)}

/* ---------- a oferta de audiência na tela do DJEN ---------- */
.pub__audiencia{align-items:center;gap:10px}
.bt--audiencia{background:var(--bordo);color:#fff;border-color:var(--bordo)}
.bt--audiencia:hover{background:var(--bord-29);color:#fff}

/* ---------- avisos no celular ---------- */
.previa-avisos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.previa-avisos{grid-template-columns:1fr}}
.previa-aviso{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:var(--sup)}
.previa-aviso__q{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted-t);margin-bottom:7px}
.previa-aviso__t{font-weight:800;font-size:.95rem;margin-bottom:4px}
.previa-aviso__x{font-size:.87rem;line-height:1.5;color:var(--azul-24)}
.tag--erro{background:var(--bordo-soft);color:var(--bordo-t)}
.bloco-codigo{background:var(--azul-10);color:var(--azul-91);border-radius:10px;padding:13px 15px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;
  line-height:1.7;overflow-x:auto;white-space:pre;margin:10px 0}
/* um campo que ocupa a linha inteira dentro de um formulário */
.linha-campo{margin-bottom:16px}
.linha-campo>label{margin-bottom:6px}

/* ---------- 3.9: os tipos novos ---------- */
/* instrução puxa para o bordô escuro: é a audiência que exige preparar
   o cliente. "Falar com o cliente" fica roxo, para não se confundir
   com compromisso que alguém marcou à mão. */
.pt--ins{background:var(--bord-25)}
.pt--fal{background:var(--roxo-45)}
.et--ins{background:var(--bord-25)}
.et--fal{background:var(--roxo-45)}
.comp--ins{border-left-color:var(--bord-25)}
.comp--fal{border-left-color:var(--roxo-45)}
.tipo--ins:has(input:checked){background:var(--bord-25);border-color:var(--bord-25)}
.dia--sel .pt--fal{background:var(--roxo-73)}
.comp__end{color:var(--muted-t);font-size:.83rem;margin-top:3px}
/* a ficha de leitura do terceiro */
.ficha{display:grid;grid-template-columns:130px 1fr;gap:10px 18px;margin:0}
@media(max-width:560px){.ficha{grid-template-columns:1fr;gap:2px 0}
  .ficha dd{margin-bottom:12px}}
.ficha dt{font-weight:700;font-size:.82rem;color:var(--muted-t);
  text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.ficha dd{margin:0;font-size:.95rem}
.caixa--instrucao{border-left:4px solid var(--orange);line-height:1.6}
.caixa--relato{border-left:4px solid var(--verde);line-height:1.6;white-space:normal}
.comp__relato{color:var(--verde-t);font-size:.8rem;font-weight:700;margin-top:4px}
.tipo--realizado:has(input:checked){background:var(--verde);border-color:var(--verde)}
.tipo--cancelado:has(input:checked){background:var(--bordo);border-color:var(--bordo)}
.tipo--adiado:has(input:checked){background:var(--orange);border-color:var(--orange)}
.et--realizado{background:var(--verde)}
.et--cancelado{background:var(--bordo)}
.et--adiado{background:var(--orange)}

/* =========================================================
   FICHA DO CLIENTE  (4.0)
   ========================================================= */
.atalho-ficha{display:block;border:1.5px solid var(--orange);background:var(--orange-soft);
  border-radius:var(--r);padding:12px 16px;margin-bottom:16px;color:var(--lar-31);
  font-size:.92rem;font-weight:600;text-decoration:none}
.atalho-ficha:hover{background:var(--lar-91);color:var(--lar-27)}
.atalho-ficha b{font-variant-numeric:tabular-nums}

.ficha-topo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.ficha-av{width:52px;height:52px;border-radius:99px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.ficha-nome .tit{margin:0}
.ficha-nome .sub{margin-top:2px}

.tiras{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px;margin-bottom:26px}
.tira{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--sup)}
.tira--forte{background:var(--navy);border-color:var(--navy)}
.tira--alerta{border-color:var(--orange);background:var(--orange-soft)}
.tira__r{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-t);margin-bottom:5px}
.tira--forte .tira__r{color:rgba(255,255,255,.62)}
.tira--alerta .tira__r{color:var(--lar-31)}
.tira__n{font-size:1.45rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.tira--forte .tira__n{color:#fff}
.tira--alerta .tira__n{color:var(--lar-31)}
.tira__p{font-size:.78rem;color:var(--muted-t);margin-top:3px}
.tira--forte .tira__p{color:rgba(255,255,255,.6)}
.tira--alerta .tira__p{color:var(--lar-31)}

/* cliente que veio de parceiro: o contato é por lá */
.caixa--parceiro{border-left:4px solid var(--roxo);line-height:1.6}

.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.doc{border:1px solid var(--line);border-left:4px solid var(--verde);border-radius:11px;
  padding:11px 13px;background:var(--sup)}
.doc--pres{border-left-color:var(--orange)}
.doc__n{font-weight:700;font-size:.9rem}
.doc__d{color:var(--muted-t);font-size:.8rem;margin-top:3px;line-height:1.5}
.doc__d b{color:var(--ink)}

/* o dinheiro, acordo por acordo */
.grana{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--sup)}
.grana__cab,.grana__l,.grana__tot{display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px;padding:11px 14px}
@media(max-width:760px){
  .grana__cab{display:none}
  .grana__l,.grana__tot{grid-template-columns:1fr 1fr;gap:6px 10px}
}
.grana__cab{background:var(--azul-99);border-bottom:1px solid var(--line);font-size:.68rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-t)}
.grana__cab span:not(:first-child){text-align:right}
.grana__l{align-items:center;border-bottom:1px solid rgba(10,28,84,.06)}
.grana__l:last-of-type{border-bottom:0}
.grana__l--falta{background:var(--lar-99)}
.grana__q{font-weight:700;font-size:.9rem}
.grana__q small{display:block;font-weight:400;color:var(--muted-t);font-size:.78rem;margin-top:2px}
.grana__v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:.92rem}
.grana__v small{display:block;font-weight:400;color:var(--muted-t);font-size:.72rem;margin-top:2px}
.v--esp{color:var(--muted-t)}
.v--ok{color:var(--verde-t)}
.v--falta{color:var(--bordo-t)}
.grana__tot{background:var(--navy);color:#fff;font-weight:800}
.grana__tot span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}

/* =========================================================
   O VISUALIZADOR DE DOCUMENTO  (4.1)
   Abre por cima da tela, em qualquer lugar do painel que
   tenha anexo: prazo, tarefa de ajuizamento e comprovante.
   ========================================================= */
.vd{position:fixed;inset:0;z-index:200;background:rgba(6,10,30,.86);
  display:flex;flex-direction:column;backdrop-filter:blur(3px)}
.vd__barra{display:flex;align-items:center;gap:10px;padding:11px 16px;
  background:var(--navy-deep,#061238);color:#fff;flex-shrink:0;flex-wrap:wrap}
.vd__nome{font-weight:700;font-size:.9rem;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vd__bt{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;
  padding:6px 14px;font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.vd__bt:hover{background:rgba(255,255,255,.26);color:#fff}
.vd__x{padding:6px 12px;font-size:.95rem;line-height:1}
.vd__palco{flex:1;min-height:0;display:grid;place-items:center;padding:18px;
  overflow:auto}
.vd__img{max-width:100%;max-height:100%;border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
/* 9.9.13 — o zoom da imagem. A imagem continua ENCAIXADA e o zoom é
   `transform` por cima: o palco não reflui a cada passo, então o que
   está debaixo do cursor não pula. `touch-action:none` é o que deixa a
   pinça chegar ao painel em vez de virar zoom da página inteira. */
.vd__palco--zoom{overflow:hidden;touch-action:none}
.vd__palco--zoom .vd__img{transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none}
.vd__palco--pega{cursor:grab}
.vd__palco--pega:active{cursor:grabbing}
.vd__zoom{display:flex;align-items:center;gap:4px;flex-shrink:0}
.vd__zbt{padding:6px 12px;font-size:1rem;line-height:1;min-width:38px;text-align:center}
.vd__zq{min-width:66px;text-align:center;font-variant-numeric:tabular-nums}
.vd__pdf{width:100%;height:100%;min-height:70vh;border:0;border-radius:6px;
  background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
@media(max-width:620px){
  .vd__palco{padding:8px}
  .vd__nome{width:100%;margin-right:0;order:-1}
}

/* =========================================================
   A ÁREA DO PARCEIRO  (4.1)
   ========================================================= */
.pedidos{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--sup);margin-bottom:20px}
.pedido{display:grid;grid-template-columns:1.4fr 1.1fr .95fr auto;gap:14px;
  padding:14px 16px;align-items:center;border-bottom:1px solid rgba(10,28,84,.06)}
.pedido:last-child{border-bottom:0}
@media(max-width:880px){.pedido{grid-template-columns:1fr;gap:8px}
  .pd__acao{text-align:left}}
.pedido--recusado{background:var(--bord-98);border-left:4px solid var(--bordo)}
.pedido--espera{background:var(--roxo-99);border-left:4px solid var(--roxo)}
.pedido--ok{background:var(--verd-99);border-left:4px solid var(--verde)}
.pedido--novo{border-left:4px solid var(--orange)}
.pd__quem{font-weight:700;font-size:.95rem}
.pd__quem small{display:block;font-weight:400;color:var(--muted-t);font-size:.79rem;
  margin-top:2px;font-variant-numeric:tabular-nums}
.pd__doc{font-size:.9rem}
.pd__doc small{display:block;color:var(--muted-t);font-size:.79rem;margin-top:2px}
/* endereco fracionado no cadastro do parceiro (5.1) */
.endereco-grade{display:grid;gap:12px;
  grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.endereco-grade .e-rua{grid-column:span 4}
.endereco-grade .e-num{grid-column:span 2}
.endereco-grade .e-comp{grid-column:span 3}
.endereco-grade .e-bairro{grid-column:span 3}
.endereco-grade .e-cidade{grid-column:span 4}
.endereco-grade .e-uf{grid-column:span 2}
@media (max-width:640px){
  .endereco-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .endereco-grade .e-rua,.endereco-grade .e-comp,
  .endereco-grade .e-bairro,.endereco-grade .e-cidade{grid-column:span 2}
  .endereco-grade .e-num,.endereco-grade .e-uf{grid-column:span 1}
}

/* a observacao do escritorio, na tela do correspondente (5.3) */
/* sem white-space:pre-wrap — o nl2br() ja quebra as linhas, e o pre-wrap
   ainda preservava a indentacao do PHP, jogando a primeira linha para
   dentro. Mesmo tratamento da caixa--instrucao, que sempre funcionou. */
.caixa--obs{border-left:3px solid var(--navy,#0A1C54);background:var(--azul-98);
  line-height:1.55}

/* sucumbencia sozinha, no topo de A receber (5.2) */
.rateio-topo__lado .cartao--suc{border-left:3px solid var(--roxo)}
.rateio-topo__lado .cartao--suc small{display:block;color:var(--muted-t);
  font-size:.72rem;margin-top:3px;line-height:1.35}

/* busca por palavra no DJEN (5.1) */
.filtros--busca{margin-top:-6px}
.filtros--busca input[type=search]{flex:1 1 340px;min-width:220px}
.djen__achou{font-size:.84rem;color:var(--muted-t)}
.djen__achou b{color:var(--navy-t);font-weight:600}

/* endereco em pedacos, na ficha do caso (5.1) */
.pedacos{display:flex;flex-wrap:wrap;gap:6px 14px}
.pedacos span{font-size:.84rem;color:var(--muted-t)}
.pedacos b{color:var(--navy-t);font-weight:600}

/* documento que o escritorio mandou para o parceiro colher assinatura (5.1) */
.pd__assinar{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;
  background:var(--roxo-97);border-left:3px solid var(--roxo-42);font-size:.86rem}
.pd__assinar b{color:var(--roxo-37)}
.pd__assinar small{display:block;color:var(--muted-t);font-size:.79rem;margin-top:3px}
.pd__prazo{font-size:.86rem;font-variant-numeric:tabular-nums}
.pd__prazo b{display:block;font-size:.95rem}
.pd__prazo small{display:block;color:var(--muted-t);font-size:.79rem;margin-top:2px}
.pd__motivo{color:var(--bordo-t)!important;font-style:italic}
.pd__acao{text-align:right}
/* 9.9.19 — o quadro "entrou e ficou" e a coluna do mesmo nome.
   Navy, e não verde: verde no caixa é "entrou", e este número é menor
   que o que entrou. Pintar os dois de verde faria o olho somar. */
.cartao--ficou strong{color:var(--navy-t)}
.cx-fica strong{color:var(--navy-t)}
.cx-fica small{display:block;font-weight:400;font-size:.72rem;margin-top:2px}

/* 9.9.20 — as outras duas partes da entrada: parceiro e cliente.
   Tinta normal, sem negrito e sem cor própria. São números de apoio: o
   que salta na linha continua sendo o do escritório, que é o declarado.
   Quatro colunas de dinheiro em quatro cores viram semáforo, e aí
   ninguém acha mais o número que importa. */
.cx-parte{color:var(--ink);white-space:nowrap;font-weight:500}
.cx-parte small{display:block;font-weight:400;font-size:.72rem;margin-top:2px}
/* Quatro colunas de dinheiro na mesma linha: nenhuma delas quebra. Vale só
   nesta tabela, que está dentro de um `.tabela-rolo` e portanto tem para
   onde correr — a regra geral disso já existe no celular, pelo mesmo
   motivo, e continua onde está. */
.tabela--partes td.num,.tabela--partes .num strong{white-space:nowrap}
/* Com quatro colunas de dinheiro, a descrição era a que apanhava: virava
   uma coluna de duas palavras e a linha crescia cinco alturas. Largura
   mínima para ela, e o "ver previsão" desce para a linha de baixo em vez
   de partir a frase no meio. */
.tabela--partes td:nth-child(3){min-width:172px}
.cx-verprev{display:block;margin-top:3px}
/* 9.9.21 — onze colunas na mesma tabela. A largura maior do miolo (o
   `.miolo--largo`, que Prazos e Execução já usavam) resolve a maior
   parte; o resto vem de aproximar as colunas entre si. O respiro de
   cima e de baixo fica quase igual — apertar a ALTURA é que faria a
   lista virar uma grade difícil de seguir com o olho. */
.tabela--partes th,.tabela--partes td{padding:12px 10px}
/* ---------------------------------------------------------
   9.9.22 — DE QUEM É O REPASSE

   O nome INTEIRO está sempre no título da célula: passar o mouse em
   qualquer ponto dela — inclusive em cima do valor, que é onde a mão já
   está — mostra "Fulano & Cia — 20% dos honorários". Isso não custa um
   pixel de largura e vale em qualquer tela.

   ESCRITO NA TABELA, só quando cabe. Medido: o nome engorda a tabela em
   40 px, e numa tela de 1366 esses 40 px são o Doc. e a NF saindo da
   vista de novo — que é o que a 9.9.21 acabou de consertar. Então o nome
   aparece a partir de 1460 px, onde há folga, e abaixo disso a sub-linha
   volta a ser só o percentual. Nada se perde: o título continua lá.

   A largura do nome é TRAVADA em 132 px, com reticências no que passar —
   assim um escritório de nome comprido não estica a coluna.
   --------------------------------------------------------- */
/* As duas escritas com `.cx-parte` na frente de propósito: a regra
   `.cx-parte small` logo acima vale por duas classes, e um `.cx-quem`
   sozinho perderia dela em silêncio — a sub-linha apareceria em toda
   tela e a coluna esticaria. Peguei isso medindo, não lendo. */
.cx-parte .cx-quem{display:none}
.cx-parte .cx-so-pct{display:block}
@media(min-width:1460px){
  .cx-parte .cx-quem{display:block;max-width:132px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .cx-parte .cx-so-pct{display:none}
}

/* =========================================================
   9.9.17 — A LISTA DE EXECUÇÃO
   ========================================================= */
.exec-nova{margin-bottom:16px;padding:4px 16px}
.exec-nova__bt{cursor:pointer;list-style:none;font-weight:800;color:var(--navy-t);
  padding:12px 2px;display:inline-flex;align-items:center;gap:8px}
.exec-nova__bt::-webkit-details-marker{display:none}
.exec-nova__bt:hover{color:var(--orange-t)}
.exec-nova__f{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:4px 0 10px}
.exec-nova__c{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px}
.exec-nova__c--larga{flex:2 1 320px}
.exec-nova__c span{font-size:.78rem;font-weight:700;color:var(--muted-t)}
.exec-nova__c input{width:100%}
.exec-nova__n{margin:0 0 12px}

.exec-t td{vertical-align:top}
.exec-t__n{font-weight:700;color:var(--navy-t);display:block}
.exec-t td small{display:block;color:var(--muted-t);font-size:.78rem;margin-top:2px}
.exec-t__o{min-width:240px}
.exec-t__of{display:flex;gap:6px;align-items:center}
.exec-t__of input{flex:1;min-width:0;font-size:.85rem;padding:6px 9px}
.exec-t__a{white-space:nowrap}
.exec-t__af{display:inline-block;margin:0 0 4px}
/* 9.9.18 — a cor da linha diz em que pé está, sem precisar ler.
   Âmbar é "pasta montada, esperando o lote sair"; verde apagado é
   "já foi". A tarja na borda esquerda é a mesma linguagem dos cartões
   de prazo, para não inventar um segundo vocabulário de cor. */
.exec-t--preparada td{background:var(--lar-95)}
.exec-t--preparada td:first-child{box-shadow:inset 4px 0 0 var(--lar-42)}
.exec-t--ajuizada td{opacity:.62;background:var(--verde-soft)}
.exec-t--ajuizada td:first-child{box-shadow:inset 4px 0 0 var(--verde)}
.et--prep{background:var(--lar-42);color:#fff}
.bt--prep{background:var(--lar-42);border-color:var(--lar-42);color:#fff}
.bt--prep:hover{background:var(--lar-34a);border-color:var(--lar-34a);color:#fff}
@media(max-width:900px){
  .exec-t__o{min-width:0}
  .exec-t__of{flex-wrap:wrap}
}

/* 9.9.16 — o botão "Falar com o parceiro", na tela do prazo.

   Ele precisa de uma linha inteira porque `.pedido` tem DUAS definições
   no painel: a do cartão do escritório (3.4) e a da grade de quatro
   colunas da área do parceiro (4.1), que vem depois e vence. O cartão
   da tela do prazo acaba virando grade, e um botão solto ali cai numa
   célula de 96 px, com o texto quebrado em três linhas.

   Não é hora de desfazer essa colisão de nome — ela é antiga e mexe no
   cartão inteiro. Aqui o botão só reserva a própria linha. */
.pedido [data-chat-parceiro]{grid-column:1/-1;justify-self:start;
  margin-top:10px;white-space:nowrap}

/* 9.9.16 — os arquivos que o parceiro mandou naquele pedido.
   `<details>` de verdade: sem JavaScript a lista continua abrindo, e o
   parceiro é quem mais entra pelo celular. */
.envios{grid-column:1/-1;text-align:left;border-top:1px dashed var(--line);
  margin-top:4px;padding-top:6px}
.envios__bt{cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;
  color:var(--navy-t);padding:5px 0;display:inline-flex;align-items:baseline;gap:6px}
.envios__bt::-webkit-details-marker{display:none}
.envios__bt::before{content:"▸";font-size:.85em;transition:transform .15s}
.envios[open] .envios__bt::before{transform:rotate(90deg)}
.envios__bt:hover{color:var(--orange-t)}
.envios__l{list-style:none;margin:6px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.envio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:var(--sup);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.envio__n{font-size:.85rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
.envio__q{font-size:.76rem;color:var(--muted-t);margin-right:auto;white-space:nowrap}
.envio__m{flex-basis:100%;font-size:.78rem;color:var(--bordo-t)}

.et--esp{background:var(--roxo)}
.et--rec{background:var(--bordo)}
.et--ok{background:var(--verde)}

/* a caixa laranja de conferência antes de anexar */
.confira{border:1.5px solid var(--orange);background:var(--orange-soft);
  border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.confira__r{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--lar-31);margin-bottom:5px}
.confira__n{font-size:1.15rem;font-weight:800;color:var(--lar-31)}
.confira__d{color:var(--lar-31);font-size:.88rem;margin-top:2px}
.confira__x{color:var(--lar-31);font-size:.85rem;margin-top:6px;font-style:italic}

/* o anexo do parceiro, na tela do prazo */
.anexos li.anexo--aguardando{background:var(--roxo-99);border-left:3px solid var(--roxo);
  padding-left:9px;border-radius:6px}
.anexos li.anexo--recusado{background:var(--bord-98);border-left:3px solid var(--bordo);
  padding-left:9px;border-radius:6px}
.anexos li.anexo--aceito{border-left:3px solid var(--verde);padding-left:9px}
.conferir{margin:8px 0 4px;padding:11px 13px;background:var(--sup);border:1px solid var(--line);
  border-radius:10px}
.conferir__f{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;align-items:center}
.conferir__f input[type=text]{flex:1;min-width:220px;margin-top:0;padding:8px 11px;
  font-size:.87rem}
.quem .sino__l--conferir{color:var(--roxo-52)}
@media(max-width:1220px){ .quem .sino__l--conferir{color:var(--roxo-84)} }
.dar-acesso{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.tit3{font-size:1rem;margin-bottom:10px}

/* ---- ajustes 4.1: a conferência precisa da linha inteira ---- */
.anexos li.anexo--aguardando,
.anexos li.anexo--recusado,
.anexos li.anexo--aceito{flex-wrap:wrap;padding:9px 11px;margin:2px 0}
.anexos li .conferir{flex-basis:100%;width:100%;margin-top:4px}
.conferir__f input[type=text]{min-width:260px}

/* o botão "ver o que enviei" na lista do parceiro */
.pd__acao a:not(.bt){display:inline-block;border:1.5px solid var(--line);
  border-radius:10px;padding:7px 14px;font-weight:600;font-size:.85rem;
  color:var(--navy-t);text-decoration:none;background:var(--sup)}
.pd__acao a:not(.bt):hover{border-color:var(--orange);color:var(--orange-t)}

/* o crachá do parceiro no topo */
.quem .cracha{background:var(--roxo);border-radius:999px;padding:3px 11px;
  font-size:.74rem;font-weight:700;color:#fff;white-space:nowrap}

/* =========================================================
   O CHAT FLUTUANTE  (4.2)
   Acompanha a pessoa em qualquer tela do painel.
   ========================================================= */
.ch-bolha{position:fixed;right:20px;bottom:20px;z-index:180;
  width:56px;height:56px;border-radius:99px;border:0;cursor:pointer;
  background:var(--navy);color:#fff;font-size:1.4rem;line-height:1;
  box-shadow:0 6px 22px rgba(10,28,84,.34);display:grid;place-items:center}
.ch-bolha:hover{background:var(--navy-2,#0E2569)}
.ch-bolha__n{position:absolute;top:-3px;right:-3px;background:var(--orange);
  color:#fff;border-radius:99px;min-width:22px;height:22px;padding:0 6px;
  font-size:.72rem;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--paper)}

.ch{position:fixed;right:20px;bottom:88px;z-index:181;width:340px;
  max-width:calc(100vw - 32px);height:470px;max-height:calc(100vh - 130px);
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 14px 44px rgba(10,28,84,.26);display:flex;flex-direction:column;
  overflow:hidden}
@media(max-width:520px){
  .ch{right:8px;left:8px;bottom:82px;width:auto;height:calc(100vh - 110px)}
  .ch-bolha{right:14px;bottom:14px}
}
.ch__barra{display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:var(--navy);color:#fff;flex-shrink:0}
.ch__t{font-weight:700;font-size:.94rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch__voltar,.ch__x{background:rgba(255,255,255,.14);border:0;color:#fff;
  border-radius:8px;cursor:pointer;font:inherit;font-size:.95rem;
  padding:3px 10px;line-height:1.3}
.ch__voltar:hover,.ch__x:hover{background:rgba(255,255,255,.28)}
.ch__sub{padding:8px 14px;background:var(--orange-soft);color:var(--lar-31);
  font-size:.79rem;border-bottom:1px solid var(--line);flex-shrink:0;
  line-height:1.45}
/* 9.9.3 — as mensagens fixadas, no topo do balão */
.ch__fix{flex-shrink:0;background:var(--sup);border-bottom:1px solid var(--line)}
.ch__fix[hidden]{display:none}
.ch__fix__l{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 11px;
  border-left:3px solid var(--navy);font-size:.78rem;cursor:pointer}
.ch__fix__l:hover{background:var(--paper)}
.ch__fix__c{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.35}
.ch__fix__q{font-weight:700;color:var(--navy-t);font-size:.72rem}
.ch__fix__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ch__fix__x{background:none;border:0;color:var(--muted-t);cursor:pointer;
  font-size:.82rem;padding:3px 5px;border-radius:6px;flex-shrink:0}
.ch__fix__x:hover{background:var(--paper);color:var(--bordo-t)}
.ch__fix__mais{display:block;width:100%;background:none;border:0;
  border-top:1px solid var(--line);color:var(--muted-t);cursor:pointer;
  font-size:.72rem;padding:5px 12px;text-align:left}
.ch__fix__mais:hover{background:var(--paper)}
.ch__fix__mais[hidden]{display:none}
.ch__corpo{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;
  background:var(--paper);display:flex;flex-direction:column;gap:8px}
.ch__vazio{color:var(--muted-t);font-size:.86rem;text-align:center;
  margin:auto;padding:16px;line-height:1.5}
.ch__vazio--erro{color:var(--bordo-t);font-weight:600}

.ch-contato{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--sup);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;cursor:pointer;font:inherit}
.ch-contato:hover{border-color:var(--orange)}
/* 9.9.5 — o contato do balão passou a ter DUAS LINHAS: nome e hora em
   cima, cargo embaixo, como já era na aba Chat. Numa linha só, um cargo
   comprido mais a hora nova espremiam o nome da pessoa até cortar. */
.ch-contato__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ch-contato__l{display:flex;align-items:baseline;gap:8px}
.ch-contato__n{font-weight:700;font-size:.9rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-contato__r{font-size:.74rem;color:var(--muted-t);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* 9.9.5 — a hora da última mensagem, no contato do balão. Entra junto
   com a ordem por conversa recente: lista ordenada por tempo sem marca
   de tempo parece embaralhada. */
.ch-contato__q{font-size:.72rem;color:var(--muted-t);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.ch-contato__b{background:var(--orange);color:#fff;border-radius:99px;
  min-width:20px;height:20px;padding:0 6px;font-size:.7rem;font-weight:800;
  display:grid;place-items:center}

/* ---------- 9.9.6 — Controle ajuizamento, no balão flutuante ----------
   O balão é estreito (340 px, e menos ainda no celular): cada estado é
   UMA LINHA com a sigla, quem está e os botões pequenos, e não o cartão
   de duas colunas da aba Chat. */
.ch-ctrl-cartao{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:11px;
  padding:10px 12px;cursor:pointer;font:inherit;margin-bottom:2px}
.ch-ctrl-cartao:hover{border-color:var(--orange)}
.ch-ctrl-cartao__i{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;
  place-items:center;background:var(--orange);font-size:.95rem}
.ch-ctrl-cartao__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ch-ctrl-cartao__n{font-weight:700;font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ch-ctrl-cartao__p{font-size:.74rem;color:var(--azul-80);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ch-ctrl-cartao__eu{background:var(--orange);color:#fff;border-radius:99px;
  padding:2px 8px;font-size:.68rem;font-weight:800;flex-shrink:0;white-space:nowrap}

.ch-uf{border:1px solid var(--line);border-radius:10px;background:var(--sup);
  padding:9px 11px;margin-bottom:7px;display:flex;flex-direction:column;gap:6px}
.ch-uf--livre{border-color:var(--verd-84)}
.ch-uf--minha{border-color:var(--orange)}
.ch-uf__l{display:flex;align-items:center;gap:8px}
.ch-uf__s{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  font-weight:800;font-size:.76rem;background:var(--navy);color:#fff;flex-shrink:0}
.ch-uf--livre .ch-uf__s{background:var(--verd-34)}
.ch-uf--minha .ch-uf__s{background:var(--orange)}
.ch-uf__sit{font-size:.82rem;color:var(--muted-t);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-uf__sit--livre{color:var(--verd-30);font-weight:700}
.ch-uf__sit--minha{color:var(--lar-38);font-weight:700}
.ch-uf__fila{font-size:.76rem;color:var(--muted-t)}
.ch-uf__bts{display:flex;gap:6px;flex-wrap:wrap}
.ch-ctrl-bt{font:inherit;font-size:.76rem;font-weight:700;padding:5px 10px;border-radius:8px;
  border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer}
.ch-ctrl-bt:hover{filter:brightness(1.15)}
.ch-ctrl-bt--fora{background:var(--sup);color:var(--navy-t)}
.ch-ctrl-bt[disabled]{background:var(--azul-95);border-color:var(--line);color:var(--azul-67);
  cursor:not-allowed;filter:none}
.ch-ctrl__erro{margin:0 0 9px;padding:8px 11px;border-radius:8px;background:var(--bordo);
  color:#fff;font-size:.82rem}
.ch-ctrl__hist{margin-top:12px}
.ch-ctrl__hist h4{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-t);margin:0 0 5px}
.ch-ev{display:flex;gap:8px;font-size:.79rem;padding:4px 0;border-bottom:1px solid var(--azul-95a)}
.ch-ev:last-child{border-bottom:0}
.ch-ev time{color:var(--muted-t);font-size:.74rem;flex-shrink:0;width:42px}
/* ---------- 9.9.6 — o pop-up de "é a sua vez" ----------
   Cobre a tela inteira, em qualquer página do painel, e só sai no
   botão. z-index acima de tudo o que o painel tem (a bolha é 181, o
   balão 181, os diálogos 200). */
.ch-pop{position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  background:rgba(10,28,84,.55);padding:20px;
  animation:ch-pop-entra .18s ease-out}
.ch-pop[hidden]{display:none}
@keyframes ch-pop-entra{from{opacity:0}to{opacity:1}}
.ch-pop__c{background:var(--sup);border-radius:22px;max-width:560px;width:100%;
  padding:44px 40px 34px;text-align:center;
  box-shadow:0 28px 80px rgba(10,28,84,.5);
  animation:ch-pop-sobe .2s ease-out}
@keyframes ch-pop-sobe{from{transform:translateY(14px) scale(.96)}to{transform:none}}
.ch-pop__uf{display:inline-grid;place-items:center;width:104px;height:104px;
  border-radius:28px;background:var(--orange);color:#fff;
  font-size:2.4rem;font-weight:800;letter-spacing:.02em;margin-bottom:20px}
.ch-pop__t{margin:0 0 12px;font-size:2rem;line-height:1.15;color:var(--navy-t)}
.ch-pop__p{margin:0 0 28px;font-size:1.05rem;line-height:1.55;color:var(--muted-t)}
.ch-pop__p b{color:var(--ink)}
/* 9.9.12 — quem fez a pergunta, no pop-up do chamado */
.ch-pop__quem{display:inline-block;margin-top:8px;font-size:.86rem;color:var(--muted-t)}
.ch-pop__bts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ch-pop__bt{font:inherit;font-size:1rem;font-weight:700;padding:14px 30px;
  border-radius:12px;border:1px solid var(--navy);background:var(--navy);
  color:#fff;cursor:pointer}
.ch-pop__bt:hover{filter:brightness(1.15)}
.ch-pop__bt--fora{background:var(--sup);color:var(--navy-t)}
.ch-pop__bt:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* Com o pop-up aberto, a página atrás não rola. */
body.ch-pop--on{overflow:hidden}
@media(max-width:520px){
  .ch-pop__c{padding:30px 20px 24px;border-radius:18px}
  .ch-pop__uf{width:84px;height:84px;border-radius:24px;font-size:2rem}
  .ch-pop__t{font-size:1.6rem}
  .ch-pop__p{font-size:.98rem}
  .ch-pop__bt{width:100%}
}

.ch-msg{max-width:82%;border-radius:12px;padding:8px 11px;font-size:.87rem;
  line-height:1.45;word-break:break-word}
.ch-msg--minha{align-self:flex-end;background:var(--navy);color:#fff;
  border-bottom-right-radius:4px}
.ch-msg--dele{align-self:flex-start;background:var(--sup);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.ch-msg__q{font-size:.68rem;margin-top:3px;opacity:.6}
/* A confirmação de visualização (8.6). Vai junto da hora, na mesma
   linha e no mesmo tamanho: é informação de rodapé da bolha, não um
   selo. Só aparece nas MINHAS mensagens, e só depois que o outro leu. */
.ch-msg__v{font-weight:700}

.ch__pe{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);
  background:var(--sup);flex-shrink:0}
/* O campo virou textarea na 8.6 (Shift+Enter pula linha). O seletor
   aceita os dois para não depender da ordem em que os arquivos sobem:
   um painel.css novo com um lib.php velho continua desenhando o campo
   direito, e vice-versa. */
.ch__pe textarea{resize:none;overflow-y:auto;line-height:1.35;font-family:inherit;
                 max-height:120px}
.ch__pe input,
.ch__pe textarea{flex:1;min-width:0;margin-top:0;padding:9px 12px;font-size:.88rem;
  border-radius:99px}

/* o botão de dúvida, na lista do parceiro e na tela do prazo */
.bt--duvida{background:var(--sup);color:var(--navy-t);border:1.5px solid var(--line)}
.bt--duvida:hover{border-color:var(--orange);color:var(--orange-t)}

/* a estrela do responsável principal */
.principal-e{color:var(--orange-t);font-size:.9rem;line-height:1}
.vira-principal{background:none;border:0;cursor:pointer;color:var(--line-t);
  font-size:.9rem;padding:2px 4px;line-height:1}
.vira-principal:hover{color:var(--orange-t)}
/* a transcrição que o administrador lê */
.transcricao{max-height:520px;overflow-y:auto}
.tr-msg{padding:9px 0;border-bottom:1px solid rgba(10,28,84,.06)}
.tr-msg:last-child{border-bottom:0}
.tr-msg__c{font-size:.83rem;margin-bottom:3px;display:flex;gap:9px;align-items:baseline}
.tr-msg__t{font-size:.9rem;line-height:1.5}

/* a estrela do responsável principal — 4.2 */
.principal-estrela{color:var(--orange-t);font-size:.82em;letter-spacing:0}

/* a conta de casos novos no menu — 4.3 */
.menu-conta{display:inline-grid;place-items:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:6px;border-radius:99px;background:var(--orange);
  color:#fff;font-size:.68rem;font-weight:800;vertical-align:1px}

/* ---------------------------------------------------------
   Cadastro de cliente pelo parceiro — 4.4
   --------------------------------------------------------- */
.recado--alerta{background:var(--lar-95a);border-color:var(--lar-57);color:var(--lar-25)}

.cad .caixa{margin-bottom:6px}
.cad .tit2{margin-top:22px}

/* as chavinhas do "o que fazer" */
.chave{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  border-bottom:1px solid rgba(10,28,84,.07);cursor:pointer;margin:0}
.chave:last-child{border-bottom:0}
.chave input[type=checkbox]{width:19px;height:19px;margin:1px 0 0;flex-shrink:0;
  accent-color:var(--orange);cursor:pointer}
.chave>span{font-weight:600;font-size:.95rem}
.chave>span small{display:block;font-weight:400;color:var(--muted-t);font-size:.83rem;
  margin-top:1px}

/* um grupo de documento */
.grupo-doc{padding:13px 0;border-bottom:1px solid rgba(10,28,84,.07)}
.grupo-doc:first-child{padding-top:0}
.grupo-doc:last-child{border-bottom:0;padding-bottom:0}
.grupo-doc__t{display:flex;align-items:center;gap:9px;font-weight:700;
  font-size:.93rem;margin-bottom:7px}
.grupo-doc__n{width:22px;height:22px;border-radius:99px;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-size:.74rem;font-weight:800;
  flex-shrink:0}
.grupo-doc__data{margin-top:8px;max-width:260px}
.grupo-doc__data small{display:block;color:var(--muted-t);font-size:.79rem;margin-top:3px}

/* ---------------------------------------------------------
   A aba Casos — 4.4
   --------------------------------------------------------- */
a.tira{text-decoration:none;color:inherit;transition:border-color .15s}
a.tira:hover{border-color:var(--navy)}
.tira--on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}

/* a duplicidade de CPF: entra, mas fica marcada */
.linha-dupl td{background:var(--bord-98)}
.tag--dupl{background:var(--bordo-soft);color:var(--bord-28);border:1px solid rgba(155,28,46,.3)}

.tag--nova{background:var(--orange);color:#fff}
.tag--analise{background:var(--roxo);color:#fff}
.tag--aceito{background:var(--verde);color:#fff}
.tag--recusado{background:var(--bordo);color:#fff}
.falta{color:var(--bordo-t);font-weight:700}

/* ---------------------------------------------------------
   Um caso por dentro — 4.4
   --------------------------------------------------------- */
.caso-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:0 26px;align-items:start}
@media(max-width:900px){.caso-grade{grid-template-columns:1fr}}

.ficha-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;
  font-size:.92rem}
.ficha-dl dt{color:var(--muted-t);white-space:nowrap}
.ficha-dl dd{margin:0;font-weight:600}

/* as senhas */
.senha-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid rgba(10,28,84,.07);font-size:.92rem}
.senha-l:last-of-type{border-bottom:0}
.senha-l b{min-width:74px}
.senha-l__pts{font-family:ui-monospace,Menlo,monospace;letter-spacing:.16em;
  color:var(--muted-t)}
.senha-l__clara{font-family:ui-monospace,Menlo,monospace;background:var(--verde-soft);
  color:var(--verd-21);padding:3px 9px;border-radius:7px;font-size:.9rem;
  user-select:all}
.cadeado{background:var(--verde-soft);color:var(--verd-21);border-radius:99px;
  padding:2px 9px;font-size:.7rem;font-weight:700;white-space:nowrap}

/* os grupos de documento */
.doc-g{padding:11px 0;border-bottom:1px solid rgba(10,28,84,.07)}
.doc-g:last-child{border-bottom:0;padding-bottom:0}
.doc-g__t{font-weight:700;font-size:.9rem;margin-bottom:6px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.doc-g--falta .doc-g__t{color:var(--muted-t);font-weight:600}
.doc-l{display:flex;gap:12px;align-items:flex-start;padding:7px 10px;
  border-radius:9px;background:var(--azul-99);margin-bottom:6px;flex-wrap:wrap}
.doc-l--aceito{background:var(--verd-98)}
.doc-l--recusado{background:var(--bord-98)}
.doc-l__n{flex:1;min-width:180px;font-size:.88rem;line-height:1.5}
.doc-l__n .miudo{font-size:.79rem}
.doc-l__a{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* a linha de conserto do documento (8.40): renomear e virar PDF.
   Ocupa a largura toda de propósito — embaixo da decisão, nunca ao
   lado dela. E reaproveita .anexo__renomear/.anexo__pdf da tela de
   tarefa: mesma aparência, mesmas palavras, nada novo para aprender. */
.doc-l__x{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* A COLUNA DOS DOCUMENTOS É ESTREITA, e o .anexo__renomear nasceu na
   tela de tarefa, que é larga. Lá o formulário aberto cabia; aqui ele
   media 821px dentro de uma linha de 583px e vazava PARA FORA do
   cartão — o campo e o "Salvar" sumindo pela direita. Três linhas
   consertam: o <details> pode encolher, ocupa a linha inteira quando
   aberto, e o campo acompanha a largura que sobrar. */
.doc-l__x .anexo__renomear{min-width:0;max-width:100%}
.doc-l__x .anexo__renomear[open]{flex:1 1 100%}
.doc-l__x .anexo__renomear input[type=text]{width:min(420px,100%)}

/* recusar com motivo, sem sair da tela */
.recusa summary{list-style:none;cursor:pointer;display:inline-block}
.recusa summary::-webkit-details-marker{display:none}
.recusa__f{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;align-items:center}
.recusa__f input[type=text]{flex:1;min-width:220px;margin-top:0;padding:7px 10px;
  font-size:.87rem}

.nova-tarefa{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.nova-tarefa label{flex:1;min-width:240px;margin:0}
.miudo a{color:var(--navy-t);border-bottom:1px dotted var(--navy);text-decoration:none}
.miudo a:hover{border-bottom-style:solid}

/* o agravo não pode sair da mesma cor do cumprimento — 4.7 */
/* o cumprimento já é roxo (.tag--cumpr); o agravo precisa de outra
   cor, senão a troca de palavra não adianta — de longe a tarja
   continuaria parecendo a mesma coisa */
.tag--agravo{background:var(--azul-94);color:var(--azul-25);border:1px solid rgba(11,74,114,.28)}
/* as caixas de fora-da-contagem, uma embaixo da outra */
.cumpr .cumpr__chave + .cumpr__chave,
.cumpr .dupla + .cumpr__chave,
.cumpr div[id^=caixa] + .cumpr__chave{margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(10,28,84,.08)}
#caixaAgravo{margin-top:8px;max-width:340px}

/* filtros de tribunal e sistema no DJEN — 5.0 */
.djen__abas--sec{margin-top:-4px;font-size:.86rem;align-items:center}
.djen__rot{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-t);font-weight:700;margin-right:2px}
.tag--sis{background:var(--azul-94);color:var(--azul-25);border:1px solid rgba(11,74,114,.28)}

/* A leitura por IA, na tela de conferência — versão 5.5.
   Cor própria de propósito: quem confere precisa distinguir num relance
   o que veio de regra fixa do que veio de modelo. */
.tag--ia{background:var(--roxo-95);color:var(--roxo-42-t);border-color:var(--roxo-92)}

/* O batimento da leitura por IA — versão 5.5.1.
   Verde discreto: é confirmação, não alarme. */
.caixa--ok{border-color:var(--verd-85);background:var(--verd-97)}
.caixa--erro{border-color:var(--bord-89);background:var(--bord-97)}
.filtro-rotulo{font-size:14px;color:var(--tinta-2);white-space:nowrap}

/* ---------- 5.7: a lista de réus no cadastro do processo ----------
   Ocupa a mesma coluna que o campo único ocupava, para o formulário não
   mudar de forma quando o processo tem um réu só — que é a regra. */
.reus{display:flex;flex-direction:column;gap:6px;min-width:0}
.reus__tit{font-size:.82rem;font-weight:700;color:var(--navy-t)}
.reus__tit small{font-weight:600;color:var(--muted-t)}
.reus__linha{display:flex;gap:6px;align-items:center}
.reus__linha input{flex:1;min-width:0;margin:0}
.reus__tirar{flex:none;padding:6px 10px;line-height:1;font-size:1rem}
/* o "+ outro réu" não é um campo: encolhe para a largura do texto e
   encosta à esquerda, senão parece mais um lugar para digitar */
#btMaisReu{align-self:flex-start}
.reus small{color:var(--muted-t);font-size:.78rem;line-height:1.4}
/* o mesmo respiro que um <label> deixa embaixo, para o bloco não colar
   no "Escritório parceiro" */
.reus{margin-bottom:14px}

/* =========================================================
   5.8 — a tela de fazer a inicial

   Ocupa a janela inteira e não rola: quem rola é cada metade, por
   conta própria. É isso que mantém o contrato à vista enquanto se
   desce o formulário — que é a razão de a tela existir.

   O prefixo é "inicial" e não "ini" porque .ini JÁ EXISTE no painel
   desde antes: é a bolinha de 21px do cartão do parceiro. Reaproveitar
   o nome fazia a tela inteira herdar width:21px;height:21px e encolher
   para o tamanho de uma bolinha — sem erro nenhum, só sumindo.
   ========================================================= */
.inicial{position:fixed;inset:0;top:var(--alto-topo,56px);display:flex;flex-direction:column;
  background:var(--paper);z-index:5}
.inicial__faixa{flex:none;background:var(--sup);border-bottom:1px solid var(--line);
  padding:10px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.inicial__faixa strong{color:var(--navy-t);font-weight:800;font-size:1rem;display:block}
.inicial__faixa .miudo{display:block;line-height:1.3}
.inicial__mod{margin-left:auto;display:flex;align-items:center;gap:10px}
.inicial__mod label{margin:0;font-size:.82rem;font-weight:700;color:var(--muted-t)}
.inicial__mod select{margin:0;padding:8px 12px;max-width:330px;font-size:.87rem;font-weight:600}

.inicial__divide{flex:1;display:flex;min-height:0}
.inicial__lado{min-width:0;display:flex;flex-direction:column;min-height:0}
.inicial__lado--doc{flex:0 0 50%;background:var(--azul-25a)}
.inicial__lado--form{flex:1;background:var(--paper);border-left:1px solid var(--line)}
.inicial__puxador{flex:none;width:9px;background:var(--paper);cursor:col-resize;position:relative;
  border-inline:1px solid var(--line)}
.inicial__puxador::after{content:'';position:absolute;inset:50% auto auto 50%;
  transform:translate(-50%,-50%);width:3px;height:38px;border-radius:9px;background:var(--line)}
.inicial__puxador:hover::after{background:var(--orange)}

.inicial__docbar{flex:none;background:var(--azul-20);color:rgba(255,255,255,.75);padding:7px 14px;
  display:flex;align-items:center;gap:12px;font-size:.82rem}
.inicial__docbar select{margin:0;padding:5px 10px;font-size:.82rem;background:rgba(255,255,255,.1);
  color:#fff;border-color:transparent;max-width:60%}
.inicial__docbar select option{color:var(--ink)}
.inicial__baixar{margin-left:auto;color:#fff;font-weight:600;text-decoration:none;font-size:.8rem}
.inicial__baixar:hover{color:var(--orange-t)}
.inicial__lado--doc iframe{flex:1;width:100%;border:0;background:var(--azul-25a)}

/* ---- o visor de páginas (5.9) ---- */
/* O "Abrir fora" usava margin-left:auto para ir ao fim da barra. Com o
   navegador de páginas e o botão de ler entrando DEPOIS dele, o auto
   passaria a empurrar os novos para fora da vista. A margem passa a ser
   do grupo de páginas, que é quem deve ficar à direita. */
.inicial__docbar .inicial__baixar{margin-left:0}
.inicial__pags{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.inicial__pags button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:6px;
  width:26px;height:26px;font-size:1rem;line-height:1;cursor:pointer;padding:0}
.inicial__pags button:hover:not(:disabled){background:var(--orange)}
.inicial__pags button:disabled{opacity:.3;cursor:default}
.inicial__pags b{color:#fff}

.inicial__foradatese{color:var(--lar-81);font-size:.74rem;max-width:280px;line-height:1.25}
.inicial__semler{margin-left:auto;color:var(--lar-81);font-size:.76rem;max-width:55%;
  text-align:right;line-height:1.25}
.inicial__btler{background:var(--orange);color:#fff;border:0;border-radius:6px;
  padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.inicial__btler:hover:not(:disabled){filter:brightness(1.08)}
.inicial__btler:disabled{opacity:.55;cursor:default}
/* o segundo botão é o mesmo, em tom mais discreto: ler a procuração é
   coisa que se faz uma vez por cliente, não a cada petição */
.inicial__btler--2{background:rgba(255,255,255,.16)}
.inicial__btler--2:hover:not(:disabled){background:rgba(255,255,255,.28);filter:none}

.inicial__rolopdf{flex:1;overflow:auto;background:var(--azul-25a);padding:14px;text-align:center}
.inicial__rolopdf canvas{max-width:100%;height:auto;background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.35);border-radius:2px}

/* Campo preenchido pela leitura: roxo, com o rótulo de onde saiu. Some
   quando a pessoa digita por cima — deixar roxo um valor já corrigido à
   mão mentiria sobre a origem dele. */
.inicial__campo--lido input,
.inicial__campo--lido textarea{border-color:var(--roxo-58);background:var(--roxo-98a)}
.inicial__deonde{display:block;margin-top:3px;font-size:.72rem;color:var(--roxo-58)}
.inicial__deonde b{font-weight:600}

.inicial__semdoc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:rgba(255,255,255,.7);font-size:.9rem;text-align:center;padding:20px}

.inicial__rolo{flex:1;overflow:auto;padding:18px 22px 12px}
.inicial__bloco{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px 2px;margin-bottom:14px}
.inicial__bloco>h3{margin:0 0 12px;font-size:.92rem;font-weight:800;color:var(--navy-t)}
.inicial__grade{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.inicial__grade .g2{grid-column:1/-1}
.inicial__campo{display:block;margin-bottom:12px;font-weight:600;color:var(--navy-t);font-size:.85rem}
.inicial__campo input,.inicial__campo textarea{margin-top:5px;padding:8px 11px;font-size:.88rem}
.inicial__campo textarea{min-height:56px;resize:vertical}

/* de onde veio cada campo — é o que diz o que conferir */
.inicial__campo--painel input,.inicial__campo--painel textarea{background:var(--verde-soft);
  border-color:rgba(18,161,80,.3)}
.inicial__campo--painel>span::after{content:'do painel';background:var(--verd-87);color:var(--verd-26)}
.inicial__campo--contrato>span::after{content:'ler no contrato';background:var(--orange-soft);
  color:var(--lar-34)}
.inicial__campo>span::after{margin-left:7px;font-size:.63rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:1px}
.inicial__campo input[readonly]{background:var(--azul-95b);color:var(--muted-t);font-weight:700}
.inicial__campo input[readonly]+span::after,
.inicial__campo:has(input[readonly])>span::after{content:'calculado';background:var(--azul-91a);
  color:var(--navy-t)}
.inicial__nota{display:block;margin-top:4px;font-size:.74rem;font-weight:500;color:var(--muted-t)}
.inicial__nota--erro{color:var(--bordo-t)}
/* A CADEIA EM DÚVIDA (8.5). Campo preenchido a partir de um dado que o
   painel completou ou de que a leitura duvidou. Âmbar, e não vermelho:
   vermelho quer dizer "está errado", e estes não estão — estão por
   conferir. Regra do Vitor, 02/09/2026: "se ficou em dúvida, coloque a
   cadeia de eventos em dúvida mas preenchido". */
.inicial__campo--duvida input,
.inicial__campo--duvida textarea{border-color:var(--lar-44);background:var(--amb-96)}
.inicial__nota--duvida{color:var(--lar-37);font-weight:600}
/* campo calculado que saiu negativo: some o cinza de "calculado" e
   entra o vermelho, porque aquele número não pode ir para a peça */
.inicial__campo input.inicial__ruim{background:var(--bordo-soft) !important;
  border-color:rgba(155,28,46,.45) !important;color:var(--bordo-t) !important}

.inicial__legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--muted-t);
  margin:0 0 14px;padding:10px 13px;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r)}
.inicial__c{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
  vertical-align:-1px}
.inicial__c--painel{background:var(--verd-87)}
.inicial__c--doc{background:var(--lar-88)}
.inicial__c--calc{background:var(--azul-91a)}

.inicial__img{display:flex;align-items:center;gap:12px;padding:12px 0 14px;flex-wrap:wrap}
.inicial__saiu{list-style:none;margin:8px 0 0;padding:0;font-size:.86rem}
.inicial__saiu li{padding:4px 0}
.inicial__saiu a{font-weight:700}
.inicial__faltou{margin:10px 0 0;font-size:.82rem;line-height:1.4}

.inicial__rodape{flex:none;background:var(--sup);border-top:1px solid var(--line);
  /* 90px de folga à direita: a bolha do chat do painel é fixa no canto
     inferior e mede 56px. Sem a folga ela cobre o "Gerar cálculo" —
     o botão está lá, inteiro, só escondido debaixo dela. */
  padding:9px 90px 9px 22px;display:flex;align-items:center;gap:8px;
  box-shadow:0 -6px 20px rgba(10,28,84,.05)}
/* A frase encolhe e some; os botões nunca. A metade do formulário é
   estreita, e media query não serve aqui porque ela mede a JANELA, e
   não o painel — numa tela de 1500px o painel tem 740. */
.inicial__onde{font-size:.78rem;color:var(--muted-t);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  /* 1 1 0 e não 0 1 auto: com base automática o texto se recusava a
     encolher e empurrava o "Gerar cálculo" para fora da tela. Assim
     a frase cede primeiro, e os botões nunca somem pela borda. */
  flex:1 1 0;min-width:0}
.inicial__saidas{flex:none;margin-left:auto}
.inicial__onde b{color:var(--navy-t);font-weight:700}
.inicial__saidas{display:flex;gap:7px}
@media (max-width:900px){
  .inicial__divide{flex-direction:column}
  .inicial__lado--doc{flex:0 0 40%}
  .inicial__puxador{display:none}
  .inicial__grade{grid-template-columns:1fr}
}

/* =========================================================
   Zona de arrastar documentos (6.4)

   O <input type="file"> fica escondido mas NÃO com display:none —
   campo assim some da navegação por teclado e do rótulo. Ele fica
   fora da tela, e o <label> continua sendo o botão de verdade.
   ========================================================= */
.solta{
  border:2px dashed var(--line);border-radius:var(--r);
  padding:14px;background:var(--paper);transition:border-color .15s, background .15s;
}
.solta--sobre{border-color:var(--orange);background:var(--orange-soft)}
.solta__campo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.solta__alvo{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 12px;text-align:center;cursor:pointer;color:var(--muted-t);
}
.solta__alvo b{color:var(--navy-t);font-size:1rem}
/* o label do painel vem em negrito por herança; a linha do meio e a
   das regras são secundárias e precisam dizer isso */
.solta__alvo span{font-weight:500;color:var(--muted-t);font-size:.88rem}
.solta__alvo small{font-size:.76rem;opacity:.85}
.solta--sobre .solta__alvo b{color:var(--orange-t)}

.solta__lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.solta__item{
  display:flex;align-items:center;gap:10px;background:var(--sup);
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:.86rem;
}
.solta__item--mau{border-color:var(--bordo);background:var(--bordo-soft)}
.solta__nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.solta__peso{color:var(--muted-t);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.solta__tirar{
  border:0;background:none;color:var(--muted-t);font-size:1.1rem;line-height:1;
  padding:0 3px;cursor:pointer;
}
.solta__tirar:hover{color:var(--bordo-t)}
.solta__aviso{
  margin:9px 0 0;padding:8px 11px;border-radius:8px;
  background:var(--bordo-soft);color:var(--bordo-t);font-size:.82rem;font-weight:600;
}
.solta__enviar{margin-top:10px}
.solta__enviar:disabled{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------
   O botão de ordem dos quadros (6.5)

   Fica ao lado de "Filtrar" e diz, em palavras, o que está
   valendo. Não muda de largura entre os dois estados mais do
   que o texto exige, para não empurrar a linha de filtros a
   cada clique.
   --------------------------------------------------------- */
.ordem{white-space:nowrap}
.ordem:hover{border-color:var(--tinta)}

/* ---------------------------------------------------------
   Renomear anexo (6.8)

   O "renomear" fica pequeno e discreto ao lado do nome: é
   ação rara, e ação rara com aparência de botão principal
   compete com o que a pessoa veio fazer, que é abrir o
   documento. O formulário só existe depois do clique.
   --------------------------------------------------------- */
.anexos li{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.anexo__nome{min-width:0;overflow-wrap:anywhere}

/* O <details> não pode crescer: como filho de um flex ele esticava e
   empurrava o ✕ para fora do campo de visão. Aberto, o formulário
   ocupa a linha de baixo — que é onde ele cabe sem espremer o nome
   do documento, que é o que a pessoa veio ler. */
.anexo__renomear{flex:none}
.anexo__renomear summary{cursor:pointer;font-size:.78rem;color:var(--muted-t);
  list-style:none;padding:2px 8px;border:1px solid var(--line);border-radius:99px;
  white-space:nowrap;display:inline-block}
.anexo__renomear summary::-webkit-details-marker{display:none}
.anexo__renomear summary:hover{color:var(--tinta);border-color:var(--tinta)}
.anexo__renomear[open] summary{color:var(--tinta);border-color:var(--tinta)}
.anexo__renomear form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:8px 0 4px;padding:10px 12px;background:var(--paper);border-radius:10px}
.anexo__renomear input[type=text]{width:min(420px,60vw);margin:0}
.anexo__renomear form small{flex-basis:100%;margin:0}

/* ---------------------------------------------------------
   A chavinha do "vale para todas as ações" (7.0)

   Estado à vista em palavras, não só em cor: "só nesta ação"
   / "em todas as ações do cliente". Chavinha que só muda de
   tom obriga a pessoa a lembrar qual tom significa o quê.
   --------------------------------------------------------- */
.anexo__compartilhar{flex:none;margin:0}
.anexo__chave{cursor:pointer;font-size:.78rem;white-space:nowrap;
  padding:2px 9px;border-radius:99px;border:1px solid var(--line);
  background:transparent;color:var(--muted-t)}
.anexo__chave:hover{border-color:var(--tinta);color:var(--tinta)}
.anexo__chave--on{background:var(--verd-93);border-color:var(--verd-73);color:var(--verd-24a);font-weight:600}
.anexo__chave--on:hover{border-color:var(--verd-24a);color:var(--verd-24a)}
.anexo__dedono{font-size:.78rem;color:var(--muted-t);font-style:italic}

/* ---------------------------------------------------------
   "virar PDF" — 8.36

   Mesmo tamanho e mesma discrição do "renomear" ao lado: é botão de
   manutenção, não é o que a pessoa veio fazer nesta tela. E some
   sozinho — só aparece em anexo que ainda é imagem, e da 8.36 em
   diante imagem nova não chega a existir.
   --------------------------------------------------------- */
.anexo__pdf{flex:none;margin:0}
.anexo__pdf button{cursor:pointer;font:inherit;font-size:.78rem;white-space:nowrap;
  padding:2px 9px;border-radius:99px;border:1px solid var(--line);
  background:transparent;color:var(--muted-t)}
.anexo__pdf button:hover{border-color:var(--tinta);color:var(--tinta)}

/* ---------------------------------------------------------
   A assinatura da petição (7.1)

   Fechada por padrão na lista de usuários: é cadastro que se
   faz uma vez e não se olha mais. O resumo diz o estado —
   "cadastrada" ou "só o nome" — para dar para varrer a coluna
   inteira sem abrir nada.
   --------------------------------------------------------- */
.assinatura-cel summary{cursor:pointer;font-size:.8rem;color:var(--muted-t);
  list-style:none;padding:2px 9px;border:1px solid var(--line);border-radius:99px;
  display:inline-block;white-space:nowrap}
.assinatura-cel summary::-webkit-details-marker{display:none}
.assinatura-cel summary:hover{border-color:var(--tinta);color:var(--tinta)}
.assinatura-cel summary.tem{background:var(--verd-93);border-color:var(--verd-73);color:var(--verd-24a);font-weight:600}
.assinatura-cel textarea{width:min(340px,80vw);font-family:inherit}
.assinatura-cel form{min-width:260px}

/* ---------------------------------------------------------
   O selo da nota fiscal (7.2)

   Verde com ✓, vermelho com ✕, cinza com — quando não se
   aplica. O símbolo carrega a informação junto com a cor:
   quem não distingue bem as duas ainda lê o sinal, e a
   coluna continua legível impressa em preto e branco.
   --------------------------------------------------------- */
.nf{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:99px;font-weight:700;font-size:.85rem;
  border:1px solid transparent;line-height:1}
.nf--ok{background:var(--verd-93);border-color:var(--verd-73);color:var(--verd-24a)}
.nf--falta{background:var(--bord-94);border-color:var(--bord-82);color:var(--bordo-t)}
.nf--na{background:transparent;color:var(--muted-t);font-weight:400}
button.nf{cursor:pointer}
button.nf:hover{filter:brightness(.94)}
.nf-form{display:inline;margin:0}

/* ---------------------------------------------------------
   A barra de gravar o réu (7.4)

   Âmbar e não vermelho: não é erro, é trabalho que ainda não
   foi feito — e que o próximo operador vai repetir se este
   não fizer.
   --------------------------------------------------------- */
.reu-guardar{background:var(--amb-89);border:1px solid var(--amb-65);border-radius:12px;
  padding:11px 14px;margin:-4px 0 14px;font-size:.88rem;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.reu-guardar b{color:var(--lar-31a)}
.reu-guardar .bt{margin-left:auto}

/* =========================================================
   O ASSISTENTE DA INICIAL (7.4)

   Ele cobre a tela toda de propósito. O que está atrás — o
   formulário — está sendo preenchido pelo assistente, e um
   painel lateral convidaria a mexer nos dois ao mesmo tempo,
   que é exatamente o jeito de perder o trabalho.

   Roxo é a cor da leitura por IA nesta tela desde a 5.5. Aqui
   ela reaparece nas páginas marcadas e nos campos lidos, para
   quem já usa o botão de ler reconhecer o mesmo sinal.
   ========================================================= */
.asst{position:fixed;inset:0;z-index:80;background:rgba(6,18,56,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(2px)}
.asst[hidden]{display:none}

.asst__caixa{background:var(--white);border-radius:var(--r-lg);width:100%;
  max-width:780px;max-height:94vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(6,18,56,.35);overflow:hidden}

.asst__topo{display:flex;align-items:flex-start;gap:14px;
  padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.asst__topo h2{margin:0;font-size:1.12rem}
.asst__topo p{margin:3px 0 0;font-size:.84rem;color:var(--muted-t)}
.asst__x{margin-left:auto;background:none;border:0;font-size:1.5rem;line-height:1;
  color:var(--muted-t);cursor:pointer;padding:0 2px}
.asst__x:hover{color:var(--ink)}
.asst__x[hidden]{display:none}

/* A TRILHA. Ela existe para responder "quanto falta" sem que
   ninguém precise perguntar — e para o passo cumprido ficar
   visivelmente cumprido, que é o que dá segurança de seguir. */
.asst__trilha{display:flex;gap:6px;padding:12px 24px;background:var(--paper);
  border-bottom:1px solid var(--line);font-size:.76rem;color:var(--muted-t)}
.asst__p{flex:1;padding:6px 8px;border-radius:8px;text-align:center;
  background:transparent;transition:.2s var(--ease)}
.asst__p.on{background:var(--navy);color:#fff;font-weight:600}
.asst__p.feito{color:var(--verde-t);font-weight:600}

.asst__corpo{padding:22px 24px;overflow-y:auto;flex:1}
.asst__corpo[hidden]{display:none}
.asst__corpo h3{margin:0 0 4px;font-size:1.02rem}
.asst__sub{margin:0 0 18px;font-size:.86rem;color:var(--muted-t)}
.asst__rot{margin:16px 0 8px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted-t)}

/* Linha de coisa JÁ RESOLVIDA — a tese, as assinaturas. Não é
   campo: é informação que o passo confirma sem pedir nada. */
.asst__linha{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.asst__linha .rot{width:34%;color:var(--muted-t);font-size:.86rem;flex:none}
.asst__linha .val{font-weight:600;font-size:.9rem}
.asst__linha .val small{display:block;font-weight:400;color:var(--muted-t);
  font-size:.76rem;margin-top:2px}

.asst__escolhas{display:flex;flex-direction:column;gap:8px}
.asst__escolha{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:.9rem}
.asst__escolha.on{border-color:var(--navy);background:var(--azul-97a)}
.asst__escolha input{accent-color:var(--navy)}

.asst__doc{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px}
.asst__doctopo{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.asst__doctopo b{font-size:.92rem}
.asst__doctopo select{flex:1;min-width:180px;padding:6px 10px;border-radius:9px;
  border:1px solid var(--line);font:inherit;font-size:.85rem;background:var(--white)}
.asst__tag{font-size:.76rem;color:var(--muted-t)}

/* AS MINIATURAS. Clicar na folha é o gesto que a equipe já faz
   no visor de hoje; digitar "1, 5, 6" seria aprender outro. */
.asst__minis{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
.asst__mini{flex:none;width:104px;cursor:pointer;text-align:center}
.asst__folha{position:relative;border:2px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--paper);aspect-ratio:1/1.41;
  display:flex;align-items:center;justify-content:center}
.asst__folha canvas,.asst__folha img{width:100%;height:100%;object-fit:contain;display:block}
.asst__marca{position:absolute;top:5px;right:5px;width:20px;height:20px;
  border-radius:99px;background:var(--roxo);color:#fff;font-size:.72rem;
  display:none;align-items:center;justify-content:center;font-weight:700}
.asst__mini.on .asst__folha{border-color:var(--roxo);
  box-shadow:0 0 0 3px rgba(91,63,168,.16)}
.asst__mini.on .asst__marca{display:flex}
.asst__n{font-size:.72rem;color:var(--muted-t);margin-top:5px}
.asst__mini.on .asst__n{color:var(--roxo-t);font-weight:700}

.asst__nota{font-size:.8rem;color:var(--muted-t);line-height:1.5;margin-top:10px}
.asst__aviso{font-size:.84rem;color:var(--bordo-t);background:var(--bordo-soft);
  border-radius:10px;padding:10px 12px;margin:10px 0 0}

/* OS PASSOS DO TRABALHO. Cada linha aparece quando começa e
   fecha quando termina: é a diferença entre "está travado" e
   "está indo", numa espera de quase um minuto. */
.asst__passos{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.asst__passo{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;
  padding:11px 13px;border-radius:11px;background:var(--paper)}
.asst__i{flex:none;width:22px;height:22px;border-radius:99px;background:var(--white);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700}
.asst__passo.pronto{background:var(--verde-soft)}
.asst__passo.pronto .asst__i{background:var(--verde);border-color:var(--verde);color:#fff}
.asst__passo.falhou{background:var(--bordo-soft)}
.asst__passo.falhou .asst__i{background:var(--bordo);border-color:var(--bordo);color:#fff}
.asst__t small{display:block;color:var(--muted-t);font-size:.78rem;margin-top:2px}
.asst__giro{display:block;width:11px;height:11px;border:2px solid var(--line);
  border-top-color:var(--navy);border-radius:99px;animation:asstgiro .7s linear infinite}
@keyframes asstgiro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.asst__giro{animation-duration:2.4s}}

.asst__escolher{margin:14px 0 10px;font-size:.88rem;line-height:1.5}
.asst__opc{display:block;margin:0 0 7px}

/* O RESULTADO. Verde quando não há o que apontar — e verde de
   verdade, porque conferente que sempre acha algo é ignorado. */
.asst__aponta{border-radius:12px;padding:13px 15px;font-size:.88rem;
  line-height:1.55;margin-bottom:12px}
.asst__aponta--ok{background:var(--verde-soft);border:1px solid var(--verd-77)}
.asst__aponta--olha{background:var(--amb-89);border:1px solid var(--amb-65)}
.asst__aponta ul{margin:8px 0 0;padding-left:18px}
.asst__aponta li{margin-bottom:5px}
.asst__aponta small{display:block;color:var(--muted-t);font-size:.78rem;margin-top:6px}

.asst__campos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.asst__campo{border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.asst__campo.alerta{border-color:var(--amb-65);background:var(--amb-96)}
.asst__cr{font-size:.74rem;color:var(--muted-t);display:flex;align-items:center;
  gap:6px;margin-bottom:3px}
.asst__pin{margin-left:auto;font-size:.66rem;font-weight:700;padding:1px 7px;
  border-radius:99px;background:var(--paper);color:var(--muted-t)}
.asst__campo.alerta .asst__pin{background:var(--amb-77);color:var(--lar-31a)}
.asst__cv{font-size:.88rem;font-weight:600;word-break:break-word}

.asst__pe{display:flex;align-items:center;gap:10px;padding:14px 24px;
  border-top:1px solid var(--line);background:var(--paper)}
.asst__pe .esq{margin-right:auto;font-size:.8rem;color:var(--muted-t)}
.asst__pe .bt[hidden]{display:none}

@media (max-width:620px){
  .asst{padding:0}
  .asst__caixa{max-width:none;max-height:100vh;border-radius:0}
  .asst__campos{grid-template-columns:1fr}
  .asst__linha{flex-direction:column;gap:2px}
  .asst__linha .rot{width:auto}
}

/* Botão desligado dentro do assistente: enquanto a fila anda, o
   "Voltar" existe mas não vale — e precisa PARECER que não vale, ou a
   pessoa clica, nada acontece e ela conclui que travou. */
.asst__pe .bt:disabled{opacity:.4;cursor:default;filter:none}

/* Etapa que não completou. Vermelho e não âmbar: âmbar é "olhe isto",
   vermelho é "isto não aconteceu" — e as duas coisas aparecem lado a
   lado no resultado. */
.asst__aponta--ruim{background:var(--bordo-soft);border:1px solid var(--bord-82a)}
.asst__aponta--ruim b{color:var(--bordo-t)}

/* =========================================================
   A TELA DE RÉUS (7.6)

   Lista longa de coisa que se preenche uma vez. O que ela
   precisa fazer bem é deixar VER o progresso e achar a
   próxima linha que vale a pena — daí o placar em cima e a
   ordem por peso, e não um formulário bonito.
   ========================================================= */
.reus-placar{display:flex;align-items:center;gap:18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:16px}
.reus-placar__n{font-size:2.3rem;font-weight:700;color:var(--navy-t);line-height:1;
  font-variant-numeric:tabular-nums;flex:none}
.reus-placar b{display:block;font-size:.95rem}
.reus-placar .miudo{display:block;margin-top:4px;line-height:1.5}

.reus-filtro{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.reus-filtro input[type=search]{flex:1;min-width:180px;padding:8px 12px;border-radius:10px;
  border:1px solid var(--line);font:inherit;font-size:.9rem}

.reus-lista{display:flex;flex-direction:column;gap:7px}
.reus-item{border:1px solid var(--line);border-radius:12px;background:var(--white)}
/* Faltando é ÂMBAR, não vermelho: não é erro, é trabalho que ainda não
   foi feito — a mesma cor da barra de gravar o réu na tela da inicial,
   para quem vê as duas reconhecer o mesmo sinal. */
.reus-item--falta{border-left:4px solid var(--amb-65)}
.reus-item>summary{display:flex;align-items:center;gap:12px;padding:11px 15px;
  cursor:pointer;list-style:none;font-size:.92rem}
.reus-item>summary::-webkit-details-marker{display:none}
.reus-item>summary::before{content:'▸';color:var(--muted-t);flex:none;font-size:.8rem}
.reus-item[open]>summary::before{content:'▾'}
.reus-item[open]>summary{border-bottom:1px solid var(--line)}
.reus-item__nome{font-weight:600;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.reus-item__n{color:var(--muted-t);font-size:.8rem;flex:none;
  font-variant-numeric:tabular-nums}
.reus-item__cnpj{font-size:.82rem;color:var(--verde-t);font-weight:600;flex:none;
  font-variant-numeric:tabular-nums}
.reus-item__aviso{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px;
  background:var(--amb-89);color:var(--lar-31a);flex:none}
.reus-item__corpo{padding:15px}
.reus-item__corpo .acoes{display:flex;align-items:center;gap:12px;margin-top:12px}

@media (max-width:640px){
  .reus-placar{flex-direction:column;align-items:flex-start;gap:8px}
  .reus-item>summary{flex-wrap:wrap}
  .reus-item__nome{flex:1 0 100%}
}

/* O contrato que é exceção à tese da tarefa (7.7). Discreto e presente:
   quem abre precisa saber por que os campos são de outra tese, e não
   pode parecer defeito. */
.inicial__excecao{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; margin-left:4px;
  background:var(--amb-89); color:var(--lar-31a); cursor:help;
}
/* O aviso de modelo de outra tese agora carrega um botão dentro. */
.inicial__foradatese{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.inicial__foradatese[hidden]{display:none}

/* O passo 1 do assistente ganhou grupos e o aviso de tese (7.7.1). */
.asst__grupo{
  margin:16px 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-t);
}
.asst__grupo:first-child{margin-top:0}
.asst__grupo small{
  display:block; text-transform:none; letter-spacing:0; font-weight:400;
  font-size:.8rem; margin-top:3px;
}
.asst__escolha span{display:block}
.asst__escolha small{
  display:block; font-size:.8rem; color:var(--muted-t); margin-top:2px; font-weight:400;
}
.asst__escolha.on small{color:var(--navy-t)}
/* âmbar, a mesma cor do selo de exceção: é a mesma ideia dita duas
   vezes, no lugar onde se decide e no lugar onde se confere */
/* Colado no rodapé da janela, e não no fim do corpo rolável: com treze
   modelos na lista, quem escolhe o de baixo não veria um aviso posto
   lá em cima. */
.asst__tesenova{
  margin:0; padding:11px 24px; font-size:.9rem; flex:none;
  background:var(--amb-89); border-top:1px solid var(--amb-65); color:var(--lar-31a); line-height:1.5;
}
.asst__tesenova[hidden]{display:none}

/* =========================================================
   A AJUDA ENTRE USUÁRIOS (7.9)

   Quem está ajudando alguém vê os cartões da outra pessoa junto com os
   seus. A marca não pode ser a borda esquerda: nos prazos ela já é a
   cor do vencimento, e roubá-la trocaria "vence hoje" por "é de
   outra pessoa" — a informação mais urgente do quadro.

   Então a marca é o FUNDO, e o nome de quem é fica em cor própria: o
   dado que importa quando os dois montes se misturam é justamente de
   quem é aquele cartão.
   ========================================================= */
.recado--ajuda{background:var(--roxo-96);border-color:var(--roxo-42);color:var(--roxo-35a)}
/* SÓ O FUNDO, e nunca a borda. A borda do cartão de ajuizamento já é o
   alarme de "parada há N dias", e a do cartão de prazo é a cor do
   vencimento: pintá-la de roxo apagaria os dois avisos mais urgentes do
   quadro para dizer uma coisa que o fundo e o nome já dizem. */
.cartao--ajuda{background:var(--roxo-98b)}
.cartao--ajuda .cartao-t__quem,
.cartao--ajuda .cartao-p__quem{color:var(--roxo-42-t);font-weight:700}
.cartao--ajuda .ini{background:var(--roxo-94);color:var(--roxo-42-t)}

h2#ajuda{margin-top:36px}

/* =========================================================
   MEUS CADASTROS — a tela do parceiro (8.2)

   A situação do caso vira pastilha. "Novo" precisava de uma cor
   PRÓPRIA: sem ela caía no `.pill` sem fundo, que na tela aparece como
   um texto solto no canto — parecia sobra de layout, não um estado.
   ========================================================= */
.pill--neutro{background:rgba(10,28,84,.08);color:var(--navy-t)}


/* =========================================================
   AJUIZAMENTO DO DIA (8.10)
   Calendário à esquerda, a tabela do dia à direita. Numa tela
   estreita eles empilham — e o calendário fica em cima, porque é
   por ele que se escolhe.
   ========================================================= */
.ajzd{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
@media (max-width:860px){ .ajzd{grid-template-columns:1fr} }

.ajzd__cal{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
           padding:15px 16px}
.ajzd__topo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ajzd__mes{flex:1;text-align:center;font-weight:700;color:var(--navy-t);font-size:.95rem}
.ajzd__cal .seta{display:grid;place-items:center;width:28px;height:28px;
                 border:1px solid var(--line);border-radius:6px;color:var(--muted-t);
                 text-decoration:none;font-size:1rem;line-height:1}
.ajzd__cal .seta:hover{background:var(--paper);color:var(--navy-t)}

.ajzd__grade{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ajzd__dow{text-align:center;font-size:.66rem;font-weight:700;color:var(--muted-t);
           text-transform:uppercase;letter-spacing:.04em;padding:3px 0}

/* O dia é quadrado de propósito: um mês inteiro tem de caber sem
   rolagem, senão o calendário deixa de responder num relance. */
.ajzd__dia{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
           justify-content:center;gap:1px;border-radius:7px;font-size:.82rem;
           color:var(--muted-t);text-decoration:none;border:1px solid transparent}
.ajzd__dia--fora{visibility:hidden}
.ajzd__dia--tem{background:var(--paper);border-color:var(--line);color:var(--ink);
                font-weight:600}
.ajzd__dia--tem:hover{border-color:var(--navy);color:var(--navy-t)}
.ajzd__dia--on,.ajzd__dia--on:hover{background:var(--navy);border-color:var(--navy);
                                    color:#fff}
/* Quantos foram ajuizados no dia, dentro do próprio quadradinho. É o
   que faz o calendário responder ANTES de alguém clicar. */
.ajzd__n{font-size:.6rem;font-weight:700;color:var(--orange-t);line-height:1}
.ajzd__dia--on .ajzd__n{color:#fff}

.ajzd__lista{min-width:0}
.ajzd__nada{padding:30px;text-align:center;color:var(--muted-t);font-size:.9rem;
            background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.ajzd__proc{color:var(--navy-t);font-weight:600;white-space:nowrap}

/* A TABELA ROLA DE LADO EM VEZ DE QUEBRAR EM CIMA.

   Vi no retrato: sem largura mínima, "MARIA APARECIDA SANTANA PEREIRA
   DOS SANTOS" virava quatro linhas, a linha ficava com a altura de um
   parágrafo, e vinte processos não cabiam numa tela. Numa lista que
   existe para ser corrida com o olho, altura custa mais que rolagem.

   O `.tabela-rolo` em volta já rola; faltava dizer à tabela que ela
   pode ser mais larga que ele. */
.ajzd .tabela{min-width:900px}
.ajzd .tabela td{padding-top:10px;padding-bottom:10px}
/* Os nomes ficam em UMA linha, com reticências quando não couberem —
   quem precisa do nome inteiro clica no processo. */
.ajzd__nome{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap}

/* NOTEBOOK ESTREITO: O CALENDÁRIO SOBE, A TABELA FICA INTEIRA.

   A tabela mede 1084px — é o que seis colunas custam, e o número do
   processo sozinho pede 250 deles. Lado a lado com o calendário, ela
   só cabe a partir de 1440px de tela. Num notebook de 1180 as três
   últimas colunas (tese, parceiro, ajuizado por) ficavam fora da
   vista, e ele pediu as seis.

   Abaixo de 1280, então, o calendário deixa de ser coluna e vira
   faixa em cima: escolher o dia é um gesto que acontece uma vez, ver
   a tabela é o que a pessoa faz o tempo todo. Quem tem tela larga
   continua com os dois lado a lado. */
@media (max-width: 1279px) {
  .ajzd{grid-template-columns:1fr}
  /* A MESMA LARGURA DA COLUNA, e não o que sobrar da tela: solto, o
     calendário estica os quadradinhos e come meia página de altura
     antes de a tabela começar. Empilhado ele fica igualzinho ao de
     cima, só que em cima. */
  .ajzd__cal{max-width:290px}
}
.ajzd__vazio{color:var(--line-t)}

/* 9.7 — o representante legal na tarefa */
.rep-t{margin:4px 0 14px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r)}
.rep-t__chk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;margin:0;cursor:pointer}
.rep-t__chk input{width:auto;margin:0}
.rep-t__chk small{font-weight:400}
.rep-t #caixaRepT{margin-top:10px}
.rep-t .dupla{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:780px){.rep-t .dupla{grid-template-columns:1fr}}

/* 9.7 — o recado da ação, flutuando no pé da tela quando a tela
   voltou para onde estava e o recado ficou lá em cima */
.recado-flutua{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:900;
  margin:0;max-width:min(560px,calc(100vw - 32px));padding-right:40px;
  box-shadow:0 8px 28px rgba(10,28,84,.22);animation:recadoEntra .22s ease-out}
.recado-flutua__x{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:6px}
.recado-flutua--sai{opacity:0;transition:opacity .5s}
@keyframes recadoEntra{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.recado-flutua{animation:none}}

/* 9.7 — audiência com ADV de fora: petróleo, cor que nenhum outro tipo usa */
.pt--adv{background:var(--teal-29)}
.dia--sel .pt--adv{background:var(--teal-60)}
.et--adv{background:var(--teal-29)}
.comp--adv{border-left-color:var(--teal-29)}
.tipo--adv:has(input:checked){background:var(--teal-29);border-color:var(--teal-29)}

/* 9.7 — incluir documento no caso (equipe) */
.incluir-doc{display:grid;gap:10px}
.incluir-doc label{display:grid;gap:4px;margin:0;font-weight:600;font-size:.9rem}
.incluir-doc input[type=file]{max-width:100%}
.incluir-doc .bt{justify-self:start}

/* 9.7 — o campo escondido da zona "solte aqui" vazava 286px para a
   direita (e fazia a tela da tarefa rolar para o lado, pior no
   celular): a regra geral de input[type=file] ganhava da de 1px por
   especificidade, e o position:absolute não tinha pai posicionado. */
.solta{position:relative}
.solta input.solta__campo{position:absolute;left:0;top:0;width:1px;height:1px;
  padding:0;margin:0;border:0;opacity:0;pointer-events:none;overflow:hidden}

/* 9.8 — a citação e as reações na leitura do administrador */
.tr-msg__cit{font-size:.8rem;color:var(--muted-t);border-left:3px solid var(--line);
  padding:2px 8px;margin:2px 0 4px;border-radius:0 6px 6px 0;background:var(--paper);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:560px}
.tr-msg__reac{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tr-msg__reac span{border:1px solid var(--line);border-radius:10px;padding:0 7px;font-size:.78rem;background:var(--paper)}

/* 9.9 — a foto de perfil */
.av-foto{border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-block;vertical-align:middle;
  background:var(--paper)}
.av-foto--ini{display:inline-flex;align-items:center;justify-content:center;color:#fff;
  font-weight:700;letter-spacing:.02em;line-height:1}
/* a bolinha entra na mesma vaga que o nome ocupava sozinho: as regras
   de corte com "…" que existiam em .quem>span passam a valer aqui */
.quem__eu{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;
  min-width:0;max-width:210px}
.quem__eu span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quem__eu:hover{color:var(--orange-t)}
@media(max-width:1300px){.quem__eu{max-width:150px}}
@media(max-width:900px){
  /* na gaveta do celular sobra largura: nome inteiro, ao lado da foto */
  .quem__eu{max-width:none;padding:0 12px 8px}
  .quem__eu span{min-width:0;overflow:visible;text-overflow:clip;white-space:normal;
    color:rgba(255,255,255,.75)}
}
.foto-eu{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.foto-eu__c{flex:1;min-width:240px}
.foto-eu__campo{display:block;font-weight:600;font-size:.9rem}
.usuarios-foto{display:flex;align-items:center;gap:10px}

/* 9.9.2 — a situação "Aguardando" do caso */
.tag--aguardando{background:var(--roxo);color:#fff}
.pill--espera{background:var(--roxo-95a);color:var(--roxo-39)}


/* =========================================================
   9.9.23 — TEMA ESCURO

   Uma coisa só: os nomes valendo outra coisa. Nenhuma regra de layout
   muda, nenhuma tela é reescrita. Tirar o `data-tema` do <html> devolve
   o painel de antes, inteiro, no mesmo instante.

   TRÊS CUIDADOS QUE ESTÃO AQUI DENTRO

   1. A MATIZ NÃO MUDA. O roxo continua roxo, o âmbar continua âmbar. O
      que muda é o quanto cada um é claro. Painel invertido de verdade
      faz o navy da marca virar azul-bebê.

   2. QUEM É FUNDO NÃO CLAREIA, QUEM É TINTA NÃO ESCURECE. As cores que
      fazem os dois papéis têm a irmã `-t`, e é ela que as telas usam no
      `color:`. A barra do topo segue navy; o título que era navy vira
      quase branco.

   3. `@media screen`: o papel é branco nos dois temas. A impressão nunca
      vê este bloco, e o `@media print` continua mandando lá embaixo.
   ========================================================= */
@media screen{
  :root[data-tema="escuro"]{
    /* a espinha: fundo da página, superfície, tinta e linha */
    --sup:#151B31;
    --paper:#0B1020;
    --white:#151B31;
    --ink:#E8EBF6;
    --muted:#9AA3C4;
    --line:rgba(255,255,255,.14);
    --navy:#1B2A63;
    --navy-2:#24356F;
    --navy-deep:#070C1A;
    --orange:#F55E2E;
    --orange-soft:#40210F;
    --verde:#0E9048;
    --verde-soft:#0E3222;
    --bordo:#C43A50;
    --bordo-soft:#3A1219;
    --navy-t:#E8EBF6;
    --muted-t:#9AA3C4;
    --orange-t:#FF8A5F;
    --verde-t:#4FD98C;
    --bordo-t:#FF8497;
    --line-t:rgba(255,255,255,.35);
    --sup-2:#1C2340;
    --roxo:#6A4FC0; --roxo-t:#BCA9F5;
    /* sombra no escuro é preto, não navy claro */
    --sombra-1:rgba(0,0,0,.45);

    /* cinzas */
    --neu-12:#E8EBF6;
    --neu-13:#1e2126;
    --neu-13a:#1e1f22;
    --neu-13b:#1f2023;
    --neu-15:#E8EBF6;
    --neu-18:#2b2d31;
    --neu-21:#313338;
    --neu-22:#35373c;
    --neu-24:#E8EBF6;
    --neu-27:#404249;
    --neu-46:#6b7280;
    --neu-66:#a3a6ad;
    --neu-85:#242C4C;
    --neu-91:#242C4C;

    /* azuis */
    --azul-10:#0E162F;
    --azul-20:#232741;
    --azul-24:#A4ABD6;
    --azul-25:#88C9F2;
    --azul-25a:#2E3350;
    --azul-25b:#34344A;
    --azul-31:#A4ACD6;
    --azul-45:#336CB1;
    --azul-65:#5865f2;
    --azul-66:#212E63;
    --azul-67:#8E9BCC;
    --azul-73:#313954;
    --azul-80:#B8C1DF;
    --azul-81:#BBC3E1;
    --azul-87:#d7dbe6;
    --azul-89:#181F3A;
    --azul-89a:#dfe2e8;
    --azul-90:#e1e4ec;
    --azul-91:#D9E0F5;
    --azul-91a:#18213A;
    --azul-94:#182A3A;
    --azul-94a:#ebedf2;
    --azul-95:#1B2136;
    --azul-95a:#3B497D;
    --azul-95b:#1A2437;
    --azul-95c:#f2f3f5;
    --azul-95d:#212130;
    --azul-96:#1E2234;
    --azul-96a:#f3f4f7;
    --azul-97:#18203A;
    --azul-97a:#18203A;
    --azul-97b:#181E3A;
    --azul-98:#18213A;
    --azul-99:#18233A;
    --azul-99a:#18233A;
    --azul-99b:#212131;

    /* azul-esverdeados */
    --teal-26:#1E6761;
    --teal-29:#216C73;
    --teal-31:#206A7E;
    --teal-60:#215F63;

    /* roxos */
    --roxo-35:#B190EA;
    --roxo-35a:#B390E9;
    --roxo-37:#AE90E9;
    --roxo-38:#AEA2D7;
    --roxo-39:#AD9ADF;
    --roxo-42:#B38FEB;
    --roxo-45:#5B3FA8;
    --roxo-51:#B19AE0;
    --roxo-52:#B0A1D9;
    --roxo-58:#9C6CEF;
    --roxo-60:#332163;
    --roxo-73:#322163;
    --roxo-84:#C9B8F5;
    --roxo-87:#46298E;
    --roxo-92:#3B298E;
    --roxo-94:#24183A;
    --roxo-95:#1E183A;
    --roxo-95a:#21183A;
    --roxo-96:#22183A;
    --roxo-97:#22183A;
    --roxo-98:#22183A;
    --roxo-98a:#29183A;
    --roxo-98b:#23183A;
    --roxo-99:#20183A;

    /* verdes */
    --verd-20:#89F1B6;
    --verd-21:#88F1B7;
    --verd-24:#88F2B6;
    --verd-24a:#92E7B2;
    --verd-26:#88F2B6;
    --verd-30:#95E5BC;
    --verd-34:#2E7D51;
    --verd-62:#7fbf9a;
    --verd-73:#298E4E;
    --verd-77:#2C8B5A;
    --verd-84:#3D7A58;
    --verd-85:#298E4D;
    --verd-87:#183A26;
    --verd-93:#183A23;
    --verd-97:#183A22;
    --verd-98:#183A23;
    --verd-99:#183A23;

    /* âmbares */
    --amb-25:#F2D488;
    --amb-31:#F2D288;
    --amb-38:#97782C;
    --amb-65:#8E7729;
    --amb-77:#635621;
    --amb-85:#634E21;
    --amb-89:#3A3318;
    --amb-90:#302C21;
    --amb-92:#3A3118;
    --amb-96:#3A3318;

    /* laranjas */
    --lar-25:#F2CA88;
    --lar-27:#EEA68B;
    --lar-31:#EFA58A;
    --lar-31a:#F2B088;
    --lar-34:#F1A288;
    --lar-34a:#8C6723;
    --lar-37:#F2B688;
    --lar-38:#F2A288;
    --lar-42:#AA7D2B;
    --lar-44:#AD7432;
    --lar-56:#e0a33c;
    --lar-57:#CE9E57;
    --lar-81:#F6D7AA;
    --lar-88:#3A2218;
    --lar-91:#3A2118;
    --lar-95:#3A2E18;
    --lar-95a:#3A2D18;
    --lar-99:#3A2318;

    /* vermelhos */
    --bord-25:#621C27;
    --bord-28:#EC8E9C;
    --bord-29:#73212E;
    --bord-36:#DD9DA8;
    --bord-37:#962525;
    --bord-39:#EA9E8F;
    --bord-42:#AA2B2B;
    --bord-46:#c0392b;
    --bord-53:#CF5F3D;
    --bord-59:#ed4245;
    --bord-72:#ff7b72;
    --bord-82:#8E2929;
    --bord-82a:#892F3F;
    --bord-85:#F7BBC3;
    --bord-89:#8E2929;
    --bord-94:#3A1818;
    --bord-95:#3A1E18;
    --bord-97:#3A1818;
    --bord-98:#3A181C;
  }
  /* O que o navegador desenha sozinho — barra de rolagem, seta do
     select, calendário do campo de data — segue este aviso. Sem ele a
     tela fica escura com peças brancas do sistema no meio. */
  :root[data-tema="escuro"]{color-scheme:dark}
}

/* =========================================================
   9.9.23 — O BOTÃO DO TEMA

   Mora na barra do topo, entre "Avisos" e "Senha". Tem o tamanho e a cor
   daqueles links de propósito: não é peça importante da tela, é um
   interruptor que se usa uma vez por dia.

   As duas figuras vivem no HTML e o CSS escolhe qual aparece. Trocar o
   desenho por JavaScript faria a lua piscar no instante do carregamento
   de quem já está no escuro.
   ========================================================= */
.tema-bt{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;padding:4px 2px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.72);line-height:1;
}
.tema-bt:hover{color:#fff}
.tema-bt svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tema-bt__lua{fill:currentColor;stroke:none}
/* no claro aparece a lua (o que o clique VAI fazer); no escuro, o sol */
.tema-bt__sol{display:none}
:root[data-tema="escuro"] .tema-bt__lua{display:none}
:root[data-tema="escuro"] .tema-bt__sol{display:inline}
.tema-bt:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* No login não existe barra navy: ali o botão fica solto num canto e
   precisa da tinta da página para ser visto nos dois temas. */
.tema-bt--login{
  position:fixed;right:16px;bottom:14px;color:var(--muted-t);
  background:var(--sup);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;
}
.tema-bt--login:hover{color:var(--ink);border-color:var(--muted)}

/* No celular a gaveta é uma coluna de links empilhados: o botão entra na
   fila com eles, alinhado à esquerda como os outros. */
@media(max-width:1220px){
  /* o `:not` é para o do login não virar uma faixa de ponta a ponta: ele
     é fixo num canto e não está na fila da gaveta. */
  .tema-bt:not(.tema-bt--login){width:100%;justify-content:flex-start;padding:10px 12px}
}

/* =====================================================================
   9.9.26 — O PONTO

   Tudo aqui é montado em cima dos nomes de cor da 9.9.23, e por isso o
   modo escuro sai de graça: `--azul-94`, `--orange-soft`, `--verde-t` e
   companhia já têm o par escuro definido lá em cima.

   A única cor literal é o branco DENTRO do bloco azul de bater ponto —
   o mesmo caso do `.topo`: tinta sobre fundo escuro que não vira fundo
   em tema nenhum, e que por isso não ganhou nome na 9.9.23.
   ===================================================================== */

/* ---------- o alto da tela de bater ---------- */
.pt-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:22px;margin-bottom:22px;align-items:start}
@media(max-width:880px){.pt-topo{grid-template-columns:1fr}}

.pt-bater{background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:26px 24px;display:grid;gap:20px;align-content:start}
.pt-relogio{text-align:center}
.pt-relogio b{display:block;font-size:3.2rem;font-weight:800;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.pt-relogio small{display:block;color:rgba(255,255,255,.64);font-size:.82rem;margin-top:8px}
.pt-selo{display:inline-block;margin-top:12px;background:rgba(255,255,255,.14);
  border-radius:999px;padding:5px 13px;font-size:.72rem;font-weight:700;
  color:rgba(255,255,255,.88);letter-spacing:.04em}
.pt-form{text-align:center;margin:0}
.pt-bt{width:100%;max-width:340px;padding:17px 22px;font-size:1.06rem}
.pt-local{margin:12px 0 0;font-size:.78rem;color:rgba(255,255,255,.6);min-height:1.2em}
.pt-trava{margin:0;text-align:center;color:rgba(255,255,255,.72);font-size:.88rem}

.pt-hoje{list-style:none;margin:0 0 14px;padding:0}
.pt-hoje li{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.pt-hoje li:last-child{border-bottom:0}
.pt-hoje b{font-variant-numeric:tabular-nums;font-weight:800;min-width:46px}

.pt-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 0}

/* ---------- cabeça do espelho ---------- */
.pt-cabeca{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:18px}
.pt-h2{margin:0;font-size:1.3rem;letter-spacing:-.02em;color:var(--navy-t)}
.pt-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.pt-troca{margin:0 0 16px}
.pt-troca label{display:inline-flex;align-items:center;gap:8px;margin:0}
.pt-troca .campo{width:auto;min-width:220px}

/* ---------- a tabela do mês ---------- */
.tabela--ponto th,.tabela--ponto td{padding:9px 12px;vertical-align:top}
.tabela--ponto td{font-variant-numeric:tabular-nums}
.pt-dia{white-space:nowrap}
.pt-dia b{font-weight:800}
.pt-dia small{display:block;font-size:.7rem;color:var(--muted-t);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.pt-batidas{min-width:190px}
.pt-b{display:inline-block;margin:0 7px 3px 0;font-weight:700;white-space:nowrap;
  border-bottom:1px dotted var(--line);cursor:help}
.pt-b--corr{color:var(--orange-t)}
.pt-anulada{color:var(--muted-t);margin-right:7px;text-decoration-thickness:1px}
.pt-pin{font-style:normal;font-weight:800;margin-left:2px;vertical-align:super;
  font-size:.9em;line-height:0}
.pt-pin--off{color:var(--muted-t)}
.pt-pin--fora{color:var(--bordo-t)}
.pt-obs{min-width:150px}
.pt-obs .tag{margin:0 4px 3px 0}
.pt-legenda{margin:12px 0 0;line-height:1.7}
.pt-motivo{max-width:380px}
.pt-l-parado td{background:var(--sup-2)}
.pt-pos{color:var(--verde-t);font-weight:800}
.pt-neg{color:var(--bordo-t);font-weight:800}

/* as duas etiquetas novas. Saem dos mesmos pares que as outras usam,
   para não nascer uma terceira linguagem de cor na mesma tela. */
.tag--parado{background:var(--azul-94);color:var(--navy-t)}
.tag--ausencia{background:var(--orange-soft);color:var(--lar-34)}

.recado--trava{border-left:4px solid var(--navy)}

/* ---------- pedir correção ---------- */
.pt-pedir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@media(max-width:760px){.pt-pedir{grid-template-columns:1fr}}
.pt-larga{grid-column:1/-1}

/* ---------- decidir correção ---------- */
.pt-decidir{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  margin-bottom:12px;background:var(--sup-2)}
.pt-decidir__quem{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pt-decidir__motivo{margin:7px 0 11px;font-style:italic;color:var(--muted-t)}
.pt-decidir__acao{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pt-decidir__acao .campo{flex:1 1 240px;margin:0}

/* ---------- formulários curtos em linha ---------- */
.pt-emlinha{display:inline;margin:0}
.pt-linha{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.pt-linha .campo{width:auto;margin:0;flex:0 1 auto}
.pt-fechar-todos{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0 0}
.campo--pq{width:auto;max-width:150px}

/* =====================================================================
   9.9.27 — JUNTAR RÉUS DUPLICADOS

   Em cima dos nomes de cor da 9.9.23, como o bloco do ponto: o modo
   escuro sai de graça.
   ===================================================================== */
.reus-grupo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-bottom:12px}
.reus-grupo__l{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.reus-grupo__l:last-child{border-bottom:0}
.reus-grupo__l--alvo{background:var(--sup-2)}
.reus-grupo__l b{flex:1 1 240px;min-width:0}
.reus-grupo__l .miudo{flex:0 0 auto;white-space:nowrap}
.reus-grupo__l .bt,.reus-grupo__l .tag{margin-left:auto}

.reus-fundir__par{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:1.05rem;margin:4px 0 16px}
.reus-fundir__de{font-weight:700;color:var(--muted-t);text-decoration:line-through}
.reus-fundir__seta{font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-t)}
.reus-fundir__para{font-weight:800;color:var(--navy-t)}
.reus-fundir__acao{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.reus-fundir__palavra{margin:0}
.reus-fundir__palavra .campo{width:auto;max-width:170px;margin:0}

.reus-mao{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.reus-mao label{margin:0;flex:1 1 240px}
.reus-mao .campo{margin:0}
.reus-mao__seta{font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-t);padding-bottom:12px}

.reus-emlinha{display:inline;margin:0}
.reus-desfeita td{opacity:.55}

/* =========================================================
   9.9.31 — A TARJA DO CLIENTE

   Uma faixa, não duas. O que o escritório marcou (falecido, não
   ajuizar, cancelou) e o que a Receita registrou saem no MESMO
   quadro, uma linha cada. Duas tarjas vermelhas empilhadas dizendo
   quase a mesma coisa é o jeito mais rápido de ensinar a equipe a
   pular as duas.

   Mora no painel.css, e não no cpf.css, de propósito: a `.sit-tarja`
   ficou presa numa tela só porque a folha dela não é carregada pelo
   cabecalho(). Esta precisa valer em qualquer tela que mostre um CPF.

   As cores saem de `--bordo`, `--bordo-soft` e `--bord-28`, as três
   trocadas pelo tema escuro — o mesmo trio do `.recado--erro`.
   ========================================================= */
.tarja{
  border:1.5px solid var(--bordo);background:var(--bordo-soft);
  border-radius:var(--r);padding:12px 16px;margin:0 0 18px;
  display:flex;flex-direction:column;gap:7px;position:relative;
}
.tarja__l{
  margin:0;font-size:.88rem;line-height:1.5;font-weight:600;color:var(--bord-28);
  padding-right:92px;
}
.tarja__l b{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.tarja__l i{font-style:normal;font-weight:700}
.tarja__q{display:block;font-weight:500;font-size:.78rem;opacity:.8;margin-top:2px}
.tarja__ir{
  position:absolute;top:12px;right:16px;
  color:var(--bord-28);text-decoration:underline;white-space:nowrap;
  font-size:.82rem;font-weight:700;
}
/* No celular o link sai de cima do texto e vira a última linha: a
   390px, `padding-right:92px` comia metade da frase. */
@media (max-width:620px){
  .tarja__l{padding-right:0}
  .tarja__ir{position:static;align-self:flex-start;margin-top:2px}
}

/* 9.9.33 — os botões de abrir e baixar, dentro do cartão de documento */
.doc__ab{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.doc__ab .bt{font-size:.74rem;padding:4px 9px}

/* =========================================================
   9.9.35 — O POP-UP DO ADMINISTRADOR

   Tudo em cima dos tokens do painel: o tema escuro sai de graça, sem
   um bloco só dele. A única regra própria do escuro é o véu, que
   precisa ser mais fundo para o cartão continuar se destacando de um
   fundo que já é escuro.
   ========================================================= */
.pop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:18px;background:rgba(6,18,56,.74);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
:root[data-tema="escuro"] .pop{background:rgba(3,6,16,.82)}

.pop__cx{width:100%;max-width:520px;background:var(--sup);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 24px 70px rgba(6,18,56,.45)}

.pop__topo{background:var(--navy);padding:13px 18px}
.pop__sel{display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 11px}

.pop__corpo{padding:18px}
.pop__de{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.pop__ini{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:700;font-size:.82rem;
  display:flex;align-items:center;justify-content:center}
.pop__de b{display:block;font-size:.95rem;color:var(--navy-t)}
.pop__q{display:block;font-size:.76rem;color:var(--muted-t)}

/* `pre-line` guarda as quebras que a pessoa digitou. Mensagem de chat
   vem com parágrafo, e amassar tudo numa linha só muda o recado. */
.pop__texto{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink);
  white-space:pre-line;word-break:break-word;max-height:46vh;overflow-y:auto}

.pop__pe{padding:15px 18px 17px;border-top:1px solid var(--line);
  background:var(--sup-2)}
.pop__ok{width:100%;justify-content:center;font-size:.95rem;padding:13px 16px}
.pop__sem{display:block;text-align:center;font-size:.73rem;color:var(--muted-t);
  margin-top:9px}

/* Com o pop-up aberto a página de trás não rola: rolar o que não se
   pode clicar faz a pessoa procurar uma saída que não existe. */
html.pop-trava, html.pop-trava body{overflow:hidden}

@media (max-width:620px){
  .pop{padding:10px}
  .pop__texto{font-size:.97rem;max-height:52vh}
  .pop__ok{font-size:.88rem;padding:12px 12px}
}

/* O selo na bolha da conversa, e o quadro de quem já deu ciente. */
.cie{display:block;margin-top:6px;font-size:.68rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.cie-cx{background:var(--orange-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;font-size:.84rem;color:var(--ink);
  margin:6px 0 2px}
.cie-cx--ok{background:var(--verde-soft)}
.cie-cx b{color:var(--navy-t)}
.cie-cx__l{display:block;font-size:.79rem;color:var(--muted-t);margin-top:4px}
.cie-cx .bt{margin-top:10px}
.cie-falta{color:var(--bordo-t);font-weight:700}
/* O botão é o único alvo do teclado dentro do pop-up, e a tela está
   trancada: quem navega por teclado precisa ver onde está. */
.pop__ok:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
:root[data-tema="escuro"] .pop__ok:focus-visible{outline-color:#fff}

/* =========================================================
   9.9.36 — A DATA DA CONTRATAÇÃO, NA LINHA DO CONTRATO
   ========================================================= */
.data-ct{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 11px;margin:0 0 8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--sup-2)}
.data-ct__r{font-size:.8rem;font-weight:700;color:var(--navy-t);white-space:nowrap}
.data-ct input[type="date"]{padding:7px 10px;font-size:.86rem;max-width:170px}
.data-ct__q{font-size:.78rem;color:var(--muted-t);white-space:nowrap}
.data-ct__q b{color:var(--navy-t);font-weight:700}

/* A 390px o rótulo fica na própria linha e o campo ocupa a largura:
   com tudo na mesma linha o botão Guardar caía para fora da caixa. */
@media (max-width:620px){
  .data-ct{align-items:stretch}
  .data-ct__r{width:100%}
  .data-ct input[type="date"]{flex:1;max-width:none}
}

/* A data do cartão no cartão do quadro, quando a ordem é por ela. */
.cartao-t__ct{display:block;font-size:.76rem;color:var(--muted-t);margin-top:2px}
.cartao-t__ct b{color:var(--navy-t);font-weight:700}
/* O botão de ordem que NÃO está valendo. Apagado, não escondido:
   escondê-lo faria a pessoa descobrir a outra ordem por acaso. */
.ordem--off{opacity:.55}
.ordem--off:hover{opacity:1}

/* =========================================================
   9.9.40 — A VARREDURA DO DJEN POR NÚMERO DE PROCESSO
   ========================================================= */

/* A caixa do SQL. Monoespaçada porque o que está ali é para ser lido
   como comando e não como texto: alinhamento de coluna é o que deixa
   ver que todo UPDATE tem o seu `AND etapa =`. Rolagem só no eixo Y —
   linha de SQL quebrada no meio engana quem confere. */
.sqlbox{
  width:100%;margin:4px 0 0;padding:14px 16px;
  background:var(--navy);color:#e8ecf7;border:1px solid var(--line);
  border-radius:var(--r);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.55;white-space:pre;overflow:auto;
  resize:vertical;
}
/* Sem regra de tema escuro de propósito: `--navy` já é um nome que vale
   outra coisa no escuro (#1B2A63), como todo o bloco da 9.9.23. Uma cor
   fixa aqui seria a única da tela que não acompanha o tema. */

/* O trecho da publicação que casou com a regra. Largura com teto: sem
   ela, uma linha de 255 caracteres estica a tabela e empurra a página
   para o lado — e a tabela já tem rolagem própria para isso. */
.tabela .td-trecho{
  max-width:38ch;font-size:.82rem;color:var(--muted-t);line-height:1.4;
}

/* =========================================================
   MBP PREV — as teses do caso, em colunas que viram uma só no celular
   ========================================================= */
.teses-caso__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px}
.cartao-t__fase{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:var(--paper);border:1px solid var(--line);color:var(--navy-t)}
.cartao-t__fase--judicial{background:var(--navy-t);border-color:var(--navy-t);color:#fff}