/* ============================================================================
   Camada de acabamento, sobre `styles.css`.
   ============================================================================

   Por que não Bootstrap: o painel não tem os componentes do Bootstrap. Tem
   tabela de processos com marcas próprias, mesa de despacho em duas colunas,
   barras de progresso de varredura, lista de peças. Adotar o framework
   significaria reescrever cada tela com as classes dele e ainda sobrescrever
   metade — mais 60 kB para trocar um CSS caseiro por outro. O que faltava não
   era um framework: era ritmo, hierarquia e superfície. É o que está aqui.

   Fica em arquivo separado de propósito: `styles.css` continua sendo a
   estrutura, e este é só a aparência. Para voltar atrás, basta remover o
   <link> — nenhuma tela quebra. */

:root {
  /* ---- neutros -----------------------------------------------------------
     Eram cinza-esverdeados e quase sem saturação: "um cinza ridículo", e com
     razão. O viés agora é frio, na direção do acento — cinza com um pingo da
     própria cor da interface lê como escolhido; cinza puro lê como esquecido.
     E são quatro planos, não dois: fundo, superfície, superfície elevada e
     afundado, que é o que dá profundidade sem precisar de moldura em tudo. */
  --fundo: #eaeef5;
  --papel: #ffffff;
  --elevado: #ffffff;
  --afundado: #f2f5fa;
  --borda: #dde3ee;
  --borda-2: #bfc9db;

  --texto: #141a24;
  --texto-2: #3f4a5e;
  --suave: #6b7688;

  /* ---- acento ------------------------------------------------------------
     Azul de caneta sobre formulário. O anterior (#1b3a5c) era um azul-marinho
     dessaturado que sumia contra o cinza; este tem a mesma sobriedade e cor
     suficiente para o olho achar o que é clicável sem procurar. */
  --acento: #23459e;
  --acento-forte: #16317c;
  --acento-suave: #e9eefc;
  /* O que a IA escreveu na reescrita do despacho (S.m.j.): marca-texto. */
  --realce-novo: #fff1a8;
  --acento-vivo: #3d82d8;
  --barra: #3d82d8;

  /* ---- cor semântica -----------------------------------------------------
     Regra da casa, e ela manda aqui: **urgência é palavra antes de ser cor.**
     Estes tons reforçam o que já está escrito na linha; nenhum deles carrega
     informação sozinho, porque o relatório sai impresso em preto e branco e
     porque nem todo mundo distingue vermelho. */
  --perigo: #c33626;
  --perigo-fundo: #fdece9;
  --ok: #1c7a51;
  --ok-fundo: #e6f5ee;
  --alerta: #9c6a08;
  --alerta-fundo: #fdf3e0;
  --delegado: #6b4fa8;
  --delegado-fundo: #efeaf8;

  --raio: 14px;
  --raio-p: 9px;

  /* Sombra em duas camadas: um fio de contato bem curto e uma difusa larga. É
     o que faz o cartão parecer pousado em vez de desenhado. */
  --sombra: 0 1px 1.5px rgba(20, 30, 55, 0.05), 0 4px 14px rgba(20, 30, 55, 0.055);
  --sombra-alta: 0 2px 4px rgba(20, 30, 55, 0.06), 0 18px 44px rgba(20, 30, 55, 0.13);
  --sombra-acento: 0 2px 6px rgba(35, 69, 158, 0.22), 0 10px 28px rgba(35, 69, 158, 0.2);

  /* Uma curva só para tudo o que se move, e um tempo só. Duas telas com
     velocidades diferentes é o que faz uma interface parecer remendada. */
  --mola: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rapido: 0.16s;
  --normal: 0.26s;

  /* A borda do papel do leitor. Mora no `:root` e não em `.autos[open]` porque
     a PRÉVIA da capa, na Administração, usa a mesma classe `.autos-folha` e
     vive fora do diálogo — lá o token não existiria, e a borda simplesmente
     não se aplicaria. Escopo de token é o tipo de erro que nenhum conferidor
     de `var()` órfão pega: ele está definido, só não onde é usado. */
  --papel-borda: color-mix(in srgb, var(--texto) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1116;
    --papel: #171c24;
    --elevado: #1d232d;
    --afundado: #12161c;
    --borda: #262e3a;
    --borda-2: #3a4658;

    --texto: #e7ebf2;
    --texto-2: #b3bccb;
    --suave: #8592a5;

    --realce-novo: #5a4d12;
    /* No escuro o acento tem de subir de luminosidade, senão azul sobre
       quase-preto vira um borrão. É o mesmo azul, não outro. */
    --acento: #7ea6f0;
    --acento-forte: #9dbcf7;
    --acento-suave: #1a2338;
    --acento-vivo: #62a8f0;
    --barra: #62a8f0;

    --perigo: #ef8375;
    --perigo-fundo: #33201d;
    --ok: #4fbc8b;
    --ok-fundo: #16291f;
    --alerta: #d8ab54;
    --alerta-fundo: #2c2417;
    --delegado: #a68fd6;
    --delegado-fundo: #241f33;

    --sombra: 0 1px 1px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.5);
    --sombra-acento: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(98, 168, 240, 0.16);
  }
}

body {
  font-feature-settings: 'cv05', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------- a imagem de fundo
   O papel de parede do painel, enviado na Administração. Duas camadas presas à
   JANELA (`position: fixed`), não à página: com `absolute` a imagem rolaria
   junto e esticaria pela altura inteira do documento — numa aba de seiscentas
   linhas ela viraria uma tira espremida.

   Filho de `z-index` negativo é pintado DEPOIS do fundo do próprio `body` e
   ANTES do conteúdo dele. É isso que deixa a imagem cobrir o `var(--fundo)` e
   ainda assim ficar atrás de tudo o que se lê — sem precisar mexer no
   empilhamento de nenhuma tela.

   Os cartões e o cabeçalho continuam OPACOS de propósito: o fundo aparece nas
   margens e nos vãos, que é onde ele não disputa com texto. Painel bonito e
   ilegível é painel que se desliga na semana seguinte.

   Sem imagem, `--fundo-imagem` fica em `none` e as duas camadas não desenham
   nada — a tela é exatamente a de antes. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--fundo-imagem, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* O véu. `--fundo-veu-cor` é o que responde ao "claridade ou obscuridade": o
   fundo do próprio tema, branco ou preto, escolhido na Administração porque
   depende da imagem que cada casa subir. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: color-mix(
    in srgb,
    var(--fundo-veu-cor, var(--fundo)) calc(var(--fundo-veu, 1) * 100%),
    transparent
  );
  pointer-events: none;
}

/* ---------------------------------------------------------------- cabeçalho */

.topo {
  padding: 12px 24px;
  border-bottom: 1px solid var(--borda);
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
}
.topo h1 {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.015em;
}
.logo { font-size: 22px; }

/* As abas viram um controle segmentado: o grupo se lê como um objeto só, e a
   aba ativa não depende de cor para ser identificada — ela tem fundo. */
.abas {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--afundado);
  border: 1px solid var(--borda);
  border-radius: 999px;
  flex-wrap: wrap;
}
.abas .aba {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--suave);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.abas .aba:hover { color: var(--texto); }
.abas .aba.ativa,
.abas .aba[aria-current='page'] {
  background: var(--papel);
  color: var(--texto);
  box-shadow: var(--sombra);
  font-weight: 600;
}

/* ------------------------------------------------------------------ cartões */

main { max-width: 1240px; padding: 26px 24px 72px; }

.cartao {
  border-radius: var(--raio);
  padding: 22px 24px;
  box-shadow: var(--sombra);
  border-color: var(--borda);
}
.cartao h2 {
  font-family: var(--serif);
  font-size: 16.5px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------- formulários */

label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 16px 0 6px;
}
.check-inline, .lista-escopos label, .competencias label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  color: var(--texto);
}

input[type='text'], input[type='password'], input[type='search'],
input[type='number'], select, textarea {
  border-radius: var(--raio-p);
  border-color: var(--borda-2);
  background: var(--papel);
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
textarea { width: 100%; border: 1px solid var(--borda-2); font: inherit; }

/* --------------------------------------------------------------- botões */

.botao {
  border-radius: var(--raio-p);
  padding: 9px 17px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  /* A `transition` e o `:active` deste botão estão no bloco "Movimento e
     acabamento", mais abaixo. Declará-los aqui também deixava duas versões
     disputando a cascata: a de baixo vencia, e esta ficava morta enganando
     quem lesse. */
}
.botao.primario {
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.15);
  border-color: transparent;
}
.botao.fantasma {
  border-color: var(--borda-2);
  background: var(--papel);
  color: var(--texto-2);
}
.botao.fantasma:hover { background: var(--afundado); border-color: var(--suave); }
.botao.pequeno { padding: 6px 12px; font-size: 12.5px; }

/* --------------------------------------------------------------- tabelas */

.tabela { border-collapse: separate; border-spacing: 0; }
.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--afundado);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--suave);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
}
.tabela tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela tbody tr:hover td { background: var(--afundado); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .desc { color: var(--suave); font-size: 12.5px; margin-top: 2px; }

.tabela-rolagem {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  overflow: auto;
  max-height: 66vh;
}

.link-processo {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--acento) 35%, transparent);
  text-underline-offset: 3px;
}
.link-processo:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- janelas */

dialog {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 24px 26px 28px;
  background: var(--papel);
  color: var(--texto);
}
dialog::backdrop { background: rgba(15, 22, 20, 0.4); backdrop-filter: blur(3px); }
.dlg-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}
.dlg-cabecalho h2 { font-family: var(--serif); font-size: 19px; margin: 0; }

/* A mesa ganha um traço entre as colunas: separa ler de escrever. */
@media (min-width: 1101px) {
  .mesa { column-gap: 30px; }
  .mesa > .mesa-lado:first-child {
    padding-right: 28px;
    border-right: 1px solid var(--borda);
  }
}
.mesa-lado h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--suave);
  font-family: inherit;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 22px 0 8px;
}
.texto-ia {
  background: var(--afundado);
  border-radius: var(--raio-p);
  padding: 13px 15px;
  border: 1px solid var(--borda);
}

/* --------------------------------------------------------------- progresso */

/* A barra de progresso está inteira no bloco "Movimento e acabamento", mais
   abaixo — inclusive o gradiente e o brilho que atravessa. Só a altura e o
   arredondamento ficam aqui, porque são forma, não movimento. */
.barra { height: 5px; }
.barra-fill { border-radius: 999px; }

/* ----------------------------------------------------------------- rodapé */

.aviso-rodape {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 12.5px;
  color: var(--suave);
  line-height: 1.6;
}

/* ------------------------------------------------------------- gráficos */

.graf-secao {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--suave);
  margin: 30px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.graf-secao:first-child { margin-top: 4px; }

/* Duas colunas, e o cartão "largo" ocupa as duas. Séries no tempo e listas de
   quinze linhas não cabem em meia tela sem virar borrão. */
.graf-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.graf-grade > .largo { grid-column: 1 / -1; }
@media (max-width: 900px) { .graf-grade { grid-template-columns: 1fr; } }

.graf-cartao { margin-bottom: 0; padding: 18px 20px 16px; }
.graf-cartao h2 { font-family: inherit; font-size: 14px; margin-bottom: 3px; }
.graf-cartao .ajuda { font-size: 12.5px; margin-bottom: 12px; }
.graf-corpo { min-height: 40px; }

/* O SVG escala uniformemente (sem `preserveAspectRatio="none"`), então a altura
   sai da proporção do viewBox — 620x260. Fixar altura em px de novo voltaria a
   deformar. */
.g-svg { width: 100%; height: auto; display: block; max-width: 100%; }
.g-hbar { width: 100%; }

.g-rot { font-size: 12px; fill: var(--texto-2); }
.g-num { font-size: 12px; fill: var(--suave); font-weight: 600; }
.g-eixo { font-size: 11px; fill: var(--suave); }
.g-total { font-size: 26px; fill: var(--texto); font-weight: 700; }
.g-grade { stroke: var(--borda); stroke-width: 1; }

.g-rosca { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.g-rosca .g-svg { width: 158px; height: 158px; flex: none; }
.g-rosca .g-legenda { flex: 1 1 150px; margin-top: 0; }

.g-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.g-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.g-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.g-chip b { color: var(--texto); font-weight: 600; }

.g-vazio { color: var(--suave); font-size: 13px; padding: 22px 0; text-align: center; margin: 0; }

/* ------------------------------------------------- ranking de processos */
/* Linha clicável com a barra desenhada no fundo: mantém a leitura comparativa
   e ganha hover, clique e ação — o que um <rect> de SVG não dá. */
.rank { display: flex; flex-direction: column; }
.rank-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--raio-p);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--acento) 13%, transparent) var(--pct),
    transparent var(--pct)
  );
  border-bottom: 1px solid var(--borda);
}
.rank-linha:last-child { border-bottom: 0; }
.rank-linha:hover { background-color: var(--afundado); }

.rank-alvo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.rank-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--acento) 35%, transparent);
  text-underline-offset: 3px;
}
.rank-alvo:hover .rank-num { text-decoration-color: currentColor; }
.rank-desc {
  font-size: 12px;
  color: var(--suave);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-valor { font-size: 12.5px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }

/* ============================================================================
   Movimento e acabamento
   ============================================================================

   Três regras, e a terceira é a que mais importa aqui:

   1. **Uma curva e um tempo só** (`--mola`, `--rapido`, `--normal`). Telas com
      velocidades diferentes parecem remendadas.
   2. **Movimento diz alguma coisa** — o que apareceu, o que respondeu ao
      clique, o que está trabalhando. Decoração que se mexe sozinha cansa numa
      tela que fica aberta o dia inteiro.
   3. **Há cinco laços de polling de 2 em 2 segundos.** Número que se atualiza
      sozinho não pode saltar: a barra interpola a largura, e o texto não
      recebe transição nenhuma (texto que faz fade a cada 2s vira cintilação).

   Tudo isto está atrás de `prefers-reduced-motion` no fim do arquivo. */

/* ------------------------------------------------------------------ foco
   O contorno do navegador some contra fundo claro em metade dos elementos.
   Um anel próprio, com a cor do acento e um halo de contraste, funciona nos
   dois temas e sobre qualquer superfície. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* --------------------------------------------------------------- cartões */
.cartao {
  background: var(--elevado);
  transition:
    box-shadow var(--normal) var(--mola),
    transform var(--normal) var(--mola),
    border-color var(--normal) var(--mola);
}

/* --------------------------------------------------------------- botões */
.botao {
  transition:
    background var(--rapido) var(--mola),
    border-color var(--rapido) var(--mola),
    box-shadow var(--rapido) var(--mola),
    transform var(--rapido) var(--mola);
}
.botao:hover:not(:disabled) { transform: translateY(-1px); }
/* O afundar no clique é o único retorno tátil que uma tela tem. */
.botao:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.botao:disabled { opacity: 0.55; }

/* ------------------------------------------------------------- progresso
   A barra ganha três coisas: gradiente (que dá direção), interpolação da
   largura (que impede o salto a cada volta do polling) e um brilho que
   atravessa — o sinal de "ainda está andando" quando a porcentagem fica parada
   por vinte segundos numa requisição lenta. */
.barra {
  position: relative;
  overflow: hidden;
  background: var(--afundado);
  box-shadow: inset 0 1px 2px rgba(20, 30, 55, 0.06);
}
.barra-fill {
  position: relative;
  background: linear-gradient(90deg, var(--acento), var(--acento-vivo));
  transition: width 0.5s var(--mola);
}
.barra-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  animation: brilho 1.8s ease-in-out infinite;
}
@keyframes brilho {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------ abas
   O sublinhado desliza de uma aba para a outra em vez de piscar no lugar novo.
   É o movimento que diz "você saiu dali e veio para cá". */
#abas .aba { position: relative; transition: color var(--rapido) var(--mola); }
#abas .aba::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--acento);
  transform: scaleX(0);
  transition: transform var(--normal) var(--mola);
}
#abas .aba[aria-current='page']::after { transform: scaleX(1); }

/* A bolinha de pendência (telas/pendencias.js). Traz o número, não só a cor:
   urgência é palavra antes de ser cor. `--papel` no texto porque o vermelho do
   tema escuro é claro, e branco sobre ele some. Verificando, sem número ainda,
   é um anel neutro — cinza não promete nada. */
.aba-bolinha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--perigo);
  color: var(--papel);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.aba-bolinha.verificando {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--suave);
  animation: bolinha-pulso 1.6s ease-in-out infinite;
}
@keyframes bolinha-pulso {
  50% { opacity: 0.35; }
}
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- tabelas */
.tabela tbody tr { transition: background var(--rapido) linear; }
.tabela tbody tr:hover { background: var(--acento-suave); }

/* ------------------------------------------------------------- entradas */
input, select, textarea {
  transition: border-color var(--rapido) var(--mola), box-shadow var(--rapido) var(--mola);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* ----------------------------------------------------------- aparecendo
   Uma entrada curta e sem deslocamento vertical grande: o conteúdo já está no
   lugar certo, só chega. Deslocamento longo faria a tela parecer que reflui. */
@keyframes chegando {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.chega { animation: chegando var(--normal) var(--mola) both; }

/* --------------------------------------------------------------- diálogo */
dialog::backdrop {
  background: rgba(12, 18, 32, 0.42);
  backdrop-filter: blur(3px);
}
dialog[open] { animation: chegando var(--normal) var(--mola) both; }

/* ------------------------------------------------------- menos movimento
   Regra do usuário, não sugestão. Some tudo o que se mexe; o que informava
   por movimento passa a informar por presença. */
@media (prefers-reduced-motion: reduce) {
  .aba-bolinha.verificando { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .barra-fill::after { display: none; }
  .botao:hover:not(:disabled) { transform: none; }
}

/* ============================================================================
   Modo turbo
   ============================================================================

   É a tela onde vale gastar a ousadia: ela existe para ser a primeira coisa
   que se olha. O resto do painel continua sóbrio.

   A regra da casa vale aqui inteira: **urgência é palavra antes de ser cor.**
   A tarja colorida na margem da ficha reforça o que já está escrito na linha
   de motivo — some a cor e a ficha continua dizendo "prazo vence em 2 dias". */

.aba-turbo {
  font-weight: 600;
  color: var(--acento);
}
.aba-turbo:hover { color: var(--acento-forte); }

.turbo-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
}
.turbo-titulo {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.02em;
}
.turbo-unidade {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--suave);
}
.turbo-unidade select { min-width: 190px; }

/* O único botão do painel com peso de convite. */
#btn-turbo-montar {
  background: linear-gradient(135deg, var(--acento), var(--acento-vivo));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sombra-acento);
}
#btn-turbo-montar:hover:not(:disabled) { filter: brightness(1.07); }

/* ------------------------------------------------------------- o convite */
.turbo-convite { text-align: center; padding: 40px 28px; max-width: 620px; margin: 0 auto; }
.turbo-convite-icone {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 14px;
  /* Pulsa devagar e para: chama uma vez, não fica piscando o dia inteiro. */
  animation: pulso 2.4s var(--mola) 3;
}
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.turbo-convite h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 10px; }
.turbo-convite p { max-width: 52ch; margin: 0 auto 10px; color: var(--texto-2); }

/* ----------------------------------------------------------- progresso */
.turbo-progresso { max-width: 620px; margin: 0 auto 18px; }
.turbo-progresso-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

/* -------------------------------------------------------------- resumo */
.turbo-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  padding: 0 0 14px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  color: var(--suave);
}
.turbo-resumo strong { color: var(--texto); font-size: 15px; }

/* --------------------------------------------------------------- ficha */
.turbo-ficha {
  position: relative;
  background: var(--elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px 16px 22px;
  margin: 0 0 12px;
  overflow: hidden;
  animation: chegando var(--normal) var(--mola) both;
}
/* A tarja da margem: reforço, nunca o dado. */
.turbo-ficha::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--borda-2);
}
.turbo-ficha.grave::before { background: var(--perigo); }
.turbo-ficha.atencao::before { background: var(--alerta); }
/* Voltou sozinho: a tarja é CINZA de propósito. A ausência de cor é o recado —
   e a palavra continua escrita na etiqueta e na sugestão, para quem imprime em
   preto e branco e para quem não distingue as duas. */
.turbo-ficha.sozinho::before { background: var(--borda-2); }
.turbo-ficha.sozinho { opacity: 0.86; }
.turbo-ficha.sozinho:hover, .turbo-ficha.sozinho:focus-within { opacity: 1; }

/* A primeira da fila é a que se está trabalhando: sobe um plano. */
.turbo-ficha.atual {
  box-shadow: var(--sombra-alta);
  border-color: var(--acento);
}

/* Saindo: encolhe e some, para o próximo subir para o lugar dela. */
.turbo-ficha.saindo {
  animation: saindo 0.34s var(--mola) both;
  pointer-events: none;
}
@keyframes saindo {
  to { opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
}

.turbo-ficha-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.turbo-posicao {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.turbo-numero {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.turbo-tipo { color: var(--texto-2); font-size: 13.5px; margin: 0 0 10px; }
.turbo-tipo .esp { color: var(--suave); }

/* Os motivos: etiquetas com palavra dentro. */
.turbo-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.turbo-motivo {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: var(--afundado);
  color: var(--texto-2);
  white-space: nowrap;
}
.turbo-motivo.grave {
  border-color: color-mix(in srgb, var(--perigo) 40%, transparent);
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-weight: 600;
}
.turbo-motivo.aviso {
  border-color: color-mix(in srgb, var(--alerta) 40%, transparent);
  background: var(--alerta-fundo);
  color: var(--alerta);
}
/* "Calmo" é o oposto de "grave": mais apagado que a etiqueta comum, para dizer
   que aquilo ali não cobra nada. */
.turbo-motivo.calmo {
  border-style: dashed;
  color: var(--suave);
  background: transparent;
}

/* O começo do último despacho, na ficha. Fundo de papel e uma barra na margem:
   é CITAÇÃO, texto de outro documento dentro da nossa tela, e precisa parecer
   isso — sem a marca, ele se confundiria com a sugestão do painel logo abaixo,
   que é a única frase da ficha que o painel assina. */
.turbo-despacho {
  border-left: 3px solid var(--borda-2);
  background: var(--afundado);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  padding: 9px 12px;
  margin: 0 0 12px;
}
.turbo-despacho-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 5px;
  font-size: 11.5px;
}
.turbo-despacho-cab .qual {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--suave);
}
.turbo-despacho-cab .nome { color: var(--texto-2); font-weight: 600; }
.turbo-despacho-cab .fonte { margin-left: auto; color: var(--suave); font-family: var(--mono); }
.turbo-despacho-texto {
  margin: 0;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-2);
}
.turbo-despacho-texto.vazio { font-family: inherit; font-size: 12.5px; color: var(--suave); font-style: italic; }

/* A caixa de seleção da ficha, e o realce de quem está marcado. O realce é de
   BORDA e não de fundo: a ficha já usa fundo para dizer urgência, e duas
   informações no mesmo canal viram uma só. */
.turbo-marca { margin: 0 2px 0 0; flex: none; }
.turbo-ficha.marcada {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  box-shadow: var(--sombra), 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent);
}

/* A barra do lote. Fica acima das fichas e só aparece com fila na tela. */
.turbo-lote {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 10px 13px;
  margin: 0 0 14px;
}
.turbo-lote-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.turbo-lote-linha .espacador { flex: 1; }
.turbo-lote-linha .linha-acoes { flex-wrap: wrap; }
.turbo-lote #turbo-lote-ajuda { margin: 7px 0 0; }
.turbo-lote-andamento { margin-top: 10px; }
.turbo-lote-andamento .barra { margin-top: 7px; }
#turbo-lote-relato:not(:empty) {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
}

/* O que o turbo sugere fazer. */
.turbo-sugestao {
  background: var(--acento-suave);
  border-radius: var(--raio-p);
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--texto-2);
}
.turbo-sugestao strong { color: var(--acento-forte); }
/* A sugestão que diz "não faça nada" não pode usar o fundo de acento, que é o
   convite a clicar. */
.turbo-sugestao.calma { background: var(--afundado); }
.turbo-sugestao.calma strong { color: var(--texto-2); }
.turbo-sugestao .destino { font-family: var(--mono); font-weight: 600; }
.turbo-sugestao .porque { display: block; margin-top: 4px; color: var(--suave); font-size: 12.5px; }

.turbo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.turbo-acoes .espacador { flex: 1; }

/* O botão de ditar, enquanto ouve. A cor sozinha não informa: o rótulo do botão
   também troca ("Ditar" → "Ouvindo… parar"), e a linha abaixo do campo diz o
   que está acontecendo. A pulsação é o que distingue "ouvindo" de "travado". */
#dsp-ditar[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--perigo) 50%, transparent);
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-weight: 600;
  animation: pulsandoMic 1.4s ease-in-out infinite;
}
@keyframes pulsandoMic {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--perigo) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  #dsp-ditar[aria-pressed="true"] { animation: none; }
}

/* O registro em forma de terminal.

   `display` mora no `[open]`, e só nele: um `display: flex` solto em `.terminal`
   venceria o `dialog:not([open]){display:none}` da folha do navegador e a janela
   apareceria desenhada no fundo de todas as telas — foi o que o leitor dos autos
   custou, e é o que `conferir-tema.mjs` passou a acusar por causa disso. */
.terminal:not([open]) { display: none; }
.terminal[open] {
  display: flex;
  flex-direction: column;
  width: min(92vw, 760px);
  max-height: min(80vh, 640px);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
}
.terminal::backdrop { background: rgb(10 14 22 / 0.45); }

.terminal-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px 11px;
  border-bottom: 1px solid var(--borda);
}
.terminal-topo h3 { font-family: var(--serif); font-size: 17px; margin: 0 0 2px; }
.terminal-topo .ajuda { margin: 0; }
/* O relógio: números tabulares, senão a largura pula a cada segundo e a linha
   inteira treme. */
.terminal-relogio {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--suave);
  background: var(--afundado);
  border-radius: 999px;
  padding: 3px 10px;
  flex: none;
}

.terminal-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  background: var(--afundado);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.terminal-log:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.terminal-linha {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  margin: 0 0 3px;
  align-items: baseline;
}
.terminal-linha time { color: var(--suave); font-variant-numeric: tabular-nums; }
.terminal-linha .marca { font-weight: 700; color: var(--suave); }
.terminal-linha .txt { color: var(--texto-2); word-break: break-word; }
.terminal-linha.ok .marca { color: var(--ok); }
.terminal-linha.ok .txt { color: var(--texto); }
.terminal-linha.erro .marca, .terminal-linha.erro .txt { color: var(--perigo); font-weight: 600; }
.terminal-linha.aviso .marca, .terminal-linha.aviso .txt { color: var(--alerta); }
.terminal-linha.passo .marca { color: var(--acento); }
/* O passo em curso pisca no fim da linha, como o cursor de um terminal. É o
   único sinal de que a espera é trabalho e não travamento. */
.terminal-linha.em-curso .txt::after {
  content: "▍";
  margin-left: 4px;
  color: var(--acento);
  animation: piscando 1.05s steps(1) infinite;
}
@keyframes piscando { 50% { opacity: 0; } }

.terminal-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-top: 1px solid var(--borda);
}
.terminal-rodape .espacador { flex: 1; }
.terminal-estado { font-size: 12.5px; color: var(--suave); }
.terminal-estado.ok { color: var(--ok); font-weight: 600; }
.terminal-estado.erro { color: var(--perigo); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento, o cursor fica ACESO em vez de sumir: ele é a informação de
     "este passo ainda está acontecendo", e some-la deixaria a linha do passo em
     curso idêntica à de um passo terminado. */
  .terminal-linha.em-curso .txt::after { animation: none; }
}

/* O título de um bloco da mesa com um controle do lado. */
.mesa-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mesa-titulo h3 { margin: 0; }
.mesa-titulo .interruptor { margin-left: auto; }
#dsp-voz-estado:empty { display: none; }
#dsp-voz-estado { margin: 6px 0 0; }

/* Interruptor: uma caixa de seleção que parece um interruptor.

   A caixa continua existindo e continua sendo ela que recebe o clique, o foco e
   o teclado — o desenho é do `.trilho` ao lado, e a caixa fica invisível por
   `opacity`, NUNCA por `display:none`, que a tiraria da ordem de tabulação e do
   leitor de tela. E o rótulo é PALAVRA, não só o desenho: a mesma regra da
   urgência no turbo, pelo mesmo motivo. */
.interruptor {
  /* `relative` não é enfeite: a caixa invisível é `absolute`, e sem um
     ancestral posicionado ela se posicionaria contra a janela — invisível,
     clicável, e em cima de outra coisa qualquer da tela. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--suave);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.interruptor input {
  /* Invisível por `opacity`, NUNCA por `display:none` — que a tiraria da ordem
     de tabulação e do leitor de tela. Ela continua sendo quem recebe o clique,
     o foco e a barra de espaço; o desenho é do `.trilho` ao lado. */
  position: absolute;
  inset: 0 auto 0 0;
  opacity: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.interruptor .trilho {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--borda-2);
  transition: background var(--rapido) var(--mola);
  flex: none;
}
.interruptor .trilho::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform var(--rapido) var(--mola);
}
.interruptor input:checked + .trilho { background: var(--acento); }
.interruptor input:checked + .trilho::after { transform: translateX(14px); }
.interruptor input:focus-visible + .trilho {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.interruptor input:checked ~ .rotulo { color: var(--texto-2); }
/* Falando: o trilho pulsa. É o único sinal de que a voz está em curso quando o
   som está no mudo do sistema — e "está lendo" e "vai ler o próximo" são
   estados diferentes que o interruptor sozinho não separa. */
.interruptor.falando .trilho { animation: pulsandoVoz 1.6s ease-in-out infinite; }
@keyframes pulsandoVoz {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .interruptor .trilho, .interruptor .trilho::after { transition: none; }
  .interruptor.falando .trilho { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
}

/* O cartão do desfecho: a parte da mesa que AGE.
   Tudo acima dele é redação — texto que se escreve e se relê. Ele é o que
   escreve no SEI e não se desfaz por aqui, e por isso se distingue: fio de
   acento no alto, fundo levemente afundado, e um título que é frase, não
   versalete. */
.dsp-desfecho {
  margin-top: 18px;
  border-top: 2px solid var(--acento);
  background: var(--afundado);
}
.dsp-desfecho > label[for="dsp-desfecho"] {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto);
}
.dsp-desfecho select { background: var(--papel); }
.dsp-desfecho #dsp-desfecho-ajuda { margin: 6px 0 0; }

/* As caixas soltas do desfecho. Espaço maior entre COLUNAS do que entre linhas:
   é ele que separa uma opção da seguinte, enquanto cada caixa continua colada
   no texto dela. Mesma regra do `.periodo`. */
.dsp-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0;
}

/* O rodapé separa o que age do que se preenche — e, dentro dele, o Protocolar
   das saídas. Coladas, "Arquivar sem despachar" parecia o passo seguinte de
   "Protocolar", e não a alternativa a ele. */
.dsp-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.dsp-rodape .espacador { flex: 1; min-width: 12px; }
.dsp-desfecho #dsp-estado { margin: 10px 0 0; }

/* Uma opção que é uma FRASE, não uma caixa: "reabrir aqui em [5] dias úteis".
   A pastilha existe para dizer onde a frase começa e termina — sem ela, o campo
   de dias e o "dias úteis" ficam à mesma distância da opção vizinha, que é
   outra coisa, e a linha lê como um amontoado. Apagada enquanto desligada:
   controle que não vai a lugar nenhum não deve ter o mesmo peso do que vai. */
.opcao-composta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--afundado);
  transition: opacity var(--rapido) var(--mola), border-color var(--rapido) var(--mola);
}
/* Dentro da pastilha o campo é parte da frase, não um formulário: o padding de
   9px do campo geral o deixava mais alto que a pastilha inteira. */
.opcao-composta input[type="number"] {
  width: 58px;
  margin: 0;
  padding: 4px 7px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--papel);
}
.opcao-composta input[type="number"]:disabled { color: var(--suave); }
/* A palavra que abre a frase quando não há caixa de marcar ("esperar 30 dias
   úteis"): sem ela, a pastilha começaria num número solto. */
.opcao-texto { font-size: 13.5px; color: var(--texto); }
/* Dentro da pastilha o fundo já é claro; num cartão afundado ela precisa de um
   fundo próprio para não sumir. */
.cartao .opcao-composta { background: var(--papel); }
.cartao .opcao-composta:not(.desligada) { background: var(--acento-suave); }
.opcao-composta.desligada { opacity: 0.62; }
.opcao-composta:not(.desligada) {
  border-color: color-mix(in srgb, var(--acento) 35%, transparent);
  background: var(--acento-suave);
}
@media (prefers-reduced-motion: reduce) {
  .opcao-composta { transition: none; }
}

/* Por onde começar: a barra de recortes sobre a mesma fila.

   São botões, não abas: eles não trocam de tela, recortam a lista que já está
   embaixo. O número dentro de cada um é a contagem do recorte, e sai do mesmo
   `cabe` que filtra — ver `LENTES`, em `telas/turbo.js`. */
.turbo-lentes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px;
}
.turbo-lente {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--papel);
  color: var(--texto-2);
  cursor: pointer;
  transition: background var(--rapido) var(--mola), border-color var(--rapido) var(--mola);
}
.turbo-lente:hover { border-color: var(--borda-2); background: var(--afundado); }
.turbo-lente:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.turbo-lente .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--suave);
  background: var(--afundado);
  border-radius: 999px;
  padding: 1px 6px;
}
/* A escolhida é marcada por fundo E por borda, não só por cor de texto: num
   monitor ruim a diferença de tom sozinha some. O `aria-pressed` diz o mesmo
   para quem não a vê. */
.turbo-lente.escolhida {
  background: var(--acento-suave);
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--acento-forte);
  font-weight: 600;
}
.turbo-lente.escolhida .n { background: var(--papel); color: var(--acento-forte); }
.turbo-lente.calma { border-style: dashed; color: var(--suave); }
.turbo-lente-dica { margin: 0 0 12px; }
.turbo-filtro { font-size: 12.5px; color: var(--suave); margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .turbo-lente { transition: none; }
}

/* Estado de uma ficha que está executando ou já resolveu. */
.turbo-estado {
  font-size: 12.5px;
  color: var(--suave);
  display: flex;
  align-items: center;
  gap: 7px;
}
.turbo-estado.feito { color: var(--ok); font-weight: 600; }
.turbo-estado.falhou { color: var(--perigo); font-weight: 600; }
.turbo-girando {
  width: 13px;
  height: 13px;
  border: 2px solid var(--borda-2);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girando 0.7s linear infinite;
  flex: none;
}
@keyframes girando { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- fim */
.turbo-fim {
  text-align: center;
  padding: 34px 20px;
  border: 1px dashed var(--borda-2);
  border-radius: var(--raio);
  color: var(--texto-2);
}
.turbo-fim p { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .turbo-convite-icone,
  .turbo-girando { animation: none; }
  .turbo-ficha.saindo { animation: none; opacity: 0; }
}

@media (max-width: 640px) {
  .turbo-topo { align-items: stretch; }
  .turbo-unidade { flex: 1; }
  .turbo-unidade select { min-width: 0; width: 100%; }
}

/* ============================================================================
   Leitor dos autos
   ============================================================================

   Sem moldura, sem barra, sem rodapé: o diálogo é só um espaço, e o que se vê
   é o calhamaço flutuando sobre a tela apagada.

   **Todas as folhas têm o mesmo tamanho.** É o que faz o maço ser um maço — e
   a consequência é que uma peça longa vira várias folhas, não uma folha
   comprida. Quem corta é `column-width` na largura da folha: cada coluna é uma
   folha, e virar é deslocar uma coluna.

   A proporção é a do A4 (1:√2). A altura manda: a folha inteira tem de caber
   na tela sem rolagem, senão o maço vira uma faixa que se rola — que é
   exatamente o que esta tela deixou de ser. */

.autos:not([open]) { display: none; }

.autos[open] {
  /* O diálogo não desenha nada: é só o palco. Sem fundo, sem borda, sem
     sombra — a sombra é da folha. */
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  display: block;

  --folha-alt: min(1040px, 90vh);
  --folha-larg: calc(var(--folha-alt) / 1.414);
}

/* Em tela cheia a folha cresce: sem a moldura do navegador, os 90vh que
   deixavam respiro na página viram margem desperdiçada. 98vh e não 100 porque
   folha encostada nas duas bordas perde a sombra, que é o que a faz flutuar.

   `.maximizado` diz o mesmo por outro caminho: é a RESERVA para quando o
   navegador recusa a tela cheia (iframe sem permissão, política do sistema).
   Sem ela o botão seria um clique que não faz nada — e um botão que às vezes
   não faz nada é pior do que botão nenhum. */
.autos[open]:fullscreen,
.autos[open].maximizado {
  --folha-alt: min(1400px, 98vh);
  --folha-larg: calc(var(--folha-alt) / 1.414);
}

/* Estreito: a largura é que passa a mandar, e a folha fica mais alta que a
   tela — aí ela rola por dentro, que é o menos ruim. */
@media (max-width: 620px), (max-aspect-ratio: 5/8) {
  .autos[open] {
    --folha-larg: min(94vw, 620px);
    --folha-alt: calc(var(--folha-larg) * 1.414);
  }
  /* A regra de cima tem especificidade maior e venceria esta, desmanchando a
     proporção no celular: aqui a LARGURA é que manda. Por isso a tela cheia é
     redeclarada dentro da consulta, em vez de valer por herança. */
  .autos[open]:fullscreen,
  .autos[open].maximizado {
    --folha-larg: min(99vw, 620px);
    --folha-alt: calc(var(--folha-larg) * 1.414);
  }
}

.autos::backdrop {
  background: rgba(8, 11, 18, 0.78);
  backdrop-filter: blur(6px) saturate(0.75);
}

/* --------------------------------------------------------------- o botão
   O único. Solto no canto, sem barra em volta; o rótulo só aparece quando a
   mão chega perto. */
.autos-raiz {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--rapido) var(--mola), color var(--rapido) var(--mola);
}
.autos-raiz:hover,
.autos-raiz:focus-visible,
.autos-raiz[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.autos-raiz .rotulo {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--normal) var(--mola), opacity var(--normal) var(--mola);
}
.autos-raiz:hover .rotulo,
.autos-raiz:focus-visible .rotulo,
.autos-raiz[aria-expanded='true'] .rotulo { max-width: 140px; opacity: 1; }

/* O irmão do botão dos documentos, no canto oposto. Herda `.autos-raiz` inteiro
   e só troca de lado — duas aparências para dois botões que fazem o mesmo tipo
   de coisa (aparelho, não papel) seria remendo. O rótulo abre para a ESQUERDA,
   senão empurraria o botão para fora da tela ao aparecer. */
.autos-tela { left: auto; right: 18px; flex-direction: row-reverse; }
.autos-tela[aria-pressed='true'] { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------------------------------------------------------------- a raiz
   Painel que entra pela esquerda. Sobre o fundo apagado, não sobre papel: ele
   é aparelho de navegação, não parte dos autos. */
.autos-indice {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(340px, 84vw);
  z-index: 4;
  overflow-y: auto;
  padding: 74px 14px 24px;
  background: rgba(14, 18, 26, 0.9);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  animation: entrandoEsquerda var(--normal) var(--mola) both;
}
.autos-indice[hidden] { display: none; }
@keyframes entrandoEsquerda {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.autos-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: var(--raio-p);
  background: none;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  transition: background var(--rapido) linear, color var(--rapido) linear;
}
.autos-item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.autos-item[aria-current='true'] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 600;
}
.autos-item .n {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.6;
  text-align: right;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.autos-item .r { overflow: hidden; }
.autos-item .sem {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.62;
}

/* ---------------------------------------------------------------- o palco */
.autos-palco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A profundidade da virada vem do ANCESTRAL. `perspective` no próprio
     elemento que gira não produz perspectiva nenhuma — o sintoma é uma virada
     que achata em vez de virar. */
  perspective: 2400px;
}

/* Bordas de virar: faixas largas, invisíveis, sem seta nem moldura. O cursor é
   quem diz que dá para clicar. */
.autos-borda {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(84px, 12vw);
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
}
.autos-borda.esquerda { left: 0; cursor: w-resize; }
.autos-borda.direita { right: 0; cursor: e-resize; }
.autos-borda:disabled { display: none; }
.autos-borda:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -6px;
  border-radius: var(--raio);
}

/* --------------------------------------------------------------- o maço */
.autos-livro {
  position: relative;
  width: var(--folha-larg);
  height: var(--folha-alt);
  transform-style: preserve-3d;
}
/* **O eixo é SEMPRE a esquerda**, nos dois sentidos.
   
   É onde o papel está preso ao maço. Só o lado direito da folha se move — ela
   levanta pela borda de fora e gira sobre a lombada, para a frente ou para
   trás. Pôr o eixo à direita ao voltar (que foi o primeiro erro daqui) desenha
   um caderno encadernado do lado errado: a lombada muda de lado no meio da
   leitura, e o olho percebe mesmo sem saber nomear.

   Daí `virarTras` ser `virarFrente` tocada ao contrário — que é exatamente a
   relação física entre virar e desvirar a mesma folha. */
.autos-livro.virando-frente,
.autos-livro.virando-tras { transform-origin: left center; }
.autos-livro.virando-frente { animation: virarFrente 0.42s var(--mola) both; }
.autos-livro.virando-tras { animation: virarTras 0.42s var(--mola) both; }

/* Ângulo negativo com eixo à esquerda = a borda direita afunda e vai para o
   fundo, que é a folha se abrindo para a esquerda. Positivo traria a borda
   direita PARA FORA da tela, que é uma folha presa na direita. */
@keyframes virarFrente {
  0% { transform: rotateY(0deg); opacity: 1; }
  45% { transform: rotateY(-26deg); opacity: 0.22; }
  46% { transform: rotateY(-9deg); opacity: 0.22; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
@keyframes virarTras {
  0% { transform: rotateY(0deg); opacity: 1; }
  45% { transform: rotateY(-9deg); opacity: 0.22; }
  46% { transform: rotateY(-26deg); opacity: 0.22; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* A folha, e as duas de trás. O maço é isto: dois pseudo-elementos deslocados,
   que não custam marcação nenhuma e dão a espessura. */
.autos-folha {
  position: relative;
  width: 100%;
  height: 100%;
  /* `--elevado`, não `--papel`: no tema escuro os dois diferem, e é esse degrau
     que separa a folha do fundo apagado. Com `--papel` a folha some no escuro,
     e o maço deixa de flutuar. Branca à força seria pior — cegaria contra um
     fundo quase preto. */
  background: var(--elevado);
  color: var(--texto);
  border: 1px solid var(--papel-borda);
  border-radius: 2px;
  /* Três camadas, e a primeira é a lombada: um fio de sombra na borda esquerda,
     por dentro. É a marca de onde a folha está presa — e é o que torna visível
     que o eixo da virada é esse, e não o outro.
     Numa regra só de propósito: duas regras `.autos-folha` disputando
     `box-shadow` é colisão de cascata, e a segunda apagaria a sombra externa
     sem ninguém perceber. */
  box-shadow:
    inset 7px 0 9px -7px rgba(0, 0, 0, 0.28),
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 54px 58px 46px;
  outline: none;
  overflow: hidden;
}
.autos-folha::before,
.autos-folha::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--elevado);
  border: 1px solid var(--papel-borda);
  border-radius: 2px;
  z-index: -1;
}
/* O maço aparece à DIREITA e abaixo: as folhas de baixo escapam pela borda
   solta, nunca pela lombada. Deslocá-las para a esquerda mostraria papel
   saindo de dentro da costura. */
.autos-folha::before { transform: translate(5px, 4px); opacity: 0.55; }
.autos-folha::after { transform: translate(10px, 8px); opacity: 0.3; }


/* ------------------------------------------------------------ a trama do papel
   Papel de verdade não é uma chapa lisa: tem fibra, e é ela que o olho lê como
   papel. A trama é desenhada em CSS, não é imagem enviada — uma foto de papel
   teria de ladrilhar para cobrir folha de qualquer tamanho, e emenda de
   ladrilho é justamente o que se nota numa folha que se fica olhando.

   São duas tramas cruzadas, de passo diferente (3 px e 4 px): com o mesmo passo
   nos dois eixos sai um quadriculado de tecido, não a fibra irregular do papel.

   A intensidade vem de `--folha-textura` (0 a 1), e o alfa entra por `calc`
   dentro do `rgb()`. Em 0 os traços ficam transparentes e a folha é a de antes
   — que é o padrão, porque textura ligada por conta própria mudaria a aparência
   de toda leitura sem ninguém ter pedido.

   Regra à PARTE, depois de `.autos-folha`: lá o fundo é declarado no atalho
   `background`, que zera `background-image`. Junto, esta perderia para ele.

   A capa NÃO recebe a trama, e não é preciso excluí-la aqui: a regra de
   `[data-face]` que põe a imagem do Gabinete vem depois nesta folha e troca o
   `background-image` inteiro. Ali a textura é a que a casa subiu. */
.autos-folha {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgb(0 0 0 / calc(var(--folha-textura, 0) * 0.035)) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / calc(var(--folha-textura, 0) * 0.028)) 0 1px,
      transparent 1px 4px
    );
}
/* ---------------------------------------------------------- o corte em folhas
   `column-width` na largura útil da folha: cada coluna é uma folha, e virar é
   deslocar uma coluna. É o que dá paginação de verdade sem medir texto na mão.

   `column-gap: 0` e o deslocamento pela largura exata: qualquer folga aqui faz
   a última linha de uma folha aparecer picada no alto da seguinte. */
.folha-corpo {
  position: absolute;
  inset: 54px 58px 46px;
  overflow: hidden;
}
.folha-fluxo {
  height: 100%;
  columns: var(--util, 100%) 1;
  column-gap: 0;
  column-fill: auto;
  transition: transform 0.32s var(--mola);
}

/* ---------------------------------------------------------------- o pé
   O número do processo, e nada mais. É o carimbo que toda folha de processo de
   papel tem — e é o que diz de que autos é a folha que se está lendo, sem
   precisar de barra nenhuma no alto. */
.folha-pe {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--suave);
  border-top: 1px solid var(--borda);
  padding-top: 7px;
  font-variant-numeric: tabular-nums;
}
/* `display: flex` acima vence o atributo `hidden` — é a armadilha que
   `styles.css` documenta, e o sintoma é um pé vazio que devia sumir e fica. */
.folha-pe[hidden] { display: none; }

/* Sobre a página de PDF o pé não é rodapé: é uma pastilha no canto, com a
   contagem e nada mais. Sem fundo próprio ela sumiria contra o branco de uma
   página e contra o preto de outra. */
.folha-pe.sobre-pdf {
  left: auto;
  right: 12px;
  bottom: 12px;
  justify-content: flex-end;
  border-top: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: color-mix(in srgb, var(--elevado) 86%, transparent);
  backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------- conteúdo */
.peca-cabeca {
  break-inside: avoid;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.peca-rotulo {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 7px;
  letter-spacing: -0.01em;
}
.peca-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: 11px;
  color: var(--suave);
  align-items: center;
}
.peca-marca {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: var(--afundado);
  white-space: nowrap;
}
.peca-marca.assinado { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-fundo); color: var(--ok); }
.peca-marca.minuta { border-color: color-mix(in srgb, var(--alerta) 40%, transparent); background: var(--alerta-fundo); color: var(--alerta); }
.peca-marca.ocr { border-color: color-mix(in srgb, var(--alerta) 50%, transparent); background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }

.peca-texto {
  font-family: var(--serif);
  /* O corpo de sempre, multiplicado pelo que a Administração regula. Fator e
     não pixel: o cabeçalho e as notas continuam guardando a proporção com o
     texto, e um ajuste feito num monitor vale no outro. */
  font-size: calc(14.5px * var(--folha-texto, 1));
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* ------------------------------------------------------------- página de PDF
   Cada página do arquivo é uma FOLHA do maço, desenhada no servidor e servida
   como imagem. É isto que faz o anexo ser paginado de verdade — a alternativa,
   encaixar o visualizador do navegador dentro de uma folha, traz a barra de
   ferramentas dele e a rolagem dele por cima da nossa.

   `object-fit: contain` porque a proporção da página do PDF não é
   necessariamente a da nossa folha: esticar deformaria o documento, e cortar
   esconderia margem com carimbo. */
.folha-fluxo.com-pdf { columns: auto; height: 100%; }
/* A folha INTEIRA é a página: sem a margem do papel, que aqui seria margem em
   cima da margem que o documento já traz impressa. Com ela, a página encolhia
   no meio da folha e o carimbo do canto ficava ilegível.

   Quem manda na margem é o `inset` do corpo, não o `padding` da folha: o corpo
   é absoluto, e elemento absoluto se posiciona pela CAIXA DE PADDING do
   ancestral — o `padding` da folha não o desloca. Zerar o padding da folha não
   mudaria nada aqui, e zerar o inset basta. */
.autos-folha.com-pdf .folha-corpo { inset: 0; }
.peca-pdf {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.peca-pdf-pagina {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Enquanto a imagem não chega: um pulso discreto no lugar dela. Folha branca
   sem nada é indistinguível de peça vazia. */
.peca-pdf.carregando::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--afundado);
  animation: pulsando 1.1s ease-in-out infinite;
}
@keyframes pulsando {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

.peca-vazia { text-align: center; padding: 60px 10px; color: var(--suave); }
.peca-vazia .icone { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.5; }
.peca-vazia p { max-width: 42ch; margin: 0 auto 14px; font-size: 13.5px; }

.peca-nota {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--borda);
  font-size: 11.5px;
  color: var(--suave);
  break-inside: avoid;
}

/* --------------------------------------------------------------- a capa
   A imagem de fundo é do Gabinete, enviada pela Administração. Entra por
   `data-face` na folha, então o JavaScript não precisa saber se existe imagem
   nem qual é — e a folha sem imagem continua sendo a folha de sempre.

   Quando não há capa a rota devolve 404, o navegador não desenha nada, e o
   fundo continua o do papel. Uma imagem que falta não deixa buraco.

   O endereço vem de um token com reserva: o JavaScript carimba nele a data do
   arquivo (`--capa-textura-frente`), e é isso que faz a capa trocada aparecer
   na hora. Endereço fixo o navegador considera o mesmo endereço — a folha e a
   prévia continuavam mostrando a imagem anterior. A reserva é o endereço sem
   data, para a folha nunca ficar sem fundo enquanto a data não chegou. */
.autos-folha[data-face='capa'],
.autos-folha[data-face='contracapa'] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.autos-folha[data-face='capa'] {
  background-image: var(--capa-textura-frente, url('/api/capas/frente'));
}
.autos-folha[data-face='contracapa'] {
  background-image: var(--capa-textura-verso, url('/api/capas/verso'));
}

/* Com imagem atrás, o texto precisa de chão. Um véu do próprio papel — e a
   opacidade dele é regulada na Administração, porque quanto de textura pode
   aparecer depende da imagem que cada casa subir.

   `--capa-veu` vem de lá; o valor aqui é só a reserva para antes de os ajustes
   chegarem, que é uma volta de rede. */
.autos-folha[data-face]::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: none;
  opacity: 1;
  background: color-mix(in srgb, var(--elevado) calc(var(--capa-veu, 0.74) * 100%), transparent);
  border: none;
  z-index: 0;
}

/* O bloco de identificação: posição, largura, tamanho e alinhamento vêm da
   Administração, todos em porcentagem da folha.

   `translate(-50%, -50%)` com `left`/`top` em porcentagem faz o ponto ajustado
   ser o CENTRO do bloco, e não o canto dele. É o que torna o arrastar da prévia
   previsível: o texto acompanha o cursor em vez de fugir dele. */
.autos-folha[data-face] .capa-bloco {
  position: absolute;
  left: var(--capa-x, 11%);
  top: var(--capa-y, 28%);
  width: var(--capa-largura, 78%);
  /* `transform-origin` no canto, e SEM `translate`: `left`/`top` passam a ser a
     distância das margens esquerda e superior, que é o que a Administração
     regula. Com `translate(-50%,-50%)` — como era antes — aumentar a distância
     também deslocava o bloco por metade da própria largura, e o controle
     "distância da margem" não fazia o que dizia.
     A origem no canto faz a escala crescer PARA DENTRO da folha, em vez de
     empurrar o bloco para fora dela. */
  transform-origin: top left;
  transform: scale(var(--capa-escala, 1));
  text-align: var(--capa-alinhamento, center);
  z-index: 1;
}

/* Sobre textura escura o texto do tema some. As duas forçadas existem porque
   isso depende da imagem, e nenhuma prévia adivinha por quem escolhe. */
.autos-folha[data-capa-cor='claro'] .capa-bloco { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.autos-folha[data-capa-cor='claro'] .capa-selo,
.autos-folha[data-capa-cor='claro'] .capa-tipo,
.autos-folha[data-capa-cor='claro'] .capa-campos dt { color: rgba(255, 255, 255, 0.82); }
.autos-folha[data-capa-cor='escuro'] .capa-bloco { color: #10151c; }
.autos-folha[data-capa-cor='escuro'] .capa-selo,
.autos-folha[data-capa-cor='escuro'] .capa-tipo,
.autos-folha[data-capa-cor='escuro'] .capa-campos dt { color: rgba(16, 21, 28, 0.66); }

/* Sem `data-face` (folha de conteúdo) o bloco não existe; sem o `absolute` ele
   voltaria ao fluxo, que é o que a peça de texto usa. */
.capa-bloco { position: relative; }

/* --------------------------------------------------------------- a capa */
/* Só a contracapa usa o selo agora ("Fim dos autos"): a capa perdeu o
   "Autos do processo" — o número já diz o que a folha é, e um rótulo genérico
   acima dele só empurrava a identidade para baixo. */
.capa-selo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0 0 14px;
}
/* Sem o "Autos do processo" acima, o número é o primeiro elemento do bloco —
   e é ele que dá a identidade da folha. `text-align` sai daqui: quem alinha é
   o bloco, pelo ajuste da Administração; fixá-lo aqui venceria a escolha. */
.capa-numero {
  font-family: var(--mono);
  font-size: clamp(17px, 2.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.capa-tipo {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--texto-2);
  margin: 0 0 34px;
  text-wrap: balance;
}
.capa-campos { display: grid; margin: 0; }
.capa-campos > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
}
.capa-campos dt { color: var(--suave); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.capa-campos dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .autos-livro.virando-frente,
  .autos-livro.virando-tras { animation: none; }
  .folha-fluxo { transition: none; }
  .autos-indice { animation: none; }
}

/* ============================================================================
   Editor da capa, na Administração
   ============================================================================

   A prévia é uma folha DE VERDADE — mesma classe `autos-folha`, mesma
   proporção A4, e o posicionamento vem da mesma função que o leitor usa. O que
   se vê aqui é o que vai aparecer lá; qualquer aproximação seria uma tela cujo
   trabalho inteiro é mostrar de antemão e que mostra outra coisa. */

.capa-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  align-items: start;
}

.capa-editor-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* A linha de uma imagem enviada: miniatura à esquerda, estado e ações à direita.
   Estas três classes já eram usadas pelo cartão das capas e NÃO tinham regra
   nenhuma — a miniatura ficava sem tamanho e a linha, empilhada. Ficam aqui uma
   vez só porque o cartão do fundo do painel usa exatamente as mesmas. */
.capa-linha {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}
.capa-linha:last-of-type { border-bottom: none; }

.capa-mini {
  flex: none;
  width: 74px;
  height: 104px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--afundado);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--suave);
  text-align: center;
}
/* `object-fit: cover` porque a miniatura é prova de QUAL imagem subiu, não de
   como ela vai enquadrar: esticar deformaria e confundiria a conferência. */
.capa-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-mini.vazia { border-style: dashed; }

.capa-lado { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.capa-lado .ajuda { margin: 0; }

.capa-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.capa-campo > span { color: var(--texto-2); }
.capa-campo > span b {
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.capa-campo input[type='range'] { width: 100%; accent-color: var(--acento); }
.capa-campo small { line-height: 1.45; }

.capa-previa-caixa { text-align: center; }
.capa-previa-caixa .ajuda { margin-top: 8px; font-size: 11.5px; }

/* A folha da prévia: mesma proporção do leitor, num tamanho que cabe ao lado
   dos controles. As medidas em porcentagem fazem o ajuste valer igual nas
   duas — é o ponto de tudo isto. */
.capa-previa {
  --folha-alt: 400px;
  --folha-larg: calc(var(--folha-alt) / 1.414);
  width: var(--folha-larg);
  height: var(--folha-alt);
  padding: 20px 22px;
  cursor: grab;
  user-select: none;
  /* A prévia não é o leitor: sem a sombra funda do maço, que aqui só pesaria. */
  box-shadow: inset 4px 0 6px -5px rgba(0, 0, 0, 0.25), var(--sombra);
}
.capa-previa.arrastando { cursor: grabbing; }
/* Sem as folhas de trás: aqui o que importa é a face, não a espessura. */
.capa-previa::after { display: none; }
.capa-previa .capa-bloco { pointer-events: none; }
/* O bloco ganha um contorno tênue enquanto se arrasta, para o alvo ficar
   visível — some no leitor, onde ele não existe. */
.capa-previa.arrastando .capa-bloco {
  outline: 1px dashed color-mix(in srgb, var(--acento) 55%, transparent);
  outline-offset: 6px;
}

/* Na prévia o texto é menor porque a folha é menor: sem isto, o número do
   processo sozinho ocuparia metade dela e o ajuste sairia errado. */
.capa-previa .capa-selo { font-size: 7px; letter-spacing: 0.14em; margin: 0 0 8px; }
.capa-previa .capa-numero { font-size: 11px; margin: 0 0 5px; }
.capa-previa .capa-tipo { font-size: 8.5px; margin: 0 0 12px; }
.capa-previa .capa-campos > div { grid-template-columns: 62px 1fr; padding: 3px 0; font-size: 7.5px; gap: 5px; }
.capa-previa .capa-campos dt { font-size: 6.5px; letter-spacing: 0.04em; }

/* A prévia da folha: a mesma classe `.autos-folha`, então herda a trama e o
   corpo do texto dos mesmos tokens que o leitor lê. Só o tamanho muda — e as
   folhas de trás somem, porque aqui o que importa é a superfície, não o maço. */
.folha-previa {
  --folha-alt: 400px;
  width: calc(var(--folha-alt) / 1.414);
  height: var(--folha-alt);
  padding: 26px 28px;
  overflow: hidden;
  text-align: left;
}
.folha-previa::before,
.folha-previa::after { display: none; }
/* Sem `-webkit-line-clamp`: a folha tem altura fixa e `overflow: hidden`, então
   o texto corta sozinho — e cortar na altura é o que a folha de verdade faz. */
.folha-previa .peca-rotulo { font-size: 15px; }
.folha-previa .peca-cabeca { padding-bottom: 9px; margin-bottom: 14px; }

@media (max-width: 860px) {
  .capa-editor { grid-template-columns: 1fr; }
  .capa-previa-caixa { justify-self: center; }
}

/* ------------------------------------------------- a coluna que abre os autos
   Ação, não dado: coluna estreita, botão que não parece linha de tabela. O
   cabeçalho é PALAVRA ("Autos") e não só o ícone — a mesma regra da urgência,
   que vale para quem imprime a lista e para quem usa leitor de tela. */
.col-ler { width: 1%; white-space: nowrap; text-align: center; }

.botao-icone {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 7px;
  color: inherit;
  transition: background var(--rapido) var(--mola), border-color var(--rapido) var(--mola);
}
.botao-icone:hover:not(:disabled) { background: var(--afundado); border-color: var(--borda); }
.botao-icone:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.botao-icone:disabled { opacity: 0.3; cursor: default; }
/* Enquanto o leitor carrega: pode custar de 3 a 5 requisições ao SEI. Sem sinal
   nenhum o clique parece não ter pegado, e se clica de novo. */
.botao-icone.ocupado { animation: pulsando 1.1s ease-in-out infinite; }

/* O bloco passando da largura da folha: aviso, não erro. Ele continua
   desenhado e só sai pela borda — quem está ajustando vê na prévia. */
.aviso-transborda { color: var(--alerta); font-weight: 600; }

/* ============================================================== turbo expresso

   A mesma fila do turbo, com os autos e a mesa dentro da própria ficha. Duas
   colunas: a esquerda é leitura (a árvore, o texto das peças, o resumo), a
   direita é ação (a minuta e o Protocolar).

   A divisão é a mesma que o cartão do desfecho da mesa grande já faz, e pela
   mesma razão: **tudo o que é redação de um lado, o que ESCREVE do outro** —
   escrever no SEI não se desfaz por ali. Daí a coluna da direita ter fundo
   afundado e um fio de acento no alto, e a da esquerda ser papel liso.

   Uma armadilha herdada: estas classes são montadas em JavaScript
   (`telas/expresso.js`), e classe sem regra não dá erro — só desenha errado. É
   o que aconteceu com `.capa-linha` e `.capa-mini`, que passaram semanas sem
   folha de estilo nenhuma. Toda classe daquele arquivo tem regra aqui. */

/* O interruptor mora no cabeçalho da tela, sempre à vista — ele é o que diz que
   o modo existe. Ficou dentro da fila na primeira versão, e como aquele bloco só
   existe depois de montar, o recurso era invisível: a resposta que chegou foi
   "só aparece o turbo no menu". */
.turbo-expresso-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--afundado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.turbo-expresso-linha .ajuda { margin: 0; flex: 1; min-width: 220px; }
.turbo-expresso-barra { padding: 14px 16px; margin: 0 0 14px; }
.expresso-falhas { margin: 8px 0 0; padding-left: 18px; }
.expresso-falhas li { margin: 2px 0; }
#expresso-estado.ruim { color: var(--perigo); }

/* A fila de OCR. Só aparece quando há o que fazer — barra parada em zero é
   promessa de trabalho que não existe. */
.expresso-ocr {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--afundado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.expresso-ocr strong { display: block; font-size: 13px; margin: 0 0 6px; }
.expresso-ocr .barra { margin: 0 0 6px; }
.expresso-ocr .ajuda { margin: 0; }

/* ------------------------------------------------------------- as colunas */
.exp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--borda);
}
/* Numa tela estreita as duas colunas viram uma, e a ordem passa a ser a da
   leitura: os autos primeiro, o despacho depois — que é a ordem em que se
   decide. Lado a lado num celular, cada coluna teria vinte caracteres. */
@media (max-width: 900px) {
  .exp { grid-template-columns: 1fr; }
}

.exp-lado {
  min-width: 0; /* sem isto, um <pre> largo estica a coluna e quebra a grade */
  border-radius: var(--raio-p);
  padding: 12px 14px;
}
.exp-autos { background: var(--papel); border: 1px solid var(--borda); }
/* A da direita é a que age: fundo afundado e o fio de acento no alto. */
.exp-mesa {
  background: var(--afundado);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--acento);
}

.exp-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--borda);
}
.exp-titulo strong { font-family: var(--serif); font-size: 15px; }
.exp-sub {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}
.exp-corpo { min-width: 0; }
.exp-corpo .ajuda.ruim { color: var(--perigo); }

.exp-linha-ia {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
}
.exp-instrucao {
  flex: 1;
  min-width: 160px;
}
.exp-resumo { margin: 0 0 12px; }
.exp-resumo .texto-ia { max-height: 260px; overflow-y: auto; }

.exp-secao {
  margin: 12px 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}

/* -------------------------------------------------------------- a árvore */
.exp-arvore {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.exp-peca-item { border-top: 1px solid var(--borda); }
.exp-peca-item:first-child { border-top: none; }
.exp-peca-item.aberta { background: var(--acento-suave); }
.exp-peca-botao {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 7px 10px;
  transition: background var(--rapido) var(--mola);
}
.exp-peca-botao:hover { background: var(--afundado); }
.exp-peca-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.exp-peca-rotulo {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* De onde veio o texto, sempre à vista. "camada" NÃO quer dizer exato: boa
   parte deste acervo é OCR de outra pessoa, feito antes de o arquivo chegar ao
   SEI — o rótulo descreve a procedência, não promete precisão. */
.exp-peca-marca {
  flex: none;
  font-size: 11px;
  color: var(--suave);
  letter-spacing: 0.04em;
}
.exp-peca-marca.vazia { color: var(--alerta); }

/* A barra do OCR de uma peça. Some quando o anexo sai da fila. */
.exp-peca-ocr { padding: 0 10px 8px; }
.exp-peca-ocr .barra { height: 4px; margin: 0 0 4px; }
.exp-peca-ocr span { font-size: 11px; color: var(--suave); }

.exp-peca {
  margin: 10px 0 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--afundado);
  padding: 10px 12px;
}
.exp-peca-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.exp-peca pre {
  margin: 6px 0 0;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.55;
}
.exp-avisos { margin: 12px 0 0; font-size: 12.5px; }
.exp-avisos summary { cursor: pointer; color: var(--suave); }

/* ------------------------------------------------------------- o formulário */
.exp-campo { display: block; margin: 0 0 10px; }
.exp-campo > span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0 0 4px;
}
.exp-campo input,
.exp-campo select,
.exp-campo textarea { width: 100%; }
.exp-campo textarea { resize: vertical; min-height: 120px; }
.exp-campo .ajuda { margin: 3px 0 0; }

/* O rodapé com traço separa a redação do que AGE, como no cartão do desfecho da
   mesa grande: coladas, "Protocolar" parecia o passo seguinte da minuta, e não
   a escrita irreversível que é. */
.exp-rodape {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--borda);
}
.exp-estado { margin: 6px 0 0; }
.exp-estado.ruim { color: var(--perigo); }

/* ------------------------------------------------------------ mega mind */
/* Três colunas só onde cabem; abaixo disso o palpite desce para uma linha
   inteira, embaixo dos autos e da mesa — que é também a ordem de decidir. */
.exp.tres { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1400px) {
  .exp.tres { grid-template-columns: 1fr 1fr; }
  .exp.tres .exp-mm { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .exp.tres { grid-template-columns: 1fr; }
}
.exp-mm {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--delegado);
}
/* A confiança é palavra no subtítulo; a cor da borda só reforça. */
.exp-mm[data-confianca='baixa'] { border-top-color: var(--alerta); }
.mm-acao { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.mm-passos { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.mm-passos li { margin: 2px 0; }
.mm-porque { margin: 0 0 10px; line-height: 1.5; }
.mm-minuta, .mm-base { margin: 8px 0 0; font-size: 12.5px; }
.mm-minuta summary, .mm-base summary { cursor: pointer; color: var(--suave); }
.mm-minuta pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
  background: var(--afundado);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  font-size: 12.5px;
}
.mm-rodape { flex-wrap: wrap; }
.mm-provas { margin: 12px 0 0; }
.mm-prova {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ok);
  border-radius: var(--raio-p);
  background: var(--afundado);
}
.mm-prova.parcial { border-left-color: var(--alerta); }
.mm-prova.falsa { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.mm-prova-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mm-selo { font-size: 11.5px; color: var(--suave); white-space: nowrap; }
.mm-prova.falsa .mm-selo { color: var(--perigo); font-weight: 600; }
.mm-prova blockquote {
  margin: 6px 0;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}
.mm-prova mark { background: var(--alerta-fundo); color: var(--texto); padding: 0 1px; }
.megamind-barra { padding: 14px 16px; margin: 0 0 14px; border-top: 2px solid var(--delegado); }
.megamind-barra .ajuda { margin: 4px 0; }
.megamind-barra .ruim { color: var(--perigo); }
.megamind-barra details { margin: 8px 0 0; }
.megamind-barra summary { cursor: pointer; }
#megamind-perfil { width: 100%; font-family: var(--mono); font-size: 12.5px; margin: 6px 0; }
.megamind-casos { list-style: none; margin: 6px 0 0; padding: 0; max-height: 360px; overflow-y: auto; }
.megamind-casos li { padding: 6px 0; border-top: 1px solid var(--borda); font-size: 13px; }

/* Com o modo ligado a ficha fica mais larga: são duas colunas de trabalho
   dentro dela, e a lista de uma coluna só espremeria as duas. */
.modo-expresso .turbo-ficha { padding-bottom: 18px; }

/* ------------------------------------------------------------------ S.m.j.
   O parecer e o despacho como folha: texto justificado, largura de leitura.
   Cabeçalho e fecho do despacho aparecem apagados porque não são editáveis —
   voltam ao SEI como estão. */
.smj-numero { font-family: var(--mono); font-size: 16px; margin: 0; }
.smj-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 12px 0 14px; }
.smj-aba {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font: inherit; font-size: 13.5px; color: var(--suave); cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--rapido) var(--mola), border-color var(--rapido) var(--mola);
}
.smj-aba:hover { color: var(--texto); }
.smj-aba[aria-selected='true'] { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.smj-aba:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.smj-folha {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 22px clamp(14px, 4vw, 44px); max-width: 78ch; margin: 0 auto;
  font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--texto);
}
.smj-folha p { margin: 0 0 0.9em; text-align: justify; hyphens: auto; }
.smj-moldura { color: var(--suave); font-size: 13px; line-height: 1.45; }
.smj-moldura p { margin: 0 0 2px; text-align: left; }
#smj-cabeca { margin-bottom: 12px; }
#smj-fecho { margin-top: 12px; text-align: center; }
#smj-fecho p { text-align: center; }
.smj-ferramentas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: system-ui, sans-serif; margin: 6px 0; }
.smj-ferramentas .botao { margin: 0; min-width: 34px; }
.smj-editavel {
  border: 1px dashed var(--borda-2); border-radius: var(--raio-p); padding: 12px 14px;
  min-height: 8em; outline: none;
  transition: border-color var(--rapido) var(--mola), background var(--rapido) var(--mola);
}
.smj-editavel:focus { border-style: solid; border-color: var(--acento); background: var(--afundado); }
.smj-editavel[contenteditable='false'] { border-color: transparent; padding: 0; }
.smj-alterado { color: var(--alerta); font-weight: 600; }
.smj-devolver { border-top: 1px solid var(--borda); margin-top: 18px; padding-top: 14px; }
.smj-devolver h3 { font-size: 14px; margin: 0 0 10px; }
.smj-devolver #smj-destino { width: min(22em, 100%); }
.smj-devolver .botao.primario { margin-top: 0; }
.smj-gabinete {
  display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--alerta); background: var(--afundado);
}
.smj-gabinete .botao { margin: 0; }
/* Revisão pela IA, embaixo de cada peça: a mesma caixa `.texto-ia` do resumo. */
.smj-revisao { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.smj-revisao-saida { margin-top: 10px; display: grid; gap: 4px; min-width: 0; }
.smj-revisao-saida .texto-ia.pendente { color: var(--suave); font-style: italic; }
/* Comparação com o acervo: os pareceres que entraram, cada um com o porquê e o
   texto a um clique. */
.smj-revisao-saida + .linha-acoes { margin-top: 10px; }
.smj-cmp-titulo { margin: 8px 0 0; font-weight: 700; }
.smj-cmp-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; min-width: 0; }
.smj-cmp-lista summary { cursor: pointer; overflow-wrap: anywhere; }
.smj-cmp-lista .ajuda { margin: 2px 0 0; }
.smj-cmp-texto { white-space: pre-wrap; font-size: 13px; line-height: 1.5; max-height: 360px; overflow-y: auto; margin-top: 6px; padding: 8px 10px; background: var(--afundado); border-radius: 4px; }
.smj-cmp-texto:empty { display: none; }
/* Reescrita pela IA: o que entrou em cor de marca-texto, o que saiu riscado.
   Palavra antes de cor: a legenda diz o que cada marca é, e o riscado se lê
   sem cor nenhuma. No editor, `.smj-mudou` só colore — lerTexto não lê cor, e
   a marca não vai para o SEI. */
.smj-reescrever { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); display: grid; gap: 6px; }
.smj-reescrever textarea { width: 100%; }
.smj-proposta { display: grid; gap: 6px; margin-top: 6px; min-width: 0; }
.smj-novo, .smj-editavel .smj-mudou { background: var(--realce-novo); border-radius: 2px; text-decoration: none; color: inherit; }
.smj-saiu { text-decoration: line-through; color: var(--suave); }
.smj-registro { list-style: none; padding: 0; margin: 8px 0 0; font-family: var(--mono); font-size: 12.5px; }
.smj-registro li { padding: 3px 0; color: var(--texto-2); }
.smj-registro li.falha { color: var(--perigo); }
.smj-registro li.ok { color: var(--ok); }
.tabela tr.smj-atual td { background: var(--acento-suave); }
.tabela tr.smj-fora td { opacity: .6; }
.tabela tr.smj-fora td:first-child > div:first-child { text-decoration: line-through; }

/* ================================================ o acabamento no celular
 *
 * As telas que este arquivo desenha — o leitor dos autos, os gráficos, o
 * terminal, a capa — foram desenhadas em tela larga, e cada uma quebrava de um
 * jeito próprio em 390px. As correções ficam aqui, no fim, e não espalhadas
 * pelas regras de origem: assim dá para ler de uma vez o que o celular muda, e
 * continua valendo a promessa do arquivo — tirando o `<link>`, o painel volta
 * ao anterior inteiro.
 */

@media (max-width: 760px) {
  /* --- a barra de abas --------------------------------------------------- */
  /* Quinze abas quebrando em linhas viravam CINCO fileiras dentro da pílula: um
     terço da tela do celular era cabeçalho, antes de qualquer conteúdo, e a aba
     atual podia estar na terceira fileira. Vira uma tira que rola na horizontal,
     com a aba escolhida trazida para o meio pelo `app.js`.

     Esta regra mora aqui, e não no `styles.css`, porque é AQUI que a pílula é
     desenhada (`flex-wrap: wrap`) — lá ela seria vencida pela ordem dos arquivos,
     e o sintoma era exatamente esse: o celular continuava com as cinco fileiras. */
  .abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    border-radius: 14px;
    width: 100%;
  }
  .abas::-webkit-scrollbar { display: none; }
  .abas .aba { flex: 0 0 auto; scroll-snap-align: center; }
}

@media (max-width: 620px), (max-aspect-ratio: 5/8) {
  /* --- o leitor dos autos ------------------------------------------------ */

  /* A folha é mais alta que a tela (proporção A4 sobre 94vw de largura), e o
     palco não rolava: o pé da folha — onde está o número do processo — ficava
     cortado, sem jeito de alcançar. O comentário lá em cima promete rolagem;
     é esta linha que a cumpre. */
  .autos-palco {
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: flex-start;
    padding: 10px 0 84px;
  }

  /* As faixas de virar página tinham 12vw de cada lado — 168px dos 366px da
     folha eram botão invisível. Tocar numa citação ou num link do texto virava
     a página. No dedo, 44px de cada margem bastam. */
  .autos-borda { width: 44px; }

  /* Margem de papel: 58px numa folha de 366px deixavam 250px de texto, que é
     linha de 28 caracteres justificados — ilegível. A margem encolhe com a
     tela, sem deixar de existir (folha sem margem não parece folha). */
  .autos-folha { padding: 34px 22px 30px; }
  .folha-corpo { inset: 34px 22px 30px; }
  .folha-pe { left: 22px; right: 22px; bottom: 12px; }

  /* Os dois botões flutuantes (voltar e tela cheia) ficavam a 18px do topo,
     que é exatamente onde começa o texto da folha — e cobriam a primeira
     linha. No pé eles não cobrem nada, e ficam ao alcance do polegar. A faixa
     de segurança entra porque é ali que mora a barra de gestos. */
  .autos-raiz, .autos-tela {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
  .autos-raiz { left: 12px; }
  .autos-tela { right: 12px; }

  /* A capa: rótulo e valor em duas colunas fixas de 130px deixavam 120px para
     o valor. Empilhados, cada um tem a linha inteira. */
  .capa-campos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Sem `:hover` não há descoberta: no celular o rótulo do botão de voltar nunca
   abria, e o que ficava era um ícone sozinho no canto. Em aparelho de toque ele
   nasce aberto — o espaço existe, o que não existe é o ponteiro. */
@media (hover: none) {
  .autos-raiz .rotulo { max-width: 14ch; opacity: 1; }
}

@media (max-width: 640px) {
  /* --- os gráficos ------------------------------------------------------ */
  /* O SVG tem viewBox de 620 de largura e escala junto com o cartão: num cartão
     de 302px tudo encolhe à metade, e um rótulo de 12px vira 5,9px — texto que
     existe e não se lê. As fontes do desenho sobem para compensar a escala. */
  .g-rot, .g-num { font-size: 19px; }
  .g-eixo { font-size: 17px; }
  .g-total { font-size: 34px; }
  .g-rosca .g-svg { width: 130px; height: 130px; }

  /* --- o terminal ------------------------------------------------------- */
  /* Hora, marca e texto em três colunas: as duas primeiras comiam 110px dos
     300px e o relato ficava numa tira de 130px. A hora sobe para a linha de
     cima, junto da marca, e o texto fica com a largura toda. */
  .terminal-linha { grid-template-columns: auto 1fr; gap: 6px 8px; }
  .terminal-linha .txt { grid-column: 1 / -1; }
}

/* ------------------------------------------------ pergunte sobre o processo
   telas/pergunta.js, nas duas mesas. A pergunta à direita, a resposta como o
   resumo (`.texto-ia`): quem lê reconhece a voz da IA pela mesma caixa. */
.pergunta { margin: 12px 0 4px; }
.pergunta-conversa { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.pergunta-conversa > li { display: grid; gap: 4px; min-width: 0; }
.pergunta-p {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 12px 12px 2px 12px;
  background: var(--acento-suave);
  color: var(--texto);
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pergunta-r {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 2px 12px 12px 12px;
  background: var(--papel);
  overflow-wrap: anywhere;
}
.pergunta-r.pendente { color: var(--suave); font-style: italic; }
.pergunta-r.erro { border-color: var(--perigo); color: var(--perigo); }
.pergunta-rotulo { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.pergunta-form textarea { width: 100%; resize: vertical; }
.pergunta-form .linha-acoes { align-items: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════ a navegação em dois andares
   Em cima as seções (seis, numa pílula só); embaixo, as abas da seção atual.
   As seções herdam o desenho que a barra de abas tinha — o controle segmentado —
   e a fileira de baixo é mais leve, sem pílula: a hierarquia se lê pelo peso,
   não só pela posição. As regras moram no fim do arquivo porque precisam
   vencer as de `.abas` lá de cima, que agora desenham a fileira de baixo. */

#abas.navegacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
#abas.navegacao[hidden] { display: none; }

.secoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  background: var(--afundado);
  border: 1px solid var(--borda);
  border-radius: 999px;
}
.secao {
  position: relative;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--suave);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapido) var(--mola), color var(--rapido) var(--mola);
}
.secao:hover { color: var(--texto); }
.secao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.secao[aria-current='page'] {
  background: var(--papel);
  color: var(--texto);
  box-shadow: var(--sombra);
  font-weight: 600;
}
.secao-turbo { font-weight: 600; color: var(--acento); }
.secao-turbo:hover { color: var(--acento-forte); }

/* A fileira de baixo: as abas da seção, sem a pílula. */
#abas .abas {
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#abas .abas[hidden] { display: none; }
#abas .abas .aba {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 7px;
  white-space: nowrap;
}
#abas .abas .aba[aria-current='page'] {
  background: var(--acento-suave);
  color: var(--acento);
  box-shadow: none;
}

@media (max-width: 760px) {
  #abas.navegacao { order: 3; width: 100%; align-items: stretch; }
  /* As duas fileiras viram tiras que rolam, como a barra única virava. */
  .secoes,
  #abas .abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .secoes { border-radius: 14px; }
  .secoes::-webkit-scrollbar,
  #abas .abas::-webkit-scrollbar { display: none; }
  .secao,
  #abas .abas .aba { flex: 0 0 auto; scroll-snap-align: center; }
  .secao { padding: 8px 14px; min-height: 38px; }
}

/* ══════════════════════════════════════════════ autos judiciais */

.aut-cnj-leitura.ok { color: var(--ok); }
.aut-cnj-leitura.ruim { color: var(--perigo); font-weight: 600; }
#aut-cnj { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.aut-linha { cursor: pointer; }
.aut-linha:hover td { background: var(--afundado); }
.aut-linha.selecionada td { background: var(--acento-suave); }
.aut-linha:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.aut-numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aut-desc { max-width: 42ch; }

/* Cada PDF é um bloco: nome e tamanho, o que se sabe da numeração, e as ações.
   A lista de anexos dos Físicos põe tudo numa linha; aqui não cabe. */
.aut-pdfs li.aut-pdf { display: block; }
.aut-pdf-topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.aut-pdf-situacao { margin: 4px 0 6px; }
.aut-pdf .linha-acoes { margin: 0; align-items: center; flex-wrap: wrap; }
.aut-folha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--texto-2);
  white-space: nowrap;
}
.aut-folha input { width: 6.5em; margin: 0; }

.aut-categorias { margin-top: 14px; }
.aut-categorias summary { cursor: pointer; color: var(--texto-2); font-weight: 600; }
.aut-categorias .lista-anexos li { gap: 10px; }

@media (max-width: 560px) {
  .aut-desc { max-width: none; }
}
.aut-pdf .linha-acoes > * { margin: 0; }
.aut-folha { text-transform: none; letter-spacing: normal; font-weight: 500; }

/* ------------------------------------------------------------ Administração
   O índice das seções: a mesma linguagem da pílula das abas, em coluna. A
   seção aberta ganha o papel e o fio do acento à esquerda — marcada por
   posição e peso, não só por cor. */
.adm-item {
  border-radius: var(--raio-p);
  color: var(--texto-2);
  transition: background var(--rapido) var(--mola), color var(--rapido) var(--mola);
  box-shadow: inset 3px 0 0 transparent;
}
.adm-item:hover { background: var(--afundado); color: var(--texto); }
.adm-item[aria-current='page'] {
  background: var(--acento-suave);
  color: var(--texto);
  box-shadow: inset 3px 0 0 var(--acento);
}
.adm-item[aria-current='page'] .adm-nome { color: var(--acento-forte); }
.adm-item:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }
.adm-titulo { font-family: var(--serif); font-weight: 600; color: var(--texto); }
/* Índice e título ficam sobre o papel, não direto sobre a imagem de fundo:
   no tema escuro com o véu claro, texto claro sobre imagem clareada sumia. */
.adm-indice,
.adm-cabeca {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.adm-indice { padding: 6px; }
.adm-cabeca { padding: 14px 20px; }

.adm-nota { background: var(--afundado); box-shadow: none; }
.adm-nota .avisos li { font-size: 12.5px; }

.adm-mais > summary { color: var(--acento); font-weight: 500; }
.adm-mais > summary:hover { color: var(--acento-forte); }

@media (max-width: 820px) {
  .adm-indice { border-radius: 999px; padding: 4px; margin: 0; }
  .adm-item { border-radius: 999px; }
  .adm-item[aria-current='page'] { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-item { transition: none; }
}

/* ------------------------------------------------------ Iniciar processo
   A aba que abre processo novo (public/telas/iniciar.js). Urgência continua
   sendo palavra antes de cor: a etiqueta "parou no meio" diz o que a cor
   reforça. */
.ini-titulo { font-family: var(--serif); font-size: 17px; margin: 0 0 10px; }
.ini-sub { font-size: 14px; margin: 20px 0 8px; }
.ini-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; }
.ini-grade > * { min-width: 0; }
.ini-grade select, .ini-grade input { width: 100%; }
.ini-entendimento { background: var(--acento-suave); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.ini-previa { font-size: 13px; color: var(--suave); margin: 6px 0 12px; }
.ini-nivel { border: 0; padding: 0; margin: 14px 0 0; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.ini-nivel legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ini-anexos { list-style: none; padding: 0; margin: 8px 0 0; }
.ini-anexos li { padding: 5px 0; border-top: 1px solid var(--borda); font-size: 13.5px; overflow-wrap: anywhere; }
.ini-anexos li:first-child { border-top: none; }
.ini-anexos .ini-ocr-barra { width: 140px; max-width: 40%; height: 8px; vertical-align: middle; accent-color: var(--acento); }
.ini-ordem-autos li .botao { margin: 0 0 0 6px; padding: 1px 8px; }
.ini-destinos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ini-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); background: var(--papel); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; max-width: 100%; }
.ini-chip .ajuda { margin: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.ini-chip-x { border: 0; background: transparent; color: var(--suave); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.ini-chip-x:hover:not(:disabled) { color: var(--perigo); background: var(--perigo-fundo); }
.ini-etiqueta { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); margin-left: 6px; }
.ini-etiqueta.ok { background: var(--acento-suave); color: var(--ok); }
.ini-etiqueta.aviso { background: var(--alerta-fundo); color: var(--alerta); }

/* O fluxo editável: uma linha por etapa, com a numeração do <ol> servindo de
   ordem. A linha vertical à esquerda é o "trâmite" desenhado. */
.ini-fluxo { margin: 0; padding-left: 26px; border-left: 2px solid var(--borda); }
.ini-etapa { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 5rem auto auto auto auto; gap: 6px; align-items: center; padding: 5px 0; }
.ini-etapa > * { min-width: 0; }
.ini-etapa .botao { margin: 0; padding: 4px 8px; }
.ini-desconhecida { border-color: var(--perigo) !important; }
.ini-anexo-autos { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 12rem) minmax(0, 16rem) auto; gap: 8px; align-items: center; padding: 5px 0; }
.ini-anexo-autos > * { min-width: 0; overflow-wrap: anywhere; }
.ini-refazer { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borda); }
.ini-refazer .periodo input { flex: 1 1 18rem; min-width: 0; }
.ini-criar { margin-top: 18px; }

/* O fluxo só para ler: no histórico e na mesa de despacho. */
.ini-fluxo-leitura ol { margin: 6px 0; padding-left: 22px; }
.ini-fluxo-leitura li { padding: 3px 0; font-size: 13.5px; }
.ini-encerra { font-size: 13px; color: var(--suave); margin: 4px 0 8px; }
.ini-hist { border-top: 1px solid var(--borda); padding: 8px 0; }
.ini-hist:first-child { border-top: none; }
.ini-hist summary { cursor: pointer; font-size: 13.5px; overflow-wrap: anywhere; }
.ini-hist-corpo { padding: 6px 0 4px 16px; }
.ini-passos { list-style: none; padding: 0; margin: 6px 0; font-size: 12.5px; color: var(--suave); }
.ini-passos li.falhou { color: var(--perigo); }
.ini-fluxo-mesa { margin: 6px 0 10px; font-size: 13.5px; }
.ini-fluxo-mesa summary { cursor: pointer; color: var(--suave); }

@media (max-width: 560px) {
  .ini-grade { grid-template-columns: minmax(0, 1fr); }
  .ini-etapa { grid-template-columns: minmax(0, 1fr) 4.5rem auto; }
  .ini-etapa [data-campo="acao"] { grid-column: 1 / -1; order: 3; }
  .ini-anexo-autos { grid-template-columns: auto minmax(0, 1fr); }
  .ini-anexo-autos input { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ini-chip-x { transition: none; }
}
.ini-assuntos { margin: 4px 0 8px; }
.ini-assuntos .alerta { color: var(--alerta); font-weight: 700; }
.ini-assunto-resultados { list-style: none; padding: 0; margin: 4px 0 0; max-height: 18rem; overflow-y: auto; }
.ini-assunto-resultados li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13.5px; border-top: 1px solid var(--borda); }
.ini-assunto-resultados li:first-child { border-top: 0; }
.ini-assunto-resultados .botao { flex: none; margin: 0; }
.ini-peca { border: var(--contorno, 1px) solid var(--tinta, var(--borda)); border-radius: var(--raio-p); padding: 12px 14px; margin: 0 0 12px; background: var(--afundado); }
.ini-peca-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ini-peca-cab code { font-size: 12px; }
.ini-peca-botoes { margin-left: auto; display: flex; gap: 6px; }
.ini-peca-botoes .botao { margin: 0; padding: 4px 9px; }
.ini-peca textarea { width: 100%; }
.alerta { color: var(--alerta); }
.ini-pecas-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ini-peca-aba { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; border: 1px solid var(--borda-2); border-radius: var(--raio-p); background: var(--papel); color: var(--texto); font: inherit; cursor: pointer; max-width: 16rem; text-align: left; }
.ini-peca-aba strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.ini-peca-aba small { font-size: 11px; color: var(--suave); }
.ini-peca-aba[aria-selected='true'] { background: var(--acento); color: #fff; border-color: var(--acento); }
.ini-peca-aba[aria-selected='true'] small { color: #fff; }
.ini-peca-aba.aviso small { color: var(--alerta); }
.ini-peca-aba[aria-selected='true'].aviso small { color: #fff; }
.ini-peca-acoes { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borda-2); }
.ini-peca-acoes .periodo input { flex: 1 1 18rem; min-width: 0; }
.ini-rascunho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--borda); }
.ini-rascunho:first-child { border-top: 0; }
.ini-rascunho > div { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; }
.ini-rascunho.atual strong { color: var(--acento); }
.ini-rascunho-acoes { display: flex; gap: 6px; align-items: center; }
.ini-rascunho-acoes .botao { margin: 0; }
.ini-salvo { margin: 0; }
.ini-salvo.ok { color: var(--ok); }
.ini-salvo.erro { color: var(--perigo); }
.ini-comissao { display: flex; flex-direction: column; gap: 4px; }
.ini-comissao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ini-comissao-linha select { width: auto; max-width: 12rem; }
.ini-pessoa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 8px; margin-top: 10px; align-items: center; }
.ini-pessoa-form .botao { margin: 0; }
#ini-disciplinar > summary { cursor: pointer; list-style: revert; }
.ini-portaria { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--borda-2); border-radius: var(--raio-p); }
.ini-portaria-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 4px 14px; }
.ini-portaria-campos > * { min-width: 0; }
.ini-portaria-campos input, .ini-portaria-campos select, .ini-portaria #ini-port-fundamento { width: 100%; }
/* "Ver como fica": a peça como papel. Branco nos dois temas — é o documento,
   não a interface. */
.ini-previa-dlg[open] { display: flex; flex-direction: column; width: min(860px, 96vw); max-height: 92vh; padding: 14px 16px; }
.ini-previa-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ini-previa-topo .botao { margin: 0; }
.ini-previa-papel {
  overflow-y: auto; background: #fff; color: #111; padding: 48px 56px; margin-top: 6px;
  border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.45;
}
.ini-previa-papel p { margin: 0 0 12px; text-align: justify; }
.ini-previa-papel .cab { text-align: center; margin: 0 0 4px; font-weight: 600; }
.ini-previa-papel .cab-1 { font-weight: 700; letter-spacing: 0.02em; }
.ini-previa-papel .cab-tipo { margin: 18px 0 18px; font-size: 17px; }
.ini-previa-papel .dest { text-align: left; margin: 0 0 4px; }
.ini-previa-papel .corpo { text-indent: 2.5em; }
.ini-previa-papel .assina { text-align: center; margin: 40px 0 0; }
.ini-previa-papel .assina-cargo { text-align: center; margin: 0; }
.ini-previa-papel mark { background: #fff1a8; color: #111; padding: 0 3px; border-radius: 3px; }
@media (max-width: 560px) { .ini-previa-papel { padding: 22px 18px; } }
.ini-previa-papel { font-weight: 400; }
.ini-previa-papel strong { font-weight: 700; }
.ini-previa-papel .centro { text-align: center; }

/* ------------------------------------------------ Iniciar: as três trilhas
   Sem trilha: os cartões de entrada. Com trilha: a faixa, o passo 1, a
   proposta — e só os blocos marcados para ela (`data-so`). */
#tela-iniciar:not([data-trilha]) .ini-com-trilha,
#tela-iniciar:not([data-trilha]) .ini-trilha-faixa,
#tela-iniciar:not([data-trilha]) [data-so] { display: none !important; }
#tela-iniciar[data-trilha] .ini-trilhas { display: none; }
#tela-iniciar[data-trilha='disciplinar'] [data-so]:not([data-so~='disciplinar']),
#tela-iniciar[data-trilha='comum'] [data-so]:not([data-so~='comum']),
#tela-iniciar[data-trilha='digitalizacao'] [data-so]:not([data-so~='digitalizacao']) { display: none !important; }

.ini-trilhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 18px; margin: 0 0 24px; }
.ini-trilha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding: 22px; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--papel); border: 1px solid var(--borda-2); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.ini-trilha:nth-child(1) { background: var(--alerta-fundo); }
.ini-trilha:nth-child(2) { background: var(--acento-suave); }
.ini-trilha:nth-child(3) { background: var(--ok-fundo); }
.ini-trilha:hover { transform: translateY(-2px); }
.ini-trilha strong { font-family: var(--serif); font-size: 19px; }
.ini-trilha span:last-child { font-size: 14px; color: var(--texto-2); }
.ini-trilha-icone { font-size: 30px; line-height: 1; }
.ini-trilha-faixa { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-weight: 700; }
.ini-trilha-faixa .botao { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ini-trilha:hover { transform: none; } }

/* ------------------------------------------------ Legis: cobertura da base */
/* O aviso de "pode suprimir" é palavra antes de cor: o texto diz tudo, e a
   tarja verde só reforça. */
.legis-aviso {
  margin: 10px 0;
  padding: 10px 12px;
  border: 2px solid var(--ok);
  border-radius: 10px;
  background: var(--ok-fundo);
  font-size: 13.5px;
}
.legis-aviso.pendente { border-color: var(--alerta); background: var(--alerta-fundo); }
.legis-cobertura { list-style: none; margin: 6px 0 12px; padding: 0; font-size: 13px; }
.legis-cobertura li { padding: 4px 0; border-top: 1px solid var(--borda); }
.legis-cobertura li:first-child { border-top: none; }

/* ------------------------------------------------ tokens do MCP */
.mcp-tokens { list-style: none; margin: 6px 0 12px; padding: 0; font-size: 13px; }
.mcp-tokens li { padding: 6px 0; border-top: 1px solid var(--borda); overflow-wrap: anywhere; }
.mcp-tokens li:first-child { border-top: none; }
.mcp-tokens li.revogado { opacity: 0.6; }
.mcp-novo {
  margin: 10px 0;
  padding: 10px 12px;
  border: 2px solid var(--alerta);
  border-radius: 10px;
  background: var(--alerta-fundo);
}
.mcp-novo input { width: 100%; font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------ Pareceres (enciclopédia) */
.par-colheita > summary { cursor: pointer; font-weight: 700; }
.par-colheita[open] > summary { margin-bottom: 8px; }
.par-grade {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.par-grade > * { min-width: 0; }
.par-autores h3 { margin: 0 0 8px; font-size: 15px; }
.par-autores ul { list-style: none; margin: 0; padding: 0; }
.par-autor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--raio-p);
  background: none;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.par-autor:hover { background: var(--acento-suave); }
.par-autor.ativo { background: var(--acento-suave); font-weight: 700; }
.par-autor-conta { font-variant-numeric: tabular-nums; color: var(--suave); }
.par-autor small { grid-column: 1 / -1; color: var(--suave); font-size: 12px; }
.par-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.par-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.par-item:hover { border-color: var(--acento); }
.par-meta { display: block; color: var(--suave); font-size: 12.5px; margin: 2px 0 6px; }
.par-ementa { margin: 0; font-size: 13.5px; line-height: 1.45; }
.dlg-parecer { width: min(860px, 96vw); max-height: 90vh; }
.dlg-parecer[open] { display: flex; flex-direction: column; }
.dlg-par-cabeca { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dlg-par-cabeca h2 { margin: 0; font-family: var(--serif); font-size: 19px; }
.par-texto {
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  padding-right: 6px;
}
@media (max-width: 720px) {
  .par-grade { grid-template-columns: 1fr; }
  .par-autores ul { display: flex; gap: 6px; overflow-x: auto; }
  .par-autor { white-space: nowrap; }
  .par-autor small { display: none; }
}

/* ------------------------------------------------ Usuários do painel */
.mcp-tokens li.pendente { background: var(--alerta-fundo); border-radius: 8px; padding-left: 8px; }
.conta-topo { font-size: 12.5px; color: var(--texto-suave, inherit); margin-right: 8px; white-space: nowrap; }
@media (max-width: 560px) { .conta-topo { display: none; } }
.logo-img { height: var(--logo-altura, 40px); width: auto; max-width: min(40vw, 320px); object-fit: contain; display: block; }