:root{
  --tinta:#16202e; --tinta-2:#4a5769; --tinta-3:#7b8798;
  --linha:#e2e6ec; --fundo:#f5f7fa; --papel:#fff;
  --azul:#1c4e80; --azul-claro:#eaf1f9;
  --vermelho:#b3261e; --vermelho-claro:#fdeceb;
  --ambar:#8a5a00; --ambar-claro:#fdf3e0;
  --verde:#1b6b45; --verde-claro:#e8f5ee;
  --raio:8px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- estrutura ---- */
.app{display:flex;min-height:100vh}
nav.lateral{width:216px;flex:0 0 216px;background:var(--tinta);color:#c9d3e0;
  padding:18px 0;position:sticky;top:0;height:100vh;overflow:auto}
/* A marca do sistema. O olho é o que ele faz: reparar no que passou batido —
   as 28 tarefas aceitas e nunca feitas, as 164 intimações que ninguém leu. */
nav.lateral .marca{padding:0 20px 18px;color:#fff;display:flex;align-items:center;gap:10px}
nav.lateral .marca-olho{flex:0 0 26px;line-height:0;color:#fff}
nav.lateral .marca-olho svg{width:26px;height:26px;display:block}
nav.lateral .marca-nome{font-family:Georgia,'Times New Roman',serif;font-weight:500;
  font-size:19px;letter-spacing:.5px}
nav.lateral .marca small{display:block;font-family:system-ui,sans-serif;font-weight:600;font-size:9px;color:#8d9bb0;letter-spacing:1.6px;text-transform:uppercase;margin-top:2px}
nav.lateral a{display:block;padding:9px 20px;color:#c9d3e0;font-size:14px}
nav.lateral a:hover{background:#1f2c3d;color:#fff;text-decoration:none}
nav.lateral a.ativo{background:var(--azul);color:#fff;font-weight:600}
nav.lateral .grupo{padding:16px 20px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#6d7c92}
nav.lateral details.mais{margin-top:10px;border-top:1px solid #253244;padding-top:8px}
nav.lateral details.mais > summary{padding:9px 20px;font-size:13px;color:#8d9bb0;cursor:pointer;list-style:none}
nav.lateral details.mais > summary::-webkit-details-marker{display:none}
nav.lateral details.mais > summary::before{content:'Mais  ▸';color:#8d9bb0;font-weight:400;font-size:13px}
nav.lateral details.mais[open] > summary::before{content:'Mais  ▾'}
nav.lateral details.mais > summary{font-size:0}
nav.lateral details.mais a{font-size:13.5px;color:#9fadc0;padding-left:20px}
nav.lateral .novo{margin-top:10px;border-top:1px solid #253244;padding-top:10px}
nav.lateral .novo a{font-size:13.5px;color:#9fadc0}
nav.lateral .novo a::before{content:'+ ';color:#6d7c92}
/* O conteúdo ficava encostado à esquerda: `flex:1` com teto de largura deixa
   toda a sobra do lado direito. Centralizado, a tela respira igual dos dois lados. */
/* Centralizar com margin-inline:auto no proprio <main> nao pega: ele e item
   flex com flex:1, e o teto de largura deixa a sobra toda do lado direito — foi
   o que a Maiara viu em 20/09/2026, a tela encostada na esquerda. O que
   funciona e o <main> ocupar tudo e um miolo por dentro levar o teto e as
   margens automaticas. */
main{flex:1;min-width:0;width:100%;padding:0}
main > .miolo{max-width:1280px;margin:0 auto;padding:28px 44px 64px}
@media (max-width:1400px){main > .miolo{padding:28px 32px 64px}}
.topo{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:22px;margin:0;font-weight:650}
h2{font-size:15px;margin:0 0 12px;font-weight:650}
.sub{color:var(--tinta-3);font-size:13px}
.espaco{flex:1}

/* ---- cartoes ---- */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-bottom:18px}
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.num{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px}
.num .r{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tinta-3)}
.num .v{font-size:27px;font-weight:680;margin-top:4px;letter-spacing:-.5px}
.num .p{font-size:12px;color:var(--tinta-2);margin-top:2px}
.num.alerta{border-color:#f0c4c1;background:var(--vermelho-claro)}
.num.alerta .v{color:var(--vermelho)}
.num.bom .v{color:var(--verde)}

/* ---- tabelas ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tinta-3);font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--linha)}
td{padding:10px;border-bottom:1px solid var(--linha);vertical-align:top}
tr:last-child td{border-bottom:0}
td.dir,th.dir{text-align:right}
.vazio{padding:26px 10px;color:var(--tinta-3);text-align:center;font-size:14px}

/* ---- etiquetas ---- */
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.adm{background:var(--ambar-claro);color:var(--ambar)}
.tag.jud{background:var(--azul-claro);color:var(--azul)}
.tag.cinza{background:#eef1f5;color:var(--tinta-2)}
.tag.verde{background:var(--verde-claro);color:var(--verde)}
.tag.vermelha{background:var(--vermelho-claro);color:var(--vermelho)}
.tag.ambar{background:var(--ambar-claro);color:var(--ambar)}
.fatal{color:var(--vermelho);font-weight:600}

/* ---- formularios ---- */
form.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 16px}
form.campos .largo{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid #cdd4de;border-radius:6px;
  font:inherit;font-size:14px;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:-1px;border-color:var(--azul)}
textarea{min-height:74px;resize:vertical}
.dica{font-size:12px;color:var(--tinta-3);margin-top:4px}

.btn{display:inline-block;background:var(--azul);color:#fff;border:0;border-radius:6px;
  padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:#16406b;text-decoration:none;color:#fff}
.btn.claro{background:#fff;color:var(--tinta);border:1px solid #cdd4de}
.btn.claro:hover{background:#f0f3f7;color:var(--tinta)}
.btn.mini{padding:5px 10px;font-size:12.5px}
.acoes{display:flex;gap:10px;align-items:center;margin-top:18px}

.busca{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.busca input,.busca select{width:auto;min-width:170px;flex:0 1 auto}

.aviso{background:var(--azul-claro);border:1px solid #c3d8ee;color:#14385c;
  padding:11px 14px;border-radius:var(--raio);margin-bottom:18px;font-size:13.5px}
.aviso.ok{background:var(--verde-claro);border-color:#bfe0cf;color:var(--verde)}

.barra{height:6px;background:#eef1f5;border-radius:4px;overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;background:var(--azul)}

.linha-dupla b{display:block;font-weight:600}
.linha-dupla span{color:var(--tinta-3);font-size:12.5px}

@media (max-width:820px){
  nav.lateral{width:62px;flex-basis:62px}
  nav.lateral .marca small,nav.lateral .marca-nome,nav.lateral .grupo,nav.lateral a span{display:none}
  main{padding:0}
  main > .miolo{padding:18px 14px 50px}
}

/* ---- teor da intimação ---- */
.teor{margin-top:8px;padding:12px 14px;background:#fafbfc;border:1px solid var(--linha);
  border-radius:6px;font-size:13.5px;line-height:1.65;color:var(--tinta-2);
  white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto}
details summary{cursor:pointer;font-size:13px;color:var(--tinta-2);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'▸ ';color:var(--azul);font-weight:700}
details[open] summary::before{content:'▾ '}
details summary:hover{color:var(--azul)}

/* ---- troca rápida de responsável na lista ---- */
.mini-sel{padding:5px 7px;font-size:13px;border-radius:5px;border:1px solid #d7dce4;background:#fbfcfd}
.mini-sel:hover{border-color:var(--azul);background:#fff}
form.auto{margin:0}

/* ---- tarefa já feita ---- */
tr.feita td{background:#fbfcfd}
tr.feita td b{font-weight:500;color:var(--tinta-2)}

/* ---- histórico do caso ---- */
textarea.relato{min-height:150px;line-height:1.65;font-size:14.5px;background:#fcfdfe;
  border-color:#cdd8e4;padding:12px 14px}
textarea.relato:focus{background:#fff}

/* ---- busca do topo ---- */
.busca-topo{display:flex;gap:8px;margin:-6px 0 20px;max-width:620px}
.busca-topo input{flex:1;padding:10px 14px;border-radius:20px;border:1px solid #cdd4de;
  font-size:14px;background:#fff}
.busca-topo input:focus{outline:2px solid var(--azul);outline-offset:-1px}
.busca-topo button{border:0;background:var(--azul);color:#fff;border-radius:20px;
  padding:0 20px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.busca-topo button:hover{background:#16406b}
@media (max-width:820px){.busca-topo{max-width:100%}}

/* ---- "pegar depois" ---- */
label.depois{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px;
  font-weight:400;color:var(--ambar);cursor:pointer}
label.depois input{width:auto;margin:0}
.pendencias{background:var(--ambar-claro);border:1px solid #f0dcb4;color:var(--ambar);
  padding:11px 14px;border-radius:var(--raio);margin-bottom:18px;font-size:13.5px}
.pendencias b{color:#6b4600}

/* ---- sugestões da busca ---- */
.caixa-busca{position:relative;max-width:620px;margin:-6px 0 20px}
.caixa-busca .busca-topo{margin:0}
.sugestoes{position:absolute;top:calc(100% + 4px);left:0;right:74px;z-index:40;
  margin:0;padding:5px;list-style:none;background:#fff;border:1px solid var(--linha);
  border-radius:10px;box-shadow:0 10px 28px rgba(22,32,46,.13);max-height:340px;overflow:auto}
.sugestoes li{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;
  border-radius:6px;cursor:pointer;line-height:1.35}
.sugestoes li .txt{min-width:0;flex:1}
.sugestoes li b{display:block;font-weight:600;font-size:14px;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestoes li .txt span{display:block;font-size:12.5px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestoes .ic{flex:0 0 26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:1px}
.sugestoes .ic svg{width:15px;height:15px;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sugestoes .de-cliente .ic{background:var(--azul-claro)}
.sugestoes .de-cliente .ic svg{stroke:var(--azul)}
.sugestoes .de-processo .ic{background:var(--ambar-claro)}
.sugestoes .de-processo .ic svg{stroke:var(--ambar)}
.sugestoes li:hover,.sugestoes li.sel{background:var(--azul-claro)}
.sugestoes li.sel b{color:var(--azul)}
@media (max-width:820px){.caixa-busca{max-width:100%}.sugestoes{right:0}}

/* ---- ficha em modo leitura ---- */
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px 22px}
.dados .dado.largo{grid-column:1/-1}
.dado .rot{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tinta-3);margin-bottom:3px}
.dado .val{display:block;font-size:14.5px;color:var(--tinta);line-height:1.4}
.dado .val.vazio{color:#c3cad4}
.relato-lido{font-size:14.5px;line-height:1.7;color:var(--tinta-2);white-space:pre-wrap}
.cartao h2 .btn.mini{float:right;margin-top:-3px}

/* ---- captura de documento pelo celular ---- */
.captura{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.btn.foto{cursor:pointer;display:inline-flex;align-items:center}
.lido{margin-top:16px;padding:14px 16px;background:var(--verde-claro);
  border:1px solid #bfe0cf;border-radius:var(--raio);font-size:13.5px;color:var(--verde)}
.item-lido{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid #cfe6da;font-weight:400;margin:0;cursor:pointer}
.item-lido:last-of-type{border-bottom:0}
.item-lido input{width:auto;margin:0}
.item-lido .campo{flex:0 0 130px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.4px;color:#4b7c63}
.item-lido .valor{font-size:14.5px;color:var(--tinta);font-weight:600}
.item-lido .atual{font-size:12px;color:var(--tinta-3)}

/* ---- quem está usando ---- */
nav.lateral .quem{margin-top:22px;padding:12px 20px;border-top:1px solid #26344a;
  font-size:12.5px;color:#8d9bb0}
nav.lateral .quem a{color:#9db4d4}

/* ---- dossiê ---- */
.folha{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:30px 34px}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:2px solid var(--tinta);padding-bottom:14px;margin-bottom:20px}
.marca-dossie{font-size:21px;font-weight:650;letter-spacing:.2px}
.marca-dossie small{display:block;font-size:10.5px;font-weight:400;letter-spacing:.8px;
  text-transform:uppercase;color:var(--tinta-3);margin-top:2px}
.periodo{text-align:right;font-size:13px;color:var(--tinta-2);line-height:1.6}
.dossie-tabela td,.dossie-tabela th{font-size:13px}
.dossie-tabela tr.credito td{background:#fafbfc;font-size:12px;color:var(--tinta-2);padding:5px 10px}
.dossie-tabela tfoot td{border-top:2px solid var(--tinta);border-bottom:0;padding-top:11px;font-size:14px}
.rodape-dossie{margin-top:20px;padding-top:12px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--tinta-3);line-height:1.6}

@media print{
  nav.lateral,.busca-topo,.caixa-busca,.impressao-esconde{display:none!important}
  body{background:#fff}
  main{padding:0}
  .folha{border:0;padding:0}
  .dossie-tabela tr{break-inside:avoid}
}

/* ---- tela de entrada ---- */
.entrada{max-width:420px;margin:56px auto}
/* A marca na tela de entrada: a raposa grande, acima do nome. Antes era só
   texto; agora é o desenho, e ele herda a cor do cartão — por isso o verde do
   escritório e não um valor cravado. */
.marca-entrada{text-align:center;margin:0 0 14px;line-height:0;color:#123f2e}
.marca-entrada svg{width:62px;height:62px;display:inline-block}
.cartao-entrada h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;
  font-size:32px;letter-spacing:.06em;color:#123f2e;text-align:center;margin:0}
.cartao-entrada .sublinha{text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#8a9a91;margin:6px 0 22px}
.entrada .campos{background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:22px}

/* ---- página de entrada ---- */
body.pagina-entrada{background:#1d3b36;min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:24px}
body.pagina-entrada::before{content:'';position:fixed;inset:0;
  background:radial-gradient(900px 520px at 50% -10%,rgba(196,154,79,.22),transparent 62%),
             radial-gradient(700px 520px at 50% 110%,rgba(12,30,27,.55),transparent 60%)}
main.entrada{position:relative;width:100%;max-width:394px;padding:0}

.cartao-entrada{background:#fff;border-radius:16px;padding:38px 34px 30px;
  box-shadow:0 22px 60px rgba(0,0,0,.32);text-align:center}
.brasao{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:#f3ece0;display:flex;align-items:center;justify-content:center}
.brasao svg{width:30px;height:30px;fill:none;stroke:#c49a4f;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.cartao-entrada h1{font-size:25px;font-weight:650;letter-spacing:.2px;color:#1d3b36;margin:0}
.cartao-entrada .sublinha{margin:5px 0 26px;font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:#9aa5a2}

.cartao-entrada form{text-align:left}
.cartao-entrada label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  color:#5d6b68;margin:0 0 6px;text-transform:uppercase}
.cartao-entrada select,.cartao-entrada input{width:100%;padding:12px 14px;margin-bottom:17px;
  border:1px solid #dce3e1;border-radius:9px;font:inherit;font-size:15px;background:#fbfcfc}
.cartao-entrada select:focus,.cartao-entrada input:focus{outline:0;border-color:#2d6b5e;
  background:#fff;box-shadow:0 0 0 3px rgba(45,107,94,.13)}

.btn-entrar{width:100%;padding:13px;border:0;border-radius:9px;background:#1d3b36;color:#fff;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:5px}
.btn-entrar:hover{background:#153029}

.cartao-entrada .recado{background:#f6f2e9;border:1px solid #e6dcc6;color:#6b5426;
  border-radius:9px;padding:11px 13px;margin-bottom:20px;font-size:13px;
  line-height:1.55;text-align:left}
.cartao-entrada .recado.erro{background:var(--vermelho-claro);border-color:#f0c4c1;color:var(--vermelho)}

.rodape-entrada{position:relative;text-align:center;margin:20px 0 0;
  font-size:11.5px;letter-spacing:.4px;color:rgba(255,255,255,.5)}

/* ---- painel financeiro ---- */
.cartao.meta{background:linear-gradient(135deg,#1d3b36,#2d5b52);color:#fff;border:0}
.meta-topo{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.meta-topo .rot{display:block;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:4px}
.meta-topo .grande{font-size:30px;font-weight:680;letter-spacing:-.6px}
.meta-topo .grande.fraco{font-size:20px;color:rgba(255,255,255,.65)}
.trilho{height:10px;background:rgba(255,255,255,.16);border-radius:6px;overflow:hidden}
.trilho i{display:block;height:100%;background:linear-gradient(90deg,#c49a4f,#e0bd7e);border-radius:6px}
.meta-baixo{display:flex;gap:26px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;
  color:rgba(255,255,255,.8)}
.meta-baixo b{color:#fff}

.grafico{display:flex;gap:10px;align-items:flex-end;height:190px;padding-top:8px}
.grafico .coluna{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.grafico .valor{font-size:10.5px;color:var(--tinta-3);margin-bottom:5px;height:14px}
.grafico .haste{flex:1;width:100%;max-width:56px;display:flex;align-items:flex-end;
  background:#f1f4f8;border-radius:5px;overflow:hidden}
.grafico .haste i{display:block;width:100%;background:linear-gradient(180deg,#2d6b5e,#1d3b36);
  border-radius:5px 5px 0 0;min-height:2px}
.grafico .mes{margin-top:7px;font-size:12px;font-weight:600;color:var(--tinta-2);text-transform:capitalize}
.grafico .qtd{font-size:11px;color:var(--tinta-3)}

.dois{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.dois{grid-template-columns:1fr}}

/* ---- dossiê de resgate ---- */
.lista-docs{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.8;color:var(--tinta-2)}
.lista-docs li.tem{color:var(--verde)}
.lista-docs li.falta{color:var(--vermelho);text-decoration:line-through;text-decoration-color:#e8b3af}
.providencias{margin:8px 0 0;padding-left:20px;font-size:14.5px;line-height:1.9}
.providencias b{color:var(--tinta)}

/* ------------------------------------------------------ abas dentro da tela

   O sistema cresceu empilhando cartão sobre cartão: a ficha do cliente tinha
   sete, e quem procurava um telefone rolava a página inteira. Uma tela deve
   responder uma pergunta por vez. As abas guardam o resto a um clique, sem
   esconder que existe. */
.abas {
  display: flex; gap: 2px; margin: 18px 0 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--linha, #e6ebe8);
}
.abas a {
  padding: 10px 16px; text-decoration: none; color: var(--tinta-2, #5d6b64);
  font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.abas a:hover { color: var(--tinta, #1d2b24); }
.abas a.aqui { color: var(--verde, #123f2e); border-bottom-color: var(--verde, #123f2e); font-weight: 600; }
.abas a .conta {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: var(--fundo-2, #eef2f0); font-size: 12px; font-weight: 600; color: var(--tinta-2);
}
.abas a.aqui .conta { background: var(--verde, #123f2e); color: #fff; }

/* a ação principal da tela, para não competir com as secundárias */
.acao-principal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 }
.acao-principal .btn:not(.claro) { padding: 11px 22px; font-size: 15px }

/* detalhe que não precisa estar aberto o tempo todo */
details.recolhe { border-top: 1px solid var(--linha, #e6ebe8); padding-top: 10px; margin-top: 14px }
details.recolhe > summary {
  cursor: pointer; color: var(--tinta-2, #5d6b64); font-size: 13px; list-style: none;
}
details.recolhe > summary::before { content: '▸ '; }
details.recolhe[open] > summary::before { content: '▾ '; }
details.recolhe > summary:hover { color: var(--tinta, #1d2b24) }

/* ---- os dois sinos do topo: prazo do dia e mensagem de gente ---- */
.caixa-busca{display:flex;align-items:center;gap:14px;position:relative}
.caixa-busca .busca-topo{flex:1;min-width:0}
.sinos{display:flex;gap:4px;flex:0 0 auto}
.sino{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;color:var(--tinta-3);
  border:1px solid transparent}
.sino:hover{background:#eef2f7;color:var(--tinta);text-decoration:none}
.sino svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sino.tem{color:var(--tinta)}
.sino b{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;
  background:var(--vermelho);color:#fff;border-radius:20px;font-size:10.5px;
  line-height:17px;text-align:center;font-weight:700;box-shadow:0 0 0 2px var(--fundo)}

/* ==================================================================
   Gaveta, paleta de comandos e avisos — a camada que dá leveza.
   A regra aqui é: nada trava, nada pisca, e Esc sempre volta para onde
   a pessoa estava. Transição curta, porque animação longa vira espera.
   ================================================================== */

/* ---- gaveta: o caso abre ao lado, a lista continua visível ---- */
.fundo-gaveta{position:fixed;inset:0;background:rgba(16,24,36,.28);opacity:0;
  pointer-events:none;transition:opacity .16s ease;z-index:40;backdrop-filter:blur(1px)}
.fundo-gaveta.aberta{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(760px,88vw);background:var(--papel);
  border-left:1px solid var(--linha);box-shadow:-18px 0 44px rgba(16,24,36,.13);
  transform:translateX(100%);transition:transform .2s cubic-bezier(.32,.72,0,1);
  z-index:41;display:flex;flex-direction:column}
.gaveta.aberta{transform:none}
.gaveta-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--linha);flex:0 0 auto}
.gaveta-titulo{font-weight:650;font-size:15px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gaveta-expandir{font-size:12px;color:var(--tinta-3)}
.gaveta-fechar{border:0;background:none;font-size:24px;line-height:1;color:var(--tinta-3);
  cursor:pointer;padding:0 2px}
.gaveta-fechar:hover{color:var(--tinta)}
.gaveta-corpo{flex:1;overflow:auto;padding:20px 22px 40px}
.gaveta-corpo .topo{margin-bottom:14px}
.gaveta-corpo .cartao{box-shadow:none}
.gaveta-carregando{color:var(--tinta-3);font-size:13px;padding:30px 0;text-align:center}
body.com-gaveta{overflow:hidden}

/* ---- paleta de comandos: Ctrl+K ---- */
.paleta{position:fixed;inset:0;background:rgba(16,24,36,.34);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding-top:14vh;
  backdrop-filter:blur(2px)}
.paleta.aberta{display:flex}
.paleta-caixa{width:min(620px,92vw);background:var(--papel);border-radius:14px;
  box-shadow:0 24px 70px rgba(16,24,36,.3);overflow:hidden;
  animation:sobe .14s cubic-bezier(.32,.72,0,1)}
@keyframes sobe{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.paleta-campo{width:100%;border:0;border-bottom:1px solid var(--linha);border-radius:0;
  padding:17px 20px;font-size:16px;outline:none}
.paleta-campo:focus{outline:none;border-color:var(--linha)}
.paleta-lista{list-style:none;margin:0;padding:6px;max-height:48vh;overflow:auto}
.paleta-lista li{display:flex;align-items:baseline;gap:10px;padding:9px 14px;
  border-radius:8px;cursor:pointer;font-size:14px}
.paleta-lista li.sel{background:var(--azul-claro)}
.paleta-lista li.sel .p-t{color:var(--azul);font-weight:600}
.paleta-lista li .p-t{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paleta-lista li .p-s{color:var(--tinta-3);font-size:12px;margin-left:auto;
  flex:0 0 auto;padding-left:12px}
.paleta-lista li.nada{color:var(--tinta-3);cursor:default;justify-content:center;padding:22px}
.paleta-pe{border-top:1px solid var(--linha);padding:9px 18px;font-size:11.5px;color:var(--tinta-3)}

/* ---- avisos que aparecem no canto e somem sozinhos ---- */
.avisos{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end}
.aviso-flutua{background:var(--tinta);color:#fff;padding:10px 16px;border-radius:9px;
  font-size:13.5px;box-shadow:0 8px 26px rgba(16,24,36,.24);
  animation:entra .16s cubic-bezier(.32,.72,0,1);max-width:360px}
.aviso-flutua.ok{background:var(--verde)}
.aviso-flutua.erro{background:var(--vermelho)}
.aviso-flutua.sai{opacity:0;transform:translateY(6px);transition:all .3s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- linha marcada pelo teclado (j/k) ---- */
[data-linha].marcada{box-shadow:inset 3px 0 0 var(--azul);background:#f4f7fb}
[data-linha].sumiu{opacity:0;transform:translateX(10px);transition:all .2s ease}

/* ---- dica do atalho na busca do topo ---- */
.atalho-k{position:absolute;right:112px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--tinta-3);border:1px solid var(--linha);border-radius:5px;
  padding:2px 6px;background:#fff;pointer-events:none}
@media (max-width:900px){.atalho-k{display:none}}

/* ---- contradições na ficha do processo ---- */
.contra{margin:6px 0 0;padding-left:20px;line-height:1.6}
.contra li{margin-bottom:5px}
.contra .sub{display:block;font-size:12px;color:inherit;opacity:.8}

/* ---- a prova do protocolo, dentro do aviso de contradição ---- */
.prova{margin-top:12px;padding-top:11px;border-top:1px solid #f0dcb4}
.prova .fontes{margin:6px 0 0;padding-left:20px;font-size:12.5px;line-height:1.7}
.prova .fontes b{font-weight:600}
.prova-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.prova-acoes .em-linha{display:inline}

/* O nome do cliente no topo de qualquer tela do caso leva de volta à ficha
   dele. A Maiara notou que se entra na peça, no dossiê, no WhatsApp — e não se
   volta: o nome estava ali parecendo enfeite, quando é o caminho natural de
   volta. O tracejado é o que avisa que aquilo clica. */
.dono-topo{color:var(--tinta-2);font-size:13px;text-decoration:none;
  border-bottom:1px dashed var(--linha);padding-bottom:1px}
.dono-topo:hover{color:var(--tinta);border-bottom-style:solid}

/* ───────── Faixa de situação da ficha do processo ─────────
   O que está acontecendo com o caso, antes de qualquer campo de cadastro.
   A cor vem da urgência; o fluxo ao pé mostra em que ponto do caminho está. */
.faixa{border:1px solid var(--linha);border-left:5px solid var(--tinta-3);
  background:var(--papel);border-radius:var(--raio);padding:14px 18px;margin:14px 0 4px}
.faixa.vencido{border-left-color:var(--vermelho);background:var(--vermelho-claro)}
.faixa.urgente{border-left-color:var(--vermelho);background:var(--vermelho-claro)}
.faixa.atencao{border-left-color:var(--ambar);background:var(--ambar-claro)}
.faixa.tranquilo{border-left-color:var(--verde);background:var(--verde-claro)}

.faixa-linha{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.faixa-titulo{font-size:16.5px;font-weight:700;letter-spacing:.2px}
.faixa.vencido .faixa-titulo,.faixa.urgente .faixa-titulo{color:var(--vermelho)}
.faixa.atencao .faixa-titulo{color:var(--ambar)}
.faixa.tranquilo .faixa-titulo{color:var(--verde)}
.faixa-detalhe{margin-top:5px;font-size:13.5px;color:var(--tinta-2);max-width:92ch}
.faixa-outras{display:flex;gap:6px;flex-wrap:wrap}
.tambem{font-size:11.5px;font-weight:600;color:var(--tinta-2);background:rgba(255,255,255,.75);
  border:1px solid var(--linha);border-radius:20px;padding:2px 9px}

/* O fluxo: passo feito, passo de agora, passo que ainda vem. */
.fluxo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;
  list-style:none;margin:13px 0 2px;padding:0}
.fluxo .passo{display:flex;align-items:center;gap:7px;padding:0 2px 6px 0;position:relative}
.fluxo .bolha{width:11px;height:11px;border-radius:50%;flex:none;
  border:2px solid var(--tinta-3);background:var(--papel)}
.fluxo .nome{font-size:12.5px;color:var(--tinta-2);white-space:nowrap}
.fluxo .data{font-size:11.5px;color:var(--tinta-3);white-space:nowrap}
.fluxo .seta{width:26px;height:1.5px;background:var(--linha);margin:0 9px;flex:none}

.fluxo .passo.feito .bolha{background:var(--tinta-3);border-color:var(--tinta-3)}
.fluxo .passo.feito .nome{color:var(--tinta-3)}
.fluxo .passo.agora .nome{font-weight:700;color:var(--tinta)}
.fluxo .passo.agora .data{font-weight:700;color:var(--tinta-2)}
.fluxo .passo.depois .bolha{border-style:dashed;border-color:#c3cbd6}
.fluxo .passo.depois .nome,.fluxo .passo.depois .data{color:#9aa4b2}

.faixa.vencido .fluxo .passo.agora .bolha,.faixa.urgente .fluxo .passo.agora .bolha{
  background:var(--vermelho);border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.faixa.atencao .fluxo .passo.agora .bolha{
  background:var(--ambar);border-color:var(--ambar);box-shadow:0 0 0 3px rgba(138,90,0,.16)}
.faixa.tranquilo .fluxo .passo.agora .bolha{
  background:var(--verde);border-color:var(--verde);box-shadow:0 0 0 3px rgba(27,107,69,.16)}

@media (max-width:900px){
  .fluxo .seta{width:14px;margin:0 6px}
  .fluxo .nome{white-space:normal}
}

/* "Mesma casa de": copiar o endereço de quem já está cadastrado, em vez de
   redigitar o da família e criar divergência de CEP entre marido e mulher. */
.mesma-casa{margin-bottom:14px}
.mesma-casa > label{display:block;font-size:13px;font-weight:600;color:var(--tinta-2);margin-bottom:6px}
.mesma-casa-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mesma-casa-linha input{flex:1;min-width:230px}
.mesma-casa-linha .sub{font-size:12.5px}