/* Bancada — Fernandes Tobias Advocacia. Visual da proposta B. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap");

:root{
  /* A paleta é a da marca: navy no texto e nas superfícies escuras, ouro na
     ação. O verde sobrou para um sentido só, o de "feito". */
  --fundo:#F3F5F8; --carta:#FFFFFF; --carta-2:#F4F6F8;
  --texto:#111B24; --texto-2:#1F2F3C; --texto-3:#3E5364;
  --linha:#E1E7EC; --linha-2:#9FB0BC;
  --ouro:#C9A227; --ouro-fraco:#FBF4DF; --ouro-forte:#7E6210;
  --ouro-faixa:linear-gradient(135deg,#F0DCA0 0%,#D9B74A 34%,#C9A227 62%,#A3820F 100%);
  --sobre-ouro:#1A1405;
  --ok:#16714C; --ok-fraco:#E3F3EC; --ok-forte:#0E5638;
  --vermelho:#C4341F; --vermelho-claro:#FBEAE6;
  --ambar:#8A5A00; --ambar-claro:#FBF0DB;
  --azul:#1B4B8F; --azul-claro:#E8F0FA;
  --lateral:#111B24; --lateral-texto:#FFFFFF; --lateral-texto-2:#C6D4DE;
  --lateral-linha:rgba(255,255,255,.10);
  --lateral-on:rgba(201,162,39,.20); --lateral-on-texto:#F0DCA0;
  --raio:14px; --raio-p:9px;
  /* A largura da lateral mora aqui porque dois lugares dependem dela: a grade e
     a gaveta, que não pode cobri-la. */
  --lateral-larg:212px;
  --elev:0 1px 2px rgba(17,27,36,.05), 0 6px 20px -14px rgba(17,27,36,.30);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* O escuro é o navy da logomarca: --carta é a própria cor da placa do
       ícone, e o fundo é um passo abaixo dela. */
    --fundo:#0A1219; --carta:#111B24; --carta-2:#17242F;
    --texto:#E7EEF4; --texto-2:#C6D4DE; --texto-3:#A6B7C4;
    --linha:#1E2D39; --linha-2:#2C3F4E;
    --ouro:#D9B74A; --ouro-fraco:#241E0C; --ouro-forte:#F3E2AE;
    --ouro-faixa:linear-gradient(135deg,#F3E2AE 0%,#DEBE5C 38%,#C9A227 70%,#9C7C10 100%);
    --sobre-ouro:#1A1405;
    --ok:#66D3A6; --ok-fraco:#0F2E22; --ok-forte:#8FE6C2;
    --vermelho:#FF8B78; --vermelho-claro:#3A1A1B;
    --ambar:#E3B872; --ambar-claro:#33281A;
    --azul:#7FB3F0; --azul-claro:#122437;
    --lateral:#0D1620; --lateral-texto:#EDF2F6; --lateral-texto-2:#C6D4DE;
    --lateral-linha:rgba(255,255,255,.11);
    --lateral-on:rgba(217,183,74,.16); --lateral-on-texto:#F3E2AE;
    --elev:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  /* O escuro é o navy da logomarca: --carta é a própria cor da placa do
     ícone, e o fundo é um passo abaixo dela. */
  --fundo:#0A1219; --carta:#111B24; --carta-2:#17242F;
  --texto:#E7EEF4; --texto-2:#C6D4DE; --texto-3:#A6B7C4;
  --linha:#1E2D39; --linha-2:#2C3F4E;
  --ouro:#D9B74A; --ouro-fraco:#241E0C; --ouro-forte:#F3E2AE;
  --ouro-faixa:linear-gradient(135deg,#F3E2AE 0%,#DEBE5C 38%,#C9A227 70%,#9C7C10 100%);
  --sobre-ouro:#1A1405;
  --ok:#66D3A6; --ok-fraco:#0F2E22; --ok-forte:#8FE6C2;
  --vermelho:#FF8B78; --vermelho-claro:#3A1A1B;
  --ambar:#E3B872; --ambar-claro:#33281A;
  --azul:#7FB3F0; --azul-claro:#122437;
  --lateral:#0D1620; --lateral-texto:#EDF2F6; --lateral-texto-2:#C6D4DE;
  --lateral-linha:rgba(255,255,255,.11);
  --lateral-on:rgba(217,183,74,.16); --lateral-on-texto:#F3E2AE;
  --elev:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{margin:0; background:var(--fundo); color:var(--texto);
  font-family:"Plus Jakarta Sans",-apple-system,Segoe UI,sans-serif; font-size:15px; line-height:1.5}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit}
a{color:var(--azul)}
:focus-visible{outline:2px solid var(--ouro); outline-offset:2px}

.app{display:grid; grid-template-columns:var(--lateral-larg) minmax(0,1fr);
  min-height:100vh}
/* o telefone tem regra própria, no fim deste arquivo */

/* ---------------------------------------------------------------- lateral */
.lateral{background:var(--lateral); color:var(--lateral-texto);
  border-right:1px solid var(--lateral-linha); padding:22px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto}
.marca{display:flex; align-items:center; gap:10px; padding:0 8px 20px}
/* O brasao e o icone da marca: placa escura, bancada e os tres marcos. Ele ja
   traz o proprio fundo, entao nao leva cor de tema por cima. */
.brasao{width:32px; height:32px; border-radius:9px; display:block; flex:none}
.marca b{font-size:14.5px; font-weight:700; letter-spacing:-.01em; display:block}
.lateral .marca b{color:var(--lateral-texto)}
.lateral .marca span{color:var(--lateral-texto-2)}
.marca span{display:block; font-size:11.5px; color:var(--texto-3); font-weight:500}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:10px; padding:9px 10px; border:none;
  border-radius:var(--raio-p); background:none; color:var(--texto-2); font-size:14px;
  font-weight:500; cursor:pointer; text-align:left; width:100%}
.nav button{color:var(--lateral-texto-2)}
.nav button:hover{background:rgba(255,255,255,.07); color:var(--lateral-texto)}
.nav button.on{background:var(--lateral-on); color:var(--lateral-on-texto);
  font-weight:600}
.nav .pt{margin-left:auto; font-family:"Roboto Mono",monospace; font-size:11px; color:var(--texto-3)}
.nav button.on .pt{color:var(--lateral-on-texto)}
.svg{width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* -------------------------------------------------------------- conteúdo */
.conteudo{padding:26px 30px 60px; max-width:1240px; min-width:0}
@media (max-width:640px){ .conteudo{padding:18px 14px 44px} }
.cabecalho{display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  flex-wrap:wrap; margin-bottom:20px}
.cabecalho h1{margin:0; font-size:25px; font-weight:700; letter-spacing:-.02em}
.cabecalho p{margin:4px 0 0; color:var(--texto-2); font-size:13.5px}
.botao{background:var(--ouro); color:var(--sobre-ouro); border:none; border-radius:999px; padding:10px 18px;
  font-weight:600; font-size:13.5px; cursor:pointer}
/* A tinta do botão cheio sai do token, e não de uma regra por tema: a
   regra antiga pintava também o botão vazado, que sumia no escuro. */
.botao.leve{background:none; color:var(--texto-2); border:1px solid var(--linha-2)}
.botao.leve:hover{border-color:var(--texto-2); color:var(--texto)}
.botao:disabled{opacity:.5; cursor:default}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:20px}
.tile{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px; box-shadow:var(--elev); text-align:left; cursor:pointer; width:100%}
.tile .top{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.bolha{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none}
.bolha.v{background:var(--vermelho-claro); color:var(--vermelho)}
.bolha.a{background:var(--ambar-claro); color:var(--ambar)}
.bolha.g{background:var(--ok-fraco); color:var(--ok-forte)}
.bolha.z{background:var(--azul-claro); color:var(--azul)}
.tile .rot{font-size:12.5px; color:var(--texto); font-weight:700}
/* 19/09/2026, ordem dela: o valor cabe numa linha so, inclusive com milhar
   (R$ 123.258,01). O corpo encolhe conforme a largura do cartao, e nunca
   quebra: numero partido em duas linhas se le errado. */
.tile .num{font-size:clamp(19px, 2.1vw, 25px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.tile .leg{font-size:12.5px; color:var(--texto-3); margin-top:2px}

.colunas{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:980px){ .colunas{grid-template-columns:minmax(0,1fr)} }
.carta{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--elev); overflow:hidden}
.carta + .carta{margin-top:16px}
.carta > header{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px 11px; flex-wrap:wrap}
.carta h2{margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em}
.carta header .mais{font-size:12.5px; color:var(--texto-2); font-weight:600}

/* ------------------------------------------------------------------ itens */
.item{display:flex; gap:12px; padding:11px 18px; border-top:1px solid var(--linha); align-items:flex-start}
.marcador{width:4px; align-self:stretch; border-radius:99px; background:var(--linha-2); flex:none}
.marcador.v{background:var(--vermelho)} .marcador.a{background:var(--ambar)}
.marcador.z{background:var(--azul)} .marcador.g{background:var(--ok)}
.item .corpo{flex:1; min-width:0}
.item .nome{font-size:14px; font-weight:600; overflow-wrap:anywhere}
.item.ok .nome{color:var(--texto-3); text-decoration:line-through}
.item .meta{font-size:12.5px; color:var(--texto-3); margin-top:2px; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.item .meta.solta{display:block; -webkit-line-clamp:none}
.item .lado{display:flex; align-items:center; gap:8px; flex:none}
.hora{font-family:"Roboto Mono",monospace; font-size:12.5px; color:var(--texto-2);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.chip{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.chip.v{background:var(--vermelho-claro); color:var(--vermelho)}
.chip.a{background:var(--ambar-claro); color:var(--ambar)}
.chip.z{background:var(--azul-claro); color:var(--azul)}
.chip.g{background:var(--ok-fraco); color:var(--ok-forte)}
.chip.n{background:var(--carta-2); color:var(--texto-2)}

/* o botão de dar baixa: redondo, ao lado de cada prazo */
.baixa{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--linha-2);
  background:none; color:var(--texto-3); display:grid; place-items:center; cursor:pointer; flex:none}
.baixa:hover{border-color:var(--ok); color:var(--ok)}
.baixa.feito{background:var(--ok); border-color:var(--ok); color:#FFFFFF}

.baixa svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}

.abas{display:flex; gap:7px; padding:0 18px 12px; flex-wrap:wrap}
.aba{border:1px solid var(--linha-2); background:none; color:var(--texto-2); border-radius:999px;
  padding:5px 12px; font-weight:600; font-size:12px; cursor:pointer}
.aba[aria-pressed="true"]{background:var(--texto); color:var(--carta); border-color:var(--texto)}

/* ------------------------------------------------------------- calendário */
.barraAgenda{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px}
.navMes{display:flex; align-items:center; gap:10px}
.navMes h2{margin:0; font-size:19px; font-weight:700; min-width:180px}
.navMes h2::first-letter{text-transform:uppercase}
.setinha{width:32px; height:32px; border-radius:50%; border:1px solid var(--linha-2);
  background:var(--carta); color:var(--texto-2); cursor:pointer; display:grid; place-items:center}
.setinha:hover{border-color:var(--texto-2)}
.visoes{display:flex; gap:4px; background:var(--carta); border:1px solid var(--linha);
  border-radius:999px; padding:3px}
.visoes button{border:none; background:none; color:var(--texto-2); border-radius:999px;
  padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer}
.visoes button.on{background:var(--ouro-fraco); color:var(--ouro-forte)}

.mes{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--elev)}
.mes .semanaCab{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--carta-2);
  border-bottom:1px solid var(--linha)}
.mes .semanaCab span{padding:9px 10px; font-size:11.5px; font-weight:600; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.05em}
.mes .grade{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.dia{min-height:118px; min-width:0; border-right:1px solid var(--linha);
  border-bottom:1px solid var(--linha); padding:7px 8px; display:flex; flex-direction:column;
  gap:4px; cursor:pointer; position:relative; overflow:hidden}
.dia:nth-child(7n){border-right:none}
.dia.fora{background:var(--carta-2); color:var(--texto-3)}
.dia.hoje{background:var(--ouro-fraco)}
.dia:hover{box-shadow:inset 0 0 0 2px var(--linha-2)}
.dia .n{font-size:12.5px; font-weight:700; color:var(--texto-2); font-variant-numeric:tabular-nums}
.dia.hoje .n{color:var(--ouro-forte)}
.pilula{display:block; max-width:100%; font-size:11.5px; font-weight:600;
  padding:3px 7px; border-radius:6px; background:var(--carta-2); color:var(--texto-2);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; border:none;
  width:100%; text-align:left; min-width:0}
.pilula.v{background:var(--vermelho-claro); color:var(--vermelho)}
.pilula.a{background:var(--ambar-claro); color:var(--ambar)}
.pilula.z{background:var(--azul-claro); color:var(--azul)}
.pilula.g{background:var(--ok-fraco); color:var(--ok-forte)}
.pilula.ok{opacity:.55; text-decoration:line-through}
.pilula .ho{font-family:"Roboto Mono",monospace; font-weight:500; opacity:.8}
.maisDia{font-size:11px; color:var(--texto-3); font-weight:600; background:none; border:none;
  cursor:pointer; padding:0; text-align:left}

.semanaGrade{display:grid; grid-template-columns:56px repeat(7,minmax(0,1fr)); min-width:0;
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--elev)}
.semanaGrade .cabDia{padding:10px 8px; border-bottom:1px solid var(--linha);
  border-left:1px solid var(--linha); font-size:12px; font-weight:600; color:var(--texto-2)}
.semanaGrade .cabDia.hoje{background:var(--ouro-fraco); color:var(--ouro-forte)}
.semanaGrade .cantoCab{border-bottom:1px solid var(--linha)}
.faixaHora{padding:6px 8px; font-family:"Roboto Mono",monospace; font-size:11px;
  color:var(--texto-3); border-bottom:1px solid var(--linha); text-align:right}
.celula{border-left:1px solid var(--linha); border-bottom:1px solid var(--linha);
  min-height:46px; min-width:0; overflow:hidden; padding:3px; display:flex;
  flex-direction:column; gap:3px; cursor:pointer}

.listaAgenda .linhaDia{padding:9px 18px; background:var(--carta-2); font-size:12px;
  font-weight:700; color:var(--texto-2); text-transform:capitalize; border-top:1px solid var(--linha)}

/* ---------------------------------------------------------------- painéis */
/* A gaveta começa **depois** da lateral, e não por cima dela.
   Ordem dela, em 13/09/2026: "quero que tudo que for aberto no sistema, o painel
   do lado esquerdo não suma nunca. Ele deve ser fixo."
   É o certo: abrir uma pasta não pode tirar do alcance a agenda, os prazos e as
   publicações. Quem abre um processo continua enxergando onde está. */
.gaveta{position:fixed; inset:0 0 0 var(--lateral-larg);
  background:rgba(10,18,15,.45); display:none;
  align-items:stretch; justify-content:flex-end; z-index:40}
/* No telefone a lateral vira barra e a gaveta volta a ocupar tudo. */
@media (max-width:900px){ .gaveta{inset:0} }
.gaveta.aberta{display:flex}
/* ler peça pede espaço: com o leitor aberto, a gaveta ocupa quase a tela */
.gaveta.larga .gavetaCorpo{width:min(1180px,100%)}
.gavetaCorpo{background:var(--carta); width:min(560px,100%); height:100vh; overflow-y:auto;
  padding:22px 24px 40px; box-shadow:-12px 0 40px -20px rgba(0,0,0,.5)}
.gavetaCorpo h3{margin:0 0 4px; font-size:22px; font-weight:700}
.gavetaCorpo .sub{color:var(--texto-3); font-size:14px; margin-bottom:18px}
.campo{margin-bottom:14px}
/* Rótulo do campo ("Número do processo", "Identificador"): é o que o olho
   procura ao preencher, e estava mais claro que o próprio valor digitado. */
.campo label{display:block; font-size:13px; font-weight:700; color:var(--texto); margin-bottom:5px}
.campo input, .campo select, .campo textarea{width:100%; padding:9px 11px; border-radius:var(--raio-p);
  border:1px solid var(--linha-2); background:var(--carta-2)}
.campo textarea{min-height:76px; resize:vertical}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.previa{background:var(--carta-2); border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:12px 14px; font-size:13px; color:var(--texto-2); margin-bottom:14px; line-height:1.6}
.previa b{color:var(--texto)}
.previa ol{margin:6px 0 0; padding-left:18px}
.acoes{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.aviso{padding:10px 12px; border-radius:var(--raio-p); font-size:13px; margin-bottom:12px}
.aviso.erro{background:var(--vermelho-claro); color:var(--vermelho)}
.aviso.ok{background:var(--ok-fraco); color:var(--ok-forte)}
.vazio{padding:22px 18px; color:var(--texto-3); font-size:13.5px}
.carregando{padding:30px 18px; color:var(--texto-3); font-size:13.5px}

table.tabela{width:100%; border-collapse:collapse; font-size:13.5px}
table.tabela th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-3); padding:10px 14px; border-bottom:1px solid var(--linha); font-weight:600}
table.tabela td{padding:10px 14px; border-bottom:1px solid var(--linha); vertical-align:top}
table.tabela tr:hover td{background:var(--carta-2)}
.rolagem{overflow-x:auto}
.busca{width:100%; max-width:340px; padding:9px 13px; border-radius:999px;
  border:1px solid var(--linha-2); background:var(--carta)}
.zap{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--linha-2);
  border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--ouro-forte);
  background:var(--ouro-fraco); text-decoration:none; white-space:nowrap}
.zap:hover{border-color:var(--ouro)}
.entrar{min-height:100vh; display:grid; place-items:center; padding:20px}
.entrar form{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:28px; width:min(360px,100%); box-shadow:var(--elev)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------- linha do tempo do dia (painel) */
/* O fatal puxa para o vermelho; os outros ficam num tom leve do próprio estágio. */
.tempo{position:relative; padding:10px 18px 16px 74px}
.tempo::before{content:""; position:absolute; left:60px; top:12px; bottom:16px;
  width:1px; background:var(--linha)}
.faixa{position:relative; padding:6px 0; border-top:1px dashed var(--linha)}
.faixa:first-child{border-top:none}
.faixa > .rot{position:absolute; left:-74px; width:46px; text-align:right; top:9px;
  font-family:"Roboto Mono",monospace; font-size:11.5px; color:var(--texto-3)}
.bloco{display:flex; gap:12px; align-items:flex-start; border-left:3px solid var(--linha-2);
  border-radius:0 10px 10px 0; padding:10px 14px; margin:5px 0; background:var(--carta-2)}
.bloco.v{border-left-color:var(--vermelho);
  background:linear-gradient(90deg, var(--vermelho-claro) 0%, var(--carta-2) 62%)}
.bloco.a{border-left-color:var(--ambar);
  background:linear-gradient(90deg, var(--ambar-claro) 0%, var(--carta-2) 55%)}
.bloco.z{border-left-color:var(--azul);
  background:linear-gradient(90deg, var(--azul-claro) 0%, var(--carta-2) 55%)}
.bloco.g{border-left-color:var(--ok);
  background:linear-gradient(90deg, var(--ok-fraco) 0%, var(--carta-2) 55%)}
.bloco.n{border-left-color:var(--linha-2)}
.bloco.ok{opacity:.62}
.bloco .corpo{flex:1; min-width:0}
.bloco .nome{font-size:14.5px; font-weight:600; overflow-wrap:anywhere}
.bloco.ok .nome{text-decoration:line-through; color:var(--texto-3)}
.bloco .meta{font-size:12.5px; color:var(--texto-3); margin-top:2px; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.bloco .lado{display:flex; align-items:center; gap:9px; flex:none}
@media (max-width:640px){
  .tempo{padding-left:56px}
  .tempo::before{left:44px}
  .faixa > .rot{left:-56px; width:34px}
}

/* --------------------------------------------------- leitor de autos */
/* Lista à esquerda, documento à direita: ler peça sem entrar no tribunal. */
.barraAutos{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.notaAutos{margin:0 0 12px; font-size:12.5px; color:var(--texto-3)}
/* A largura vem do JS, com o divisor arrastável; este é só o padrão de partida
   para quem nunca arrastou. */
/* **O leitor ocupa a altura da janela.** Antes ele tinha altura mínima e a
   coluna das peças parava em 74% da tela, deixando uma faixa branca embaixo:
   espaço que não mostrava nada justamente onde caberiam mais dez movimentações.
   O desconto é o que fica acima dele: cabeçalho da pasta, barra e linha de
   sincronia. */
.leitor{display:grid; grid-template-columns:300px 6px minmax(0,1fr);
  gap:0; border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
  background:var(--carta); height:calc(100vh - 210px); min-height:420px}
@media (max-width:900px){ .leitor{grid-template-columns:minmax(0,1fr)} }
/* A borda e a rolagem passaram para a coluna, que agora carrega a busca e a
   linha de sincronia junto da lista. */
.listaPecas{flex:1; min-height:0; overflow-y:auto; background:var(--carta-2)}
.peca{display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; width:100%;
  text-align:left; background:none; border:none; border-bottom:1px solid var(--linha);
  padding:10px 12px; cursor:pointer; align-items:baseline}
.peca:hover{background:var(--carta)}
.peca.on{background:var(--ouro-fraco)}
.peca.lida .ptitulo{color:var(--texto-3)}
.pdata{font-family:"Roboto Mono",monospace; font-size:11px; color:var(--texto-3)}
.ptitulo{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.peca.on .ptitulo{color:var(--ouro-forte)}
.pmarca{grid-column:2; font-size:11px; color:var(--texto-3)}
.visorPeca{display:flex; flex-direction:column; min-width:0}
.cabecaPeca{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--linha); flex-wrap:wrap}
.cabecaPeca .meta{font-size:12px; color:var(--texto-3); margin-top:2px}
.acoesPeca{display:flex; gap:8px; flex-wrap:wrap}
.acoesPeca .botao{padding:6px 12px; font-size:12.5px; text-decoration:none}
.pdf{width:100%; flex:1; min-height:520px; border:none; background:var(--carta-2)}

/* ------------------------------------------------------- barra da conta */
.conta{margin-top:22px; padding-top:14px; border-top:1px solid var(--lateral-linha);
  color:var(--lateral-texto)}
.contaNome{font-size:13px; font-weight:700; overflow-wrap:anywhere}
.contaLinha{font-size:11.5px; color:var(--texto-3); margin-top:4px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere}

/* ================================================= quadro, equipe, IA, suporte
   Bloco novo de 11/09/2026. Os nomes seguem os que já existiam: .carta é
   cartão de seção, .item é linha de lista, .chip é etiqueta. */

.acoesCab{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.botao.linha{background:none; color:var(--texto-2); border:1px solid var(--linha-2)}
.botao.linha:hover{border-color:var(--texto-2); color:var(--texto)}
.botao.peq{padding:8px 14px; font-size:13px}
.campoLinha, .acoesCab select{border:1px solid var(--linha-2); border-radius:var(--raio-p);
  padding:9px 12px; background:var(--carta); color:var(--texto); font-size:13.5px;
  font-family:inherit}
.linhaCampo{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 18px}
.linhaCampo input, .linhaCampo select{flex:1; min-width:140px; border:1px solid var(--linha-2);
  border-radius:var(--raio-p); padding:9px 12px; background:var(--carta);
  color:var(--texto); font:inherit; font-size:13.5px}
.caixa{display:flex; gap:9px; align-items:center; font-size:13.5px;
  color:var(--texto-2); margin:4px 0 8px; cursor:pointer}
.caixa input[type=checkbox]{width:16px; height:16px; flex:none; margin:0}
.gavetaTopo{display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; margin-bottom:14px}
.gavetaTopo h2{margin:0; font-size:19px; font-weight:700; letter-spacing:-.02em}
.fechar{background:none; border:none; color:var(--texto-3); font-size:24px;
  line-height:1; cursor:pointer; padding:0 4px}
.fechar:hover{color:var(--texto)}
.sub{color:var(--texto-3); font-size:13px; margin:6px 0 0}
.carta > .sub{padding:0 18px 16px; margin-top:12px; line-height:1.55}
.detalheTarefa{font-size:14px; color:var(--texto-2); margin:0 0 16px;
  white-space:pre-wrap}

/* ------------------------------------------------------------------- quadro */

/* As colunas rolam na horizontal dentro do próprio quadro; a página nunca
   rola para o lado. */
.quadro{display:flex; gap:14px; overflow-x:auto; padding:4px 2px 18px;
  align-items:flex-start; scroll-snap-type:x proximity}
.coluna{flex:0 0 272px; background:var(--carta-2); border:1px solid var(--linha);
  border-radius:var(--raio); display:flex; flex-direction:column;
  max-height:calc(100vh - 190px); scroll-snap-align:start}
.colunaTopo{display:flex; align-items:center; gap:9px; padding:12px 14px;
  border-bottom:1px solid var(--linha)}
.colunaTopo .marcador{width:4px; height:16px; align-self:center; flex:none}
.colunaTopo b{font-size:13.5px; font-weight:700; letter-spacing:-.01em}
.colunaConta{margin-left:auto; font-family:"Roboto Mono",monospace; font-size:11px;
  color:var(--texto-3)}
.colunaConta.cheia{color:var(--vermelho); font-weight:700}
.colunaCorpo{padding:10px; display:flex; flex-direction:column; gap:9px;
  overflow-y:auto; min-height:90px}
.vazioColuna{color:var(--texto-3); font-size:12.5px; text-align:center;
  padding:22px 10px; margin:0; border:1px dashed var(--linha-2);
  border-radius:var(--raio-p)}

.cartao{position:relative; background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--raio-p); padding:11px 13px 10px 17px; cursor:grab;
  touch-action:none; user-select:none; box-shadow:0 1px 2px rgba(15,26,23,.04)}
.cartao:hover{border-color:var(--linha-2)}
.cartao.saindo{opacity:.32}
.cartao.fantasma{position:fixed; z-index:60; pointer-events:none; cursor:grabbing;
  transform:rotate(1.4deg); box-shadow:0 18px 40px -18px rgba(15,26,23,.55);
  opacity:.97}
.fitaCartao{position:absolute; left:0; top:8px; bottom:8px; width:4px;
  border-radius:99px; background:var(--linha-2)}
.fitaCartao.v{background:var(--vermelho)} .fitaCartao.a{background:var(--ambar)}
.fitaCartao.z{background:var(--azul)}     .fitaCartao.g{background:var(--ok)}
.cartaoTitulo{font-size:13.5px; font-weight:600; line-height:1.35}
.cartaoCaso{font-size:11.5px; color:var(--texto-3); margin-top:3px}
.cartaoPe{display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap}
.cartao.atrasado{border-color:var(--vermelho-claro)}
.dono{margin-left:auto; width:25px; height:25px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:10.5px; font-weight:700;
  background:var(--ouro-fraco); color:var(--ouro-forte)}
.dono.semDono{background:var(--carta-2); color:var(--texto-3);
  border:1px dashed var(--linha-2)}
.marcaSolta{height:3px; border-radius:99px; background:var(--ouro); flex:none;
  margin:1px 0}
.recado{position:fixed; left:50%; bottom:26px; transform:translate(-50%,120%);
  background:var(--texto); color:var(--fundo); padding:11px 20px;
  border-radius:999px; font-size:13.5px; z-index:80; transition:transform .22s;
  max-width:min(560px,88vw); text-align:center}
.recado.aparece{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .recado{transition:none} }

/* -------------------------------------------------------- IA e suporte */

.respostaIA{border:1px solid var(--azul); background:var(--azul-claro);
  border-radius:var(--raio-p); padding:12px 14px; margin-top:12px}
.respostaTopo{font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--azul); margin-bottom:7px}
.respostaTexto{font-size:13.5px; line-height:1.6; color:var(--texto)}

.menuSuporte{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px; padding:14px 18px 18px}
.cartaoMenu{text-align:left; background:var(--carta-2); border:1px solid var(--linha);
  border-radius:var(--raio-p); padding:12px 14px; cursor:pointer; font:inherit;
  color:var(--texto); display:flex; flex-direction:column; gap:4px}
.cartaoMenu:hover{border-color:var(--ouro); background:var(--ouro-fraco)}
.cartaoMenu b{font-size:13.5px}
.cartaoMenu span{font-size:11.5px; color:var(--texto-3); line-height:1.4}

.conversa{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;
  max-height:52vh; overflow-y:auto}
.fala{border-radius:var(--raio-p); padding:10px 13px; max-width:92%}
.fala.minha{background:var(--carta-2); align-self:flex-end}
.fala.deles{background:var(--ouro-fraco); align-self:flex-start}
.falaQuem{font-size:11px; color:var(--texto-3); margin-bottom:4px; font-weight:600}
.falaTexto{font-size:13.5px; line-height:1.55}

@media (max-width:900px){
  .coluna{flex-basis:82vw; max-height:none}
  .quadro{padding-bottom:10px}
}

/* -------------------------------------------------------------- tema
   Três estados: claro, escuro e o do sistema. O escolhido fica guardado
   no navegador de quem escolheu, e não na conta: a mesma pessoa pode
   querer escuro no notebook e claro na tela grande. */
.temaBloco{margin:16px 8px 4px}
.temaRotulo{display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:6px}
.temas{display:flex; gap:3px; background:var(--carta-2); border:1px solid var(--linha);
  border-radius:999px; padding:3px; width:max-content}
.temas button{border:none; background:none; color:var(--texto-3); cursor:pointer;
  width:30px; height:26px; border-radius:999px; display:grid; place-items:center}
.temas button:hover{color:var(--texto)}
.temas button.on{background:var(--carta); color:var(--texto); box-shadow:var(--elev)}
.temas svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

/* A lateral é escura nos dois temas, então o que mora nela não pode sair dos
   tokens do conteúdo, que mudam com o tema. */
.lateral .contaLinha{color:var(--lateral-texto-2)}
.lateral .maisDia{color:var(--lateral-texto-2)}
.lateral .maisDia:hover{color:var(--lateral-texto)}
.lateral .temaRotulo{color:var(--lateral-texto-2)}
.lateral .temas{background:rgba(255,255,255,.06); border-color:var(--lateral-linha)}
.lateral .temas button{color:var(--lateral-texto-2)}
.lateral .temas button:hover{color:var(--lateral-texto)}
.lateral .temas button.on{background:var(--lateral-on); color:var(--lateral-on-texto);
  box-shadow:none}
.lateral .chip.g{background:var(--lateral-on); color:var(--lateral-on-texto)}
.lateral .chip.a{background:rgba(227,184,114,.18); color:#E3B872}
.lateral .nav .pt{color:var(--lateral-texto-2)}

/* O botão cheio usa a faixa de ouro da marca, a mesma do site. */
.botao{background:var(--ouro-faixa); background-color:var(--ouro);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.botao:hover{filter:brightness(1.05) saturate(1.04)}
.botao.leve, .botao.linha{background:none; box-shadow:none}

.separa{color:var(--texto-3); font-size:11px; margin:0 2px}

/* Ficha de rótulo e valor, na Minha conta. Sem isto o navegador empilha o
   valor embaixo do rótulo e recua, que é o padrão do <dl> e não serve aqui. */
.mini{padding:4px 18px 18px}
.mini dl{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0;
  align-items:baseline}
.mini dt{font-size:13px; color:var(--texto-2)}
.mini dd{margin:0; font-size:14px; font-weight:600; text-align:right;
  overflow-wrap:anywhere}

/* --------------------------------------------------------------- avisos */
.avisos{border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:12px 14px; margin:14px 0 0; background:var(--carta-2)}
.avisosTopo{display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-bottom:8px}
.avisosTopo b{font-size:13.5px}
.linhaAviso{display:flex; gap:7px; align-items:center; margin-bottom:6px}
.linhaAviso select{flex:1; min-width:0; border:1px solid var(--linha-2);
  border-radius:var(--raio-p); padding:7px 10px; background:var(--carta);
  color:var(--texto); font:inherit; font-size:13px}
.linhaAviso button{flex:none; width:26px; font-size:15px; line-height:1}
.avisos .sub{margin:8px 0 0}

/* ----------------------------------------------------------- protocolos */
.cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin-top:20px}
.cartaoNum{background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--raio); padding:14px 16px; display:flex;
  flex-direction:column; gap:8px}
.cartaoNum .rotulo{display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--texto-2); line-height:1.3}
.cartaoNum .rotulo .marcador{width:4px; height:14px; align-self:center; flex:none}
.cartaoNum b{font-size:26px; font-weight:700; letter-spacing:-.02em}

/* Passo a passo dentro de uma carta: número à margem, linha respirando.
   Nasceu no "Como achar a sua chave", da aba de IA. */
.passos{margin:6px 0 0;padding-left:20px;color:var(--texto-2);font-size:13.5px;
  line-height:1.62}
.passos li{margin:5px 0}
.passos code{background:var(--carta-2);border:1px solid var(--linha);
  border-radius:5px;padding:1px 5px;font-size:12.5px}
.passos a{color:var(--ouro-forte)}

/* Linhas que repetem no cadastro: documento, endereço, telefone, e-mail.
   Cada uma é uma faixa que quebra em tela estreita, e o recado mora embaixo
   ocupando a linha inteira, para não espremer os campos. */
.linhaRep{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.linhaRep.col{flex-direction:column;align-items:stretch;
  border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px;
  background:var(--carta-2)}
.linhaRep.col > .linhaRep{margin:0 0 6px}
.linhaRep input,.linhaRep select{flex:1;min-width:120px;padding:8px 10px;
  border:1px solid var(--linha-2);border-radius:var(--raio-p);
  background:var(--carta);color:var(--texto);font-size:13.5px}
.linhaRep .marca{display:flex;align-items:center;gap:6px;font-size:13px;
  color:var(--texto-2);white-space:nowrap}
.linhaRep .marca input{flex:0 0 auto;min-width:0}
.recado{flex-basis:100%;font-size:12.5px;color:var(--texto-3);margin-top:2px}
.recado.ruim{color:var(--vermelho)}
.recado.atencao{color:var(--ambar)}
/* Título de bloco é ponto de referência da tela: tem de saltar aos olhos
   antes de ser lido (ordem dela, 19/09/2026). Por isso usa a cor cheia do
   texto, e não mais o cinza claro. */
.tituloBloco{margin:30px 0 12px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--texto)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.botao.leve{background:var(--carta-2);color:var(--texto-2);
  border:1px solid var(--linha-2);padding:7px 12px;font-size:13px}

/* Caixa de texto de importação ocupa a largura da carta: botão embaixo, não ao
   lado, que é onde ele fica quando a caixa não diz o seu tamanho. */
.carta textarea{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--linha-2);border-radius:var(--raio-p);
  background:var(--carta);color:var(--texto);font:inherit;font-size:13.5px}

/* O cupom tem de ser legível de longe e ditável ao telefone. */
.cupomGrande{font-family:'Roboto Mono',monospace;font-size:26px;font-weight:600;
  letter-spacing:.06em;color:var(--ouro-forte);background:var(--ouro-fraco);
  border:1px solid var(--ouro);border-radius:var(--raio-p);
  padding:12px 16px;text-align:center}

/* Ficha de tribunal do acervo, na tela de Certificado e acessos: diz onde há
   processo e o que falta cadastrar em cada um. */
.fichaTribunal{border:1px solid var(--linha);border-radius:var(--raio-p);
  padding:10px 12px;min-width:150px;background:var(--carta-2);
  display:flex;flex-direction:column;gap:3px}
.fichaTribunal.pronto{border-color:var(--ok);background:var(--ok-fraco)}
.fichaTribunal b{font-size:14.5px}
.fichaTribunal span{font-size:12px;color:var(--texto-2)}
.fichaTribunal .chips{display:flex;gap:5px;margin-top:3px}
.fichaTribunal .maisDia{align-self:flex-start;margin-top:4px}

/* Aniversário tem dois caminhos: o WhatsApp, que é a preferência, e o SMS ao
   lado. Quem não tem WhatsApp troca a ordem, e os dois continuam à mão. */
.doisCaminhos{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.segundoCaminho{font-size:12.5px;color:var(--texto-3);text-decoration:none;
  border-bottom:1px dotted var(--linha-2)}
.segundoCaminho:hover{color:var(--texto-2)}

/* A coluna da data ganhou a hora embaixo, e a linha de baixo ganhou o número do
   documento nos autos: é por ele que a peça é citada na petição. */
.peca{grid-template-columns:52px minmax(0,1fr)}
.phora{font-size:10px;color:var(--texto-3);opacity:.8}
.pid{font-family:"Roboto Mono",monospace;font-size:10.5px;
  background:var(--carta-2);border:1px solid var(--linha);border-radius:4px;
  padding:0 4px}

/* O que o sistema faz e o que ainda não faz naquele tribunal, na hora do
   cadastro do acesso. Verde é o que já funciona; âmbar é o que ainda não. */
.servicos{list-style:none;margin:8px 0 0;padding:0;font-size:13px}
.servicos li{padding:5px 0 5px 15px;border-left:3px solid var(--linha-2);
  margin-bottom:5px;line-height:1.45}
.servicos li.faz{border-left-color:var(--ok)}
.servicos li.naofaz{border-left-color:var(--ambar)}
.servicos li span{display:block;color:var(--texto-3);font-size:12px}

/* A linha do tempo do processo: um registro por linha, agrupado por mês. */
.mesLinha{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin:18px 0 6px;padding-bottom:4px;
  border-bottom:1px solid var(--linha)}
.linhaTempo{display:flex;gap:10px;padding:9px 2px;border-bottom:1px solid var(--linha)}
.linhaTempo .corpo{min-width:0;flex:1}
.linhaTempo .nome{font-size:14px;font-weight:600;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}
.linhaTempo .trecho{color:var(--texto-3);font-size:12.5px;margin-top:3px;
  overflow-wrap:anywhere}
.linhaTempo.feito .nome{color:var(--texto-2)}

/* ------------------------------------------------- caixa de entrada e autos
   Duas colunas com divisor arrastável, no formato que ela pediu em 14/09/2026.
   A altura é calculada, e não fixa: a lista rola dentro dela, e a página não
   rola junto, que é o que faz perder o lugar ao tratar uma publicação. */
.caixaEntrada{display:grid; gap:0; align-items:stretch;
  height:calc(100vh - 250px); min-height:420px; margin-top:12px;
  border:1px solid var(--linha); border-radius:14px; overflow:hidden;
  background:var(--carta)}
.listaCaixa{overflow-y:auto; border-right:1px solid var(--linha);
  background:var(--carta-2)}
.divisorCaixa{cursor:col-resize; background:var(--linha);
  transition:background .15s}
.divisorCaixa:hover{background:var(--ouro)}
.detalheCaixa{overflow-y:auto; padding:18px 22px; min-width:0}

.linhaCaixa{padding:12px 14px; border-bottom:1px solid var(--linha);
  cursor:pointer; border-left:3px solid transparent}
.linhaCaixa:hover{background:var(--carta)}
.linhaCaixa.on{background:var(--carta); border-left-color:var(--ouro)}
.nomeCaixa{font-size:13.5px; font-weight:600; display:flex; gap:8px;
  align-items:center; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.metaCaixa{display:flex; justify-content:space-between; gap:10px;
  color:var(--texto-3); font-size:12px; margin-top:4px}
.metaCaixa span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tipoCaixa{flex:none; color:var(--texto-2)}

.acoesCaixa{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--linha)}
.tituloCaixa{font-size:22px; margin:16px 0 4px; display:flex; gap:10px;
  align-items:center; flex-wrap:wrap; overflow-wrap:anywhere}
.subCaixa{color:var(--texto-2); font-size:13px; margin:0 0 14px}
.tempoCaixa{color:var(--texto-3); font-size:12.5px; margin:14px 0 10px}
.fichaCaixa{border:1px solid var(--linha); border-radius:12px; padding:14px 16px;
  background:var(--carta-2)}
.tituloFicha{font-weight:600; display:flex; justify-content:space-between;
  gap:10px; margin-bottom:10px}
.dataFicha{color:var(--texto-3); font-weight:400; font-size:12.5px}
.tabelaFicha{width:100%; border-collapse:collapse; font-size:13.5px}
.tabelaFicha th{text-align:left; font-weight:600; padding:5px 14px 5px 0;
  white-space:nowrap; vertical-align:top; width:190px; color:var(--texto-2)}
.tabelaFicha td{padding:5px 0; overflow-wrap:anywhere}
.textoCaixa{margin-top:16px; white-space:pre-wrap; font-size:13.5px;
  line-height:1.6; overflow-wrap:anywhere}

.cabecaAutos{display:flex; justify-content:space-between; gap:16px;
  align-items:flex-start; flex-wrap:wrap; padding-bottom:14px;
  border-bottom:1px solid var(--linha); margin-bottom:14px}
.cabecaAutos h1{font-size:22px; margin:2px 0 4px; display:flex; gap:10px;
  align-items:center; flex-wrap:wrap}
.voltaAutos{font-size:12.5px; margin-bottom:2px}
.voltaAutos a{color:var(--texto-3); text-decoration:none}
.voltaAutos a:hover{color:var(--ouro-forte)}

@media (max-width:980px){
  .caixaEntrada{grid-template-columns:minmax(0,1fr) !important; height:auto}
  .divisorCaixa{display:none}
  .listaCaixa{max-height:300px; border-right:0;
    border-bottom:1px solid var(--linha)}
}

/* ---------------------------------------------- os autos com a cara do tribunal
   Formato pedido por ela em 14/09/2026, com a tela do sistema ao lado: a linha
   da peça é a movimentação como o tribunal a escreve, a data à direita, e a
   estrela para o que vai ser citado na petição. */
.peca{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px;
  align-items:center; padding:9px 12px; border-bottom:1px solid var(--linha);
  cursor:pointer}
.peca:hover{background:var(--carta-2)}
.peca.on{background:var(--ouro-fraco)}
.peca.lida .ptitulo{color:var(--texto-2)}
.pecaAbre{all:unset; cursor:pointer; min-width:0; display:block}
.ptitulo{display:block; font-size:13.5px; font-weight:500; overflow-wrap:anywhere}
.pmarca{display:block; color:var(--texto-3); font-size:11.5px; margin-top:2px}
.peca .pdata{color:var(--texto-3); font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pestrela{all:unset; cursor:pointer; color:var(--texto-3); font-size:16px;
  padding:0 2px; line-height:1}
.pestrela:hover{color:var(--ouro-forte)}
.pestrela.on{color:var(--ouro-forte)}

.iconeAutos{all:unset; cursor:pointer; width:34px; height:34px; display:grid;
  place-items:center; border:1px solid var(--linha); border-radius:9px;
  background:var(--carta); color:var(--texto-2); font-size:16px}
.iconeAutos:hover{background:var(--ouro-fraco); color:var(--ouro-forte);
  border-color:var(--ouro)}
.iconeAutos[disabled]{opacity:.5; cursor:default}
.iconeAutos.girando{animation:gira 1s linear infinite}
@keyframes gira{from{transform:rotate(0)} to{transform:rotate(360deg)}}

.sincronia{color:var(--texto-3); font-size:12.5px; margin:0 0 10px;
  display:flex; align-items:center; gap:6px}
.ajudinha{all:unset; cursor:help; width:16px; height:16px; display:grid;
  place-items:center; border-radius:50%; border:1px solid var(--linha-2);
  font-size:11px; color:var(--texto-3)}
.ajudinha:hover{border-color:var(--ouro); color:var(--ouro-forte)}
.peca.pdfInteiro{background:var(--ouro-fraco); border-bottom:2px solid var(--ouro)}
.peca.pdfInteiro .ptitulo{font-weight:600}
.peca.pdfInteiro .pdata{color:var(--ouro-forte); text-decoration:none}


/* ------------------------------------------------- Movimentações da pasta
   Formato pedido por ela em 14/09/2026, com a tela do ControlJus ao lado: a
   data à esquerda com dia da semana, e à direita um cartão com duas etiquetas,
   o que é e de onde veio. Publicação, andamento anotado, prazo, compromisso e
   peça na mesma lista, porque é uma coisa só: o que aconteceu na pasta. */
.movTopo{display:flex; gap:10px; align-items:center; margin:0 0 14px}
.movBusca{flex:1; min-width:0}
.movBusca input{width:100%; padding:9px 14px; border:1px solid var(--linha);
  border-radius:999px; background:var(--carta); color:var(--texto)}
.movLinha{display:grid; grid-template-columns:104px 1fr; gap:14px; margin:0 0 14px;
  align-items:start}
.movQuando{text-align:right; padding-top:2px; border-right:2px solid var(--linha);
  padding-right:12px}
.movDia{font-size:11px; color:var(--texto-3)}
.movData{font-size:12px; color:var(--texto-2); font-weight:600}
.movHora{font-size:11px; color:var(--texto-3); font-variant-numeric:tabular-nums}
.movCartao{background:var(--carta-2); border:1px solid var(--linha);
  border-radius:var(--raio); padding:12px 14px; min-width:0}
.movLinha.feito .movCartao{opacity:.72}
.movEtiquetas{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px}
.etiqueta{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:4px; white-space:nowrap}
.etiqueta.v{background:var(--vermelho-claro); color:var(--vermelho)}
.etiqueta.a{background:var(--ambar-claro); color:var(--ambar)}
.etiqueta.z{background:var(--azul-claro); color:var(--azul)}
.etiqueta.g{background:var(--ok-fraco); color:var(--ok-forte)}
.etiqueta.n{background:var(--carta); color:var(--texto-2); border:1px solid var(--linha)}
.etiqueta.linha{background:none; color:var(--texto-3); border:1px solid var(--linha);
  text-transform:none; letter-spacing:0; font-weight:600}
.movTitulo{font-weight:600; line-height:1.35}
.movTexto{margin-top:6px; color:var(--texto-2); font-size:13px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere}
.movAcoes{margin-top:10px}
@media (max-width:640px){
  .movLinha{grid-template-columns:1fr; gap:6px}
  .movQuando{text-align:left; border-right:none; border-left:2px solid var(--linha);
    padding-right:0; padding-left:10px}
}


/* ------------------------------------------- coluna das peças, formato novo
   Busca no alto, depois a linha de sincronia, depois Favoritos e Todos. É o
   formato que ela pediu em 14/09/2026, com a tela do Legal Mail ao lado. */
.colunaPecas{display:flex; flex-direction:column; min-width:0; min-height:0;
  height:100%; border-right:1px solid var(--linha); padding-top:12px;
  background:var(--carta)}
.buscaAutos{margin:0 12px 10px; padding:9px 14px; border:none;
  border-bottom:1px solid var(--linha); background:none; color:var(--texto);
  font-size:15px; border-radius:0}
.buscaAutos:focus{outline:none; border-bottom-color:var(--ouro)}
.notaAutos{margin:0 12px 10px; font-size:12px; color:var(--texto-3)}
.notaAutos .dica{display:block; margin-top:2px; font-size:11px}
.secaoPecas{padding:10px 14px 4px; font-size:13px; font-weight:700;
  color:var(--texto); position:sticky; top:0; background:var(--carta); z-index:1}
.nenhumFav{margin:0; padding:2px 14px 8px; color:var(--texto-3); font-style:italic;
  font-size:13px}
.siglaClasse{font-weight:700; color:var(--texto-2)}


/* -------------------------------------------- a janela exclusiva do processo
   Ordem dela, de 14/09/2026: *"quando abrir a nova janela dos autos, quero que
   suma o painel lateral, pra não confundir o advogado e ser uma janela
   exclusiva para aquele processo. Deixe apenas a logomarca do lado esquerdo,
   porque aí a pessoa pode clicar e a janela leva para o início"*.

   O menu inteiro sai; fica a marca, clicável, que é a porta de volta. A tela
   ganha a largura toda, que é o que faz a leitura de autos valer numa janela
   separada. */
body.soProcesso .lateral .nav{display:none}
body.soProcesso .lateral{width:auto; min-width:0; padding:14px 10px;
  background:none; border-right:1px solid var(--linha)}
body.soProcesso .lateral .marca{cursor:pointer; margin:0}
body.soProcesso .lateral .marca div{display:none}
body.soProcesso .app{grid-template-columns:64px minmax(0,1fr)}
body.soProcesso .conteudo{padding-left:18px}

/* o botão de atualizar, ao lado da linha de sincronia */
.atualizarAutos{width:26px; height:26px; border-radius:6px; border:1px solid var(--linha);
  background:var(--carta); color:var(--texto-2); cursor:pointer; font-size:14px;
  line-height:1; margin-right:6px; vertical-align:middle}
.atualizarAutos:hover{border-color:var(--ouro); color:var(--ouro-forte)}
.peca.semDoc .ptitulo{font-weight:500; color:var(--texto-2)}
.peca.semDoc{background:transparent}

@media (max-width:820px){
  .leitor{grid-template-columns:minmax(0,1fr) !important}
  #divisorAutos{display:none}
}

/* A pergunta de segurança antes da baixa de prazo. Modal de verdade, com Esc e
   clique fora cancelando: o lado seguro é não dar baixa. */
dialog.pergunta{border:none; border-radius:var(--raio); padding:22px 24px;
  max-width:440px; background:var(--carta); color:var(--texto);
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
/* 19/09/2026, ordem dela: a janela da despesa cortava o "Já foi paga" e pedia
   rolagem lateral. Esta variante cabe o formulário inteiro e acompanha a tela. */
dialog.pergunta.larga{max-width:min(96vw, 620px); width:min(96vw, 620px);
  max-height:90vh; overflow:auto}
dialog.pergunta.larga .linhaRep{display:flex; gap:12px; flex-wrap:wrap}
dialog.pergunta.larga .linhaRep > .campo{min-width:170px}
dialog.pergunta::backdrop{background:rgba(6,12,18,.55)}
dialog.pergunta h3{margin:0 0 10px; font-size:17px}
dialog.pergunta .ato{margin:0 0 2px; font-weight:600}
dialog.pergunta .meta{margin:0 0 12px; color:var(--texto-3); font-size:13px}
dialog.pergunta .aviso{margin:0; font-size:13px; line-height:1.5;
  background:var(--carta-2); border-radius:8px; padding:10px 12px}
dialog.pergunta .aviso.erro{background:var(--vermelho-claro); color:var(--vermelho)}
dialog.pergunta .acoes{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.botao.perigo{background:var(--vermelho); color:#fff}

/* ------------------------------------------------- selecionar e copiar texto
   Pedido dela, em 15/09/2026, tentando copiar a linha de uma movimentação:
   *"libere pra que eu possa selecionar e copiar o que eu quiser de
   letras/palavras no sistema"*.

   O que impedia: a linha da peça, a da publicação e a do andamento são
   **botões**, porque a linha inteira é clicável, e o navegador não deixa
   arrastar seleção dentro de um botão. Texto de processo existe para ser
   citado na petição, e quem não consegue copiar acaba redigitando, que é como
   nasce erro em número de processo e em nome de parte.

   Então a regra geral passa a ser selecionável, e o `none` fica só onde ele tem
   função: o cartão que se arrasta no quadro, e os botões de ícone, onde
   selecionar um caractere solto só atrapalha. */
body, button, label, .peca, .pecaAbre, .item, .linhaTempo, .movLinha, .movCartao,
.tabela td, .tabela th, .previa, .trecho, .ptitulo, .pmarca, .nome, .meta {
  -webkit-user-select:text; user-select:text
}
.cartao, .baixa, .pestrela, .iconeAutos, .atualizarAutos, .aba, #nav button,
.tile, .pilula{ -webkit-user-select:none; user-select:none }

/* o rodapé da lista: onde se está, e quantas por página */
.paginacaoPecas{display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 12px; border-top:1px solid var(--linha);
  font-size:12px; color:var(--texto-3); background:var(--carta)}
.paginacaoPecas .botao{padding:5px 11px; font-size:12px}
.porPaginaPecas{padding:8px 12px 14px; font-size:12px; color:var(--texto-3);
  display:flex; align-items:center; gap:6px}
.porPaginaPecas select{padding:3px 6px; border:1px solid var(--linha);
  border-radius:6px; background:var(--carta); color:var(--texto)}
.contaPagina{font-weight:400; color:var(--texto-3); font-size:11px}
.visorPeca{overflow:auto}

/* ------------------------------------------- audiências e sessões no painel
   O bloco fica no alto porque é o que não se remarca: audiência tem juiz e
   parte contrária esperando. O de hoje ganha faixa de urgência; o resto fica
   legível e quieto. */
.carta.destaque{border-color:var(--ouro); box-shadow:0 2px 10px rgba(201,162,39,.12)}
.item.audi{display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px;
  align-items:start}
.audiHora{text-align:right; border-right:2px solid var(--linha); padding-right:10px}
.audiHora b{display:block; font-size:15px; font-variant-numeric:tabular-nums}
.audiHora span{font-size:11px; color:var(--texto-3)}
.item.audi.ehoje .audiHora{border-right-color:var(--vermelho)}
.item.audi.ehoje .audiHora b{color:var(--vermelho)}
.item.audi:hover{background:var(--carta-2)}
.audiHora .ateHora{display:block; font-size:10px; color:var(--texto-3)}

/* Minha conta: os subtítulos dentro de uma carta de cadastro (15/09/2026). */
.carta h3.subtitulo{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-3); margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--linha, rgba(127,127,127,.18))}
@media (max-width:640px){ .dupla{grid-template-columns:1fr} }

/* Vínculo, edição e exclusão (vinculo.js, 15/09/2026). */
.achados{position:absolute; z-index:40; left:0; right:0; margin-top:4px; max-height:300px; overflow:auto;
  background:var(--carta); border:1px solid var(--linha-2); border-radius:var(--raio-p);
  box-shadow:0 10px 30px rgba(0,0,0,.14)}
.campo, .parteBusca{position:relative}
.achados button{display:block; width:100%; text-align:left; padding:8px 11px; background:none; border:none;
  border-bottom:1px solid var(--linha); cursor:pointer; color:var(--texto)}
.achados button:hover{background:var(--carta-2)}
.achados button b{display:block; font-size:13px}
.achados button span{display:block; font-size:11.5px; color:var(--texto-3)}
.nadaAchado{padding:9px 11px; font-size:12.5px; color:var(--texto-3)}
.bancoPessoas{display:flex; flex-wrap:wrap; gap:6px}
.bancoPessoas .chip{cursor:pointer; border:none}
.listaExclusao{margin:4px 0 12px 18px; font-size:13px}
.botao.perigo{background:var(--vermelho); color:#fff; border-color:var(--vermelho)}
.botao.perigo:disabled{opacity:.45}
.escolhaPasta{width:100%; text-align:left; background:none; border:none; cursor:pointer}
.escolhaPasta:hover{background:var(--carta-2)}
.acoesLinha .maisDia{padding:2px 4px}
.acoesLinha .maisDia:hover{color:var(--texto)}

/* Janela dos autos: só a marca na lateral, sem nada atrás e sem barra de rolar.
   Ordem dela de 15/09/2026, com a tela ao lado: o quadro da conta, o seletor de
   tema e o nome do escritório continuavam ali, espremidos em 64 px e partidos
   letra a letra, e a lateral ganhava barra de rolagem. */
body.soProcesso .lateral{overflow:hidden; padding:18px 0; display:flex; justify-content:center; align-items:flex-start}
body.soProcesso .lateral > :not(.marca){display:none !important}
body.soProcesso .lateral .marca{padding:0}

/* Botão de tema claro/escuro, no canto superior direito (15/09/2026). Um só,
   no lugar dos três da lateral. Fixo, redondo, discreto, como a Dra. mostrou. */
/* Desde 16/09/2026, pedido dela: "sempre em um mesmo lugar, sem mudar", ao
   lado do cronômetro. Fica no canto inferior direito, em toda aba, com gaveta
   aberta ou não; o cronômetro mora à esquerda dele e cresce para a esquerda,
   então a lua não se mexe nem quando o relógio começa a correr. */
.botaoTema{position:fixed; bottom:16px; right:16px; z-index:61; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--linha-2); background:var(--carta);
  color:var(--texto-2); cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding:0; box-shadow:0 2px 8px rgba(0,0,0,.10)}
.botaoTema:hover{color:var(--texto); border-color:var(--dourado, var(--texto-3))}
.botaoTema svg{width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Cronômetro fixo (tempo.js, 15/09/2026). Canto inferior direito, à esquerda
   do botão de tema (38px dele + 8px de respiro). */
.relogio{position:fixed; right:62px; bottom:16px; z-index:60}
.relogio .relIniciar{display:flex; align-items:center; gap:7px; background:var(--carta);
  border:1px solid var(--linha-2); border-radius:22px; padding:8px 15px 8px 12px;
  color:var(--texto-2); font-weight:600; font-size:13px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.14)}
.relogio .relIniciar:hover{color:var(--texto); border-color:var(--dourado, var(--texto-3))}
.relogio.rodando{display:flex; align-items:center; gap:10px; background:var(--carta);
  border:1px solid var(--dourado, var(--linha-2)); border-radius:14px; padding:8px 8px 8px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.relInfo .relTempo{font-family:ui-monospace,"IBM Plex Mono",monospace; font-size:20px;
  font-weight:700; color:var(--texto); line-height:1.1}
.relInfo .relVinc{font-size:11px; color:var(--texto-3); max-width:190px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.relParar{width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--vermelho); color:#fff; display:flex; align-items:center; justify-content:center}
.relParar svg{width:16px; height:16px; fill:currentColor}
.relIniciar svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2}
.tabela{width:100%; border-collapse:collapse; font-size:13.5px}
.tabela th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-3); padding:6px 10px; border-bottom:1px solid var(--linha)}
.tabela td{padding:7px 10px; border-bottom:1px solid var(--linha); vertical-align:top}

/* Painel de saúde dos acessos (cofre.js, 15/09/2026). */
.acessoResumo{display:flex;gap:10px;margin:6px 0 16px}
.acessoResumo .ar{flex:1;border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.acessoResumo .ar b{display:block;font-size:24px;line-height:1}
.acessoResumo .ar span{font-size:11.5px;color:var(--texto-3)}
.acessoResumo .ar.ok b{color:var(--verde,#16714C)}
.acessoResumo .ar.voce b{color:var(--dourado,#a16207)}
.acessoResumo .ar.ajuste b{color:var(--texto-3)}
.sistema{border-top:1px solid var(--linha);padding:8px 0}
.sistema summary{cursor:pointer;padding:4px 0}
.tribGrade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0 6px}
.trib{border:1px solid var(--linha);border-left-width:3px;border-radius:8px;padding:7px 10px}
.trib .tsig{display:block;font-weight:700;font-size:12.5px}
.trib .test{font-size:11px;color:var(--texto-3)}
.trib.ok{border-left-color:var(--verde,#16714C)}
.trib.voce{border-left-color:var(--dourado,#C9A227)}
.trib.ajuste{border-left-color:var(--linha-2)}

/* ------------------------------------------------ o ponteiro diz o que clica
   Pedido dela de 16/09/2026: *"tudo que é clicável, quero que o ponteiro fique
   sendo uma mãozinha"*. Onde o cursor continua sendo seta, a pessoa não sabe
   que aquilo abre alguma coisa, e o recurso existe sem ser usado. A lista
   cobre o que o desenho usa como botão; o resto, que ganha `onclick` no
   JavaScript, é marcado a cada pintura pela função `maozinha()`. O texto
   continua selecionável (regra de 15/09/2026): mãozinha não impede copiar. */
button, a[href], summary, select, label[for], .aba, .tile, .cartaoNum[data-ir],
[role="button"], [role="tab"], [data-aba], [data-abaproc], [data-ir],
[data-filtro], [data-estado], [data-fhist], [data-abrirpet], [data-peca],
[data-pub], [data-abrir], [data-ligar], [data-ver], .clicavel,
input[type="checkbox"], input[type="radio"]{cursor:pointer}

/* ------------------------- de onde veio a linha do tempo (16/09/2026)
   Quatro famílias, pedidas por ela: o que foi importado dos autos fica no tom
   de sempre; o que foi escrito aqui, o prazo lançado e a audiência ganham cor
   própria, numa faixa à esquerda do cartão, que se lê de relance sem ler nada. */
.movLinha .movCartao{border-left:4px solid var(--linha)}
.movLinha.de-nosso .movCartao{border-left-color:var(--verde, #2E7D5B);
  background:var(--verde-claro, rgba(46,125,91,.07))}
.movLinha.de-prazo .movCartao{border-left-color:var(--ambar, #B7791F);
  background:var(--ambar-claro, rgba(183,121,31,.08))}
.movLinha.de-audiencia .movCartao{border-left-color:var(--azul, #2B6CB0);
  background:var(--azul-claro, rgba(43,108,176,.08))}

/* ---------------------------- a ficha da tarefa e do prazo (16/09/2026)
   Formato pedido por ela, com a tela do ControlJus ao lado: a data em bloco no
   alto, o título, os campos em duas colunas (rótulo à esquerda, conteúdo à
   direita), o vínculo com a pasta e o status em quatro botões. */
.fichaTopo{display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; margin:0 0 14px}
.fichaData{border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:8px 14px; background:var(--carta-2); text-align:center; min-width:120px}
.fichaData b{display:block; font-size:14.5px}
.fichaData span{font-size:13.5px; color:var(--texto-2);
  font-variant-numeric:tabular-nums}
.fichaIcones{display:flex; gap:6px}
.icone{width:34px; height:34px; border-radius:50%; border:1px solid var(--linha-2);
  background:var(--carta); color:var(--texto-2); display:flex; align-items:center;
  justify-content:center; cursor:pointer; padding:0}
.icone svg{width:17px; height:17px}
.icone:hover{color:var(--texto); border-color:var(--texto-3)}
.icone.perigo:hover{color:var(--vermelho); border-color:var(--vermelho)}
.fichaTitulo{margin:0 0 16px; font-size:22px; line-height:1.35}
.ficha{display:flex; flex-direction:column; gap:12px}
.fichaLinha{display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px;
  align-items:start}
.fichaRot{font-size:13.5px; color:var(--texto-3)}
.fichaVal{font-size:15px; color:var(--texto); min-width:0}
.fichaTexto{white-space:pre-wrap; color:var(--texto-2); font-size:14px;
  line-height:1.6; max-height:min(460px, 60vh); overflow:auto}
.pastilha{display:inline-block; background:var(--carta-2); border:1px solid var(--linha);
  border-radius:999px; padding:3px 11px; font-size:12.5px; margin:0 4px 4px 0}
.prio{font-weight:600}
.prio.urgente, .prio.alta{color:var(--vermelho)}
.prio.normal{color:var(--ambar)}
.prio.baixa{color:var(--texto-2)}
.vinculo{display:inline-flex; align-items:center; gap:8px; text-align:left;
  background:var(--carta-2); border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:9px 12px; font:inherit; font-size:13px; color:var(--texto); cursor:pointer;
  width:100%}
.vinculo:hover{border-color:var(--dourado, var(--texto-3))}
.vinculo .meta{color:var(--texto-3); font-size:12px}
.vinculo .vinculoIr{margin-left:auto; color:var(--texto-3)}
.fichaStatus{margin:20px 0 0; display:grid; grid-template-columns:104px minmax(0,1fr);
  gap:14px; align-items:center}
.statusBotoes{display:flex; gap:8px; flex-wrap:wrap}
.statusBt{display:inline-flex; align-items:center; gap:7px; border-radius:999px;
  border:1px solid var(--linha-2); background:var(--carta); color:var(--texto-2);
  padding:9px 15px; font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.statusBt svg{width:15px; height:15px}
.statusBt:hover{color:var(--texto); border-color:var(--texto-3)}
.statusBt.on{border-color:var(--dourado, #B7791F); color:var(--texto);
  box-shadow:0 0 0 1px var(--dourado, #B7791F) inset}
@media (max-width:620px){
  .fichaLinha, .fichaStatus{grid-template-columns:1fr; gap:4px}
}


/* Nome de pasta é caminho para ela (16/09/2026). Parece texto, e é botão: o
   sublinhado só aparece ao passar o mouse, para a tabela não virar um campo de
   links azuis. */
.linkPasta{background:none; border:none; padding:0; margin:0; font:inherit;
  color:inherit; text-align:left; cursor:pointer; border-bottom:1px dotted var(--linha-2)}
.linkPasta:hover{color:var(--dourado, var(--texto)); border-bottom-style:solid}

/* Arrastar na agenda (16/09/2026). O cartão que sai fica translúcido e o dia
   que vai receber acende: sem isso, não se sabe onde a tarefa vai cair. */
.pilula[draggable="true"]{cursor:grab}
.pilula.arrastando{opacity:.45; cursor:grabbing}
.dia.alvoSolta, .celula.alvoSolta{background:var(--ouro-suave, rgba(201,162,39,.12));
  outline:2px solid var(--dourado, #C9A227); outline-offset:-2px; border-radius:6px}

/* A gaveta é sempre larga (16/09/2026), e o conteúdo de formulário fica na
   medida de leitura dentro dela: linha de texto muito comprida cansa, e campo
   esticado de ponta a ponta parece defeito. O que precisa da largura toda —
   leitor de autos, linha do tempo, tabela — tem classe própria e não entra
   nesta trava. */
/* Formulário fica estreito (linha de texto longa cansa, regra 124). */
.gaveta.larga .gavetaCorpo > .campo,
.gaveta.larga .gavetaCorpo > .dupla,
.gaveta.larga .gavetaCorpo > .acoes,
.gaveta.larga .gavetaCorpo > .caixa{max-width:760px}
/* Visualização preenche mais a tela (pedido dela de 19/09/2026): a ficha de
   pessoa, de processo e de tarefa não deve ficar espremida num canto. */
.gaveta.larga .gavetaCorpo > .previa,
.gaveta.larga .gavetaCorpo > p,
.gaveta.larga .gavetaCorpo > .aviso,
.gaveta.larga .gavetaCorpo > .ficha,
.gaveta.larga .gavetaCorpo > .fichaLinha,
.gaveta.larga .gavetaCorpo > .fichaStatus{max-width:1040px}

/* ------------------------------------------------- Raio-X (16/09/2026)
   O escritório em números. Rosca é conic-gradient, barra é div com largura em
   porcentagem, coluna é div com altura: nenhuma biblioteca de gráfico entra no
   navegador do cliente por causa disto. */
.rxGrandes{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 18px}
@media (max-width:1100px){.rxGrandes{grid-template-columns:repeat(2,1fr)}}
.rxGrande{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px; display:flex; flex-direction:column; gap:2px}
.rxGrande .rot{font-size:12.5px; color:var(--texto-2)}
.rxGrande b{font-size:27px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.rxGrande .leg{font-size:12px; color:var(--texto-3)}

.rxGrade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  margin:0 0 14px}
@media (max-width:900px){.rxGrade{grid-template-columns:1fr}}
.rx{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px 20px}
.rx h3{margin:0 0 14px; font-size:15.5px; font-weight:700}

.rxRosca{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.rosca{width:132px; height:132px; border-radius:50%; flex:none; position:relative;
  display:grid; place-items:center}
.rosca::after{content:""; position:absolute; inset:26px; border-radius:50%;
  background:var(--carta)}
.roscaMeio{position:relative; z-index:1; text-align:center; line-height:1.15}
.roscaMeio b{display:block; font-size:20px; font-weight:700;
  font-variant-numeric:tabular-nums}
.roscaMeio span{font-size:11px; color:var(--texto-3)}
.rxLegenda{list-style:none; margin:0; padding:0; flex:1; min-width:170px}
.rxLegenda li{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px}
.rxLegenda i{width:10px; height:10px; border-radius:3px; flex:none}
.rxLegenda .rot{flex:1; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rxLegenda b{font-variant-numeric:tabular-nums}
.rxLegenda .pc{color:var(--texto-3); font-size:12px; width:38px; text-align:right}

.rxBarras{display:flex; flex-direction:column; gap:9px}
.rxBarra{display:grid; grid-template-columns:minmax(90px,150px) 1fr 44px 38px;
  gap:10px; align-items:center; font-size:13px}
.rxBarra .rot{color:var(--texto-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rxBarra .trilho{background:var(--carta-2); border-radius:999px; height:9px; display:block}
.rxBarra .trilho i{display:block; height:100%; border-radius:999px;
  background:var(--dourado, #C9A227)}
.rxBarra b{text-align:right; font-variant-numeric:tabular-nums}
.rxBarra .pc{color:var(--texto-3); font-size:12px; text-align:right}

.rxColunas{display:flex; gap:6px; align-items:flex-end; height:150px}
.rxColuna{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:4px; height:100%}
.rxColuna i{display:block; width:100%; border-radius:5px 5px 0 0;
  background:var(--dourado, #C9A227); min-height:2px}
.rxColuna .n{font-size:11px; color:var(--texto-2); font-variant-numeric:tabular-nums}
.rxColuna .m{font-size:11px; color:var(--texto-3)}

.rxFalta .rxBuracos{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* Nome de pasta e de cliente em caixa alta (16/09/2026).
   Padrão pedido por ela: na peça, na capa e no protocolo o nome vai assim, e a
   tela que mostra de outro jeito obriga a conferir duas vezes. É transformação
   de **exibição**: o cadastro continua como foi escrito, e o que se copia sai
   como está no banco, que é o que a petição precisa. */
.nomePasta, .nomeCliente{text-transform:uppercase}

/* Barra da baixa em lote (16/09/2026): aparece só quando há algo marcado, e
   fica grudada no alto da lista, para não sumir ao rolar trinta prazos. */
.barraLote{position:sticky; top:8px; z-index:5; display:flex; gap:12px;
  align-items:center; background:var(--carta); border:1px solid var(--dourado, #C9A227);
  border-radius:var(--raio); padding:10px 14px; margin:0 0 12px;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}
.barraLote span{font-weight:600; font-size:13.5px}
.listaPergunta{margin:6px 0 10px; padding-left:18px; font-size:13.5px;
  color:var(--texto-2); max-height:220px; overflow:auto}
.listaPergunta b{color:var(--texto)}

/* Busca de tudo (16/09/2026): "/" ou Ctrl+K, de qualquer tela. */
.buscaGeral{position:fixed; inset:0; z-index:80; background:rgba(10,18,15,.5);
  display:flex; justify-content:center; align-items:flex-start; padding-top:12vh}
.buscaCaixa{width:min(660px,92vw); background:var(--carta); border:1px solid var(--linha-2);
  border-radius:14px; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); overflow:hidden}
.buscaCaixa input{width:100%; border:none; border-bottom:1px solid var(--linha);
  padding:18px 20px; font:inherit; font-size:17px; background:none; color:var(--texto);
  outline:none}
.buscaLista{max-height:52vh; overflow-y:auto}
.buscaItem{display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--linha); padding:12px 18px;
  font:inherit; cursor:pointer}
.buscaItem:hover, .buscaItem.on{background:var(--carta-2)}
.buscaItem .corpo{min-width:0; display:flex; flex-direction:column}
.buscaItem .nome{font-weight:600; font-size:14.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.buscaItem .meta{font-size:12.5px; color:var(--texto-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.numeroCopia{background:none; border:none; padding:0; font:inherit; color:inherit;
  cursor:pointer; border-bottom:1px dotted var(--linha-2)}
.numeroCopia:hover{color:var(--dourado, var(--texto))}

/* Ordenar pelo cabeçalho (16/09/2026): a seta só aparece na coluna ordenada,
   para a linha de títulos não virar um campo de setas. */
.tabela th.ordenavel{cursor:pointer; user-select:none; white-space:nowrap}
.tabela th.ordenavel:hover{color:var(--texto)}
.tabela th.ordAsc::after{content:" ↑"; color:var(--dourado, #C9A227)}
.tabela th.ordDesc::after{content:" ↓"; color:var(--dourado, #C9A227)}

/* A barra do telefone: marca à esquerda, menu à direita, fixa no alto. */
.barraCelular{position:fixed; top:0; left:0; right:0; height:54px; z-index:68;
  background:var(--lateral); color:var(--lateral-texto); align-items:center;
  gap:12px; padding:0 14px; border-bottom:1px solid var(--lateral-linha)}
.barraCelular .brasao{width:26px; height:26px}
.barraCelular b{font-size:15px; font-weight:700}
.barraCelular .abrirMenu{margin-left:auto; background:none; border:1px solid
  var(--lateral-linha); color:var(--lateral-texto); border-radius:9px;
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer}
.barraCelular .abrirMenu svg{width:20px; height:20px; stroke:currentColor;
  fill:none; stroke-width:2; stroke-linecap:round}

/* ---------------------------------------------- o sistema no telefone
   Varredura de 16/09/2026: no celular, a lateral empilhava inteira acima do
   conteúdo, e abrir o sistema mostrava **só o menu** — era preciso rolar uma
   tela inteira para chegar ao painel. Quem abre o BancaAdv no telefone está na
   porta do fórum, com pressa.

   Agora a lateral vira gaveta: uma barra fina no alto, com a marca e o botão de
   menu, e a lista desliza por cima quando se toca. Tocar em qualquer item
   fecha, porque em tela pequena menu aberto é tela perdida. */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .barraCelular{display:flex}
  .lateral{position:fixed; top:0; left:0; bottom:0; width:min(300px,84vw);
    height:100vh; z-index:70; transform:translateX(-102%); transition:transform .18s ease;
    box-shadow:6px 0 30px -12px rgba(0,0,0,.6)}
  body.menuAberto .lateral{transform:translateX(0)}
  body.menuAberto::after{content:""; position:fixed; inset:0; z-index:69;
    background:rgba(10,18,15,.5)}
  .conteudo{padding-top:8px}
  .app{padding-top:54px}
}
@media (min-width:901px){ .barraCelular{display:none} }

/* Aviso de canto (16/09/2026): alcança quem saiu da aba, sem roubar o foco. */
.avisoCanto{position:fixed; right:16px; bottom:76px; z-index:75; max-width:330px;
  background:var(--carta); border:1px solid var(--dourado, #C9A227);
  border-radius:var(--raio); padding:14px 40px 14px 16px; cursor:pointer;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.5); animation:sobe .18s ease}
.avisoCanto b{display:block; font-size:14px}
.avisoCanto span{display:block; font-size:12.5px; color:var(--texto-2); margin-top:3px}
.avisoCanto .fechar{position:absolute; top:8px; right:10px; background:none;
  border:none; color:var(--texto-3); font-size:18px; cursor:pointer; line-height:1}
@keyframes sobe{from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1}}

/* Parte e processo ligado confirmados (16/09/2026): cartão com faixa à esquerda,
   verde quando ligado à ficha ou ao processo, âmbar quando falta a ficha. */
.parteCartao{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--linha-2);border-left:4px solid var(--verde, #2E7D5B);background:var(--carta)}
.parteCartao.semFicha{border-left-color:var(--dourado, #B7791F)}
.parteCartao b{font-size:15px;color:var(--texto)}
.parteMarca{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;flex:none;background:var(--verde, #2E7D5B);color:#fff;font-size:13px}
.parteCartao.semFicha .parteMarca{background:var(--dourado, #B7791F)}

/* menu do "Baixar relatório": dois links (PDF, Excel) que abrem no clique */
.menuRelatorio{position:relative; display:inline-block}
.menuRelatorioLista{position:absolute; right:0; top:calc(100% + 4px); z-index:5;
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio-p);
  box-shadow:0 8px 20px rgba(17,27,36,.16); padding:6px; display:flex; flex-direction:column; gap:4px}
.menuRelatorioLista[hidden]{display:none}
.menuRelatorioLista .botao{white-space:nowrap}

/* Régua de etapas do procedimento extrajudicial (17/09/2026) */
.etapas{display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 14px}
.etapas .etapa{flex:1; min-width:120px; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:8px 6px; border:1px solid var(--linha); border-radius:var(--raio-p);
  background:var(--carta); cursor:pointer; color:var(--texto-3); position:relative}
.etapas .etapa:hover{border-color:var(--ouro)}
.etapas .etapa .bolinha{width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; background:var(--carta-2);
  color:var(--texto-3); border:1px solid var(--linha)}
.etapas .etapa .nome{font-size:12px; text-align:center; line-height:1.2}
.etapas .etapa .quando{font-size:10px; color:var(--texto-3)}
.etapas .etapa.feita{color:var(--texto-2)}
.etapas .etapa.feita .bolinha{background:var(--ok-fraco); color:var(--ok-forte); border-color:var(--ok-forte)}
.etapas .etapa.agora{border-color:var(--ouro); background:var(--ouro-fraco); color:var(--texto)}
.etapas .etapa.agora .bolinha{background:var(--ouro); color:var(--sobre-ouro); border-color:var(--ouro)}
@media (max-width:600px){.etapas .etapa .nome{font-size:11px}}

/* Menu de opções que aparece inteiro ao focar (troca do datalist, 17/09/2026) */
.menuFlutuante{position:fixed; z-index:70; background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--raio-p); box-shadow:0 8px 22px rgba(17,27,36,.18); padding:4px;
  max-height:260px; overflow:auto; min-width:120px}
.menuFlutuante[hidden]{display:none}
.menuFlutuante button{display:block; width:100%; text-align:left; background:none; border:0;
  padding:7px 10px; border-radius:6px; cursor:pointer; font-size:13.5px; color:var(--texto)}
.menuFlutuante button:hover{background:var(--carta-2)}

/* Caixa "Avisar o cliente" (17/09/2026). */
.avisoCliente{max-width:560px;width:92vw}
.avisoCliente textarea{font:inherit;padding:10px;border:1px solid var(--linha);
  border-radius:8px;background:var(--fundo);color:var(--texto);resize:vertical}
.listaDest{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.destAviso{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;
  border:1px solid var(--linha);border-radius:8px;cursor:pointer;font-size:14px}
.destAviso.bloqueado{opacity:.6;cursor:default}
.linhaResult{font-size:13px;padding:3px 0}
.linhaResult.ok{color:var(--verde,#1e7d4f)}
.linhaResult.falhou{color:var(--vermelho,#b3261e)}

/* Seletor de país com bandeira em imagem (18/09/2026). */
.paisBotao{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;
  border:1px solid var(--linha);border-radius:8px;background:var(--fundo);
  color:var(--texto);cursor:pointer;font:inherit;white-space:nowrap}
.paisBotao .caretPais{color:var(--texto-3);font-size:12px}
.flagImg{border-radius:2px;flex:none;display:inline-block;object-fit:cover}
.menuPais{padding:8px;min-width:260px;max-width:300px;max-height:340px;
  display:flex;flex-direction:column;gap:8px}
.menuPais .buscaPais{padding:8px 10px;border:1px solid var(--linha);border-radius:8px;
  font:inherit;background:var(--fundo);color:var(--texto)}
.menuPais .listaPais{overflow-y:auto;display:flex;flex-direction:column}
.menuPais .listaPais button{display:flex;align-items:center;gap:8px;padding:7px 8px;
  background:none;border:none;cursor:pointer;text-align:left;font:inherit;
  color:var(--texto);border-radius:6px;width:100%}
.menuPais .listaPais button:hover{background:var(--ouro-fraco)}
.menuPais .listaPais .nomePais{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menuPais .listaPais .ddiPais{color:var(--texto-3);flex:none}

/* Barra de ações da ficha da pessoa, fixa no topo ao rolar (19/09/2026). */
.gavetaCorpo .acoesTopo{position:sticky;top:-22px;z-index:6;background:var(--carta);
  margin:0 -24px 14px;padding:12px 24px;border-bottom:1px solid var(--linha)}

/* Acessibilidade no tema escuro (19/09/2026): no escuro o vermelho e o verde
   são CLAROS, e texto branco sobre eles fica em 2,3:1 e 1,8:1. Nesses dois
   lugares o texto tem de ser escuro. Medido, não estimado. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .botao.perigo,
  :root:not([data-theme="light"]) .relParar{color:#0A1219}
  :root:not([data-theme="light"]) .baixa.feito{color:#0A1219}
}
:root[data-theme="dark"] .botao.perigo,
:root[data-theme="dark"] .relParar{color:#0A1219}
:root[data-theme="dark"] .baixa.feito{color:#0A1219}