/* Paleta institucional: azul-marinho como acento de interface, e cor semântica
   reservada ao que exige atenção — "em dia" não recebe cor nenhuma. Os tons de
   alerta e perigo passaram pelo verificador de contraste e de daltonismo, e
   sempre aparecem acompanhados de texto, nunca sozinhos. */
:root {
  --fundo: #f2f3f1;
  --papel: #ffffff;
  --afundado: #eaece9;
  --borda: #dde0dc;
  --borda-2: #c9ced0;
  --texto: #15181b;
  --texto-2: #454c53;
  --suave: #5a6169;
  --acento: #1b3a5c;
  --acento-forte: #12283f;
  --acento-suave: #e7edf3;
  --barra: #2e6fa8;
  --perigo: #c2452d;
  --perigo-fundo: #faebe7;
  --ok: #2e8b62;
  --alerta: #c98a1b;
  --alerta-fundo: #fbf3e2;

  /* Delegado: a pasta está com alguém, não na estante. Roxo porque as duas
     cores que já existem estão ocupadas por gravidade (vermelho, âmbar) e
     delegar não é uma gravidade — é um lugar. */
  --delegado: #6b4fa8;
  --delegado-fundo: #efeaf8;
  --sombra: 0 1px 2px rgba(21, 24, 27, 0.05), 0 4px 12px rgba(21, 24, 27, 0.04);
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141719;
    --papel: #1c2023;
    --afundado: #22272b;
    --borda: #2c3237;
    --borda-2: #3a4147;
    --texto: #e8eae7;
    --texto-2: #bec4c8;
    --suave: #9aa1a6;
    --acento: #7fa8cc;
    --acento-forte: #9dc0dd;
    --acento-suave: #1f2a34;
    --barra: #4a93d8;
    --perigo: #e06459;
    --perigo-fundo: #2e1d1b;
    --ok: #35a86f;
    --alerta: #c2992a;
    --alerta-fundo: #2a2417;

    --delegado: #a68fd6;
    --delegado-fundo: #241f33;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
  }
}

* { box-sizing: border-box; }

/* O atributo `hidden` vale display:none pela folha do navegador, e qualquer
   regra de autor com display o vence sem avisar — o sintoma é uma tela que
   deveria sumir e fica. Aqui ele é inegociável. */
[hidden] { display: none !important; }

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

/* O cabeçalho leva marca, abas e ações na mesma linha. Sem `flex-wrap`, cada
   aba nova espremia as outras até sumirem — foi o que aconteceu ao entrar a
   quinta. Agora ele quebra em vez de cortar. */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 14px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 5;
}

.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { font-size: 26px; }
.topo h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-acoes { display: flex; align-items: center; gap: 10px; }

.pilula {
  font-size: 12.5px;
  color: var(--suave);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 4px 12px;
}

/* A pílula da sessão é botão: clicar nela abre a lista de unidades. O cursor e
   o "▾" existem para isso não ser um segredo — botão que não parece botão não
   é descoberto. */
.troca-unidade { position: relative; }
.pilula-botao { cursor: pointer; font-family: inherit; }
.pilula-botao::after { content: ' ▾'; opacity: 0.55; }
.pilula-botao:hover { border-color: var(--borda-2); color: var(--texto); }
.pilula-botao[aria-expanded='true'] { border-color: var(--acento); color: var(--texto); }

.menu-unidades {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 320px;
  max-width: 78vw;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 10px;
}
.menu-unidades input[type='search'] { width: 100%; margin: 0 0 8px; }
.menu-unidades ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.menu-unidades li { margin: 0; }
.menu-unidades li button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
}
.menu-unidades li button:hover,
.menu-unidades li button:focus-visible { background: var(--fundo); }
.menu-unidades li button[aria-selected='true'] { font-weight: 600; }
.menu-unidades li button .desc { display: block; font-size: 11.5px; color: var(--suave); }
.menu-unidades .ajuda { margin: 8px 0 0; font-size: 11.5px; }
.menu-unidades .ajuda button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  cursor: pointer;
}

/* O judicial listado no Despachar por exceção. Fundo âmbar, mas quem informa é
   a palavra: impresso em preto e branco, ou para quem não distingue a cor, a
   tarja sozinha não diz nada. */
.etiqueta-judicial {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--alerta);
  background: var(--alerta-fundo);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
}

.cartao h2 { font-size: 15px; margin: 0 0 6px; letter-spacing: -0.01em; }
.estreito { max-width: 420px; margin: 48px auto; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.grade > .cartao { margin-bottom: 0; }
/* Item de grade nasce com `min-width: auto`, e isso quer dizer "não encolha
   abaixo do seu conteúdo". Um gráfico em SVG ou uma tabela de oito colunas
   dentro do cartão empurra a coluna, a coluna empurra a grade e QUEM ROLA PARA
   O LADO É A PÁGINA INTEIRA — no celular, o painel balançava na horizontal e o
   estouro nunca aparecia no elemento culpado. `min-width: 0` devolve a decisão
   a quem sabe: a grade. */
.grade > *, .grade-inicio > *, .graf-grade > * { min-width: 0; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.lista-escopos label, .check-inline { font-weight: 400; margin: 0; }

input[type="text"], input[type="password"], input[type="search"],
input[type="number"], select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
}
/* O campo de arquivo tem largura PRÓPRIA (o navegador reserva espaço para o
   nome do arquivo), e ela não encolhe com o pai: num cartão de 292px ele ia a
   328px e fazia a página inteira rolar para o lado — foi o que sobrou de
   estouro na Administração depois de todo o resto. */
input[type="file"] { max-width: 100%; }

input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.botao {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--fundo);
  color: var(--texto);
}
.botao.primario { background: var(--acento); color: #fff; margin-top: 18px; }
.botao.primario:hover { background: var(--acento-forte); }
.botao.perigo { background: transparent; border-color: var(--perigo); color: var(--perigo); margin-top: 10px; }
.botao.fantasma { background: transparent; border-color: var(--borda); color: var(--suave); }
.botao.fantasma:hover { color: var(--texto); }
.botao.pequeno { padding: 5px 10px; font-size: 12.5px; font-weight: 500; }
.botao.largo { width: 100%; }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; }

.ajuda { color: var(--suave); font-size: 13px; margin: 0 0 10px; }
.erro { color: var(--perigo); font-size: 13.5px; margin-top: 12px; }
.alerta { color: var(--alerta); }
code { font-size: 12.5px; background: var(--fundo); padding: 1px 5px; border-radius: 4px; }

.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

.lista-unidades, .lista-escopos, .avisos, .historico {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Categorias dos processos físicos: nome, quantos usam e o botão de apagar. */
.lista-categorias { max-height: 320px; overflow-y: auto; }
.lista-categorias li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-top: 1px solid var(--borda);
}
.lista-categorias li:first-child { border-top: none; }
.lista-categorias .cat-nome { flex: 1; }
.lista-categorias .cat-uso { color: var(--texto-2); font-size: 12.5px; }

.lista-unidades { max-height: 320px; overflow-y: auto; }
.lista-unidades li { border-top: 1px solid var(--borda); }
.lista-unidades li:first-child { border-top: none; }
.lista-unidades label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 2px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.lista-unidades .sigla { font-weight: 600; }
.lista-unidades .desc { color: var(--suave); font-size: 12.5px; }

/* Uma linha por unidade: rótulo em cima, competência embaixo. A rolagem é
   necessária — com "mostrar todas" marcado são 135 delas. */
.competencias { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.competencias .item { padding: 10px 0; border-top: 1px solid var(--borda); }
.competencias .item:first-child { border-top: none; }
.competencias .rotulo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.competencias .sigla { font-weight: 600; font-size: 13px; }
.competencias .desc { color: var(--suave); font-size: 12.5px; }
.competencias textarea {
  margin: 5px 0 0;
  min-height: 46px;
  font-size: 13px;
  line-height: 1.45;
}
/* O trecho da portaria é conferência, não edição: vai como veio, com as quebras
   de linha do OCR, para dar para comparar com o papel. */
.trecho-portaria {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--fundo);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--suave);
}

/* Quem já foi descrito se distingue de relance de quem falta. */
.competencias .item.preenchida .sigla::after {
  content: '•';
  color: var(--acento);
  margin-left: 6px;
}

.lista-escopos li { padding: 7px 0; }
.lista-escopos small { display: block; color: var(--suave); font-size: 12px; margin-left: 24px; }
.lista-escopos input { margin-right: 6px; }

.barra {
  height: 6px;
  background: var(--fundo);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 16px;
}
.barra-fill {
  height: 100%;
  width: 0;
  background: var(--acento);
  transition: width 0.4s ease;
}

/* Duas colunas eram fixas: em 390px cada célula ficava com ~145px e o número de
   19px encostava no rótulo. `auto-fit` desce para uma coluna sozinho. */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 12px; }
.metricas dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave); }
.metricas dd { margin: 2px 0 0; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 600; }

.registro {
  max-height: 220px;
  overflow-y: auto;
  font-size: 12.5px;
  color: var(--suave);
  margin: 10px 0 0;
  padding-left: 18px;
}
.registro li { margin: 3px 0; }
summary { cursor: pointer; font-size: 13px; color: var(--suave); }

.cabecalho-resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.contador { color: var(--suave); font-weight: 400; font-size: 13px; }

.filtros {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}
.check-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
@media (max-width: 720px) { .filtros { grid-template-columns: 1fr; } }

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 10px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th {
  background: var(--fundo);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--suave);
  position: sticky;
  top: 0;
}
/* Dossiê: resumo por seções, quadros com barra, a tabela dos processos. */
.dos-resumo .dos-secao { margin-bottom: 12px; }
.dos-resumo h3 { font-size: 14px; margin: 0 0 4px; }
.dos-resumo p { margin: 0 0 6px; line-height: 1.5; }
.dos-quadros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.dos-quadros > * { min-width: 0; }
.dos-lista { list-style: none; margin: 0; padding: 0; }
.dos-lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 4px 0;
  font-size: 13px;
}
.dos-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-n { font-variant-numeric: tabular-nums; color: var(--suave); }
.dos-barra {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--barra);
  opacity: 0.6;
}

/* Iniciar: a ordem dos autos, anexos intercalados com as peças. */
.ini-ordem-autos { margin: 4px 0 0; padding-left: 22px; font-size: 13px; }
.ini-ordem-autos li { padding: 2px 0; }
.ini-ordem-autos .ini-ordem-anexo { color: var(--acento); }

/* Pessoas por unidade: um bloco por unidade, os nomes em colunas. */
.pes-bloco { padding: 10px 0; border-top: 1px solid var(--borda); }
.pes-bloco:first-child { border-top: none; }
.pes-cabeca { margin-bottom: 6px; }
.pes-nomes {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 16em;
  column-gap: 24px;
}
.pes-nomes li { padding: 2px 0; break-inside: avoid; }
/* A quebra por unidade da Distribuir: uma linha de título por caixa. */
.tabela tr.linha-caixa td,
.tabela-rolagem .tabela tr.linha-caixa > td {
  background: var(--afundado);
  border-top: 2px solid var(--borda-2);
  padding-top: 7px;
  padding-bottom: 7px;
}
.tabela tr:last-child td { border-bottom: none; }
.tabela a { color: var(--acento); text-decoration: none; font-variant-numeric: tabular-nums; }
.tabela a:hover { text-decoration: underline; }
.novo::after {
  content: "novo";
  margin-left: 7px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ok);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 4px;
}

.avisos li { font-size: 13px; color: var(--alerta); padding: 5px 0; border-top: 1px solid var(--borda); }
.avisos li:first-child { border-top: none; }

.historico li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--borda);
  font-size: 13.5px;
}
.historico li:first-child { border-top: none; }
.historico .quando { color: var(--suave); font-size: 12.5px; }

.aviso-rodape {
  text-align: center;
  color: var(--suave);
  font-size: 12px;
  padding: 0 20px 34px;
}

/* Botão que abre o detalhe do processo: parece link, é botão. */
.link-processo {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  cursor: pointer;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.link-processo:hover { text-decoration: underline; }

/* Diálogo de detalhe do processo. */
#dlg-processo {
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--papel);
  color: var(--texto);
  box-shadow: var(--sombra);
  padding: 20px 22px 24px;
}
#dlg-processo::backdrop { background: rgba(15, 22, 32, 0.45); }
.dlg-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dlg-cabecalho h2 { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.dlg-ultimo {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.dlg-ultimo .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--suave);
}
.dlg-ultimo p { margin: 4px 0 0; font-size: 13.5px; }
#dlg-processo details { margin-bottom: 12px; }
#dlg-processo summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.lista-documentos { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-documentos li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.lista-documentos li:last-child { border-bottom: none; }
.lista-documentos .desc { color: var(--suave); font-size: 12px; }

/* A digitalização de um processo físico: nome do arquivo à esquerda, tamanho e
   data no meio, "remover" encostado na direita. Uma linha por arquivo, porque
   é uma lista de peças e não uma tabela de dados. */
.lista-anexos { list-style: none; margin: 8px 0 10px; padding: 0; }
.lista-anexos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-bottom: none;
  font-size: 13.5px;
}
.lista-anexos li:first-child { border-radius: 10px 10px 0 0; }
.lista-anexos li:last-child { border-bottom: 1px solid var(--borda); border-radius: 0 0 10px 10px; }
.lista-anexos li:only-child { border-radius: 10px; }
.lista-anexos a { color: var(--acento); text-decoration: none; overflow-wrap: anywhere; }
.lista-anexos a:hover { text-decoration: underline; }
.lista-anexos .desc { color: var(--suave); font-size: 12px; margin-left: auto; white-space: nowrap; }
.lista-anexos li.vazio { display: block; }

/* Na tabela de físicos o segundo nível de cada célula é observação e destino —
   dado de apoio, não de leitura. */
#tela-fisicos .tabela .desc { color: var(--suave); font-size: 12.5px; margin-top: 2px; }

/* A folha só estiliza text/password/search/number/select — data e arquivo
   ficaram de fora porque, onde já existiam, eram filtros lado a lado que
   `width:100%` estragaria. Aqui eles são campos de formulário, na mesma linha
   que campos de texto, e precisam parecer com eles. Por isso a regra é desta
   tela, não global. */
#tela-fisicos input[type="date"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
}
#tela-fisicos input[type="file"] { font: inherit; font-size: 13px; max-width: 100%; }

/* Apenso: recuo e seta na coluna do número, para o vínculo com a linha de cima
   ser lido de relance. A cor de fundo é a mesma da tabela — o que marca o
   grupo é o recuo, não uma faixa que competiria com o "não lido" das outras
   telas. */
#tela-fisicos tr.apenso td:first-child { padding-left: 30px; }
#tela-fisicos tr.apenso td:first-child strong { font-weight: 500; color: var(--texto-2); }

/* Agrupamento por categoria: uma faixa que abre cada grupo. Ela não pinta a
   linha de urgência de baixo (só a própria faixa tem fundo) e não usa cor para
   informar — o que separa os grupos é o nome em negrito e a contagem. */
#tela-fisicos tr.faixa-categoria > td {
  background: var(--fundo-suave, rgba(127, 127, 127, 0.08));
  border-top: 2px solid var(--borda);
  padding-top: 10px;
  padding-bottom: 6px;
}

/* Relatório agrupado por secretaria: mesma faixa da aba Físicos, e pelo mesmo
   motivo — o que separa os grupos é o nome em negrito e o subtotal, não a cor.
   A unidade de dentro entra recuada, como o apenso. */
#tela-relatorio tr.faixa-secretaria > td {
  background: var(--fundo-suave, rgba(127, 127, 127, 0.08));
  border-top: 2px solid var(--borda);
  padding-top: 10px;
  padding-bottom: 6px;
}
#tela-relatorio tr.dentro td:first-child { padding-left: 30px; }

/* Urgência: fundo na linha inteira e palavra na coluna própria. A cor sozinha
   não diz nada para quem imprime em preto e branco ou não distingue vermelho —
   por isso ela nunca aparece sem o rótulo ao lado. O tom é fraco de propósito:
   a linha continua legível, e é o texto que carrega a informação. */
#tela-fisicos tr.urg-urgente > td { background: var(--perigo-fundo); }
#tela-fisicos tr.urg-atencao > td { background: var(--alerta-fundo); }
#tela-fisicos tr.urg-urgente > td:first-child { box-shadow: inset 3px 0 0 var(--perigo); }
#tela-fisicos tr.urg-atencao > td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }

.marca-urgencia {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.marca-urgencia.urgente { color: var(--perigo); }
.marca-urgencia.atencao { color: var(--alerta); }

/* Delegado: fundo roxo na linha inteira. Vem DEPOIS das regras de urgência de
   propósito — mesma especificidade, e a última ganha —, então a pasta que está
   na mesa de alguém se lê como tal mesmo sendo urgente. A tarja da margem
   continua sendo a da urgência (é outra propriedade, e ela não é sobrescrita);
   o roxo só desenha a sua quando não há urgência para desenhar. E, como em toda
   a tela, a cor não está sozinha: a coluna Situação diz "Delegado" e o nome. */
#tela-fisicos tr.delegado > td { background: var(--delegado-fundo); }
#tela-fisicos tr.delegado:not(.urg-urgente):not(.urg-atencao) > td:first-child {
  box-shadow: inset 3px 0 0 var(--delegado);
}

/* A lista de colaboradores dentro da ficha: fechada, é uma linha; aberta, é o
   cadastro. Fica junto do campo que a consome, que é onde se descobre que
   falta alguém. */
#fis-colab-caixa {
  margin: 10px 0 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 12px;
}
#fis-colab-caixa summary { cursor: pointer; font-size: 13.5px; }
#fis-colab-caixa[open] summary { margin-bottom: 6px; }

/* Rodapé de totais: soma do que está NA TELA. Fica preso embaixo da tabela e
   some quando não há linha nenhuma — faixa cinza sob uma lista vazia é enfeite
   que parece defeito. */
#tela-fisicos tfoot td {
  background: var(--afundado);
  border-top: 2px solid var(--borda-2);
  font-size: 12.5px;
  color: var(--texto-2);
}
#tela-fisicos tfoot tr:empty { display: none; }

/* Os filtros desta tela são quatro: busca, situação, urgência e o botão. */
#tela-fisicos .filtros { grid-template-columns: 2fr 1fr 1fr auto; }
@media (max-width: 720px) { #tela-fisicos .filtros { grid-template-columns: 1fr; } }

/* As caixas de volume: uma fileira que quebra sozinha. Processo de doze volumes
   é raro, mas existe, e doze caixas em coluna empurrariam o resto da tela. */
.volumes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; }
/* Texto do documento nativo: é despacho, ofício — a quebra de linha é o que
   separa cabeçalho, corpo e assinatura, então preserva-se. */
.texto-documento {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0 2px;
  padding: 10px 12px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--fundo-suave, rgba(127, 127, 127, 0.08));
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Filtro de unidades: só aparece quando a lista é grande o bastante para doer. */
#filtro-unidades { margin-bottom: 8px; }

/* ══════════════════════════════════════════════ tela inicial (Painel do Gabinete)
   Um painel é operado, não lido de cima a baixo: o resumo vem antes do detalhe, e
   o estado aparece na forma (faixa, pista, pastilha) além do número. */

.cartao h2, .topo h1 { font-family: var(--serif); font-weight: 600; }

/* navegação entre Início, Varredura e Administração */
/* As abas ficam no meio e podem quebrar; nunca somem por falta de espaço. */
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}
@media (max-width: 760px) {
  .abas { order: 3; width: 100%; justify-content: flex-start; }
}
.aba {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--suave);
  cursor: pointer;
}
.aba:hover { color: var(--texto); background: var(--fundo); }
.aba[aria-current="page"] { background: var(--acento-suave); color: var(--acento); }
.aba:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* tiles de situação */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.tile {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font: inherit;
  cursor: default;
}
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--borda-2); }
button.tile:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tile .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
}
.tile .k { font-size: 12.5px; color: var(--suave); }
.tile.critico { border-color: var(--perigo); background: var(--perigo-fundo); }
.tile.critico .v { color: var(--perigo); }
.tile.atencao { border-color: var(--alerta); background: var(--alerta-fundo); }
.tile.atencao .v { color: var(--alerta); }

/* linha de processo com faixa de severidade e pista de prazo */
.lista-exige { list-style: none; margin: 0; padding: 0; }
.exige {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.exige:last-child { border-bottom: none; }
.exige .faixa { align-self: stretch; border-radius: 2px; background: var(--borda-2); }
.exige .faixa.crit { background: var(--perigo); }
.exige .faixa.warn { background: var(--alerta); }
.exige .quem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exige .n {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  color: var(--acento);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.exige .n:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.exige .t {
  font-size: 12.5px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exige .prazo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.exige .d {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exige .d.crit { color: var(--perigo); }
.exige .d.warn { color: var(--alerta); }
.pista { width: 104px; height: 5px; border-radius: 3px; background: var(--afundado); overflow: hidden; }
.pista i { display: block; height: 100%; border-radius: 3px; background: var(--borda-2); }
.pista i.crit { background: var(--perigo); }
.pista i.warn { background: var(--alerta); }

/* barras de série única (atividade por pessoa, tempo médio por tipo) */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra-dado { display: grid; grid-template-columns: minmax(96px, 168px) 1fr auto; gap: 10px; align-items: center; }
.barra-dado .nome {
  font-size: 13px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trilho { height: 16px; background: var(--afundado); border-radius: 3px; overflow: hidden; }
.trilho i { display: block; height: 100%; background: var(--barra); border-radius: 0 4px 4px 0; }
.barra-dado:hover .trilho i { filter: brightness(1.12); }
.barra-dado .val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  min-width: 46px;
  text-align: right;
}
.barra-dado .val.zero { color: var(--suave); font-weight: 400; }

.legenda-estado { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--suave); margin-top: 10px; }
.legenda-estado span { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* grade da tela inicial */
.grade-inicio { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .grade-inicio { grid-template-columns: 1fr; } }

.cabecalho-bloco { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cabecalho-bloco h2 { margin: 0; }
.cabecalho-bloco .fonte { margin-left: auto; font-size: 11.5px; color: var(--suave); font-family: var(--mono); }

/* Linha de filtros e opções. O espaço entre COLUNAS é maior que o entre linhas
   de propósito: é ele que separa uma opção da seguinte, enquanto a caixa de
   seleção e o texto dela continuam colados (o `gap` de 6px do `.check-inline`). */
.periodo { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.periodo input { width: 122px; margin: 0; }
/* O `width` acima é para campo de data e de número, e pegava a CAIXA DE SELEÇÃO
   junto: o quadradinho ia a 122px de largura e o rótulo aparecia a meio palmo
   dele, com a linha inteira parecendo desmontada. Vale para todo `.periodo` do
   painel — a aba Distribuir só foi onde alguém reparou. */
.periodo input[type="checkbox"], .periodo input[type="radio"] { width: auto; }
.periodo label { font-size: 12.5px; color: var(--suave); margin: 0; }

.vazio { font-size: 13px; color: var(--suave); font-style: italic; }

/* O filtro de unidades é uma lista curta de prefixos, então caixa de texto
   pequena e em fonte de dado — sigla é código, não prosa. */
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font: 13px/1.5 var(--mono);
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
#previa-unidades { margin-top: 10px; max-height: 240px; }

/* Cabeçalho ordenável: a seta diz por onde a tabela está ordenada, e o cursor
   avisa que dá para clicar. */
.tabela.ordenavel th[data-campo] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela.ordenavel th[data-campo]:hover { color: var(--texto); }
.tabela.ordenavel th[aria-sort]::after {
  content: "▲";
  font-size: 9px;
  margin-left: 5px;
  color: var(--acento);
}
.tabela.ordenavel th[aria-sort="descending"]::after { content: "▼"; }
.velho { color: var(--alerta); }
.muito-velho { color: var(--perigo); }

/* Indicador de espera de verdade. O anterior era uma linha cinza minúscula num
   corpo de janela vazio — visualmente idêntico a "não aconteceu nada". */
.carregando {
  padding: 20px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carregando p { margin: 0; font-size: 14px; }
.carregando .ajuda { font-size: 12.5px; }
.carregando-barra {
  height: 4px;
  border-radius: 3px;
  background: var(--afundado);
  overflow: hidden;
}
.carregando-barra i {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 3px;
  background: var(--acento);
  animation: correndo 1.1s ease-in-out infinite;
}
@keyframes correndo {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .carregando-barra i { animation: none; width: 100%; opacity: 0.5; }
}

/* Marcas de estado na tabela: o que já foi lido do SEI e o que já passou pela
   IA. O ícone diz "existe"; o popup diz "o quê" — e ele precisa caber texto
   longo, então não dá para usar o `title` do navegador. */
.marcas { display: flex; gap: 6px; align-items: center; }
.marca-estado {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  font-size: 13px;
  line-height: 1;
  cursor: help;
}
.marca-estado.tem { border-color: var(--acento); background: var(--acento-suave); }
.marca-estado.vazia { opacity: 0.35; }
.marca-estado .popup {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: min(460px, 70vw);
  max-height: 340px;
  overflow-y: auto;
  padding: 12px 14px;
  text-align: left;
  cursor: auto;
  background: var(--papel);
  border: 1px solid var(--borda-2);
  border-radius: 10px;
  box-shadow: var(--sombra);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.marca-estado:hover .popup,
.marca-estado:focus-within .popup { display: block; }
.marca-estado .popup h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--suave);
}
.marca-estado .popup .quando { color: var(--suave); font-size: 11.5px; }
/* Perto da borda direita a tabela rola; o popup precisa poder sair da célula.
   O `:focus-within` não é enfeite de teclado: no celular NÃO existe `:hover`, e
   sem ele o popup abria recortado dentro da célula — a informação ficava
   inalcançável justamente onde a tela é menor. */
.tabela-rolagem:has(.marca-estado:hover),
.tabela-rolagem:has(.marca-estado:focus-within) { overflow: visible; }

/* ------------------------------------------------- a mesa de despacho */
/* Duas colunas: os autos à esquerda, o que vou fazer à direita. Numa tela
   estreita viram uma só — ler e redigir lado a lado é conforto, não requisito. */
#dlg-despacho { max-width: min(1500px, 96vw); width: 96vw; }
.mesa { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .mesa { grid-template-columns: 1fr; } }
.mesa-lado { min-width: 0; }
.mesa-lado h3 {
  font-family: var(--serif);
  font-size: 15px;
  margin: 18px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--borda);
}
.mesa-lado h3:first-child { margin-top: 0; }

.texto-ia { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

.lista-pecas { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; }
.lista-pecas li { border-top: 1px solid var(--borda); }
.lista-pecas li:first-child { border-top: none; }
.lista-pecas button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 7px 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.lista-pecas button:hover { background: var(--fundo); }
.lista-pecas .sem-texto { color: var(--suave); cursor: default; }
.lista-pecas small { display: block; color: var(--suave); font-size: 11.5px; }
/* O aviso da peça ("OCR só das 10 primeiras de 44 páginas") é uma ressalva
   sobre o que se está lendo, não mais um detalhe do rodapé — por isso destaca
   do resto da linha. */
.lista-pecas .aviso-peca { color: var(--alerta); font-style: italic; }

.peca-aberta { margin-top: 10px; border: 1px solid var(--borda); border-radius: 8px; padding: 10px; }
.peca-aberta pre {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.5;
}

.dsp-linha { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin: 10px 0; }
.dsp-linha > div { flex: 1 1 200px; min-width: 0; }
/* O campo de mudar o despacho. Era `<input>` de uma linha e virou `<textarea>`
   que cresce com o texto: o que se pede ali ("mais curto, cite a IN 01/2026, e
   peça manifestação da Procuradoria antes") nunca coube numa linha.
   `align-items: flex-start` porque os botões acompanham o TOPO do campo — com
   `center`, eles descem sozinhos à medida que o texto cresce. */
.dsp-prompt { display: flex; gap: 8px; align-items: flex-start; }
.dsp-prompt input, .dsp-prompt textarea { flex: 1; margin: 0; }
.dsp-prompt textarea {
  font: inherit;
  min-height: 56px;
  max-height: 220px;
  resize: vertical;
}
.dsp-prompt-acoes { display: flex; flex-direction: column; gap: 6px; flex: none; }

#dsp-minuta { font-family: var(--serif); font-size: 14px; line-height: 1.6; }

/* "Juntar arquivo aos autos" — o mesmo bloco nas duas mesas (a grande e a de
   bolso do expresso), montado por `telas/juntada.js`. Fechado por padrão: a
   maioria dos despachos não junta nada, e um formulário de seis campos sempre
   aberto empurraria o desfecho para fora da tela. */
.juntada {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--afundado);
}
.juntada[open] { background: var(--papel); }
.juntada > summary { font-size: 13.5px; color: var(--texto-2); font-weight: 600; }
.juntada-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  margin: 10px 0;
}
.juntada-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.juntada-campo > span { font-size: 12.5px; color: var(--suave); }
.juntada-campo input, .juntada-campo select { margin: 0; width: 100%; }
.juntada-arquivo { width: 100%; }
/* Campo travado depois que o arquivo já entrou nos autos: o bloco continua
   legível, mas diz pelo tom que não há mais o que decidir ali. */
.juntada input:disabled, .juntada select:disabled { opacity: 0.6; }

/* ------------------------------------------- o aplicativo do celular (PWA) */
/* O cartão aparece em dois lugares (tela de acesso e Administração) e é montado
   por `telas/instalar.js` — o HTML tem só o `<div data-instalar>`. */
.app-movel { margin-top: 16px; }
.app-movel .botao.primario { margin: 4px 0 12px; }
.app-endereco {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--afundado);
}
.app-endereco code {
  flex: 1 1 200px;
  min-width: 0;
  /* Endereço longo tem de quebrar: num celular ele estouraria o cartão para o
     lado, e o estouro horizontal leva a página inteira junto. */
  overflow-wrap: anywhere;
  font-size: 13px;
}
.app-passos { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.app-passo { margin: 0; font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.app-passo strong { color: var(--texto); }
.app-recado { margin-top: 10px; }

/* ======================================================= o painel no celular
 *
 * Um bloco só, no fim do arquivo, em vez de um `@media` grudado em cada regra.
 * A razão é a mesma do `tema.css`: dá para ler de uma vez o que muda na tela
 * pequena, e o que se ajusta aqui não some no meio de mil linhas.
 *
 * Três decisões que valem para tudo o que vem abaixo:
 *
 * - **Nada some.** Tela estreita não ganha uma versão "resumida" do painel: a
 *   caixa, o despacho e a varredura são o trabalho, e esconder controle no
 *   celular seria obrigar a procurar um computador para terminar.
 * - **Nada estoura para o lado.** Estouro horizontal não fica no elemento que
 *   estourou: ele arrasta a página inteira, e o sintoma que chega é "a tela
 *   treme quando eu rolo". Por isso as tabelas rolam DENTRO da caixa delas.
 * - **Alvo de dedo tem 40px.** Botão de 24px é alcançável com mouse e não é com
 *   polegar — e este painel escreve no SEI.
 */

/* A faixa de segurança do aparelho (entalhe, barra de gestos). Sem isto, com
   `viewport-fit=cover` o conteúdo passa por baixo do entalhe. */
.topo { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

@media (max-width: 760px) {
  .topo {
    padding: 10px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right));
    gap: 8px 10px;
  }
  .logo { font-size: 20px; }
  .topo h1 { font-size: 15px; }
  .sub { font-size: 11.5px; }
  .marca { gap: 8px; }

  /* A barra de abas vira uma tira que rola — a regra mora no `tema.css`, que é
     quem desenha o controle segmentado e venceria esta por vir depois. */
  .aba { min-height: 38px; padding: 8px 14px; }

  main { padding: 16px 12px 48px; }
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .cartao { padding: 14px; border-radius: 10px; margin-bottom: 12px; }
  .estreito { margin: 20px auto; max-width: none; }
  .grade { grid-template-columns: 1fr; gap: 12px; }

  /* 16px é o limiar do iPhone: com fonte menor, tocar num campo dá ZOOM na
     página e o painel fica fora de lugar até o usuário afastar os dedos. Não é
     preferência de tamanho — é o que impede a tela de pular. */
  input[type="text"], input[type="password"], input[type="search"],
  input[type="number"], input[type="date"], select, textarea {
    font-size: 16px;
    padding: 10px 12px;
  }
  /* A caixa de seleção e o texto dela vinham com `white-space: nowrap`, para
     não se separarem. Numa frase longa — "ler por OCR, na mesa de despacho, o
     anexo digitalizado sem texto" — a linha ia a 478px e QUEM ROLAVA PARA O
     LADO ERA A PÁGINA: o painel balançava na horizontal e nenhuma tela parecia
     culpada. Aqui a frase quebra, e a caixa continua colada porque é item de
     flex que não encolhe. */
  .check-inline { white-space: normal; align-items: flex-start; }
  .check-inline input[type="checkbox"], .check-inline input[type="radio"] { flex: none; margin-top: 3px; }

  .botao { min-height: 40px; padding: 10px 16px; }
  .botao.pequeno { min-height: 36px; padding: 7px 12px; font-size: 13px; }
  .linha-acoes { gap: 8px; }

  /* Tabela no celular rola na horizontal dentro da moldura dela, e o cabeçalho
     grudado no topo sai: numa tela de 700px de altura ele come a lista. */
  .tabela { font-size: 13px; }
  .tabela th, .tabela td { padding: 8px 10px; }
  .tabela th { position: static; }
  .tabela-rolagem { -webkit-overflow-scrolling: touch; }

  /* Diálogo ocupa a tela com folga, e rola por dentro: `<dialog>` alto demais
     fica com o botão de confirmar fora do alcance, sem rolagem nenhuma. */
  dialog {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: 88vh;
    overflow-y: auto;
    padding: 16px;
  }
}

@media (max-width: 430px) {
  /* O endereço da sessão e a pílula de unidade dividem a linha das ações; em
     tela muito estreita a pílula sozinha já é a linha. */
  .topo-acoes { width: 100%; justify-content: space-between; }
  .menu-unidades { width: min(320px, calc(100vw - 24px)); max-width: none; right: auto; left: 0; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
}

@media (max-width: 560px) {
  /* A primeira coluna de toda tabela é a identificação — o número do processo,
     o nome da unidade. Rolando para o lado ela saía da tela e as outras sete
     colunas viravam números sem dono. Grudada, a linha continua tendo sujeito.
     O fundo é obrigatório: sem ele, o texto que passa por baixo aparece através
     da célula.

     E há o caso de seis tabelas deste painel: a primeira coluna é a CAIXA DE
     SELEÇÃO do lote. Grudar a caixa e deixar o número correr para fora seria o
     defeito ao contrário — então, quando a primeira célula tem caixa, gruda-se
     também a segunda, com a largura da primeira declarada aqui para o
     deslocamento bater. */
  .tabela-rolagem .tabela tr > :first-child,
  .tabela-rolagem .tabela tr > :first-child:has(input[type="checkbox"]) + * {
    position: sticky;
    z-index: 1;
    background: var(--papel);
  }
  .tabela-rolagem .tabela tr > :first-child { left: 0; }
  .tabela-rolagem .tabela tr > :first-child:has(input[type="checkbox"]) {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding-left: 8px;
    padding-right: 4px;
    box-shadow: none;
  }
  .tabela-rolagem .tabela tr > :first-child:has(input[type="checkbox"]) + * { left: 38px; }
  /* O fio que separa o que está grudado do que rola por baixo vai na ÚLTIMA
     coluna grudada — em cima da caixa de seleção ele mentiria sobre onde
     termina a parte fixa. */
  .tabela-rolagem .tabela tr > :first-child:not(:has(input[type="checkbox"])),
  .tabela-rolagem .tabela tr > :first-child:has(input[type="checkbox"]) + * {
    box-shadow: 1px 0 0 var(--borda);
  }
  .tabela-rolagem .tabela th:first-child,
  .tabela-rolagem .tabela th:first-child + th { background: var(--fundo); z-index: 2; }
}

/* ------------------------------------------------------------ Administração
   Sete seções e um índice. No computador o índice fica ao lado e acompanha a
   rolagem; no celular vira tira acima da seção. Só estrutura aqui — a cara dos
   itens mora no `tema.css`, e sem ele isto continua funcionando. */
.adm {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.adm-indice {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 9px 12px;
}
.adm-nome { font-size: 14px; font-weight: 600; }
.adm-desc { font-size: 12px; color: var(--suave); }
.adm-corpo { min-width: 0; }
.adm-cabeca { margin: 2px 0 16px; }
.adm-cabeca .ajuda { margin: 4px 0 0; }
.adm-titulo { font-size: 21px; margin: 0; letter-spacing: -0.015em; }

.adm-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.adm-grade > * { min-width: 0; }
.adm-grade > .cartao { margin-bottom: 0; }
/* O cartão do aplicativo traz margem de cima para a tela de acesso; na grade
   ela o desalinharia do vizinho. */
.adm-grade > .app-movel { margin: 0; }
.adm-grade-larga { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); }

/* Campos lado a lado: usuário e senha, nome e cargo. Quebram sozinhos. */
.adm-par, .adm-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 14px;
}
.adm-campos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.adm-par > *, .adm-campos > * { min-width: 0; }
.adm-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
.adm-linha > .check-inline { margin-bottom: 10px; }
.adm-curto { max-width: 130px; }
.adm-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; }
.adm-subform { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--borda); }
.adm-subform h3 { font-size: 14px; margin: 12px 0 0; }

.adm-grupo { border: 0; padding: 0; margin: 16px 0 8px; min-width: 0; }
.adm-grupo legend {
  font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 8px;
}
.adm-grupo .check-inline { margin: 6px 0; }

.adm-mais { margin: 2px 0 12px; }
.adm-mais > summary { font-size: 12.5px; }
.adm-mais[open] > summary { margin-bottom: 6px; }

.adm-barra { align-items: center; margin-bottom: 12px; }
.adm-busca { flex: 1 1 180px; max-width: 280px; }
.adm-rolagem { max-height: min(60vh, 520px); overflow-y: auto; }

/* Quem faz o quê: dez seletores empilhados eram uma coluna de dois metros. */
.adm-tarefas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 20px;
  margin-bottom: 8px;
}
.adm-tarefas > * { min-width: 0; }
.adm-tarefas .ajuda { font-size: 12px; margin-bottom: 6px; }

@media (max-width: 820px) {
  .adm { grid-template-columns: 1fr; gap: 12px; }
  /* Sem grudar: o cabeçalho do celular muda de altura com a largura (131px
     em 390), e a tira grudada ficaria atrás dele. */
  .adm-indice {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .adm-indice::-webkit-scrollbar { display: none; }
  .adm-item { width: auto; flex: none; padding: 8px 14px; }
  .adm-desc { display: none; }
  .adm-grade, .adm-grade-larga { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .adm-titulo { font-size: 18px; }
}