:root{
  --marinho:#12243E; --marinho2:#091220; --azul:#3E6C9E; --dourado:#C9922F;
  --papel:#F4F6F8; --linha:#DDE3EA; --texto:#1E2733; --fraco:#68748A;
  --ok:#1B6047; --ok-bg:#E7F5EE; --erro:#8E3B32; --erro-bg:#FBEAE7; --r:8px;

  /* TIPOGRAFIA — os valores abaixo são o padrão de fábrica. A tela
     Ajustes › Fonte e tamanho reescreve --base, --fonte e (na opção
     de leitura facilitada) --entreletras e --altura-linha num <style>
     que vem DEPOIS desta folha, no <head>. Nada mais na folha carrega
     px de fonte: tudo é rem, isto é, múltiplo de --base. Mudar a base
     de 14 para 18 aumenta a tela inteira em proporção. */
  --base:14px;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --entreletras:normal;
  --altura-linha:1.5;
}
/* rem passa a valer --base. É daqui que todo o resto escala. */
html{font-size:var(--base)}
*{box-sizing:border-box}
body{margin:0;font:1rem/var(--altura-linha) var(--fonte);letter-spacing:var(--entreletras);color:var(--texto);background:var(--papel)}
.app{display:flex;min-height:100vh}
.menu{width:15.7rem;flex-shrink:0;background:var(--marinho2);color:#fff;padding:18px 0}
/* A MARCA: a logo em cima, a versão embaixo.
   A logo do sistema é SVG inline (Layout::logoDoSistema) e a do
   escritório, quando enviada, é <img> — as duas dividem o mesmo
   tamanho máximo para que trocar uma pela outra não empurre o menu
   para baixo. `height:auto` com `max-height` preserva a proporção de
   uma logo alta e estreita, que é a forma em que costumam vir. */
.marca{padding:4px 14px 16px;color:var(--dourado);line-height:1.1;text-align:center}
.marca-alvo{display:block;text-decoration:none;color:inherit}
/* A logo do SISTEMA é um bloco vertical (ícone + palavra + assinatura)
   e por isso pede mais altura que uma marca deitada; a do ESCRITÓRIO
   costuma vir deitada e fica menor. As duas dividem o mesmo limite de
   largura, para que trocar uma pela outra não empurre o menu. */
.marca-logo,.marca-logo-img{display:block;max-width:100%;height:auto;
  margin:0 auto}
.marca-logo{max-height:96px}
.marca-logo-img{max-height:56px}
/* O ícone sozinho só existe na faixa horizontal do celular. */
.marca-icone{display:none}
.marca-texto{display:block;font-weight:700;font-size:1.2857rem;text-align:center}
.marca-versao{display:block;margin-top:7px;font-size:0.7143rem;font-weight:400;
  letter-spacing:.03em;color:#8291A8;text-align:center}
/* O item de menu de um recurso que existe e está DESLIGADO.
   Escondê-lo faria o usuário concluir que o sistema não o tem; deixá-lo
   clicável faria a tela abrir para dizer que não dá. Cinza e sem
   cursor, com o motivo no title. */
.item-menu-off{display:block;padding:9px 18px;color:#6C7A8F;cursor:not-allowed}
.grupo-menu{font-size:0.7857rem;text-transform:uppercase;letter-spacing:.05em;color:#8291A8;padding:14px 18px 6px}
.item-menu{display:block;padding:9px 18px;color:#D6DEE8;text-decoration:none}
.item-menu:hover{background:var(--marinho);color:#fff}
/* O ITEM ONDE VOCÊ ESTÁ.
   Na coluna larga é um destaque discreto — a barra dourada à esquerda
   diz "é aqui" sem competir com o conteúdo. Em tela estreita, onde o
   menu vira faixa que rola, é este item que o JavaScript traz para o
   meio da barra. */
.item-menu-aqui{background:var(--marinho);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--dourado)}
/* min-width:0 é o que deixa a área de conteúdo ENCOLHER. Item de flex
   nasce com min-width:auto, ou seja, não fica menor que o conteúdo
   dele: bastava uma barra de filtros larga para a coluna toda parar de
   encolher e a página inteira ganhar barra de rolagem horizontal. */
.conteudo{flex:1;min-width:0;padding:28px 32px;max-width:1100px}
.cabecalho-pagina{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:baseline;margin-bottom:18px}
/* `overflow-wrap:anywhere` e não `break-word`: título de tela é nome
   próprio, número de processo e palavra composta, e em 420px um deles
   sozinho é mais largo que a coluna. Sem isto ele empurrava a barra do
   topo para fora e o "?" saía da tela. */
.cabecalho-pagina h1{font-size:1.5714rem;margin:0;min-width:0;overflow-wrap:anywhere}
/* O título e o "?" da tela, lado a lado e com espaço declarado.
   O "?" morava DENTRO do <h1>: encostava na última palavra sem
   respiro, e em título que termina em nome de pessoa parecia fazer
   parte do nome. min-width:0 é o que deixa o título encolher e quebrar
   em vez de empurrar a barra do topo. */
.titulo-pagina{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;
  flex:1 1 240px;max-width:100%}
.usuario-logado{font-size:0.9286rem;color:var(--fraco)}

/* O selo da IA no alto. Fica ao lado do nome de quem está logado
   porque é a mesma pergunta — "quem está operando aqui" — e a IA é o
   segundo operador. `align-items:center` e não `baseline`: o quadrado
   da marca não tem linha de base para alinhar. */
/* `max-width:100%` no bloco e no selo: sem ele, o selo da IA — que é
   inline-flex e não encolhe — atravessava a borda direita em telas de
   celular, e o nome de quem está logado ia junto. Medido: nove pixels
   para fora em 420px, em toda tela do sistema. */
.topo-direita{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  min-width:0;max-width:100%;justify-content:flex-end}
/* A MARCA NO CANTO SUPERIOR DIREITO.
   `flex:0 0 auto` para ela não encolher quando o nome do usuário for
   longo — marca espremida é pior do que marca ausente. Em tela
   estreita ela some: ali a mesma marca já está no alto do menu, e
   repeti-la comeria a largura que o título precisa. */
.marca-pagina{flex:0 0 auto;display:inline-flex;line-height:0;text-decoration:none;
  opacity:.92;transition:opacity .12s ease}
.marca-pagina:hover{opacity:1}
.marca-pagina img{display:block;height:38px;width:auto}
.selo-ia{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;
  padding:5px 11px 5px 7px;border-radius:20px;
  border:1px solid var(--linha);background:#fff;
  text-decoration:none;color:inherit;line-height:1.25;
}
.selo-ia:hover{border-color:var(--marinho)}
.selo-ia svg{display:block;flex:0 0 auto}
.selo-ia-texto{display:flex;flex-direction:column;min-width:0}
.selo-ia-texto strong{font-size:0.8571rem;font-weight:600;white-space:nowrap}
.selo-ia-texto span{font-size:0.75rem;color:var(--fraco);white-space:nowrap}
/* Sem vínculo: fundo de alerta, e não cinza apagado. Cinza lê-se como
   "desligado de propósito"; o que se quer dizer é "falta configurar". */
.selo-ia-off{background:var(--erro-bg);border-color:#E3C6C0}
.selo-ia-off .selo-ia-texto strong{color:var(--erro)}
.selo-ia-off .selo-ia-texto span{color:var(--erro);opacity:.8}
@media (max-width:620px){
  .selo-ia-texto span{display:none}
}
.flash{padding:10px 14px;border-radius:var(--r);margin-bottom:16px;font-size:0.9286rem}
.flash-sucesso{background:var(--ok-bg);color:var(--ok)}
.flash-erro{background:var(--erro-bg);color:var(--erro)}
/* overflow-x:auto no cartão: tabela larga (a de equipe é a mais larga
   do sistema) passa a rolar DENTRO do cartão, em vez de empurrar a
   página inteira para os lados. Conteúdo largo rola no próprio
   container — a página, nunca. */
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:20px;margin-bottom:16px;overflow-x:auto}
.acoes-pagina{margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;padding:9px 16px;border-radius:var(--r);border:1px solid var(--marinho);background:var(--marinho);color:#fff;text-decoration:none;font-size:0.9286rem;cursor:pointer}
.btn:hover{background:var(--marinho2)}
.btn-ghost{background:#fff;color:var(--marinho)}
.btn-perigo{background:var(--erro);border-color:var(--erro)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linha);font-size:0.9286rem}
th{color:var(--fraco);font-weight:600;font-size:0.8571rem;text-transform:uppercase}
tr:hover td{background:#FAFBFC}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:0.7857rem;font-weight:600;white-space:nowrap}
.tag-ouro{background:#FBF1DC;color:#8A6415}
.tag-verde{background:var(--ok-bg);color:var(--ok)}
.tag-azul{background:#E4EDF6;color:var(--azul)}
.tag-cinza{background:#EEF1F4;color:var(--fraco)}
.tag-vermelha{background:var(--erro-bg);color:var(--erro)}
.grid{display:grid;gap:14px}
/* A trilha 1fr tem como mínimo o conteúdo dela: um select com opção
   comprida (nome de cliente, número de processo) esticava a coluna,
   e com ela a página. min-width:0 solta esse freio — campo de
   formulário pode encolher, texto quebra. */
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:1fr 1fr 1fr 1fr}
/* Em notebook e em janela dividida, quatro campos lado a lado viram
   quatro campos ilegíveis. Aqui eles descem, em vez de espremer. */
@media (max-width:1180px){
  .g4{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .g3,.g4{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}
/* =====================================================================
   O MENU LATERAL VIRA MENU HORIZONTAL EM TELA ESTREITA
   ---------------------------------------------------------------------
   Ele tinha largura fixa de 15,7rem e NUNCA encolhia. Num celular de
   420px isso deixava 44 pixels para a página inteira — medido, não
   estimado: a barra de filtros de Jurisprudência ficava com 44px de
   largura e 87px de conteúdo, e todo link de toda barra horizontal
   caía por cima do vizinho ou saía pela direita. A "sobreposição de
   links" que se vê no telefone nasce aqui, e não em cada barra.

   Abaixo de 820px o menu deixa de ser coluna e vira faixa no alto:
   rola de lado, com os grupos como etiquetas antes dos itens de cada
   um. É o mesmo menu, na horizontal — nada é escondido atrás de um
   botão de três traços, porque menu escondido é menu que ninguém abre.
   ===================================================================== */
@media (max-width:820px){
  .app{flex-direction:column}
  .menu{
    width:auto;padding:10px 12px;
    display:flex;align-items:center;gap:4px;
    overflow-x:auto;overflow-y:hidden;
    /* a barra de rolagem roubava altura e só aparecia em alguns
       navegadores, deixando o menu de tamanho diferente em cada um */
    /* Mesmo motivo da trilha: sem `scrollbar-width`, para que as
       regras ::-webkit-scrollbar abaixo valham e a barra fique
       permanente em vez de flutuante. */
    scroll-behavior:smooth;
    position:sticky;top:0;z-index:20;
  }
  .menu::-webkit-scrollbar{height:0}
  /* espaço para a barra desenhada */
  .menu{padding-bottom:16px}
  .marca{padding:0 12px 0 4px;flex:0 0 auto}
  /* Em faixa horizontal a marca divide a linha com os itens: a logo
     encolhe e a versão sai. Ela é informação de conferência, não de
     navegação — e no celular cada pixel de largura é do menu. */
  /* Na faixa, o bloco em pé sai e entra o ÍCONE. `width:auto` é o que
     faz a altura mandar: com a largura vinda do atributo do <img>, a
     imagem saía em 320px de largo e era cortada pela faixa. */
  .marca-logo{display:none}
  .marca-icone{display:block;height:30px;width:auto;max-width:none}
  .marca-logo-img{max-height:26px;width:auto;max-width:none}
  .marca-texto{font-size:1rem}
  .marca-versao{display:none}
  .item-menu-off{padding:7px 10px;white-space:nowrap}
  .grupo-menu{padding:0 6px 0 12px;flex:0 0 auto;align-self:center;border-left:1px solid #3A4A63}
  .item-menu{padding:7px 10px;flex:0 0 auto;white-space:nowrap;border-radius:6px}
  /* Na horizontal a marca do item atual desce para baixo do rótulo:
     barra vertical à esquerda, numa faixa deitada, lê-se como
     separador entre itens, e não como "é aqui". */
  .item-menu-aqui{box-shadow:inset 0 -3px 0 var(--dourado)}
  .conteudo{padding:18px 14px;max-width:100%}
  .marca-pagina{display:none}
}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:0.8571rem;color:var(--fraco);font-weight:600}
.campo input,.campo select,.campo textarea{padding:9px 10px;border:1px solid var(--linha);border-radius:var(--r);font:inherit;background:#fff}
.campo textarea{min-height:80px;resize:vertical}
.ajuda{font-size:0.8571rem;color:var(--fraco);margin-top:4px}
.aviso{background:#FBF1DC;border-left:3px solid var(--dourado);padding:10px 14px;border-radius:4px;font-size:0.9286rem;margin-bottom:14px}
.rodape-form{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.link{color:var(--azul);text-decoration:none;font-size:0.9286rem;background:none;border:none;cursor:pointer;padding:0}
.link:hover{text-decoration:underline}
.vazio{text-align:center;padding:40px 20px;color:var(--fraco)}
/* wrap: a barra de filtros era a que mais empurrava a página para os
   lados — em tela de notebook, os campos somavam mais que a largura
   disponível e nada quebrava. */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;min-width:0}
/* `max-width:100%` e `min-width:0` nos campos: o tamanho natural de um
   <input> é largo, e num filtro com três deles a linha somava mais que
   a largura do celular — os últimos saíam pela direita em vez de
   quebrar. O campo agora encolhe até caber e só então quebra. */
.filtros input,.filtros select{padding:8px 10px;border:1px solid var(--linha);
  border-radius:var(--r);font:inherit;min-width:0;max-width:100%}
.filtros > .campo{flex:1 1 200px;min-width:0;max-width:100%}
/* O RÓTULO NÃO PODE SER MAIS LARGO QUE O CAMPO.
   "Motivo (obrigatório para distinguir ou descartar)" numa linha só
   segurava a coluna aberta em 156px além da tela do celular: o campo
   encolhia, o rótulo não. */
.filtros .campo label,.filtros .campo .ajuda{min-width:0;overflow-wrap:anywhere}
.filtros > button,.filtros > .btn{flex:0 0 auto}
.dir{text-align:right}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
/* Valor em dinheiro NÃO quebra linha. "R$" numa linha e "9.145,00" na
   seguinte não é um número: é um número e um símbolo, e o olho lê a
   coluna errada. Em tabela estreita o certo é a coluna alargar ou a
   tabela rolar de lado dentro do próprio quadro — o que já acontece —,
   e nunca o valor se partir. */
td.mono,th.mono{white-space:nowrap}

.legenda{font-size:0.9286rem;color:var(--fraco);margin-bottom:6px}

/* ---- Quadro de tarefas ------------------------------------------
   Grade que se ajusta à largura, em vez de rolar de lado.

   O quadro era um flex de colunas fixas de 240px: com cinco colunas
   dava ~1.260px dentro de uma área de 1.100px, e sobrava barra de
   rolagem horizontal. Kanban que rola de lado esconde coluna — e
   coluna escondida é tarefa que ninguém vê.

   auto-fill + minmax(240,1fr): cabe quantas couberem na linha, o
   resto desce. Sem media query e sem número mágico de colunas: quem
   decide é a largura da janela, então funciona também no notebook
   pequeno e com o menu lateral aberto.

   align-items:start é o que impede a coluna curta de ser esticada
   até a altura da mais cheia da mesma linha, deixando um retângulo
   vazio no meio do quadro. */
.quadro{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
  align-items:start;
  margin-bottom:16px;
}
/* min-width:0 não é firula: item de grade nasce com min-width:auto, e
   aí um título sem espaço (número de processo, URL colada) empurra a
   coluna para além da trilha e traz a barra de rolagem de volta —
   exatamente o defeito que esta classe existe para resolver.
   overflow-wrap fecha o caso quebrando a palavra comprida. */
.quadro-coluna{min-width:0;overflow-wrap:anywhere}
.quadro-coluna .card{margin-bottom:10px}
/* Com a coluna estreita, o rótulo do botão partia no meio ("move / r").
   O botão não encolhe e o texto não quebra; quem cede é o select. */
.quadro-coluna .btn{white-space:nowrap;flex:0 0 auto}
.quadro-topo{padding:12px;border-top-width:3px;border-top-style:solid}

/* ---- Capa dos autos ---------------------------------------------
   Pares rótulo/valor da autuação. Grade que se ajusta, pelo mesmo
   motivo do quadro de tarefas: nada empurra a página para os lados. */
.capa{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px 20px;
  margin:0;
}
.capa>div{min-width:0}
/* O assunto ocupa a linha inteira: são vários, cada um com código, e
   espremer isso numa coluna de 210px picotaria o nome. */
.capa-largo{grid-column:1/-1}
.capa dt{font-size:0.7857rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fraco);font-weight:600}
.capa dd{margin:3px 0 0;font-size:1rem;overflow-wrap:anywhere}

.lista-assuntos{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px}
.lista-assuntos li{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

.incluir-assunto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.incluir-assunto input[type=text]{
  flex:1 1 260px;min-width:0;padding:7px 10px;border:1px solid var(--linha);
  border-radius:var(--r);font:inherit;background:#fff;
}

/* ---- Linha do tempo do andamento --------------------------------
   Data à esquerda, movimento à direita, com um fio ligando os dois.
   O fio é borda do <li>, não elemento próprio: menos marcação para
   uma lista que pode ter centenas de itens. */
.linha-tempo{list-style:none;margin:0;padding:0}
.linha-tempo li{
  display:grid;grid-template-columns:112px 1fr;gap:14px;
  padding:10px 0 10px 0;border-left:2px solid var(--linha);
  padding-left:14px;margin-left:4px;
}
.linha-tempo li:first-child{border-left-color:var(--azul)}
.lt-data{font-size:0.9286rem;font-variant-numeric:tabular-nums;color:var(--texto)}
.lt-corpo{min-width:0;overflow-wrap:anywhere}
@media (max-width:620px){
  .linha-tempo li{grid-template-columns:1fr;gap:3px}
}

.motivos-prioridade{margin:8px 0 6px;padding-left:18px}
.motivos-prioridade li{margin-bottom:3px}

/* =====================================================================
   NAVEGAÇÃO EM LINHA — a trilha com setas
   ---------------------------------------------------------------------
   Três peças: seta esquerda, miolo com os pontos, seta direita. O
   miolo rola de lado quando não cabe; as setas NÃO rolam, porque são
   o que se procura primeiro.

   As setas ficam com largura fixa mesmo quando desativadas. Sem isso,
   o miolo pula de lado ao passar do primeiro item para o segundo — e
   o olho perde a referência de onde estava.
   ================================================================== */
.trilha{
  display:flex;align-items:stretch;gap:10px;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:8px;margin-bottom:18px;
}
.trilha-seta{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:8px 12px;border-radius:6px;text-decoration:none;
  color:var(--marinho);font-size:0.9286rem;font-weight:600;line-height:1;
  background:var(--papel);min-width:38px;justify-content:center;
}
.trilha-seta:hover{background:var(--marinho);color:#fff}
.trilha-seta span[aria-hidden]{font-size:1.4286rem;line-height:1}
.trilha-seta-off{color:var(--linha);background:transparent;cursor:default}
.trilha-seta-off:hover{background:transparent;color:var(--linha)}

.trilha-miolo{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  overflow-x:auto;padding:0 2px;
  /* A máscara nas pontas é o que avisa que há mais itens fora da
     vista. Sem ela, o último rótulo visível aparecia CORTADO NO MEIO
     DA PALAVRA — e palavra cortada parece defeito, não continuação.
     scrollbar-width:none esconde a barra: ela roubava altura da linha
     e aparecia só no Firefox, deixando a trilha diferente em cada
     navegador. */
  /* A máscara nas DUAS pontas avisa que há mais itens fora da vista —
     dos dois lados, agora que o item atual fica no meio e sobra menu
     para trás também. */
  mask-image:linear-gradient(to right, transparent 0, #000 18px,
                             #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px,
                                     #000 calc(100% - 18px), transparent 100%);
  /* SEM `scrollbar-width` AQUI, E É DE PROPÓSITO.
     Declarar `scrollbar-width` (ou `scrollbar-color`) faz o Chrome
     IGNORAR as regras ::-webkit-scrollbar abaixo e usar a barra
     flutuante, que só aparece enquanto se arrasta — medido: a barra
     ocupava 0px de altura, ou seja, não existia até alguém tentar.
     Sem ele, o ::-webkit-scrollbar vale, e a barra é permanente. O
     Firefox, que não entende ::-webkit-scrollbar, mostra a dele. */
  scroll-behavior:smooth;
  /* espaço para a barra desenhada, que mora embaixo */
  padding-bottom:8px;
}
/* A BARRA NATIVA FICA ESCONDIDA — e quem desenha a nossa é o
   JavaScript do rodapé.
   Medido: com o Chrome atual a barra nativa é FLUTUANTE, ocupa 0px de
   altura e só aparece enquanto alguém arrasta — ou seja, o menu que
   rola parecia um menu truncado, que é o que se queria evitar. E as
   regras que forçariam a clássica passam a ser ignoradas assim que se
   declara `scrollbar-width`. De um jeito ou de outro, quem decide é o
   navegador, e ele decide diferente em cada máquina. */
.trilha-miolo::-webkit-scrollbar{height:0}

/* ---------------------------------------------------------------------
   A BARRA DE ROLAGEM DESENHADA — trilho e polegar
   Aparece só quando há o que rolar (o JavaScript esconde o trilho
   quando tudo cabe), e a largura do polegar é a proporção do que está
   à vista. Arrasta com o mouse e com o dedo.
   --------------------------------------------------------------------- */
.com-rolagem{position:relative}
.rolagem-barra{
  position:absolute;left:10px;right:10px;bottom:3px;height:6px;
  border-radius:3px;background:#EEF1F4;
}
/* O polegar é ESCURO o bastante para ser visto sem procurar.
   Na primeira tentativa ele era cinza-linha sobre papel: aparecia nas
   medidas e sumia no olho, que é o mesmo defeito da barra flutuante do
   navegador com outro nome. */
.rolagem-polegar{
  display:block;height:100%;width:40px;border-radius:3px;
  background:var(--fraco);cursor:grab;touch-action:none;
}
.rolagem-polegar:hover{background:var(--marinho)}
.rolagem-polegar:active{cursor:grabbing;background:var(--marinho)}
/* No menu escuro o trilho e o polegar invertem: cinza claro sobre
   azul, senão somem no fundo. */
.menu .rolagem-barra{background:#2B3A52;left:12px;right:12px;bottom:4px}
.menu .rolagem-polegar{background:#5A6B85}
.menu .rolagem-polegar:hover{background:#8291A8}
.menu .rolagem-polegar:active{background:var(--dourado)}
.trilha-indice{
  flex:0 0 auto;font-size:0.7857rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dourado);font-weight:700;text-decoration:none;
  align-self:center;padding:0 2px 0 4px;white-space:nowrap;
}
.trilha-indice:hover{text-decoration:underline}
.trilha-pontos{
  display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
  flex:1;min-width:0;
}
/* A TRILHA OCUPA A LARGURA INTEIRA.
   Antes os itens ficavam amontoados à esquerda e sobrava metade da
   barra vazia: o menu parecia uma sobra de outra tela, e os alvos de
   clique ficavam pequenos e colados. Agora cada item CRESCE para
   dividir o espaço que sobra — `flex:1 1 auto` só reparte a folga, e
   `white-space:nowrap` impede que ele encolha abaixo do próprio
   texto, então quando não cabe a rolagem de lado continua igual. */
/* `1 0 auto`, e o zero é o que importa: o item CRESCE para repartir a
   folga, mas NUNCA encolhe abaixo do próprio texto. Com shrink 1 os
   rótulos longos apareciam cortados no meio da palavra — "Perfis de
   acess" —, que é exatamente o defeito que a janela de itens existe
   para evitar. Não cabendo, quem resolve é a rolagem do miolo. */
.trilha-pontos li{flex:1 0 auto}
.trilha-ponto{
  display:block;padding:9px 14px;border-radius:20px;font-size:0.9286rem;
  color:var(--fraco);text-decoration:none;white-space:nowrap;text-align:center;
}
.trilha-ponto:hover{background:var(--papel);color:var(--texto)}
.trilha-ponto-aqui{
  background:var(--marinho);color:#fff;font-weight:600;
}
.trilha-ponto-aqui:hover{background:var(--marinho2);color:#fff}
.trilha-contagem{
  flex:0 0 auto;font-size:0.7857rem;color:var(--fraco);align-self:center;
  font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap;
}
/* Em tela pequena os rótulos viram bolinhas: o nome está no title e na
   seta, e treze rótulos não cabem de jeito nenhum. */
@media (max-width:620px){
  /* A barra inteira aperta: com o padding e as setas do tamanho de
     desktop, a seta da direita ficava 21px fora da tela em 420px. */
  .trilha{padding:5px;gap:4px}
  .trilha-seta{min-width:30px;padding:8px 6px}
  /* OS RÓTULOS FICAM — e isso mudou.
     Em tela pequena eles viravam bolinhas, porque treze rótulos não
     cabiam. Agora a barra ROLA e o item atual é trazido para o meio,
     então cabem todos: basta arrastar. Bolinha não diz para onde se
     vai; "Capacidade e família" diz. O que encolhe é o tamanho do
     item, não a informação. */
  .trilha-pontos li{flex:0 0 auto}
  .trilha-ponto{padding:7px 11px;font-size:0.8571rem}
  .trilha-indice{display:none}
}

/* =====================================================================
   O "?" DE AJUDA
   ---------------------------------------------------------------------
   <details>/<summary> puro, sem JavaScript. Funciona com o teclado sem
   código extra, funciona quando o script falha, e IMPRIME — o que
   importa numa tela que alguém vai levar para a reunião.
   ================================================================== */
.ajuda-balao{display:inline-block;position:relative;vertical-align:middle}
.ajuda-marca{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--linha);color:var(--fraco);
  font-size:0.7857rem;font-weight:700;cursor:help;list-style:none;
  user-select:none;
}
.ajuda-marca::-webkit-details-marker{display:none}
.ajuda-marca:hover{background:var(--azul);color:#fff}
.ajuda-balao[open] .ajuda-marca{background:var(--marinho);color:#fff}
.ajuda-corpo{
  position:absolute;z-index:30;left:0;top:24px;width:320px;max-width:78vw;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:12px 14px;box-shadow:0 6px 24px rgba(18,36,62,.14);
  font-size:0.8929rem;line-height:1.5;font-weight:400;color:var(--texto);
  white-space:normal;text-align:left;
}
.ajuda-corpo strong{display:block;margin-bottom:5px;font-size:0.9286rem}
.ajuda-corpo p{margin:0 0 7px}
.ajuda-corpo p:last-child{margin-bottom:0}
.ajuda-base{color:var(--fraco);font-size:0.8214rem;border-top:1px solid var(--linha);padding-top:6px}
.ajuda-mais a{color:var(--azul);text-decoration:none}
.ajuda-mais a:hover{text-decoration:underline}
/* Perto da borda direita, o balão abriria fora da tela. */
.campo .ajuda-balao .ajuda-corpo,
.dir .ajuda-balao .ajuda-corpo{left:auto;right:0}
@media print{
  .ajuda-balao{display:none}
  .trilha{display:none}
}

/* =====================================================================
   TOM MAIS ACOLHEDOR
   ---------------------------------------------------------------------
   Nada de cor nova: o mesmo azul-marinho, o mesmo dourado. O que muda
   é o ritmo — mais respiro entre os blocos, canto menos duro, sombra
   de papel em vez de borda seca, e um estado de foco visível para quem
   navega pelo teclado (que antes não tinha nenhum).
   ================================================================== */
:root{ --r:10px; --sombra:0 1px 2px rgba(18,36,62,.05), 0 2px 10px rgba(18,36,62,.04); }
body{ -webkit-font-smoothing:antialiased; }
.card{ box-shadow:var(--sombra); padding:22px; }
.card h2{ font-size:1.0714rem; letter-spacing:.01em; }
.btn{ transition:background .12s ease, border-color .12s ease, transform .06s ease; }
.btn:active{ transform:translateY(1px); }
.campo input,.campo select,.campo textarea,
.filtros input,.filtros select{
  transition:border-color .12s ease, box-shadow .12s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus,
.filtros input:focus,.filtros select:focus{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(62,108,158,.15);
}
/* Foco visível em tudo que se alcança pelo teclado. Antes o anel
   padrão do navegador sumia junto com o outline dos campos, e quem
   navega por Tab ficava sem saber onde estava. */
a:focus-visible,.btn:focus-visible,.link:focus-visible,
.item-menu:focus-visible,.trilha-ponto:focus-visible,
.trilha-seta:focus-visible,.ajuda-marca:focus-visible{
  outline:2px solid var(--azul);outline-offset:2px;border-radius:4px;
}
/* display:block, e NÃO flex.
   A primeira versão usou flex para alinhar um ícone que nunca chegou a
   existir — e flex transforma CADA nó de texto solto num item de
   flex. O resultado: um aviso com <br> e <strong> virava seis colunas
   de texto espremidas, ilegível. Bloco é o que um parágrafo precisa. */
.flash{
  line-height:1.55;
  border:1px solid transparent;box-shadow:var(--sombra);
}
.flash strong{display:inline}
.flash ul{margin:6px 0 0;padding-left:20px}
.flash li{margin-bottom:4px}
.flash-sucesso{border-color:#BFE3D2}
.flash-erro{border-color:#E9C9C3}
.aviso{border-radius:var(--r);line-height:1.55}
/* Tabela com linha zebrada leve: em lista longa, o olho não perde a
   linha ao atravessar sete colunas. */
tbody tr:nth-child(even) td{background:rgba(244,246,248,.55)}
tbody tr:hover td{background:#F1F5F9}
th{letter-spacing:.04em}
.vazio{
  border:1px dashed var(--linha);border-radius:var(--r);
  background:rgba(244,246,248,.5);
}
.menu{padding:20px 0}
.item-menu{border-left:3px solid transparent;transition:background .12s ease}
.item-menu:hover{border-left-color:var(--dourado)}

/* =====================================================================
   CARTÕES DE ATALHO — o índice que também mostra estado
   ================================================================== */
.atalhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.atalho{
  display:block;background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--sombra);
  border-top:3px solid var(--linha);
}
.atalho:hover{border-top-color:var(--dourado)}
.atalho strong{display:block;font-size:1rem;margin-bottom:4px}
.atalho p{margin:0 0 8px;font-size:0.8929rem;color:var(--fraco);line-height:1.5}
.atalho .estado{font-size:0.8571rem;color:var(--marinho);font-weight:600}
.atalho .alerta{
  display:block;margin-top:7px;font-size:0.8571rem;color:var(--erro);
  background:var(--erro-bg);padding:6px 9px;border-radius:6px;line-height:1.45;
}
/* As reticências entre pontos distantes da trilha. */
.trilha-corte{
  flex:0 0 auto;color:var(--linha);font-size:0.9286rem;padding:0 2px;user-select:none;
}
@media (max-width:620px){ .trilha-corte{display:none} }

/* =====================================================================
   SELO DE AUTORIA DA IA
   ---------------------------------------------------------------------
   Fica ANTES do conteúdo gerado, não depois — aviso no rodapé de uma
   peça de doze páginas é aviso que ninguém lê antes de copiar o
   começo. A borda dourada é a mesma dos avisos do sistema: quem já
   usa reconhece "isto é o sistema falando", e não parte do texto.

   E IMPRIME. `@media print` esconde a trilha e o "?", mas não isto:
   documento impresso sem a marca de autoria é exatamente o que as
   diretrizes existem para impedir.
   ================================================================== */
.selo-autoria-ia{
  background:#FBF1DC;border:1px solid #E8D3A4;border-left:4px solid var(--dourado);
  border-radius:var(--r);padding:11px 14px;margin:0 0 14px;
  font-size:0.8929rem;line-height:1.55;color:#5C4413;
}
.selo-autoria-ia strong{color:#4A3610}
.selo-autoria-ia .link{color:#7A5A16;text-decoration:underline}
.selo-autoria-financeiro{
  background:#E4EDF6;border-color:#BBD0E6;border-left-color:var(--azul);color:#1E3E5E;
}
.selo-autoria-financeiro strong{color:#12243E}
.selo-autoria-financeiro .link{color:var(--azul)}
@media print{
  .selo-autoria-ia{
    background:#fff;border:1px solid #000;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* ==================================================================
   ESCOLHA DE FONTE (Ajustes › Fonte e tamanho)

   Cada opção é um bloco: o rádio com o nome e a explicação em cima, a
   amostra desenhada logo abaixo. A amostra é um <div> com estilo
   inline vindo do servidor — é a única forma de mostrar CINCO fontes
   ao mesmo tempo numa página cuja fonte é uma só.

   O bloco inteiro é clicável porque o <label> envolve o rádio: alvo
   grande, que é o que se quer em tela de ajuste raro.
   ================================================================== */
.opcao-fonte{
  border:1px solid var(--linha);border-radius:var(--r);
  padding:14px;margin-bottom:12px;background:var(--papel);
}
.opcao-fonte:last-of-type{margin-bottom:0}
.opcao-fonte:has(input:checked){border-color:var(--marinho);background:#fff}
.opcao-fonte-cabeca{
  display:flex;gap:10px;align-items:flex-start;
  cursor:pointer;margin-bottom:10px;
}
.opcao-fonte-cabeca input{margin-top:3px;flex:0 0 auto}
.opcao-fonte-cabeca strong{font-size:0.95rem}
.opcao-fonte-cabeca .tag{margin-left:6px;vertical-align:2px}
.opcao-fonte-cabeca .ajuda{max-width:62ch}

/* Lista de texto corrido sem cara de tabela: usada em "o que este
   ajuste NÃO faz" e em quadros equivalentes. */
.lista-seca{margin:0;padding-left:18px}
.lista-seca li{margin-bottom:7px;line-height:var(--altura-linha)}
.lista-seca li:last-child{margin-bottom:0}

/* ==================================================================
   ESCOPO — "o que é meu" x "tudo"

   O par de botões que aparece no alto de uma lista. Ele repete o
   padrão que o painel já usava; a diferença é que aqui ele ganhou
   nome próprio no CSS, porque passou a existir em mais de uma tela.
   ================================================================== */
.escopo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.escopo-rotulo{font-size:0.7857rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fraco);font-weight:600;margin-right:2px;display:inline-flex;
  align-items:center;gap:4px}

/* O botão que não pode ser clicado.
   Cursor de "não vai rolar" e contraste baixo: o olho reconhece antes
   de a mão tentar. Continua legível — desativado não é invisível. */
.btn-travado{
  opacity:.5;cursor:not-allowed;border-style:dashed;
  color:var(--fraco);border-color:var(--linha);background:#fff;
}
.escopo-motivo{
  font-size:0.8571rem;color:var(--fraco);flex:1 1 100%;
  margin-top:-2px;line-height:1.45;
}

/* ==================================================================
   LINHA DO TEMPO DA INSTÂNCIA

   Uma lista vertical com um filete à esquerda e um ponto por período.
   O período aberto — onde o processo está — leva o ponto cheio.
   ================================================================== */
.inst-agora{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:14px;border:1px solid var(--linha);border-left:3px solid var(--marinho);
  border-radius:var(--r);background:var(--papel);margin-bottom:14px;
}
.inst-agora strong{font-size:1.15rem}
.inst-linha{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
.inst-linha::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--linha);
}
.inst-linha li{position:relative;padding:0 0 16px 4px}
.inst-linha li:last-child{padding-bottom:0}
.inst-linha li::before{
  content:"";position:absolute;left:-19px;top:5px;width:10px;height:10px;
  border-radius:50%;background:#fff;border:2px solid var(--linha);
}
.inst-linha li.inst-aberto::before{background:var(--marinho);border-color:var(--marinho)}
.inst-quando{font-size:0.8571rem;color:var(--fraco)}
.inst-motivo{font-size:0.8929rem}

/* ==================================================================
   CLÁUSULAS DO CONTRATO

   Lista numerada, com o texto da cláusula em bloco próprio — quem lê
   está conferindo redação, e redação se lê em parágrafo, não em
   célula de tabela.
   ================================================================== */
.clausulas{list-style:none;margin:14px 0 0;padding:0;counter-reset:cl}
.clausulas li{
  border:1px solid var(--linha);border-radius:var(--r);
  padding:14px;margin-bottom:10px;background:var(--papel);
}
.clausulas li:last-child{margin-bottom:0}
.clausula-cabeca{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:8px}
.clausula-cabeca strong{font-size:0.9286rem;letter-spacing:.01em}
.clausula-corpo{
  background:#fff;border:1px solid var(--linha);border-radius:6px;
  padding:12px;line-height:1.6;font-size:0.9286rem;overflow-wrap:anywhere;
}
.clausula-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;align-items:center}
.clausula-acoes .link{font-size:0.8571rem}

/* O documento montado, em tela e no papel. Largura de leitura e fonte
   serifada: é um contrato, não uma tela de sistema. */
.documento{
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:40px 44px;max-width:76ch;margin:0 auto;
  font-family:Georgia,"Times New Roman","Liberation Serif",serif;
  font-size:1.0714rem;line-height:1.7;
}
/* pre-wrap só no TEXTO: o timbre é HTML e tem formatação própria */
.documento-texto{white-space:pre-wrap;overflow-wrap:anywhere}
.documento-timbre{margin-bottom:26px}
@media print{
  .menu,.cabecalho-pagina,.acoes-pagina,.flash,.aviso,.trilha,.selo-ia,.marca-pagina,.doc-so-tela{display:none!important}
  .conteudo{padding:0;max-width:none}
  .documento{border:0;padding:0;max-width:none;font-size:12pt}
  .app{display:block}
}

/* ==================================================================
   A PESSOA DA EQUIPE

   Foto redonda com as iniciais no lugar quando não há imagem —
   melhor que um ícone genérico, porque ao menos identifica.
   ================================================================== */
.pessoa-cartao{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.pessoa-foto-bloco{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-top:12px}
.pessoa-foto{
  width:84px;height:84px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;border:2px solid var(--linha);background:var(--papel);
}
.pessoa-foto-vazia{
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;font-weight:700;color:var(--marinho);
  background:var(--papel);letter-spacing:.02em;
}
/* A foto do CLIENTE é maior e quadrada com canto arredondado, e não
   redonda como a da equipe. A diferença é de propósito: as duas
   aparecem em telas parecidas, e forma diferente é o que faz ninguém
   confundir a ficha do cliente com a ficha de quem trabalha aqui. */
.foto-cliente{
  width:180px;height:180px;object-fit:cover;border-radius:10px;
  border:2px solid var(--linha);background:var(--papel);display:block;
}
.pessoa-foto-vazia.foto-cliente-vazia{border-radius:10px;border:2px solid var(--linha)}
/* Na ficha, o retrato pequeno ao lado do nome. */
.foto-cliente-mini{
  width:56px;height:56px;object-fit:cover;border-radius:8px;
  border:1px solid var(--linha);background:var(--papel);flex:0 0 auto;
}
