/* Casca do sistema — Pizoni Fogaça, 03/08/2026. Bloco 2.
   Sem logo e sem rodapé de timbrado: Arthur aplica o timbrado depois, e essa
   regra da casa vale aqui igual. */

:root {
  --fundo: #f5f6f8;
  --papel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6572;
  --borda: #e2e6eb;
  --realce: #1f4e79;
  --realce-claro: #eaf1f8;
  --lateral-fundo: #16202b;
  --lateral-texto: #c6d2de;
  --lateral-ativo: #223243;
  --alerta-fundo: #fff8e6;
  --alerta-borda: #e6c86a;
  --erro-fundo: #fdecea;
  --erro-borda: #d98177;
  --pronto: #2e7d4f;
  --parcial: #b07d1a;
  --previsto: #5b6572;
  --aberto: #9a4b4b;
}

:root[data-tema="escuro"],
html[data-tema="auto"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] {
    --fundo: #0f1419;
    --papel: #161d25;
    --texto: #e4e9ee;
    --suave: #94a2b1;
    --borda: #26313d;
    --realce: #6fa8dc;
    --realce-claro: #1b2733;
    --lateral-fundo: #0b1116;
    --lateral-texto: #b6c4d2;
    --lateral-ativo: #1c2a38;
    --alerta-fundo: #2a2412;
    --alerta-borda: #6b5a20;
    --erro-fundo: #2e1a18;
    --erro-borda: #7a3b34;
  }
}

:root[data-tema="escuro"] {
  --fundo: #0f1419;
  --papel: #161d25;
  --texto: #e4e9ee;
  --suave: #94a2b1;
  --borda: #26313d;
  --realce: #6fa8dc;
  --realce-claro: #1b2733;
  --lateral-fundo: #0b1116;
  --lateral-texto: #b6c4d2;
  --lateral-ativo: #1c2a38;
  --alerta-fundo: #2a2412;
  --alerta-borda: #6b5a20;
  --erro-fundo: #2e1a18;
  --erro-borda: #7a3b34;
}

:root[data-tema="claro"] {
  --fundo: #f5f6f8;
  --papel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6572;
  --borda: #e2e6eb;
  --realce: #1f4e79;
  --realce-claro: #eaf1f8;
  --lateral-fundo: #16202b;
  --lateral-texto: #c6d2de;
  --lateral-ativo: #223243;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

/* ------------------------------------------------------------- estrutura */
.grade { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.lateral {
  background: var(--lateral-fundo);
  color: var(--lateral-texto);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marca { padding: 20px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca-nome { font-weight: 650; font-size: 16px; color: #fff; letter-spacing: .2px; }
.marca-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
             opacity: .6; margin-top: 2px; }

.lateral nav { padding: 10px 8px; flex: 1; }
.grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
         opacity: .45; padding: 16px 12px 6px; }

.link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 1px 0; border-radius: 6px;
  color: inherit; text-decoration: none; font-size: 14px;
}
.link:hover { background: rgba(255,255,255,.06); }
.link.ativo { background: var(--lateral-ativo); color: #fff; font-weight: 600; }
.icone { width: 18px; text-align: center; opacity: .8; font-size: 13px; }
.rotulo { flex: 1; }

.pastilha { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.estado-pronto   { background: var(--pronto); }
.estado-parcial  { background: var(--parcial); }
.estado-previsto { background: var(--previsto); }
.estado-aberto   { background: var(--aberto); }

.rodape-lateral { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08);
                  font-size: 13px; }
.quem { font-weight: 600; color: #fff; margin-bottom: 6px; }
.acoes-lateral { display: flex; gap: 10px; align-items: center; }
.acoes-lateral a, .acoes-lateral button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; text-decoration: none; opacity: .75; padding: 2px 4px;
}
.acoes-lateral a:hover, .acoes-lateral button:hover { opacity: 1; }

.conteudo { display: flex; flex-direction: column; min-width: 0; }

.topo {
  background: var(--papel); border-bottom: 1px solid var(--borda);
  padding: 10px 24px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
.busca-abre {
  display: flex; align-items: center; gap: 8px;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 7px;
  color: var(--suave); padding: 7px 12px; cursor: pointer; font: inherit;
  min-width: 280px;
}
.busca-abre kbd {
  border: 1px solid var(--borda); border-radius: 4px; padding: 0 5px;
  font-size: 11px; background: var(--papel);
}
.so-estreito { display: none; background: none; border: 0; color: inherit;
               font-size: 20px; cursor: pointer; }

main { padding: 26px 28px 60px; max-width: 1080px; }

/* ---------------------------------------------------------------- textos */
h1 { font-size: 24px; margin: 0 0 6px; font-weight: 650; }
h2 { font-size: 16px; margin: 28px 0 10px; font-weight: 650; }
p { margin: 0 0 12px; }
code { background: var(--realce-claro); padding: 2px 6px; border-radius: 4px;
       font-family: Consolas, monospace; font-size: 13px; }
.mono { font-family: Consolas, monospace; font-size: 13px; }
a { color: var(--realce); }

.nota, .alerta, .erro {
  border-radius: 8px; padding: 13px 16px; margin: 14px 0; font-size: 14px;
  border: 1px solid var(--borda); background: var(--papel);
}
.alerta { background: var(--alerta-fundo); border-color: var(--alerta-borda); }
.erro   { background: var(--erro-fundo);   border-color: var(--erro-borda); }
.nota   { border-left: 3px solid var(--realce); }
.alerta code { display: block; margin-top: 8px; background: rgba(0,0,0,.06); }

.faixa { display: inline-block; padding: 4px 12px; border-radius: 20px;
         font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.promessa { font-size: 16px; }
.falta { color: var(--suave); }

/* --------------------------------------------------------------- cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           gap: 12px; margin: 16px 0; }
.cartao { background: var(--papel); border: 1px solid var(--borda);
          border-radius: 9px; padding: 14px 16px; }
.numero { font-size: 26px; font-weight: 650; line-height: 1.15; }
.numero.pequeno { font-size: 13px; font-weight: 600; }
.legenda { font-size: 12px; color: var(--suave); margin-top: 2px; }

table { width: 100%; border-collapse: collapse; background: var(--papel);
        border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
        font-size: 13.5px; }
th { text-align: left; background: var(--realce-claro); padding: 9px 12px;
     font-weight: 600; font-size: 12px; text-transform: uppercase;
     letter-spacing: .4px; color: var(--suave); }
td { padding: 9px 12px; border-top: 1px solid var(--borda); }
tbody tr:nth-child(even) { background: rgba(127,127,127,.035); }

.vazio, .rodape-nota { color: var(--suave); font-size: 13px; }

/* ---------------------------------------------------------------- login */
.entrada { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.entrada-lado {
  background: var(--lateral-fundo); color: var(--lateral-texto);
  padding: 56px 48px; display: flex; flex-direction: column;
  justify-content: center;
}
.marca-grande { margin-bottom: 34px; }
.marca-grande .marca-nome { font-size: 22px; }
.entrada-lado h1 { color: #fff; font-size: 30px; max-width: 15ch; }
.aviso-lado { font-size: 13px; opacity: .65; margin-top: 26px; max-width: 42ch; }

.entrada-form { padding: 56px 48px; display: flex; flex-direction: column;
                justify-content: center; max-width: 460px; }
.entrada-form h2 { margin-top: 0; font-size: 20px; }
.entrada-form label { display: block; font-size: 13px; font-weight: 600;
                      margin: 14px 0 5px; }
.entrada-form input {
  width: 100%; padding: 10px 12px; font: inherit; border-radius: 7px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
}
.entrada-form button {
  margin-top: 22px; width: 100%; padding: 11px; font: inherit; font-weight: 600;
  background: var(--realce); color: #fff; border: 0; border-radius: 7px;
  cursor: pointer;
}

/* -------------------------------------------------------------- paleta */
/* `display: flex` de uma classe de autor VENCE o `[hidden]` do navegador
   (origem de autor supera user-agent no cascade, independente de
   especificidade) — sem o `.cortina[hidden]` abaixo, a busca ficava aberta
   por cima da tela inteira em toda pagina, escurecendo tudo, mesmo ninguem
   tendo clicado nela. Achado em 12/08/2026 verificando o Inicio no navegador. */
.cortina[hidden] { display: none; }
.cortina { position: fixed; inset: 0; background: rgba(0,0,0,.45);
           display: flex; justify-content: center; padding-top: 12vh; z-index: 50; }
.paleta { background: var(--papel); border: 1px solid var(--borda);
          border-radius: 11px; width: min(520px, 92vw); overflow: hidden;
          box-shadow: 0 18px 50px rgba(0,0,0,.3); height: fit-content; }
.paleta input { width: 100%; border: 0; border-bottom: 1px solid var(--borda);
                padding: 15px 18px; font: inherit; font-size: 16px;
                background: transparent; color: var(--texto); outline: none; }
.paleta ul { list-style: none; margin: 0; padding: 6px; max-height: 46vh;
             overflow-y: auto; }
.paleta li a { display: flex; gap: 10px; padding: 9px 12px; border-radius: 6px;
               color: var(--texto); text-decoration: none; }
.paleta li a:hover, .paleta li.marcado a { background: var(--realce-claro); }
.paleta-rodape { padding: 10px 18px; border-top: 1px solid var(--borda);
                 font-size: 12px; color: var(--suave); }

@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; width: 250px; z-index: 20;
             transform: translateX(-100%); transition: transform .18s; }
  .lateral.aberta { transform: none; }
  .so-estreito { display: block; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-lado { padding: 34px 26px; }
  .entrada-form { padding: 34px 26px; }
  main { padding: 18px 16px 50px; }
  .busca-abre { min-width: 0; flex: 1; }
}

/* Selo do vinculo processo <-> pasta do caso (Bloco 4, item 4.4).
   Duas cores porque a diferenca entre DECLARADO e PRESUMIDO e o assunto
   inteiro daquele item: presumido veio de varredura de texto, que ja provou
   puxar processo de terceiro citado como precedente. Quem le a tela precisa
   saber de qual dos dois esta olhando sem abrir arquivo nenhum. */
.selo { display: inline-block; padding: 2px 8px; border-radius: 10px;
        font-size: 11px; font-weight: 650; letter-spacing: .4px;
        text-transform: uppercase; color: #fff; vertical-align: middle; }
.selo-ok    { background: var(--pronto); }
.selo-aviso { background: var(--parcial); }
.vinculo    { line-height: 1.7; }

/* Polo da parte, na visao de cadastro. O codigo sai CRU de proposito: "A" e
   "P" sao ativo e passivo, mas "D" e "T" tambem aparecem (20 e 86 vezes) e
   nao estao documentados no que temos. Batizar de memoria seria inventar dado
   de parte processual. */
.polo { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 3px;
        background: var(--realce-claro); font-size: 10px; font-weight: 700;
        text-align: center; vertical-align: middle; }

/* Bloco de calculo de prazo (item 3.7 ligado a tela). */
.prazo { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--borda);
         border-radius: 8px; }
.prazo h3 { margin: 0 0 10px; font-size: 15px; }
.prazo .venc { font-size: 16px; margin: 14px 0 6px; }
.prazo details { margin: 10px 0; }
.prazo summary { cursor: pointer; font-size: 13px; }

/* Painel de prazos do Inicio (5.4). Vencido usa a mesma cor de erro que o
   resto da casca — prazo perdido nao e "mais um cartao", e a cor precisa
   dizer isso antes de quem le contar os itens. */
.cartao-vencido { border-color: var(--erro-borda); background: var(--erro-fundo); }
.cartao-hoje { border-color: var(--alerta-borda); background: var(--alerta-fundo); }
.titulo-vencido { color: var(--aberto); }
.nota-inline { font-size: 12px; color: var(--suave); }
.conta { display: inline-block; margin-left: 8px; padding: 1px 8px;
         border-radius: 10px; background: var(--realce-claro); font-size: 12px;
         font-weight: 650; vertical-align: middle; }
.limpar { font-size: 13px; color: var(--suave); align-self: center; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
           margin: 14px 0; }
.filtros select, .filtros button {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--texto); font: inherit;
}
.filtros button { background: var(--realce); color: #fff; border: 0;
                   cursor: pointer; }

/* --------------------------------------------------------- Tarefas (5.1) */
.barra-acoes { margin: 0 0 14px; }

.btn-primario {
  display: inline-block; padding: 8px 18px; border-radius: 7px;
  background: var(--realce); color: #fff; font: inherit; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
}
.btn-primario:hover { opacity: .88; }

.btn-secundario {
  display: inline-block; padding: 8px 14px; border-radius: 7px;
  background: transparent; color: var(--suave); font: inherit;
  border: 1px solid var(--borda); cursor: pointer; text-decoration: none;
}
.btn-secundario:hover { background: var(--realce-claro); }

.btn-link { font-size: 13px; color: var(--realce); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

.btn-acao {
  background: transparent; color: var(--pronto); border: 1px solid var(--pronto);
  border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer;
}
.btn-acao:hover { background: #eaf5ee; }

.btn-check {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borda);
  background: transparent; color: var(--suave); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.btn-check:hover { border-color: var(--pronto); color: var(--pronto); }
.btn-check-feito { border-color: var(--pronto); color: var(--pronto);
                   background: #eaf5ee; }
.td-acao { width: 36px; text-align: center; }

.linha-vencida td { background: var(--erro-fundo); }
.riscado { text-decoration: line-through; color: var(--suave); }

/* 18/09/2026 (tarde) — Arthur: a prioridade e TARJA ao lado do nome da
   tarefa: "se for urgente, tarja vermelha; media, amarela; baixa, verde".
   Cor solida e branco (amarelo com texto escuro): tem de ler de longe. */
.prioridade-alta  { background: #d33a2c; color: #fff; }
.prioridade-media { background: #f0b429; color: #3a2a00; }
.prioridade-baixa { background: #1f9d55; color: #fff; }

/* Formulário de tarefa */
.formulario { max-width: 700px; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  padding: 9px 12px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--texto); font: inherit; font-size: 15px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--realce); border-color: transparent;
}
.linha-campos { display: flex; gap: 18px; flex-wrap: wrap; }
.linha-campos .campo { flex: 1; min-width: 160px; }
.obrigatorio { color: var(--aberto); }
.acoes-form { display: flex; gap: 10px; align-items: center;
              flex-wrap: wrap; margin-top: 24px; }
.separador { color: var(--borda); }

/* Etiquetas de área e triagem por IA (Bloco 3, itens 3.1 e 3.5/3.10) */
.etiqueta { display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 4px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }
.area-civel { background: #dbeafe; color: #1e40af; }
.area-federal { background: #ede9fe; color: #5b21b6; }
.area-trabalhista { background: #fef3c7; color: #92400e; }
.area-superior { background: #fce7f3; color: #9d174d; }
.area-outros { background: #e5e7eb; color: #374151; }
.monte-exige { background: #fee2e2; color: #991b1b; }
.monte-ciencia { background: #dcfce7; color: #166534; }
.monte-perdeu { background: #e5e7eb; color: #4b5563; }
.selo-ia { display: inline-block; font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: 3px; background: var(--realce);
  color: var(--papel); vertical-align: middle; }
.triagem-ia { margin-bottom: 16px; }
.chips-monte { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 8px 0; }
.chip { font-size: 13px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.chip .conta { font-weight: 700; margin-left: 5px; }
.chip-exige.ativo, .chip-exige:hover { border-color: #991b1b; background: #fee2e2; color: #991b1b; }
.chip-ciencia.ativo, .chip-ciencia:hover { border-color: #166534; background: #dcfce7; color: #166534; }
.chip-perdeu.ativo, .chip-perdeu:hover { border-color: #4b5563; background: #e5e7eb; color: #4b5563; }
.chip-sem-ia { opacity: .65; cursor: default; }
.corrigir-monte { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borda); }
.rotulo-corrigir { font-size: 13px; color: var(--suave); }
.btn-corrigir { font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
  cursor: pointer; }
.btn-corrigir:hover { border-color: var(--realce); color: var(--realce); }

/* Biblioteca — busca no acervo (Bloco 12) */
.resultados-biblioteca { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.resultado-item { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; }
.resultado-item summary { cursor: pointer; font-weight: 600; color: var(--realce); }
.trecho-acervo { white-space: pre-wrap; font-family: inherit; font-size: 13.5px;
  margin: 8px 0 0; padding: 0; background: none; color: var(--texto); line-height: 1.5; }
.meta-tarefa { font-size: 12px; color: var(--suave); margin-top: 24px; }

/* Publicações — Fase 1 do CRONOGRAMA_MELHORIAS_2026-09.md (11/09/2026):
   lote (1.1), grupos de duplicatas (1.2), filtros novos (1.3), detalhe (1.4) */
.barra-lote { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 10px 0; padding: 8px 12px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--realce-claro); }
.perigo-borda { border-color: var(--erro-borda); color: var(--aberto); }
.perigo-borda:hover { background: var(--erro-fundo); }
.aviso-acao { margin: 8px 0; }
.atalhos-periodo { display: inline-flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--suave); }
.atalhos-periodo a { color: var(--realce); text-decoration: none;
  padding: 2px 7px; border: 1px solid var(--borda); border-radius: 999px; }
.atalhos-periodo a:hover { background: var(--realce-claro); }
.rotulo-filtro { font-size: 12px; color: var(--suave); display: inline-flex;
  gap: 6px; align-items: center; }
.grupo-dup { margin: 14px 0 18px; border: 1px solid var(--borda);
  border-radius: 8px; overflow: hidden; }
.grupo-dup-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; background: var(--realce-claro); font-size: 13px; }
.grupo-dup-acao { margin-left: auto; }
.linha-fica td { background: #eaf5ee; }
.etiqueta.fica { background: #dcfce7; color: #166534; margin-left: 0; }
.etiqueta.copia { background: #e5e7eb; color: #4b5563; margin-left: 0; }
.restante { display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; font-size: 12px; font-weight: 650;
  background: var(--realce-claro); }
.restante-perto { background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); }
.restante-vencido { background: var(--erro-fundo); border: 1px solid var(--erro-borda);
  color: var(--aberto); }
.vincular-caso select { max-width: 320px; }

/* ------------------------------------------- Tarefas, Fase 2 (11/09/2026)
   Regras ACRESCENTADAS ao fim, sem mexer nas de cima: outro agente trabalha
   em publicacoes.* ao mesmo tempo, e reescrever o arquivo colidiria. */

/* A pastilha da lateral e um ponto de 7px; dentro de tabela e de texto ela
   carrega palavra ("pub", "atrasada"), e precisa de largura para isso. */
main .pastilha { width: auto; height: auto; border-radius: 10px;
  padding: 1px 8px; font-size: 11px; font-weight: 650; display: inline-block;
  vertical-align: middle; background: var(--realce-claro); color: var(--texto); }
main .pastilha.estado-aberto { background: var(--aberto); color: #fff; }

.resumo-responsaveis { display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin: 6px 0 14px; }
.resumo-responsaveis .chip.ativo { border-color: var(--realce);
  background: var(--realce-claro); }
.conta-atraso { background: var(--aberto); color: #fff; }
.titulo-vencido .conta-atraso { margin-left: 8px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda);
  margin: 8px 0 4px; }
.aba { padding: 8px 14px; text-decoration: none; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba.ativa { color: var(--texto); border-bottom-color: var(--realce);
  font-weight: 600; }

.filtros-tarefas input[type="search"], .filtros-tarefas input[type="date"] {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--texto); font: inherit; }
.periodos { font-size: 13px; }
.periodos summary { cursor: pointer; padding: 7px 10px; border: 1px solid var(--borda);
  border-radius: 7px; background: var(--papel); display: inline-block; }
.periodos[open] { flex-basis: 100%; }
.periodo-linha { margin: 6px 0 0 4px; }
.periodo-linha input[type="date"] { margin: 0 4px; }

.processo-rotulo { font-size: 12.5px; line-height: 1.35; max-width: 320px; }
h2 + .processo-rotulo { font-size: 14px; max-width: none; }

/* Busca de processo pelo nome (2.2): a lista de sugestoes fica colada ao
   campo, por cima do que vem abaixo. */
.campo-processo { position: relative; }
.sugestoes { list-style: none; margin: 0; padding: 4px; position: absolute;
  top: 100%; left: 0; right: 0; z-index: 10; background: var(--papel);
  border: 1px solid var(--borda); border-radius: 8px; max-height: 300px;
  overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.sugestoes[hidden] { display: none; }
.sugestoes li { padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; line-height: 1.35; }
.sugestoes li:hover, .sugestoes li.marcado { background: var(--realce-claro); }
.sugestoes li.vazio { color: var(--suave); cursor: default; }
.opcao-inline { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--suave); margin-top: 6px; font-weight: 500; }
.opcao-inline input[type="checkbox"] { width: auto; margin: 0; }
.campo-processo input[type="text"].com-vinculo { border-color: var(--pronto); }

/* Detalhe da tarefa (2.1, 2.5, 2.6). */
.ficha-tarefa { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.descricao-tarefa { border: 1px solid var(--borda); border-radius: 8px;
  padding: 12px 14px; background: var(--papel); max-height: 420px;
  overflow-y: auto; }
.bloco-concluir { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--papel); }
.bloco-concluir h2 { margin-top: 0; }
.comentarios { list-style: none; margin: 0 0 14px; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.comentario { border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 14px; background: var(--papel); }
.comentario-meta { font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.comentario-texto { white-space: pre-wrap; }
.tabela-alteracoes td { vertical-align: top; }
.valor-alteracao { max-width: 260px; overflow-wrap: anywhere; font-size: 12.5px;
  white-space: pre-wrap; max-height: 120px; overflow-y: auto; display: block; }

/* Agenda: visoes semanal e diaria (item 5.5). */
.agenda-semana th { text-align: left; }
.agenda-semana th a { text-decoration: none; }
.agenda-semana td.cal-dia { vertical-align: top; min-height: 120px; }
.acoes-rapidas { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 12px 0 18px; }

/* Atendimentos (item 5.2) na Agenda. */
.cal-ev-atendimento { border-left: 3px solid #7a5cc7; }
.leg-atendimento { color: #7a5cc7; }

/* 10.1 — quem vê a tarefa (caixas em linha) */
.caixas-participantes { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.caixa-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.caixa-inline input { width: auto; margin: 0; }

/* 10.3 — Cálculos: uma aba, três cálculos */
.abas-calculos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.abas-calculos a { padding: 8px 14px; border: 1px solid var(--borda, #cfd4dc); border-radius: 8px; text-decoration: none; color: inherit; }
.abas-calculos a.ativa { background: var(--destaque-fundo, #e8eef7); border-color: var(--destaque-borda, #7a93b8); font-weight: 600; }

/* 10.10 — histórico: vínculos na linha */
.hist-links { margin-left: 6px; }
.hist-links a { font-size: 12px; margin-right: 6px; padding: 1px 6px; border-radius: 10px; background: var(--destaque-fundo, #e8eef7); text-decoration: none; }

/* 10.16 — audiências categorizadas */
.pautas-cat { margin: 12px 0 20px; }
.pauta-tribunal { margin: 18px 0 4px; font-size: 1.05em; border-bottom: 1px solid var(--borda, #cfd4dc); padding-bottom: 4px; }
.pauta-categoria { margin: 10px 0 4px; font-size: .95em; color: var(--texto-suave, #4a5568); }
.pauta-trecho { font-size: 12px; color: var(--texto-suave, #4a5568); max-width: 38rem; }

/* 10.17 — Início sem alarme: vencido visível, discreto; 10.18 — span.nota é texto, não caixa */
.cartao-discreto { opacity: .85; }
.cartao-discreto .numero { color: var(--suave); }
.titulo-discreto { color: var(--suave); font-weight: 600; }
.cartao .legenda a { color: inherit; text-decoration: none; }
.cartao .legenda a:hover { text-decoration: underline; }
td .nota, span.nota, li .nota { display: inline; padding: 0; margin: 0; border: 0; background: none;
  font-size: 12px; color: var(--suave); border-radius: 0; }

/* 11.3 — histórico por dia */
.hist-dia { margin: 18px 0 4px; font-size: 1em; border-bottom: 1px solid var(--borda, #cfd4dc); padding-bottom: 3px; }
.resumo-tipos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 11.1 — financeiro */
.semaforo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #9aa; }
.semaforo.verde { background: #4caf50; } .semaforo.amarelo { background: #e0a458; } .semaforo.vermelho { background: #c95d63; }
.numero-tab { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.grafico .legenda { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.grafico .legenda li { margin: 2px 0; }
.grafico .legenda .cor { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cartao .numero.pequeno { font-size: 1.15em; }

/* 12.3 — cadastro de cliente enxuto: formulario em faixas, ficha em cartoes. */
.form-cliente { max-width: 860px; }
.form-cliente fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px 4px; margin: 0 0 18px; }
.form-cliente legend { font-weight: 650; padding: 0 6px; color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.form-cliente .campo { margin-bottom: 14px; }
.form-cliente [hidden] { display: none !important; }
.dados-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.dados-cliente .cartao { font-size: 14px; line-height: 1.6; }
.dados-cliente .legenda { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin-bottom: 4px; }
.dados-cliente strong { font-weight: 600; color: var(--suave); margin-right: 4px; }

/* 12.4 — atendimento: duas entradas (agora / agendar) e cadastro rapido. */
.entradas-atend { display: flex; gap: 10px; flex-wrap: wrap; }
.entradas-atend .opcao-entrada { flex: 1; min-width: 220px; display: block; align-self: flex-start;
  padding: 10px 14px; border: 1px solid var(--borda); border-radius: 9px; cursor: pointer; font-size: 14px; }
.entradas-atend .opcao-entrada input { margin-right: 6px; }
.entradas-atend .opcao-entrada small { display: block; color: var(--suave); margin-top: 2px; }
.entradas-atend .opcao-entrada.ativa { border-color: var(--realce); box-shadow: 0 0 0 1px var(--realce) inset; }
.cadastro-rapido { border: 1px dashed var(--borda); border-radius: 9px; padding: 12px 14px 4px; margin: -6px 0 16px; }
.cadastro-rapido[hidden], .so-agendar[hidden], .so-agora[hidden] { display: none !important; }

/* Classes usadas nos templates desde a Fase 3 e que nunca ganharam regra
   (12.4, 16/09): .btn (link-botao neutro), .selo-neutro (cinza), .selo-alerta (vermelho). */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 7px; margin-right: 6px;
  background: var(--papel); color: var(--realce); font: inherit; font-weight: 600;
  border: 1px solid var(--borda); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--realce-claro); }
.selo-neutro { background: var(--previsto); }
.selo-alerta { background: var(--aberto); }

/* 12.5 — tarefa: faixas do formulario e prazo fatal em destaque. */
.formulario fieldset.faixa-prazos, .formulario fieldset.faixa-vinculo {
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px 2px; margin: 0 0 16px; }
.formulario fieldset legend { font-weight: 650; padding: 0 6px; color: var(--suave); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; }
.formulario [hidden] { display: none !important; }
.campo-fatal input[type="date"] { border-color: var(--erro-borda); font-weight: 600; }
.campo-fatal label { color: var(--aberto); font-weight: 650; }
main .pastilha.fatal { background: var(--aberto); color: #fff; font-weight: 650; }
main .pastilha.fatal-longe { background: var(--erro-fundo); color: var(--aberto); border: 1px solid var(--erro-borda); }
.cartao-fatal { border-color: var(--erro-borda); }
.cartao-fatal .legenda { color: var(--aberto); font-weight: 650; }
.cliente-da-tarefa { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }

/* 12.6 — tarefas por dia / semana / mes / ano. */
.tc-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tc-modos { margin-bottom: 14px; }
.tc-modos .aba { font-weight: 600; }
.tc-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); }
.tc-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-nav .btn { margin-right: 0; padding: 6px 12px; }
.tc-periodo { font-size: 18px; font-weight: 650; margin-left: 10px; }
.tc-filtros { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.tc-resumo { color: var(--suave); margin: 10px 2px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tc-resumo strong { color: var(--texto); }
.tc-legenda { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tc-txt-fatal, .tc-resumo .tc-txt-fatal { color: var(--aberto); }

/* cartao de tarefa */
.tc-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; text-decoration: none; color: var(--texto);
  background: var(--realce-claro); border: 1px solid var(--borda); border-left: 4px solid var(--realce);
  border-radius: 7px; padding: 5px 7px; margin: 0 0 5px; font-size: 13px; line-height: 1.3; }
.tc-item:hover { border-color: var(--realce); }
.tc-fatal, .tc-ambos { border-left-color: var(--aberto); background: var(--erro-fundo); }
.tc-atrasada { border-color: var(--erro-borda); border-left-color: var(--aberto); }
.tc-atrasada .tc-titulo { color: var(--aberto); }
.tc-feita { opacity: .6; }
.tc-feita .tc-titulo { text-decoration: line-through; }
.tc-titulo { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tc-sub { flex-basis: 100%; font-size: 12px; color: var(--suave); }
.tc-sub-fatal { color: var(--aberto); font-weight: 600; }
.tc-selo { background: var(--aberto); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 4px; }
.tc-letra { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--realce); color: var(--papel); font-size: 11px; font-weight: 700; flex: none; }
.tc-mini { display: inline-flex; margin: 0; font-size: 12px; padding: 2px 7px; }
.tc-vazio { color: var(--suave); font-size: 13px; }

/* dia */
.tc-dia { display: grid; gap: 14px; }
.tc-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 4px 14px 10px; background: var(--papel); }
.tc-bloco h2 { font-size: 16px; margin: 10px 0; }
.tc-bloco-atraso { border-color: var(--erro-borda); }
.tc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.tc-lista .tc-item { margin: 0; font-size: 14px; padding: 8px 10px; }

/* semana */
.tc-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tc-col { border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); min-height: 180px; display: flex; flex-direction: column; }
.tc-col.tc-fds { background: var(--fundo); }
.tc-col.tc-hoje { border-color: var(--realce); box-shadow: 0 0 0 1px var(--realce) inset; }
.tc-col-cab { display: flex; align-items: baseline; gap: 6px; padding: 8px 9px; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: var(--texto); }
.tc-col-nome { text-transform: capitalize; color: var(--suave); font-size: 13px; }
.tc-col-num { font-size: 20px; font-weight: 700; }
.tc-col-cab .conta { margin-left: auto; }
.tc-hoje .tc-col-num { color: var(--realce); }
.tc-col-corpo { padding: 7px; }
@media (max-width: 900px) {
  .tc-semana { grid-template-columns: 1fr; }
  .tc-col { min-height: 0; }
}

/* mes */
.tc-mes { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.tc-mes th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--suave); padding: 2px 6px; background: none; }
.tc-mes td { vertical-align: top; height: 110px; padding: 5px; border: 1px solid var(--borda); border-radius: 8px; background: var(--papel); }
.tc-mes td.tc-fds { background: var(--fundo); }
.tc-mes td.tc-fora { border: none; background: none; }
.tc-mes td.tc-hoje { border-color: var(--realce); box-shadow: 0 0 0 1px var(--realce) inset; }
.tc-num { display: inline-block; font-weight: 700; text-decoration: none; color: var(--texto); margin-bottom: 4px; }
.tc-hoje .tc-num { color: var(--realce); }
.tc-mes .tc-item { font-size: 12px; padding: 3px 5px; }
.tc-mes .tc-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-mes .tc-letra { width: 15px; height: 15px; font-size: 9px; }
.tc-mais { font-size: 12px; }
@media (max-width: 700px) {
  .tc-mes td { height: auto; min-height: 44px; }
  .tc-mes .tc-titulo { display: none; }
  .tc-mes .tc-item { padding: 2px 3px; }
}

/* ano */
.tc-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tc-ano .tc-mini { display: block; border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); padding: 8px 10px; font-size: 13px; }
.tc-mini-cab { display: flex; justify-content: space-between; gap: 6px; text-decoration: none; color: var(--texto); font-weight: 650; margin-bottom: 4px; }
.tc-mini-conta { font-weight: 400; color: var(--suave); font-size: 12px; }
.tc-ano table { width: 100%; border-collapse: collapse; }
.tc-ano th { font-size: 11px; color: var(--suave); font-weight: 600; text-align: center; background: none; padding: 2px; }
.tc-ano td { text-align: center; padding: 1px; border: none; }
.tc-mini-dia { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  text-decoration: none; color: var(--suave); font-size: 12px; }
.tc-mini-dia.tc-com { background: var(--realce-claro); color: var(--realce); font-weight: 700; }
.tc-mini-dia.tc-com-fatal { background: var(--aberto); color: #fff; font-weight: 700; }
.tc-mini-dia.tc-hoje { outline: 2px solid var(--realce); outline-offset: 1px; }

/* 17/09 — tipo de tarefa (a tarja do Harpa). Uma cor só, neutra e da casa:
   a tarja diz O QUE e a tarefa, nao a urgencia — urgencia e da prioridade e
   do prazo fatal, que ja tem as cores deles. */
main .pastilha.tipo-tarefa { background: var(--realce); color: #fff; font-weight: 650;
  letter-spacing: .02em; text-transform: uppercase; font-size: 10.5px; }
main .pastilha.tipo-tarefa-grande { font-size: 13px; vertical-align: middle; }
.tc-tipo { display: inline-block; background: var(--realce); color: #fff; font-size: 9.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 8px;
  padding: 0 5px; margin-right: 2px; vertical-align: middle; }
.campo-tipo { max-width: 420px; }
.formulario-inline { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; }
.formulario-inline .campo { flex: 1 1 260px; margin: 0; }
.tabela-tipos .tipo-desativado { opacity: .55; }
.tabela-tipos .tipo-desativado .pastilha.tipo-tarefa { background: var(--suave); }

/* 17/09 — ficha do cliente: tarja L/R por processo e o formulario de vincular
   com campos maiores (Arthur: "esses campos ficaram muito pequenos"). */
.tabela-processos-cliente td, .tabela-processos-cliente th { padding: 10px 12px; font-size: 14px; }
.tabela-processos-cliente .td-tarja { width: 2.6em; text-align: center; }
.tabela-processos-cliente .tarja-resp { font-size: 1em; min-width: 1.6em; line-height: 1.6; }
.form-vincular { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; max-width: none;
  margin: 14px 0 24px; padding: 16px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--realce-claro); }
.form-vincular .campo { margin: 0; }
.form-vincular .campo-numero { flex: 3 1 360px; }
.form-vincular .campo-polo { flex: 1 1 200px; }
.form-vincular .campo-obs { flex: 2 1 240px; }
.form-vincular .campo-botao { flex: 0 0 auto; }
.form-vincular input, .form-vincular select { width: 100%; box-sizing: border-box;
  font-size: 15px; padding: 10px 12px; min-height: 44px; }
.form-vincular .btn-primario { font-size: 15px; padding: 10px 18px; min-height: 44px; }

/* 13.5 — Horas (lancador). */
.form-horas { max-width: 980px; padding: 16px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--realce-claro); margin-bottom: 18px; }
.form-horas .linha-campos { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.form-horas .campo { margin-bottom: 10px; }
.form-horas .campo-data { flex: 0 0 160px; } .form-horas .campo-hora { flex: 0 0 110px; }
.form-horas .campo-total { flex: 0 0 150px; } .form-horas .par-total { display: flex; gap: 6px; }
.form-horas .par-total input { width: 68px; }
.form-horas .campo-cliente { flex: 2 1 260px; } .form-horas .campo-processo { flex: 1 1 220px; }
.form-horas .campo-tipo { flex: 1 1 200px; } .form-horas .campo-descricao { flex: 1 1 480px; }
.form-horas input, .form-horas select { font-size: 15px; padding: 9px 10px; min-height: 42px; box-sizing: border-box; width: 100%; }
.filtros-horas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.tabela-horas td, .tabela-horas th { font-size: 14px; }
.tabela-horas .linha-cancelada { opacity: .5; text-decoration: line-through; }
.tabela-horas-resumo { max-width: 520px; }

/* ==========================================================================
   10.19 — PASSADA VISUAL (22/09/2026). Arthur: "a questao visual nao esta
   dando uma experiencia agradavel".

   Duas coisas MEDIDAS antes de mexer, e nao achadas:

   1. BOTAO SEM ESTILO. `btn-mini`, `btn-sec`, `btn-nav` e `filtro-chip` eram
      definidos DENTRO de alguns templates e usados em muitos outros — nas
      telas sem o <style> local (Audiencias, Atendimentos, ficha do cliente,
      Documentos, Agenda) o "botao" saia como link cru, sublinhado azul. A
      definicao passa a morar AQUI, uma vez so, como o resto da casa.

   2. ROLAGEM LATERAL DA PAGINA no celular (390px): Publicacoes 545px,
      Historico 504, Processos 450, Clientes 425, Inicio 378, Audiencias 347,
      Atendimentos 291 — a pagina inteira ia junto com a tabela larga, e o
      menu e o titulo saiam da tela. A tabela passa a rolar DENTRO da propria
      caixa (`.rolagem`, que ja existia no HTML e nunca teve regra), e o que
      estoura por conta propria (select de filtro) ganha teto de largura.
   ========================================================================== */

/* --- botoes pequenos, uma definicao so ------------------------------------ */
.btn-mini { display: inline-block; font-size: 12px; font-weight: 550;
  padding: 3px 10px; border-radius: 5px; background: var(--realce); color: #fff;
  text-decoration: none; vertical-align: middle; border: 1px solid transparent;
  cursor: pointer; line-height: 1.6; }
.btn-mini:hover { filter: brightness(1.08); color: #fff; }
/* variante discreta: a acao secundaria ao lado da principal ("Ver pub.") */
.btn-mini.btn-sec, .btn-mini.btn-secundario {
  background: var(--papel); color: var(--texto); border-color: var(--borda); }
.btn-mini.btn-sec:hover, .btn-mini.btn-secundario:hover {
  background: var(--realce-claro); color: var(--realce); }
.btn-sec { display: inline-block; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
  text-decoration: none; font-size: 14px; cursor: pointer; }
.btn-sec:hover { background: var(--realce-claro); color: var(--realce); }
.btn-nav { display: inline-block; padding: 5px 12px; border-radius: 6px;
  background: var(--realce-claro); color: var(--texto); text-decoration: none;
  font-size: 14px; border: 1px solid var(--borda); }
.btn-nav:hover { background: var(--realce); color: #fff; }
.filtro-chip { display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 13px; border: 1px solid var(--borda); text-decoration: none;
  color: var(--texto); background: var(--papel); }
.filtro-chip:hover { background: var(--realce-claro); color: var(--realce); }
.filtro-chip.ativo { background: var(--realce); color: #fff; border-color: transparent; }

/* --- a tabela larga rola dentro da caixa, nao arrasta a pagina ------------- */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* a tabela dentro da caixa nao encolhe as colunas ate ficarem ilegiveis */
.rolagem > table { min-width: 100%; width: max-content; }

@media (max-width: 700px) {
  /* filtro que estourava a largura da tela (Atendimentos, Financeiro, Horas) */
  main select, main input[type="text"], main input[type="search"], main textarea {
    max-width: 100%; box-sizing: border-box; }
  /* Toda tabela que ja nao esta numa caixa de rolagem rola sozinha. A regra e
     por exclusao, e nao por caminho de pais: a reforma visual (v2) embrulhou o
     conteudo em `.v2-painel`, e lista de caminhos envelhece a cada reforma. */
  main table:not(.rolagem table):not(.tc-mes):not(.tc-ano):not(.agenda-cal) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* a fila de abas (com a contagem) tambem rola, em vez de empurrar a pagina */
  .abas, .filtros-barra, .filtro-tarjas {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; scrollbar-width: thin; }
  .abas .aba { white-space: nowrap; }
}