/* =====================================================================
   FORMULÁRIO — seletores próprios (data, hora, lista), combobox, progresso, etapas,
   cartões de escolha, conferência e peças do cadastro do ofício. Carregado só nas telas
   que editam (ofício, roteiro, emissão, UI Lab).
   Regras só com tokens (tokens.css); depende de base.css e components.css.
   ===================================================================== */

/* =============== Seletores próprios: data, hora e lista =============== */
/* Sem JS: texto dd/mm/aaaa, hh:mm e <select>. Com JS: botão dentro do campo e painel
   flutuante (calendário, relógio) ou lista própria — nunca o seletor do navegador. */
.seletor {
  position: relative;
  display: block;
  min-width: 0;
}

.seletor--ativo > .entrada {
  padding-right: calc(var(--esp-2) + 2rem);
}

.seletor__botao {
  position: absolute;
  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);
}

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

.seletor__botao[aria-expanded="true"] {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.seletor__botao:focus-visible,
.calendario__nav:focus-visible,
.calendario__grade td:focus-visible,
.relogio__lista:focus-visible {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: 1px;
}

.seletor__botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.seletor__painel {
  position: absolute;
  z-index: var(--z-painel-campo);
  top: calc(100% + var(--esp-1));
  /* Logo abaixo do botão do calendário/relógio, com a borda direita alinhada à dele. */
  right: var(--esp-1);
  left: auto;
  padding: var(--esp-3);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-flutuante);
  transform-origin: top right;
  animation: brotar var(--duracao-rapida) var(--curva-padrao);
}

/* Dentro de uma janela o painel vira `popover` (para ficar acima dela): sem a borda preta
   grossa e a cor de texto que o navegador dá a todo popover. */
.seletor__painel[popover] {
  margin: 0;
  border: 0;
  color: var(--cor-texto);
}

/* Campo estreito perto da borda esquerda da tela: o painel cresce para a direita. */
.seletor__painel--esquerda {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* Sem espaço abaixo (barra de ações ou fim da janela), o painel abre para cima. */
.seletor__painel--acima {
  top: auto;
  bottom: calc(100% + var(--esp-1));
  transform-origin: bottom right;
}

.seletor__painel--acima.seletor__painel--esquerda {
  transform-origin: bottom left;
}

/* Data e hora lado a lado (trechos do roteiro). */
.data-hora {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--esp-2);
}

/* Calendário: grade do mês, hoje com aro dourado, escolhido em grafite. */
.calendario {
  width: min(21rem, calc(100vw - 2rem));
}

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

.calendario__mes {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.calendario__nav {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-secundario);
  cursor: pointer;
}

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

.calendario__grade {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
}

.calendario__grade th {
  padding-bottom: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-terciario);
  text-align: center;
}

.calendario__grade td {
  height: 2.5rem;
  border-radius: var(--raio-sm);
  font-size: var(--texto-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.calendario__grade td:hover {
  background: var(--cor-marca-fundo);
}

.calendario__grade .calendario__fora {
  color: var(--cor-texto-terciario);
}

.calendario__grade td[aria-current="date"] {
  font-weight: var(--peso-semi);
  box-shadow: inset 0 0 0 1px var(--cor-marca);
}

.calendario__grade td[aria-selected="true"] {
  background: var(--grafite-900);
  color: var(--neutro-0);
  border-radius: var(--raio-xs);
}

/* Período: os dias entre o começo e o fim escolhidos (pc-data com data-ate). */
.calendario__grade .calendario__intervalo {
  background: var(--cor-superficie-realce);
  border-radius: var(--raio-xs);
}

.calendario__rodape {
  display: flex;
  justify-content: space-between;
  margin-top: var(--esp-1);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--cor-borda);
}

/* Relógio: tudo à vista, sem rolagem. No topo, o horário sendo montado; embaixo, as horas
   em quatro faixas do dia (6 por linha) e os minutos de 5 em 5 — alinhados na mesma grade. */
.relogio {
  --relogio-faixas: 4.75rem;
  --relogio-casa: 2.25rem;
  display: grid;
  gap: var(--esp-3);
  width: max-content;
}

.relogio__visor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-05);
  margin: 0;
  padding: var(--esp-2);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-sutil);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-semi);
  line-height: var(--altura-linha-justa);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

.relogio__parte {
  padding: var(--esp-05) var(--esp-2);
  border-radius: var(--raio-sm);
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.relogio__parte--ativa {
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
}

.relogio__separador {
  color: var(--cor-texto-terciario);
}

.relogio__grupo {
  display: grid;
  gap: var(--esp-1);
}

.relogio__titulo {
  margin: 0;
  padding-left: calc(var(--relogio-faixas) + 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);
}

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

.relogio__grupo--minutos .relogio__corpo {
  padding-left: calc(var(--relogio-faixas) + var(--esp-2));
}

.relogio__faixas {
  display: grid;
  grid-auto-rows: var(--relogio-casa);
  gap: var(--esp-05);
  width: var(--relogio-faixas);
  font-size: var(--texto-xs);
  color: var(--cor-texto-terciario);
}

.relogio__faixas > span {
  display: flex;
  align-items: center;
}

.relogio__lista {
  display: grid;
  grid-template-columns: repeat(6, var(--relogio-casa));
  grid-auto-rows: var(--relogio-casa);
  gap: var(--esp-05);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.relogio__lista > li {
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.relogio__lista > li:hover {
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
}

.relogio__lista:focus-visible > .relogio__ativo {
  box-shadow: inset 0 0 0 2px var(--foco-cor);
}

.relogio__lista > li[aria-selected="true"] {
  background: var(--grafite-900);
  color: var(--neutro-0);
  font-weight: var(--peso-semi);
}

/* =============== Progresso de preenchimento (formulário longo) =============== */
/* Substitui o índice lateral: uma faixa horizontal com as seções e o quanto já está
   pronto. Cada seção é um link âncora; a forma do marcador segue a linguagem de estado. */
.progresso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  margin: var(--esp-2) 0 var(--esp-4);
}

/* Fixa sob o topo enquanto o formulário rola: uma faixa (não um painel lateral). */
.progresso--fixo {
  position: sticky;
  top: var(--altura-topo);
  /* Acima do conteúdo da folha — os rótulos flutuantes dos campos também são
     posicionados e passavam por cima da faixa ao rolar. */
  z-index: var(--z-progresso);
  margin-left: calc(-1 * var(--esp-2));
  margin-right: calc(-1 * var(--esp-2));
  padding: var(--esp-2);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  background: var(--cor-fundo);
  transition: box-shadow var(--duracao-media) var(--curva-padrao);
}

/* Quando descola do conteúdo (rolando), ganha a sombra do topo — progresso.js marca. */
.progresso--flutuando {
  box-shadow: 0 8px 16px -12px var(--tinta-28);
}

/* Você está aqui: a seção visível no momento. */
.progresso__etapa--atual > a {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
  box-shadow: inset 0 0 0 1px var(--cor-borda), inset 0 -2px 0 var(--cor-marca);
}

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

.progresso__etapa > a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2rem;
  padding: 0 var(--esp-2);
  border-radius: var(--raio-pilula);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.progresso__etapa > a:hover {
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
}

.progresso__etapa > a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--raio-pilula);
  border: 1.5px solid var(--neutro-500);
  background: var(--cor-superficie);
  flex: none;
}

.progresso__etapa--ok > a {
  color: var(--cor-texto);
}

.progresso__etapa--ok > a::before {
  width: 0.6rem;
  height: 0.5rem;
  border: 0;
  border-radius: 0;
  background: var(--cor-marca);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%);
}

.progresso__etapa--pendente > a::before {
  border-color: var(--cor-aviso);
}

.progresso__etapa--bloqueia > a::before {
  border-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

@media (max-width: 479.98px) {
  .progresso--fixo .progresso__etapas { display: none; }
  .progresso--fixo .progresso__medida { margin-left: 0; flex: 1; }
  .progresso__barra { flex: 1; }
}

.progresso__medida {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* <progress> nativo, vestido: acessível por construção. */
.progresso__barra {
  appearance: none;
  width: 7rem;
  height: 0.375rem;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-realce);
  overflow: hidden;
}

.progresso__barra::-webkit-progress-bar {
  background: var(--cor-superficie-realce);
  border-radius: var(--raio-pilula);
}

.progresso__barra::-webkit-progress-value {
  background: linear-gradient(90deg, var(--dourado-600), var(--dourado-500));
  border-radius: var(--raio-pilula);
  transition: width var(--duracao-lenta) var(--curva-padrao);
}

.progresso__barra::-moz-progress-bar {
  background: var(--dourado-500);
  border-radius: var(--raio-pilula);
}

.progresso--completo .progresso__medida {
  color: var(--cor-sucesso);
}

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

/* =============== Específicos de formulários longos =============== */

/* ---------- Cartões de escolha (rádio como decisão, não como lista de bolinhas) ----------
   O <input> continua nativo (teclado, rótulo, leitor de tela); o cartão inteiro é o rótulo.
   Marcado: borda grafite + marca dourada no canto. Foco: o anel do DS no cartão. */
.opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--esp-2);
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.opcoes > legend {
  padding: 0;
  margin-bottom: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-secundario);
}

/* Dentro de uma linha de campos: a legenda vira rótulo na borda (como nos campos ao lado)
   e os cartões começam na mesma altura das caixas. Cresce para fechar a linha. */
.campos > .opcoes {
  position: relative;
  flex: 1 1 24rem;
  padding-top: 0.5rem;
}

.campos > .opcoes > legend {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--esp-2);
  margin: 0;
  padding: 0 var(--esp-1);
  font-size: var(--texto-xs);
  line-height: 1rem;
  white-space: nowrap;
  background: var(--fundo-rotulo, var(--cor-superficie));
}

/* Compactos numa linha de campos: ícone + título na altura de um campo; a explicação de
   cada opção vai para a ajuda da linha (e continua no rótulo para leitores de tela). */
.campos > .opcoes--compactas {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
}

.campos > .opcoes--compactas .opcao {
  padding-right: var(--esp-6);
}

/* Fechando a linha: os compactos crescem até a margem, cada pílula com a sua parte, para
   a linha do número, da data e do protocolo não terminar num vão. */
.campos > .opcoes--estende {
  flex: 1 1 auto;
}

.campos > .opcoes--estende .opcao {
  flex: 1 1 9rem;
}

/* Em folha mais estreita os compactos perdem o ícone e viram pílulas de texto: cabem na
   linha do número, da data e do protocolo em vez de abrir uma linha pela metade. */
@media (max-width: 1279.98px) {
  .campos > .opcoes--compactas .opcao__icone { display: none; }
}

.opcao {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--esp-2);
  min-height: var(--altura-controle);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
  cursor: pointer;
  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);
}

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

.opcao__icone {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--raio-md);
  background: var(--cor-superficie-realce);
  color: var(--cor-texto-secundario);
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.opcao__titulo {
  display: block;
  font-weight: var(--peso-semi);
  line-height: var(--altura-linha-justa);
}

.opcao__descricao {
  display: block;
  margin-top: 1px;
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* Sem ícone, o texto ocupa as duas colunas. */
.opcao__texto:first-of-type:last-child,
.opcao > input + .opcao__texto {
  grid-column: 1 / -1;
}

.opcao:hover {
  border-color: var(--neutro-500);
  background: var(--cor-superficie);
}

.opcao:has(input:checked) {
  border-color: var(--grafite-900);
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--grafite-900);
}

.opcao:has(input:checked) .opcao__icone {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

/* Marca de escolhido: um canto dourado com ✓ — a "dobra" do papel marcado. */
.opcao::after {
  content: "";
  position: absolute;
  top: var(--esp-1);
  right: var(--esp-1);
  width: 0.75rem;
  height: 0.6rem;
  background: var(--cor-marca);
  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);
}

.opcao:has(input:checked)::after {
  transform: scale(1);
}

.opcao:has(input:focus-visible) {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: var(--foco-offset);
}

.opcao:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.opcao:active:not(:has(input:disabled)) {
  transform: scale(var(--escala-pressao));
}

/* Campo que só vale para uma escolha: aparece colado à decisão (sem JS: :has() sobre a
   opção marcada do <select>; o pc-select mantém o <select> nativo em dia). Entra tomando a
   linha inteira — um campo a mais na linha de cima a quebraria pela metade. */
.condicional {
  display: none;
}

.custeio:has(select[name="custeio"] option[value="outra_instituicao"]:checked) .condicional--outra-instituicao {
  display: flex;
  flex: 1 1 100%;
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

/* Programas do plano: o campo "Outro programa" divide a linha com programa, período e
   horário — só quando "Outro" está marcado na lista (ou tem erro). */
.programa-plano:not(:has(input[name="programa_outro"]:checked)) > .programa-plano__outro:not(.campo--erro) {
  display: none;
}

.programa-plano > .programa-plano__outro {
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

/* ---------- Conferência final (seção 7) ---------- */
.conferencia {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.conferencia--pronta {
  background: linear-gradient(180deg, var(--cor-superficie), var(--cor-marca-fundo));
  box-shadow: inset 0 0 0 1px var(--cor-marca-borda);
}

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

.conferencia--pronta .conferencia__titulo .icone {
  color: var(--cor-marca-texto);
  animation: carimbar var(--duracao-enfase) var(--curva-expressiva) both;
}

.conferencia__itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--esp-1) var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
}

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

.conferencia__item::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: var(--raio-pilula);
  border: 1.5px solid var(--cor-aviso);
}

.conferencia__item--ok {
  color: var(--cor-texto);
}

.conferencia__item--ok::before {
  width: 0.6rem;
  height: 0.5rem;
  border: 0;
  border-radius: 0;
  background: var(--cor-marca);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 40% 64%);
}

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

/* ---------- Divulgação (details) aberta, sem caixa ---------- */
.divulgacao > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: max(1.5rem, var(--alvo-minimo)); /* alvo de toque ≥ 24px mesmo a 90% */
  color: var(--cor-texto-secundario);
  font-weight: var(--peso-medio);
  cursor: pointer;
  list-style: none;
}

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

.divulgacao > summary .icone {
  transition: transform var(--duracao-media) var(--curva-expressiva);
}

.divulgacao[open] > summary .icone:has(use[href$="#i-plus"]) {
  transform: rotate(45deg);
}

.divulgacao > summary:hover {
  color: var(--cor-texto);
}

.divulgacao[open] > .divulgacao__corpo {
  margin-top: var(--esp-4);
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

/* ---------- Frase do ofício (cabeçalho da edição) ---------- */
/* O que o documento diz até agora, numa linha: servidores · destinos · período · transporte · valor. */
.frase-oficio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

.frase-oficio__item {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}

.frase-oficio__item .icone {
  color: var(--cor-texto-terciario);
}

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

.frase-oficio__valor {
  font-weight: var(--peso-semi);
  color: var(--cor-marca-texto);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .conferencia { padding: var(--esp-4); }
}

/* =============== Transporte e equipe (ofício) =============== */
/* Campos que só valem para um meio de transporte (sem JS: :has() sobre a opção marcada).
   A seleção fica à esquerda; o que a escolha pede entra na mesma linha, à direita, e a
   linha fecha na margem. */
.transporte:has(select[name="tipo_transporte"] option[value="viatura"]:checked) .so-outro,
.transporte:has(select[name="tipo_transporte"] option[value="outro"]:checked) .so-viatura {
  display: none;
}

/* Meio curto + seleção proporcional. A descrição opcional ocupa a linha seguinte. */
.campos.transporte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
.transporte > .campo { min-width: 0; }
.motorista-externo__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4) var(--esp-3); align-items: start; }
@media (min-width: 768px) {
  .campos.transporte { grid-template-columns: minmax(calc(var(--esp-4) * 9.5), .65fr) minmax(0, 1.35fr); }
  .transporte > .so-outro:last-child { grid-column: 1 / -1; }
  .motorista-externo__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motorista-externo__campos:has(option[value=""]:checked) > .campo { grid-column: 1 / -1; }
}

/* Motorista de fora da equipe: cada escolha mostra os seus campos (sem JS: :has()). */
/* Um motorista só: a opção externa reaparece quando a marcação da equipe é retirada. */
#recursos:has(#equipe [data-motorista]) .motorista-externo {
  display: none;
}
.transporte__selecionada { margin-top: var(--esp-3); }
pc-transporte:has(select[name="tipo_transporte"] option[value="outro"]:checked) > .transporte__selecionada { display: none; }

.motorista-externo__campos:not(:has(option[value="servidor"]:checked)) .so-servidor-externo,
.motorista-externo__campos:not(:has(option[value="manual"]:checked)) .so-manual,
.motorista-externo__campos:has(select[name="motorista_externo"] option[value=""]:checked) .so-externo {
  display: none;
}

.motorista-externo__largo {
  flex: 1 1 100%;
}

/* Coordenadores do plano: "Quem coordena" mostra a busca no cadastro ou o nome e o cargo
   à mão (só um dos dois de cada vez, sem JavaScript). */
.coordenador:has(select[name$="_origem"] option[value="manual"]:checked) .coordenador__cadastro,
.coordenador:not(:has(select[name$="_origem"] option[value="manual"]:checked)) .coordenador__manual {
  display: none;
}

.coordenador + .coordenador {
  margin-top: var(--esp-3);
}

/* =============== Equipe: crachás =============== */
/* A busca vai de margem a margem, como a busca das listas — uma caixa curta deixaria a
   linha pela metade. Avisos de agenda numa lista só. */
.equipe__busca {
  width: 100%;
}

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

/* Equipe: os mesmos cartões de pessoa da janela de resumo (avatar, nome, cargo), numa
   grade que fecha a linha (larguras_de_cartoes). Quem dirige tem o avatar em grafite e o
   selo "Motorista"; as ações ficam à direita, discretas até o cartão receber o mouse ou
   o foco — assim o cartão é leitura, e não um painel de botões. */
.equipe__cartoes {
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.equipe__cartao {
  position: relative;
  gap: var(--esp-3);
}

/* Quem dirige se marca clicando no cartão: o botão cobre a peça inteira (sem desenho
   próprio) e o conteúdo passa o clique adiante. Só o X de remover fica por cima. */
.equipe__motorista {
  display: contents;
}

.equipe__motorista-alvo {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  cursor: pointer;
}

.equipe__cartao > .avatar,
.equipe__cartao > .pessoa__texto {
  position: relative;
  pointer-events: none;
}

.equipe__cartao > .equipe__acoes {
  position: relative;
}

.equipe__cartao:hover,
.equipe__cartao:has(.equipe__motorista-alvo:focus-visible) {
  background: var(--cor-superficie-realce);
}

/* A equipe como campo de formulário (viagens.forms.CampoEquipe): o mesmo componente da
   folha do ofício — a grade de seis colunas e o cartão de pessoa por inteiro, sem o jeito
   compacto da escolha múltipla genérica. */
.equipe-campo {
  display: block;
}

/* A escolha de viatura fora do ofício (viagens/_campo_viatura.html): o <pc-transporte> só
   liga a lógica; quem ocupa a linha é o campo de dentro. */
.transporte-campo {
  display: contents;
}

.campos > .transporte-campo > .campo--lg { flex: 1 1 18rem; }
.campos > .transporte-campo > .campo--md { flex: 0 1 14rem; }

.equipe__cartoes.multiescolha__lista:not(.pessoas--compactas) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.equipe__cartoes:not(.pessoas--compactas) > .equipe__cartao.multiescolha__item {
  flex-wrap: wrap;
  padding: var(--esp-3);
}

.equipe-campo .equipe__vazia {
  margin-top: var(--esp-3);
}

/* Ofícios vinculados: o aviso de vazio encosta na busca. */
.oficios-campo .equipe__vazia {
  margin-top: 0;
}

.equipe__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-padrao);
}

.equipe__cartao:hover .equipe__acoes,
.equipe__cartao:focus-within .equipe__acoes {
  opacity: 1;
}

/* Sem mouse (toque) não há hover: as ações ficam sempre visíveis. */
@media (hover: none) {
  .equipe__acoes {
    opacity: 1;
  }
}

.equipe__acoes form {
  display: contents;
}

.equipe__acao {
  display: inline-grid;
  place-items: center;
  width: var(--altura-controle-sm);
  height: var(--altura-controle-sm);
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

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

/* Já é o motorista: o botão fica aceso e some com o resto só no hover. */
.equipe__acao[aria-pressed="true"] {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.equipe__cartao:has(.equipe__acao[aria-pressed="true"]) .equipe__acoes {
  opacity: 1;
}

.equipe__acao--remover:hover {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.equipe__acao:focus-visible {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: var(--foco-offset);
}

/* Equipe vazia: um convite, não um aviso. */
.equipe__vazia {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  color: var(--cor-texto-secundario);
}

.equipe__vazia > .icone {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--cor-marca-texto);
}

.equipe__vazia p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cracha,
  .cracha:hover {
    translate: none;
  }
}

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

/* =============== Usar um roteiro cadastrado (ofício) =============== */
/* Ofício: escolher um roteiro cadastrado para preencher o itinerário. */
.usar-roteiro {
  display: grid;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.usar-roteiro__escolha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--esp-3);
}

/* O campo cresce até o botão: a linha fecha na margem, sem sobra. */
.usar-roteiro__escolha > .campo {
  flex: 1 1 30rem;
}

.usar-roteiro__escolha > .botao {
  margin-top: 0.5rem; /* alinha com a caixa do campo (rótulo na borda) */
}

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

/* "Do ofício: …" — o valor que um campo em branco do termo herda do ofício. */
.heranca {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

/* Configuração: quem sai assinando hoje, por tipo de documento. */
.hoje-assina {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-sutil);
  list-style: none;
  font-size: var(--texto-sm);
}

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

/* Linhas repetidas (<pc-linhas>): ex.: o efetivo do plano — unidade, cargo, quantidade e
   remover numa linha só; no celular, os campos empilham e o remover fica à direita. */
.linhas {
  display: grid;
  gap: var(--esp-3);
}

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

.linhas__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7rem auto;
  gap: var(--esp-3);
  align-items: end;
}

.linhas > [data-adicionar] {
  justify-self: start;
}

/* No desktop os rótulos aparecem só na primeira linha (as colunas já dizem o que é); para
   o leitor de tela continuam em todas. */
@media (min-width: 640px) {
  .linhas__linha + .linhas__linha .campo__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Celular: o cargo na linha toda; unidade e quantidade lado a lado; remover no pé. */
@media (max-width: 639.98px) {
  /* No celular: o cargo (o que mais importa) na linha de cima, inteiro; embaixo, unidade,
     a quantidade compacta e a lixeira — sem uma linha só para a lixeira. */
  .linhas__linha {
    grid-template-columns: minmax(0, 1fr) 8rem auto;
    padding-bottom: var(--esp-3);
    border-bottom: var(--borda-sutil);
  }

  .linhas__linha > .campo:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* Atividades do plano: aplicar conjunto, filtrar e limpar numa linha só. */
.ferramentas-atividades {
  align-items: flex-end;
}

/* Textos que vêm em linhas ("• meta") e precisam manter as quebras. */
.texto-pre {
  white-space: pre-line;
  margin: 0;
}

.metas-recursos > .secao__bloco {
  flex: 1 1 18rem;
}

/* Modos com campos próprios (diário de bordo: motorista e viatura). Só aparecem os campos
   do modo marcado; sem :has, aparecem todos (o servidor limpa os que não valem). */
.modos {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.modos__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--esp-3);
}

/* Modos de um recurso: opções completas e campos condicionais junto da escolha. */
.modos--recurso { align-content: start; gap: var(--esp-3); }
.modos--recurso > legend { font-weight: var(--peso-semi); margin-bottom: var(--esp-2); }
.modos--recurso .opcoes { grid-template-columns: minmax(0, 1fr); }
.modos--recurso .modos__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modos--recurso .modos__campos > .campo:only-child,
.modos--recurso .modos__campos > .campo:first-child { grid-column: 1 / -1; }
.modos--recurso .modos__campos > .campo:last-child:nth-child(even) { grid-column: 1 / -1; }

@supports selector(:has(*)) {
  .modos__campos { display: none; }
  .modos:has(input[value="servidor"]:checked) .modos__campos[data-modo="servidor"],
  .modos:has(input[value="outro_oficio"]:checked) .modos__campos[data-modo="outro_oficio"],
  .modos:has(input[value="cadastro"]:checked) .modos__campos[data-modo="cadastro"],
  .modos:has(input[value="manual"]:checked) .modos__campos[data-modo="manual"],
  .modos:has(input[value="__outro__"]:checked) .modos__campos[data-modo="outro"] {
    display: grid;
  }
}

/* Linhas do diário de bordo: a rota (com o número do trecho) e os três campos. */
.diario-linhas {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diario-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-4) 0;
  border-top: var(--borda-sutil);
}

.diario-linha:first-child {
  border-top: 0;
}

.diario-linha__rota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 0;
}

.diario-linha__rota p {
  margin: 0;
}

.diario-linha__numero {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--esp-8);
  height: var(--esp-8);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-sutil);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
}

.diario-linha__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--esp-2) var(--esp-3);
}

.diario-linha__resultado {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  margin: 0;
  border-left: var(--filete) solid var(--cor-marca);
  background: var(--cor-superficie-sutil);
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}
.diario-linha__resultado strong { font-size: var(--texto-md); color: var(--cor-texto); }
.diario-linha--hodometro .diario-linha__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 599.98px) {
  .diario-linha__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diario-linha--hodometro .diario-linha__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diario-linha--hodometro .diario-linha__campos > .campo:last-child { grid-column: 1 / -1; }
  .diario-linha__resultado { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 1024px) {
  .diario-linha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
  .diario-linha--hodometro {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 1.2fr) minmax(7rem, .3fr);
  }
}

/* Anexar documento da prestação: o arquivo, os dados do comprovante e o botão numa linha
   que quebra (360px: um embaixo do outro). */
/* Anexar: o arquivo (e, no comprovante, valor, data e operação) e o botão numa linha só,
   o botão alinhado à caixa do campo (não à ajuda embaixo dela). Estreito, empilha. */
.anexo-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--esp-2) var(--esp-3);
}

.anexo-campos > .campo {
  flex: 1 1 9rem;
}

.anexo-campos > .anexo-campos__arquivo {
  flex: 3 1 20rem;
}

.anexo-campos__acao {
  display: flex;
  flex: 0 0 auto;
  padding-top: 0.5rem; /* o recuo do rótulo na borda: o botão fica na linha da caixa */
}

.anexo-campos__acao > .botao {
  min-height: var(--altura-controle);
}

/* =============== Número com − e + (componentes/passos.js) ===============
   O mesmo desenho dos passos de tempo do roteiro: a caixa é uma peça só e os botões moram
   dentro dela, à direita. */
.passos {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--altura-controle);
  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);
}

.passos:hover {
  border-color: var(--neutro-500);
}

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

.passos .entrada {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 0 var(--esp-3);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

.passos .entrada::-webkit-inner-spin-button,
.passos .entrada::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

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

.passos__botao {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 var(--esp-05);
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-terciario);
  font: inherit;
  font-size: var(--texto-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

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

.passos__botao:last-child {
  margin-right: var(--esp-1);
}

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

/* =============== Atividades do plano ===============
   Uma faixa de ferramentas da altura de um campo (busca larga, conjunto, desmarcar) e a
   lista: uma caixa só, duas colunas com filetes entre as linhas (sem cartões soltos). Cada
   linha: a caixa, o nome e a meta numa linha; a marcada ganha o fundo da marca. */
.atividades__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--esp-3);
}

.atividades__barra[hidden] {
  display: none;
}

/* Sem conjuntos (nem o "+"), a busca ocupa o lugar dele. */
.atividades__barra:not(:has(.atividades__conjunto)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.atividades__limpar {
  min-height: var(--altura-controle);
}

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

/* Respiro entre o que vem antes (a faixa de ferramentas, o nome do conjunto na janela) e
   as etiquetas — o `margin: 0` do grupo anulava o da pilha. */
.atividades__barra + .atividades__grupo,
.pilha > .atividades__grupo:not(:first-child) {
  margin-top: var(--esp-4);
}

.atividades__grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

/* Etiqueta: contornada e discreta; marcada, preenchida em grafite (o mesmo par do botão
   primário escuro do sistema) com o "✓" no lugar do "+". */
.atividade {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--altura-controle-sm);
  max-width: 100%;
  padding: var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.atividade[hidden] {
  display: none;
}

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

.atividade:has(.atividade__caixa:checked) {
  border-color: var(--grafite-900);
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.atividade:has(.atividade__caixa:checked):hover {
  border-color: var(--grafite-800);
  background: var(--grafite-800);
  color: var(--neutro-0);
}

.atividade:has(.atividade__caixa:focus-visible) {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: 2px;
}

/* A caixa é o valor e o alvo do teclado; não aparece. */
.atividade__caixa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.atividade__icone {
  flex: none;
  color: var(--cor-texto-terciario);
}

.atividade__icone--marcada,
.atividade:has(.atividade__caixa:checked) .atividade__icone--marcar {
  display: none;
}

.atividade:has(.atividade__caixa:checked) .atividade__icone--marcada {
  display: block;
  color: var(--dourado-300);
}

.atividade__nome {
  overflow: hidden;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: var(--altura-linha-justa);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.atividades__sem-resultado {
  padding: var(--esp-2) 0;
}

.atividades__documento .divulgacao {
  margin: 0;
}

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

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

.atividades__texto-doc {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-sutil);
}

/* Metas e recursos como lista: marcador dourado, recuo pendurado (a 2ª linha alinha com o
   texto, não com o marcador) e respiro entre os itens. */
.atividades__itens {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
}

.atividades__itens > li {
  position: relative;
  padding-left: var(--esp-4);
}

.atividades__itens > li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: var(--esp-1);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--cor-marca);
}

.atividades__titulo-doc {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

/* Janela do evento do plano: os blocos (efetivo, deslocamento, atividades) sem filete entre
   eles — o espaço da pilha já os separa. */
.evento-plano > .secao__bloco {
  margin-top: 0;
  border-top: 0;
}