/* =====================================================================
   Itinerário 2.0 (ADR 0016), em três blocos como no modelo:
   Sede e destinos (lista de paradas no trilho) → Rota (mapa e resumo) →
   Trechos (um card dourado por trecho: saída, tempos e chegada calculada).
   Carregado só nas telas que editam itinerário (ofício, roteiro, UI Lab).
   ===================================================================== */
.itin {
  container: itin / inline-size;
  position: relative;
  display: grid;
  gap: var(--esp-6);
}

/* Tempos e UF vêm sugeridos: o "(opcional)" só roubaria espaço do rótulo. */
.itin .campo__opcional {
  display: none;
}

/* ---------- Blocos ---------- */
.itin__bloco {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
}

.itin__bloco-cabecalho {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-4);
}

/* Trechos é uma etapa do documento, não só um bloco do itinerário: o filete e o título
   seguem o mesmo desenho das seções numeradas da folha. */
.itin__bloco--etapa {
  padding-top: var(--esp-5);
  border-top: var(--borda-sutil);
}

.itin__bloco-titulo--etapa {
  font-size: var(--texto-lg);
}

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

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

.itin__dica,
.itin__fonte {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-terciario);
}

/* ---------- Sede e destinos: o trajeto ----------
   Um trilho fino liga sede → destinos → volta à sede; cada parada é um ponto sobre ele.
   O centro do marco fica no meio da caixa do campo (abaixo do rótulo na borda). */
.itin__paradas {
  --itin-trilho: 2rem;
  --itin-centro: calc(0.5rem + var(--altura-controle) / 2);
  position: relative;
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Um trilho só, do primeiro marco ao último: assim ele continua inteiro mesmo quando o
   espaço entre as linhas cresce para preencher a altura da coluna. */
.itin__paradas::before {
  content: "";
  position: absolute;
  top: var(--itin-centro);
  bottom: calc(var(--altura-controle) / 2);
  left: calc(var(--itin-trilho) / 2 - 1px);
  width: 2px;
  background: var(--cor-borda-forte);
}

.itin__parada,
.itin__adicionar,
.itin__vaga {
  position: relative;
  display: grid;
  grid-template-columns: var(--itin-trilho) minmax(0, 1fr) 2.25rem;
  gap: var(--esp-2);
  align-items: start;
  transition: scale var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao);
}

/* Marco (sem JS) e alça (com JS) ocupam a mesma casa do trilho. */
.itin__marco,
.itin__alca {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: calc(var(--itin-centro) - 0.875rem);
  padding: 0;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-secundario);
  font: inherit;
}

.itin__marco > *,
.itin__alca > *,
.itin__marco::after,
.itin__alca::after {
  grid-area: 1 / 1;
}

/* O ponto do destino; o anel da cor da folha recorta o trilho em volta. */
.itin__marco::after,
.itin__alca::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--cor-marca);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 3px var(--cor-superficie);
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    scale var(--duracao-rapida) var(--curva-padrao);
}

/* A parada em edição fica com o ponto cheio. */
.itin__parada:focus-within > :is(.itin__marco, .itin__alca)::after {
  background: var(--cor-marca);
}

.itin__alca:not([hidden]) + .itin__marco {
  display: none;
}

/* A alça é o próprio ponto: no hover/foco ele vira o "pegador". */
.itin__alca {
  cursor: grab;
  touch-action: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.itin__alca .icone {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-padrao);
}

.itin__alca:hover,
.itin__alca:focus-visible,
.itin__parada--arrastando .itin__alca {
  background: var(--cor-superficie-realce);
  color: var(--cor-texto);
}

.itin__alca:hover .icone,
.itin__alca:focus-visible .icone,
.itin__parada--arrastando .itin__alca .icone {
  opacity: 1;
}

.itin__alca:hover::after,
.itin__alca:focus-visible::after,
.itin__parada--arrastando .itin__alca::after {
  scale: 0;
}

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

/* Toque não tem hover: o pegador fica sempre à mostra. */
@media (hover: none) {
  .itin__alca {
    background: var(--cor-superficie-realce);
  }

  .itin__alca .icone {
    opacity: 1;
  }

  .itin__alca::after {
    scale: 0;
  }
}

/* Sede e volta: a casa, no começo e no fim do trilho. */
.itin__parada--sede .itin__marco,
.itin__parada--volta .itin__marco {
  background: var(--grafite-900);
  color: var(--neutro-0);
  box-shadow: 0 0 0 3px var(--cor-superficie);
}

.itin__parada--volta .itin__marco {
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  box-shadow: inset 0 0 0 2px var(--cor-borda-forte), 0 0 0 3px var(--cor-superficie);
}

.itin__parada--sede .itin__marco::after,
.itin__parada--volta .itin__marco::after,
.itin__marco--novo::after {
  content: none;
}

.itin__marco .icone {
  width: 0.9rem;
  height: 0.9rem;
}

.itin__marco--novo {
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda-forte), 0 0 0 3px var(--cor-superficie);
}

.itin__marco--novo .icone {
  width: 0.8rem;
  height: 0.8rem;
}

/* UF + município numa caixa só: a UF é o prefixo que filtra a busca. */
.itin__local {
  grid-column: 2;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}

.itin__parada--sede .itin__local {
  grid-column: 2 / -1;
}

.itin__uf :is(.selecao, .entrada) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: var(--esp-2);
  padding-right: var(--esp-6);
}

/* Sede fixa da unidade (<pc-destinos>): a mesma caixa das paradas, só que sem editar —
   fundo e texto de campo comum (o cinza de "desabilitado" quebrava o rótulo flutuante)
   e o mesmo par UF | cidade colado. */
.itin__parada--sede .entrada[readonly] {
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
}

.itin__cidade {
  margin-left: -1px;
}

.itin__cidade .entrada {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.itin__local :is(.selecao, .entrada):is(:hover, :focus-visible),
.itin__bv-onde :is(.selecao, .entrada):is(:hover, :focus-visible) {
  position: relative;
  z-index: 1;
}

/* As duas listas ficam na página e o interruptor só troca qual aparece: alternar não
   recarrega nem perde o que já foi digitado na outra. */
.itin__so-bv,
.itin--bate-volta .itin__so-destinos {
  display: none;
}

.itin--bate-volta .itin__so-bv {
  display: revert;
}

/* Contêiner da lista de cada modo: só o do modo ativo é desenhado, como grade com respiro
   entre a sede e os cards. A regra do modo ativo precisa ser mais específica que a que
   esconde — senão a lista do modo desligado volta a aparecer. */
.itin__lista-modo {
  gap: var(--esp-3);
}

.itin__so-destinos.itin__lista-modo {
  display: grid;
}

.itin--bate-volta .itin__so-destinos.itin__lista-modo {
  display: none;
}

.itin--bate-volta .itin__so-bv.itin__lista-modo {
  display: grid;
}

/* ---------- Bate-volta: um card por destino-e-período ---------- */
.itin__modo {
  margin-left: auto;
}

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

.itin__bv {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

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

.itin__bv-titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

.itin__bv-cabecalho .itin__remover {
  grid-column: auto;
  margin: 0 0 0 auto;
}

/* Onde: a UF encosta no destino, como nas paradas. */
.itin__bv-onde {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
}

/* Quando: duas linhas, Ida e Volta, cada uma com data e hora — a leitura da referência. */
.itin__bv-quando {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(8rem, 1fr));
  gap: var(--esp-2) var(--esp-3);
  align-items: center;
}

.itin__bv-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding-top: 0.5rem;
  min-width: 4rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-secundario);
}

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

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

@container itin (max-width: 34rem) {
  .itin__bv-quando {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .itin__bv-rotulo {
    grid-column: 1 / -1;
    padding-top: 0;
  }
}

.itin__bv-resumo:empty {
  display: none;
}

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

.itin__botao-adicionar--solto {
  grid-column: 1 / -1;
  margin-top: var(--esp-3);
}

/* ---------- Movimento ----------
   Doutrina do projeto (docs/design-system/motion.md): movimento explica mudança de estado,
   nunca enfeita; só transform e opacity (CLS = 0); os tokens zeram com movimento reduzido.
   O itinerário muda sozinho enquanto se digita — rota, trechos e diárias —, então aqui o
   movimento é o que diz "isto acabou de mudar". */

/* Troca de modo: a lista que entra desliza do lado, deixando claro que é outra coisa. */
.itin__lista-modo {
  animation: itin-entrar-lista var(--duracao-lenta) var(--curva-padrao);
}

@keyframes itin-entrar-lista {
  from { opacity: 0; transform: translateX(-1.25rem); }
  to { opacity: 1; transform: none; }
}

/* Dias gerados: cascata de cima para baixo, como se a viagem fosse sendo montada. */
.itin__gerado {
  animation: itin-entrar-dia var(--duracao-lenta) var(--curva-expressiva) backwards;
}

@keyframes itin-entrar-dia {
  from { opacity: 0; transform: translateX(-1.5rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.itin__gerado:nth-child(1) { animation-delay: 0ms; }
.itin__gerado:nth-child(2) { animation-delay: 60ms; }
.itin__gerado:nth-child(3) { animation-delay: 120ms; }
.itin__gerado:nth-child(4) { animation-delay: 180ms; }
.itin__gerado:nth-child(5) { animation-delay: 240ms; }
.itin__gerado:nth-child(n + 6) { animation-delay: 300ms; }

.itin__gerado {
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.itin__gerado:hover {
  background: var(--cor-superficie-sutil);
}

/* O dia em foco empurra a data para fora, como uma aba de agenda. */
.itin__gerado-dia {
  transition: transform var(--duracao-rapida) var(--curva-expressiva);
}

.itin__gerado:hover .itin__gerado-dia {
  transform: translateX(2px);
}

/* Card do bate-volta: entra e, enquanto é preenchido, a borda acende. */
.itin__bv {
  animation: aparecer var(--duracao-media) var(--curva-padrao);
  transition: box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.itin__bv:focus-within {
  box-shadow: inset 0 0 0 1px var(--cor-marca-borda);
}

/* Enquanto a rota é recalculada, os totais esmaecem: o número velho não finge ser o novo. */
.itin[aria-busy="true"] .itin__totais {
  opacity: 0.45;
  transition: opacity var(--duracao-media) var(--curva-padrao);
}

/* Interruptor de modo: o trilho responde ao toque antes de a tela trocar. */
.itin__modo {
  transition: transform var(--duracao-instantanea) var(--curva-suave);
}

.itin__modo:active {
  transform: scale(var(--escala-pressao));
}

/* Conferência do bate-volta: uma linha por dia, lida como tabela — sem a moldura de card
   dos trechos editáveis, porque aqui não se preenche nada. */
/* Moldura como borda real (não sombra interna): o fundo do hover de uma linha passaria
   por cima de uma sombra interna e comeria o filete. */
.itin__gerados {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.itin__gerado {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) var(--esp-3);
}

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

.itin__gerado-dia {
  display: grid;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  color: var(--cor-marca-texto);
}

.itin__gerado-dia small {
  font-size: var(--texto-2xs);
  font-weight: var(--peso-medio);
  text-transform: capitalize;
  color: var(--cor-texto-terciario);
}

.itin__gerado-rota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

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

.itin__gerado-ida-volta {
  color: var(--cor-marca-texto);
}

.itin__gerado-horas {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.itin__gerado-horas small {
  font-size: var(--texto-2xs);
  text-transform: uppercase;
  letter-spacing: var(--rastreio-rotulo);
  color: var(--cor-texto-terciario);
}

.itin__gerado-horas > span {
  color: var(--cor-texto-terciario);
}

.itin__gerado-km {
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

@container itin (max-width: 46rem) {
  .itin__gerado {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
  }

  .itin__gerado-horas:first-of-type {
    grid-column: 2;
  }
}

/* Volta à sede: só leitura, fecha o trajeto. */
.itin__volta {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  min-height: var(--altura-controle);
  margin: 0.5rem 0 0;
  padding: 0 var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

.itin__volta-cidade {
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

/* Remover: botão de ícone na ponta da linha (sem JS, a caixa de seleção aparece). */
/* Serve de <label> (remover um destino) e de <button> (limpar o bate-volta): o botão
   não pode trazer a moldura e o fundo que o navegador dá de origem. */
.itin__remover {
  grid-column: 3;
  display: inline-flex;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-width: 2.25rem;
  height: 2.25rem;
  margin-top: calc(var(--itin-centro) - 1.125rem);
  border-radius: var(--raio-md);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}

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

.itin:not(.itin--ativo) .itin__parada {
  grid-template-columns: var(--itin-trilho) minmax(0, 1fr) auto;
}

.itin--ativo .itin__remover input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.itin--ativo .itin__remover-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.itin__parada:has(.itin__remover input:checked) .itin__local {
  opacity: 0.55;
}

/* Arrastando: a linha levanta e segue o ponteiro; a vaga mostra onde ela vai cair. */
.itin--arrastando {
  cursor: grabbing;
  user-select: none;
}

.itin--arrastando .itin__alca {
  cursor: grabbing;
}

.itin__parada--arrastando {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 5;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 var(--esp-2) var(--cor-superficie),
    0 0 0 calc(var(--esp-2) + 1px) var(--cor-borda), var(--sombra-flutuante);
  scale: 1.015;
}

.itin__vaga {
  align-items: stretch;
}

.itin__vaga::after {
  content: "";
  grid-column: 2 / -1;
  margin-top: 0.5rem;
  border: 2px dashed var(--cor-marca);
  border-radius: var(--raio-md);
  background: var(--cor-marca-fundo);
}

/* "Adicionar destino": um nó tracejado no próprio trilho, antes da volta. */
.itin__botao-adicionar {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  min-height: var(--altura-controle);
  margin-top: 0.5rem;
  padding: var(--esp-1) var(--esp-3);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-weight: var(--peso-semi);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao);
}

.itin__botao-adicionar small {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-terciario);
}

.itin__botao-adicionar:hover {
  border-color: var(--cor-marca);
  background: var(--cor-marca-fundo);
}

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

/* ---------- Rota: mapa + resumo ---------- */
.itin__painel {
  padding: var(--esp-3);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie-sutil);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.itin__rota {
  position: relative;
  display: grid;
  gap: var(--esp-3);
}

/* Atalho sobre o mapa: só aparece quando a vista deixou de mostrar a rota toda. */
.itin__ver-rota {
  position: absolute;
  z-index: 2;
  right: var(--esp-2);
  bottom: var(--esp-2);
  box-shadow: var(--sombra-2);
}

.itin__mapa {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  min-height: 14rem;
  overflow: hidden;
  border-radius: var(--raio-lg);
  background:
    radial-gradient(circle at 1px 1px, var(--tinta-12) 1px, transparent 0) 0 0 / 1.25rem 1.25rem,
    var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
  font: inherit;
}

.itin__mapa-vazio {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  max-width: 18rem;
  padding: var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
  text-align: center;
}

.itin__mapa-vazio .icone {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--cor-marca-texto);
}

/* Totais da rota: uma linha só, na mesma altura do título "Rota", acima do mapa. */
.itin__totais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  margin: 0 0 0 auto;
}

/* Aviso da rota (estimativa, falha): linha própria, abaixo do título e dos totais. */
.itin__fonte:not(:empty) {
  flex-basis: 100%;
}

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

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

.itin__total-valor {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

.itin__total-valor + .itin__total-valor::before {
  content: "·";
  margin-right: var(--esp-1);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-terciario);
}

.itin[aria-busy="true"] .itin__total-valor {
  opacity: 0.5;
  transition: opacity var(--duracao-media) var(--curva-padrao);
}

@container itin (min-width: 46rem) and (max-width: 57.99rem) {
  .itin__mapa {
    min-height: 19rem;
  }
}

/* Folha larga: paradas à esquerda, rota à direita (lado a lado, como se lê um roteiro);
   os trechos atravessam embaixo. O campo de cidade deixa de ter a largura da folha.
   (Media query, não container: o contêiner não consegue consultar a si mesmo.) */
@media (min-width: 1200px) {
  .itin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* As duas colunas terminam juntas: quem for mais alto puxa a outra. Com poucos destinos
       quem manda é a altura mínima do mapa; a partir de ~3 destinos é a lista de paradas. */
    align-items: stretch;
  }

  .itin__bloco:nth-of-type(3) {
    grid-column: 1 / -1;
  }

  /* Sede e destinos ocupa a altura da coluna: o espaço que sobra vira respiro entre as
     linhas, em vez de um vão no fim da lista. O recuo acerta o título com o de "Rota",
     que fica dentro do painel. */
  .itin__bloco:first-of-type {
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: var(--esp-3);
  }

  .itin__paradas {
    align-content: space-between;
  }

  /* A rota ocupa a altura toda da coluna e o mapa ocupa a altura toda da rota. */
  .itin__painel {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .itin__rota,
  .itin__mapa {
    height: 100%;
    min-height: 14rem;
  }
}

/* Leaflet: marcadores e linhas no tom da marca. */
.itin-pino {
  display: grid;
  place-items: center;
}

.itin-pino span {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--esp-1);
  border: 2px solid var(--neutro-0);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
  box-shadow: var(--sombra-2);
  color: var(--grafite-950);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}

.itin-pino--sede span {
  background: var(--grafite-900);
  color: var(--neutro-0);
}

.itin-rota {
  stroke: var(--cor-marca-forte);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.9;
}

/* A volta percorre as mesmas estradas da ida: mesmo traço, sem pontilhado. */
.itin-rota--volta {
  stroke: var(--cor-marca-forte);
}

/* ---------- Trechos: um card dourado por trecho ---------- */
.itin__trechos {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.itin__trecho {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.itin__trecho-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

/* Mesmo desenho dos números das etapas da folha: contorno, não bolha cheia. */
.itin__trecho-numero {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--cor-marca-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.itin__trecho-numero .icone {
  width: 0.9rem;
  height: 0.9rem;
}

.itin__trecho--volta .itin__trecho-numero {
  background: var(--cor-superficie);
  border-color: var(--cor-borda);
  color: var(--cor-texto-secundario);
}

/* Em foco, o número do trecho acende como o das etapas. */
.itin__bloco--etapa:focus-within .secao__numero,
.itin__trecho:focus-within .itin__trecho-numero {
  border-color: var(--cor-marca);
  color: var(--cor-marca-texto);
}

.itin__trecho--volta:focus-within .itin__trecho-numero {
  background: var(--cor-marca-fundo);
}

.itin__trecho-rota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

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

.itin__trecho-de {
  font-weight: var(--peso-medio);
  color: var(--cor-texto-secundario);
}

.itin__trecho-km {
  margin-left: auto;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.itin__trecho-km:not(:empty) {
  padding: var(--esp-05) var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
}

.itin__tempos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  align-items: start;
}

.itin__saida,
.itin__chegada {
  grid-column: 1 / -1;
}

.itin__duracao .entrada {
  font-variant-numeric: tabular-nums;
}

/* Chegada: não é campo — é o resultado (saída + estrada + adicional), no mesmo cartão usado
   pelos números das diárias, com o rótulo na borda para ficar da altura dos campos ao lado. */
.itin__chegada-campo {
  --fundo-entrada: var(--cor-superficie);
  transition: transform var(--duracao-media) var(--curva-padrao);
}

.itin__chegada-campo:hover {
  transform: translateY(-1px);
}

.itin__chegada-campo:hover .itin__chegada {
  transform: none;
}

.itin__chegada {
  justify-content: center;
  min-height: var(--altura-controle);
  /* Mesmo arredondamento dos campos ao lado: na linha de tempos ele lê como um campo. */
  border-radius: var(--raio-md);
}

/* Duração com passos de 15 min: a caixa é uma peça só e os botões moram dentro dela. */
.itin__passo {
  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);
}

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

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

.itin__passo .entrada {
  min-height: 0;
  padding: 0 0 0 var(--esp-3);
  text-align: left;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

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

.itin__passo-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);
}

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

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

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

.itin__aviso {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-perigo);
}

.itin__trecho--conflito {
  box-shadow: inset 0 0 0 1px var(--cor-perigo-borda), inset 2px 0 0 var(--cor-perigo);
}

@container itin (min-width: 42rem) {
  .itin__tempos {
    grid-template-columns: minmax(14rem, 1.6fr) repeat(2, minmax(8rem, 1fr)) minmax(9rem, 1.1fr);
  }

  .itin__saida,
  .itin__chegada {
    grid-column: auto;
  }

  /* Os campos de tempo abrem na linha de baixo, sob os valores que substituem. */
  .itin__campos-tempo {
    grid-column: 2 / -1;
  }
}

/* ---------- Calendário das saídas (um calendário para todos os trechos) ---------- */
.itin__calendario {
  right: 0;
  left: auto;
  width: min(22rem, calc(100vw - 2rem));
}

/* Sem espaço abaixo, o calendário abre para cima (caberCalendario). */
.itin__calendario--acima {
  top: auto;
  bottom: calc(100% + var(--esp-1));
  transform-origin: bottom left;
}

/* Título do calendário: diz, sozinho, de que trecho é a data que se vai marcar. */
.itin__calendario-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
}

.itin__calendario-titulo b {
  padding: var(--esp-05) var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-texto);
  font-size: var(--texto-xs);
}

.itin__calendario .calendario__grade td {
  position: relative;
  height: 2.5rem;
  vertical-align: top;
  padding-top: var(--esp-05);
}

/* Dias entre a primeira e a última saída: a viagem está em curso. */
.itin__calendario .calendario__intervalo {
  background: var(--cor-superficie-realce);
  border-radius: var(--raio-xs);
}

.itin__marca-dia {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-marca-viva);
}

/* ---------- Celular ---------- */
/* Os passos de menos/mais reservam largura fixa. Num itinerário estreito, cada
   duração ocupa uma linha para que hh:mm fique inteiro sem diminuir os alvos. */
@container itin (max-width: 20rem) {
  .itin__duracao {
    grid-column: 1 / -1;
  }
}

@container itin (max-width: 30rem) {
  .itin {
    gap: var(--esp-5);
  }

  .itin__painel {
    padding: var(--esp-2);
  }

  .itin__paradas {
    --itin-trilho: 1.75rem;
  }

  .itin__parada,
  .itin__adicionar,
  .itin__vaga {
    grid-template-columns: var(--itin-trilho) minmax(0, 1fr) 2rem;
    gap: var(--esp-1);
  }

  .itin__remover {
    min-width: 2rem;
  }

  .itin__local {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .itin__trecho {
    padding: var(--esp-3);
  }

  .itin__dica {
    display: none;
  }
}

/* O bloco "Sede e destinos" nas folhas (termo, OS, plano, viagem) continua os campos de
   cima: sem margem nem filete (só o respiro de dentro). */
.secao__bloco#destinos {
  margin-top: 0;
  border-top: 0;
}