/* =============== Padrões operacionais (pacote operacional.css) =============== */
/* Identidade documental, mesa de registro, coleção operacional, preparação de registro e
   estação de edição — o vocabulário das telas migradas. Vem logo depois de components.css
   (base_documento.html), na mesma ordem da cascata; a Central e o Painel de Viagens não o
   carregam (orçamento de desempenho — docs/quality/performance-budgets.md). */

/* Identidade documental e leitura dos metadados — padrões compartilhados. */

.identidade-documental {
  display: grid;
  flex: none;
  gap: var(--esp-1);
}

.resumo__sobretitulo,
.identidade-documental__rotulo {
  margin: 0 0 var(--esp-1);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
}

.identidade-documental__numero {
  color: var(--cor-texto);
  font-size: var(--texto-4xl);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-justa);
  letter-spacing: var(--rastreio-display);
  font-variant-numeric: tabular-nums;
}

.identidade-documental__numero--cancelado { text-decoration: line-through; }
.identidade-documental--compacta .identidade-documental__numero { font-size: var(--texto-xl); }
.identidade-documental--compacta .identidade-documental__rotulo { margin: 0; color: var(--cor-marca-texto); }
.identidade-documental--placa { align-items: center; justify-content: center; gap: var(--esp-1); width: calc(var(--esp-4) * 8); padding: var(--esp-3); border-radius: var(--raio-md); background: var(--cor-primaria); text-align: center; }
.identidade-documental--placa .identidade-documental__rotulo { color: var(--cor-texto-inverso-sutil); }
.identidade-documental--placa .identidade-documental__numero,
.identidade-documental--placa .placa__numero { color: var(--cor-texto-inverso); font-size: var(--texto-xl); }

/* Metadados de leitura: rótulo discreto, valor íntegro e separação por filetes. */
.metadados > .metadado { min-width: 0; padding-bottom: var(--esp-2); border-bottom: var(--borda); }
.metadado dt { margin-bottom: var(--esp-1); color: var(--cor-texto-secundario); font-size: var(--texto-xs); font-weight: var(--peso-medio); }
.metadado dd { margin: 0; color: var(--cor-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.resumo__definicoes.metadados > .metadado dt { text-transform: none; letter-spacing: normal; font-size: var(--texto-xs); }
.resumo__definicoes.metadados > .metadado dd { font-weight: var(--peso-semi); }

.grade.conferencia-valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
  border: var(--borda);
  overflow: hidden;
}
.grade.conferencia-valores.conferencia-valores--vertical { grid-template-columns: minmax(0, 1fr); }

.conferencia-valores .indicador {
  padding: var(--esp-4) var(--esp-5);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  container-type: normal;
}

.conferencia-valores .indicador + .indicador { border-left: var(--borda); }
.conferencia-valores--vertical .indicador + .indicador { border-left: 0; border-top: var(--borda); }
.conferencia-valores .indicador--atencao { padding: var(--esp-5); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.conferencia-valores .indicador--atencao .indicador__rotulo,
.conferencia-valores .indicador--atencao .indicador__nota { color: var(--cor-texto-inverso-sutil); }
.conferencia-valores .indicador--atencao .icone { color: var(--shell-filete-claro); }
.conferencia-valores .indicador--atencao .indicador__valor { color: var(--cor-texto-inverso); font-size: var(--texto-3xl); }
.grade.conferencia-valores .indicador--compacto .indicador__valor { white-space: normal; overflow-wrap: anywhere; font-size: var(--texto-lg); }

.pessoas--faixa { gap: var(--esp-4); }
.pessoas--faixa > .pessoa { padding: var(--esp-3) 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }

@media (max-width: 767.98px) {

  .identidade-documental__numero { font-size: var(--texto-3xl); }

  .pessoas--faixa { gap: 0; }
  .pessoas--faixa > .pessoa { border-bottom: var(--borda-sutil); }
  .pessoas--faixa > .pessoa:last-child { border-bottom: 0; }
  .grade.conferencia-valores { grid-template-columns: minmax(0, 1fr); }
  .conferencia-valores .indicador + .indicador { border-left: 0; border-top: var(--borda); }

}

/* Padrões documentais compartilhados: identidade, folha contínua e ações.
   As variantes só se aplicam quando solicitadas pelo template consumidor. */
.pagina-cabecalho.pagina-cabecalho--documental {
  align-items: center;
  gap: var(--esp-6);
  padding-bottom: var(--esp-6);
  border-bottom: var(--borda);
}
.pagina-cabecalho--documental .identidade-documental { padding-right: var(--esp-6); border-right: var(--borda); }
.pagina-cabecalho--documental .pagina-cabecalho__titulo { font-size: var(--texto-4xl); letter-spacing: var(--rastreio-display); }
.pagina-cabecalho--documental .frase-oficio { margin-top: var(--esp-3); gap: var(--esp-2) var(--esp-4); }
.pagina--documental [data-status-salvamento] { padding: var(--esp-3) var(--esp-4); border-left: var(--filete-fino) solid var(--cor-marca); background: var(--cor-superficie-sutil); }
.documento.documento--continuo { padding: 0; border: var(--borda); box-shadow: var(--sombra-2); }
.documento.documento--continuo > .secao { padding: var(--esp-8); border-top: var(--borda); }
.documento.documento--continuo > .secao:first-child,
.documento.documento--continuo > .documento__guia + .secao { border-top: 0; }
.documento--continuo .secao__cabecalho { margin-bottom: var(--esp-6); }
.documento--continuo .secao__titulo { font-size: var(--texto-2xl); letter-spacing: var(--rastreio-titulo); }
.documento--continuo .secao__numero { width: var(--esp-8); height: var(--esp-8); font-size: var(--texto-sm); background: var(--cor-superficie-sutil); }
.documento--continuo .secao__bloco { padding-top: var(--esp-6); margin-top: var(--esp-6); }
.documento--continuo .secao__bloco-titulo { font-size: var(--texto-sm); }
.barra-acoes.barra-acoes--documental { border: var(--borda); border-top: var(--filete-fino) solid var(--cor-marca); border-radius: var(--raio-lg); }

@media (max-width: 767.98px) {
  .pagina-cabecalho.pagina-cabecalho--documental { gap: var(--esp-4); padding-bottom: var(--esp-5); }
  .pagina-cabecalho--documental .identidade-documental { width: 100%; border: 0; }
  .pagina-cabecalho--documental .pagina-cabecalho__titulo { font-size: var(--texto-3xl); }
  .documento.documento--continuo > .secao { padding: var(--esp-5); }
  .documento--continuo .secao__cabecalho { gap: var(--esp-3); margin-bottom: var(--esp-5); }
  .documento--continuo .secao__estado { justify-content: flex-start; }
}

/* Mesa de registro oficial — composição DETAIL com estação documental. */
/* Altura do conteúdo, até a da tela (aí o corpo rola): um resumo curto não fica com um vão branco embaixo. */
dialog.dialogo--mesa { width: min(86rem, calc(100vw - 2 * var(--esp-5))); height: fit-content; max-height: calc(100dvh - 2 * var(--esp-5)); }
/* A mesa ampla entra sem deslocar seus alvos sob o ponteiro. A saída mantém o
   contrato do diálogo; duração também obedece ao movimento reduzido dos tokens. */
dialog.dialogo--mesa[open]:not(.dialogo--saindo) { animation: aparecer var(--duracao-instantanea) var(--curva-padrao); }
dialog.dialogo--mesa::backdrop { backdrop-filter: none; animation: none; }
dialog.dialogo--mesa.dialogo--saindo { animation: recolher var(--duracao-instantanea) var(--curva-saida) forwards; }











/* Título e selos dividem a mesma linha: o estado pertence ao nome do registro. */

.registro-hero .dialogo__linha-selos { margin: 0; padding: 0; border: 0; gap: var(--esp-2); }
.registro-hero .dialogo__linha-selos > .texto-secundario { font-size: var(--texto-xs); }
/* Sobre o cabeçalho escuro o selo não carrega fundo claro: vira contorno de luz, e quem
   diz o estado é a FORMA do marcador (anel, ✓, ×) e o texto, como no claro. */

/* O primeiro selo é a SITUAÇÃO (único com contorno); os seguintes são circunstância (prazo,
   tipo, arquivado) e viram texto com ícone — informam sem disputar com o título. */
.registro-hero .dialogo__linha-selos > .selo ~ .selo { --selo-borda: transparent; --selo-texto: var(--cor-texto-inverso-sutil); padding-inline: 0; }


/* O cabeçalho oficial também abre páginas operacionais. O modal mantém a variante original. */
/* Sem fita dourada no topo: o cabeçalho escuro já se impõe sozinho. */







.registro-valor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); align-items: center; gap: var(--esp-3) var(--esp-6); padding-block: var(--esp-4); border-bottom: var(--borda-sutil); }
.registro-valor__identidade { display: grid; justify-items: start; gap: var(--esp-1); min-width: 0; overflow-wrap: anywhere; }
.registro-valor > .campo { min-width: 0; }
@media (max-width: 599.98px) {
  .registro-valor { grid-template-columns: minmax(0, 1fr); }
}


/* Coleção operacional: índice de recortes + superfície de busca + registros oficiais.
   O índice preserva os links/contadores OOB; nenhum dado ou pedido adicional. */
.colecao-operacional__layout { display: grid; gap: var(--esp-5); align-items: start; }
.colecao-operacional__indice { min-width: 0; }
.colecao-operacional__rotulo { color: var(--cor-texto-secundario); font-size: var(--texto-2xs); margin: 0 0 var(--esp-3); }
.colecao-operacional__indice .abas { border: 0; margin: 0; gap: var(--esp-1); }
.colecao-operacional__indice .aba { border-radius: var(--raio-md); padding: var(--esp-3); font-size: var(--texto-sm); }
.colecao-operacional__indice .aba[aria-current="page"] { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.colecao-operacional__indice .aba[aria-current="page"] .aba__contagem { background: var(--luz-16); color: var(--cor-texto-inverso); }
.colecao-operacional__indice .aba::after { display: none; }
.colecao-operacional__painel { min-width: 0; }
/* A consulta curta termina com suas ações, sem empurrar o rodapé pela viewport. */
.conteudo:has(> .colecao-operacional--consulta) { min-height: 0; }
.colecao-operacional--consulta { flex: none; padding-bottom: var(--esp-6); }
.colecao-operacional--consulta .registro-hero--pagina { padding: var(--esp-4) var(--esp-6); margin-bottom: var(--esp-4); }
.colecao-operacional--consulta > .registro-hero--pagina .registro-hero__conteudo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-6); align-items: center; }
.colecao-operacional--consulta > .registro-hero--pagina .registro-hero__rotulo { grid-column: 1 / -1; }
.colecao-operacional--consulta > .registro-hero--pagina .registro-hero__titulo { font-size: var(--texto-3xl); }
.colecao-operacional--consulta > .registro-hero--pagina .registro-hero__complemento { margin: 0; justify-self: end; }
.colecao-operacional--consulta .colecao-operacional__layout { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.colecao-operacional--consulta .colecao-operacional__indice { position: static; padding: 0; }
.colecao-operacional--consulta .colecao-operacional__rotulo { display: block; margin-bottom: var(--esp-2); }
.colecao-operacional__grupo { margin-top: var(--esp-3); }
.colecao-operacional--consulta .colecao-operacional__indice .abas { display: flex; gap: var(--esp-1); overflow-x: auto; padding-bottom: var(--esp-1); }
.colecao-operacional--consulta .colecao-operacional__indice .aba { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: var(--altura-controle); padding: var(--esp-2) var(--esp-3); white-space: nowrap; font-size: var(--texto-xs); }
/* Barra das listas: acompanha a rolagem presa à borda de baixo da tela (cantos de cima arredondados, sombra) e, no
   fim da lista, vira um cartão com os quatro cantos — barra-grudada.js marca `data-grudada` enquanto está presa. */
.barra-acoes.barra-acoes--colecao { position: sticky; bottom: 0; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4); box-shadow: none; border: var(--borda-sutil); border-radius: var(--raio-lg); }
.barra-acoes.barra-acoes--colecao[data-grudada] { border-radius: var(--raio-lg) var(--raio-lg) 0 0; box-shadow: var(--sombra-1); }
@media (min-width: 1024px) {
  .colecao-operacional--consulta .colecao-operacional__indice .abas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .colecao-operacional--consulta .colecao-operacional__indice .aba { justify-content: space-between; }
}
@media (max-width: 767.98px) {
  .colecao-operacional--consulta .registro-hero--pagina { padding: var(--esp-4); }
  .colecao-operacional--consulta > .registro-hero--pagina .registro-hero__conteudo { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }
  .colecao-operacional--consulta > .registro-hero--pagina .registro-hero__complemento { justify-self: start; }
}
.colecao-operacional .filtros--barra { padding: var(--esp-4); background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-lg); margin-bottom: var(--esp-4); }
/* Conjunto de filtros (Ofícios): as abas de recorte viram o topo do mesmo cartão da busca, em vez de
   uma fileira solta acima dele. A barra perde a própria moldura; o cartão é do conjunto. */
.colecao-operacional .filtro-conjunto { background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-lg); margin-bottom: var(--esp-4); }
/* Sem overflow no conjunto: a gaveta de Filtros é absoluta e precisa sair do cartão. Os cantos de cima são das abas. */
.colecao-operacional .filtro-conjunto > .abas { border-radius: var(--raio-lg) var(--raio-lg) 0 0; padding-inline: var(--esp-3); background: var(--cor-superficie-sutil); scrollbar-width: none; }
.colecao-operacional .filtro-conjunto > .abas::-webkit-scrollbar { display: none; }
.colecao-operacional .filtro-conjunto > .abas .aba { flex: none; min-height: var(--altura-controle); font-size: var(--texto-sm); }
.colecao-operacional .filtro-conjunto > .filtros--barra { margin: 0; border: 0; border-radius: 0; background: transparent; }
/* Listas com o cartão do arquétipo (cadastros, eventos, imprensa…): as abas são o topo do próprio cartão. */
.cartao > .abas:first-child { margin: 0; padding-inline: var(--esp-3); background: var(--cor-superficie-sutil); border-bottom: var(--borda); border-radius: var(--raio-lg) var(--raio-lg) 0 0; scrollbar-width: none; }
.cartao > .abas:first-child::-webkit-scrollbar { display: none; }
.cartao > .abas:first-child .aba { flex: none; min-height: var(--altura-controle); font-size: var(--texto-sm); }
/* Mês do grupo: preso sob o topo enquanto o grupo rola, numa faixa da cor da página (os cartões passam por baixo).
   Nome do mês legível (sem caixa alta miúda), filete dourado e a contagem numa pílula com borda. */
.colecao-operacional .registros__grupo { position: sticky; top: var(--altura-topo); z-index: var(--z-grupo-lista); gap: var(--esp-3); margin-inline: calc(-1 * var(--esp-1)); padding: var(--esp-3) var(--esp-2); border: 0; background: var(--cor-fundo); font-size: var(--texto-sm); font-weight: var(--peso-semi); letter-spacing: 0; text-transform: none; }
.colecao-operacional .registros__grupo::before { height: 1rem; }
.colecao-operacional .registros__grupo > span:first-of-type::first-letter { text-transform: uppercase; }
.colecao-operacional .registros__grupo-conta { padding: var(--esp-05) var(--esp-2); border: var(--borda-sutil); background: var(--cor-superficie); font-size: var(--texto-xs); font-weight: var(--peso-medio); }
.colecao-operacional .registros--operacionais { display: grid; gap: var(--esp-2); }

/* Registro reutilizável. Os quatro blocos têm hierarquia própria, sem cabeçalho de tabela. */
.registros--operacionais > .registro.registro-operacional {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identidade acoes" "titulo titulo" "estado estado" "agenda agenda" "recursos recursos" "conferencia conferencia";
  gap: var(--esp-3); padding: var(--esp-4); border: var(--borda); border-radius: var(--raio-lg); background: var(--cor-superficie); align-items: start;
}
.registros--operacionais .registro-operacional > .placa { grid-area: identidade; align-self: center; padding: var(--esp-3); min-width: 0; width: calc(var(--esp-4) * 8); border: 0; border-radius: var(--raio-md); background: var(--cor-primaria); box-shadow: none; }
.registro-operacional > .placa .identidade-documental__rotulo { color: var(--cor-texto-inverso-sutil); font-size: var(--texto-2xs); }
.registro-operacional > .placa .placa__numero { color: var(--cor-texto-inverso); font-size: var(--texto-xl); }
.registro-operacional > .placa .identidade-documental { gap: var(--esp-1); }
.identidade-documental__complemento { font-size: var(--texto-xs); font-weight: var(--peso-medio); line-height: var(--altura-linha-justa); overflow-wrap: anywhere; }
.registro-operacional > .placa .identidade-documental__complemento { color: var(--cor-texto-inverso-sutil); }
.registros--operacionais .registro-operacional .registro__texto { grid-column: 1 / -1; }
.registros--operacionais .registro-operacional .registro__corpo,
.registros--operacionais .registro-operacional .registro__titulo { display: contents; }
.registros--operacionais .registro-operacional .registro__link { grid-area: titulo; min-width: 0; width: auto; }
/* Destino em uma linha só: quando não cabe, corta com reticências (o título completo fica
   no `title` do link e o "+N" já avisa que há mais destinos). */
.registros--operacionais .registro-operacional .registro__link-texto { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--texto-lg); line-height: var(--altura-linha-justa); }
.registros--operacionais .registro-operacional .registro__selos { grid-area: estado; display: flex; flex-wrap: wrap; gap: var(--esp-1); min-width: 0; }
.registro-operacional .registro__selos .selo { max-width: none; }
.registros--operacionais .registro-operacional .registro__agenda { grid-area: agenda; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin: 0; }
.registros--operacionais .registro-operacional .registro__agenda > .registro__meta-item { grid-area: auto; display: inline-flex; }
.registro-operacional__recursos { grid-area: recursos; min-width: 0; display: grid; gap: var(--esp-1); border-top: var(--borda-sutil); padding-top: var(--esp-3); }
.registro-operacional__recursos > .registro__meta-item,
.registro-operacional__recursos > .menu,
.registro-operacional__conferencia > .registro__meta-item { grid-area: auto; }
.registros--operacionais .registro-operacional .registro__meta-item { min-width: 0; margin: 0; font-size: var(--texto-xs); }
.registros--operacionais .registro-operacional .registro__meta-item > .icone { display: inline; flex: none; }
.registros--operacionais .registro-operacional .registro__meta-item--equipe { border: 0; padding: 0; }
.registros--operacionais .registro-operacional .registro__meta-texto { height: auto; line-height: var(--altura-linha); }
/* A conferência reserva espaço para o valor inteiro, sem contenção intrínseca. */
.registro-operacional__conferencia { grid-area: conferencia; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--esp-1) var(--esp-3); border-top: var(--borda); padding-top: var(--esp-3); align-items: center; }
.registros--operacionais .registro-operacional .registro__meta-item--diarias { text-align: right; justify-content: end; }
.registros--operacionais .registro-operacional .registro__meta-item--diarias > .icone { display: none; }
/* Dinheiro não quebra linha: "R$ 101.956,56" e "18 × 100% + 1 × 15%" ficam inteiros, cada
   um na sua linha, e a coluna reserva o espaço de que precisam. */
.registros--operacionais .registro-operacional .registro__meta-item--diarias .registro__meta-texto { display: grid; justify-items: end; white-space: nowrap; gap: var(--esp-1); }
.registros--operacionais .registro-operacional .registro__valor { font-size: var(--texto-md); color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.registros--operacionais .registro-operacional .registro__meta-detalhe { display: block; white-space: normal; font-size: var(--texto-2xs); text-align: right; }
.registro-operacional .registro__meta-separador { display: none; }
.registros--operacionais .registro-operacional > .registro__acoes { grid-area: acoes; align-self: center; justify-self: end; }
.botao.botao--menu-registro { width: var(--altura-controle); min-height: var(--altura-controle); color: var(--cor-texto-secundario); border-radius: var(--raio-md); }
.botao--menu-registro:not(:disabled):hover, .botao--menu-registro[aria-expanded="true"] { background: var(--cor-superficie-realce); color: var(--cor-texto); }
.botao--menu-registro:focus-visible { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-offset); }

@media (min-width: 768px) {
  .registros--operacionais > .registro.registro-operacional { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1fr) calc(var(--esp-16) * 2.5) var(--altura-controle); grid-template-areas: "identidade titulo conferencia acoes" "identidade estado conferencia acoes" "identidade agenda conferencia acoes" "identidade recursos recursos acoes"; gap: var(--esp-2) var(--esp-4); }
  /* O filete separa as colunas de ponta a ponta: a conferência estica na altura do cartão,
     senão em registros curtos ("Sem diárias") a fita vira um traço solto no meio. */
  .registro-operacional__conferencia { align-self: stretch; align-content: center; border-top: 0; border-left: var(--filete-fino) solid var(--cor-marca-borda); padding: 0 0 0 var(--esp-3); display: grid; grid-template-columns: 1fr; gap: var(--esp-2); }
  .registro-operacional__recursos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .colecao-operacional__layout { grid-template-columns: calc(var(--esp-12) * 4) minmax(0, 1fr); gap: var(--esp-6); }
  .colecao-operacional__indice { position: sticky; top: calc(var(--altura-topo) + var(--esp-5)); padding-top: var(--esp-4); }
  .colecao-operacional__indice .abas { display: grid; overflow: visible; }
  .colecao-operacional__indice .aba { display: flex; white-space: normal; justify-content: space-between; gap: var(--esp-2); line-height: var(--altura-linha-justa); min-height: var(--alvo-minimo); }
  .colecao-operacional__indice .aba__contagem { flex: none; }
}
@media (min-width: 1280px) {
  .registros--operacionais > .registro.registro-operacional { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1.3fr) minmax(0, 1fr) calc(var(--esp-16) * 2.5) var(--altura-controle); grid-template-areas: "identidade titulo recursos conferencia acoes" "identidade estado recursos conferencia acoes" "identidade agenda recursos conferencia acoes"; gap: var(--esp-2) var(--esp-4); }
  /* Equipe e transporte no meio da altura do cartão, não colado ao topo da linha. */
  .registro-operacional__recursos { display: grid; grid-template-columns: 1fr; border-top: 0; padding-top: 0; align-self: center; }
}
@media (max-width: 767px) {
  
  
  
  
  .colecao-operacional__rotulo { display: none; }
  .colecao-operacional__layout { gap: var(--esp-3); }
  .colecao-operacional__indice .aba { padding: var(--esp-2) var(--esp-3); }
  .colecao-operacional .filtros--barra { padding: var(--esp-3); }
  .registros--operacionais > .registro.registro-operacional { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "identidade acoes" "titulo titulo" "estado estado" "agenda conferencia" "recursos recursos"; gap: var(--esp-2) var(--esp-3); }
  .registros--operacionais .registro-operacional > .placa { width: calc(var(--esp-4) * 8); min-width: 0; padding: var(--esp-2) var(--esp-3); }
  .registros--operacionais .registro-operacional .placa__numero { font-size: var(--texto-lg); }
  .registros--operacionais .registro-operacional .registro__selos { justify-content: start; }
  .botao.botao--menu-registro { width: var(--altura-controle-lg); min-height: var(--altura-controle-lg); background: var(--cor-superficie-sutil); }
  .registros--operacionais .registro-operacional .registro__agenda { display: grid; gap: var(--esp-1); }
  .registros--operacionais .registro-operacional .registro__meta-item--periodo .registro__meta-texto { white-space: normal; }
  .registro-operacional__conferencia { border: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--esp-1); justify-items: end; }
  .registro-operacional__recursos { padding-top: var(--esp-2); }
}
/* Preparação de registro: índice e seções editoriais reutilizáveis. */
.barra-acoes.barra-acoes--registro { bottom: 0; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-lg); }
/* Presa à borda de baixo da tela (barra-grudada.js): encosta na borda, só os cantos de cima arredondados. */
.barra-acoes.barra-acoes--registro[data-grudada] { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
.barra-acoes.barra-acoes--fluxo { position: static; margin-top: var(--esp-5); border-radius: var(--raio-lg); }
/* O índice fica no fluxo (não acompanha a rolagem) e traz no pé uma barra com o quanto da
   preparação já fechou: seções com estado + a revisão. */
.indice-preparacao { position: relative; display: flex; gap: var(--esp-1); padding: var(--esp-1) var(--esp-1) calc(var(--esp-1) + var(--filete-fino)); margin-bottom: var(--esp-4); overflow-x: auto; scrollbar-width: thin; background: var(--cor-superficie-realce); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }
.indice-preparacao::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--filete-fino); width: var(--progresso-preparacao, 0%); border-radius: var(--raio-pilula); background: var(--cor-marca); transition: width var(--duracao-media) var(--curva-padrao); }
.indice-preparacao--p0 { --progresso-preparacao: 0%; }
.indice-preparacao--p1 { --progresso-preparacao: 10%; }
.indice-preparacao--p2 { --progresso-preparacao: 20%; }
.indice-preparacao--p3 { --progresso-preparacao: 30%; }
.indice-preparacao--p4 { --progresso-preparacao: 40%; }
.indice-preparacao--p5 { --progresso-preparacao: 50%; }
.indice-preparacao--p6 { --progresso-preparacao: 60%; }
.indice-preparacao--p7 { --progresso-preparacao: 70%; }
.indice-preparacao--p8 { --progresso-preparacao: 80%; }
.indice-preparacao--p9 { --progresso-preparacao: 90%; }
.indice-preparacao--p10 { --progresso-preparacao: 100%; background: var(--cor-sucesso-fundo); }
.indice-preparacao--p10::after { background: var(--cor-sucesso); }
@media (prefers-reduced-motion: reduce) { .indice-preparacao::after { transition: none; } }
.indice-preparacao__item { display: flex; align-items: center; justify-content: center; flex: 1; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); min-height: var(--altura-controle); border: var(--filete-fino) solid transparent; border-radius: var(--raio-md); background: transparent; color: var(--cor-texto-secundario); font-size: var(--texto-sm); font-weight: var(--peso-semi); white-space: nowrap; text-decoration: none; box-shadow: none; }
.indice-preparacao__item::before { content: ""; width: var(--esp-2); height: var(--esp-2); border: var(--filete-fino) solid currentColor; border-radius: var(--raio-pilula); flex: none; }
.indice-preparacao__item:hover { background: var(--cor-superficie); color: var(--cor-texto); }
.indice-preparacao__item:active { background: var(--cor-superficie-sutil); }
.indice-preparacao__item:focus-visible { outline: none; box-shadow: var(--anel-foco-interno); }
.indice-preparacao__item[aria-current="location"] { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.indice-preparacao__item[aria-current="location"]:focus-visible { --foco-cor: var(--foco-cor-inverso); }
.indice-preparacao__numero { color: var(--cor-texto-secundario); }
.indice-preparacao__item--ok::before { border: 0; border-radius: 0; background: currentColor; width: var(--esp-3); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%); }
.indice-preparacao__item--erro { color: var(--cor-perigo); }
.pendencia { display: flex; align-items: start; gap: var(--esp-2); min-width: 0; padding: var(--esp-2) var(--esp-3); border-left: var(--filete) solid var(--cor-borda-forte); background: var(--cor-superficie-sutil); color: var(--cor-texto-secundario); font-size: var(--texto-xs); line-height: var(--altura-linha); }
.pendencia--bloqueante { border-color: var(--cor-aviso-borda); background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.pendencia > .icone { flex: none; margin-top: var(--esp-05); }
/* Pendência no cabeçalho do bloco (Transporte, Equipe): vira pílula da altura do próprio
   cabeçalho — avisa sem empurrar a linha e sem desalinhar a coluna vizinha. */
.secao__bloco-cabecalho .pendencia { align-items: center; min-height: var(--altura-controle-sm); padding: 0 var(--esp-3); border-left: 0; border-radius: var(--raio-pilula); }
/* Transporte: tudo na linha do título — o aviso encostado nele e o interruptor na ponta
   direita. `contents` tira a caixa intermediária do caminho sem mexer no HTML. */
pc-transporte > .secao__bloco-cabecalho > .secao__estado { display: contents; }
pc-transporte > .secao__bloco-cabecalho > .secao__estado > .interruptor { margin-left: auto; }
.secao__bloco-cabecalho .pendencia > .icone { margin-top: 0; }
.secao__bloco-cabecalho .pendencia--bloqueante { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
/* Estado vazio da equipe e o cartão do motorista de fora ficam lado a lado: mesma altura
   mínima, para as duas colunas fecharem na mesma linha. */
.pessoa-externa { display: grid; align-content: center; min-height: calc(var(--esp-16) + var(--esp-3)); margin-top: var(--esp-4); border: var(--borda); border-radius: var(--raio-md); background: var(--cor-superficie-sutil); }
.equipe__vazia { min-height: calc(var(--esp-16) + var(--esp-3)); }
.divulgacao.pessoa-externa > summary { display: flex; width: 100%; gap: var(--esp-3); padding: var(--esp-3); color: var(--cor-texto); }
.pessoa-externa__marca { display: grid; place-items: center; width: var(--altura-controle); height: var(--altura-controle); flex: none; background: var(--cor-superficie-realce); border-radius: var(--raio-md); color: var(--cor-marca-texto); }
.pessoa-externa__texto { display: grid; min-width: 0; gap: var(--esp-1); }
.pessoa-externa__titulo { font-size: var(--texto-sm); font-weight: var(--peso-semi); }
.pessoa-externa__descricao { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.pessoa-externa__seta { margin-left: auto; flex: none; }
.divulgacao.pessoa-externa[open] > summary .icone { transform: none; }
.divulgacao.pessoa-externa[open] > summary .pessoa-externa__seta { transform: rotate(180deg); }
.pessoa-externa > summary:hover { background: var(--cor-superficie-realce); border-radius: var(--raio-md); }
.pessoa-externa > summary:focus-visible { outline-offset: var(--foco-offset); border-radius: var(--raio-md); }
.pessoa-externa[open] > .divulgacao__corpo { margin-top: 0; padding: var(--esp-4) var(--esp-3); border-top: var(--borda); }
/* A folha de preparação é um cartão por seção, não um documento com linha-guia: o filete
   dourado que acompanhava a leitura some (ele terminava num traço solto no pé da página). */
.documento.documento--preparacao { padding: 0; border: var(--borda); border-radius: var(--raio-lg); box-shadow: none; }
.documento--preparacao > .documento__guia { display: none; }
.documento--preparacao > .secao,
.documento--preparacao > .formulario--secoes > .secao,
.documento--preparacao > [data-previa-diarias] > .secao { padding: var(--esp-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); scroll-margin-top: var(--esp-4); }
/* Todas as seções respiram igual nos quatro lados — inclusive a primeira (que vinha com o
   topo encolhido pela linha-guia) e a última (que vinha sem base). */
.documento--preparacao > .secao:first-child,
.documento--preparacao > .documento__guia + .secao { padding-top: var(--esp-6); }
.documento--preparacao > .secao:last-child { padding-bottom: var(--esp-6); }
.documento--preparacao .secao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; margin: 0; gap: var(--esp-1) var(--esp-3); }
.documento--preparacao .secao__titulo { font-size: var(--texto-xl); letter-spacing: var(--rastreio-titulo); }
.documento--preparacao .secao__numero { background: var(--cor-primaria); color: var(--cor-texto-inverso); border-radius: var(--raio-sm); }
/* A nota explica a seção: linha própria, embaixo do título e à esquerda — nunca no meio
   da faixa nem encostada nos campos. */
.documento--preparacao .secao__nota { order: 3; flex-basis: 100%; margin: 0; font-size: var(--texto-xs); line-height: var(--altura-linha); }
/* O estado da seção ("2 pendências", "completo") anda junto do título, não na outra ponta. */
.documento--preparacao .secao__estado { justify-content: start; margin-left: 0; }
/* Pendência na mesma linha do título (pílula do tamanho da linha), só aparece depois de salvar ou de pedir para emitir. */
.documento--preparacao .secao__cabecalho .pendencia { align-items: center; padding: var(--esp-1) var(--esp-3); border-left: 0; border-radius: var(--raio-pilula); }
.documento--preparacao .secao__cabecalho .pendencia > .icone { margin-top: 0; }
.documento--preparacao .secao__cabecalho .selo { max-width: 100%; white-space: nowrap; }
.secao__conteudo { min-width: 0; }
.secao__grupo { display: grid; gap: var(--esp-5); align-items: start; }
/* Equipe e transporte andam lado a lado: os cabeçalhos dos dois blocos têm a mesma altura
   (um traz um selo, o outro um interruptor), senão os cartões de baixo saem do eixo. */
.secao__grupo > .secao__bloco > .secao__bloco-cabecalho { min-height: var(--altura-controle-sm); }
.documento--preparacao .secao__grupo > .secao__bloco { border-top: 0; padding-top: 0; margin-top: 0; }
.documento--preparacao .secao__bloco { padding-top: var(--esp-5); margin-top: var(--esp-6); }
/* O histórico fecha a folha: respiro maior para não encostar na minuta logo acima. */
.documento--preparacao #historico { margin-top: var(--esp-8); }
.documento--preparacao #historico .secao__bloco-cabecalho { margin-bottom: var(--esp-4); }
/* Cadastro da OS: a seção já é uma grade com vão entre os blocos; o bloco não soma a própria margem (o vão
   dobrava, como entre a folha e o histórico). Fica o filete com o respiro de cima. */
.documento--ordem .secao > .secao__bloco, .documento--preparacao.documento--ordem #historico { margin-top: 0; }
.documento--preparacao :where(.secao__bloco[id], #dados, #diarias-secao) { scroll-margin-top: var(--esp-4); }
.campos.campos--registro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); }
.campos--registro > .campo { min-width: 0; }
.campos--registro > .campo:nth-child(4) { grid-column: span 2; }
.campos--registro > .condicional { grid-column: 1 / -1; }
/* Duas colunas na folha, e quem sobra numa linha ímpar ocupa a linha inteira em vez de
   deixar um vão do lado. */
.pessoas--compactas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.pessoas--compactas > .pessoa:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pessoas--compactas > .pessoa { grid-column: auto; border-bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-2); }
.pessoas--compactas .equipe__acoes { display: grid; gap: var(--esp-05); margin-left: 0; opacity: 1; }
.pessoas--compactas .pessoa__nome { font-size: var(--texto-sm); }
.pessoas--compactas .pessoa__nome,
.pessoas--compactas .pessoa__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Preparação do percurso: recurso existente, sequência e mapa na mesma composição. */
/* Roteiro cadastrado: a linha inteira da seção — a origem (ou o convite) em cima, e embaixo
   o campo de busca com o botão na mesma altura. Nada de gaveta nem meia largura. */
.selecao-recurso { display: grid; gap: var(--esp-3); padding-bottom: var(--esp-5); margin-bottom: var(--esp-5); border-bottom: var(--borda-sutil); }
.selecao-recurso__contexto { min-width: 0; }
.selecao-recurso__contexto > .alerta { margin: 0; }
.selecao-recurso__titulo { display: flex; align-items: center; gap: var(--esp-2); margin: 0; font-size: var(--texto-sm); color: var(--cor-texto-secundario); }
.selecao-recurso__busca { min-width: 0; }
.selecao-recurso__controles { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-3); align-items: end; }
.selecao-recurso__controles .campo { min-width: 0; }
.selecao-recurso__controles > .botao { margin: 0; }
/* Variante de percurso: os pontos são a edição; o mapa é a conferência. */
/* Na folha do ofício: um cartão igual aos outros da folha (borda fina, fundo sutil, cantos largos), com ícone em
   ladrilho e título à esquerda e a busca à direita — campo com o rótulo na borda, como todos os campos. */
.selecao-recurso--integrada { padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-5); border: var(--borda-sutil); border-radius: var(--raio-lg); background: var(--cor-superficie-sutil); }
.selecao-recurso--integrada .selecao-recurso__controles { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: column; gap: var(--esp-2); }
.selecao-recurso__cabeca { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.selecao-recurso__marca { display: grid; place-items: center; flex: none; width: var(--altura-controle); height: var(--altura-controle); border-radius: var(--raio-md); background: var(--cor-superficie-realce); color: var(--cor-marca-texto); }
.selecao-recurso__textos { display: grid; gap: var(--esp-05); min-width: 0; }
.selecao-recurso__nome { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto); }
.selecao-recurso__descricao { font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
/* Uma linha cada (o que não couber termina em reticências, sem quebrar). */
.selecao-recurso__nome, .selecao-recurso__descricao { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itin.itin--operacional { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
.itin__planejamento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.itin--operacional .itin__bloco.itin__sequencia { grid-template-rows: auto auto; padding-top: 0; gap: var(--esp-4); }
.itin--operacional .itin__paradas { gap: var(--esp-3); align-content: start; --itin-trilho: var(--altura-controle-sm); --itin-centro: calc(var(--esp-5) + var(--altura-controle) / 2); }
.itin--operacional .itin__paradas::before { width: var(--filete-fino); background: var(--cor-borda); }
.itin--operacional .itin__local { grid-template-columns: calc(var(--esp-4) * 4.5) minmax(0, 1fr); gap: 0; }
.itin--operacional .itin__local .campo { padding-top: 0; gap: var(--esp-1); }
.itin--operacional .itin__local .campo__rotulo { position: static; display: block; transform: none; margin: 0; padding: 0; background: transparent; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__local .itin__uf .campo__rotulo { padding-left: var(--esp-2); }
.itin--operacional .itin__local :is(.entrada, .seletor__gatilho) { background-color: var(--cor-superficie-sutil); border-color: var(--cor-borda-sutil); }
.itin--operacional .itin__uf .seletor__gatilho { padding-right: var(--esp-2); }
.itin--operacional .itin__uf .seletor__valor { flex: 1; overflow: visible; }
.itin--operacional .itin__alca,
.itin--operacional .itin__marco { width: var(--altura-controle-sm); height: var(--altura-controle-sm); border-radius: var(--raio-md); background: var(--cor-superficie-realce); box-shadow: none; color: var(--cor-texto-secundario); }
.itin--operacional .itin__alca::after,
.itin--operacional .itin__marco::after { content: none; }
.itin--operacional .itin__ordem { font-size: var(--texto-xs); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
.itin--operacional .itin__alca .icone { opacity: 0; }
.itin--operacional .itin__alca:hover .icone,
.itin--operacional .itin__alca:focus-visible .icone,
.itin--operacional .itin__parada--arrastando .itin__alca .icone { opacity: 1; }
.itin--operacional .itin__alca:hover .itin__ordem,
.itin--operacional .itin__alca:focus-visible .itin__ordem { opacity: 0; }
.itin--operacional .itin__parada--sede .itin__marco { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.itin--operacional .itin__parada--volta { padding-top: var(--esp-2); }
.itin--operacional .itin__parada--volta .itin__marco { margin-top: var(--esp-2); }
.itin--operacional .itin__volta { display: grid; gap: var(--esp-1); padding-left: 0; margin-top: var(--esp-1); font-size: var(--texto-sm); }
.itin--operacional .itin__volta-rotulo { font-size: var(--texto-xs); }
.itin--operacional .itin__adicionar { grid-template-columns: var(--itin-trilho) minmax(0, 1fr); padding-top: 0; }
.itin--operacional .itin__adicionar > .itin__marco { display: none; }
.itin--operacional .itin__botao-adicionar { grid-column: 2; width: fit-content; display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) 0; border: 0; background: transparent; color: var(--cor-marca-texto); }
.itin--operacional .itin__botao-adicionar small { display: none; }
.itin--operacional .itin__painel { display: grid; align-content: start; padding: 0; border-radius: 0; background: transparent; box-shadow: none; gap: var(--esp-3); }
.itin--operacional .itin__painel-nota { color: var(--cor-texto-secundario); font-size: var(--texto-2xs); }
.itin--operacional .itin__metricas { display: grid; gap: var(--esp-2); }
.itin--operacional .itin__totais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin: 0; }
.itin--operacional .itin__total { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-2); align-items: baseline; padding: var(--esp-2) 0; border-top: var(--borda-sutil); background: transparent; }
.itin--operacional .itin__total > .icone { grid-column: 1; grid-row: 1; align-self: center; color: var(--cor-marca-texto); }
.itin--operacional .itin__total-rotulo { grid-column: 2; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__total-valor { grid-column: 2; margin: 0; font-size: var(--texto-lg); line-height: var(--altura-linha-justa); color: var(--cor-texto); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.itin--operacional .itin__total-valor:last-child { margin: 0; font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.itin--operacional .itin__total-valor + .itin__total-valor::before { content: none; }
.itin--operacional .itin__trechos { gap: 0; }
.itin--operacional .itin__trecho { gap: var(--esp-3); padding: var(--esp-4) 0; border-bottom: var(--borda-sutil); border-radius: 0; box-shadow: none; background: transparent; }
.itin--operacional .itin__trecho:first-child { border-top: var(--borda-sutil); }
.itin--operacional .itin__trecho-cabecalho { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-2); align-items: center; }
.itin--operacional .itin__trecho-etapa { font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__trecho-rota { grid-column: 1 / -1; order: 1; font-size: var(--texto-lg); }
.itin--operacional .itin__trecho-km { grid-column: 3; grid-row: 1; }
.itin--operacional .itin__trecho-numero { border: 0; border-radius: var(--raio-md); background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); width: var(--altura-controle-sm); height: var(--altura-controle-sm); }
.itin--operacional .itin__trecho-rota { font-size: var(--texto-lg); gap: var(--esp-2); }
.itin--operacional .itin__trecho-km:not(:empty) { background: transparent; padding: 0; color: var(--cor-texto-secundario); font-weight: var(--peso-normal); }
.itin--operacional .itin__tempos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
.itin--operacional .itin__tempos .campo { padding-top: 0; gap: var(--esp-1); }
.itin--operacional .itin__tempos .campo__rotulo { position: static; display: block; margin: 0; padding: 0; background: transparent; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__saida,
.itin--operacional .itin__chegada { grid-column: auto; }
.itin--operacional .itin__ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); min-width: 0; }
.itin--operacional .itin__duracao { grid-column: auto; }
.itin--operacional .itin__passo { border-color: var(--cor-borda-sutil); background: var(--cor-superficie-sutil); }
.itin--operacional .itin__passo-botao { width: var(--alvo-minimo); min-width: var(--alvo-minimo); min-height: var(--alvo-minimo); }
/* A chegada é um valor calculado ao lado de campos: o rótulo nasce na mesma linha dos
   outros rótulos e a faixa acompanha a altura do trecho. */
.itin--operacional .itin__tempos > .itin__chegada-campo { align-self: stretch; justify-content: center; align-items: stretch; padding: var(--esp-2) var(--esp-3); gap: var(--esp-1); background: var(--cor-superficie-sutil); border-left: var(--filete) solid var(--cor-marca); }
.itin--operacional .itin__chegada-campo:hover { transform: none; }
.itin--operacional .itin__chegada { padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; justify-content: start; }
.itin--operacional .itin__chegada .indicador__valor { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); width: 100%; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--cor-texto); font-variant-numeric: tabular-nums; text-align: left; }
.itin--operacional [data-chegada-hora] { font-size: var(--texto-xl); line-height: var(--altura-linha-justa); }
/* Na folha larga, o trajeto identifica a linha; os dados operacionais ficam ao lado.
   Não repetir uma faixa de título sobre cada partida. */
@media (min-width: 1280px) {
  .itin--operacional .itin__trecho { grid-template-columns: minmax(0, .75fr) minmax(0, 2.5fr); gap: var(--esp-5); align-items: center; }
  .itin--operacional .itin__trecho-cabecalho { gap: var(--esp-1) var(--esp-2); }
  .itin--operacional .itin__trecho-km { grid-column: 2; grid-row: 3; order: 2; justify-self: start; margin: 0; }
  .itin--operacional .itin__trecho-rota { margin: var(--esp-1) 0; }
  .itin--operacional .itin__aviso { grid-column: 1 / -1; }
}
.conferencia-serena.conferencia-serena--operacional { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border: var(--borda-sutil); border-radius: var(--raio-lg); background: var(--cor-superficie); overflow: clip; }
.conferencia-serena--operacional .conferencia-serena__total { display: grid; align-content: center; justify-items: start; gap: var(--esp-1); margin: 0; padding: var(--esp-4) var(--esp-5); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.conferencia-serena--operacional .conferencia-serena__total > span { color: var(--cor-texto-inverso-sutil); }
.conferencia-serena--operacional .conferencia-serena__total > strong { font-size: var(--texto-2xl); line-height: var(--altura-linha-justa); color: var(--cor-texto-inverso); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conferencia-serena--operacional .conferencia-serena__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); padding: var(--esp-4) var(--esp-5); border: 0; align-content: center; }
.conferencia-serena--operacional .conferencia-serena__dados > div { display: grid; justify-items: start; text-align: left; gap: var(--esp-1); border: 0; padding: 0; min-width: 0; }
.conferencia-serena--operacional .conferencia-serena__dados dt { font-size: var(--texto-xs); margin: 0; }
.conferencia-serena--operacional .conferencia-serena__dados dd { font-size: var(--texto-lg); line-height: var(--altura-linha); text-align: left; overflow-wrap: anywhere; }
.conferencia-serena--operacional .conferencia-serena__dados > div:first-child dd { font-size: var(--texto-xl); }
.conferencia-serena--operacional .conferencia-serena__quantidade { grid-column: 1 / -1; }
.itin--operacional .itin__fonte { line-height: var(--altura-linha); }
/* O mapa preenche o que sobra da coluna: quanto mais destinos à esquerda, mais mapa à
   direita — as duas colunas terminam juntas. */
.itin--operacional .itin__rota { height: auto; min-height: 0; }
.itin--operacional .itin__mapa { height: clamp(calc(var(--esp-12) * 4), 22vw, calc(var(--esp-12) * 6)); min-height: 0; border-radius: var(--raio-md); }
@media (min-width: 1024px) {
  .selecao-recurso--integrada { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: center; gap: var(--esp-5); }
  .itin__planejamento { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
  .itin--operacional .itin__painel { padding-left: var(--esp-5); border-left: var(--borda-sutil); }
  .itin--operacional .itin__tempos { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .itin--operacional .itin__chegada .indicador__valor { flex-direction: column; align-items: start; gap: var(--esp-1); }
  .conferencia-serena.conferencia-serena--operacional { grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); }
  .conferencia-serena--operacional .conferencia-serena__total { display: grid; align-content: center; }
  .conferencia-serena--operacional .conferencia-serena__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conferencia-serena--operacional .conferencia-serena__quantidade { grid-column: auto; }
}
@media (max-width: 767px) {
  .selecao-recurso { gap: var(--esp-2); margin-bottom: var(--esp-4); }
  .selecao-recurso__controles { grid-template-columns: minmax(0, 1fr); }
  .selecao-recurso__controles > .botao { justify-self: end; }
  .itin--operacional .itin__dica { display: none; }
  .itin--operacional .itin__local { grid-template-columns: calc(var(--esp-4) * 4.5) minmax(0, 1fr); }
  .itin--operacional .itin__mapa { height: calc(var(--esp-12) * 4); }
}
/* Decisão contextual: situação e motivo ao lado da área de trabalho, sem cartão extra. */
.formulario-contextual { display: grid; gap: var(--esp-5); align-items: start; }
.formulario-contextual__contexto { display: grid; gap: var(--esp-3); min-width: 0; padding-left: var(--esp-3); border-left: var(--filete) solid var(--cor-marca-borda); }
.formulario-contextual__contexto p { margin: 0; }
.formulario-contextual__explicacao { color: var(--cor-texto); font-size: var(--texto-sm); line-height: var(--altura-linha); }
.formulario-contextual__nota { color: var(--cor-texto-secundario); font-size: var(--texto-xs); }
.formulario-contextual__rotulo { font-size: var(--texto-2xs); text-transform: uppercase; letter-spacing: var(--rastreio-rotulo); color: var(--cor-texto-secundario); }
.formulario-contextual--redacao .formulario-contextual__contexto { padding-left: 0; border: 0; gap: var(--esp-2); }
.formulario-contextual--redacao .formulario-contextual__campos > .campo { border-left: var(--filete) solid var(--cor-marca); padding-left: var(--esp-4); }
.formulario-contextual--redacao .formulario-contextual__campos > .campo > textarea { background: var(--cor-superficie-sutil); }
.formulario-contextual--redacao .texto-pronto { padding-left: var(--esp-4); }
.formulario-contextual__edicao { min-width: 0; }
.formulario-contextual__campos { display: grid; gap: var(--esp-4); }
/* A escolha do texto pronto acompanha a largura do campo que ela preenche — nada de uma
   linha curta em cima de um campo largo. */
.formulario-contextual__campos .texto-pronto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2); align-items: end; width: 100%; }
.formulario-contextual__campos .texto-pronto__escolha { min-width: 0; }
.formulario-contextual .formulario-contextual__campos .campo { padding-top: 0; gap: var(--esp-2); }
.formulario-contextual__campos .campo > .campo__rotulo { position: static; display: block; transform: none; inset: auto; margin: 0; padding: 0; background: transparent; font-size: var(--texto-xs); }
.formulario-contextual__campos textarea { min-height: calc(var(--esp-12) * 3); field-sizing: content; max-height: calc(var(--esp-12) * 6); line-height: var(--altura-linha); }
@media (min-width: 1024px) {
  .formulario-contextual { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: var(--esp-6); }
  .formulario-contextual__campos textarea { min-height: calc(var(--esp-12) * 2); }
}
@media (max-width: 767px) {
  .formulario-contextual { gap: var(--esp-4); }
  .formulario-contextual__campos .texto-pronto { grid-template-columns: minmax(0, 1fr); }
  .formulario-contextual__campos .texto-pronto__acoes { justify-self: end; }
}
/* Conferência e dados de protocolo: decisão primeiro, cópia no mesmo eixo de edição. */
.preparacao-documental { display: grid; gap: var(--esp-5); align-items: start; }
.preparacao-documental > [data-vivo] { min-width: 0; }
.dados-copiaveis__cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-5); }
.dados-copiaveis__cabecalho > p { flex: 1 1 18rem; margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.dados-copiaveis__cabecalho > .botao { flex: none; }
.preparacao-documental--conferencia { gap: var(--esp-5) var(--esp-6); }
.preparacao-documental--conferencia > [data-vivo] > details { padding: 0; border: 0; background: transparent; }
.preparacao-documental--conferencia > [data-vivo] > details > summary { font-weight: var(--peso-semi); color: var(--cor-texto); }
.preparacao-documental--conferencia .prontidao-documental { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--esp-4); }
.preparacao-documental--conferencia .prontidao-documental > .botao { justify-self: start; }
.preparacao-documental--conferencia .checklist { display: grid; gap: var(--esp-3); list-style: none; padding: 0; }
.preparacao-documental--conferencia .checklist__item { padding-bottom: var(--esp-2); border-bottom: var(--borda-sutil); }
.preparacao-documental--conferencia .checklist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.preparacao-documental--conferencia .checklist__item a { display: inline-block; min-height: var(--alvo-minimo); text-underline-offset: var(--esp-1); }
.preparacao-documental--conferencia .checklist__item .texto-secundario { display: block; }
@media (min-width: 1024px) {
  .preparacao-documental--conferencia .prontidao-documental { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) auto; align-items: center; gap: var(--esp-5); }
  .preparacao-documental--conferencia .prontidao-documental > .botao { justify-self: end; }
}
.registros.registros--operacionais:last-child > .registro.registro-operacional:last-child { border-radius: var(--raio-lg); }
.prontidao-documental { display: grid; gap: var(--esp-4); min-width: 0; border-left: var(--filete) solid var(--cor-aviso); padding: var(--esp-4); background: var(--cor-superficie-sutil); }
.prontidao-documental--pronta { border-color: var(--cor-marca); }
.prontidao-documental__cabecalho { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
.prontidao-documental__cabecalho > .icone { color: var(--cor-marca-texto); margin-top: var(--esp-1); }
.prontidao-documental p { margin: 0; }
.prontidao-documental__rotulo { color: var(--cor-texto-secundario); font-size: var(--texto-2xs); text-transform: uppercase; letter-spacing: var(--rastreio-rotulo); margin-bottom: var(--esp-2); }
.prontidao-documental__titulo { font-size: var(--texto-lg); font-weight: var(--peso-semi); line-height: var(--altura-linha-justa); }
.prontidao-documental__nota { color: var(--cor-texto-secundario); font-size: var(--texto-xs); }
.prontidao-documental .checklist { padding-left: var(--esp-4); margin: 0; }
.prontidao-documental .checklist__item { font-size: var(--texto-sm); line-height: var(--altura-linha); }
.prontidao-documental .checklist__item a { color: var(--cor-texto); }
.prontidao-documental > .botao { justify-self: start; }
/* No resumo da Viagem, a ausência de pendências é uma confirmação serena: sem o
   contorno nem o filete de atenção usados quando ainda existe algo a resolver. */
.prontidao-documental--pronta.prontidao-documental--resumo-neutro,
.prontidao-documental--pronta.prontidao-documental--resumo-neutro:hover {
  translate: none;
  border: 0;
  background: var(--cor-superficie-sutil);
  box-shadow: none;
}
@media (min-width: 1024px) {
  .preparacao-documental { gap: var(--esp-5); }
  .prontidao-documental { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: var(--esp-5); }
  .prontidao-documental > .botao { justify-self: end; }
}
/* Estação de edição: cabeçalho institucional, modos e ações separados das ferramentas. */
/* A estação de edição é uma peça fechada: cantos arredondados e nada vazando — a barra
   escura e o índice das páginas acompanham a moldura. */
/* `clip`, não `hidden`: hidden faria desta caixa o contexto de rolagem e a barra grudada
   (sticky) pararia de acompanhar a leitura, deixando um vão acima dela. */
.editores.editores--documental.editores--operacional { border-radius: var(--raio-lg); border: var(--borda); box-shadow: none; background: var(--cor-superficie-realce); overflow: clip; }
/* O padding de rolagem da página já protege a estação do topo fixo. Não somar outra margem. */
.documento--preparacao .secao__bloco.secao__bloco--estacao { scroll-margin-top: 0; }
.editor.editor--operacional > .editor__barra,
.editores.editores--operacional.editores--unidos .editor--operacional > .editor__barra { padding: 0; border: 0; border-bottom: var(--filete) solid var(--cor-marca); border-radius: 0; gap: 0; background: var(--cor-superficie); }
.editor--operacional > .editor__barra > .editor__linha:first-child { padding: var(--esp-3) var(--esp-4); background: var(--cor-primaria); color: var(--cor-texto-inverso); gap: var(--esp-3); }
.editor--operacional > .editor__barra > .editor__linha:first-child :is(button, a):focus-visible { --foco-cor: var(--foco-cor-inverso); --foco-contraste: var(--foco-contraste-inverso); }
.editor--operacional .editor__estado { color: var(--cor-texto-inverso-sutil); }
.editor--operacional .editor__identidade { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto-inverso); }
.editor--operacional .editor__estado .selo { background: var(--luz-10); color: var(--cor-texto-inverso); border-color: var(--luz-16); }
.editor--operacional .editor__fim { gap: var(--esp-4); }
.editor--operacional .editor__acoes { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.editor--operacional .editor__linha:first-child .botao { background: transparent; color: var(--cor-texto-inverso); border-color: var(--luz-28); box-shadow: none; }
.editor--operacional .editor__linha:first-child .botao:hover { background: var(--luz-16); }
/* Texto|PDF sobre a barra escura: controle segmentado em pílula, sem moldura dupla. O modo
   em uso é a única peça clara; o outro é texto sutil que acende no hover. */
.editor--operacional .editor__modos { padding: var(--esp-05); gap: var(--esp-05); border: 0; border-radius: var(--raio-pilula); background: var(--luz-10); }
.editor--operacional .editor__modos .botao { height: var(--altura-controle-sm); padding-inline: var(--esp-3); border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--cor-texto-inverso-sutil); font-weight: var(--peso-medio); }
.editor--operacional .editor__modos .botao:hover { background: var(--luz-16); color: var(--cor-texto-inverso); }
.editor--operacional .editor__modos .botao[aria-pressed="true"] { background: var(--cor-superficie); color: var(--cor-primaria); font-weight: var(--peso-semi); }
.editor--operacional .editor__modos .botao[aria-pressed="true"]:hover { background: var(--cor-superficie); color: var(--cor-primaria); }
/* Grupos nomeados: a ferramenta é reconhecida antes de se procurar um ícone. */
.editor--operacional .editor__ferramentas { display: block; margin: 0; padding: var(--esp-3) var(--esp-4); border-top: 0; }
.editor--operacional .editor__ferramentas .editor__linha--ferramentas { gap: var(--esp-3) var(--esp-4); align-items: stretch; padding-top: var(--esp-3); border-top: 0; }
.editor--operacional .editor__linha--ferramentas > .editor__grupo { display: grid; align-content: start; gap: var(--esp-1); padding: 0; min-width: 0; border: 0; }
.editor--operacional .editor__linha--ferramentas .editor__rotulo { display: block; }
.editor--operacional .editor__linha--ferramentas > .editor__grupo + .editor__grupo { padding-left: var(--esp-4); border-left: var(--borda-sutil); }
.editor--operacional .editor__rotulo { font-size: var(--texto-2xs); color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: var(--rastreio-rotulo); }
.editor--operacional .editor__controles { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.editores--operacional.editores--unidos .editores__titulo { font-size: var(--texto-sm); color: var(--cor-texto); padding: var(--esp-3) var(--esp-4); margin: 0; background: var(--cor-superficie-sutil); }
.editores--operacional .editores__indice { background: var(--cor-superficie-sutil); gap: var(--esp-3); }
.editores--operacional .editores__pagina { box-shadow: none; }
@media (max-width: 767px) {
  .editor--operacional > .editor__barra > .editor__linha:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: var(--esp-3); gap: var(--esp-2); }
  .editor--operacional .editor__fim { grid-column: 1 / -1; width: 100%; margin-left: 0; justify-content: space-between; gap: var(--esp-2); }
  .editor--operacional .editor__ferramentas { padding: var(--esp-3); }
  .editor--operacional .editor__ferramentas .editor__linha--ferramentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
  .editor--operacional .editor__linha--ferramentas > .editor__grupo + .editor__grupo { border-left: 0; padding: 0; }
  .editor--operacional .editor__linha--ferramentas > .editor__grupo:last-child { grid-column: 1 / -1; border-top: var(--borda-sutil); padding-top: var(--esp-2); }
}
/* Log institucional e conclusão da preparação: sequência legível, sem cartões por evento. */
/* Um trilho discreto liga os eventos; data, fato e responsável não viram cartões. */
.historico__linhas.historico__linhas--operacional { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; }
.historico__linhas--operacional .historico__linha { position: relative; display: grid; grid-template-columns: var(--esp-6) calc(var(--esp-12) * 1.6) minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-3) 0; border: 0; align-items: center; }
.historico__linhas--operacional .historico__linha:not(:last-child)::before { content: ""; position: absolute; left: var(--esp-3); top: 50%; bottom: calc(var(--esp-3) * -1); border-left: var(--borda-sutil); }
.historico__linhas--operacional .historico__marcador { position: relative; display: grid; place-items: center; width: var(--esp-6); height: var(--esp-6); color: var(--cor-texto-terciario); background: var(--cor-superficie); }
.historico__linhas--operacional .historico__linha--marca .historico__marcador { color: var(--cor-marca-texto); }
.historico__linhas--operacional .historico__linha:hover { background: var(--cor-superficie-sutil); }
.historico__linhas--operacional .historico__quando { padding-right: var(--esp-4); border-right: var(--borda-sutil); align-content: center; align-self: stretch; gap: 0; font-size: var(--texto-xs); }
.historico__linhas--operacional .historico__quando b { font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
.historico__linhas--operacional .historico__linha--marca .historico__quando b { color: var(--cor-marca-texto); }
.historico__linhas--operacional .historico__detalhe { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1) var(--esp-4); }
.historico__linhas--operacional .historico__texto { font-size: var(--texto-sm); }
.historico__linhas--operacional .historico__quem { justify-self: end; margin-left: auto; font-size: var(--texto-xs); color: var(--cor-texto-terciario); white-space: nowrap; }
.historico__linhas--operacional .historico__linha--vazia { display: block; color: var(--cor-texto-secundario); }
/* A conclusão permanece no fluxo, com separação por filete e sem sombra decorativa. */
.barra-acoes.barra-acoes--preparacao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--esp-3) var(--esp-3); align-items: center; padding: var(--esp-4) var(--esp-5); margin-inline: 0; border: 0; border-top: var(--borda-forte); border-radius: 0; box-shadow: none; background: var(--cor-superficie); }
/* Sair fica onde se sai: à esquerda. O estado do salvamento no meio e as decisões à direita. */
.barra-acoes--preparacao .barra-acoes__acoes { display: contents; }
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto { order: -1; justify-self: start; margin: 0; }
.barra-acoes--preparacao [data-status-salvamento] { order: 0; }
.barra-acoes--preparacao .barra-acoes__acoes > :not(.botao--texto) { order: 1; }
.barra-acoes.barra-acoes--preparacao [data-status-salvamento] { display: flex; position: static; inset: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; min-width: 0; font-size: var(--texto-sm); }
/* "Não salvo" não pode ostentar um ✓: no estado sujo o ponto âmbar é o único sinal. */
.barra-acoes--preparacao .barra-acoes__status--sujo > .icone,
.barra-acoes--preparacao .barra-acoes__status--erro > .icone { display: none; }
.barra-acoes--preparacao [data-status-salvamento] > .icone { flex: none; color: var(--cor-sucesso); }
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto { color: var(--cor-texto-secundario); }
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto:hover { color: var(--cor-texto); }
.barra-acoes__acoes { display: flex; align-items: center; gap: var(--esp-2); }
.barra-acoes.barra-acoes--confirmacao { display: flex; justify-content: space-between; }
.barra-acoes__acoes > .botao--texto { color: var(--cor-texto-secundario); }
@media (max-width: 767px) {
  .historico__linhas--operacional .historico__linha { grid-template-columns: var(--esp-6) minmax(0, 1fr); gap: var(--esp-1) var(--esp-3); padding: var(--esp-3) 0; align-items: start; }
  .historico__linhas--operacional .historico__marcador { grid-row: 1 / 3; }
  .historico__linhas--operacional .historico__quando { grid-column: 2; display: flex; align-items: baseline; gap: var(--esp-2); padding: 0; border: 0; }
  .historico__linhas--operacional .historico__detalhe { grid-column: 2; display: grid; gap: var(--esp-1); }
  .historico__linhas--operacional .historico__detalhe > :is(.historico__texto, .historico__quem) { grid-column: auto; }
  .historico__linhas--operacional .historico__linha:not(:last-child)::before { top: var(--esp-6); bottom: calc(var(--esp-6) * -1); }
  .historico__linhas--operacional .historico__quem { justify-self: start; }
  .historico__linhas--operacional .historico__quem { margin-left: 0; white-space: normal; }
  .barra-acoes.barra-acoes--preparacao { grid-template-columns: auto minmax(0, 1fr); padding: var(--esp-3); gap: var(--esp-2) var(--esp-3); }
  .barra-acoes--preparacao .barra-acoes__acoes > :not(.botao--texto) { grid-column: span 1; }
  .barra-acoes--preparacao .barra-acoes__acoes { justify-content: space-between; }
  .barra-acoes--preparacao .barra-acoes__acoes > .menu { flex: 0 0 auto; }
}
/* A viatura é peça da mesma família dos servidores: mesma altura do cartão de equipe e,
   como ele não é alvo clicável inteiro, sem realce de hover. */
.recurso-selecionado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--esp-2) var(--esp-3); gap: var(--esp-3); background: var(--cor-superficie-sutil); box-shadow: none; }
.recurso-selecionado:hover { box-shadow: none; }
.recurso-selecionado .pessoa__nome { font-size: var(--texto-sm); }
.recurso-selecionado .pessoa__nome,
.recurso-selecionado .pessoa__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurso-selecionado__origem { display: block; font-size: var(--texto-xs); color: var(--cor-marca-texto); }
.recurso-selecionado[data-escolhida-pelo-motorista] { animation: recurso-confirmado var(--duracao-enfase) var(--curva-padrao); }
@keyframes recurso-confirmado {
  from { background: var(--cor-marca-fundo-forte); box-shadow: 0 0 0 var(--esp-1) var(--cor-marca-fundo); }
  to { background: var(--cor-superficie-sutil); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .recurso-selecionado[data-escolhida-pelo-motorista] { animation: none; }
}
/* A folha não se divide em duas colunas: título e nota abrem a seção na largura inteira e o
   conteúdo usa toda a linha — campos, mapa e cartões rendem mais do que uma margem de texto. */
.documento--preparacao .secao__nota { max-width: var(--largura-leitura); }
/* Alerta solto no meio da seção (conferência antes de emitir) não encosta no que vem antes. */
.documento--preparacao .secao__conteudo > .alerta { margin-top: var(--esp-5); }
@media (min-width: 1280px) {
  .secao__grupo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .secao__grupo .pessoas--compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos.campos--registro { grid-template-columns: minmax(0, .7fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, 1.5fr); }
  .campos--registro > .campo:nth-child(4) { grid-column: auto; }
}
@media (max-width: 767px) {
  .documento--preparacao > .secao,
  .documento--preparacao > .formulario--secoes > .secao,
.documento--preparacao > [data-previa-diarias] > .secao { padding: var(--esp-4); gap: var(--esp-4); }
  .documento--preparacao .secao__titulo { font-size: var(--texto-lg); }
  .documento--preparacao .secao__cabecalho { gap: var(--esp-2); }
  .campos.campos--registro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos--registro > .campo:nth-child(4) { grid-column: auto; }
  .campos--registro > .campo:nth-child(5) { grid-column: 1 / -1; }
  .pessoas--compactas > .pessoa { border-bottom: 0; }
  .indice-preparacao__item { font-size: var(--texto-xs); flex: none; }
  
  
}
.dialogo--mesa .dialogo__fechar { top: var(--esp-4); right: var(--esp-4); --botao-texto: var(--cor-texto-inverso); --botao-fundo: var(--cor-primaria); --botao-borda: var(--luz-28); }
.dialogo--mesa .dialogo__fechar:hover { background: var(--cor-primaria-hover); color: var(--cor-texto-inverso); }
.dialogo--mesa .dialogo__fechar:focus-visible { --foco-cor: var(--foco-cor-inverso); --foco-contraste: var(--foco-contraste-inverso); }
.dialogo--mesa .dialogo__corpo { padding: var(--esp-8); color: var(--cor-texto); }
.dialogo--mesa .dialogo__conteudo { display: flex; flex-direction: column; overflow: hidden; }
.dialogo--mesa .dialogo__conteudo > .registro-hero, .dialogo--mesa .dialogo__rodape { flex: none; }
/* Uma rolagem para o conteúdo; cabeçalho e ações não recebem o trilho da scrollbar. */
.dialogo--mesa .dialogo__conteudo > .dialogo__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-color: var(--cor-borda) var(--cor-superficie); scrollbar-width: thin; scroll-padding-block: var(--esp-4); }
.mesa-registro :is(a, button, input, textarea, summary) { scroll-margin-block: var(--esp-4); }
.dialogo--mesa .mesa-registro > .resumo { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); grid-template-areas: "documentos documentos" "registro registro" "equipe equipe" "principal contexto"; align-items: start; gap: var(--esp-6); font-size: var(--texto-md); }
.registro__selos .selo--temporal { background: transparent; border-color: transparent; color: var(--cor-texto-secundario); }
.dialogo--mesa .dialogo__linha-selos .selo--temporal { background: transparent; border-color: transparent; color: var(--cor-texto-inverso-sutil); }
.dialogo--mesa .dialogo__linha-selos .selo--condicao { background: transparent; border-color: transparent; color: var(--cor-texto-inverso-sutil); }
.estado-documental { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); }
.estado-documental > .icone { flex: none; color: var(--cor-marca-texto); }
.estado-documental > div { min-width: 0; flex: 1; }
.estado-documental__titulo { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto); }
.estado-documental__nota { margin: var(--esp-1) 0 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.estado-documental > .botao { flex: none; }
.mesa-registro__principal { grid-area: principal; min-width: 0; display: grid; gap: var(--esp-6); }
.mesa-registro__documentos { grid-area: documentos; min-width: 0; }
/* A coluna se estica até o fim do conteúdo para a conferência poder acompanhar a rolagem (sticky); ela cabe
   na altura da tela — o que passar disso rola dentro dela — e nunca deixa um vão embaixo. */
.mesa-registro__coluna { grid-area: contexto; min-width: 0; align-self: stretch; }
.mesa-registro__registro { grid-area: registro; min-width: 0; }
.mesa-registro__equipe { grid-area: equipe; min-width: 0; display: grid; gap: var(--esp-6); }
/* Equipe e transporte: uma fileira de cartões (servidores + viatura), no mesmo desenho do cartão Registro institucional. */
/* Cada linha se divide em colunas iguais e ocupa a largura toda (1 servidor + viatura = 2 colunas; 3 = 3; a última linha também se estica). */
.dialogo--mesa .mesa-registro__equipe .equipe-transporte { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.dialogo--mesa .mesa-registro__equipe .equipe-transporte > .pessoa { flex: 1 1 17rem; align-self: stretch; }
.dialogo--mesa .mesa-registro__equipe .equipe-transporte > .pessoa { background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); box-shadow: none; padding: var(--esp-3) var(--esp-4); }
.dialogo--mesa .mesa-registro__equipe .equipe-transporte .avatar { width: var(--esp-10); height: var(--esp-10); font-size: var(--texto-xs); }
.dialogo--mesa .mesa-registro__equipe .equipe-transporte .avatar--escuro { background: var(--grafite-900); color: var(--neutro-0); }
.dialogo--mesa .mesa-registro__equipe .equipe-transporte .pessoa__nome { font-size: var(--texto-md); color: var(--cor-texto); }
/* Roteiro do Resumo: os trechos num cartão como os demais (registro, equipe), linhas com respiro uniforme, o fio
   ocupando o meio de verdade (antes era um traço curto perdido entre saída e chegada) e a origem tão legível quanto
   o destino. A linha sob o mouse se destaca para seguir o trecho de um lado ao outro. */
.dialogo--mesa .mesa-registro__principal .resumo__moldura { background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); padding: var(--esp-1) var(--esp-2); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__trecho { align-items: center; padding: var(--esp-3); border-radius: var(--raio-md); transition: background-color var(--duracao-rapida) var(--curva-padrao); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__trecho:hover { background: var(--cor-superficie); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__rota { grid-template-columns: minmax(0, 1fr) minmax(8rem, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--esp-4); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__lugar { color: var(--cor-texto); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__dia small { color: var(--cor-marca-texto); }
/* Fontes do roteiro mais contidas no Resumo: hora e data no tamanho do corpo, lugares um degrau abaixo. */
.dialogo--mesa .mesa-registro__principal .percurso-registro__trecho { padding-block: var(--esp-2); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__dia b { font-size: var(--texto-sm); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__ponto time { font-size: var(--texto-md); }
.dialogo--mesa .mesa-registro__principal .percurso-registro__lugar { font-size: var(--texto-xs); }
.mesa-registro__registro > .bloco-registro { min-width: 0; padding: var(--esp-5); background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); }
.dialogo--mesa .mesa-registro__registro .bloco-registro__titulo { font-size: var(--texto-xs); }
.mesa-registro__contexto { min-width: 0; display: grid; gap: var(--esp-6); align-content: start; position: sticky; top: var(--esp-2); scrollbar-width: thin; }
@media (min-width: 1024px) {
  /* Registro institucional no alto, na largura toda: quatro dados lado a lado; motivo e justificativa em linha inteira. */
  .dialogo--mesa .mesa-registro__registro .resumo__definicoes.metadados { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-6); }
  /* Motivo numa célula só (resumo da OS): a última coluna é um pouco mais larga para ele. */
  .dialogo--mesa .mesa-registro__registro .resumo__definicoes.metadados:has(> .metadado--linha:not(.resumo__largo)) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
  /* Motivo e justificativa: metade da linha cada, na mesma linha, no máximo duas linhas de texto (o resto fica no title). */
  .dialogo--mesa .mesa-registro__registro .resumo__definicoes .metadado--texto { grid-column: span 2; }
  .dialogo--mesa .mesa-registro__registro .metadado--texto dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* Diárias ao lado do Roteiro, sempre na altura dele: a coluna estica com o roteiro e o cartão a preenche — o valor total
     cresce (número no meio) e os três dados se distribuem um por linha. */
  .mesa-registro__contexto { position: static; min-height: 100%; grid-template-rows: minmax(min-content, 1fr); }
  .mesa-registro__contexto > .bloco-registro--conferencia { display: grid; grid-template-rows: auto minmax(min-content, 1fr); }
  .mesa-registro__contexto .conferencia-serena--consulta { grid-template-rows: minmax(min-content, 1fr) auto; }
  .mesa-registro__contexto .conferencia-serena--consulta .conferencia-serena__total { align-content: center; }
  /* A sobra de altura vai para o bloco escuro; os dados só ajudam a preencher (ver respiro em cqh abaixo); cada dado recebe uma parte igual da sobra (stretch nas faixas auto), centrado nela. */
  .dialogo--mesa .mesa-registro__contexto .conferencia-serena--consulta .conferencia-serena__dados { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--esp-2); padding-block: var(--esp-3); align-content: stretch; }
  .dialogo--mesa .mesa-registro__contexto .conferencia-serena--consulta .conferencia-serena__dados > div { align-content: center; }
  .dialogo--mesa .mesa-registro__contexto .conferencia-serena--consulta .conferencia-serena__dados > div:not(:last-child) { padding-bottom: var(--esp-2); border-bottom: var(--borda-sutil); }
  .dialogo--mesa .mesa-registro__contexto .conferencia-serena--consulta .conferencia-serena__dados dd { white-space: nowrap; }
  .dialogo--mesa .mesa-registro__contexto .bloco-registro__titulo { font-size: var(--texto-xs); }
  /* Ao lado do roteiro, o texto das Diárias cresce com a altura da coluna (que é a do roteiro) para não sobrar vão: a
     coluna vira container de tamanho (sem contribuir para a altura da linha) e cada texto usa uma fração dela (cqh),
     limitada pela largura (cqi) para nunca quebrar linha. */
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .mesa-registro__coluna { container-type: size; }
  /* Altura definida (a da coluna): as frações de altura repartem a sobra em vez de crescerem a partir do conteúdo. */
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .mesa-registro__contexto { height: 100%; }
  /* Blocos iguais: cada dado tem a mesma altura e o valor total 10% a mais; juntos, a altura do roteiro (1,1 + N faixas, N = 2 ou 3). */
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta { grid-template-rows: minmax(0, 1.1fr) minmax(0, 2fr); }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta:has(.conferencia-serena__por-servidor) { grid-template-rows: minmax(0, 1.1fr) minmax(0, 3fr); }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__total { padding-block: 0; align-content: center; }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__dados { grid-auto-rows: minmax(0, 1fr); padding-block: 0; gap: 0; align-content: stretch; }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__dados > div { align-content: center; padding-block: 0; }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__total > span { font-size: clamp(var(--texto-2xs), 3.2cqh, var(--texto-sm)); }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__total > strong { font-size: clamp(var(--texto-3xl), min(9cqh, 9cqi), 3.5rem); white-space: nowrap; }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__dados dt { font-size: clamp(var(--texto-xs), min(3.3cqh, 3.6cqi), var(--texto-md)); }
  .dialogo--mesa .mesa-registro > .resumo:has(.percurso-registro__trecho:nth-child(6)) .conferencia-serena--consulta .conferencia-serena__dados dd { font-size: clamp(var(--texto-sm), min(5.4cqh, 6.5cqi), 2rem); line-height: var(--altura-linha-justa); overflow: hidden; text-overflow: ellipsis; }
  /* Roteiro curto (até 5 trechos) não tem altura para as Diárias ao lado: elas descem para baixo do roteiro, na largura
     toda, com tudo numa linha só — valor total, por servidor, tipo e quantidade. */
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) { grid-template-areas: "documentos documentos" "registro registro" "equipe equipe" "principal principal" "contexto contexto"; }
  /* Resumo sem documentos nem registro (ex.: roteiro): a grade não reserva essas faixas — faixa vazia ainda soma o vão. */
  .dialogo--mesa .mesa-registro > .resumo:not(:has(> .mesa-registro__documentos, > .mesa-registro__registro)) { grid-template-areas: "equipe equipe" "principal contexto"; }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))):not(:has(> .mesa-registro__documentos, > .mesa-registro__registro)) { grid-template-areas: "equipe equipe" "principal principal" "contexto contexto"; }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena--consulta { grid-template-columns: minmax(max-content, 1fr) minmax(0, 3fr); grid-template-rows: none; }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; align-items: center; gap: var(--esp-6); }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados > div { grid-column: auto; padding: 0; border: 0; }
  /* Na linha, cada dado tenta ocupar a sua coluna inteira: o tamanho do texto acompanha a largura da coluna (cqi), sem
     quebrar linha — 7,5cqi é o que cabe para os valores mais longos ("18 x 100% + 1 x 15%", "CAPITAL + INTERIOR"). */
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados > div { container-type: inline-size; min-width: 0; }
  /* Na linha, cada bloco (valor total e dados) com o texto centrado. */
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena--consulta .conferencia-serena__total,
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena--consulta .conferencia-serena__dados > div { justify-items: center; text-align: center; }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados dd { font-size: clamp(var(--texto-md), 7.5cqi, var(--texto-3xl)); line-height: var(--altura-linha-justa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados dt { font-size: clamp(var(--texto-xs), 3.6cqi, var(--texto-md)); }
  .dialogo--mesa .mesa-registro > .resumo:not(:has(.percurso-registro__trecho:nth-child(6))) .conferencia-serena__dados:not(:has(> .conferencia-serena__por-servidor)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mesa-registro__contexto > .bloco-registro { min-width: 0; padding: var(--esp-5); background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); }
/* Diárias não ganha cartão: só o título e o bloco escuro. */
.mesa-registro__contexto > .bloco-registro--conferencia { padding: 0; background: none; border: 0; border-radius: 0; }
.conferencia-serena.conferencia-serena--consulta { display: grid; gap: 0; padding: 0; border: var(--borda-sutil); border-radius: var(--raio-lg); overflow: clip; }
.conferencia-serena--consulta .conferencia-serena__total { justify-items: start; text-align: left; margin: 0; border-radius: 0; padding: var(--esp-5); }
.conferencia-serena--consulta .conferencia-serena__total > strong { font-size: var(--texto-3xl); }
.conferencia-serena--consulta .conferencia-serena__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--esp-4) var(--esp-5); gap: var(--esp-4); }
.conferencia-serena--consulta .conferencia-serena__dados > div { justify-items: start; text-align: left; min-width: 0; }
.conferencia-serena--consulta .conferencia-serena__dados dd { font-size: var(--texto-sm); line-height: var(--altura-linha); white-space: normal; }
.conferencia-serena--consulta .conferencia-serena__por-servidor { grid-column: 1 / -1; padding-bottom: var(--esp-3); border-bottom: var(--borda-sutil); }
.conferencia-serena--consulta .conferencia-serena__por-servidor dd { font-size: var(--texto-xl); }
/* Um servidor só: não há "Por servidor" (o total já é o dele); tipo e quantidade se empilham no lugar da linha. */
.conferencia-serena--consulta .conferencia-serena__dados:not(:has(> .conferencia-serena__por-servidor)) { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
.conferencia-serena--consulta .conferencia-serena__dados:not(:has(> .conferencia-serena__por-servidor)) > div:first-child { padding-bottom: var(--esp-3); border-bottom: var(--borda-sutil); }
.conferencia-serena--consulta .conferencia-serena__quantidade { grid-column: auto; }
.missao-registro { min-width: 0; border-left: var(--filete) solid var(--cor-marca); padding-left: var(--esp-4); }
.missao-registro__rotulo, .estacao-documental__rotulo { margin: 0 0 var(--esp-2); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.missao-registro__texto { font-size: var(--texto-lg); line-height: var(--altura-linha); margin: 0; overflow-wrap: anywhere; }
.bloco-registro { min-width: 0; }
.bloco-registro__cabecalho { display: flex; align-items: center; gap: var(--esp-3); padding-bottom: var(--esp-3); margin-bottom: var(--esp-4); border-bottom: var(--borda); }
.bloco-registro__indice { color: var(--cor-marca-texto); font-size: var(--texto-xs); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
.bloco-registro__nota { margin-left: auto; color: var(--cor-texto-secundario); font-size: var(--texto-xs); font-variant-numeric: tabular-nums; }
.dialogo--mesa .resumo__titulo { color: var(--cor-texto); font-size: var(--texto-sm); margin: 0; }
.dialogo--mesa .resumo__moldura { min-width: 0; }
.dialogo--mesa .resumo__trechos { position: static; overflow: visible; border: 0; border-radius: 0; }
/* Roteiro da mesa — cartão de embarque: a saída à esquerda (hora grande, lugar embaixo), a
   chegada à direita, alinhada ao fim da linha, e entre as duas o fio dourado com o carro e a
   duração do trecho. O dia mora na margem; um filete sutil separa os trechos. */
.percurso-registro { display: grid; }
.percurso-registro__trecho { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; gap: var(--esp-4); padding: var(--esp-4) 0; }
.percurso-registro__trecho + .percurso-registro__trecho { border-top: var(--borda-sutil); }
.percurso-registro__dia { display: grid; gap: var(--esp-05); font-variant-numeric: tabular-nums; }
.percurso-registro__dia b { font-size: var(--texto-lg); line-height: var(--altura-linha-justa); }
.percurso-registro__dia small { font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.percurso-registro__rota { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.45fr) minmax(0, 1fr); align-items: start; gap: var(--esp-3); }
.percurso-registro__ponto { display: grid; gap: var(--esp-05); min-width: 0; }
.percurso-registro__ponto time { font-size: var(--texto-xl); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-titulo); line-height: var(--altura-linha-justa); font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.percurso-registro__ponto time small { margin-left: var(--esp-1); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); color: var(--cor-marca-texto); vertical-align: middle; }
.percurso-registro__lugar { font-size: var(--texto-sm); line-height: var(--altura-linha-justa); color: var(--cor-texto-secundario); overflow-wrap: anywhere; }
strong.percurso-registro__lugar { color: var(--cor-texto); font-weight: var(--peso-semi); }
.percurso-registro__ponto--destino { text-align: right; }
.percurso-registro__ligacao { display: grid; justify-items: center; gap: var(--esp-1); padding-top: var(--esp-05); }
.percurso-registro__duracao { font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; }
.percurso-registro__fio { display: flex; align-items: center; width: 100%; gap: var(--esp-2); color: var(--cor-marca); }
.percurso-registro__fio::before, .percurso-registro__fio::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--cor-marca-borda); }
.percurso-registro__fio::after { background: linear-gradient(to right, var(--cor-marca-borda), var(--cor-marca)); }
.dialogo--mesa .resumo__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-3); }
.dialogo--mesa .resumo__cartoes > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dialogo--mesa .resumo__cartoes > li { grid-column: auto; }
.equipe-transporte { display: grid; gap: var(--esp-4); }
/* Equipe e Transporte são dois sub-blocos com o mesmo rótulo em caixa-alta; o cartão da viatura
   é idêntico ao do servidor (mesma altura, mesmo recuo), como na folha. */
.equipe-transporte__rotulo { margin: 0 0 var(--esp-2); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.equipe-transporte__transporte { align-self: start; }
.equipe-transporte__transporte .pessoa { align-items: center; padding: var(--esp-2) var(--esp-3); gap: var(--esp-3); border: 0; box-shadow: none; background: var(--cor-superficie-sutil); border-radius: var(--raio-md); }
.equipe-transporte__transporte .pessoa:hover { box-shadow: none; }
/* Servidor e viatura leem igual: cada um no seu cartão de superfície sutil. */
.dialogo--mesa .pessoas--faixa > .pessoa,
.pessoas--compactas > .pessoa { align-items: center; padding: var(--esp-2) var(--esp-3); gap: var(--esp-3); background: var(--cor-superficie-sutil); border-radius: var(--raio-md); }
.dialogo--mesa .pessoa__texto { display: grid; gap: 0; line-height: var(--altura-linha-justa); }
.equipe-transporte .avatar { width: var(--esp-8); height: var(--esp-8); font-size: var(--texto-2xs); }
.dialogo--mesa .pessoa__nome { font-size: var(--texto-sm); }
/* Documentos na largura inteira, com o cabeçalho dos outros blocos (título em caixa-alta e
   a nota "Arquivo da viagem" ao lado) — sem a coluna lateral que só servia de rótulo. */
.estacao-documental { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.estacao-documental > .estacao-documental__cabecalho { margin-bottom: 0; }
.estacao-documental > .vazio-inline { margin: 0; }
.estacao-documental .resumo__documentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--esp-4); }
.estacao-documental .resumo__documentos > li { min-width: 0; }
/* A peça é UMA linha: documento à esquerda, estado da via e ação à direita. Só o que é
   detalhe (quem anexou, arquivo) e as notas de conferência descem para a faixa inteira. */
.estacao-documental__peca { display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto; align-items: center; border: var(--borda); border-radius: var(--raio-lg); overflow: hidden; background: var(--cor-superficie); }
.estacao-documental__peca > .peca-documental { grid-column: 1; width: auto; }
.estacao-documental__peca > .assinatura-documental { display: contents; }
/* O alvo é a peça inteira, não a metade esquerda: o hover acende a linha toda e o nome do
   documento sublinha — sem a faixa dourada cobrindo meia largura. */
.estacao-documental__peca:has(> a.peca-documental:hover) { background: var(--cor-superficie-sutil); }
.estacao-documental__peca > a.peca-documental:hover { background: transparent; }
.estacao-documental__peca > a.peca-documental:hover .ficha-documental__texto > span:first-child { text-decoration: underline; }
.peca-documental { width: 100%; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); overflow-wrap: anywhere; }
.peca-documental > .icone { flex: none; width: var(--esp-8); height: var(--esp-10); padding: var(--esp-2); border: var(--borda); border-radius: var(--raio-sm); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); }
/* Documento parado (em geração, falhou, PDF indisponível): o ícone sai do dourado de
   documento pronto e assume o tom de espera, antes mesmo de ler o texto. */
.peca-documental.resumo__documento--parado > .icone { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso); }
.peca-documental .ficha-documental__texto { gap: var(--esp-05); font-size: var(--texto-md); }
.peca-documental--acoes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.peca-documental__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.peca-documental__edicao { grid-column: 1 / -1; border-top: var(--borda-sutil); padding-top: var(--esp-3); }
.peca-documental__link { color: var(--cor-texto); font-weight: var(--peso-semi); text-decoration: none; }
.peca-documental__link:hover { color: var(--cor-marca-texto); text-decoration: underline; }
@media (max-width: 599.98px) {
  .peca-documental--acoes { grid-template-columns: auto minmax(0, 1fr); }
  .peca-documental--acoes > .peca-documental__acoes { grid-column: 2; }
}
/* Fora da peça (outras telas) o bloco continua sendo um rodapé próprio. */
.assinatura-documental { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) var(--esp-4); border-top: var(--borda-sutil); background: var(--cor-superficie-sutil); font-size: var(--texto-xs); }
.assinatura-documental__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-width: 0; }
/* O estado da via anda junto do nome do documento — é atributo dele, não um aviso na outra
   ponta da linha; as ações é que ficam à direita. */
.estacao-documental__peca > .assinatura-documental > .assinatura-documental__estado { grid-column: 2; justify-content: flex-start; font-size: var(--texto-xs); }
.estacao-documental__peca > .assinatura-documental > :is(.botao, pc-menu, .registro__texto) { grid-column: 4; margin-right: var(--esp-4); }
.estacao-documental__peca > .assinatura-documental > .registro__texto { color: var(--cor-texto-secundario); font-size: var(--texto-xs); margin: 0; }
.assinatura-documental__ausente { color: var(--cor-texto-secundario); }
/* Selo clicável (estado + ação de abrir): usa as cores do próprio estado e não se comporta
   como link — nem sublinhado nem realce no hover. Anexada a via, o que vale é o estado
   anexado; abri-la é consequência, não mais um botão. O foco de teclado segue visível. */
a.selo, a.selo:hover { color: var(--selo-texto); text-decoration: none; }
/* Selo clicável é alvo de toque: nunca abaixo do mínimo de 24px (WCAG 2.5.8). */
a.selo { min-height: var(--alvo-minimo); padding-inline: var(--esp-3); }
.assinatura-documental__detalhes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); min-width: 0; overflow-wrap: anywhere; color: var(--cor-texto-secundario); }
.estacao-documental__peca > .assinatura-documental > .assinatura-documental__detalhes { padding: 0 var(--esp-4) var(--esp-3); font-size: var(--texto-xs); }
.assinatura-documental__detalhes > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.assinatura-documental .registro__notas { grid-column: 1 / -1; margin: 0; padding-top: var(--esp-2); border-top: var(--borda-sutil); }
.estacao-documental__peca > .assinatura-documental > .registro__notas { padding: var(--esp-2) var(--esp-4); background: var(--cor-superficie-sutil); }
.assinatura-documental .registro__nota { font-size: var(--texto-xs); }
/* Histórico: arquivo morto da emissão. Não são cartões soltos e sim uma lista contida,
   em tom recuado, encostada no mesmo eixo da peça corrente. */
.estacao-documental > h4.resumo__titulo { grid-column: 1 / -1; margin: var(--esp-2) 0 calc(-1 * var(--esp-2)); font-size: var(--texto-2xs); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.resumo__documentos--historico { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: var(--borda-sutil); border-radius: var(--raio-lg); background: var(--cor-superficie-sutil); overflow: hidden; }
.resumo__documentos--historico > li + li { border-top: var(--borda-sutil); }
.resumo__documentos--historico .peca-documental { background: transparent; padding: var(--esp-2) var(--esp-3); gap: var(--esp-3); }
.resumo__documentos--historico .peca-documental > .icone { width: var(--esp-6); height: var(--esp-8); padding: var(--esp-1); background: var(--cor-superficie); border-color: var(--cor-borda); color: var(--cor-texto-secundario); }
.resumo__documentos--historico .ficha-documental__texto { font-size: var(--texto-sm); }
.resumo__documentos--historico a.resumo__documento:hover { background: var(--cor-marca-fundo); }
.bloco-registro--conferencia .bloco-registro__cabecalho { margin-bottom: var(--esp-3); border: 0; padding: 0; }
/* No Resumo os cartões já separam as seções: os títulos não levam fio embaixo (era um fio por seção, somado às bordas dos cartões). */
.dialogo--mesa .mesa-registro .bloco-registro__cabecalho { margin-bottom: var(--esp-3); border: 0; padding: 0; }
/* O total é o mesmo bloco escuro da folha de cadastro: número centrado, tipografia fluida; os
   dados vêm embaixo, centrados, no mesmo ritmo. Mesa e folha leem igual. */
.conferencia-serena__total { display: grid; justify-items: center; text-align: center; gap: var(--esp-1); margin: 0 0 var(--esp-4); padding: var(--esp-4) var(--esp-5); border-radius: var(--raio-md); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.conferencia-serena__total > span { font-size: var(--texto-2xs); color: var(--cor-texto-inverso-sutil); }
.conferencia-serena__total > strong { font-size: clamp(var(--texto-2xl), 2.2vw, var(--texto-4xl)); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-titulo); line-height: var(--altura-linha-justa); font-variant-numeric: tabular-nums; }
.conferencia-serena__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-5); margin: 0; padding: 0; border: 0; }
.conferencia-serena__dados > div { display: grid; justify-items: center; text-align: center; gap: var(--esp-05); }
.conferencia-serena__dados dt { color: var(--cor-texto-secundario); font-size: var(--texto-xs); margin: 0; }
.conferencia-serena__dados dd { margin: 0; font-weight: var(--peso-semi); font-size: var(--texto-xl); line-height: var(--altura-linha-justa); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conferencia-serena__quantidade { grid-column: 1 / -1; }

.estacao-documental .registros { margin-top: var(--esp-4); }
.dialogo--mesa .resumo__definicoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); padding: 0; margin: 0; border: 0; }
.dialogo--mesa .resumo__definicoes dt { text-transform: none; letter-spacing: normal; font-size: var(--texto-xs); }
/* No painel de conferência os dados já estão agrupados: filete por item vira ruído. */
.dialogo--mesa .resumo__definicoes.metadados > .metadado { padding-bottom: 0; border-bottom: 0; }
.dialogo--mesa .resumo__definicoes dd { overflow-wrap: anywhere; }
.divulgacao--copiavel .divulgacao__corpo { gap: var(--esp-4); }
.divulgacao--copiavel .divulgacao__corpo > :is(.texto-secundario, .campo__ajuda) { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.divulgacao--copiavel .divulgacao__corpo { gap: var(--esp-2); }
.dados-copiaveis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-8); }
/* Cada dado é uma linha de ficha: rótulo, valor e a ação de levar embora, com o filete
   fechando a linha inteira (valor + botão) em vez de parar no meio. */
.dado-copiavel { min-width: 0; padding-block: var(--esp-3); border-bottom: var(--borda-sutil); gap: var(--esp-1); }
.dado-copiavel--largo { grid-column: 1 / -1; border-bottom: 0; }
.dado-copiavel .campo__rotulo { font-size: var(--texto-2xs); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.dado-copiavel .linha { flex-wrap: nowrap; gap: var(--esp-2); align-items: center; }
.dado-copiavel--largo .linha { align-items: start; }
/* O valor é um dado institucional para levar embora, não um campo a preencher: sem moldura
   de input, só o filete que separa do rótulo seguinte. O foco devolve o campo (halo e fundo). */
.dado-copiavel .entrada[readonly] { min-width: 0; flex: 1; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--texto-sm); font-weight: var(--peso-semi); text-overflow: ellipsis; }
.dado-copiavel .entrada[readonly]:focus-visible { padding: var(--esp-1) var(--esp-2); border-radius: var(--raio-sm); }
.dado-copiavel textarea.entrada[readonly] { padding: var(--esp-2) var(--esp-3); border: var(--borda-sutil); border-radius: var(--raio-sm); background: var(--cor-superficie-sutil); font-weight: var(--peso-normal); line-height: var(--altura-linha); text-overflow: clip; }
.dado-copiavel > .linha > .botao { align-self: center; }
.dado-copiavel--largo > .linha > .botao { align-self: start; margin-top: var(--esp-1); }
/* O detalhamento é um BLOCO DE TEXTO para levar embora, não um campo a editar: sem alça de
   redimensionar, altura pelo conteúdo onde o navegador souber (field-sizing), rows como piso. */
.dado-copiavel textarea { resize: none; field-sizing: content; max-height: 14rem; }
.dado-copiavel .botao { flex: none; --botao-fundo: transparent; --botao-borda: transparent; color: var(--cor-texto-secundario); font-size: var(--texto-xs); }
.dado-copiavel .botao:hover { --botao-fundo: var(--cor-superficie-realce); color: var(--cor-texto); }
.divulgacao--copiavel .divulgacao__corpo > .botao { align-self: start; }
.dialogo--mesa .dialogo__rodape { padding: var(--esp-4) var(--esp-8); box-shadow: var(--sombra-3); gap: var(--esp-3); }
.dialogo--mesa .dialogo__rodape > :first-child { margin-right: auto; }
.dialogo--mesa .dialogo__rodape > .texto-secundario { align-self: center; }
@media (max-width: 1023.98px) {
  .dialogo--mesa .mesa-registro > .resumo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "documentos" "registro" "equipe" "principal" "contexto"; gap: var(--esp-6); }
  .dialogo--mesa .dialogo__corpo { padding: var(--esp-6); }
  .mesa-registro__contexto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: var(--esp-6); position: static; height: auto; max-height: none; overflow: visible; }
  .mesa-registro__contexto > .bloco-registro:not(.bloco-registro--conferencia) { padding: var(--esp-5); }
  .estacao-documental { grid-template-columns: minmax(0, 1fr); }
  .estacao-documental > h4.resumo__titulo { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  dialog.dialogo--mesa { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; inset: 0; }
  
  
  
  
  
  
  .dialogo--mesa .dialogo__corpo { padding: var(--esp-5); }
  .dialogo--mesa .mesa-registro > .resumo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "documentos" "registro" "equipe" "principal" "contexto"; gap: var(--esp-6); }
  .estado-documental { flex-wrap: wrap; align-items: flex-start; }
  .estado-documental > div { flex-basis: calc(100% - var(--esp-8)); }
  .estado-documental > .botao { margin-left: var(--esp-6); }
  .mesa-registro__principal, .mesa-registro__contexto { gap: var(--esp-6); }
  .mesa-registro__contexto { grid-template-columns: minmax(0, 1fr); }
  .estacao-documental { display: block; }
  .estacao-documental__cabecalho { padding: 0; margin-bottom: var(--esp-3); }
  .estacao-documental .resumo__documentos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
  .estacao-documental__peca { grid-template-columns: minmax(0, 1fr); }
  .estacao-documental__peca > .peca-documental { width: 100%; }
  .estacao-documental__peca > .assinatura-documental > :is(.assinatura-documental__estado, .botao, pc-menu, .registro__texto) { grid-column: 1; justify-content: flex-start; margin: 0 var(--esp-4) var(--esp-2); }
  .assinatura-documental { gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); }
  .assinatura-documental > .botao { font-size: var(--texto-xs); padding: 0 var(--esp-2); }
  .dialogo--mesa .resumo__cartoes { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }
  .dialogo--mesa .pessoas--faixa > .pessoa { border-bottom: 0; }
  .equipe-transporte, .dados-copiaveis { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
  .dado-copiavel textarea { min-height: calc(var(--esp-20) + var(--esp-4)); }
  .percurso-registro__trecho { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) 0; }
  .percurso-registro__rota { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto) minmax(0, 1fr); gap: var(--esp-3); }
  .percurso-registro__ponto time { font-size: var(--texto-lg); }
  .missao-registro__texto { font-size: var(--texto-lg); }
  .dialogo--mesa .dialogo__rodape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--esp-3) var(--esp-4); gap: var(--esp-2); }
  .dialogo--mesa .dialogo__rodape > :first-child { margin-right: 0; }
  .dialogo--mesa .dialogo__rodape > .botao--primario, .dialogo--mesa .dialogo__rodape > .dialogo__acao { grid-column: 1 / -1; }
  .dialogo--mesa .dialogo__rodape > form:has(> .botao--primario) { grid-column: 1 / -1; }
  .dialogo--mesa .dialogo__rodape .botao { width: 100%; }
}

/* Registros de relações: equipe/transporte sem uma coluna financeira vazia. */
.registros--operacionais > .registro.registro-operacional--relacoes { grid-template-areas: "identidade acoes" "titulo titulo" "estado estado" "agenda agenda" "recursos recursos"; }
.preparacao-relacoes { display: grid; gap: var(--esp-5); align-items: start; }
.documento--preparacao .preparacao-relacoes > .secao__bloco { margin-top: 0; }
.campos.campos--conteudo-periodo { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .registros--operacionais > .registro.registro-operacional--relacoes { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1fr) var(--altura-controle); grid-template-areas: "identidade titulo acoes" "identidade estado acoes" "identidade agenda acoes" "identidade recursos acoes"; }
  .campos.campos--conteudo-periodo { grid-template-columns: minmax(0, 2fr) minmax(calc(var(--esp-12) * 6), 1fr); }
}
@media (min-width: 1024px) {
  .preparacao-relacoes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .registros--operacionais > .registro.registro-operacional--relacoes { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1.3fr) minmax(0, 1fr) var(--altura-controle); grid-template-areas: "identidade titulo recursos acoes" "identidade estado recursos acoes" "identidade agenda recursos acoes"; }
}

/* Agenda de preparação: conteúdo, período e horário; escolha livre ocupa a linha
   seguinte. Mesma composição no formulário e no diálogo de evento. */
.campos.campos--agenda { display: grid; grid-template-columns: minmax(0, 1fr); }
.campos--agenda > .programa-plano__outro { order: 1; grid-column: 1 / -1; }
.campos.campos--coordenacao { display: grid; grid-template-columns: minmax(0, 1fr); }
.campos--coordenacao > :is(.coordenador__cadastro, .coordenador__manual) { grid-column: 1 / -1; }
.documento--preparacao .secao__bloco--integrado { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 768px) {
  .campos.campos--coordenacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos.campos--agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos--agenda > .campo:has(> pc-escolhas) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .campos.campos--agenda { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .campos--agenda > .campo:has(> pc-escolhas) { grid-column: auto; }
  .campos.campos--coordenacao { grid-template-columns: repeat(2, calc(var(--esp-12) * 4.5)) repeat(2, minmax(0, 1fr)); }
  .campos--coordenacao > .coordenador__cadastro { grid-column: span 2; }
  .campos--coordenacao > .coordenador__manual { grid-column: auto; }
}

/* Metadado que navega também conserva contraste no cabeçalho institucional. */







/* Lançamento quantitativo: comparação em tabela; rótulos e edição agrupados no móvel. */
.tabela--lancamentos { table-layout: fixed; }
.tabela--lancamentos thead th:nth-child(3) { width: calc(var(--esp-4) * 8); }
.tabela--lancamentos tbody :is(th, td) { vertical-align: top; overflow-wrap: anywhere; }
.tabela--lancamentos tbody td > .entrada { width: 100%; min-width: 0; }
.lancamento__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lancamento__referencia-rotulo { display: none; }
.leitura-textual { max-width: 78ch; line-height: var(--altura-linha); }
@media (max-width: 1023.98px) {
  .tabela--lancamentos, .tabela--lancamentos tbody { display: block; min-width: 0; }
  .tabela--lancamentos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--lancamentos tbody tr { display: grid; grid-template-columns: calc(var(--esp-4) * 6) minmax(0, 1fr); gap: var(--esp-2) var(--esp-3); padding-block: var(--esp-4); border-bottom: var(--borda-sutil); }
  .tabela--lancamentos tbody tr > :is(th, td) { min-width: 0; max-width: none; width: auto; padding: 0; border: 0; }
  .tabela--lancamentos tbody th, .tabela--lancamentos tbody td:nth-child(2) { grid-column: 1 / -1; }
  .tabela--lancamentos .lancamento__rotulo { display: block; position: static; width: auto; height: auto; padding: 0; margin: 0 0 var(--esp-1); overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .lancamento__referencia-rotulo { display: block; color: var(--cor-texto-terciario); font-size: var(--texto-xs); font-weight: var(--peso-semi); margin-bottom: var(--esp-1); }
}

/* Abas de conteúdo: largura intrínseca quando a dimensão tem poucas alternativas. */
.colecao-operacional--consulta .colecao-operacional__indice .abas.abas--conteudo { display: flex; }


/* Registros de consulta: abrir pelo título, sem reservar uma coluna para menu inexistente. */
.registros--operacionais > .registro.registro-operacional--relacoes.registro-operacional--sem-acoes { grid-template-areas: "identidade identidade" "titulo titulo" "estado estado" "agenda agenda" "recursos recursos"; }
@media (min-width: 768px) {
  .registros--operacionais > .registro.registro-operacional--relacoes.registro-operacional--sem-acoes { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1fr); grid-template-areas: "identidade titulo" "identidade estado" "identidade agenda" "identidade recursos"; }
}
@media (min-width: 1280px) {
  .registros--operacionais > .registro.registro-operacional--relacoes.registro-operacional--sem-acoes { grid-template-columns: calc(var(--esp-4) * 8) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "identidade titulo recursos" "identidade estado recursos" "identidade agenda recursos"; }
}

/* No desktop, o prazo/situação acompanha o título. Esta regra precisa vir depois da
   composição operacional: o título deixa de ser `display: contents`, portanto os selos
   passam a pertencer a ele e a antiga faixa `estado` pode ter altura zero. */
@media (min-width: 1024px) {
  .registros--operacionais .registro-operacional .registro__titulo {
    display: flex;
    grid-area: titulo;
    align-items: center;
    align-self: end;
    flex-wrap: nowrap;
    gap: var(--esp-3);
    min-width: 0;
  }
  .registros--operacionais > .registro.registro-operacional {
    grid-template-rows: auto 0 auto;
  }
  .registros--operacionais .registro-operacional .registro__agenda {
    align-self: start;
    margin-top: calc(-1 * var(--esp-2));
  }
  .registros--operacionais .registro-operacional .registro__titulo > .registro__link {
    display: flex;
    flex: 0 1 auto;
    align-items: baseline;
    min-width: 0;
  }
  .registros--operacionais .registro-operacional .registro__titulo > .registro__selos {
    flex: none;
    flex-wrap: nowrap;
  }
}

/* Documentos vinculáveis: várias escolhas em linhas compactas, sem outro cartão. */
.campo--documentos .caixas { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--esp-12) * 8)), 1fr)); gap: var(--esp-1) var(--esp-3); }
.campo--documentos .caixas__item { align-items: center; min-height: var(--altura-controle-sm); padding: var(--esp-2); border: 0; border-bottom: var(--borda-sutil); border-radius: var(--raio-sm); background: transparent; font-size: var(--texto-sm); }
.campo--documentos .caixas__item:hover { background: var(--cor-superficie-sutil); }
.campo--documentos .caixas__item:has(input:checked) { background: var(--cor-superficie-realce); font-weight: var(--peso-semi); }
.campo--documentos .caixas__item:has(input:focus-visible) { outline-offset: calc(var(--filete-fino) * -1); }

/* Relações documentais: abrir o registro de origem, sem presumir arquivo corrente. */
.relacoes-documentais { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); list-style: none; padding: 0; margin: 0; }
.relacoes-documentais > li { min-width: 0; border-bottom: var(--borda-sutil); }
.relacoes-documentais .peca-documental { height: 100%; padding: var(--esp-3) 0; color: var(--cor-texto); text-decoration: none; border-radius: var(--raio-sm); }
.relacoes-documentais .peca-documental:hover { background: var(--cor-superficie-sutil); }
.relacoes-documentais .peca-documental:focus-visible { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-offset); }
.relacoes-documentais .ficha-documental__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.conferencia-etapas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); list-style: none; margin: 0; padding: 0; }
.conferencia-etapas__etapa { display: grid; gap: var(--esp-2); padding-left: var(--esp-3); border-left: var(--filete-fino) solid var(--cor-marca); min-width: 0; font-size: var(--texto-sm); }
.conferencia-etapas__itens { display: grid; gap: var(--esp-2); list-style: none; padding: 0; margin: 0; color: var(--cor-texto-secundario); }
.conferencia-etapas a { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); color: var(--cor-texto); text-underline-offset: var(--esp-05); }
@media (min-width: 768px) {
  .conferencia-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao__grupo.secao__grupo--relacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao__grupo--relacoes > .secao__bloco:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Roteiro com a viagem em andamento (estado_trecho): a linha mantém o desenho padrão; só o veículo se mexe — no
   trecho da vez a viatura vai e volta pelo fio; esperando a saída, ela pulsa. Quem pede movimento reduzido não vê
   animação (base.css). */
.percurso-registro__trecho--andando .percurso-registro__fio { position: relative; min-height: 1.25rem; }
/* O fio vira uma linha só (o mesmo desenho: metade clara, metade em degradê até o dourado) para a viatura passar. */
.percurso-registro__trecho--andando .percurso-registro__fio::before { background: linear-gradient(to right, var(--cor-marca-borda) 50%, var(--cor-marca)); }
.percurso-registro__trecho--andando .percurso-registro__fio::after { display: none; }
.percurso-registro__trecho--andando .percurso-registro__fio > .icone {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 var(--esp-1);
  box-sizing: content-box;
  background: var(--cor-superficie-sutil);
  translate: 0 -50%;
  /* Ida e volta devagar (20s) e, ao mesmo tempo, o sobe e desce de quem está rodando. */
  animation: viatura-ida-volta 20s ease-in-out infinite, viatura-sacudir 0.6s ease-in-out infinite alternate;
}
.dialogo--mesa .mesa-registro__principal .percurso-registro__trecho--andando:hover .percurso-registro__fio > .icone { background: var(--cor-superficie); }
@keyframes viatura-sacudir { from { translate: 0 -50%; } to { translate: 0 calc(-50% - 2px); } }
.percurso-registro__trecho--proximo .percurso-registro__fio > .icone { animation: veiculo-pulsar 1.6s ease-in-out infinite; }
@keyframes viatura-ida-volta {
  0% { left: 0; transform: rotateY(0deg); }
  44% { left: calc(100% - 1.5rem); transform: rotateY(0deg); }
  50% { left: calc(100% - 1.5rem); transform: rotateY(180deg); }
  94% { left: 0; transform: rotateY(180deg); }
  100% { left: 0; transform: rotateY(360deg); }
}
@keyframes veiculo-pulsar { 50% { scale: 1.25; color: var(--cor-marca-texto); } }

/* "Voltar para …" dentro da barra de ações (voltar-na-barra.js): deixa de flutuar e vira o primeiro botão da barra. */
.barra-acoes > .voltar-tarefa--na-barra { position: static; inset: auto; margin-right: var(--esp-3); box-shadow: none; flex: none; }

/* Equipe vazia e Motorista de outro ofício (folha do ofício): o mesmo cartão — borda fina sólida, fundo sutil, cantos largos. */
.documento .equipe__vazia,
.documento .pessoa-externa { border: var(--borda-sutil); border-radius: var(--raio-lg); background: var(--cor-superficie-sutil); }
.pessoa-externa > summary:hover, .pessoa-externa > summary:focus-visible { border-radius: var(--raio-lg); }
/* O cartão do motorista de outro ofício é o próprio "summary": a altura mínima fica nele (e não no cartão), para o
   hover e o foco cobrirem o cartão inteiro, sem fitas sem resposta em cima e embaixo. */
.documento .pessoa-externa { min-height: 0; align-content: start; }
.documento .pessoa-externa > summary { min-height: calc(var(--esp-16) + var(--esp-3) - 2px); align-items: center; }
.documento .equipe__vazia { min-height: calc(var(--esp-16) + var(--esp-3)); }
/* Hover do cartão: só clareia o fundo (como as linhas das listas), sem escurecer nem trocar a cor do ícone. */
.documento .pessoa-externa > summary:hover { background: var(--cor-superficie); }
.documento .pessoa-externa:has(> summary:hover) { border-color: var(--cor-borda); }
.documento .pessoa-externa > summary:hover .pessoa-externa__marca { background: var(--cor-superficie-realce); }
/* Cartão aberto: os campos entram direto, sem o fio entre o cabeçalho e o corpo. */
.documento .pessoa-externa[open] > .divulgacao__corpo { border-top: 0; padding-top: var(--esp-1); }

/* Equipe e viatura na folha do ofício: os mesmos cartões dos demais da folha (borda fina, fundo sutil, cantos
   largos) e todos da mesma altura — pessoa, viatura, "Ninguém na equipe" e "Motorista de outro ofício". O hover só
   clareia o fundo e firma a borda, como no cartão do motorista; o avatar não muda. */
.documento .equipe__cartao,
.documento .recurso-selecionado {
  min-height: calc(var(--esp-16) + var(--esp-3));
  align-items: center;
  border: var(--borda-sutil);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
  box-shadow: none;
}
.documento .equipe__cartao:hover,
.documento .equipe__cartao:has(.equipe__motorista-alvo:focus-visible),
.documento .recurso-selecionado:hover { background: var(--cor-superficie); border-color: var(--cor-borda); box-shadow: none; }
.documento .equipe__motorista-alvo { border-radius: var(--raio-lg); }
/* Mais contraste no texto: nome em cor plena e o detalhe um tom acima do terciário. */
.documento :is(.equipe__cartao, .recurso-selecionado) .pessoa__nome { color: var(--cor-texto); }
.documento :is(.equipe__cartao, .recurso-selecionado) .pessoa__meta { color: var(--cor-texto-secundario); }

/* Cor do hover dos cartões (borda e título): tokens --hover-cartao-* em tokens.css. */
.registros--operacionais > .registro-operacional:hover .registro__link { color: var(--hover-cartao-texto); }

/* Hover dos cartões da folha (pessoa, viatura, motorista de outro ofício): o cartão "se levanta" — sobe 1px, ganha
   sombra suave e borda dourada clara, e o X de remover acende. Tudo em transição
   curta; com movimento reduzido fica só a mudança de cor (base.css zera as transições). */
.documento .equipe__cartao,
.documento .recurso-selecionado,
.documento .pessoa-externa {
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao);
}
.documento .equipe__cartao .avatar,
.documento .recurso-selecionado .avatar,
.documento .pessoa-externa__marca { transition: box-shadow var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.documento .equipe__cartao:hover,
.documento .equipe__cartao:has(.equipe__motorista-alvo:focus-visible),
.documento .recurso-selecionado:hover,
.documento .pessoa-externa:has(> summary:hover) {
  background: var(--cor-superficie);
  border-color: var(--hover-cartao-borda);
  box-shadow: var(--sombra-2);
  translate: 0 -1px;
}
.documento .pessoa-externa > summary:hover { background: transparent; }
.documento .pessoa-externa > summary:hover .pessoa-externa__marca { color: var(--hover-cartao-texto); }
.documento .equipe__cartao:hover .equipe__acao,
.documento .recurso-selecionado:hover .equipe__acao { color: var(--cor-texto); }

/* Mais vida no hover: o avatar cresce um pouco e o nome ganha o tom da marca; o X de remover ganha um fundo redondo ao apontar para ele. */
.documento .equipe__cartao,
.documento .recurso-selecionado,
.documento .pessoa-externa { position: relative; }
.documento .equipe__cartao .avatar,
.documento .recurso-selecionado .avatar,
.documento .pessoa-externa__marca { transition: box-shadow var(--duracao-rapida) var(--curva-padrao), scale var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.documento .equipe__cartao:hover .avatar,
.documento .recurso-selecionado:hover .avatar,
.documento .pessoa-externa > summary:hover .pessoa-externa__marca { scale: 1.06; }
.documento :is(.equipe__cartao, .recurso-selecionado) .pessoa__nome,
.documento .pessoa-externa__titulo { transition: color var(--duracao-rapida) var(--curva-padrao); }
.documento :is(.equipe__cartao, .recurso-selecionado):hover .pessoa__nome,
.documento .pessoa-externa > summary:hover .pessoa-externa__titulo { color: var(--hover-cartao-texto); }
.documento :is(.equipe__cartao, .recurso-selecionado) .equipe__acao { border-radius: var(--raio-pilula); transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.documento :is(.equipe__cartao, .recurso-selecionado) .equipe__acao:hover { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }

/* Primeiro cartão de cada coluna da seção 2 na mesma altura: o da equipe (pessoa ou "Ninguém na equipe") e o do
   transporte (viatura ou, sem viatura, o "Motorista de outro ofício"). O espaço da viatura some quando não há
   viatura escolhida — senão a margem dele empurrava o cartão do motorista para baixo. */
.transporte__selecionada:not(:has(> .recurso-selecionado:not([hidden]))) { display: none; }
.documento .pessoa-externa { margin-top: var(--esp-3); }
.documento #equipe .equipe__vazia { margin-top: var(--esp-3); }

/* O mesmo hover dos cartões da folha nos outros cartões que se clicam: os registros das listas (ofícios, roteiros,
   termos…) e os ofícios vinculados do resumo do roteiro. Sobe 1px, sombra suave, borda dourada clara; o avatar ou a
   placa crescem um pouco e o título ganha o tom da marca. Sem o trilho dourado lateral que as listas tinham. */
.registros--operacionais > .registro.registro-operacional,
.dialogo--mesa .pessoa--ligacao {
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao);
}
.registros--operacionais > .registro.registro-operacional:is(:hover, :focus-within),
.dialogo--mesa .mesa-registro__equipe .equipe-transporte > .pessoa--ligacao:is(:hover, :focus-within) {
  background: var(--cor-superficie);
  border-color: var(--hover-cartao-borda);
  box-shadow: var(--sombra-2);
  translate: 0 -1px;
}
.registros--operacionais > .registro-operacional > .placa,
.dialogo--mesa .pessoa--ligacao .avatar { transition: scale var(--duracao-rapida) var(--curva-padrao); }
.registros--operacionais > .registro-operacional:hover > .placa { scale: 1.03; }
.dialogo--mesa .pessoa--ligacao:hover .avatar { scale: 1.06; }
.dialogo--mesa .pessoa--ligacao .pessoa__nome { transition: color var(--duracao-rapida) var(--curva-padrao); }
.dialogo--mesa .pessoa--ligacao:hover .pessoa__nome { color: var(--hover-cartao-texto); }

/* Cartões do resumo (equipe e vínculos). Os vínculos têm o mesmo cartão da equipe; quando o cartão leva a algum
   lugar, ele inteiro é o alvo (o ::after do link cobre o cartão), sem sublinhado nem azul de link: o nome fica na
   cor do texto e, no hover, ganha o tom da marca, o cartão sobe e a seta desliza para a direita. Na abertura do
   resumo os cartões entram em cascata. Tudo segue os tokens de duração (0ms com movimento reduzido). */
.dialogo--mesa .mesa-registro__principal .equipe-transporte { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.dialogo--mesa .mesa-registro__principal .equipe-transporte > .pessoa { flex: 1 1 17rem; align-self: stretch; background: var(--cor-superficie-sutil); border: var(--borda-sutil); border-radius: var(--raio-lg); box-shadow: none; padding: var(--esp-3) var(--esp-4); }
.dialogo--mesa .mesa-registro__principal .equipe-transporte .avatar { width: var(--esp-10); height: var(--esp-10); font-size: var(--texto-xs); }
.dialogo--mesa .mesa-registro__principal .equipe-transporte .avatar--escuro { background: var(--grafite-900); color: var(--neutro-0); }
.dialogo--mesa .mesa-registro__principal .equipe-transporte .pessoa__nome { font-size: var(--texto-md); color: var(--cor-texto); }
.dialogo--mesa .pessoa--ligacao { position: relative; cursor: pointer; }
.dialogo--mesa .pessoa--ligacao a.pessoa__nome { color: var(--cor-texto); text-decoration: none; }
.dialogo--mesa .pessoa--ligacao a.pessoa__nome::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dialogo--mesa .pessoa--ligacao a.pessoa__nome:focus-visible { outline: none; }
.dialogo--mesa .pessoa--ligacao:has(a.pessoa__nome:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-offset); }
.dialogo--mesa :is(.mesa-registro__equipe, .mesa-registro__principal) .equipe-transporte > .pessoa--ligacao:is(:hover, :focus-within) {
  background: var(--cor-superficie);
  border-color: var(--hover-cartao-borda);
  box-shadow: var(--sombra-2);
  translate: 0 -1px;
}
.dialogo--mesa :is(.mesa-registro__equipe, .mesa-registro__principal) .pessoa--ligacao:is(:hover, :focus-within) .pessoa__nome { color: var(--hover-cartao-texto); }
.dialogo--mesa .equipe-transporte > .pessoa--ligacao:active { translate: 0 0; scale: var(--escala-pressao); box-shadow: var(--sombra-1); }
.dialogo--mesa .pessoa__seta {
  display: inline-flex; flex: none; margin-left: auto; color: var(--cor-texto-terciario); opacity: 0; translate: calc(-1 * var(--esp-2)) 0;
  transition: opacity var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-media) var(--curva-expressiva), color var(--duracao-rapida) var(--curva-padrao);
}
.dialogo--mesa .pessoa--ligacao:is(:hover, :focus-within) .pessoa__seta { opacity: 1; translate: 0 0; color: var(--hover-cartao-texto); }
@media (hover: none) { .dialogo--mesa .pessoa__seta { opacity: 1; translate: 0 0; } }
.dialogo--mesa .resumo__cartoes > .pessoa { animation: aparecer var(--duracao-lenta) var(--curva-padrao) both; }
.dialogo--mesa .resumo__cartoes > .pessoa:nth-child(2) { animation-delay: calc(var(--duracao-rapida) * 0.3); }
.dialogo--mesa .resumo__cartoes > .pessoa:nth-child(3) { animation-delay: calc(var(--duracao-rapida) * 0.6); }
.dialogo--mesa .resumo__cartoes > .pessoa:nth-child(4) { animation-delay: calc(var(--duracao-rapida) * 0.9); }
.dialogo--mesa .resumo__cartoes > .pessoa:nth-child(5) { animation-delay: calc(var(--duracao-rapida) * 1.2); }
.dialogo--mesa .resumo__cartoes > .pessoa:nth-child(n+6) { animation-delay: calc(var(--duracao-rapida) * 1.5); }

/* Totais do percurso numa linha só: "→ Ida 1.812,3 km · 28 h 45" e "↩ Ida e volta 2.417,6 km · 57 h 30", lado a lado. */
.itin--operacional .itin__total { display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--esp-2); min-width: 0; white-space: nowrap; }
.itin--operacional .itin__total > .icone { align-self: center; flex: none; }
.itin--operacional .itin__total-rotulo, .itin--operacional .itin__total-valor { grid-column: auto; }
.itin--operacional .itin__total-valor { font-size: var(--texto-md); }
.itin--operacional .itin__total-valor + .itin__total-valor::before { content: "·"; margin-right: var(--esp-2); color: var(--cor-texto-terciario); }
/* As duas medidas nas pontas da linha (Ida à esquerda, Ida e volta à direita); o fio passa a ser da linha inteira. */
.itin--operacional .itin__totais { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-4); border-top: var(--borda-sutil); }
.itin--operacional .itin__totais > .itin__total { border-top: 0; }

/* Mapa acompanha a lista de paradas (desktop): a coluna do mapa estica até a altura da coluna de sede e destinos e o
   mapa ocupa o que sobra — os totais terminam na linha da "Volta à sede". Ao adicionar ou tirar destino, o mapa
   cresce ou encolhe junto (mapa-rota.js redesenha pelo ResizeObserver). Altura mínima para continuar legível. */
@media (min-width: 1024px) {
  .itin--operacional .itin__planejamento { align-items: stretch; }
  .itin--operacional .itin__painel { display: flex; flex-direction: column; }
  .itin--operacional .itin__painel > .itin__rota { flex: 1 1 auto; display: flex; flex-direction: column; min-height: calc(var(--esp-12) * 4); }
  .itin--operacional .itin__painel .itin__mapa { flex: 1 1 auto; height: auto; min-height: calc(var(--esp-12) * 4); }
}

/* Bate-volta no mesmo desenho das paradas do modo normal: sem cartão em volta; número no quadradinho do trilho,
   título pequeno como o rótulo "Destino 1", lixeira só com o ícone; campos com o rótulo em cima e o fundo sutil. */
.itin--operacional .itin__bvs { gap: var(--esp-4); }
.itin--operacional .itin__bv { gap: var(--esp-2); padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.itin--operacional .itin__bv-cabecalho { gap: var(--esp-3); }
.itin--operacional .itin__bv-cabecalho .itin__trecho-numero { display: grid; place-items: center; width: var(--altura-controle-sm); height: var(--altura-controle-sm); flex: none; border-radius: var(--raio-md); 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; }
.itin--operacional .itin__bv-titulo { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.itin--operacional .itin__bv-cabecalho .itin__remover-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.itin--operacional .itin__bv > :not(.itin__bv-cabecalho) { margin-left: calc(var(--altura-controle-sm) + var(--esp-3)); }
.itin--operacional .itin__bv .campo { padding-top: 0; gap: var(--esp-1); }
.itin--operacional .itin__bv .campo__rotulo { position: static; display: block; transform: none; margin: 0; padding: 0; background: transparent; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__bv .itin__uf .campo__rotulo { padding-left: var(--esp-2); }
.itin--operacional .itin__bv :is(.entrada, .seletor__gatilho) { background-color: var(--cor-superficie-sutil); border-color: var(--cor-borda-sutil); }
.itin--operacional .itin__bv-onde { grid-template-columns: calc(var(--esp-4) * 4.5) minmax(0, 1fr); gap: 0; }
.itin--operacional .itin__bv-quando { align-items: end; }
.itin--operacional .itin__bv-rotulo { padding-top: 0; padding-bottom: var(--esp-2); font-size: var(--texto-xs); }

/* Quadradinho do trilho (número/alça/casa da sede) no centro do campo UF: o deslocamento usa a altura real do
   quadradinho (altura-controle-sm), não a do marco redondo antigo (1,75rem) — sobrava 1,8px para baixo. */
.itin--operacional .itin__paradas > :not(.itin__parada--volta, .itin__adicionar) > :is(.itin__alca, .itin__marco) { margin-top: calc(var(--itin-centro) - var(--altura-controle-sm) / 2); }

/* Foco no bate-volta: sem moldura em volta do bloco (era um retângulo dourado de cantos vivos). Como nas paradas,
   quem marca onde a pessoa está é o número do trilho, que fica escuro. */
.itin--operacional .itin__bv:focus-within { outline: none; box-shadow: none; background: transparent; }
.itin--operacional .itin__bv:focus-within .itin__bv-cabecalho .itin__trecho-numero { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.itin--operacional .itin__bv:focus-within .itin__bv-titulo { color: var(--cor-texto); }

/* "Adicionar destino" como uma vaga da lista: o quadradinho do trilho com "+" (tracejado) e, ao lado, uma linha
   tracejada da largura dos campos com o texto e a dica — a próxima parada já aparece no lugar onde vai entrar.
   Ao apontar, a vaga acende em dourado claro e o tracejado vira linha cheia. */
.itin--operacional .itin__adicionar { align-items: center; grid-template-columns: var(--itin-trilho) minmax(0, 1fr) 2.25rem; margin-top: calc(var(--itin-centro) - var(--altura-controle) / 2); }
.itin--operacional .itin__adicionar > .itin__marco { display: inline-grid; margin-top: 0; width: var(--altura-controle-sm); height: var(--altura-controle-sm); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie); box-shadow: none; color: var(--cor-marca-texto); transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__botao-adicionar { width: 100%; min-height: var(--altura-controle); margin: 0; padding: 0 var(--esp-3); gap: var(--esp-2); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-md); background: transparent; color: var(--cor-marca-texto); font-weight: var(--peso-semi); cursor: pointer; transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__botao-adicionar small { display: inline; margin-left: auto; font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.itin--operacional .itin__botao-adicionar > .icone { display: none; }
.itin--operacional .itin__adicionar:has(.itin__botao-adicionar:is(:hover, :focus-visible)) > .itin__marco { border-style: solid; border-color: var(--cor-marca-borda); background: var(--cor-marca-fundo); }
.itin--operacional .itin__botao-adicionar:is(:hover, :focus-visible) { border-style: solid; border-color: var(--cor-marca-borda); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); text-decoration: none; }

/* Animação do "Adicionar destino": ao apontar, o dourado claro preenche a vaga da esquerda para a direita (como uma
   linha sendo "reservada"), a borda fica cheia e o quadradinho do trilho acende junto; o "+" cresce de leve. Ao clicar,
   a vaga afunda um pouco. Só cor, tamanho de fundo e escala; zerado com movimento reduzido. */
.itin--operacional .itin__botao-adicionar {
  background-color: transparent;
  background-image: linear-gradient(var(--cor-marca-fundo), var(--cor-marca-fundo));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--duracao-media) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao), scale var(--duracao-rapida) var(--curva-padrao);
}
.itin--operacional .itin__botao-adicionar:is(:hover, :focus-visible) { background-color: transparent; background-image: linear-gradient(var(--cor-marca-fundo), var(--cor-marca-fundo)); background-repeat: no-repeat; background-size: 100% 100%; }
.itin--operacional .itin__botao-adicionar small { transition: color var(--duracao-media) var(--curva-padrao); }
.itin--operacional .itin__botao-adicionar:is(:hover, :focus-visible) small { color: var(--cor-marca-texto); }
.itin--operacional .itin__adicionar > .itin__marco .icone { transition: scale var(--duracao-media) var(--curva-padrao); }
.itin--operacional .itin__adicionar:has(.itin__botao-adicionar:is(:hover, :focus-visible)) > .itin__marco .icone { scale: 1.2; }
.itin--operacional .itin__botao-adicionar:active { scale: 0.99; }
/* Trechos: cada deslocamento é um cartão, com o número no mesmo marcador quadrado das
   paradas; à esquerda a rota, à direita uma única linha de campos — a chegada calculada lê
   como um campo somente-leitura, da mesma altura dos outros. */
.itin--operacional .itin__trechos { gap: var(--esp-2); }
.itin--operacional .itin__trecho,
.itin--operacional .itin__trecho:first-child { padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__trecho:hover { border-color: var(--cor-borda-forte); }
.itin--operacional .itin__trecho:focus-within { border-color: var(--hover-cartao-borda); box-shadow: var(--sombra-1); }
.itin--operacional .itin__trecho.itin__trecho--conflito { border-color: var(--cor-perigo-borda); }
.itin--operacional .itin__trecho-cabecalho { gap: 0 var(--esp-3); }
.itin--operacional .itin__trecho-numero { grid-area: numero; align-self: center; font-size: var(--texto-sm); transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__trecho--volta .itin__trecho-numero { border: 0; background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); }
.itin--operacional .itin__trecho:focus-within .itin__trecho-numero { border: 0; background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.itin--operacional .itin__trecho-etapa { grid-area: etapa; line-height: var(--altura-linha-justa); }
.itin--operacional .itin__trecho-rota { grid-area: rota; order: 0; font-size: var(--texto-md); line-height: var(--altura-linha-justa); }
.itin--operacional .itin__trecho-km { grid-area: km; order: 0; justify-self: start; margin: 0; line-height: var(--altura-linha-justa); }
.itin--operacional .itin__passo { border-color: var(--cor-borda-campo); background: var(--cor-superficie); }
.itin--operacional .itin__tempos > .itin__chegada-campo { align-self: auto; padding: 0; background: transparent; border-left: 0; }
.itin--operacional .itin__chegada { display: flex; flex-direction: row; align-items: center; min-height: var(--altura-controle); padding: 0 var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie-sutil); }
.itin--operacional .itin__chegada .indicador__valor { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--esp-2); font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); white-space: nowrap; }
.itin--operacional [data-chegada-hora] { font-size: var(--texto-md); font-weight: var(--peso-forte); color: var(--cor-texto); }
.itin--operacional .itin__trecho:focus-within .itin__chegada { border-color: var(--hover-cartao-borda); }
/* Cabeçalho do trecho: "Deslocamento · 603,5 km" em cima, a rota inteira (sede → destino)
   embaixo, numa linha com espaço próprio. */
.itin--operacional .itin__trecho-cabecalho { grid-template-columns: var(--altura-controle-sm) max-content minmax(0, 1fr); grid-template-areas: "numero etapa km" "numero rota rota"; gap: var(--esp-05) var(--esp-3); align-items: baseline; }
.itin--operacional .itin__trecho-etapa { grid-area: etapa; font-size: var(--texto-xs); line-height: var(--altura-linha-justa); color: var(--cor-texto-secundario); }
.itin--operacional .itin__trecho-rota { grid-area: rota; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-2); margin: 0; min-width: 0; font-size: var(--texto-md); line-height: var(--altura-linha-justa); }
.itin--operacional .itin__trecho-km,
.itin--operacional .itin__trecho-km:not(:empty) { grid-area: km; justify-self: start; margin: 0; padding: 0 0 0 var(--esp-3); border: 0; border-left: var(--borda-sutil); border-radius: 0; background: transparent; font-size: var(--texto-xs); font-weight: var(--peso-normal); line-height: var(--altura-linha-justa); color: var(--cor-texto-secundario); white-space: nowrap; }
.itin--operacional .itin__trecho-km:empty { display: none; }
.itin__trechos-colunas { display: none; }
/* Folha larga: uma tabela — os rótulos sobem para um cabeçalho de colunas e cada trecho
   ocupa uma linha só (as colunas dos cartões e do cabeçalho são as mesmas). */
@media (min-width: 1280px) {
  .itin--operacional { --trechos-colunas: minmax(0, 2fr) minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .95fr); }
  /* Cabeçalho de colunas: uma faixa discreta, com o mesmo recuo dos cartões, ícone e rótulo
     em caixa alta — lê como o topo de uma tabela, não como texto solto. */
  .itin--operacional .itin__trechos-colunas { display: grid; grid-template-columns: var(--trechos-colunas); gap: var(--esp-3); align-items: center; margin-bottom: calc(var(--esp-2) - var(--esp-3)); padding: var(--esp-2) calc(var(--esp-4) + 1px); border: var(--borda-sutil); border-radius: var(--raio-md); background: var(--cor-superficie-sutil); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; line-height: var(--altura-linha-justa); color: var(--cor-texto-secundario); }
  .itin--operacional .itin__trechos-colunas > span { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; white-space: nowrap; }
  .itin--operacional .itin__trechos-colunas .icone { flex: none; color: var(--cor-marca-texto); }
  .itin--operacional .itin__trechos-colunas .campo__obrigatorio { margin-left: calc(var(--esp-2) * -1 + var(--esp-05)); color: var(--cor-marca-texto); }
  .itin--operacional .itin__trechos-colunas small { margin-left: calc(var(--esp-2) * -1 + var(--esp-1)); font-size: var(--texto-2xs); font-weight: var(--peso-normal); letter-spacing: normal; text-transform: none; color: var(--cor-texto-terciario); }
  .itin--operacional .itin__trechos-colunas small::before { content: "· "; }
  .itin--bate-volta .itin__trechos-colunas { display: none; }
  .itin--operacional .itin__trecho { grid-template-columns: var(--trechos-colunas); gap: var(--esp-2) var(--esp-3); align-items: center; }
  .itin--operacional .itin__trecho-cabecalho { grid-column: 1; }
  .itin--operacional .itin__tempos { grid-column: 2 / -1; grid-template-columns: subgrid; gap: var(--esp-3); }
  .itin--operacional .itin__ajustes { grid-column: span 2; grid-template-columns: subgrid; }
  .itin--operacional .itin__aviso { grid-column: 1 / -1; }
  .itin--operacional .itin__trecho .itin__tempos .campo__rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .itin--operacional .itin__trecho .itin__tempos .campo { gap: 0; }
}
/* Chegada: resultado, não campo — cartão polido (mesmo tom dos indicadores) com a bandeira
   de chegada, a data discreta e a hora em destaque. */
.itin--operacional .itin__chegada { gap: var(--esp-2); border: 0; background: linear-gradient(var(--cor-superficie), var(--cor-superficie-sutil)); box-shadow: inset 0 0 0 1px var(--cor-borda); }
.itin--operacional .itin__chegada-icone { flex: none; color: var(--cor-marca-texto); }
.itin--operacional .itin__chegada .indicador__valor { flex: 1; min-width: 0; }
.itin--operacional [data-chegada-data] { font-variant-numeric: tabular-nums; }
.itin--operacional [data-chegada-hora] { font-size: var(--texto-lg); letter-spacing: var(--rastreio-titulo); }
.itin--operacional .itin__trecho:focus-within .itin__chegada { box-shadow: inset 0 0 0 1px var(--hover-cartao-borda); }
/* Diárias logo abaixo dos trechos: sem filete e com um espaço só. */
.documento--preparacao #diarias-secao > .secao__bloco { padding-top: 0; border-top: 0; }
/* Totais do percurso: dois blocos lado a lado (ida | ida e volta), cada um com o ícone num
   marcador quadrado, o rótulo em cima e a distância em destaque com o tempo ao lado. */
.itin--operacional .itin__totais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); overflow: clip; }
.itin--operacional .itin__totais > .itin__total { display: grid; grid-template-columns: var(--altura-controle-sm) auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 var(--esp-3); align-items: baseline; padding: var(--esp-2) var(--esp-3); border: 0; white-space: nowrap; }
.itin--operacional .itin__totais > .itin__total + .itin__total { border-left: 1px solid var(--cor-borda); }
.itin--operacional .itin__totais > .itin__total > .icone { grid-column: 1; grid-row: 1 / 3; align-self: center; box-sizing: border-box; width: var(--altura-controle-sm); height: var(--altura-controle-sm); padding: var(--esp-2); border-radius: var(--raio-md); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); }
.itin--operacional .itin__totais .itin__total-rotulo { grid-column: 2 / -1; grid-row: 1; font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.itin--operacional .itin__totais .itin__total-valor { grid-row: 2; grid-column: 2; font-size: var(--texto-lg); font-weight: var(--peso-semi); color: var(--cor-texto); }
.itin--operacional .itin__totais .itin__total-valor:last-child { grid-column: 3; font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.itin--operacional .itin__totais .itin__total-valor + .itin__total-valor::before { content: none; }
/* Diárias da folha = Diárias do Resumo (roteiro curto): valor total no bloco escuro e os dados
   numa linha só, tudo centrado, o texto de cada dado acompanhando a largura da sua coluna. */
.conferencia-serena.conferencia-serena--operacional { border: var(--borda-sutil); border-radius: var(--raio-lg); }
.conferencia-serena--operacional .conferencia-serena__total { justify-items: center; text-align: center; padding: var(--esp-5); border-radius: 0; }
.conferencia-serena--operacional .conferencia-serena__total > strong { font-size: var(--texto-3xl); }
.conferencia-serena--operacional .conferencia-serena__dados > div { justify-items: center; text-align: center; container-type: inline-size; }
@media (min-width: 1024px) {
  .conferencia-serena.conferencia-serena--operacional { grid-template-columns: minmax(max-content, 1fr) minmax(0, 3fr); }
  .conferencia-serena--operacional .conferencia-serena__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; align-items: center; gap: var(--esp-6); }
  .conferencia-serena--operacional .conferencia-serena__dados:not(:has(> .conferencia-serena__por-servidor)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conferencia-serena--operacional .conferencia-serena__dados > div,
  .conferencia-serena--operacional .conferencia-serena__quantidade { grid-column: auto; }
  .conferencia-serena--operacional .conferencia-serena__dados dd,
  .conferencia-serena--operacional .conferencia-serena__dados > div:first-child dd { font-size: clamp(var(--texto-md), 7.5cqi, var(--texto-3xl)); line-height: var(--altura-linha-justa); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conferencia-serena--operacional .conferencia-serena__dados dt { font-size: clamp(var(--texto-xs), 3.6cqi, var(--texto-md)); }
}
/* Km do trecho ao lado da etapa, sem filete separando. */
.itin--operacional .itin__trecho-km:not(:empty) { padding-left: 0; border-left: 0; }
/* Trechos do bate-volta: o mesmo desenho dos trechos editáveis — cabeçalho de colunas e um
   cartão por dia (data no marcador, rota com a quilometragem ao lado da etapa, ida e volta em
   caixas de resultado, como a chegada). */
.itin--operacional { --gerados-colunas: 3.25rem minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.itin__gerados-colunas { display: none; }
.itin--operacional .itin__gerados { gap: var(--esp-2); border: 0; border-radius: 0; overflow: visible; }
.itin--operacional .itin__gerado { grid-template-columns: var(--gerados-colunas); gap: var(--esp-3); align-items: center; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__gerado + .itin__gerado { border-top: 1px solid var(--cor-borda); }
.itin--operacional .itin__gerado:hover { border-color: var(--cor-borda-forte); background: var(--cor-superficie); }
.itin--operacional .itin__gerado:hover .itin__gerado-dia { transform: none; }
.itin--operacional .itin__gerado-dia { display: grid; place-items: center; align-content: center; height: var(--altura-controle); border-radius: var(--raio-md); background: var(--cor-superficie-realce); font-size: var(--texto-sm); line-height: var(--altura-linha-justa); color: var(--cor-texto); }
.itin--operacional .itin__gerado-dia small { color: var(--cor-texto-secundario); }
.itin--operacional .itin__gerado-trecho { display: grid; gap: var(--esp-05); min-width: 0; }
.itin--operacional .itin__gerado-etapa { display: flex; gap: var(--esp-3); font-size: var(--texto-xs); line-height: var(--altura-linha-justa); color: var(--cor-texto-secundario); }
.itin--operacional .itin__gerado-km { font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.itin--operacional .itin__gerado-rota { gap: 0 var(--esp-2); font-size: var(--texto-md); line-height: var(--altura-linha-justa); }
.itin--operacional .itin__gerado-horas { justify-content: start; gap: var(--esp-3); min-height: var(--altura-controle); padding: 0 var(--esp-3); border-radius: var(--raio-md); background: linear-gradient(var(--cor-superficie), var(--cor-superficie-sutil)); box-shadow: inset 0 0 0 1px var(--cor-borda); font-size: var(--texto-md); font-weight: var(--peso-semi); }
.itin--operacional .itin__gerado-horas > span { font-weight: var(--peso-normal); }
@media (min-width: 1280px) {
  .itin--operacional .itin__gerados-colunas { display: grid; grid-template-columns: var(--gerados-colunas); margin-bottom: var(--esp-2); }
  .itin--operacional .itin__gerados-colunas > :first-child { grid-column: 1 / 3; }
  .itin--operacional .itin__gerado-horas small:not(.itin__gerado-seguinte) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Dados para o eProtocolo: cada dado é um cartão (rótulo em cima, valor embaixo, "Copiar" à
   direita, no meio da altura) — o mesmo cartão e o mesmo hover dos outros cartões da folha.
   Copiado, o botão fica verde por um instante. */
.divulgacao--copiavel .dados-copiaveis { gap: var(--esp-3); margin: var(--esp-3) 0 0; }
.divulgacao--copiavel .divulgacao__corpo { gap: var(--esp-3); }
.divulgacao--copiavel .dado-copiavel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: var(--esp-1) var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao); }
.divulgacao--copiavel .dado-copiavel:hover { translate: 0 -1px; border-color: var(--hover-cartao-borda); box-shadow: var(--sombra-2); }
.divulgacao--copiavel .dado-copiavel > .campo__rotulo { grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
.divulgacao--copiavel .dado-copiavel > .linha { display: contents; }
.divulgacao--copiavel .dado-copiavel .entrada[readonly] { grid-column: 1; grid-row: 2; font-size: var(--texto-md); }
.divulgacao--copiavel .dado-copiavel .entrada[readonly]::placeholder { font-weight: var(--peso-normal); color: var(--cor-texto-terciario); }
.divulgacao--copiavel .dado-copiavel textarea.entrada[readonly] { padding: 0; border: 0; background: transparent; font-size: var(--texto-sm); }
.divulgacao--copiavel .dado-copiavel > .linha > .botao,
.divulgacao--copiavel .dado-copiavel--largo > .linha > .botao { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; min-height: var(--altura-controle-sm); padding: 0 var(--esp-3); border-radius: var(--raio-sm); --botao-fundo: var(--cor-superficie-sutil); --botao-borda: var(--cor-borda); color: var(--cor-texto-secundario); }
.divulgacao--copiavel .dado-copiavel:hover > .linha > .botao { --botao-fundo: var(--cor-marca-fundo); --botao-borda: var(--cor-marca-borda); color: var(--cor-marca-texto); }
.divulgacao--copiavel .dado-copiavel > .linha > .botao[data-copiado],
.divulgacao--copiavel .dado-copiavel:hover > .linha > .botao[data-copiado],
[data-copiar-alvo][data-copiado] { --botao-fundo: var(--cor-sucesso-fundo); --botao-fundo-hover: var(--cor-sucesso-fundo); --botao-borda: var(--cor-sucesso-borda); --botao-texto: var(--cor-sucesso); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso); }
/* "Copiar tudo" (primário): copiado, vira verde sólido — com o mouse em cima também, sem
   voltar ao grafite do hover com o texto verde ilegível por cima. */
.botao--primario[data-copiar-alvo][data-copiado],
.botao--primario[data-copiar-alvo][data-copiado]:hover { --botao-fundo: var(--cor-sucesso-solida); --botao-fundo-hover: var(--cor-sucesso-solida); --botao-borda: var(--cor-sucesso-solida); --botao-texto: var(--neutro-0); border-color: var(--cor-sucesso-solida); color: var(--neutro-0); }
.divulgacao--copiavel .dado-copiavel--largo { grid-template-rows: auto auto; }
/* Conferência do cadastro: um cartão como os outros da folha (sem a fita lateral). O ícone
   mora num marcador quadrado na cor do estado (âmbar falta, verde pronto); cada pendência é
   um atalho clicável — ícone, o que falta e a seta que leva até o campo. */
.prontidao-documental { padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie); }
.prontidao-documental--pronta { border-color: var(--cor-sucesso-borda); }
.prontidao-documental__cabecalho { align-items: center; }
.prontidao-documental__cabecalho > .icone { box-sizing: border-box; width: var(--altura-controle); height: var(--altura-controle); margin: 0; padding: var(--esp-2); border-radius: var(--raio-md); background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.prontidao-documental--pronta .prontidao-documental__cabecalho > .icone { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.prontidao-documental__rotulo { margin-bottom: var(--esp-05); }
.prontidao-documental .checklist { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.prontidao-documental .checklist__item { margin: 0; padding: 0; border: 0; }
.prontidao-documental .checklist__item a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--altura-controle); padding: 0 var(--esp-3); border: 1px solid var(--cor-aviso-borda); border-radius: var(--raio-sm); background: var(--cor-aviso-fundo); color: var(--cor-texto); font-weight: var(--peso-medio); 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), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.prontidao-documental .checklist__item a > .icone:first-child { color: var(--cor-aviso); }
.prontidao-documental .checklist__item--aviso a { border-color: var(--cor-borda); background: var(--cor-superficie-sutil); }
.prontidao-documental .checklist__item--aviso a > .icone:first-child { color: var(--cor-texto-secundario); }
.prontidao-documental .checklist__item a > .icone--seta { color: var(--cor-texto-secundario); transition: translate var(--duracao-rapida) var(--curva-padrao); }
.prontidao-documental .checklist__item a:hover { translate: 0 -1px; border-color: var(--hover-cartao-borda); background: var(--cor-marca-fundo); box-shadow: var(--sombra-1); }
.prontidao-documental .checklist__item a:hover > .icone--seta { translate: 2px 0; color: var(--cor-marca-texto); }
@media (min-width: 1024px) {
  .preparacao-documental--conferencia .prontidao-documental,
  .prontidao-documental { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* "Copiar" com o mouse em cima: o mesmo dourado do cartão — nunca a borda grafite do hover
   genérico de botão. */
.divulgacao--copiavel .dado-copiavel > .linha > .botao:hover:not([data-copiado]) { --botao-fundo-hover: var(--cor-marca-fundo); border-color: var(--cor-marca-borda); color: var(--cor-marca-texto); }
.divulgacao--copiavel .dado-copiavel > .linha > .botao[data-copiado]:hover { border-color: var(--cor-sucesso-borda); }
@media (min-width: 1024px) {
  /* Sem o botão de emitir, as pendências encostam na borda direita do cartão. */
  .prontidao-documental:not(:has(> .botao)) { grid-template-columns: auto minmax(0, 1fr); }
}
/* Conferência animada: pendente, o marcador âmbar "respira" (um anel que se abre e some) e
   cada pendência entra deslizando, com a seta dando um toque de tempos em tempos — chama o
   olho sem piscar. Pronta, o carimbo bate uma vez. Movimento reduzido: tudo parado (base.css). */
.prontidao-documental:not(.prontidao-documental--pronta) .prontidao-documental__cabecalho > .icone { animation: conferencia-respirar 2.8s var(--curva-padrao) infinite; }
.prontidao-documental--pronta .prontidao-documental__cabecalho > .icone { animation: carimbar var(--duracao-enfase) var(--curva-expressiva) backwards; }
.prontidao-documental .checklist__item { animation: conferencia-entrar var(--duracao-lenta) var(--curva-expressiva) backwards; }
.prontidao-documental .checklist__item:nth-child(2) { animation-delay: 80ms; }
.prontidao-documental .checklist__item:nth-child(n + 3) { animation-delay: 160ms; }
.prontidao-documental .checklist__item a > .icone--seta { animation: conferencia-cutucar 2.8s var(--curva-padrao) infinite; }
.prontidao-documental .checklist__item a:hover > .icone--seta { animation: none; }
@keyframes conferencia-respirar {
  0%, 55%, 100% { box-shadow: 0 0 0 0 transparent; }
  10% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-aviso-solida) 45%, transparent); }
  45% { box-shadow: 0 0 0 var(--esp-2) transparent; }
}
@keyframes conferencia-entrar {
  from { opacity: 0; transform: translateX(var(--esp-4)); }
  to { opacity: 1; transform: none; }
}
@keyframes conferencia-cutucar {
  0%, 70%, 100% { translate: 0 0; }
  78% { translate: 3px 0; }
  86% { translate: 0 0; }
  92% { translate: 2px 0; }
}
/* Conferência com o mouse em cima: o cartão sobe como os outros da folha, a borda acende na
   cor do estado e o marcador cresce um pouco. */
.prontidao-documental { transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao), translate var(--duracao-rapida) var(--curva-padrao); }
.prontidao-documental:hover { translate: 0 -1px; border-color: var(--cor-aviso-borda); box-shadow: var(--sombra-2); }
.prontidao-documental--pronta:hover { border-color: var(--cor-sucesso-borda); }
.prontidao-documental__cabecalho > .icone { transition: scale var(--duracao-rapida) var(--curva-expressiva); }
.prontidao-documental:hover .prontidao-documental__cabecalho > .icone { scale: 1.08; }
.prontidao-documental__titulo { transition: color var(--duracao-rapida) var(--curva-padrao); }
.prontidao-documental:not(.prontidao-documental--pronta):hover .prontidao-documental__titulo { color: var(--cor-aviso); }
/* O que falta, depois do clique na pendência: o campo acende em âmbar e pulsa duas vezes; o
   rótulo "(para emitir)" ganha a cor do aviso. Some sozinho depois de alguns segundos. */
.campo.campo--falta :is(.entrada, .selecao, .seletor__gatilho, .itin__passo) { border-color: var(--cor-aviso-solida); animation: campo-falta 1.2s var(--curva-padrao) 2; }
.campo.campo--falta > .campo__rotulo,
.campo.campo--falta > .campo__rotulo .campo__opcional { color: var(--cor-aviso); }
.secao--falta { animation: secao-falta 1.2s var(--curva-padrao) 2; border-radius: var(--raio-md); }
@keyframes campo-falta {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-aviso-solida) 55%, transparent); }
  70% { box-shadow: 0 0 0 var(--esp-2) transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes secao-falta {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-aviso-solida) 40%, transparent); }
  70% { box-shadow: 0 0 0 var(--esp-3) transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Mais presença enquanto falta algo: o marcador pulsa (cresce e solta um anel âmbar mais
   largo), o ícone de alerta da pendência balança e um brilho atravessa o atalho — os três no
   mesmo compasso, a cada 2,4 s. Movimento reduzido: tudo parado. */
.prontidao-documental:not(.prontidao-documental--pronta) .prontidao-documental__cabecalho > .icone { animation: conferencia-pulsar 2.4s var(--curva-padrao) infinite; }
.prontidao-documental .checklist__item:not(.checklist__item--aviso) a { background-image: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--neutro-0) 75%, transparent) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; background-position: 150% 0; animation: conferencia-brilho 2.4s var(--curva-padrao) infinite, conferencia-anel 2.4s var(--curva-padrao) infinite; }
.prontidao-documental .checklist__item:not(.checklist__item--aviso) a > .icone:first-child { transform-origin: 50% 20%; animation: conferencia-balancar 2.4s var(--curva-padrao) infinite; }
.prontidao-documental .checklist__item a:hover,
.prontidao-documental .checklist__item a:hover > .icone:first-child { animation: none; }
@keyframes conferencia-pulsar {
  0%, 60%, 100% { scale: 1; box-shadow: 0 0 0 0 transparent; }
  8% { scale: 1.12; box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-aviso-solida) 60%, transparent); }
  18% { scale: 1; }
  45% { box-shadow: 0 0 0 var(--esp-3) transparent; }
}
@keyframes conferencia-brilho {
  0%, 30% { background-position: 150% 0; }
  60%, 100% { background-position: -50% 0; }
}
@keyframes conferencia-anel {
  0%, 60%, 100% { box-shadow: 0 0 0 0 transparent; }
  8% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-aviso-solida) 45%, transparent); }
  45% { box-shadow: 0 0 0 var(--esp-2) transparent; }
}
@keyframes conferencia-balancar {
  0%, 30%, 100% { rotate: 0deg; }
  4% { rotate: -14deg; }
  9% { rotate: 12deg; }
  14% { rotate: -8deg; }
  19% { rotate: 5deg; }
  24% { rotate: 0deg; }
}
/* Equipe e transporte (ofício, termo…): quando só um dos dois existe, ele ocupa a linha toda. */
.secao__grupo > .secao__bloco:only-child { grid-column: 1 / -1; }
/* Menu do que vem do cadastro, aberto de dentro do documento (entidades-documento.js). */
.entidade-menu { position: fixed; z-index: var(--z-dica); display: grid; min-width: calc(var(--esp-12) * 5); padding: var(--esp-1); animation: aparecer var(--duracao-rapida) var(--curva-padrao); }
.entidade-menu__titulo { margin: 0; padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.entidade-menu .menu__item { display: flex; align-items: center; gap: var(--esp-2); }
.entidade-menu .menu__item .icone { color: var(--cor-marca-texto); }
/* A janela que recebe o bloco da folha (Equipe, Transporte): a mesma folha, sem moldura de papel. */
.dialogo--bloco-folha .dialogo__corpo.documento { margin: 0; padding: var(--esp-4) var(--esp-5); border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.dialogo--bloco-folha .dialogo__corpo > .secao__bloco { margin: 0; padding: 0; border: 0; }
.dialogo.dialogo--bloco-folha.dialogo--bloco-amplo { width: min(calc(var(--esp-12) * 30), calc(100vw - var(--esp-8))); max-width: none; }
/* Motorista escolhido: um gesto só, fluido — o avatar cresce de leve e assenta, o volante dá
   meia-volta e para (sem quique), e um anel dourado se abre em volta do cartão. Só
   propriedades que a placa de vídeo anima (escala, giro, sombra), sem 3D. */
.equipe__cartao.equipe__cartao--assumiu { animation: motorista-cartao 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.equipe__cartao--assumiu > .avatar { animation: motorista-avatar 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.equipe__cartao--assumiu > .avatar .icone { animation: motorista-volante 620ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes motorista-cartao {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-marca) 45%, transparent); }
  100% { box-shadow: 0 0 0 var(--esp-3) transparent; }
}
@keyframes motorista-avatar {
  0% { scale: 0.82; }
  60% { scale: 1.06; }
  100% { scale: 1; }
}
@keyframes motorista-volante {
  0% { rotate: -180deg; opacity: 0.4; }
  100% { rotate: 0deg; opacity: 1; }
}
/* Viatura escolhida: o carro entra no quadrado pela esquerda, passa um pouco freando, empina
   a traseira (gira sobre a frente) e assenta. */
.avatar.avatar--viatura-chegando { overflow: hidden; }
.avatar--viatura-chegando .icone { transform-origin: 85% 90%; animation: viatura-chegar 1100ms var(--curva-padrao); }
@keyframes viatura-chegar {
  0% { translate: -240% 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  52% { translate: 12% 0; rotate: 0deg; }
  64% { translate: 0 0; rotate: 16deg; }
  78% { translate: 0 0; rotate: -4deg; }
  90% { rotate: 2deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
/* A chegada se ajusta com um clique (itinerario.js → editarChegada): muda o tempo de viagem. */
.itin--operacional .itin__trecho .itin__chegada { cursor: pointer; transition: box-shadow var(--duracao-rapida) var(--curva-padrao); }
.itin--operacional .itin__trecho .itin__chegada:hover { box-shadow: inset 0 0 0 1px var(--hover-cartao-borda); }
.itin--operacional .itin__chegada.itin__chegada--editando { cursor: default; box-shadow: inset 0 0 0 1px var(--cor-marca); }
.itin__chegada-edicao { display: flex; flex: 1; gap: var(--esp-1); min-width: 0; }
.itin__chegada-edicao .entrada { min-height: calc(var(--altura-controle) - var(--esp-2)); padding: 0 var(--esp-2); font-variant-numeric: tabular-nums; }
.itin__chegada-edicao .entrada:first-child { flex: 1.4; min-width: 0; }
.itin__chegada-edicao .entrada:last-child { flex: 1; min-width: 0; }
/* Janela que recebe uma parte da folha (Equipe, Transporte, Identificação, Roteiro):
   cabeçalho com o ícone da parte, corpo com folga e campos sem corte, rodapé que diz que
   tudo já se salva e o "Concluir" à direita. */
.dialogo.dialogo--bloco-folha { width: min(calc(var(--esp-12) * 18), calc(100vw - var(--esp-8))); max-width: none; }
.dialogo.dialogo--bloco-folha.dialogo--bloco-medio { width: min(calc(var(--esp-12) * 15), calc(100vw - var(--esp-8))); }
.dialogo--bloco-folha .dialogo__cabecalho { align-items: center; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: var(--borda-sutil); }
.dialogo--bloco-folha .dialogo__icone { background: var(--cor-marca-fundo); color: var(--cor-marca-texto); }
.dialogo--bloco-folha .dialogo__titulo { font-size: var(--texto-lg); }
.dialogo--bloco-folha .dialogo__corpo.documento { padding: var(--esp-5); max-height: calc(100dvh - var(--esp-12) * 4); overflow-y: auto; }
.dialogo--bloco-folha .dialogo__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-5); border-top: var(--borda-sutil); background: var(--cor-superficie-sutil); }
.dialogo-bloco__salvo { display: inline-flex; align-items: center; gap: var(--esp-2); margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.dialogo-bloco__salvo .icone { color: var(--cor-sucesso); }
/* Identificação na janela: duas colunas largas — número e data, protocolo e tipo, custeio e
   instituição — em vez das cinco colunas estreitas da folha (que cortavam os rótulos). */
.dialogo--bloco-folha[data-bloco="identificacao"] .dialogo__corpo > .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-4); }
.dialogo--bloco-folha[data-bloco="identificacao"] .dialogo__corpo > .campos > .campo { grid-column: auto; min-width: 0; width: auto; max-width: none; flex: none; }
.dialogo--bloco-folha[data-bloco="identificacao"] .dialogo__corpo > .campos > .campo.condicional { grid-column: 1 / -1; }
/* Editor de documento: o filete e o espaço dobrado acima da estação somem — um espaço só. */
.documento--preparacao .secao__bloco.secao__bloco--estacao { padding-top: 0; border-top: 0; }
/* Barra de ações da folha (ofício, termo, OS, plano…): a mesma barra das listas — cartão
   com borda sutil e cantos arredondados que acompanha a rolagem colada ao pé da tela
   (sem raio embaixo quando gruda). À esquerda Voltar e o estado do salvamento (num selo);
   à direita as ações. */
.barra-acoes.barra-acoes--preparacao { position: sticky; bottom: 0; z-index: var(--z-barra-acoes); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-4) 0 0; padding: var(--esp-3) var(--esp-4); border: var(--borda-sutil); border-radius: var(--raio-lg); background: var(--cor-superficie); box-shadow: none; transition: border-radius var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.barra-acoes.barra-acoes--preparacao[data-grudada] { border-radius: var(--raio-lg) var(--raio-lg) 0 0; box-shadow: var(--sombra-1); }
.barra-acoes--preparacao .barra-acoes__acoes { display: contents; }
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto { order: -1; }
.barra-acoes--preparacao .barra-acoes__acoes > :not(.botao--texto) { order: 1; }
.barra-acoes--preparacao .barra-acoes__acoes > :not(.botao--texto):first-of-type,
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto ~ :not(.botao--texto) { margin-left: 0; }
.barra-acoes--preparacao .barra-acoes__acoes > .botao--texto + * { margin-left: auto; }
.barra-acoes.barra-acoes--preparacao [data-status-salvamento] { order: 0; display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pilula); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); font-size: var(--texto-xs); font-weight: var(--peso-medio); margin-left: 0; }
.barra-acoes.barra-acoes--preparacao .barra-acoes__status--sujo { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.barra-acoes.barra-acoes--preparacao .barra-acoes__status--erro { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
/* =============== Histórico da folha: linha do tempo =============== */
/* Eventos por dia; cada um com o ícone do tipo num marcador redondo sobre um fio vertical.
   Filtro por tipo só com rádios e :has(). Entram em cascata; o "ver completo" desliza. */
.historico-folha { display: grid; gap: var(--esp-3); }
.historico-folha__filtros { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--esp-05); padding: var(--esp-05); border-radius: var(--raio-md); background: var(--cor-superficie-realce); }
.historico-folha__filtros > label { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--altura-controle-sm); padding: 0 var(--esp-3); border-radius: var(--raio-sm); font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--cor-texto-secundario); cursor: pointer; transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.historico-folha__filtros > label > input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.historico-folha__filtros > label:hover { color: var(--cor-texto); }
.historico-folha__filtros > label:has(input:checked) { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-1); font-weight: var(--peso-semi); }
.historico-folha__filtros > label:has(input:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; }
.historico-folha:has(input[value="dados"]:checked) .historico__linha:not([data-tipo="dados"]),
.historico-folha:has(input[value="equipe"]:checked) .historico__linha:not([data-tipo="equipe"]),
.historico-folha:has(input[value="texto"]:checked) .historico__linha:not([data-tipo="texto"]),
.historico-folha:has(input[value="documentos"]:checked) .historico__linha:not([data-tipo="documentos"]),
.historico-folha:has(input:not([value="tudo"]):checked) .historico__dia { display: none; }
.historico-folha .historico__linhas.historico__linhas--operacional { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.historico-folha .historico__dia { margin: var(--esp-3) 0 var(--esp-1); padding-left: calc(var(--altura-controle-sm) + var(--esp-3) + var(--esp-2)); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.historico-folha .historico__dia:first-child { margin-top: 0; }
.historico-folha .historico__linha { position: relative; display: grid; grid-template-columns: var(--altura-controle-sm) minmax(0, 1fr); align-items: center; gap: var(--esp-3); padding: var(--esp-2); border: 0; border-radius: var(--raio-md); background: transparent; transition: background-color var(--duracao-rapida) var(--curva-padrao); animation: historico-entrar 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.historico-folha .historico__linha::before { content: ""; position: absolute; left: calc(var(--esp-2) + var(--altura-controle-sm) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--cor-borda-sutil); }
.historico-folha .historico__dia + .historico__linha::before { top: 50%; }
.historico-folha .historico__linha:has(+ .historico__dia)::before,
.historico-folha .historico__linha:last-child::before { bottom: 50%; }
.historico-folha .historico__dia + .historico__linha:has(+ .historico__dia)::before,
.historico-folha .historico__dia + .historico__linha:last-child::before { display: none; }
.historico-folha .historico__linha:hover { background: var(--cor-superficie-sutil); }
.historico-folha .historico__marcador { position: relative; z-index: 1; display: grid; place-items: center; width: var(--altura-controle-sm); height: var(--altura-controle-sm); border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula); background: var(--cor-superficie); color: var(--cor-texto-secundario); transition: scale var(--duracao-rapida) var(--curva-expressiva), border-color var(--duracao-rapida) var(--curva-padrao); }
.historico-folha .historico__linha:hover .historico__marcador { scale: 1.1; border-color: var(--cor-borda-forte); }
.historico-folha .historico__linha--equipe .historico__marcador { border-color: var(--cor-info-borda); background: var(--cor-info-fundo); color: var(--cor-info); }
.historico-folha .historico__linha--texto .historico__marcador { border-color: var(--cor-marca-borda); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); }
.historico-folha .historico__linha--documentos .historico__marcador { border-color: var(--cor-primaria); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.historico-folha .historico__linha--alerta .historico__marcador { border-color: var(--cor-perigo-borda); background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.historico-folha .historico__detalhe { display: grid; gap: var(--esp-05); min-width: 0; }
.historico-folha .historico__texto { font-size: var(--texto-sm); line-height: var(--altura-linha-justa); color: var(--cor-texto); }
.historico-folha .historico__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); font-size: var(--texto-xs); color: var(--cor-texto-terciario); }
.historico-folha .historico__meta .historico__quando { padding: 0; border: 0; font-variant-numeric: tabular-nums; color: var(--cor-texto-secundario); }
.historico-folha .historico__meta .historico__quem { margin: 0; white-space: normal; }
.historico-folha .historico__linha:nth-child(2) { animation-delay: 40ms; }
.historico-folha .historico__linha:nth-child(3) { animation-delay: 80ms; }
.historico-folha .historico__linha:nth-child(4) { animation-delay: 120ms; }
.historico-folha .historico__linha:nth-child(5) { animation-delay: 160ms; }
.historico-folha .historico__linha:nth-child(6) { animation-delay: 200ms; }
.historico-folha .historico__linha:nth-child(n + 7) { animation-delay: 240ms; }
@keyframes historico-entrar {
  from { opacity: 0; translate: 0 var(--esp-2); }
  to { opacity: 1; translate: 0 0; }
}
.historico-folha__abrir { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--altura-controle-sm); padding: 0 var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula); font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--cor-texto-secundario); cursor: pointer; list-style: none; transition: border-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao), background-color var(--duracao-rapida) var(--curva-padrao); }
.historico-folha__abrir::-webkit-details-marker { display: none; }
.historico-folha__abrir:hover { border-color: var(--hover-cartao-borda); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); }
.historico-folha__seta { transition: rotate var(--duracao-media) var(--curva-padrao); }
.historico-folha__mais[open] .historico-folha__seta { rotate: 180deg; }
.historico-folha__mais > .historico__linhas { margin-top: var(--esp-3); }
.historico-folha__mais[open] .linha-tempo__mais-abrir,
.historico-folha__mais:not([open]) .linha-tempo__mais-fechar { display: none; }
.barra-acoes.barra-acoes--preparacao [data-status-salvamento] { flex: 0 1 auto; width: auto; max-width: 100%; }
.historico-folha:has(input:not([value="tudo"]):checked) .historico__linha::before { display: none; }
.barra-acoes.barra-acoes--preparacao [data-status-salvamento] { margin-right: auto; }
/* Alinhamento do histórico: marcadores na mesma linha de partida do título, dos filtros e
   do botão (a linha recua o próprio respiro com margem negativa — o realce do hover sai um
   pouco para fora, os marcadores não); o dia na coluna dos textos; o fio passa pelo centro
   dos marcadores sem falhas. */
.historico-folha { --historico-marcador: calc(var(--altura-controle-sm) + var(--esp-1)); }
.historico-folha .historico__linhas.historico__linhas--operacional { margin: 0 calc(var(--esp-2) * -1); }
.historico-folha .historico__linha { grid-template-columns: var(--historico-marcador) minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-2); }
.historico-folha .historico__marcador { width: var(--historico-marcador); height: var(--historico-marcador); }
.historico-folha .historico__linha::before { left: calc(var(--esp-2) + var(--historico-marcador) / 2 - 1px); top: 0; bottom: 0; }
.historico-folha .historico__dia { margin: var(--esp-4) 0 var(--esp-1); padding-left: calc(var(--esp-2) + var(--historico-marcador) + var(--esp-3)); }
.historico-folha .historico__dia:first-child { margin-top: var(--esp-1); }
.historico-folha__mais > .historico__linhas { margin-top: var(--esp-2); }
/* O fio da linha do tempo (vence a regra antiga de .historico__linhas--operacional). */
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__linha::before { content: ""; position: absolute; display: block; left: calc(var(--esp-2) + var(--historico-marcador) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--cor-borda-sutil); }
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__dia + .historico__linha::before,
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__linha:first-child::before { top: 50%; }
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__linha:has(+ .historico__dia)::before,
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__linha:last-child::before { bottom: 50%; }
.historico-folha .historico__linhas.historico__linhas--operacional > .historico__dia + .historico__linha:is(:last-child, :has(+ .historico__dia))::before,
.historico-folha:has(input:not([value="tudo"]):checked) .historico__linhas.historico__linhas--operacional > .historico__linha::before { display: none; }
/* O selo do salvamento só fica verde (com o ✓) quando salvou; enquanto salva ou se não deu,
   fica neutro — e vermelho no erro. */
.barra-acoes.barra-acoes--preparacao [data-status-salvamento]:not(.barra-acoes__status--salvo, .barra-acoes__status--sujo, .barra-acoes__status--erro) { background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); }
.barra-acoes.barra-acoes--preparacao [data-status-salvamento]:not(.barra-acoes__status--salvo) > .icone { display: none; }
/* Bate-volta que chega depois da meia-noite: "+1 dia" ao lado da hora. */
.itin__gerado-seguinte { margin-left: var(--esp-1); padding: 0 var(--esp-1); border-radius: var(--raio-pilula); background: var(--cor-aviso-fundo); color: var(--cor-aviso); font-size: var(--texto-2xs); font-weight: var(--peso-semi); }
/* =============== Bate-volta: trechos gerados no desenho do Resumo =============== */
/* Um cartão por dia; a ida e a volta no mesmo eixo — a sede à esquerda e o destino à direita.
   Na ida a viatura corre da sede para o destino; na volta, de frente para a sede, no sentido
   contrário. Ao chegar ao fim ela some e outra surge no começo da linha. */
.itin__gerados.percurso-registro--bv { display: grid; gap: var(--esp-2); margin: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; list-style: none; }
.percurso-registro--bv .percurso-registro__trecho { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.percurso-registro--bv .percurso-registro__trecho + .percurso-registro__trecho { border-top: 1px solid var(--cor-borda); }
.percurso-registro--bv .percurso-registro__trecho:hover { border-color: var(--cor-borda-forte); }
.percurso-registro--bv .percurso-registro__dia { align-self: stretch; place-content: center; justify-items: center; padding: var(--esp-2) 0; border-radius: var(--raio-md); background: var(--cor-superficie-realce); text-align: center; }
.percurso-registro--bv .percurso-registro__dia b { font-size: var(--texto-md); }
.percurso-registro--bv .percurso-registro__dia small { color: var(--cor-marca-texto); }
.percurso-registro__km { margin-top: var(--esp-1); font-size: var(--texto-2xs); font-weight: var(--peso-medio); color: var(--cor-texto-secundario); white-space: nowrap; }
.percurso-registro__pernas { display: grid; min-width: 0; }
.percurso-registro--bv .percurso-registro__rota { grid-template-columns: minmax(0, 1fr) minmax(8rem, 1.6fr) minmax(0, 1fr); align-items: center; gap: var(--esp-4); padding: var(--esp-2) 0; }
.percurso-registro--bv .percurso-registro__rota + .percurso-registro__rota { border-top: 1px dashed var(--cor-borda-sutil); }
.percurso-registro--bv .percurso-registro__ponto time { display: inline-flex; align-items: center; font-size: var(--texto-lg); }
.percurso-registro--bv .percurso-registro__ponto--destino time { justify-content: end; }
.percurso-registro--bv .percurso-registro__ponto time .itin__gerado-seguinte { margin-left: var(--esp-2); letter-spacing: 0; }
.percurso-registro--bv .percurso-registro__duracao { display: inline-flex; align-items: center; gap: var(--esp-1); }
.percurso-registro--bv .percurso-registro__rota--volta .percurso-registro__duracao { color: var(--cor-marca-texto); }
/* A estrada: uma linha só, e a viatura correndo por cima dela. */
.percurso-registro--bv .percurso-registro__fio { position: relative; display: block; height: 1.5rem; overflow: hidden; }
.percurso-registro--bv .percurso-registro__fio::before { position: absolute; inset: 50% 0 auto; height: 2px; translate: 0 -50%; background: linear-gradient(to right, var(--cor-marca-borda), var(--cor-marca)); }
.percurso-registro--bv .percurso-registro__rota--volta .percurso-registro__fio::before { background: linear-gradient(to left, var(--cor-marca-borda), var(--cor-marca)); }
.percurso-registro--bv .percurso-registro__fio::after { display: none; }
.percurso-registro--bv .percurso-registro__fio > .icone { position: absolute; top: 50%; left: 0; padding: 0 var(--esp-1); box-sizing: content-box; background: var(--cor-superficie); translate: 0 -50%; animation: viatura-seguir-ida 3.6s linear infinite, viatura-sacudir 0.5s ease-in-out infinite alternate; }
.percurso-registro--bv .percurso-registro__rota--volta .percurso-registro__fio > .icone { scale: -1 1; animation-name: viatura-seguir-volta, viatura-sacudir; }
/* Os dias não andam em fila indiana: cada um sai um pouco depois do anterior. */
.percurso-registro--bv .percurso-registro__trecho:nth-child(3n + 2) .percurso-registro__fio > .icone { animation-delay: -1.2s, 0s; }
.percurso-registro--bv .percurso-registro__trecho:nth-child(3n) .percurso-registro__fio > .icone { animation-delay: -2.4s, 0s; }
.percurso-registro--bv .percurso-registro__rota--volta .percurso-registro__fio > .icone { animation-delay: -1.8s, 0s; }
@keyframes viatura-seguir-ida {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: calc(100% - 1.5rem); opacity: 0; }
}
@keyframes viatura-seguir-volta {
  0% { left: calc(100% - 1.5rem); opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: 0; opacity: 0; }
}
.percurso-registro__rotulo { margin-right: var(--esp-2); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-terciario); }
/* Conferência da viagem: as pendências vêm de várias etapas (dados, roteiro, ofícios, OS…),
   então ficam abaixo do cabeçalho, alinhadas à esquerda, cada uma com o nome da etapa. */
@media (min-width: 1024px) {
  .prontidao-documental.prontidao-documental--etapas { grid-template-columns: minmax(0, 1fr); }
}
.prontidao-documental--etapas .checklist { justify-content: flex-start; }
.checklist__etapa { margin-right: var(--esp-1); padding: 0 var(--esp-1); border-radius: var(--raio-sm); background: var(--cor-aviso-fundo); color: var(--cor-aviso); font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; }
.prontidao-documental .checklist__sem-link { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--altura-controle); padding: 0 var(--esp-3); border: 1px solid var(--cor-aviso-borda); border-radius: var(--raio-sm); font-size: var(--texto-sm); }
.prontidao-documental .checklist__sem-link > .icone { color: var(--cor-aviso); }
/* =============== Diário de bordo no desenho da folha do ofício =============== */
/* Cada trecho é um cartão como os trechos do ofício: número no marcador quadrado, a rota em
   destaque, os campos numa linha e a distância rodada como campo calculado. */
.documento--preparacao .diario-linhas { gap: var(--esp-2); }
.documento--preparacao .diario-linha,
.documento--preparacao .diario-linha:first-child { align-items: center; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.documento--preparacao .diario-linha:hover { border-color: var(--cor-borda-forte); }
.documento--preparacao .diario-linha:focus-within { border-color: var(--hover-cartao-borda); box-shadow: var(--sombra-1); }
.documento--preparacao .diario-linha__rota { align-items: center; }
.documento--preparacao .diario-linha__rota .peso-semi { font-size: var(--texto-md); line-height: var(--altura-linha-justa); }
.documento--preparacao .diario-linha__numero { width: var(--altura-controle-sm); height: var(--altura-controle-sm); border-radius: var(--raio-md); background: var(--cor-superficie-realce); font-size: var(--texto-sm); transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.documento--preparacao .diario-linha:focus-within .diario-linha__numero { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.documento--preparacao .diario-linha__resultado { display: flex; flex-direction: column; justify-content: center; min-height: var(--altura-controle); padding: var(--esp-1) var(--esp-3); border: 1px solid var(--cor-borda); border-left: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie-sutil); }
.documento--preparacao .diario-linha__resultado > span { font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; }
.documento--preparacao .diario-linha__resultado strong { font-size: var(--texto-md); font-weight: var(--peso-forte); }
@media (min-width: 1024px) {
  .documento--preparacao .diario-linha--hodometro { grid-template-columns: minmax(0, 1fr) minmax(22rem, 1.4fr) minmax(8rem, .35fr); }
}
/* Totais do hodômetro: as mesmas peças dos totais da rota, em três colunas. */
.diario-totais { margin-top: var(--esp-4); }
.diario-totais .itin__totais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.diario-totais .itin__totais .itin__total-valor:last-child { grid-column: 2; font-size: var(--texto-lg); font-weight: var(--peso-semi); color: var(--cor-texto); }
/* Registro institucional do resumo: motivo e justificativa numa linha, quem assina e o
   destinatário na seguinte — cada valor numa linha só, sem quebra (o texto inteiro no title). */
.resumo__definicoes .metadado--linha { min-width: 0; }
.dialogo--mesa .mesa-registro__registro .resumo__definicoes .metadado--linha dd,
.resumo__definicoes .metadado--linha dd { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: none; line-clamp: none; }


/* =============== Termo: viaturas e quem vai em cada uma =============== */
/* As viaturas em cartões (placa, modelo, quantos vão nela, "×"); com mais de uma, uma linha
   por servidor com a viatura num seletor segmentado — o realce desliza para a escolhida
   (termo.js mede a opção e põe `--escala-x`/`--escala-w`; sem JS, a opção marcada é que
   ganha o fundo). Com mais de uma viatura o bloco usa a linha toda. */
.secao__grupo > .secao__bloco.secao__bloco--largo { grid-column: 1 / -1; }
.frota { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--esp-2); margin: var(--esp-3) 0 0; padding: 0; list-style: none; }
.frota__viatura { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie-sutil); animation: atencao-entrar var(--duracao-lenta) var(--curva-expressiva) backwards; transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.frota__viatura:hover { border-color: var(--cor-borda-forte); }
.frota__icone { display: grid; place-items: center; width: var(--altura-controle); height: var(--altura-controle); border-radius: var(--raio-md); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.frota__nome { display: grid; gap: 1px; min-width: 0; }
.frota__nome strong { font-size: var(--texto-md); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.frota__nome small { overflow: hidden; font-size: var(--texto-xs); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto-secundario); }
.frota__conta { display: inline-flex; align-items: center; gap: var(--esp-1); min-width: 1.75rem; height: 1.75rem; padding: 0 var(--esp-2); justify-content: center; border-radius: var(--raio-pilula); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-borda); font-size: var(--texto-xs); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; color: var(--cor-texto); transition: background-color var(--duracao-rapida) var(--curva-padrao); }
.frota__conta--mudou { animation: frota-conta var(--duracao-lenta) var(--curva-expressiva); }
.frota__remover { position: relative; display: grid; place-items: center; width: var(--altura-controle-sm); height: var(--altura-controle-sm); border-radius: var(--raio-md); color: var(--cor-texto-secundario); cursor: pointer; transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.frota__remover:hover { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.frota__remover > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.frota__remover:has(> input:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; }
.frota__todos { display: inline-flex; align-items: center; gap: var(--esp-2); margin: var(--esp-2) 0 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
@keyframes frota-conta { 0% { scale: 1; } 40% { scale: 1.2; background: var(--cor-marca-fundo); } 100% { scale: 1; } }

.lotacao { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
.lotacao__titulo { margin: 0; font-size: var(--texto-2xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; color: var(--cor-texto-secundario); }
.lotacao__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: var(--esp-2) var(--esp-4); margin: 0; padding: 0; list-style: none; }
.lotacao__pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.lotacao__pessoa:hover { border-color: var(--hover-cartao-borda); box-shadow: var(--sombra-1); }
.lotacao__pessoa:has(input[value=""]:checked) { border-style: dashed; background: var(--cor-superficie-sutil); }
.lotacao__avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--raio-pilula); background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); font-size: var(--texto-2xs); font-weight: var(--peso-semi); }
.lotacao__nome { display: grid; min-width: 0; }
.lotacao__nome > span { overflow: hidden; font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto); }
.lotacao__nome > small { overflow: hidden; font-size: var(--texto-2xs); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto-secundario); }

/* Seletor segmentado com realce que desliza (a função do servidor na OS, reinterpretada). */
.escala { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: var(--raio-md); background: var(--cor-superficie-realce); isolation: isolate; }
.escala > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.escala > label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--altura-controle-sm) - 2px); padding: 0 var(--esp-3); border-radius: calc(var(--raio-md) - 3px); font-size: var(--texto-xs); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-rotulo); font-variant-numeric: tabular-nums; color: var(--cor-texto-secundario); white-space: nowrap; cursor: pointer; transition: color var(--duracao-media) var(--curva-padrao), background-color var(--duracao-rapida) var(--curva-padrao); }
.escala > label.escala__nenhuma { font-weight: var(--peso-medio); letter-spacing: 0; }
.escala > input:not(:checked):not(:disabled) + label:hover { color: var(--cor-texto); }
.escala > input:checked + label { background: var(--grafite-900); color: var(--neutro-0); }
.escala > input[value=""]:checked + label { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: inset 0 0 0 1px var(--cor-borda-forte); }
.escala > input:focus-visible + label { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; }
.escala > input:disabled + label { cursor: default; }
.escala__realce { position: absolute; top: 3px; bottom: 3px; left: 0; z-index: 0; width: var(--escala-w, 0); border-radius: calc(var(--raio-md) - 3px); background: var(--grafite-900); box-shadow: var(--sombra-1); opacity: 0; translate: var(--escala-x, 0) 0; transition: translate var(--duracao-media) var(--curva-expressiva), width var(--duracao-media) var(--curva-expressiva), background-color var(--duracao-rapida) var(--curva-padrao); }
.escala--viva .escala__realce { opacity: 1; }
.escala--viva > input:checked + label, .escala--viva > input[value=""]:checked + label { background: transparent; box-shadow: none; }
.escala--viva:has(input[value=""]:checked) .escala__realce { background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-borda-forte); }
.escala--parada .escala__realce { transition: none; }
@media (prefers-reduced-motion: reduce) { .escala__realce { transition: none; } }
@media (max-width: 1023.98px) { .lotacao__lista { grid-template-columns: minmax(0, 1fr); } .lotacao__pessoa { grid-template-columns: auto minmax(0, 1fr); } .escala { grid-column: 1 / -1; justify-self: start; } }