/* =====================================================================
   LISTAS — registros (linha-cartão), filtros, paginação e abas. Carregado nas listas
   (ofícios, roteiros, cadastros, documentos) e no painel.
   Regras só com tokens (tokens.css); depende de base.css e components.css.
   ===================================================================== */

/* =============== Refino da busca (fichas) =============== */
/* A tela diz como entendeu o termo e deixa escolher: "Ofício 26/2026 (1)" ou
   "Protocolo com 26 (12)". Fica entre os filtros e o cabeçalho dos resultados. */
.refino {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5) 0;
}

.refino__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  text-decoration: none;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    background-color var(--duracao-rapida) var(--curva-padrao),
    translate var(--duracao-rapida) var(--curva-padrao);
}

a.ficha:hover {
  border-color: var(--cor-marca);
  background: var(--cor-marca-fundo);
  text-decoration: none;
  translate: 0 -1px;
}

.ficha__contagem {
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

/* Escopo em uso: a ficha fica em grafite, com o X para voltar à busca ampla. */
.ficha--ativa {
  border-color: var(--grafite-800);
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.ficha__remover {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: calc(-1 * var(--esp-1));
  border-radius: var(--raio-pilula);
  color: inherit;
}

.ficha__remover:hover {
  background: var(--cor-primaria-hover);
}

/* =============== Filtros valendo (fichas removíveis, D6) =============== */
/* Logo abaixo da barra: o que está filtrando a lista, cada um com o X que tira só ele, e
   "Limpar tudo" (que não apaga a busca nem a aba). A gaveta pode ficar fechada: nada fica
   filtrado sem dizer por quê. */
.filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5) 0;
}

.filtros-ativos__rotulo {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.ficha--filtro {
  padding-right: var(--esp-1);
  border-color: var(--cor-borda-forte);
  font-weight: var(--peso-medio);
}

.ficha--filtro .ficha__remover {
  width: 1.5rem;   /* alvo ≥ 24px (WCAG 2.5.8) */
  height: 1.5rem;
  margin-right: 0;
  color: var(--cor-texto-secundario);
}

.ficha--filtro .ficha__remover:hover {
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
}

.ficha__remover:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}

.filtros-ativos__limpar {
  margin-left: var(--esp-1);
}

/* Um "Limpar tudo" por largura (_fichas.html): no fim a partir de 1280, no começo abaixo. */
.filtros-ativos__limpar--inicio { display: none; }

/* Abaixo de 1280: fichas numa linha só, rolando de lado (borda esmaecida, data-rola-lado) —
   com seis filtros a pilha ocupava duas ou três linhas e empurrava a lista para fora da
   1ª tela (QA Lote 2, I5: 3,23 ofícios a 900). */
@media (max-width: 1279.98px) {
  .filtros-ativos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filtros-ativos > * { flex: none; white-space: nowrap; }
  /* "Limpar tudo" vem antes das fichas — no DOM também, para o Tab seguir o que se vê:
     sempre à vista no começo do trilho, sem nada por cima de nenhum "×" (um botão preso à
     direita encobria os alvos — WCAG 2.5.8/2.4.11). */
  .filtros-ativos__limpar--inicio { display: inline-flex; margin-left: 0; }
  .filtros-ativos__limpar--fim { display: none; }
}

/* =============== Lista de registros (linha-cartão) =============== */
.registros {
  list-style: none;
  margin: 0;
  padding: 0;
}

.registro {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--esp-2) var(--esp-4);
  align-items: center;
  padding: var(--esp-4) var(--esp-5);
  border-bottom: var(--borda-sutil);
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.registro:last-child {
  border-bottom: 0;
}

/* Última linha encostada na base do cartão: o fundo do hover e o trilho dourado seguem o
   canto arredondado (o cartão não recorta os filhos — o menu da linha precisa escapar). */
.registros:last-child > .registro:last-child {
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

/* Lista solta num bloco da folha (ex.: "O que o termo emite"): a primeira linha também é
   uma ponta — fundo e fita seguem a curva de cima. */
.secao__bloco > .registros > .registro:first-child {
  border-top-left-radius: var(--raio-lg);
  border-top-right-radius: var(--raio-lg);
}

/* Menu aberto numa linha: a linha sobe sobre as vizinhas. Sem isso as ações da linha de
   baixo (que criam contexto de empilhamento ao aparecer) cobriam o painel e o clique num
   item caía no botão da outra linha.

   A condição é o botão estar aberto, não o painel não ter [hidden]: as caixas de "pousar"
   (Usado em N ofícios) se escondem por `visibility`, nunca com [hidden]. Com a regra
   antiga TODA linha que tivesse uma dessas caixas ficava em z 20 — e, no empate, a linha
   de baixo (mais tarde na árvore) pintava o seu texto por cima do menu aberto na de cima. */
.registro:has([data-menu-botao][aria-expanded="true"]) {
  z-index: var(--z-painel-campo);
}

/* A caixa de pousar também precisa subir, mas um degrau abaixo do menu de ações: com as
   duas abertas, quem manda é o menu que a pessoa abriu com o clique. */
.registro:has(.menu--pousar:hover),
.registro:has(.menu--pousar:focus-within) {
  z-index: calc(var(--z-painel-campo) - 1);
}

/* Hover: superfície sutil + trilho dourado à esquerda (a mesma gramática das tabelas). */
.registro:hover,
.registro:focus-within {
  background: var(--cor-superficie-sutil);
  box-shadow: inset var(--filete) 0 0 var(--cor-marca);
}

/* Linhas dentro das folhas de documento (cartões da folha): já nascem com o fundo e o
   trilho do hover — o texto fica na cor normal —; passar o mouse escurece um pouco mais e
   o título muda de cor (.registro:hover .registro__link). */
.secao .registros > .registro {
  background: var(--cor-superficie-sutil);
  box-shadow: inset var(--filete) 0 0 var(--cor-marca);
}

.secao .registros > .registro:hover,
.secao .registros > .registro:focus-within {
  background: var(--cor-superficie-realce);
}

/* Cabeçalho de grupo (mês): leitura em alta velocidade numa lista longa. Fica preso
   sob o topo enquanto o grupo rola. */
.registros__grupo {
  position: sticky;
  top: var(--altura-topo);
  z-index: var(--z-grupo-lista);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-5);
  border-top: var(--borda);
  border-bottom: var(--borda-sutil);
  background: var(--cor-superficie-realce);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto);
}

/* O primeiro grupo encosta no cabeçalho da lista: sem linha dupla ali. */
.registros__grupo:first-child {
  border-top: 0;
}

/* Marca do mês: o mesmo filete dourado das abas e do cabeçalho da página. */
.registros__grupo::before {
  content: "";
  width: var(--filete);
  height: 0.75rem;
  border-radius: var(--raio-xs);
  background: var(--cor-marca);
}

/* Quantos ofícios do mês estão nesta página (LP-26): número discreto, sem caixa alta —
   não compete com o nome do mês. "nesta página" quando o mês continua na vizinha. */
.registros__grupo-conta {
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-weight: var(--peso-semi);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Recém-alterado: ao voltar da edição, a linha acende em dourado e assenta (registro.js). */
.registro--destaque {
  animation: destacar-registro 2.4s var(--curva-suave) both;
}

@keyframes destacar-registro {
  0% { background: var(--cor-marca-fundo-forte); box-shadow: inset var(--filete) 0 0 var(--cor-marca); }
  60% { background: var(--cor-marca-fundo); box-shadow: inset var(--filete) 0 0 var(--cor-marca); }
  100% { background: transparent; box-shadow: inset var(--filete) 0 0 transparent; }
}

/* Resumo (janela aberta pela lista): três colunas de leitura, sem caixas. */
.resumo__titulo--adiante {
  margin-top: var(--esp-4);
}

/* O corpo da janela são três faixas: caminho e dinheiro, depois quem vai e com o quê,
   depois o papel. Dentro de cada faixa as colunas têm a mesma altura (stretch). */
.resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  font-size: var(--texto-sm);
}

/* Roteiro curto: cada bloco na sua linha, e os quadros das diárias se espalham em três. */
.resumo__empilhado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
}

.resumo__empilhado .resumo__indicadores {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Os cartões da linha têm a altura do mais alto (o valor total, que leva uma nota
   embaixo). Nos outros, o conteúdo fica no meio e o número cresce — o cartão passa a ser
   ocupado pelo que importa, em vez de guardar um vão. */
.resumo__indicadores .indicador--compacto {
  justify-content: center;
  gap: var(--esp-2);
}

/* Numa linha só: a conta das diárias ("18 × 100% + 1 × 15%") perde o sentido quebrada no
   meio. Se não couber, corta com reticências — o valor inteiro fica no title e na folha. */
.resumo__indicadores .indicador--compacto .indicador__valor {
  font-size: var(--texto-xl);
  line-height: var(--altura-linha-justa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valor curto (o tipo de destino): pode ocupar o cartão. "INTERIOR + CAPITAL" é o caso
   longo — encolhe com o cartão em vez de ser cortado, já que aqui, ao contrário da conta
   das diárias, o texto é a informação inteira e reticências não dizem nada. */
.resumo__indicadores .indicador--compacto {
  container-type: inline-size;
}

.resumo__indicadores .indicador--compacto .indicador__valor--grande {
  font-size: clamp(var(--texto-lg), 9cqw, var(--texto-3xl));
  /* Pode quebrar: o `nowrap` acima existe para a conta das diárias, que perde o sentido
     partida ao meio. Aqui são nomes de faixa ("INTERIOR + CAPITAL") — duas linhas dizem
     tudo, reticências não. */
  white-space: normal;
  text-overflow: clip;
}

/* O roteiro é texto que quebra (nomes de cidade), as diárias são números curtos: 60/40. */
.resumo__linha {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--esp-5);
  align-items: stretch;
}

.resumo__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-height: 0;
}

.resumo__indicadores {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
}

.resumo__trechos {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.resumo__moldura {
  min-width: 0;
}

/* Lado a lado, quem manda na altura são os quadros das diárias: a lista do roteiro se
   encaixa no que sobrar e rola por dentro. Em posição absoluta ela não entra na conta da
   altura da linha — por isso a linha não cresce com o roteiro. */
.resumo__linha .resumo__moldura {
  position: relative;
  flex: 1;
  min-height: 9rem;
}

.resumo__linha .resumo__trechos {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

/* Cada trecho em três colunas fixas: o dia, o caminho e as horas. Alinhadas assim, as
   linhas se leem em coluna mesmo quando o nome da cidade é longo e quebra. */
.resumo__trecho-linha {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--esp-1) var(--esp-3);
  align-items: center;
  padding: var(--esp-3);
  border-bottom: var(--borda-sutil);
}

.resumo__trecho-linha:last-child {
  border-bottom: 0;
}

/* O filete do dia acompanha a linha inteira; a data fica centrada nele. */
.resumo__trecho-dia {
  display: grid;
  align-content: center;
  align-self: stretch;
  gap: var(--esp-05);
  padding-right: var(--esp-3);
  border-right: var(--borda-sutil);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.resumo__trecho-dia b {
  font-weight: var(--peso-semi);
}

.resumo__trecho-dia small {
  color: var(--cor-texto-terciario);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
}

.resumo__trecho-rota {
  color: var(--cor-texto-secundario);
  overflow-wrap: anywhere;
}

.resumo__trecho-rota b {
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
}

.resumo__trecho-seta {
  color: var(--cor-texto-terciario);
  padding: 0 var(--esp-05);
}

.resumo__trecho-horas {
  justify-self: end;
  white-space: nowrap;
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* Sem largura para as três colunas, as horas descem para a linha de baixo, alinhadas
   com o caminho. */
@container (max-width: 26rem) {
  .resumo__trecho-linha {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .resumo__trecho-horas {
    grid-column: 2;
    justify-self: start;
  }
}

/* A grade de cartões de pessoa (.resumo__cartoes) e as fichas de documentos
   (.resumo__documentos) moram em components.css: a folha do ofício também as usa. */

@media (max-width: 767.98px) {
  .resumo__linha,
  .resumo__empilhado .resumo__indicadores {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O aviso de pendências não encosta na identificação logo abaixo. */
.resumo__aviso {
  margin-bottom: var(--esp-4);
}

/* Identificação do ofício na janela de resumo: rótulos curtos em caixa alta, valores
   embaixo; o que é texto corrido (assunto, motivo) ocupa a linha toda. */
.resumo__definicoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--esp-3) var(--esp-5);
  margin: 0 0 var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: var(--borda-sutil);
  font-size: var(--texto-sm);
}

.resumo__definicoes dt {
  margin-bottom: var(--esp-05);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
}

.resumo__definicoes dd {
  margin: 0;
}

.resumo__definicoes .resumo__largo {
  grid-column: 1 / -1;
}

/* Texto de uma linha longa (nome com cargo, valor por extenso): duas colunas. Numa só ele
   quebrava em três linhas ao lado de um vão vazio; na linha inteira sobrava espaço. */
.resumo__definicoes .resumo__medio {
  grid-column: span 2;
}

@media (max-width: 767.98px) {
  .resumo__definicoes .resumo__medio {
    grid-column: 1 / -1;
  }
}

.resumo__valor {
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.resumo__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-bottom: var(--esp-2);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.resumo__titulo .icone {
  color: var(--cor-marca-texto);
}

.resumo__lista {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumo__trecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.resumo__trecho time {
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.registro__erro {
  padding: var(--esp-2) 0;
  color: var(--cor-perigo);
  font-size: var(--texto-sm);
}

.resumo__pendencias {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-top: var(--esp-2);
  color: var(--cor-texto-secundario);
}

.resumo__pendencias .icone {
  color: var(--cor-aviso);
}

.resumo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

@media (max-width: 1023.98px) {
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .resumo { grid-template-columns: minmax(0, 1fr); }
  .registros__grupo { padding: var(--esp-2) var(--esp-4); }
}

.registro__icone {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
}

.registro__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  font-weight: var(--peso-semi);
}

.registro__link {
  color: var(--cor-texto);
  text-decoration: none;
}

.registro__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.registro:hover .registro__link {
  color: var(--cor-marca-texto);
}

.registro__link:focus-visible {
  outline: none;
}

.registro:has(.registro__link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--cor-foco);
}

/* Sem :has() (navegadores antigos), o próprio link mostra o anel. */
@supports not selector(:has(a)) {
  .registro__link:focus-visible {
    outline: var(--foco-espessura) solid var(--foco-cor);
    outline-offset: var(--foco-offset);
  }
}

/* Placa de largura fixa na lista: com números de 2 ou 3 algarismos (43/2025, 142/2026) o
   título de cada linha começa na mesma coluna. No celular a placa vira selo (abaixo). */
.registro > .placa {
  min-width: 5.25rem;
}

/* Linha focada nunca fica sob o cabeçalho de grupo preso ao topo. */
.registro {
  scroll-margin-top: calc(var(--altura-topo) + 2.5rem);
}

/* Texto corrido do registro (ex.: o conteúdo de um texto pronto), em até três linhas. */
/* Nota curta sob o cabeçalho da lista (o que um selo significa, por exemplo). */
.lista-cabecalho__nota {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-2) var(--esp-5) 0;
}

.registro__texto {
  display: -webkit-box;
  margin: var(--esp-1) 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

/* Desativado: continua na lista (para reativar), mas recua — o título passa ao texto
   terciário (5,3:1, ainda AA); o hover devolve a cor de link como em qualquer linha. */
.registro--inativo .registro__link {
  color: var(--cor-texto-terciario);
}

/* Notas curtas sob o registro (a via assinada: conferência do PDF, dados que mudaram): cada
   uma numa linha, com o ícone ao lado do texto. */
.registro__notas {
  display: grid;
  gap: var(--esp-1);
  margin: var(--esp-2) 0 0;
  padding: 0;
  list-style: none;
}

.registro__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  line-height: var(--altura-linha-justa);
}

.registro__nota > .icone {
  flex: none;
  margin-top: 0.1em;
}

.registro__nota--aviso > .icone {
  color: var(--cor-aviso);
}

.registro__nota--ok > .icone {
  color: var(--cor-sucesso);
}

.registro--inativo .registro__texto {
  color: var(--cor-texto-terciario);
}

.registro__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4);
  margin-top: var(--esp-1);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.registro__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
}

.registro__meta-item > .icone {
  color: var(--cor-texto-terciario);
}

.registro__mais {
  display: inline-block;
  padding: 0 var(--esp-1);
  border-radius: var(--raio-xs);
  background: var(--cor-superficie-realce);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

.registro__meta-item--vazio {
  color: var(--cor-texto-terciario);
  font-style: italic;
}

/* "Sem destino" no título fala a mesma língua do "Sem período" ao lado (M4); no hover da
   linha acende como o resto do link. */
.registro__link-texto > .vazio-inline {
  font-style: italic;
  font-weight: var(--peso-normal);
}

/* Itálico dentro de um corte (overflow: hidden): a última letra inclina para fora da caixa
   e era decepada ("Sem destinc"). Um respiro à direita guarda a inclinação. */
.registro__link-texto > .vazio-inline,
.registro__meta-item--vazio > .registro__meta-texto {
  padding-right: 0.15em;
}

.registro:hover .registro__link-texto > .vazio-inline {
  color: inherit;
}

/* --- Título e metadados de uma linha só (LP-08/LP-09) ---------------------------------
   O texto que pode crescer (destinos, equipe, transporte) fica num span que corta com
   reticências; o texto inteiro vai no `title` do item. O "+N" fica fora do corte, sempre
   à vista. Nada aqui tem overflow no item em si: a caixa de "pousar" (Usado em N ofícios)
   precisa escapar da célula. */
.registro__link-texto,
.registro__meta-texto {
  /* relative: o texto só para leitor de tela (absoluto) que mora dentro do corte fica
     preso nele — senão, no celular, ele empurrava a página para o lado. */
  position: relative;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registro__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-1);
  min-width: 0;
  max-width: 100%;
}

.registro__link > .registro__mais,
.registro__meta-item > .registro__mais {
  flex: none;
}

/* Selos do título num grupo: no celular o grupo desce inteiro para a 2ª linha. */
.registro__selos {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
}

.registro__selos:not(:has(> *)) {
  display: none;
}

/* Diárias: o valor é o que se compara de uma linha para a outra — algarismos de mesma
   largura e a cor do texto principal; o detalhe (2 × 100%) vem depois, mais apagado. */
.registro__valor {
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}

.registro__meta-item--protocolo .registro__meta-texto,
.registro__meta-item--periodo .registro__meta-texto {
  font-variant-numeric: tabular-nums;
}

/* Motorista (I3): "(motorista)" por extenso depois do nome — visível para quem enxerga e
   lido uma vez só pelo leitor de tela (um ícone não dizia "motorista" sem o mouse). Na
   linha, o motorista vem primeiro e a marca nunca corta: o bloco do motorista não encolhe
   (só é limitado à largura da célula — aí o NOME dele corta, nunca a marca) e os outros
   nomes ficam com o que sobra. */
.registro__motorista {
  flex: none;
  color: var(--cor-texto-secundario);
  /* o espaço do texto (para o leitor de tela) some no início do item: a margem o repõe */
  margin-left: var(--esp-1);
  white-space: nowrap;
}

.registro__equipe {
  display: flex;
}

.registro__equipe-motorista {
  display: flex;
  flex: none;
  max-width: 100%;
}

/* Com mais gente depois do motorista, o bloco dele deixa o lugar do ", …". */
.registro__equipe-motorista:not(:last-child) {
  max-width: calc(100% - 1.75em);
}

.registro__equipe-nome,
.registro__equipe-resto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registro__equipe-resto {
  flex: 0 1 auto;
  /* Sempre sobra ", …": a equipe nunca parece ser só o motorista quando há mais gente. */
  min-width: 1.75em;
}

/* Cada item no seu lugar da grade (as listas declaram as colunas abaixo). */
.registro__meta-item--periodo { grid-area: periodo; }
.registro__meta-item--protocolo { grid-area: protocolo; }
.registro__meta-item--oficio { grid-area: oficio; }
.registro__meta-item--equipe { grid-area: equipe; }
.registro__meta-item--transporte { grid-area: transporte; }
.registro__meta-item--diarias { grid-area: diarias; }
.registro__meta-item--trechos { grid-area: trechos; }
.registro__meta-item--uso { grid-area: uso; min-width: 0; }
.registro__meta-item--notas { grid-area: notas; }

.registro__meta-item--uso > .registro__meta-item--acao {
  align-items: flex-start;
  max-width: 100%;
  /* Alvo mínimo de 24px (WCAG 2.5.8) que cresce só para BAIXO — para longe do título — e
     a margem negativa devolve a diferença: a faixa continua com a altura de uma linha de
     texto (a linha de 72px não muda). Sem padding: antes ele somava 2px à linha. */
  min-height: var(--alvo-minimo);
  margin-bottom: calc(var(--altura-linha) * 1em - var(--alvo-minimo));
  padding: 0;
}

/* Diárias: o valor nunca corta; o detalhe ("10 × 100% + 1 × 50%") é número, e número
   partido ao meio engana ("10 × 1…"). Por padrão o detalhe fica no title e no resumo; só
   na coluna larga ele aparece — e só quando cabe inteiro (abaixo). */
.registro__meta-item--diarias .registro__meta-detalhe {
  display: none;
}

/* A lista com linhas em colunas é o contêiner: as faixas respondem à largura do CARTÃO
   (painel de Viagens, vitrine do UI Lab), não à da janela (B2). Só essas listas viram
   contêiner — contenção de largura numa lista que se medisse pelo conteúdo a zeraria.
   Sem suporte a container queries, os metadados caem no fluxo antigo (itens que quebram
   linha), sem colunas e sem corte. */
.registros:has(> .registro > .registro__corpo > .registro__meta--colunas) {
  container: registros / inline-size;
}

/* ≥ 768px de janela (abaixo vale o layout do celular, mais adiante). Limiares medidos na
   largura da lista: 981px na lista a 1024 de janela, 913px no painel a 1440, 714px no
   painel a 1024, 689px no UI Lab a 768. */
@media (min-width: 768px) {
  /* Título numa linha só (reticências no texto, selos inteiros ao lado) — SÓ nas linhas
     que aderiram às colunas (B1: sem escopo, os selos de Usuários saíam do cartão). */
  @container registros (min-width: 640px) {
    .registro__corpo:has(> .registro__meta--colunas) > .registro__titulo {
      flex-wrap: nowrap;
    }

    .registro__corpo:has(> .registro__meta--colunas) > .registro__titulo > .selo,
    .registro__corpo:has(> .registro__meta--colunas) > .registro__titulo > .registro__selos {
      flex: none;
      flex-wrap: nowrap;
    }

    .registro__meta--colunas {
      display: grid;
      gap: var(--esp-1) var(--esp-4);
      align-items: center;
    }

    /* 640–949px de lista: duas faixas. A 1ª coluna (datas, números) e a do valor ficam
       fixas; a equipe fica com o resto (≥ 200px). */
    .registro__meta--oficio {
      grid-template-columns: 9.5rem minmax(0, 1fr) 7.5rem;
      grid-template-areas:
        "periodo equipe diarias"
        "protocolo transporte transporte";
    }


    /* "Usado em N ofícios" (um botão) desce para a 2ª faixa: logo abaixo de um título
       longo ele ficava a 21–23px do link (WCAG 2.5.8, RB1 do re-QA). */

  }

  /* Cartão estreito numa janela larga: as mesmas duas faixas de duas colunas do celular. */
  @container registros (max-width: 639.98px) {
    .registro__meta--colunas {
      display: grid;
      gap: var(--esp-05) var(--esp-3);
      align-items: center;
    }

    .registro__meta--oficio {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .registro__meta--oficio { grid-template-areas: "periodo diarias" "equipe transporte"; }



    .registro__meta--oficio .registro__meta-item--protocolo {
      display: none;
    }

    /* Como no celular (I1): a caixa de pousar ancora nas bordas da linha. */
    .registro .menu--pousar { position: static; }
    .registro .menu--pousar > .menu__painel {
      left: var(--esp-3);
      right: var(--esp-3);
      width: auto;
      max-width: none;
    }
  }

  /* ≥ 950px de lista: uma faixa só, em colunas de largura fixa — a mesma coluna em todas
     as linhas, para ler de cima para baixo ("qual viatura?", "quanto?"). Linha de 72px.
     A coluna das diárias, só com o valor, fica estreita e cede a sobra à equipe. */
  @container registros (min-width: 950px) {
    .registro__meta--oficio {
      grid-template-columns: 9.5rem 7.25rem minmax(0, 1.4fr) minmax(0, 1fr) 7.5rem;
      grid-template-areas: "periodo protocolo equipe transporte diarias";
    }


  }

  /* ≥ 1180px de lista (a lista inteira a partir de ~1240 de janela): coluna das diárias
     larga, com o detalhe quando ele CABE INTEIRO (I2). Valor e detalhe são dois itens
     de uma linha flexível de uma linha de altura: o detalhe que não cabe desce para a 2ª
     linha, que fica fora do corte — nunca aparece pela metade. */
  @container registros (min-width: 1180px) {
    .registro__meta--oficio {
      grid-template-columns: 9.5rem 7.25rem minmax(0, 1.4fr) minmax(0, 1fr) 11rem;
    }


    .registro__meta-item--diarias:not(.registro__meta-item--vazio) > .registro__meta-texto {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--esp-1);
      height: calc(var(--altura-linha) * 1em);
      text-overflow: clip;
    }

    .registro__meta-item--diarias .registro__valor {
      flex: none;
    }

    /* O detalhe que desce fica inteiro fora da vista (recortado em si mesmo, para não
       "vazar" a largura de rolagem da célula). */
    .registro__meta-item--diarias .registro__meta-detalhe {
      display: inline;
      max-width: 100%;
      overflow: hidden;
    }
  }
}

/* Ações: sempre com o contraste cheio (WCAG 1.4.11 — o ⋮ é o único caminho para
   cancelar, arquivar ou excluir). Antes esmaeciam a 60% até o ponteiro chegar (≈2,6:1).
   O hover da linha só dá ao botão o fundo de "pronto para clicar". */
.registro__acoes {
  position: relative;
  z-index: var(--z-linha-acoes);
  display: flex;
  gap: var(--esp-2);
}

/* Só o botão de ícone (⋮): botões de texto ("Despachar", "Abrir") com fundo pareceriam
   pressionados (M1). */
.registro:hover .registro__acoes .botao--icone.botao--sutil:not(:hover) {
  background: var(--cor-superficie-realce);
}

@media (max-width: 767.98px) {
  /* Celular: a placa vira um selo em linha acima do título; o corpo usa a largura toda.
     (Linhas sem placa — ícone ou só texto — continuam assim.) */
  .registro {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "placa acoes" "corpo corpo";
    gap: var(--esp-1) var(--esp-3);
    align-items: start;
    padding: var(--esp-3) var(--esp-4);
  }
  .registro__icone { display: none; }
  /* Catálogo sem placa documental: conteúdo e menu compartilham a primeira linha. */
  .registro.registro--catalogo { grid-template-areas: "corpo acoes"; }
  .registro > .placa {
    grid-area: placa;
    justify-self: start;
    flex-direction: row;
    gap: var(--esp-1);
    min-width: 0;
    padding: 0 var(--esp-1);
    line-height: 1.4;
  }
  .registro:not(.registro-operacional) > .placa .placa__numero { font-size: var(--texto-sm); }
  .registro__corpo { grid-area: corpo; }
  .registro__acoes { grid-area: acoes; }
  /* Metadados legíveis no celular: texto-sm (11,7px), não xs. */
  .registro__meta { gap: var(--esp-05) var(--esp-3); }

  /* LP-10 — linha com metadados em colunas (Ofícios, Roteiros, Termos, painel de Viagens;
     as demais listas aderem ao trocar a meta para --colunas): placa, título e ⋮ na MESMA linha; os metadados embaixo, em
     no máximo duas faixas. O corpo "se desfaz" (display: contents) para o título e os
     metadados entrarem na grade da linha; o resto do corpo (notas, texto) ocupa a largura
     toda. Antes a placa e o ⋮ gastavam uma linha só deles (~36px por registro). */
  .registro:has(> .registro__corpo > .registro__meta--colunas) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    column-gap: var(--esp-2);
    row-gap: var(--esp-1);
  }
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .placa { grid-area: 1 / 1; margin-top: var(--esp-05); }
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .registro__corpo { display: contents; }
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .registro__corpo > * { grid-column: 1 / -1; }
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .registro__corpo > .registro__titulo { grid-area: 1 / 2; }
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .registro__acoes {
    grid-area: 1 / 3;
    align-self: start;
    /* o botão de 36px não estica a 1ª linha: sobe até a borda do respiro */
    margin-block: calc(-1 * var(--esp-2));
    margin-right: calc(-1 * var(--esp-2));
  }
  .registro:has(> .registro__corpo > .registro__meta--colunas) .registro__meta { margin-top: 0; }

  /* Título com grupo de selos: o link fica na 1ª linha (entre a placa e o ⋮, cortando
     com reticências) e os selos descem juntos para a 2ª, na largura toda. */
  .registro:has(> .registro__corpo > .registro__meta--colunas) > .registro__corpo > .registro__titulo:has(> .registro__selos) {
    display: contents;
  }
  .registro:has(> .registro__corpo > .registro__meta--colunas) .registro__titulo > .registro__link {
    grid-area: 1 / 2;
    align-self: center;
    justify-self: start;
  }
  .registro:has(> .registro__corpo > .registro__meta--colunas) .registro__titulo > .registro__selos { grid-column: 1 / -1; }
  .registro__titulo { row-gap: var(--esp-1); }
  .registro__titulo > .registro__link { flex: 0 1 auto; }

  /* Metadados: duas faixas, duas colunas. O protocolo fica no resumo e na busca. */
  .registro__meta--colunas {
    display: grid;
    gap: var(--esp-05) var(--esp-3);
    align-items: center;
  }
  .registro__meta--oficio {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "periodo diarias" "equipe transporte";
  }
  .registro__meta--oficio .registro__meta-item--protocolo { display: none; }




  /* I1 — A caixa "Usado em N ofícios" ancora na LINHA, não no botão: no celular o botão
     fica na coluna da direita e a caixa, presa à borda esquerda dele, saía 183px da tela.
     Presa às bordas da linha, ela nunca passa da largura da lista. */
  .registro .menu--pousar { position: static; }
  .registro .menu--pousar > .menu__painel {
    left: var(--esp-3);
    right: var(--esp-3);
    width: auto;
    max-width: none;
  }
}

/* =============== Barra de filtros =============== */
.filtros {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: var(--borda-sutil);
  background: var(--cor-superficie-sutil);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
}

.filtros__busca {
  flex: 1 1 18rem;
}

.filtros__campo {
  flex: 0 1 15rem;
}

.filtros__acoes {
  display: flex;
  gap: var(--esp-2);
}

/* Gaveta "Mais filtros": o botão fica na linha da busca, com a mesma altura dos campos;
   o painel abre logo abaixo da barra, flutuando sobre a lista — assim a lista não dá um
   pulo cada vez que a gaveta abre ou fecha. Continua um <details>: sem JavaScript também
   abre. */
.filtros__mais {
  flex: 0 0 auto;
  align-self: flex-end;
}

.filtros__mais-resumo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: var(--altura-controle);
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.filtros__mais-resumo::-webkit-details-marker {
  display: none;
}

.filtros__mais-resumo:hover {
  border-color: var(--neutro-500);
  color: var(--cor-texto);
}

/* Aberta ou com filtro valendo, a gaveta se assume: borda e texto em grafite. */
.filtros__mais[open] .filtros__mais-resumo {
  border-color: var(--grafite-800);
  color: var(--cor-texto);
}

.filtros__mais-resumo:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco); /* o anel do Design System (LP-11) */
}

.filtros__mais-seta {
  transition: rotate var(--duracao-rapida) var(--curva-padrao);
}

.filtros__mais[open] .filtros__mais-seta {
  rotate: 180deg;
}

/* Grade em vez de linha: os seis campos se arrumam sozinhos em qualquer largura, sem
   sobrar um deles solto numa linha só para ele. */
.filtros__avancados {
  position: absolute;
  z-index: var(--z-painel-campo);
  top: calc(100% - var(--esp-2));
  right: var(--esp-5);
  left: var(--esp-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-flutuante);
  transform-origin: top center;
  animation: brotar var(--duracao-rapida) var(--curva-padrao);
}

/* Período ("dd/mm/aaaa a dd/mm/aaaa") não cabe numa coluna de 11rem: ocupa duas, quando há. */
@media (min-width: 768px) {
  .filtros__campo--lg {
    grid-column: span 2;
  }
}

/* Em tela larga os filtros cabem todos numa linha: uma coluna por filtro, nenhuma com
   peso dobrado. Antes as duas datas pediam duas colunas cada e empurravam o resto para
   uma segunda fila, com um vão grande sobrando ao lado. */
@media (min-width: 1200px) {
  .filtros__avancados {
    grid-template-columns: repeat(var(--filtros-colunas, 5), minmax(0, 1fr));
  }

  .filtros__avancados .filtros__campo--lg {
    grid-column: auto;
  }
}

.filtros__limpar {
  justify-self: start;
  align-self: center;
}

/* Quantos filtros da gaveta valem: a pílula grafite no botão (OOB na busca ao vivo). */
.filtros__mais-conta {
  min-width: 1.25rem;
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--grafite-900);
  color: var(--neutro-0);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.filtros__mais:has(.filtros__mais-conta:not([hidden])) .filtros__mais-resumo {
  border-color: var(--grafite-800);
  color: var(--cor-texto);
}

/* Cabeçalho e rodapé da gaveta (Ofícios): o rodapé sempre em linha própria, "Limpar" à
   esquerda e "Fechar" à direita; o título só aparece na folha inferior do celular. */
.filtros__gaveta-cabecalho {
  display: none;
}

.filtros__gaveta-titulo {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.filtros__gaveta-rodape {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: var(--borda-sutil);
}

.filtros__gaveta-rodape > .botao--texto {
  margin-right: auto;
}

/* Gaveta semântica: datas têm espaço para as duas pontas, valores compartilham linha.
   A folha mobile continua usando o layout e o foco do componente original. */
@media (min-width: 768px) {
  .filtros__avancados--organizados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); border: var(--borda); }
  .filtros__avancados--organizados > .filtros__campo--ordem { grid-column: 1 / -1; }
  .filtros__avancados--organizados > .filtros__gaveta-cabecalho { display: block; grid-column: 1 / -1; padding-bottom: var(--esp-2); border-bottom: var(--borda-sutil); }
}

@media (min-width: 1024px) {
  .filtros__avancados--rodape {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .filtros__avancados--organizados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .filtros__avancados--organizados { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filtros__avancados--organizados > :is(.filtros__campo--ordem, .filtros__campo--periodo, .filtros__campo--protocolo, .filtros__campo--valor) { grid-column: span 2; }
}

/* Faixa de valores com o rótulo na borda (fieldset/legend): por fora parece um campo só,
   com "a" entre as pontas — o mesmo desenho dos outros campos da gaveta. */
.filtros__faixa-campo {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0 0;
  border: 0;
}

.filtros__faixa-rotulo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--esp-2);
  padding: 0 var(--esp-1);
  background: linear-gradient(var(--cor-superficie-elevada) 50%, var(--cor-superficie) 50%);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1rem;
}

.filtros__faixa-campo:focus-within > .filtros__faixa-rotulo {
  color: var(--cor-texto);
}

.filtros__faixa--caixa {
  height: var(--altura-controle);
  padding: 0 var(--esp-2);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
}

.filtros__faixa--caixa:focus-within {
  border-color: var(--grafite-800);
  box-shadow: var(--sombra-foco-campo);
}

.filtros__faixa--caixa .entrada {
  height: calc(var(--altura-controle) - 2px);
  padding: 0 var(--esp-1);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.filtros__faixa--caixa .entrada:focus-visible {
  box-shadow: none;
}

/* Documento + Filtros andam juntos (QA Lote 2, I5): se a linha não couber, a busca fica com
   a 1ª linha inteira e os dois dividem a 2ª — nunca "Filtros" sozinho numa linha. */
.filtros--barra .filtros__busca {
  flex: 1 1 16rem;
}

.filtros__lado {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: var(--esp-3);
  max-width: 100%;
}

/* 768–1023: Documento compacto e busca a partir de 12rem cabem com o Filtros numa linha só
   — duas faixas custavam 54px de lista (pior que o Lote 1 a 768/900). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .filtros--barra .filtros__busca { flex-basis: 12rem; }
  .filtros--barra .filtros__documento > .segmentado > label { padding: 0 var(--esp-2); }
}

/* Documento (D1): um clique, sempre à vista, com a contagem de cada situação. Desenhado
   como os campos ao lado — contorno de campo e rótulo na borda, na mesma altura do
   "Buscar" —, com a opção marcada em grafite por dentro. */
.filtros__documento {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  /* O recuo de cima é a altura do rótulo na borda: sem ele, a opção marcada (grafite) sobe
     até o rótulo e o texto "Documento" fica por cima do chip. */
  padding: 0.75rem 0 0;
  border: 0;
}

.filtros__documento-rotulo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--esp-2);
  padding: 0 var(--esp-1);
  background: linear-gradient(var(--cor-superficie-sutil) 50%, var(--cor-superficie) 50%);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1rem;
}

.filtros__documento:focus-within > .filtros__documento-rotulo {
  color: var(--cor-texto);
}

.filtros__documento > .segmentado {
  height: var(--altura-controle);
  align-items: center;
  padding: var(--esp-05) var(--esp-1);
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-superficie);
}

/* 1,75rem: a opção marcada não encosta no rótulo da borda (e segue ≥ 24px de alvo). */
.filtros__documento > .segmentado > :is(label, a) {
  flex: 0 0 auto;
  min-height: 1.75rem;
}

.filtros__documento > .segmentado > input:not(:checked) + label:hover,
.filtros__documento > .segmentado > a:not([aria-current]):hover {
  background: var(--cor-superficie-realce);
}

/* Faixa de valores (de … a …): dois campos curtos que se leem como um. */
.filtros__faixa {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.filtros__faixa .entrada {
  min-width: 0;
}

.filtros__faixa-sep {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.lista-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-5);
  border-bottom: var(--borda-sutil);
}

.lista-cabecalho__total {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

/* Lista atualizando (HTMX): esmaece e mostra uma linha dourada correndo no topo —
   a mudança é explicada, não parece "reload". */
.lista-resultados {
  position: relative;
  /* Recorte com o mesmo raio do cartão: a fita dourada do hover, na última linha, curva
     junto com a quina em vez de passar reto por fora dela. clip-path (e não overflow)
     porque o cabeçalho de mês precisa continuar grudando no topo. */
  clip-path: inset(0 round 0 0 var(--raio-lg) var(--raio-lg));
  transition: opacity var(--duracao-media) var(--curva-padrao);
}

/* Erro da busca ao vivo (componentes/erro_lista.html): no lugar dos resultados. */
.lista-erro {
  margin: var(--esp-4) var(--esp-5);
}

.lista-resultados.htmx-request {
  opacity: 0.6;
  pointer-events: none;
}

.lista-resultados.htmx-request::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 25%;
  height: var(--filete-fino);
  background: var(--cor-marca);
  animation: deslizar-indeterminado 1s var(--curva-suave) infinite;
}

@media (max-width: 767.98px) {
  .filtros { padding: var(--esp-3) var(--esp-4); }
  .filtros__campo, .filtros__busca { flex: 1 1 100%; }
  .filtros__acoes { width: 100%; }
  .filtros__acoes .botao { flex: 1; }
  .lista-cabecalho { padding: var(--esp-3) var(--esp-4); }
  .filtros-ativos { padding: var(--esp-3) var(--esp-4) var(--esp-1); }
  /* Refino da busca no celular: também numa linha só, rolando de lado. */
  .refino[data-rola-lado] {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--esp-3) var(--esp-4) var(--esp-1);
    scrollbar-width: none;
  }
  .refino[data-rola-lado] > * { flex: none; white-space: nowrap; }
  .filtros-ativos__rotulo { display: none; }

  /* Barra de Ofícios no celular: Busca e Filtros na mesma linha; Documento embaixo, na
     largura toda, rolando de lado se não couber (com a borda esmaecida como nas abas). */
  .filtros--barra { row-gap: var(--esp-2); }
  .filtros--barra .filtros__lado { display: contents; }
  .filtros--barra .filtros__busca { flex: 1 1 0; min-width: 0; order: 1; }
  .filtros--barra .filtros__mais { order: 2; }
  .filtros--barra .filtros__documento { flex: 1 1 100%; order: 3; }
  .filtros--barra .filtros__documento > .segmentado { display: flex; width: 100%; }
  .filtros--barra .filtros__mais-resumo { padding: 0 var(--esp-2); }

  /* A gaveta vira folha inferior sobre um véu: a lista não fica coberta pela metade. */
  .filtros__mais[open]:has(> .filtros__avancados--rodape)::before {
    content: "";
    position: fixed;
    z-index: var(--z-gaveta);
    inset: 0;
    background: var(--cor-veu);
    animation: aparecer var(--duracao-media) var(--curva-padrao);
  }

  .filtros__mais[open] > .filtros__avancados--rodape {
    position: fixed;
    z-index: var(--z-gaveta);
    inset: auto 0 0;
    max-height: min(85dvh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0 var(--esp-4);
    border-radius: var(--raio-xl) var(--raio-xl) 0 0;
    transform-origin: bottom center;
    animation: folha-subir var(--duracao-media) var(--curva-padrao);
  }

  .filtros__avancados--rodape > * { grid-column: 1 / -1; }
  .filtros__avancados--rodape > .campo:has(#id_ano),
  .filtros__avancados--rodape > .campo:has(#id_protocolo) { grid-column: auto; }

  .filtros__avancados--rodape .filtros__gaveta-cabecalho {
    position: sticky;
    z-index: 3;
    top: 0;
    display: block;
    margin: 0 calc(-1 * var(--esp-4));
    padding: var(--esp-4) var(--esp-4) var(--esp-2);
    background: var(--cor-superficie-elevada);
  }

  .filtros__avancados--rodape .filtros__gaveta-rodape {
    position: sticky;
    z-index: 3;
    bottom: 0;
    margin: 0 calc(-1 * var(--esp-4));
    padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom));
    background: var(--cor-superficie-elevada);
  }
}

/* Folha modal aberta (filtros.js): a página não rola por trás. */
html.rolagem-presa {
  overflow: hidden;
}

/* =============== Paginação =============== */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-top: var(--borda-sutil);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.paginacao__paginas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginacao__pagina {
  display: inline-grid;
  place-items: center;
  min-width: var(--altura-controle-sm);
  height: var(--altura-controle-sm);
  padding: 0 var(--esp-2);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  color: var(--cor-texto);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao);
}

.paginacao__pagina:hover {
  background: var(--cor-superficie-realce);
  text-decoration: none;
}

.paginacao__pagina[aria-current="page"] {
  background: var(--grafite-900);
  color: var(--neutro-0);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-interna-topo);
}

.paginacao__pagina[aria-disabled="true"] {
  color: var(--cor-texto-terciario);
  pointer-events: none;
}

/* Invólucro trocado fora de banda na busca ao vivo: para a barra, a paginação é filha direta. */
.barra-acoes__paginacao {
  display: contents;
}

/* Na barra de ações da lista: só os números, sem a moldura do rodapé da lista. */
.paginacao.paginacao--barra {
  order: -1; /* à esquerda da barra, antes da contagem; as ações ficam à direita */
  flex: none;
  padding: 0;
  border: 0;
}

@media (max-width: 479.98px) {
  .paginacao { justify-content: center; }
  .paginacao__numero:not(.paginacao__numero--atual) { display: none; }
}

/* =============== Roteiros cadastrados: registro sem link =============== */
/* Registro sem link (roteiro cancelado ou perfil só de leitura): não finge ser clicável. */
.registro__link--estatico::after {
  content: none;
}

.registro:hover .registro__link--estatico {
  color: var(--cor-texto);
}

/* Inativo e sem link (roteiro cancelado): o hover não "acende" o que não se clica (M6). */
.registro--inativo:hover .registro__link--estatico {
  color: var(--cor-texto-terciario);
}

.lista-simples {
  display: grid;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: 0;
  list-style: none;
}

.lista-simples > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

/* Celular: linha sem placa e com ações de texto (documentos do termo, substituições):
   o nome primeiro, as ações embaixo. */
@media (max-width: 767.98px) {
  .registro:has(> .registro__acoes--fixas):not(:has(> .placa)) {
    grid-template-areas: "corpo corpo" "acoes acoes";
  }
  .registro:has(> .registro__acoes--fixas):not(:has(> .placa)) > .registro__acoes {
    justify-self: start;
  }
}

/* O registro que está aberto ao lado (ex.: o documento do termo mostrado na prévia). */
.registro--atual,
.registro--atual:hover,
.registro--atual:focus-within {
  background: var(--cor-superficie-sutil);
  /* A fita do aberto não afina sob o mouse (o hover comum usa o filete fino). */
  box-shadow: inset var(--filete) 0 0 var(--cor-marca);
}

/* Prestação de contas: um bloco por ofício (a equipe) com um cartão por servidor; o lote
   (nº da solicitação, liberação, prazo de saque) fica nos campos do próprio cartão. */
.prestacao-equipe {
  margin: 0 0 var(--esp-4);
  border: var(--borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
}

.prestacao-equipe__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: var(--borda);
  background: var(--cor-superficie-sutil);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
}

.prestacao-equipe__titulo {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.prestacao-equipe__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.prestacao-equipe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-inline-start: auto;
}

.prestacao-equipe__servidores {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A equipe de um documento possui identificação própria; a mesma base também
   atende anexos por pessoa, sem impor a placa a esses registros. */
.prestacao-equipe--documento .prestacao-equipe__cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-3) var(--esp-4);
}

.prestacao-equipe__identificacao {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
}

.prestacao-equipe__identificacao > div { min-width: 0; }
.prestacao-equipe__placa { flex: none; text-decoration: none; border-radius: var(--raio-md); }
.prestacao-equipe--documento .prestacao-equipe__titulo { margin-bottom: var(--esp-1); overflow-wrap: anywhere; }
.prestacao-equipe--documento .prestacao-equipe__acoes { justify-content: flex-end; max-width: 30rem; }

.prestacao-servidor {
  padding: var(--esp-3) var(--esp-4);
}

.prestacao-servidor + .prestacao-servidor {
  border-top: var(--borda-sutil);
}

.prestacao-servidor--fechado {
  background: var(--cor-superficie-sutil);
}

/* Uma linha no desktop: quem (nome, selos, diária) · os três campos · as ações; a linha de
   baixo (devolução, justificativa, pendências) ocupa a largura toda e só existe com conteúdo. */
.prestacao-servidor__form {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(24rem, 1.4fr) auto;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
}

.prestacao-servidor__form--leitura {
  grid-template-columns: minmax(0, 1fr) auto;
}

.prestacao-servidor__quem {
  display: grid;
  gap: var(--esp-05);
  min-width: 0;
}

.prestacao-servidor__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
}

.prestacao-servidor__nome {
  font-weight: var(--peso-semi);
}

.prestacao-servidor__campos {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) repeat(2, minmax(8rem, 0.9fr));
  gap: var(--esp-2);
}

.prestacao-servidor__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
}

.prestacao-servidor__acoes:empty {
  display: none;
}

.prestacao-servidor__rodape {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--esp-2);
}

.prestacao-servidor__rodape:not(:has(*)) {
  display: none;
}

.prestacao-servidor__nota {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.prestacao-servidor__nota strong {
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}

.prestacao-servidor__status {
  margin: 0;
  color: var(--cor-texto-terciario);
  font-size: var(--texto-xs);
}

.prestacao-servidor__status:empty {
  display: none;
}

/* Pendências recolhidas: uma linha discreta; aberta, a lista e o "finalizar mesmo assim". */
.prestacao-servidor__pendencias > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-aviso);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  cursor: pointer;
  list-style: none;
  min-height: var(--esp-6);
}

.prestacao-servidor__pendencias > summary::-webkit-details-marker {
  display: none;
}

.prestacao-servidor__pendencias[open] {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
}

.prestacao-servidor__lista {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding-left: var(--esp-5);
  color: var(--cor-texto);
  font-size: var(--texto-xs);
}

.prestacao-servidor__justificar {
  display: grid;
  gap: var(--esp-2);
  max-width: 40rem;
}

@media (max-width: 1023.98px) {
  .prestacao-equipe--documento .prestacao-equipe__cabecalho { grid-template-columns: minmax(0, 1fr); }
  .prestacao-equipe--documento .prestacao-equipe__acoes { margin-inline-start: 0; justify-content: flex-start; max-width: none; }
  .prestacao-servidor__form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .prestacao-servidor__campos {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 599.98px) {
  .prestacao-servidor__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .prestacao-servidor__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row: auto;
  }
  .prestacao-servidor__campos > .campo:first-child { grid-column: 1 / -1; }
  .prestacao-equipe--documento .prestacao-equipe__cabecalho,
  .prestacao-equipe--documento .prestacao-servidor { padding-inline: var(--esp-3); }
  .prestacao-equipe__placa .identidade-documental--placa { width: calc(var(--esp-4) * 6); padding: var(--esp-2); }

  .prestacao-servidor__acoes {
    justify-content: flex-start;
  }
}

.prestacao-servidor__selos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}
/* Item de meta que é ação (ex.: "Usado em 3 ofícios" abre a lista): tem a mesma cara do
   texto ao lado, mas se comporta como botão. */
.registro__meta-item--acao {
  border: 0;
  background: none;
  font: inherit;
  color: var(--cor-marca-texto);
  cursor: pointer;
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.registro__meta-item--acao:hover {
  color: var(--cor-texto);
}

/* Link de meta numa linha que já é clicável (entrada dos cadastros: "3 incompletos"):
   fica por cima do link esticado do título e com o alvo mínimo de toque. */
.registro__meta-item--alvo {
  position: relative;
  z-index: 1;
  min-height: var(--alvo-minimo);
}

/* Variante documental do arquétipo LIST: separação por faixas e número editorial. */
.lista--documental > .cartao { border: var(--borda); box-shadow: var(--sombra-1); }
.lista--documental > .pagina-cabecalho.pagina-cabecalho--documental { padding-bottom: var(--esp-3); margin-bottom: var(--esp-4); }
.lista--documental > .abas { gap: var(--esp-2); border-bottom: 0; padding-bottom: var(--esp-2); }
.lista--documental > .abas .aba { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); }
.lista--documental > .abas .aba[aria-current="page"] { background: var(--cor-primaria); color: var(--cor-texto-inverso); border-color: transparent; }
.lista--documental > .abas .aba[aria-current="page"] .aba__contagem { color: var(--cor-texto-inverso); background: var(--luz-16); }
.lista--documental .filtros--barra { padding: var(--esp-6); border-bottom: var(--borda); background: var(--cor-superficie-sutil); }
.lista--documental .registros__grupo { padding: var(--esp-3) var(--esp-6); background: var(--cor-superficie-sutil); }
.registro.registro--documental { padding: var(--esp-5) var(--esp-6); column-gap: var(--esp-6); }
.registro--documental > .placa { min-width: 6.5rem; padding: 0; border: 0; background: transparent; box-shadow: none; align-self: start; }
.registro--documental > .placa .placa__numero { font-size: var(--texto-xl); }
.registro--documental .registro__link-texto { font-size: var(--texto-lg); font-weight: var(--peso-semi); }
.registro--documental .registro__meta { margin-top: var(--esp-3); }
.registro--documental .registro__valor { font-weight: var(--peso-forte); }
.registros__colunas { display: none; }
.registro__agenda { display: contents; }

/* A variante de registro reorganiza os mesmos dados, sem criar tabela ARIA parcial.
   As colunas do cabeçalho correspondem às áreas dos registros. */
@media (min-width: 1024px) {
  .registros__colunas,
  .registro.registro--documental {
    grid-template-columns: 6.5rem minmax(0, 1.35fr) minmax(0, 1fr) 8.5rem 2.25rem;
    column-gap: var(--esp-6);
  }
  .registros__colunas { display: grid; padding: var(--esp-3) var(--esp-6); border-bottom: var(--borda); color: var(--cor-texto-secundario); font-size: var(--texto-xs); font-weight: var(--peso-semi); }
  .registros__colunas > :last-child { text-align: right; }
  .registro.registro--documental { grid-template-areas: "identidade titulo equipe diarias acoes" "identidade periodo transporte diarias acoes" "identidade protocolo transporte diarias acoes"; row-gap: var(--esp-1); align-items: start; padding-block: var(--esp-3); }
  .registro.registro--documental:has(.registro__agenda) { grid-template-areas: "identidade titulo equipe diarias acoes" "identidade agenda transporte diarias acoes"; }
  .registro--documental .registro__agenda { grid-area: agenda; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); align-items: center; margin-top: var(--esp-1); }
  .registro--documental > .placa { grid-area: identidade; }
  .registro--documental > .registro__corpo,
  .registro--documental .registro__meta--colunas { display: contents; }
  .registro--documental .registro__corpo > .registro__titulo { grid-area: titulo; flex-wrap: wrap; gap: var(--esp-2); }
  .registro--documental .registro__titulo > .registro__link { width: 100%; }
  .registro--documental .registro__link-texto { white-space: normal; line-height: var(--altura-linha-justa); }
  .registro--documental .registro__titulo > .registro__selos { flex-wrap: wrap; }
  .registro--documental .registro__meta-item > .icone { display: none; }
  .registro--documental .registro__meta-item--periodo { margin-top: 0; }
  .registro--documental .registro__meta-item--transporte { color: var(--cor-texto-terciario); }
  .registro--documental .registro__meta-item--diarias { justify-content: end; text-align: right; }
  .registro--documental .registro__meta-item--diarias .registro__meta-texto { display: grid; gap: var(--esp-1); height: auto; white-space: normal; }
  .registro--documental .registro__valor { font-size: var(--texto-lg); }
  .registro--documental .registro__meta-item--diarias .registro__meta-detalhe { display: block; font-size: var(--texto-xs); }
  .registro--documental .registro__meta-separador { display: none; }
  .registro--documental > .registro__acoes { grid-area: acoes; }
}

@media (max-width: 767.98px) {
  .lista--documental .filtros--barra { padding: var(--esp-4); }
  .lista--documental .registro.registro--documental { padding: var(--esp-4); row-gap: var(--esp-2); }
  .lista--documental .registro.registro--documental > .placa { grid-area: 1 / 1 / 2 / 3; min-width: 0; justify-self: start; }
  .lista--documental .registro.registro--documental > .registro__acoes { grid-area: 1 / 3; }
  .lista--documental .registro.registro--documental .registro__titulo > .registro__link { grid-area: auto; grid-column: 1 / -1; grid-row: 2; }
  .lista--documental .registro.registro--documental .registro__titulo > .registro__selos { grid-column: 1 / -1; grid-row: 3; }
  .lista--documental .registro.registro--documental .registro__meta { grid-row: 4; }
  .lista--documental .registro--documental .registro__meta--oficio { grid-template-areas: "periodo diarias" "protocolo diarias" "equipe equipe" "transporte transporte"; gap: var(--esp-2) var(--esp-3); }
  .lista--documental .registro--documental .registro__meta-item--protocolo { display: inline-flex; }
  .registro--documental .registro__meta-item--diarias { justify-content: end; align-self: start; text-align: right; }
  .registro--documental .registro__valor { font-size: var(--texto-lg); }
  .registro--documental .registro__meta-item--equipe { padding-top: var(--esp-2); border-top: var(--borda-sutil); }
}

/* =============== Lista de ofícios: o que fazer agora =============== */
/* Faixa "pede atenção": rascunhos que saem em até 7 dias e rascunhos vazios. Cada cartão
   filtra a lista; o ativo ganha a borda grafite e o "x" que volta. */
.atencao-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--esp-3); margin: 0 0 var(--esp-4); }
.atencao-lista__cartao { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao); animation: atencao-entrar var(--duracao-lenta) var(--curva-expressiva) backwards; }
.atencao-lista__cartao + .atencao-lista__cartao { animation-delay: 90ms; }
a.atencao-lista__cartao:hover,
.atencao-lista__cartao:has(> .atencao-lista__link:hover) { translate: 0 -1px; box-shadow: var(--sombra-2); }
.atencao-lista__link { display: flex; flex: 1; align-items: center; gap: var(--esp-3); min-width: 0; color: inherit; text-decoration: none; }
.atencao-lista__icone { display: grid; flex: none; place-items: center; width: var(--altura-controle); height: var(--altura-controle); border-radius: var(--raio-md); }
.atencao-lista__texto { display: grid; flex: 1; gap: var(--esp-05); min-width: 0; }
.atencao-lista__texto strong { font-size: var(--texto-md); font-weight: var(--peso-semi); line-height: var(--altura-linha-justa); }
.atencao-lista__texto small { font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.atencao-lista__seta { display: inline-flex; color: var(--cor-texto-secundario); transition: translate var(--duracao-rapida) var(--curva-padrao); }
.atencao-lista__cartao:hover .atencao-lista__seta { translate: 2px 0; color: var(--cor-texto); }
.atencao-lista__cartao--urgente { border-color: var(--cor-perigo-borda); }
.atencao-lista__cartao--urgente:hover { border-color: var(--cor-perigo); }
.atencao-lista__cartao--urgente .atencao-lista__icone { background: var(--cor-perigo-fundo); color: var(--cor-perigo); animation: urgencia-pulsar 2.4s var(--curva-padrao) infinite; }
.atencao-lista__cartao--vazio .atencao-lista__icone { background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); }
.atencao-lista__cartao--ativo { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.atencao-lista__cartao--ativo:hover { border-color: var(--cor-primaria); }
.atencao-lista__form { flex: none; margin: 0; }
.botao.botao--perigo-sutil { border-color: var(--cor-perigo-borda); color: var(--cor-perigo); }
.botao.botao--perigo-sutil:hover { --botao-fundo-hover: var(--cor-perigo-fundo); border-color: var(--cor-perigo); color: var(--cor-perigo); }
@keyframes atencao-entrar { from { opacity: 0; translate: 0 var(--esp-2); } to { opacity: 1; translate: 0 0; } }
@keyframes urgencia-pulsar {
  0%, 60%, 100% { scale: 1; box-shadow: 0 0 0 0 transparent; }
  8% { scale: 1.1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-perigo-solida) 55%, transparent); }
  18% { scale: 1; }
  45% { box-shadow: 0 0 0 var(--esp-3) transparent; }
}

/* Rascunho que sai em até 7 dias: filete na borda esquerda (âmbar; vermelho com 2 dias ou
   menos) e o selo do tempo no lugar do alerta; no vermelho, o relógio dá um tique. */
.registros--operacionais > .registro.registro--urgente-aviso { box-shadow: inset var(--filete) 0 0 var(--cor-aviso-solida); }
.registros--operacionais > .registro.registro--urgente-perigo { box-shadow: inset var(--filete) 0 0 var(--cor-perigo-solida); }
.selo.selo--urgencia { display: inline-flex; align-items: center; gap: var(--esp-1); font-weight: var(--peso-semi); white-space: nowrap; }
.selo.selo--urgencia::before { content: none; }
.selo.selo--urgencia-aviso { border-color: var(--cor-aviso-borda); background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.selo.selo--urgencia-perigo { border-color: var(--cor-perigo-borda); background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.selo--urgencia-perigo > .icone { transform-origin: 50% 55%; animation: urgencia-tique 1.6s var(--curva-padrao) infinite; }
.selo__extra { font-weight: var(--peso-normal); opacity: 0.8; }
@keyframes urgencia-tique { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -14deg; } 84% { rotate: 12deg; } 92% { rotate: -6deg; } }

/* Rascunho vazio: a linha recua (fundo apagado, placa esmaecida) e o selo tracejado. */
.registros--operacionais > .registro.registro--vazio { background: var(--cor-superficie-sutil); }
.registros--operacionais > .registro.registro--vazio > .placa { opacity: 0.6; }
.selo.selo--vazio { border-style: dashed; background: transparent; }

/* O que falta para emitir: o número numa pílula âmbar; mouse ou foco abrem a conferência. */
.pendencias-linha { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.pendencias-linha:is(:hover, :focus-within) { z-index: var(--z-linha-acoes); }
.pendencias-linha__gatilho { display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-05) var(--esp-2); border: 1px solid var(--cor-aviso-borda); border-radius: var(--raio-pilula); background: var(--cor-aviso-fundo); color: var(--cor-aviso); font-size: var(--texto-xs); font-weight: var(--peso-semi); line-height: var(--altura-linha-justa); text-decoration: none; white-space: nowrap; transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.pendencias-linha:is(:hover, :focus-within) .pendencias-linha__gatilho { border-color: var(--cor-aviso); }
.pendencias-linha__painel { position: absolute; top: calc(100% + var(--esp-2)); left: 0; display: grid; gap: var(--esp-2); width: max-content; max-width: min(26rem, 80vw); padding: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); box-shadow: var(--sombra-3); opacity: 0; visibility: hidden; translate: 0 var(--esp-1); transition: opacity var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao), visibility 0s linear var(--duracao-rapida); }
/* Ponte invisível entre a pílula e o painel: o mouse atravessa sem fechar. */
.pendencias-linha__painel::before { content: ""; position: absolute; inset: calc(-1 * var(--esp-2)) 0 100%; }
.pendencias-linha:is(:hover, :focus-within) .pendencias-linha__painel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.pendencias-linha__titulo { font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.pendencias-linha__itens { display: grid; gap: var(--esp-05); }
.pendencias-linha__itens > a { display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-1) var(--esp-2); border-radius: var(--raio-sm); color: var(--cor-texto); font-size: var(--texto-sm); font-weight: var(--peso-normal); line-height: var(--altura-linha-justa); text-decoration: none; white-space: normal; transition: background-color var(--duracao-rapida) var(--curva-padrao); }
.pendencias-linha__itens > a:hover { background: var(--cor-marca-fundo); }
.pendencias-linha__itens > a > .icone { flex: none; margin-top: 2px; color: var(--cor-aviso); }

.registros--operacionais .registro-operacional .registro__agenda { align-items: center; }

/* Viagem em andamento: a estrada (as faixas correm) com a viatura onde a viagem está. */
.estrada-linha { position: relative; z-index: 1; display: inline-block; flex: none; width: 9rem; height: 1.25rem; --progresso-estrada: 0%; }
.estrada-linha::before { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; translate: 0 -50%; background: repeating-linear-gradient(to right, var(--cor-borda-forte) 0 6px, transparent 6px 10px); animation: estrada-correr 0.7s linear infinite; }
.estrada-linha__feito { position: absolute; top: 50%; left: 0; width: var(--progresso-estrada); height: 2px; border-radius: 1px; translate: 0 -50%; background: linear-gradient(to right, var(--cor-marca-borda), var(--cor-marca)); }
.estrada-linha > .estrada-linha__viatura { position: absolute; top: 50%; left: clamp(0rem, calc(var(--progresso-estrada) - 0.5rem), calc(100% - 1.25rem)); padding: 0 2px; box-sizing: content-box; background: var(--cor-superficie); color: var(--cor-marca-texto); translate: 0 -50%; animation: viatura-sacudir 0.5s ease-in-out infinite alternate; }
@keyframes estrada-correr { from { background-position: 0 0; } to { background-position: -10px 0; } }
.estrada-linha[data-progresso="10"] { --progresso-estrada: 10%; }
.estrada-linha[data-progresso="20"] { --progresso-estrada: 20%; }
.estrada-linha[data-progresso="30"] { --progresso-estrada: 30%; }
.estrada-linha[data-progresso="40"] { --progresso-estrada: 40%; }
.estrada-linha[data-progresso="50"] { --progresso-estrada: 50%; }
.estrada-linha[data-progresso="60"] { --progresso-estrada: 60%; }
.estrada-linha[data-progresso="70"] { --progresso-estrada: 70%; }
.estrada-linha[data-progresso="80"] { --progresso-estrada: 80%; }
.estrada-linha[data-progresso="90"] { --progresso-estrada: 90%; }
.estrada-linha[data-progresso="100"] { --progresso-estrada: 100%; }

/* Total de diárias do mês no cabeçalho do grupo, à direita. */
.registros__grupo-total { display: inline-flex; align-items: center; gap: var(--esp-1); margin-left: auto; font-size: var(--texto-sm); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.registros__grupo-total > .icone { color: var(--cor-marca-texto); }
.registros__grupo-total small { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
/* Com a conferência aberta, a linha passa por cima das vizinhas (senão a de baixo cobre o painel). */
.registros--operacionais > .registro:has(.pendencias-linha:is(:hover, :focus-within)) { position: relative; z-index: calc(var(--z-linha-acoes) + 1); }
/* No hover, a sombra do cartão soma com o filete de urgência (não o apaga). */
.registros--operacionais > .registro.registro-operacional.registro--urgente-aviso:is(:hover, :focus-within) { box-shadow: inset var(--filete) 0 0 var(--cor-aviso-solida), var(--sombra-2); }
.registros--operacionais > .registro.registro-operacional.registro--urgente-perigo:is(:hover, :focus-within) { box-shadow: inset var(--filete) 0 0 var(--cor-perigo-solida), var(--sombra-2); }
/* "Filtrando por" e a faixa de atenção não se encostam. */
.filtros-ativos + .atencao-lista,
.refino + .atencao-lista { margin-top: var(--esp-3); }
/* Planos: a coluna da direita lista o atendimento (atividades, horário, eventos, diárias),
   alinhada à esquerda como as outras colunas de dados. */
.registro-operacional__conferencia.registro-operacional__conferencia--plano { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--esp-1); }
.registro-operacional__conferencia--plano .registro__meta-item { justify-content: flex-start; }
/* Planos: a coluna Atendimento tem frase (atividades · horário): mais larga que a das
   diárias das outras listas e, se ainda assim faltar espaço, reticências — nunca por baixo
   do ⋮. */
@media (min-width: 1280px) {
  .registros--operacionais > .registro.registro-operacional:has(> .registro-operacional__conferencia--plano) { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) var(--altura-controle); }
}
.registro-operacional__conferencia--plano { min-width: 0; }
.registro-operacional__conferencia--plano .registro__meta-item { max-width: 100%; min-width: 0; }
.registro-operacional__conferencia--plano .registro__meta-texto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Planos: no máximo 3 linhas por coluna — a linha do período não quebra; o programa
   (longo) encolhe com reticências e o nome inteiro fica no title. */
@media (min-width: 1280px) {
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda { flex-wrap: nowrap; min-width: 0; }
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda > .registro__meta-item { flex: 0 1 auto; min-width: 0; }
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda > .registro__meta-item--periodo,
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda > .pendencias-linha,
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda > .estrada-linha { flex: none; }
  .registro:has(> .registro-operacional__conferencia--plano) .registro__agenda .registro__meta-texto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (min-width: 1280px) {
  .registro:has(> .registro-operacional__conferencia--plano) .estrada-linha { width: 5.5rem; }
}

/* =============== Listas: leitura de relance =============== */
/* Placa clara enquanto o documento não saiu (rascunho, não gerado, sem via assinada, viagem
   em preparação); a grafite fica para o que já é oficial. */
.registros--operacionais > .registro.registro--rascunho > .placa { background: var(--cor-superficie-realce); box-shadow: inset 0 0 0 1px var(--cor-borda); }
.registros--operacionais > .registro.registro--rascunho > .placa .placa__numero { color: var(--cor-texto); }
.registros--operacionais > .registro.registro--rascunho > .placa .identidade-documental__rotulo,
.registros--operacionais > .registro.registro--rascunho > .placa .identidade-documental__complemento { color: var(--cor-texto-secundario); }

/* Equipe: até três iniciais empilhadas antes dos nomes (o motorista em grafite). */
.avatares-mini { display: inline-flex; flex: none; align-items: center; }
.avatares-mini__avatar { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: var(--raio-pilula); background: var(--cor-superficie-realce); box-shadow: 0 0 0 2px var(--cor-superficie); color: var(--cor-texto-secundario); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: 0; }
.avatares-mini__avatar + .avatares-mini__avatar { margin-left: calc(-1 * var(--esp-1)); }
.avatares-mini__avatar--escuro { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.registro:hover .avatares-mini__avatar { box-shadow: 0 0 0 2px var(--cor-superficie); }
.avatares-mini { padding-left: 2px; }
.avatares-mini__avatar + .avatares-mini__avatar { margin-left: -2px; }