/* =====================================================================
   COMPONENTES — catálogo completo documentado em
   docs/design-system/components.md e exercitado no UI Lab (/ui-lab/).
   Convenção de nomes: bloco__elemento--modificador (BEM em português).
   ===================================================================== */

/* =============== Botão =============== */
.botao {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-texto);
  --botao-borda: var(--cor-borda-forte);
  --botao-fundo-hover: var(--cor-superficie-sutil);
  --botao-sombra: var(--sombra-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--altura-controle);
  padding: 0 var(--esp-4);
  border: 1px solid var(--botao-borda);
  border-radius: var(--raio-md);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--botao-sombra);
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao),
    transform var(--duracao-instantanea) var(--curva-padrao);
}

.botao:hover {
  background: var(--botao-fundo-hover);
  border-color: var(--cor-borda-campo);
  text-decoration: none;
}

/* Pressão: encolhe 1,5% — feedback físico sem pular layout. */
.botao:active:not(:disabled) {
  transform: scale(var(--escala-pressao));
  box-shadow: none;
}

/* Foco: o anel global, mantendo a sombra própria do botão. */
.botao:focus-visible {
  box-shadow: 0 0 0 var(--foco-offset) var(--foco-contraste), var(--botao-sombra);
}

.botao > .icone {
  transition: transform var(--duracao-rapida) var(--curva-padrao);
}

/* Setas e ícones de ação "andam" no hover (seta → avança, download ↓ desce). */
.botao:hover > .icone.icone--seta {
  transform: translateX(2px);
}

.botao--primario {
  --botao-fundo: var(--cor-primaria);
  --botao-texto: var(--cor-primaria-texto);
  --botao-borda: var(--cor-primaria-ativa);
  --botao-fundo-hover: var(--cor-primaria-hover);
  --botao-sombra: var(--sombra-interna-topo), var(--sombra-1);
}

.botao--primario:hover {
  border-color: var(--cor-primaria-ativa);
  box-shadow: var(--sombra-interna-topo), var(--sombra-2);
}

/* Ação de destaque institucional (no máximo uma por tela): dourado com brilho suave. */
.botao--marca {
  --botao-fundo: linear-gradient(180deg, var(--dourado-400), var(--dourado-500));
  --botao-texto: var(--grafite-950);
  --botao-borda: var(--dourado-600);
  --botao-fundo-hover: linear-gradient(180deg, var(--dourado-300), var(--dourado-400));
  --botao-sombra: var(--sombra-interna-topo), var(--sombra-marca);
}

.botao--marca:hover {
  border-color: var(--dourado-600);
  box-shadow: var(--sombra-interna-topo), var(--sombra-marca), var(--sombra-2);
}

.botao--sutil {
  --botao-fundo: transparent;
  --botao-borda: transparent;
  --botao-texto: var(--cor-texto-secundario);
  --botao-fundo-hover: var(--cor-superficie-realce);
  --botao-sombra: none;
}

.botao--sutil:hover {
  --botao-texto: var(--cor-texto);
  border-color: transparent;
}

.botao--perigo {
  --botao-fundo: var(--cor-perigo-solida);
  --botao-texto: var(--cor-texto-inverso);
  --botao-borda: var(--cor-perigo);
  --botao-fundo-hover: var(--vermelho-700);
}

.botao--perigo:hover {
  border-color: var(--cor-perigo);
}

.botao--sm {
  min-height: var(--altura-controle-sm);
  padding: 0 var(--esp-3);
  font-size: var(--texto-sm);
}

.botao--lg {
  min-height: var(--altura-controle-lg);
  padding: 0 var(--esp-6);
  font-size: var(--texto-lg);
}

.botao--bloco {
  width: 100%;
  white-space: normal;
  line-height: var(--altura-linha-justa);
  padding-top: var(--esp-2);
  padding-bottom: var(--esp-2);
}

.botao--icone {
  width: var(--altura-controle);
  padding: 0;
}

.botao--icone.botao--sm {
  width: var(--altura-controle-sm);
}

.botao[aria-pressed="true"] {
  --botao-fundo: var(--grafite-900);
  --botao-texto: var(--neutro-0);
  --botao-borda: var(--grafite-900);
  --botao-fundo-hover: var(--grafite-700);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* ---- Linguagem de ação: ocioso → processando → concluído (ou recusado) ----
   O botão conta o que está acontecendo sem sair do lugar nem mudar de largura.
   `aria-busy` (processando) e `data-estado` são postos por static/js/componentes/acao.js
   ou pelo envio do formulário (app.js). */

/* Processando: o conteúdo some, um indicador gira no centro; a largura é preservada. */
.botao[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
}

.botao[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--botao-texto);
  border-right-color: transparent;
  border-radius: var(--raio-pilula);
  animation: girar 700ms linear infinite;
}

.botao[aria-busy="true"] > * {
  opacity: 0; /* some, mas o nome acessível continua */
}
/* Concluído: vira verde por um instante e o ícone "carimba" — confirmação no próprio
   botão,
.botao[data-estado="concluido"] {
  --botao-fundo: var(--cor-sucesso-fundo);
  --botao-texto: var(--cor-sucesso);
  --botao-borda: var(--cor-sucesso-borda);
  --botao-fundo-hover: var(--cor-sucesso-fundo);
  --botao-sombra: none;
}.botao[data-estado="concluido"] > .icone {
  animation: carimbar var(--duracao-enfase) var(--curva-expressiva);
}
/* Recusado: balança uma vez (erro de validação ou servidor) e volta ao normal. */
.botao[data-estado="erro"] {
  --botao-borda: var(--cor-perigo-solida);
  animation: sacudir var(--duracao-enfase) var(--curva-suave);
}

/* Botão-ícone: anel suave no hover, para o alvo "aparecer" antes do clique. */
.botao--icone:hover {
  box-shadow: 0 0 0 3px var(--tinta-06);
}

/* Botão "texto": só o rótulo, sublinhado dourado no hover. Para ações terciárias. */
.botao--texto {
  --botao-fundo: transparent;
  --botao-borda: transparent;
  --botao-fundo-hover: transparent;
  --botao-sombra: none;
  --botao-texto: var(--cor-texto);
  min-height: max(1.5rem, var(--alvo-minimo)); /* alvo de toque ≥ 24px mesmo a 90% */
  padding: var(--esp-05) 0;
  border-radius: var(--raio-xs);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

.botao--texto:hover {
  border-color: transparent;
  text-decoration-color: var(--cor-marca);
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* =============== Campos de formulário =============== */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.campo__rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-secundario);
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

/* O campo em foco "acende" o rótulo e a ajuda: o contexto chega na hora certa. */
.campo:focus-within > .campo__rotulo,
.campo:focus-within > .escolha {
  color: var(--cor-texto);
}

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

.campo__obrigatorio {
  color: var(--cor-marca-texto);
  margin-left: var(--esp-05);
}

.campo__opcional {
  color: var(--cor-texto-terciario);
  font-weight: var(--peso-normal);
  margin-left: var(--esp-1);
}

.campo__ajuda {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.campo__ajuda ul {
  margin: var(--esp-1) 0 0;
  padding-left: var(--esp-4);
  display: grid;
  gap: var(--esp-05);
}

.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-perigo);
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

/* Campo: caixa branca com borda, rótulo sobre a borda (como no sistema de referência).
   No hover a borda escurece; no foco a borda fica grafite e ganha o halo dourado. */
.entrada,
.selecao,
.area-texto {
  width: 100%;
  min-height: var(--altura-controle);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--texto-md);
  line-height: var(--altura-linha-justa);
  box-shadow: none;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao),
    background-color var(--duracao-rapida) var(--curva-padrao);
}

.area-texto {
  min-height: 6rem;
  line-height: var(--altura-linha);
  resize: vertical;
}

.selecao {
  appearance: none;
  padding-right: var(--esp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--neutro-600) 50%),
    linear-gradient(135deg, var(--neutro-600) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.entrada::placeholder,
.area-texto::placeholder {
  color: var(--cor-texto-terciario);
}

.entrada:hover,
.selecao:hover,
.area-texto:hover {
  border-color: var(--neutro-500);
  background-color: var(--cor-superficie);
}

/* Foco: fundo branco, borda grafite e halo dourado. Sem anel externo: o próprio campo é
   o indicador (borda 3:1 + halo), o que evita o "duplo contorno". */
.entrada:focus-visible,
.selecao:focus-visible,
.area-texto:focus-visible {
  outline: none;
  /* `background-color`, não o atalho: ele apagaria a seta do <select>, desenhada no fundo. */
  background-color: var(--cor-superficie);
  border-color: var(--grafite-800);
  box-shadow: var(--sombra-foco-campo);
}

.entrada:disabled,
.selecao:disabled,
.area-texto:disabled,
.entrada[readonly] {
  background-color: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  box-shadow: none;
  cursor: not-allowed;
}

.entrada[readonly] {
  cursor: default;
}

/* Campos de cópia continuam navegáveis por teclado: preservar o halo de foco
   também na leitura, sem dar aparência de campo desabilitado. */
.entrada[readonly]:focus-visible {
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-foco-campo);
}

/* Campo de arquivo (via assinada): a caixa do campo com o botão de escolher no idioma do
   sistema visual (o botão nativo do navegador destoava). O nome do arquivo escolhido fica
   ao lado, como o navegador escreve. */
.entrada--arquivo {
  display: flex;
  align-items: center;
  padding: var(--esp-1);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}

.entrada--arquivo::file-selector-button {
  min-height: calc(var(--altura-controle) - var(--esp-3));
  margin-right: var(--esp-3);
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-sutil);
  color: var(--cor-texto);
  font: inherit;
  font-weight: var(--peso-semi);
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.entrada--arquivo:hover::file-selector-button {
  background: var(--cor-superficie-realce);
}

.campo--erro .entrada,
.campo--erro .selecao,
.campo--erro .area-texto,
[aria-invalid="true"] {
  border-color: var(--cor-perigo-solida);
  background-color: var(--cor-perigo-fundo);
}

.campo--erro .entrada:focus-visible,
.campo--erro .area-texto:focus-visible,
.campo--erro .selecao:focus-visible {
  box-shadow: var(--sombra-erro-campo);
}

/* Rótulo na borda: o nome do campo fica sobre a linha de cima da caixa. O fundo do rótulo
   é metade "papel" (--fundo-rotulo: onde o campo está) e metade caixa (--fundo-entrada),
   então serve sobre a folha branca e sobre faixas cinzas sem recorte. */
.campo:has(> .campo__rotulo + :is(.entrada, .selecao, .area-texto, .entrada-composta, .combobox, .seletor, .data-hora, .itin__passo, .passos, .itin__chegada, .campo__com-acao, .multiescolha)) {
  position: relative;
  padding-top: 0.5rem;
}

.campo > .campo__rotulo:has(+ :is(.entrada, .selecao, .area-texto, .entrada-composta, .combobox, .seletor, .data-hora, .itin__passo, .passos, .itin__chegada, .campo__com-acao, .multiescolha)) {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--esp-2);
  max-width: calc(100% - var(--esp-4));
  padding: 0 var(--esp-1);
  overflow: hidden;
  font-size: var(--texto-xs);
  line-height: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(var(--fundo-rotulo, var(--cor-superficie)) 50%,
    var(--fundo-entrada, var(--cor-superficie)) 50%);
}

.campo--erro > .campo__rotulo {
  --fundo-entrada: var(--cor-perigo-fundo);
}

.campo:has(:disabled) > .campo__rotulo {
  --fundo-entrada: var(--cor-superficie-realce);
}

/* =============== Combobox (pc-combobox) =============== */
.combobox {
  position: relative;
}

.combobox__lista {
  position: absolute;
  z-index: var(--z-painel-campo);
  top: calc(100% + var(--esp-1));
  left: 0;
  right: 0;
  max-height: 18rem;
  margin: 0;
  padding: var(--esp-1);
  overflow-y: auto;
  list-style: none;
  border: 0;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-flutuante);
  transform-origin: top center;
  animation: brotar var(--duracao-rapida) var(--curva-padrao);
}

.combobox__opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-sm);
  cursor: pointer;
}

.combobox__opcao[aria-selected="true"],
.combobox__opcao:hover {
  background: var(--cor-marca-fundo);
}

.combobox__opcao[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--esp-2);
  bottom: var(--esp-2);
  width: var(--filete-fino);
  border-radius: var(--raio-xs);
  background: var(--cor-marca);
}

.combobox__opcao-titulo {
  font-weight: var(--peso-semi);
}

/* Sugestões: cabeçalho de grupo e chips ao lado do título (viaturas da equipe). */
.combobox__grupo {
  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-terciario);
}

.combobox__grupo + .combobox__grupo {
  display: none;
}

.combobox__chip {
  vertical-align: middle;
  margin-left: var(--esp-1);
}

.combobox__opcao-meta {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.combobox__vazio {
  padding: var(--esp-3);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

/* =============== Lista própria (pc-select) =============== */
/* Lista própria (<pc-select>): o botão tem a cara do campo; a lista é a do combobox. */
.seletor__gatilho {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  /* Com a seta dentro do botão, a sobra à direita é só o respiro do ícone. */
  padding-right: var(--esp-2);
  background-image: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.seletor__seta {
  flex: none;
  color: var(--cor-texto-terciario);
  transition: rotate var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.seletor__gatilho:hover .seletor__seta {
  color: var(--cor-texto-secundario);
}

/* Aberta, a seta aponta para cima: o botão diz em que estado a lista está. */
.seletor__gatilho[aria-expanded="true"] .seletor__seta {
  rotate: 180deg;
  color: var(--cor-texto);
}

.seletor__valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seletor__gatilho--vazio {
  color: var(--cor-texto-secundario);
}

.seletor__gatilho[aria-expanded="true"] {
  border-color: var(--grafite-800);
  box-shadow: var(--sombra-foco-campo);
}

.combobox__opcao--atual {
  font-weight: var(--peso-semi);
}

.combobox__opcao--atual::after {
  content: "";
  width: 0.75rem;
  height: 0.6rem;
  margin-left: auto;
  background: var(--cor-marca);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%);
}

/* =============== Lista de ligações =============== */
/* Itens que levam a outro registro (ofícios de um roteiro, na folha e na caixinha). */
.lista-ligacoes {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-ligacoes__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

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

/* Destino e período na mesma linha, separados por ponto — a linha inteira fica de uma
   altura só e centrada com a placa e o selo. */
.lista-ligacoes__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-2);
}

.lista-ligacoes__titulo {
  font-weight: var(--peso-medio);
}

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

.lista-ligacoes__meta::before {
  content: "·";
  margin-right: var(--esp-2);
  color: var(--cor-texto-terciario);
}

/* =============== Pessoa e avatar =============== */
/* Cartão de uma pessoa (ou de um veículo): avatar à esquerda, nome e detalhe à
   direita. Vale na folha do ofício e na janela de resumo da lista. */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  flex: none;
}

.avatar--escuro {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.pessoa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 0;
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 1px var(--cor-borda);
  min-width: 0;
  transition: box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.pessoa:hover {
  box-shadow: 0 0 0 1px var(--cor-borda-forte), var(--sombra-1);
}

.pessoa__texto {
  flex: 1 1 9rem;
  min-width: 0;
}

.pessoa__nome {
  display: block;
  font-weight: var(--peso-semi);
  overflow-wrap: anywhere;
}

.pessoa__meta {
  display: block;
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* Cartões de pessoa na mesma grade (janela de resumo e folha do ofício): seis colunas de
   base, cada cartão ocupando duas (três por linha) ou três (duas por linha) — a última
   linha nunca fica pela metade. Quem decide a largura de cada um é larguras_de_cartoes,
   no servidor. */
.resumo__cartoes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumo__cartao--2 { grid-column: span 2; }
.resumo__cartao--3 { grid-column: span 3; }
.resumo__cartao--6 { grid-column: span 6; }

@media (max-width: 767.98px) {
  .resumo__cartoes > * {
    grid-column: span 6;
  }
}

/* Documentos emitidos: fichas numa linha só, quebrando quando precisar. */
.resumo__documentos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumo__documento {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

a.resumo__documento:hover {
  background: var(--cor-marca-fundo);
  text-decoration: none;
}

.resumo__documento--parado {
  color: var(--cor-texto-secundario);
}
.ficha-documental__texto { display: grid; gap: var(--esp-1); font-weight: var(--peso-semi); }
.ficha-documental__meta { color: var(--cor-texto-secundario); font-size: var(--texto-xs); font-weight: var(--peso-normal); }

/* =============== Campo composto, linha de campos, escolhas e resumo de erros =============== */
/* Campo com ícone/prefixo/sufixo. */
.entrada-composta {
  position: relative;
  display: flex;
  align-items: center;
}

.entrada-composta > .icone {
  position: absolute;
  left: var(--esp-3);
  color: var(--cor-texto-terciario);
  pointer-events: none;
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.entrada-composta:focus-within > .icone {
  color: var(--cor-marca-texto);
}

.entrada-composta > .icone + .entrada {
  padding-left: calc(var(--esp-3) * 2 + var(--tamanho-icone));
}

/* Detalhe da escolha dentro do campo, logo depois do nome (ex.: o cargo do servidor
   escolhido): posição medida pelo combobox (`--meta-x`), cortado com reticências. */
.entrada-composta__meta {
  position: absolute;
  left: calc(var(--meta-x, 0px) + var(--esp-2));
  right: calc(var(--esp-3) + 1.75rem);
  overflow: hidden;
  color: var(--cor-texto-terciario);
  font-size: var(--texto-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.entrada-composta__meta::before {
  content: "· ";
}

.entrada-composta__meta[hidden] {
  display: none;
}

.entrada-composta__texto-fixo {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-campo);
  border-left: 0;
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.entrada-composta__texto-fixo:first-child {
  border-left: 1px solid var(--cor-borda-campo);
  border-right: 0;
  border-radius: var(--raio-md) 0 0 var(--raio-md);
}

/* Só o texto fixo colado à direita corta o canto; um botão dentro da caixa não. */
.entrada-composta .entrada:has(+ .entrada-composta__texto-fixo) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.entrada-composta__texto-fixo + .entrada {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Botão dentro do campo (mostrar senha, limpar): à direita, com a mesma altura da caixa. */
.entrada-composta--senha > .entrada,
.entrada-composta--limpavel > .entrada {
  padding-right: calc(var(--esp-2) + 2rem);
}

.entrada-composta__botao {
  position: absolute;
  /* Acima do próprio campo, que em alguns pares (UF + município) sobe no hover e no foco
     para encostar as bordas — sem isso o botão sumiria debaixo dele e não receberia o clique. */
  z-index: 3;
  top: 50%;
  right: var(--esp-1);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  translate: 0 -50%;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.entrada-composta__botao:hover {
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
}

.entrada-composta__botao:focus-visible {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: 1px;
}

.entrada-composta__botao[aria-pressed="true"] .entrada-composta__ver,
.entrada-composta__botao[aria-pressed="false"] .entrada-composta__ocultar {
  display: none;
}

/* Linha de campos: cada campo tem a largura do que recebe, não uma fatia da tela.
   xs = UF, placa, quantidade · sm = data, hora, valor · md = protocolo, telefone, CEP ·
   lg/xl = nomes e descrições (crescem até fechar a linha) · auto = o próprio conteúdo ·
   sem classe = linha inteira (texto longo). No celular os curtos vão dois a dois. */
.campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--esp-3) var(--esp-4);
}

.campos > * { flex: 1 1 100%; min-width: 0; }
.campos > .campo--auto { flex: 0 0 auto; }
.campos > .campo--xs { flex: 0 1 6.5rem; }
.campos > .campo--sm { flex: 0 1 10rem; }
.campos > .campo--md { flex: 0 1 14rem; }
.campos > .campo--lg { flex: 1 1 18rem; }
.campos > .campo--cresce { flex-grow: 1; }

/* Abaixo de ~420px duas datas lado a lado cortam "dd/mm/aaaa": cada uma na sua linha. */
@media (max-width: 419.98px) {
  .campos > :is(.campo--sm, .campo--md):has(pc-data) { flex-basis: 100%; }
}

@media (max-width: 767.98px) {
  .campos > :is(.campo--xs, .campo--sm, .campo--md) { flex: 1 1 calc(50% - var(--esp-4)); }
  .campos > .campo--auto { flex-basis: 100%; }
  .entrada, .selecao, .area-texto { font-size: var(--texto-lg); min-height: var(--altura-controle-lg); }
}

/* Escolha: checkbox, rádio e interruptor */
.escolha {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--esp-2);
  min-height: max(1.5rem, var(--alvo-minimo)); /* alvo de toque ≥ 24px mesmo a 90% */
  cursor: pointer;
}

/* Caixa e rádio desenhados no DS (appearance: none): grafite ao marcar, marca branca
   que "brota". Continuam inputs nativos — teclado, rótulo e leitor de tela intactos. */
.escolha input[type="checkbox"],
.escolha input[type="radio"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--neutro-500); /* 5,3:1 sobre branco (1.4.11) */
  border-radius: var(--raio-xs);
  background: var(--cor-superficie);
  flex: none;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao),
    transform var(--duracao-instantanea) var(--curva-padrao);
}

.escolha input[type="radio"] {
  border-radius: var(--raio-pilula);
}

.escolha input[type="checkbox"]::before,
.escolha input[type="radio"]::before {
  content: "";
  width: 0.7rem;
  height: 0.55rem;
  background: var(--neutro-0);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%);
  transform: scale(0);
  transition: transform var(--duracao-rapida) var(--curva-expressiva);
}

.escolha input[type="radio"]::before {
  width: 0.5rem;
  height: 0.5rem;
  clip-path: none;
  border-radius: var(--raio-pilula);
}

.escolha:hover input {
  border-color: var(--grafite-700);
}

.escolha input:checked {
  background: var(--grafite-900);
  border-color: var(--grafite-900);
}

.escolha input:checked::before {
  transform: scale(1);
}

.escolha input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.escolha:active input:not(:disabled) {
  transform: scale(0.9);
}

.escolha__descricao {
  display: block;
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.interruptor {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--esp-3);
  cursor: pointer;
  font-weight: var(--peso-medio);
}

.interruptor input {
  appearance: none;
  position: relative;
  width: calc(var(--alvo-minimo) + 1rem);
  height: var(--alvo-minimo);
  margin: 0;
  border-radius: var(--raio-pilula);
  background: var(--neutro-300);
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
  flex: none;
  cursor: pointer;
}

.interruptor input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--alvo-minimo) - 4px);
  height: calc(var(--alvo-minimo) - 4px);
  border-radius: var(--raio-pilula);
  background: var(--neutro-0);
  box-shadow: var(--sombra-1);
  transition: transform var(--duracao-media) var(--curva-expressiva);
}

.interruptor input:checked {
  background: var(--grafite-900);
}

.interruptor input:checked::after {
  transform: translateX(1rem);
}

/* Interruptor com descrição: o texto em duas linhas, alinhado ao topo. */
.interruptor--descrito {
  align-items: flex-start;
}

.interruptor--descrito input {
  margin-top: 0.15rem;
}

/* Resumo de erros no topo do formulário (WCAG 3.3.1). */
.resumo-erros {
  border-left: var(--filete) solid var(--cor-perigo-solida);
  margin-bottom: var(--esp-4);
}

.resumo-erros ul {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-5);
}

.resumo-erros li + li {
  margin-top: var(--esp-1);
}

.resumo-erros a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  color: var(--cor-perigo);
  font-weight: var(--peso-medio);
}

/* =============== Seção / cartão =============== */
/* Sem borda cinza: um anel de 1px na sombra define o contorno e uma sombra
   difusa dá a sensação de folha sobre a mesa. */
.cartao {
  border: 0;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-cartao);
  min-width: 0;
  transition: box-shadow var(--duracao-media) var(--curva-padrao);
}

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

.cartao__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.cartao__acoes {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.cartao__corpo {
  padding: var(--esp-5);
}

.cartao__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  border-top: var(--borda-sutil);
  background: var(--cor-superficie-sutil);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

/* =============== Indicadores (KPI) =============== */
.indicador {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-5);
  border: 0;
  border-radius: var(--raio-lg);
  /* Tom polido: o cartão se destaca do papel por um degradê curto, não por uma fita. */
  background: linear-gradient(var(--cor-superficie), var(--cor-superficie-sutil));
  box-shadow: inset 0 0 0 1px var(--cor-borda), var(--sombra-cartao);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow var(--duracao-media) var(--curva-padrao),
    transform var(--duracao-media) var(--curva-padrao);
}

.indicador:hover {
  box-shadow: inset 0 0 0 1px var(--cor-borda), var(--sombra-cartao-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

.indicador__rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

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

.indicador__valor {
  font-size: var(--texto-3xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-titulo);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Compacto: o mesmo cartão, no tamanho de uma linha de formulário. */
.indicador--compacto {
  gap: var(--esp-05);
  padding: var(--esp-2) var(--esp-3);
}

.indicador--compacto .indicador__valor {
  font-size: var(--texto-md);
  letter-spacing: normal;
}

.indicador__nota {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* Atenção: o número é que muda de cor — todos os cartões têm a mesma moldura. */
.indicador--atencao .indicador__valor {
  color: var(--cor-marca-texto);
}

/* =============== Placa (número do ofício) =============== */
/* Assinatura visual das listas: o número como uma pequena placa de papel. */
.placa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 1px var(--cor-borda), 0 1px 2px var(--tinta-06);
  line-height: 1.15;
  text-align: center;
  color: var(--cor-texto);
  transition: box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.placa__rotulo {
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-marca-texto);
}

.placa__numero {
  font-size: var(--texto-md);
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cancelado: só o número é riscado — o rótulo ("OFÍCIO") continua legível. */
.placa--cancelada {
  color: var(--cor-texto-terciario);
}

.placa--cancelada .placa__numero {
  text-decoration: line-through;
  text-decoration-color: var(--cor-perigo);
}

.placa--cancelada .placa__rotulo {
  color: var(--cor-texto-terciario);
}

.placa--campo {
  margin: 0;
  align-self: flex-start;
}

.placa--grande {
  min-width: 6rem;
  padding: var(--esp-2) var(--esp-3);
}

.placa--grande .placa__numero {
  font-size: var(--texto-2xl);
}

/* =============== Selo de status =============== */
.selo {
  --selo-fundo: var(--cor-superficie-realce);
  --selo-texto: var(--cor-texto-secundario);
  --selo-borda: var(--cor-borda);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--esp-1);
  max-width: 100%;
  padding: var(--esp-05) var(--esp-2);
  border: 1px solid var(--selo-borda);
  border-radius: var(--raio-pilula);
  background: var(--selo-fundo);
  color: var(--selo-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.selo::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--raio-pilula);
  background: currentColor;
  flex: none;
}

.selo--sem-ponto::before { display: none; }

/* Neutro: o tom de base, declarado. Quem monta o selo por um "tom" vindo do domínio
   (rascunho, encerrado, "Previsto", "Avulso"…) pede `selo--neutro` — antes a classe não
   existia e o selo caía no padrão por sorte. */
.selo--neutro {
  --selo-fundo: var(--cor-superficie-realce);
  --selo-texto: var(--cor-texto-secundario);
  --selo-borda: var(--cor-borda);
}

.selo--info {
  --selo-fundo: var(--cor-info-fundo);
  --selo-texto: var(--cor-info);
  --selo-borda: var(--cor-info-borda);
}

.selo--sucesso {
  --selo-fundo: var(--cor-sucesso-fundo);
  --selo-texto: var(--cor-sucesso);
  --selo-borda: var(--cor-sucesso-borda);
}

.selo--aviso {
  --selo-fundo: var(--cor-aviso-fundo);
  --selo-texto: var(--cor-aviso);
  --selo-borda: var(--cor-aviso-borda);
}

.selo--perigo {
  --selo-fundo: var(--cor-perigo-fundo);
  --selo-texto: var(--cor-perigo);
  --selo-borda: var(--cor-perigo-borda);
}

/* Contorno: o selo diz uma CARACTERÍSTICA do registro, não o estado dele (ex.: o tipo do
   ofício — Convalidação, Retificado, Complementar). Sem fundo, ao lado do selo de situação
   (cheio), os dois não se confundem de relance (QA M5). */
.selo--contorno {
  --selo-fundo: transparent;
}

.selo--forte {
  --selo-fundo: var(--grafite-900);
  --selo-texto: var(--neutro-0);
  --selo-borda: var(--grafite-900);
}

/* Linguagem de estado: a FORMA do marcador diz o estado antes do texto.
   anel vazio = incompleto (rascunho) · ponto cheio = vigente · ✓ = concluído (emitido)
   · × = encerrado sem efeito (cancelado) · pulso = em processamento. */
.selo--situacao-rascunho::before {
  width: 0.45rem;
  height: 0.45rem;
  border: 1.5px solid currentColor;
  background: transparent;
}

.selo--situacao-emitido::before {
  width: 0.6rem;
  height: 0.5rem;
  border-radius: 0;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%);
}

.selo--situacao-cancelado::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0;
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

/* Em andamento: o ponto pulsa (gerando PDF, processando). */
.selo--processo::before {
  animation: pulsar 1.4s var(--curva-suave) infinite;
}

/* =============== Alerta =============== */
.alerta {
  --alerta-fundo: var(--cor-info-fundo);
  --alerta-texto: var(--cor-info);
  --alerta-borda: var(--cor-info-borda);
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--alerta-borda);
  border-left: var(--filete) solid var(--alerta-texto);
  border-radius: var(--raio-md);
  background: var(--alerta-fundo);
  color: var(--cor-texto);
}

.alerta > .icone {
  margin-top: 0.1rem;
  color: var(--alerta-texto);
}

.alerta__titulo {
  font-weight: var(--peso-semi);
  color: var(--alerta-texto);
}

.alerta__corpo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Aviso que termina numa ação: o texto à esquerda, o botão à direita, na mesma linha
   (e um embaixo do outro quando a largura aperta) — tudo centrado no mesmo eixo. */
.alerta:has(.alerta__acao) {
  align-items: center;
}

.alerta__acao {
  margin-left: auto;
  align-self: center;
  flex: none;
}

/* Celular estreito: a ação desce para uma linha só dela, na largura toda — ao lado, o
   texto ficava espremido em quatro linhas. */
@media (max-width: 479.98px) {
  .alerta:has(.alerta__acao) { flex-wrap: wrap; }
  .alerta__acao { flex: 1 1 100%; margin-left: 0; justify-content: center; }
}

.alerta__corpo ul {
  margin: var(--esp-1) 0 0;
  padding-left: var(--esp-5);
}

.alerta--sucesso {
  --alerta-fundo: var(--cor-sucesso-fundo);
  --alerta-texto: var(--cor-sucesso);
  --alerta-borda: var(--cor-sucesso-borda);
}

.alerta--aviso {
  --alerta-fundo: var(--cor-aviso-fundo);
  --alerta-texto: var(--cor-aviso);
  --alerta-borda: var(--cor-aviso-borda);
}

.alerta--perigo {
  --alerta-fundo: var(--cor-perigo-fundo);
  --alerta-texto: var(--cor-perigo);
  --alerta-borda: var(--cor-perigo-borda);
}

/* =============== Toast =============== */
.toasts {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  width: min(24rem, calc(100vw - 2 * var(--esp-4)));
  pointer-events: none;
}

.toast {
  --toast-cor: var(--dourado-300);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--grafite-900);
  color: var(--neutro-0);
  box-shadow: var(--sombra-4);
  overflow: hidden;
  pointer-events: auto;
  animation: toast-entrar var(--duracao-media) var(--curva-expressiva);
}

.toast > .icone { margin-top: 0.1rem; color: var(--toast-cor); }
.toast--sucesso { --toast-cor: var(--verde-100); }
.toast--aviso { --toast-cor: var(--ambar-100); }
.toast--perigo { --toast-cor: var(--vermelho-100); }

/* Barra de tempo restante: encolhe em 6s e pausa no hover (JS marca .toast--pausado). */
.toast::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--filete-fino);
  width: 100%;
  background: var(--toast-cor);
  opacity: 0.7;
  transform-origin: left center;
  animation: toast-tempo 6s linear forwards;
}

.toast--perigo::after,
.toast--fixo::after {
  display: none;
}

.toast--pausado::after {
  animation-play-state: paused;
}

.toast--saindo {
  animation: toast-sair var(--duracao-rapida) var(--curva-saida) forwards;
}

.toast__fechar {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--cor-texto-inverso-sutil);
  padding: 0 var(--esp-1);
  border-radius: var(--raio-xs);
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.toast__fechar:hover {
  color: var(--neutro-0);
}

@keyframes toast-entrar {
  from { opacity: 0; transform: translateX(1.5rem) scale(0.97); }
}

@keyframes toast-sair {
  to { opacity: 0; transform: translateX(1rem); }
}

@keyframes toast-tempo {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* =============== Tabela =============== */
.tabela-rolagem {
  max-width: 100%;
  overflow-x: auto;
  border-radius: inherit;
  /* Contêiner posicionado: os rótulos sr-only (absolutos) das células ficam dentro da
     caixa que rola, em vez de esticar a página no celular. */
  position: relative;
}

.tabela {
  width: 100%;
  font-size: var(--texto-md);
}

.tabela caption {
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  font-weight: var(--peso-semi);
}

.tabela th {
  position: sticky;
  top: 0;
  padding: var(--esp-2) var(--esp-4);
  border-bottom: var(--borda);
  background: var(--cor-superficie-sutil);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Cabeçalho de linha (th no corpo, ex.: o nome da atividade): é o rótulo da linha, não do
   bloco — texto normal, em destaque, sem a caixa alta nem o fundo do cabeçalho. */
.tabela tbody th {
  position: static;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: var(--borda-sutil);
  background: none;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/* Tabela "aberta" dentro do documento: sem fundo no cabeçalho nem recuo lateral —
   é a tabela do papel, não um widget. */
.tabela--aberta th {
  position: static;
  padding-left: 0;
  padding-right: var(--esp-4);
  background: transparent;
}

.tabela--aberta td {
  padding-left: 0;
}

.tabela--aberta tr:last-child td {
  border-bottom: 0;
}

.tabela td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: var(--borda-sutil);
  vertical-align: middle;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover td {
  background: var(--cor-superficie-sutil);
}

/* Linha sob o ponteiro ganha o trilho dourado à esquerda. */
.tabela tbody tr:hover td:first-child {
  box-shadow: inset var(--filete) 0 0 var(--cor-marca);
}

.tabela--compacta td {
  padding: var(--esp-2) var(--esp-3);
}

.tabela--compacta th {
  padding: var(--esp-2) var(--esp-3);
}

.tabela .num,
.tabela .coluna-num {
  text-align: right;
  white-space: nowrap;
}

.tabela__principal {
  white-space: nowrap;
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  text-decoration: none;
}

a.tabela__principal:hover {
  text-decoration: underline;
}

.tabela tfoot td {
  border-top: var(--borda-forte);
  border-bottom: 0;
  font-weight: var(--peso-semi);
  background: var(--cor-superficie-sutil);
}

/* Em telas estreitas a tabela vira lista de cartões (sem rolagem lateral). */
@media (max-width: 767.98px) {
  .tabela--responsiva thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tabela--responsiva,
  .tabela--responsiva tbody,
  .tabela--responsiva tr,
  .tabela--responsiva td {
    display: block;
    width: 100%;
  }

  /* Cada linha vira um cartão: a célula principal no alto, as demais em duas colunas com
     o rótulo em micro-caixa-alta — metade da altura de uma lista rótulo/valor. */
  .tabela--responsiva tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-2) var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border-bottom: var(--borda);
  }

  .tabela--responsiva td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-05);
    padding: 0;
    border: 0;
    text-align: left;
  }

  .tabela tbody tr:hover td:first-child { box-shadow: none; }

  .tabela--responsiva td::before {
    content: attr(data-rotulo);
    color: var(--cor-texto-terciario);
    font-size: var(--texto-2xs);
    font-weight: var(--peso-semi);
    text-transform: uppercase;
    letter-spacing: var(--rastreio-rotulo);
  }

  .tabela--responsiva td[data-rotulo=""]::before { display: none; }
  .tabela--responsiva td.tabela__celula-principal,
  .tabela--responsiva td:has(> .selo) { grid-column: 1 / -1; } /* selo não quebra linha: ganha a largura toda */
  .tabela--responsiva td.tabela__celula-principal::before { display: none; }
  .tabela--responsiva td.num { text-align: left; }
  .tabela--responsiva tfoot td { grid-column: 1 / -1; }
}

/* =============== Estado vazio =============== */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-12) var(--esp-6);
  text-align: center;
  animation: aparecer var(--duracao-lenta) var(--curva-padrao);
}

/* Ícone num anel dourado com um segundo anel difuso — a "marca d'água" vazia. */
.vazio__icone {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
  box-shadow: 0 0 0 1px var(--cor-marca-borda), 0 0 0 0.6rem var(--brilho-dourado-08);
}

.vazio__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.vazio__texto {
  max-width: 28rem;
  color: var(--cor-texto-secundario);
}

.vazio .grupo-botoes {
  margin-top: var(--esp-3);
  justify-content: center;
}

/* Filas secundárias: conserva a mensagem sem ocupar uma página vazia. */
.vazio--compacto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--esp-3);
  row-gap: var(--esp-1);
  padding: var(--esp-5) var(--esp-4);
  text-align: left;
}
.vazio--compacto .vazio__icone {
  grid-row: span 2;
  width: var(--esp-10);
  height: var(--esp-10);
  margin: 0;
  box-shadow: none;
}
.vazio--compacto .vazio__titulo { font-size: var(--texto-md); }
.vazio--compacto .vazio__texto { grid-column: 2; max-width: none; }
.vazio--compacto .grupo-botoes { grid-column: 2; justify-content: flex-start; }

/* =============== Diálogo / gaveta (pc-dialogo) =============== */
dialog.dialogo {
  position: fixed;
  width: min(32rem, calc(100vw - 2 * var(--esp-4)));
  max-height: calc(100vh - 2 * var(--esp-8));
  padding: 0;
  border: 0;
  border-radius: var(--raio-xl);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  box-shadow: var(--sombra-4);
}

dialog.dialogo::backdrop {
  background: var(--cor-veu);
  backdrop-filter: blur(var(--desfoque-veu));
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

dialog.dialogo[open] {
  animation: dialogo-entrar var(--duracao-media) var(--curva-expressiva);
}

dialog.dialogo.dialogo--saindo {
  animation: recolher var(--duracao-rapida) var(--curva-saida) forwards;
}

@keyframes dialogo-entrar {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
}

.dialogo__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-5) var(--esp-2);
}

.dialogo__icone {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
  box-shadow: 0 0 0 1px var(--cor-marca-borda);
  flex: none;
}

.dialogo--perigo .dialogo__icone {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
  box-shadow: 0 0 0 1px var(--cor-perigo-borda);
}

.dialogo__titulo {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
}

.dialogo__corpo {
  padding: var(--esp-2) var(--esp-5) var(--esp-5);
  color: var(--cor-texto-secundario);
}

/* Janela de resumo (lista de ofícios): mais larga, com as três colunas do resumo dentro
   e o fechar flutuando no canto, fora do pedaço que o HTMX troca. */
dialog.dialogo--resumo {
  width: min(52rem, calc(100vw - 2 * var(--esp-4)));
  /* A rolagem é do conteúdo, não da janela: assim a quina arredondada corta a barra em
     vez de deixá-la escapar pelo canto. */
  overflow: hidden;
}

/* Só a janela aberta vira coluna: `display` fora do [open] anularia o `display: none`
   que o navegador dá ao <dialog> fechado — e ela ficaria na tela como um fantasma. */
dialog.dialogo--resumo[open] {
  display: flex;
  flex-direction: column;
}

.dialogo--resumo .dialogo__conteudo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Cadastro com mais campos (servidor, viatura): janela mais larga, para duas ou três
   colunas de campos lado a lado. */
dialog.dialogo--largo {
  width: min(44rem, calc(100vw - 2 * var(--esp-4)));
}

/* Formulário completo numa janela (o evento do plano: destinos com a rota, atividades em
   três colunas): a largura de uma folha. */
dialog.dialogo--amplo {
  width: min(68rem, calc(100vw - 2 * var(--esp-4)));
}

/* Grupo de campos com título (fieldset): "Identificação", "Lotação"… */
.grupo-campos {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-campos + .grupo-campos {
  padding-top: var(--esp-4);
  border-top: var(--borda-sutil);
}

/* float: a legenda deixa de ficar presa na borda do fieldset e vira um item comum da grade. */
.grupo-campos > legend {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

/* "Sem sigla", "Ainda não usado": valor ausente dito em voz baixa. */
.vazio-inline {
  color: var(--cor-texto-terciario);
}

.vazio-inline > .icone {
  display: inline-block; /* corre com o texto (o reset deixa svg em bloco) */
  margin-right: var(--esp-1);
  vertical-align: -0.15em;
}

/* Revisão: o sobretítulo diz que esta é a etapa de emissão; a nota lembra a retificação. */
.dialogo__sobretitulo {
  margin: 0 0 var(--esp-05);
  color: var(--cor-texto-secundario);
}

.dialogo__nota {
  flex: 1 1 auto;
  align-self: center;
  margin: 0;
}

.dialogo__acao {
  display: flex;
}

/* As decisões (Emitir, Abrir o ofício) ficam sempre à vista: o rodapé gruda no pé da área
   que rola, por cima do conteúdo que passa por baixo. */
.dialogo--resumo .dialogo__rodape {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.dialogo__fechar {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  z-index: 1;
}

.dialogo__cabecalho-texto {
  min-width: 0;
}

/* Na janela de resumo o cabeçalho é uma linha só: placa, destino e selos no mesmo eixo. */
.dialogo--resumo .dialogo__cabecalho {
  align-items: center;
}

.dialogo--resumo .dialogo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
}

.dialogo__linha-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
}

.dialogo__linha-selos .texto-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-texto-secundario);
}

.dialogo__corpo .resumo {
  color: var(--cor-texto);
}

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

.dialogo__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border-top: var(--borda-sutil);
  background: var(--cor-superficie-sutil);
}

dialog.dialogo.gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(30rem, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  display: none;
  flex-direction: column;
}

dialog.dialogo.gaveta[open] {
  display: flex;
  animation: gaveta-entrar var(--duracao-media) var(--curva-padrao);
}

@keyframes gaveta-entrar {
  from { transform: translateX(100%); }
}

.gaveta .dialogo__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  color: var(--cor-texto);
}

@media (max-width: 479.98px) {
  .dialogo__rodape .botao,
  .dialogo__rodape > .dialogo__acao { flex: 1 1 100%; }
  .dialogo__acao .botao { width: 100%; }
  .dialogo__rodape { flex-direction: column-reverse; }
}

/* =============== Texto pronto (componentes/texto_pronto.html) =============== */
/* A escolha e as ações na mesma linha, na base dos campos; no celular as ações descem. */
.texto-pronto {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-2) var(--esp-3);
}

.texto-pronto__escolha {
  flex: 1 1 18rem;
  margin: 0;
}

.texto-pronto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

/* =============== Menu suspenso (pc-menu) =============== */
.menu {
  position: relative;
  display: inline-block;
}

.menu__painel {
  position: absolute;
  z-index: var(--z-painel-campo);
  right: 0;
  top: calc(100% + var(--esp-1));
  /* Largura do rótulo mais longo (os itens não quebram linha), com teto no celular. */
  width: max-content;
  min-width: 14rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--esp-1);
  border: 0;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  box-shadow: var(--sombra-flutuante);
  transform-origin: top right;
  animation: brotar var(--duracao-rapida) var(--curva-padrao);
}

.menu__painel--esquerda,
.menu__painel--forcar-esquerda {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* menu.js: o painel que sairia pela borda abre para o outro lado. */
.menu__painel--forcar-direita {
  right: 0;
  left: auto;
  transform-origin: top right;
}

/* Caixa que abre ao pousar o mouse (ou ao focar pelo teclado): é o mesmo painel do menu
   de ações, sem clique e sem JavaScript — nenhum evento para se perder no caminho. */
.menu--pousar {
  display: inline-flex;
}

.menu--pousar .menu__painel {
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  min-width: 0;
  padding: var(--esp-3);
  visibility: hidden;
  opacity: 0;
  /* Ao sair, a caixa espera um instante antes de começar a sumir: dá tempo de levar o
     mouse até ela sem que pisque no caminho. */
  transition: opacity var(--duracao-rapida) var(--curva-padrao) var(--duracao-media),
    visibility 0s linear calc(var(--duracao-media) + var(--duracao-rapida));
}

/* Ao entrar, espera mais: passar o mouse de raso pela linha não chega a abrir nada —
   e, quando abre, abre inteira, sem aquele meio-apagado. */
.menu--pousar:hover .menu__painel {
  visibility: visible;
  opacity: 1;
  transition-delay: var(--duracao-lenta), var(--duracao-lenta);
}

/* Pelo teclado não há "passar de raso": abre na hora. */
.menu--pousar:focus-within .menu__painel {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Nas últimas linhas da lista a caixa abre para cima, para a quina arredondada do cartão
   não a cortar. */
/* menu.js: sem espaço abaixo (pé da página, barra flutuante), o painel abre para cima. */
.menu__painel--acima {
  top: auto;
  bottom: calc(100% + var(--esp-1));
  transform-origin: bottom right;
}

.registro:nth-last-child(-n + 2) .menu--pousar .menu__painel {
  top: auto;
  bottom: calc(100% + var(--esp-1));
  transform-origin: bottom left;
}

.menu__titulo {
  margin-bottom: var(--esp-2);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
}

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-md);
  text-align: left;
  text-decoration: none;
  /* Uma ação, uma linha: o painel cresce até o rótulo caber (ver .menu__painel). */
  white-space: nowrap;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.menu__item > .icone {
  color: var(--cor-texto-terciario);
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.menu__item:hover,
.menu__item:focus-visible {
  outline-offset: calc(-1 * var(--foco-offset));
  box-shadow: none;
  background: var(--cor-superficie-realce);
  text-decoration: none;
}

.menu__item:hover > .icone,
.menu__item:focus-visible > .icone {
  color: var(--cor-marca-texto);
}

.menu__item--perigo {
  color: var(--cor-perigo);
}

.menu__item--perigo > .icone {
  color: var(--cor-perigo);
}

.menu__separador {
  height: 1px;
  margin: var(--esp-1) 0;
  background: var(--cor-borda);
}

.menu__cabecalho {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borda);
  margin-bottom: var(--esp-1);
}

/* Item com linha de descrição (menu ⋮ canônico das listas, D7): título em cima, o que a
   ação faz (ou por que está inativa) embaixo, em texto secundário. A descrição fica fora
   do nome do item (aria-hidden) e entra como descrição (aria-describedby). */
.menu__item--descrito {
  align-items: flex-start;
  white-space: normal;
}

.menu__item--descrito > .icone {
  flex: none;
  margin-top: var(--esp-05);
}

.menu__item-texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-05);
  min-width: 0;
}

.menu__item-descricao {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  line-height: var(--altura-linha-justa);
}

/* Inativo: recebe o foco (o porquê está na descrição), mas não age nem acende. */
.menu__item[aria-disabled="true"] {
  color: var(--cor-texto-terciario);
  cursor: not-allowed;
}

.menu__item[aria-disabled="true"]:hover {
  background: transparent;
}

.menu__item[aria-disabled="true"] > .icone,
.menu__item[aria-disabled="true"]:hover > .icone,
.menu__item[aria-disabled="true"]:focus-visible > .icone {
  color: var(--cor-texto-terciario);
}

/* Painel na camada de topo (menu.js, linhas das listas): sem a moldura que o navegador
   dá a todo popover; a posição vem do JS. O que não couber na janela rola dentro dele. */
.menu__painel[popover] {
  z-index: auto;
  margin: 0;
  border: 0;
  color: var(--cor-texto);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu__painel--descrito {
  min-width: 17rem;
  max-width: min(22rem, calc(100vw - 2rem));
}

/* Num menu com descrições, o título de cada item em peso médio: a vista corre pelos títulos
   e só desce à descrição quando precisa. */
.menu__painel--descrito .menu__item {
  font-weight: var(--peso-medio);
}

.menu__painel--descrito .menu__item-descricao {
  font-weight: var(--peso-normal);
}

/* Véu do menu flutuante: invisível no desktop (o toque fora só fecha, sem acionar o que
   está atrás); no celular escurece por trás da folha. */
.menu__veu {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu__veu::backdrop {
  background: transparent;
}

/* Toque no véu (celular): ele fica um instante, já transparente, para receber o "click" que
   vem depois do toque — o foco volta ao ⋮, não ao corpo da página. */
.menu__veu.menu__veu--saindo {
  background: transparent;
  animation: none;
}

/* Grupo recolhido dentro do menu (ex.: "Criar a partir deste ofício"): o título abre os
   itens no lugar, recuados sob ele; a seta gira. Menos itens à vista, nenhum escondido. */
.menu__item--grupo > .menu__grupo-seta {
  flex: none;
  margin-left: auto;
  align-self: center;
  color: var(--cor-texto-terciario);
  transition: transform var(--duracao-rapida) var(--curva-padrao);
}

.menu__item--grupo[aria-expanded="true"] > .menu__grupo-seta {
  transform: rotate(180deg);
}

.menu__grupo {
  margin-left: var(--esp-6);
  border-left: var(--borda);
}

/* Ação dentro de um aviso (ex.: "Entrar de novo" na sessão expirada). */
.toast__acao {
  color: inherit;
  font-weight: var(--peso-semi);
  text-decoration: underline;
}

/* Sem espaço acima nem abaixo, o painel abre ao lado do botão (menu.js). */
.menu__painel--lado {
  transform-origin: center right;
}

/* Título da folha (celular): o registro de que se trata, já que a folha se solta da linha. */
.menu__folha-titulo {
  display: none;
}

@media (max-width: 767.98px) {
  .menu__veu {
    background: var(--cor-veu);
    animation: aparecer var(--duracao-media) var(--curva-padrao);
    touch-action: none;
  }

  .menu__painel.menu__painel--folha {
    inset: auto 0 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(85dvh, calc(100dvh - var(--altura-cabecalho)));
    padding: 0 var(--esp-2) calc(var(--esp-3) + env(safe-area-inset-bottom));
    border-radius: var(--raio-xl) var(--raio-xl) 0 0;
    transform-origin: bottom center;
    animation: folha-subir var(--duracao-media) var(--curva-padrao);
  }

  .menu__painel--folha .menu__folha-titulo {
    position: sticky;
    z-index: 1;
    top: 0;
    display: block;
    margin: 0 calc(-1 * var(--esp-2)) var(--esp-1);
    padding: var(--esp-4) var(--esp-5) var(--esp-2);
    border-bottom: var(--borda);
    background: var(--cor-superficie-elevada);
    overflow: hidden;
    color: var(--cor-texto-secundario);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semi);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Na folha, alvos de toque confortáveis. */
  .menu__painel--folha .menu__item {
    min-height: var(--altura-controle-lg);
  }
}

/* =============== Paleta de comandos (pc-comandos) =============== */
.comandos {
  width: min(40rem, calc(100vw - 2 * var(--esp-4)));
  margin-top: 10vh;
}

.comandos__busca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: var(--borda);
}

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

.comandos__busca input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: var(--texto-xl);
  background: transparent;
}

.comandos__lista {
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--esp-2);
  list-style: none;
}

.comandos__grupo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
}

.comandos__opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  cursor: pointer;
}

.comandos__opcao[aria-selected="true"] {
  background: var(--cor-marca-fundo);
}

.comandos__opcao[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--esp-2);
  bottom: var(--esp-2);
  width: var(--filete-fino);
  border-radius: var(--raio-xs);
  background: var(--cor-marca);
}

.comandos__opcao .icone {
  color: var(--cor-texto-secundario);
}

.comandos__opcao[aria-selected="true"] .icone {
  color: var(--cor-marca-texto);
}

@media (max-width: 479.98px) {
  .comandos { margin-top: var(--esp-4); }
  .comandos__busca { padding: var(--esp-3) var(--esp-4); }
  .comandos__busca .botao { display: none; }
}

.comandos__rodape {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-5);
  border-top: var(--borda-sutil);
  background: var(--cor-superficie-sutil);
  border-radius: 0 0 var(--raio-xl) var(--raio-xl);
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

kbd {
  padding: 0 var(--esp-1);
  border: var(--borda);
  border-bottom-width: 2px;
  border-radius: var(--raio-xs);
  background: var(--cor-superficie-sutil);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
}

/* =============== Carregamento =============== */
.esqueleto {
  display: block;
  height: 0.875rem;
  border-radius: var(--raio-xs);
  background: linear-gradient(90deg, var(--neutro-100) 0%, var(--neutro-50) 50%, var(--neutro-100) 100%);
  background-size: 200% 100%;
  animation: esqueleto 1.2s ease-in-out infinite;
}

.esqueleto--linha {
  width: 100%;
}

.esqueleto--curto {
  width: 30%;
}

.girando {
  animation: girar 800ms linear infinite;
}

/* =============== Dica (tooltip) =============== */
[data-dica] {
  position: relative;
}

[data-dica]:hover::after,
[data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute;
  z-index: var(--z-dica);
  left: 50%;
  bottom: calc(100% + var(--esp-1));
  transform: translateX(-50%);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-sm);
  background: var(--grafite-900);
  color: var(--neutro-0);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--sombra-3);
  /* Animação própria: `brotar` termina em `transform: none` e apagaria o translateX(-50%)
     que centraliza a dica — ela nascia torta e saltava para o lugar no fim. Aqui o
     deslocamento de centragem entra em todos os quadros. */
  animation: dica-brotar var(--duracao-rapida) var(--curva-padrao);
}

@keyframes dica-brotar {
  from { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* =============== Escolha múltipla por busca (pc-multiescolha) =============== */
/* Ex.: motoristas habituais da viatura — a busca em cima, os escolhidos embaixo. */
.multiescolha {
  display: grid;
  gap: var(--esp-2);
}

.multiescolha__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.multiescolha__lista:empty {
  display: none;
}

.multiescolha__item {
  flex-wrap: nowrap;
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3);
}

.multiescolha__vazio {
  margin: 0;
}

/* Prévia dos percentuais da diária (cadastro de vigência): dois valores lado a lado. */
.previa-diaria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin: 0;
}

.previa-diaria > div {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-sutil);
  box-shadow: 0 0 0 1px var(--cor-borda);
}

.previa-diaria dt {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
}

.previa-diaria dd {
  margin: 0;
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

/* Fieldset que só agrupa para desabilitar tudo de uma vez (termo cancelado): sem moldura. */
.grupo-campos--livre {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Grupo que vem logo depois de uma lista (funções da equipe sob os escolhidos). */
.grupo-campos--afastado {
  margin-top: var(--esp-4);
}

/* Grupo de campo (fieldset.campo): sem a moldura "groove" do navegador. */
fieldset.campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Escolhas numa caixa de campo (tipos da viagem, programas do plano): a mesma caixa das
   entradas, com o rótulo na borda (a legenda do fieldset já corta a linha de cima), e as
   opções em pílulas compactas numa faixa — a marcada ganha a borda grafite. Uma linha tem
   a altura de uma entrada. */
fieldset.campo--escolhas {
  min-height: var(--altura-controle);
  padding: var(--esp-1) var(--esp-1) var(--esp-1);
  border: 1px solid var(--cor-borda-campo);
  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);
}

fieldset.campo--escolhas:hover {
  border-color: var(--neutro-500);
}

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

.campo--erro.campo--escolhas {
  border-color: var(--cor-perigo);
}

fieldset.campo--escolhas > legend {
  margin-left: var(--esp-1);
  padding: 0 var(--esp-1);
  font-size: var(--texto-xs);
  line-height: 1rem;
}

fieldset.campo--escolhas .caixas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

fieldset.campo--escolhas .caixas__item {
  align-items: center;
  min-height: var(--altura-controle-sm);
  padding: 0 var(--esp-3) 0 var(--esp-2);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-sutil);
  font-size: var(--texto-sm);
  line-height: var(--altura-linha-justa);
  white-space: nowrap;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    background-color var(--duracao-rapida) var(--curva-padrao);
}

fieldset.campo--escolhas .caixas__item:hover {
  border-color: var(--cor-borda);
}

fieldset.campo--escolhas .caixas__item:has(input:checked) {
  border-color: var(--grafite-800);
  background: var(--cor-superficie);
  font-weight: var(--peso-medio);
}

fieldset.campo--escolhas .caixas__item input {
  margin: 0;
}

fieldset.campo--escolhas > .campo__erro {
  padding: 0 var(--esp-2) var(--esp-1);
}

/* =============== Várias escolhas num campo (pc-escolhas) ===============
   O botão tem a cara de um select (o que está marcado, resumido); o painel flutua abaixo,
   como a lista do select, com uma caixa por linha. Sem JavaScript o painel fica no fluxo. */
.escolhas {
  position: relative;
  display: block;
}

/* Numa linha de colunas iguais, o campo de várias escolhas leva o dobro (o resumo dele é
   mais longo): programa do plano · período · horário; tipo da viagem · período. */
.campos--iguais > .campo:has(> pc-escolhas) {
  flex: 2 1 0;
}

.escolhas__painel .caixas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.escolhas__painel .caixas__item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--altura-controle-sm);
  padding: var(--esp-1) var(--esp-3);
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  font-size: var(--texto-sm);
}

.escolhas__painel .caixas__item input {
  margin: 0;
}

.escolhas__painel .caixas__item:hover,
.escolhas__painel .caixas__item:has(input:focus-visible) {
  background: var(--cor-superficie-sutil);
  outline: none;
}

.escolhas__painel .caixas__item:has(input:checked) {
  border: 0;
  background: transparent;
  font-weight: var(--peso-medio);
}

.escolhas__painel .caixas__item:has(input:checked):hover {
  background: var(--cor-superficie-sutil);
}

/* "Outro" fecha a lista, separado por um filete. */
.escolhas__painel .caixas__item.escolhas__outro {
  margin-top: var(--esp-1);
  padding-top: var(--esp-2);
  border-top: var(--borda-sutil);
  border-radius: 0;
}

.escolhas[data-pronto] .escolhas__painel {
  position: absolute;
  z-index: var(--z-painel-campo);
  top: calc(100% + var(--esp-1));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: 20rem;
  padding: var(--esp-1);
  overflow-y: auto;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-flutuante);
  transform-origin: top center;
  animation: brotar var(--duracao-rapida) var(--curva-padrao);
}

.escolhas__painel[hidden] {
  display: none;
}

/* Com JavaScript, a lista não pisca aberta enquanto o componente carrega. */
@media (scripting: enabled) {
  pc-escolhas:not([data-pronto]) .escolhas__painel {
    display: none;
  }
}

/* Sem JavaScript, o botão não abre nada: fica só a lista. */
@media (scripting: none) {
  pc-escolhas [data-gatilho] {
    display: none;
  }
}

/* Caixas de escolha em grade (widget CaixasDeEscolha): várias escolhas de uma lista
   curta — atividades de um conjunto, atividades do plano. Linhas sempre cheias. */
.caixas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--esp-2) var(--esp-4);
}

.caixas__item {
  padding: var(--esp-2) var(--esp-3);
  border: var(--borda-sutil);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
}

.caixas__item:has(input:checked) {
  border-color: var(--grafite-900);
  background: var(--cor-superficie-sutil);
}

.caixas__item:has(input:focus-visible) {
  outline: 2px solid var(--grafite-900);
  outline-offset: 2px;
}

/* Linha de colunas iguais: cada campo recebe a mesma fatia, independentemente do que
   carrega. Vale para a primeira linha da Identificação (número · data · protocolo · tipo ·
   custeio), onde larguras diferentes faziam a linha parecer desalinhada. */
.campos--iguais > * { flex: 1 1 0; }

/* Os campos que só aparecem por condição (ex.: "Instituição que custeia") continuam
   ocupando a linha inteira. */
.campos--iguais > .condicional { flex-basis: 100%; }

/* Variante: a linha quebra antes de comprimir rótulos em tablet/desktop. */
@media (min-width: 768px) {
  .campos--legiveis > :not(.condicional) { flex-basis: 12rem; }
}

@media (max-width: 767.98px) {
  .campos--iguais > * { flex: 1 1 calc(50% - var(--esp-4)); }
}

/* Campo com atalho de cadastro: o controle ocupa a linha e o "+" fica encostado nele, na
   mesma altura. Serve a "Cargo" e "Unidade de lotação" nos diálogos de cadastro — quem
   não acha o que precisa cadastra ali mesmo, sem perder o que já digitou. */
.campo__com-acao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.campo__com-acao > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.campo__com-acao > .botao--icone {
  flex: none;
}

/* Nos diálogos de cadastro os grupos de campos não levam filete entre si: a janela já é
   curta e a linha cortava o formulário sem necessidade. */
.dialogo .grupo-campos + .grupo-campos {
  padding-top: 0;
  border-top: 0;
}

/* Sair fica à esquerda, como na barra de ações das folhas: o olho acha o "voltar" no
   começo da linha e as ações que gravam ficam juntas, à direita. */
.dialogo__rodape > .botao--texto:first-child,
.dialogo__rodape > [data-fechar-dialogo]:first-child {
  margin-right: auto;
}

/* Diálogos de cadastro respiram um pouco mais entre as linhas de campos: a janela é curta
   e o ganho de clareza vale os poucos pixels. */
.dialogo .grupo-campos {
  gap: var(--esp-4);
}

.dialogo .campos {
  row-gap: var(--esp-4);
}

/* Alertas que recebem o foco por programa (`foco=...` nas views) só o recebem para serem
   lidos em voz alta: o anel de foco ali não guia ninguém — não há o que teclar dentro —
   e aparecia sozinho ao voltar de uma ação. O papel role="alert"/"status" é que anuncia. */
.alerta:focus,
.alerta:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Indicador centrado: usado no quadro de diárias, onde os três cartões são lidos como uma
   linha de resultados e o alinhamento à esquerda deixava os valores soltos na caixa. */
.indicador--centro {
  align-items: center;
  text-align: center;
}

/* O indicador centrado também centra na vertical: nos quadros de diárias os três cartões
   têm a mesma altura e os valores precisam ficar na mesma linha de leitura. */
.indicador--centro {
  justify-content: center;
}

/* =============== Abas =============== */
/* Componente do Design System, não da lista: as abas da minuta (Ofício/Justificativa)
   vivem na folha do ofício, que não carrega listas.css. Por isso o bloco mora aqui, em
   components.css, que toda página carrega. */
.abas {
  display: flex;
  gap: var(--esp-1);
  /* Rolar só de lado (telas estreitas): com overflow-x sozinho o navegador liga a rolagem
     vertical junto e um fio de sobra já fazia aparecer a barra. */
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: var(--borda);
}

.aba {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-3);
  border: 0;
  background: transparent;
  color: var(--cor-texto-secundario);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

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

/* Aba sem nada no recorte de agora (ex.: "Cancelados 0" com uma busca): continua
   clicável, mas recua — o olho vai para onde há resultado. */
.aba--vazia {
  color: var(--cor-texto-terciario);
}

.aba--vazia .aba__contagem {
  background: transparent;
  color: var(--cor-texto-terciario);
}

/* Foco com o anel do Design System (LP-11), por dentro: a fileira rola de lado e cortaria
   um anel de fora. Antes era um retângulo de cantos vivos (outline com recuo negativo). */
.aba:focus-visible {
  outline: none;
  border-radius: var(--raio-md);
  box-shadow: var(--anel-foco-interno);
}

/* Indício de rolagem (abas-rolagem.js marca data-rola): a borda que esconde abas se
   esmaece. A máscara só lê o alfa — qualquer cor opaca serve. */
.abas[data-rola="fim"] {
  mask-image: linear-gradient(to right, var(--cor-texto) calc(100% - 2.5rem), transparent);
}

.abas[data-rola="inicio"] {
  mask-image: linear-gradient(to left, var(--cor-texto) calc(100% - 2.5rem), transparent);
}

.abas[data-rola="inicio fim"] {
  mask-image: linear-gradient(to right, transparent, var(--cor-texto) 2.5rem,
    var(--cor-texto) calc(100% - 2.5rem), transparent);
}

.aba[aria-selected="true"],
.aba[aria-current="page"] {
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
}

/* Ao trocar de aba, quem se mexe é o que mudou de estado: o filete, que cresce de lado
   (eixo X), e a contagem, que sobe (eixo Y). O rótulo fica parado — ele não mudou. */
.aba[aria-current="page"] .aba__contagem {
  animation: contagem-entrar var(--duracao-media) var(--curva-padrao);
}

@keyframes contagem-entrar {
  from { opacity: 0; translate: 0 0.4rem; }
}

/* Filete dourado sob a aba ativa (DNA das referências), nasce da esquerda. */
.aba[aria-selected="true"]::after,
.aba[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--esp-2);
  right: var(--esp-2);
  bottom: -1px;
  height: var(--filete);
  border-radius: var(--raio-xs) var(--raio-xs) 0 0;
  background: var(--cor-marca);
  transform-origin: left center;
  animation: filete-crescer var(--duracao-media) var(--curva-padrao);
}

.aba__contagem {
  min-width: 1.5rem;
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.aba[aria-current="page"] .aba__contagem,
.aba[aria-selected="true"] .aba__contagem {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

/* As duas ações do texto pronto andam juntas — guardar o que foi escrito e ir gerenciar os
   modelos — então viram UMA peça: moldura própria, divisória entre elas e a mesma altura do
   campo ao lado. Soltas, pareciam dois links perdidos na linha. */
.texto-pronto__acoes {
  align-items: stretch;
  gap: 0;
  border: var(--borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  overflow: clip;
}

.texto-pronto__acoes .botao {
  min-height: var(--altura-controle);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cor-texto-secundario);
}

.texto-pronto__acoes .botao + .botao {
  border-left: var(--borda-sutil);
}

.texto-pronto__acoes .botao--icone {
  width: var(--altura-controle);
}

.texto-pronto__acoes .botao:hover {
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
}

.texto-pronto__acoes .botao:focus-visible {
  z-index: 1;
}

/* Valor do indicador centrado não pode ser cortado: "INTERIOR + CAPITAL" não cabe numa
   linha no tamanho cheio e o cartão esconde o que passa. O cartão vira o contêiner de
   consulta e o valor encolhe junto com ele, até o piso legível. */
.indicador--centro {
  container-type: inline-size;
}

.indicador--centro .indicador__valor {
  font-size: clamp(var(--texto-lg), 9cqw, var(--texto-3xl));
}

/* =============== Controle segmentado (.segmentado) =============== */
/* Uma escolha entre poucas opções curtas: rádios de verdade (teclado e leitor de tela como
   num grupo de rádio) com o rótulo como botão — o mesmo desenho do "Texto | PDF" do editor:
   trilho cinza, a opção marcada em grafite. */
.segmentado {
  display: inline-flex;
  gap: var(--esp-05);
  padding: 0.1875rem;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-realce);
}

.segmentado > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmentado > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 2.25rem;
  padding: 0 var(--esp-4);
  border-radius: calc(var(--raio-md) - 0.1875rem);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.segmentado > input:not(:checked):not(:disabled) + label:hover {
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.segmentado > input:checked + label {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.segmentado > input:focus-visible + label {
  outline: none;
  box-shadow: var(--anel-foco-interno); /* por dentro: o trilho pode rolar de lado */
}

/* Com contagem (filtro Documento da lista): cada opção diz quantos itens traz; a altura é a
   de um controle comum, para alinhar com a busca ao lado. */
.segmentado--contagem > label {
  gap: var(--esp-2);
  min-width: 0;
  min-height: calc(var(--altura-controle) - 0.375rem);
  padding: 0 var(--esp-3);
  font-weight: var(--peso-medio);
}

.segmentado--contagem > input:checked + label {
  font-weight: var(--peso-semi);
}

.segmentado__conta {
  min-width: 1.25rem;
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.segmentado > input:checked + label .segmentado__conta {
  background: var(--grafite-700);
  color: var(--neutro-0);
}

.segmentado--contagem > input:not(:checked) + label .segmentado__conta {
  background: var(--cor-superficie-realce);
}

/* Segmentado de links (atalhos que trocam a página, ex.: "Pedem atenção" da prestação): o mesmo desenho dos rádios,
   com a opção atual (aria-current) em grafite. */
.segmentado > a { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 2.25rem; padding: 0 var(--esp-4); border-radius: calc(var(--raio-md) - 0.1875rem); font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto-secundario); white-space: nowrap; text-decoration: none; transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.segmentado > a:not([aria-current]):hover { background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; }
.segmentado > a[aria-current] { background: var(--grafite-900); color: var(--neutro-0); }
.segmentado > a:focus-visible { outline: none; box-shadow: var(--anel-foco-interno); }
.segmentado--contagem > a { gap: var(--esp-2); min-width: 0; min-height: calc(var(--altura-controle) - 0.375rem); padding: 0 var(--esp-3); font-weight: var(--peso-medio); }
.segmentado--contagem > a[aria-current] { font-weight: var(--peso-semi); }
.segmentado > a[aria-current] .segmentado__conta { background: var(--grafite-700); color: var(--neutro-0); }
.segmentado--contagem > a:not([aria-current]) .segmentado__conta { background: var(--cor-superficie-realce); }

/* Trilho que rola de lado quando não cabe (`data-rola-lado`: o segmentado Documento e as
   fichas de filtro no celular): sem barra visível, com a borda que esconde itens esmaecida
   (abas-rolagem.js marca data-rola, como nas abas). */
.segmentado[data-rola-lado] {
  overflow-x: auto;
  scrollbar-width: none;
}

[data-rola-lado]::-webkit-scrollbar { display: none; }

[data-rola-lado][data-rola="fim"] {
  mask-image: linear-gradient(to right, var(--cor-texto) calc(100% - 2rem), transparent);
}

[data-rola-lado][data-rola="inicio"] {
  mask-image: linear-gradient(to left, var(--cor-texto) calc(100% - 2rem), transparent);
}

[data-rola-lado][data-rola="inicio fim"] {
  mask-image: linear-gradient(to right, transparent, var(--cor-texto) 2rem,
    var(--cor-texto) calc(100% - 2rem), transparent);
}

/* Opção que não vale agora (ex.: "Um PDF só" com um documento): some do caminho sem sumir. */
.segmentado > input:disabled + label {
  color: var(--cor-texto-terciario);
  opacity: 0.6;
  cursor: not-allowed;
}

/* =============== Baixar documentos (componentes/dialogo_baixar.html) =============== */
.dialogo--baixar {
  width: min(36rem, calc(100vw - 2 * var(--esp-4)));
}

.baixar {
  display: grid;
  gap: var(--esp-4);
}

.baixar__lista {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.baixar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.baixar__instrucao {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

.baixar__carregando {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

.baixar__carregando[hidden] {
  display: none;
}

/* Até 5 cartões inteiros à vista; do 6º em diante rola (a altura exata vem de baixar.js).
   A folga em volta deixa o realce do foco e a borda dos cartões sem recorte. */
.baixar__itens {
  display: grid;
  gap: var(--esp-2);
  padding: 0.1875rem;
  margin: -0.1875rem;
  overflow-y: auto;
}

.baixar__itens--rolagem {
  padding-right: var(--esp-2);
  overscroll-behavior: contain;
}

.baixar__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 3.5rem;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.baixar__item.escolha input[type="checkbox"] {
  margin: 0;
}

.baixar__item:hover {
  box-shadow: inset 0 0 0 1px var(--cor-borda-forte);
}

.baixar__item:has(input:checked) {
  background: var(--cor-superficie-sutil);
  box-shadow: inset 0 0 0 1px var(--cor-borda-forte);
}

/* Desmarcado: o documento continua na lista, mas sai do primeiro plano. */
.baixar__item:not(:has(input:checked)) :is(.baixar__nome, .baixar__estado) {
  color: var(--cor-texto-terciario);
}

/* Foco pelo teclado: realce dourado suave no cartão, sem o contorno preto. */
.baixar__item:has(input:focus-visible) {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--cor-marca), 0 0 0 3px var(--cor-marca-fundo-forte);
}

.baixar__item input:focus-visible {
  outline: none;
}

.baixar__texto {
  display: grid;
  gap: var(--esp-05);
  flex: 1 1 auto;
  min-width: 0;
}

.baixar__nome {
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.baixar__detalhe {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* O estado em selo pequeno, à direita (gerado na hora / assinado). */
.baixar__estado {
  flex: none;
  padding: var(--esp-05) var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-realce);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.baixar__estado:empty {
  display: none;
}

.baixar__estado--assinado {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

/* Formato · Versão · Saída lado a lado, separados da lista por um filete. */
.baixar__escolhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.baixar__escolha {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.baixar__escolha[hidden] {
  display: none;
}

.baixar__rotulo {
  padding: 0;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.baixar__resumo {
  margin: calc(-1 * var(--esp-2)) 0 0;
}

/* =============== Anexar via assinada (componentes/dialogo_assinado.html) =============== */
.dialogo--anexo {
  width: min(32rem, calc(100vw - 2 * var(--esp-4)));
}

/* O documento ao lado de um selo com o ícone da assinatura. */
.anexo__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.anexo__selo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-md);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
}

.anexo {
  display: grid;
  gap: var(--esp-3);
}

/* A área de soltar: tracejada, clicável inteira (é o rótulo do campo de arquivo). */
.anexo__area {
  position: relative;
  display: block;
  padding: var(--esp-6) var(--esp-4);
  border: 1.5px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao);
}

.anexo__area:hover,
.anexo__area--sobre {
  border-color: var(--cor-marca);
  background: var(--cor-marca-fundo);
}

.anexo__area:has(.anexo__entrada:focus-visible) {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px var(--cor-marca-fundo-forte);
}

/* Arquivo escolhido: a caixa vira um cartão comum, sem o tracejado. */
.anexo__area--com-arquivo {
  padding: var(--esp-3) var(--esp-4);
  border-style: solid;
  border-color: var(--cor-borda);
  background: var(--cor-superficie);
  text-align: left;
}

.anexo__entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.anexo__vazio {
  display: grid;
  justify-items: center;
  gap: var(--esp-1);
}

.anexo__vazio[hidden],
.anexo__arquivo[hidden] {
  display: none;
}

.anexo__icone {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
  color: var(--cor-marca-texto);
}

.anexo__chamada {
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}

.anexo__link {
  color: var(--cor-marca-texto);
  font-weight: var(--peso-semi);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.anexo__limite {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.anexo__arquivo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.anexo__icone--pdf {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border-radius: var(--raio-md);
  background: var(--cor-perigo-fundo);
  box-shadow: none;
  color: var(--cor-perigo);
}

.anexo__arquivo-texto {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.anexo__nome {
  overflow: hidden;
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anexo__tamanho {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.anexo__trocar {
  flex: none;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-marca-texto);
}

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

/* 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; }
.registro-hero { display: flex; align-items: center; gap: var(--esp-8); padding: var(--esp-8) var(--esp-16) var(--esp-8) var(--esp-8); background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.registro-hero__identidade { flex: none; padding-right: var(--esp-8); border-right: var(--filete-fino) solid var(--cor-marca); }
.registro-hero .identidade-documental__rotulo, .registro-hero__rotulo { color: var(--cor-texto-inverso-sutil); font-size: var(--texto-2xs); letter-spacing: var(--rastreio-rotulo); text-transform: uppercase; margin: 0 0 var(--esp-2); font-weight: var(--peso-semi); }
.registro-hero .identidade-documental__numero { color: var(--cor-texto-inverso); font-size: calc(var(--texto-4xl) * 1.5); line-height: var(--altura-linha-justa); }
.registro-hero__conteudo { min-width: 0; }
.registro-hero .registro-hero__titulo { font-size: var(--texto-3xl); letter-spacing: var(--rastreio-titulo); color: var(--cor-texto-inverso); overflow-wrap: anywhere; }
.registro-hero__complemento { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); color: var(--cor-texto-inverso-sutil); font-size: var(--texto-sm); margin: var(--esp-2) 0 0; font-variant-numeric: tabular-nums; }
.registro-hero__complemento > .icone { color: var(--shell-filete-claro); }
.registro-hero__metadados { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-3); color: var(--cor-texto-inverso-sutil); font-size: var(--texto-xs); }
.registro-hero__metadado { display: inline-flex; align-items: center; gap: var(--esp-1); min-width: 0; color: inherit; overflow-wrap: anywhere; }
.registro-hero__metadado > .icone { flex: none; color: var(--shell-filete-claro); }
/* Título e selos dividem a mesma linha: o estado pertence ao nome do registro. */
.registro-hero__linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }
.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. */
.registro-hero .selo { --selo-fundo: transparent; --selo-borda: var(--luz-28); --selo-texto: var(--cor-texto-inverso); padding: var(--esp-05) var(--esp-3); font-weight: var(--peso-medio); }
/* 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; }
.registro-hero .texto-secundario { color: var(--cor-texto-inverso-sutil); }

/* 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-hero--pagina { padding: var(--esp-6) var(--esp-8); border-radius: var(--raio-lg); margin-bottom: var(--esp-6); }
.registro-hero--pagina .registro-hero__titulo { margin: 0; font-size: var(--texto-4xl); }
.registro-hero--pagina .registro-hero__conteudo { flex: 1; }
.registro-hero__acoes { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
.registro-hero--pagina :is(.botao, a):focus-visible { --foco-cor: var(--foco-cor-inverso); --foco-contraste: var(--foco-contraste-inverso); }
.registro-hero__acoes .botao { --botao-fundo: transparent; --botao-borda: var(--luz-28); --botao-texto: var(--cor-texto-inverso); }
.registro-hero__acoes .botao:hover { --botao-fundo-hover: var(--luz-10); }
.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); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .registro-hero--pagina:has(> .registro-hero__identidade):has(> .registro-hero__acoes > :nth-child(2)) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--esp-4) var(--esp-6);
  }
  .registro-hero--pagina:has(> .registro-hero__identidade) > .registro-hero__acoes:has(> :nth-child(2)) {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* 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) {
  .registro-hero--pagina { padding: var(--esp-5); gap: var(--esp-4); margin-bottom: var(--esp-4); flex-wrap: wrap; }
  .registro-hero--pagina .registro-hero__titulo { font-size: var(--texto-3xl); }
  .registro-hero--pagina .registro-hero__complemento { font-size: var(--texto-xs); }
  .registro-hero--pagina .registro-hero__identidade { padding-right: var(--esp-4); }
  .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); }
.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; }
@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; }
  .registro-hero--pagina .registro-hero__acoes { flex-wrap: nowrap; width: 100%; }
  .registro-hero--pagina .registro-hero__acoes > .botao { padding-inline: var(--esp-2); font-size: var(--texto-xs); }
}
.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; }
/* 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 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); }
  .registro-hero { gap: var(--esp-5); padding: var(--esp-6) var(--esp-16) var(--esp-6) var(--esp-6); }
  .registro-hero__identidade { padding-right: var(--esp-5); }
  .registro-hero .identidade-documental__numero { font-size: var(--texto-4xl); }
  .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; }
  .registro-hero { display: grid; gap: var(--esp-3); padding: var(--esp-5); }
  .registro-hero__identidade { border: 0; padding: 0 var(--esp-12) 0 0; }
  .registro-hero__identidade .identidade-documental { display: flex; align-items: center; gap: var(--esp-3); }
  .registro-hero__identidade .identidade-documental__numero { order: -1; font-size: var(--texto-3xl); }
  .registro-hero__identidade .identidade-documental__rotulo { max-width: 6rem; margin: 0; }
  .registro-hero .registro-hero__titulo { font-size: var(--texto-2xl); }
  .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. */
.registro-hero a.registro-hero__metadado { color: var(--cor-texto-inverso-sutil); text-underline-offset: var(--esp-1); }
.registro-hero a.registro-hero__metadado:hover { color: var(--cor-texto-inverso); }
.registro-hero .identidade-documental__complemento { color: var(--cor-texto-inverso-sutil); }

.registro-hero__metadado--vazio { font-style: italic; }


/* 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"; }
}

/* 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; }
}

/* Registros das listas (desktop): o selo de situação e o prazo ("Rascunho · faltam 33 dias") na mesma linha do
   título. O bloco do título fica na faixa "titulo" e a de "estado" fica vazia, com altura zero, então nenhuma variante
   (relações, sem ações) precisa de outra grade; o título encolhe com reticências antes dos selos. */
@media (min-width: 1024px) {
  .registros--operacionais .registro-operacional .registro__titulo { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--esp-3); min-width: 0; grid-area: titulo; }
  /* A faixa "estado" fica vazia: altura zero e sem o respiro dela (a margem negativa desfaz um dos dois vãos). */
  .registros--operacionais > .registro.registro-operacional { grid-template-rows: auto 0; }
  .registros--operacionais .registro-operacional .registro__agenda { margin-top: calc(-1 * var(--esp-2)); align-self: start; }
  /* Título e agenda encostam um no outro; a sobra de altura (a placa é mais alta) fica em cima e embaixo do par. */
  .registros--operacionais .registro-operacional .registro__titulo { align-self: end; }
  .registros--operacionais .registro-operacional .registro__titulo > .registro__link { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; }
  .registros--operacionais .registro-operacional .registro__titulo > .registro__selos { flex: none; flex-wrap: nowrap; }
}

/* 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); }

/* 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: Data do evento (faixa de dias) =============== */
/* A data por extenso, de onde veio e o campo para alterar em cima; embaixo, os dias da ida
   à volta — os da viagem numa faixa neutra, os do evento em dourado (com "evento"), a ida e
   a volta marcadas. Mostra onde o evento cai dentro da viagem. */
.agenda-evento { display: grid; gap: var(--esp-4); padding: var(--esp-4) var(--esp-5) var(--esp-5); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.agenda-evento:hover { border-color: var(--cor-borda-forte); }
.agenda-evento--vazia { border-style: dashed; }
.agenda-evento__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: end; gap: var(--esp-5); }
.agenda-evento__texto { display: grid; gap: var(--esp-1); min-width: 0; }
.agenda-evento__rotulo { display: inline-flex; align-items: center; gap: var(--esp-2); 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); }
.agenda-evento__conta { padding: 0 var(--esp-2); border-radius: var(--raio-pilula); background: var(--cor-marca-fundo); color: var(--cor-marca-texto); letter-spacing: 0; text-transform: none; }
.agenda-evento__frase { margin: 0; font-size: var(--texto-2xl); font-weight: var(--peso-semi); letter-spacing: var(--rastreio-titulo); line-height: var(--altura-linha-justa); color: var(--cor-texto); }
.agenda-evento--vazia .agenda-evento__frase { color: var(--cor-texto-secundario); }
.agenda-evento__fonte { display: inline-flex; align-items: center; gap: var(--esp-1); margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.agenda-evento__fonte--evento { color: var(--cor-marca-texto); font-weight: var(--peso-medio); }
.agenda-evento__campo { margin: 0; }
.agenda-evento__faixa { display: grid; grid-auto-columns: minmax(3.25rem, 1fr); grid-auto-flow: column; gap: var(--esp-1); margin: 0; padding: var(--esp-4) 0 0; overflow-x: auto; list-style: none; }
.agenda-evento__dia { position: relative; display: grid; justify-items: center; gap: var(--esp-05); padding: var(--esp-2) var(--esp-1); border: 1px solid transparent; border-radius: var(--raio-md); background: var(--cor-superficie-sutil); color: var(--cor-texto-terciario); }
.agenda-evento__dia--viagem { background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); }
.agenda-evento__dia--evento { border-color: var(--cor-marca-borda); background: linear-gradient(180deg, var(--cor-marca-fundo), var(--cor-superficie)); color: var(--cor-marca-texto); box-shadow: var(--sombra-1); animation: dia-do-evento var(--duracao-lenta) var(--curva-expressiva) backwards; }
.agenda-evento__dia--evento + .agenda-evento__dia--evento { animation-delay: 80ms; }
.agenda-evento__dia--evento + .agenda-evento__dia--evento + .agenda-evento__dia--evento { animation-delay: 160ms; }
.agenda-evento__mes { position: absolute; top: calc(-1 * var(--esp-4)); left: 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); }
.agenda-evento__semana { font-size: var(--texto-2xs); font-weight: var(--peso-medio); text-transform: uppercase; }
.agenda-evento__numero { font-size: var(--texto-lg); font-weight: var(--peso-semi); line-height: 1; font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.agenda-evento__dia:not(.agenda-evento__dia--viagem):not(.agenda-evento__dia--evento) .agenda-evento__numero { color: var(--cor-texto-secundario); }
.agenda-evento__marca { display: inline-flex; align-items: center; gap: 2px; min-height: 1rem; font-size: var(--texto-2xs); font-weight: var(--peso-semi); }
.agenda-evento__dia--evento .agenda-evento__marca { color: var(--cor-marca-texto); }
.agenda-evento__legenda { display: flex; align-items: center; gap: var(--esp-2); margin: calc(-1 * var(--esp-2)) 0 0; font-size: var(--texto-2xs); color: var(--cor-texto-secundario); }
.agenda-evento__chave { width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.agenda-evento__chave + * { margin-right: var(--esp-2); }
.agenda-evento__chave--evento { border: 1px solid var(--cor-marca-borda); background: var(--cor-marca-fundo); }
.agenda-evento__chave--viagem { margin-left: var(--esp-2); background: var(--cor-superficie-realce); }
@keyframes dia-do-evento { from { opacity: 0; translate: 0 var(--esp-2); } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1023.98px) { .agenda-evento__topo { grid-template-columns: minmax(0, 1fr); } }

/* =============== Termo: quadro de embarque (viaturas) =============== */
/* Uma coluna por viatura, só com quem vai nela; arrastar troca de coluna (o seletor do
   cartão faz o mesmo pelo teclado). Com mais de uma viatura o bloco usa a linha toda. */
.secao__grupo > .secao__bloco.secao__bloco--largo { grid-column: 1 / -1; }
.embarque { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.embarque__coluna { display: grid; align-content: start; gap: var(--esp-2); min-width: 0; padding: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie-sutil); transition: border-color var(--duracao-rapida) var(--curva-padrao), background-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao); }
.embarque__coluna--sem { border-style: dashed; background: var(--cor-superficie); }
.embarque--arrastando .embarque__coluna { border-style: dashed; }
.embarque__coluna.embarque__coluna--alvo { border-style: solid; border-color: var(--cor-marca); background: var(--cor-marca-fundo); box-shadow: var(--sombra-2); }
.embarque__viatura { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3); padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda-sutil); }
.embarque__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); }
.embarque__coluna--sem .embarque__icone { background: var(--cor-superficie-realce); color: var(--cor-texto-secundario); }
.embarque__nome { display: grid; gap: var(--esp-05); min-width: 0; }
.embarque__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); }
.embarque__nome small { overflow: hidden; font-size: var(--texto-xs); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto-secundario); }
.embarque__conta { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--esp-2); 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); color: var(--cor-texto); }
.embarque__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); }
.embarque__remover:hover { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.embarque__remover > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.embarque__remover:has(> input:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; }
.embarque__lista { display: grid; gap: var(--esp-1); min-height: var(--altura-controle); margin: 0; padding: 0; list-style: none; }
.embarque__pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie); cursor: grab; transition: border-color var(--duracao-rapida) var(--curva-padrao), box-shadow var(--duracao-rapida) var(--curva-padrao), opacity var(--duracao-rapida) var(--curva-padrao); }
.embarque__pessoa:not([draggable]) { cursor: default; }
.embarque__pessoa:hover { border-color: var(--hover-cartao-borda); box-shadow: var(--sombra-1); }
.embarque__pessoa:active { cursor: grabbing; }
.embarque__pessoa--arrastando { opacity: 0.4; }
.embarque__pessoa--chegou { animation: embarque-chegou var(--duracao-lenta) var(--curva-expressiva); }
.embarque__avatar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; 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); }
.embarque__pessoa-nome { display: grid; min-width: 0; }
.embarque__pessoa-nome > span { overflow: hidden; font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto); }
.embarque__pessoa-nome > small { overflow: hidden; font-size: var(--texto-2xs); white-space: nowrap; text-overflow: ellipsis; color: var(--cor-texto-secundario); }
.embarque__trocar { 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); transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
.embarque__trocar:hover { background: var(--cor-superficie-realce); color: var(--cor-texto); }
.embarque__trocar > select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.embarque__trocar:has(> select:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; }
.embarque__vazio { margin: 0; padding: var(--esp-3); border: 1px dashed var(--cor-borda); border-radius: var(--raio-md); font-size: var(--texto-xs); text-align: center; color: var(--cor-texto-secundario); }
.embarque__coluna:has(.embarque__pessoa) .embarque__vazio { display: none; }
@keyframes embarque-chegou { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-marca) 45%, transparent); } 100% { box-shadow: 0 0 0 var(--esp-2) transparent; } }
/* Dias de largura fixa, alinhados à esquerda (poucos dias não viram faixas largas). */
.agenda-evento__faixa { grid-auto-columns: 3.75rem; justify-content: start; }
/* Ida e volta: um selinho no canto do dia (mesmo quando o dia também é do evento). */
.agenda-evento__ponta { position: absolute; top: calc(-1 * var(--esp-2)); right: calc(-1 * var(--esp-1)); display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--raio-pilula); background: var(--cor-primaria); color: var(--cor-texto-inverso); box-shadow: 0 0 0 2px var(--cor-superficie); }
.agenda-evento__ponta > .icone { width: 0.75rem; height: 0.75rem; }