@font-face {
  font-family: Chantal;
  src: url("../fonts/chantal-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Painel da organização — transporte fretado

   Register: PRODUCT, não brand. Isto é ferramenta de trabalho: a pessoa está
   conferindo uma lista de embarque, possivelmente na porta do ônibus, no
   celular. As decisões seguem daí:

   - UMA família de fonte (system-ui). Nada de display do site em rótulo de
     tabela: fonte de pôster em UI de dados vira ruído.
   - Escala FIXA em rem, sem clamp(). O painel é visto em DPI consistente, e um
     título fluido dentro de uma tabela fica pior, não melhor.
   - Cor CONTIDA: neutros + um acento para ação e seleção. Estado (pago,
     pendente) usa cor semântica, nunca decoração.
   - Densidade é um recurso aqui, não um defeito.

   Herda as cores da marca de main.css para o painel não parecer de outro
   produto, mas não herda a tipografia de campanha.
   ========================================================================== */

.painel {
  /* Neutros próprios: uma camada mais fria que o site, típico de superfície de
     ferramenta. Chroma baixo puxado para o azul da marca, sem virar cinza morto. */
  --p-fundo: #f4f6fa;
  --p-superficie: #ffffff;
  --p-superficie-2: #eef2f8;
  --p-linha: #d9e1ec;
  --p-linha-forte: #b9c6d8;

  --p-tinta: #0d2242;
  --p-tinta-media: #4a5b73;
  --p-tinta-fraca: #5a6a82;

  /* Acento: o roxo de ação da marca. Reservado a ação primária e seleção. */
  --p-acao: #7b1fa2;
  --p-acao-escura: #5f1780;
  --p-acao-fraca: #f3e8f8;
  /* Realce de linha ao passar o mouse. Azul, não o lilás de `--p-acao-fraca`:
     aquele tom é da cor de ação (botões, links) e usá-lo no hover sugeria que a
     linha era clicável, o que não é o caso num painel somente leitura.
     Medido: 12.75:1 com o texto e 1.22:1 contra o branco, ou seja, legível e
     perceptível ao mesmo tempo. */
  --p-realce-linha: #dfeaf7;

  /* Semântica de estado. */
  --p-ok: #0f7a4a;
  --p-ok-fundo: #e6f5ee;
  --p-espera: #8a5a00;
  --p-espera-fundo: #fdf3e2;
  --p-falha: #a3232b;
  --p-falha-fundo: #fbeaea;

  /* Escala 4pt. */
  --p-1: 4px;
  --p-2: 8px;
  --p-3: 12px;
  --p-4: 16px;
  --p-5: 24px;
  --p-6: 32px;
  --p-7: 48px;

  --p-raio: 10px;
  --p-raio-p: 6px;

  /* Sombra curta e definida. Nada de sombra difusa larga somada a borda. */
  --p-sombra: 0 1px 2px rgba(13, 34, 66, 0.08);

  /* 150–250ms: a pessoa está numa tarefa, não assistindo coreografia. */
  --p-transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

  margin: 0;
  min-height: 100vh;
  background: var(--p-fundo);
  color: var(--p-tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */

.painel__topo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--p-4);
  padding: var(--p-4) var(--p-5);
  background: var(--p-superficie);
  border-bottom: 1px solid var(--p-linha);
}

.painel__acoes-topo {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.painel__titulo-bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--p-linha);
  padding-left: var(--p-4);
}

.painel__titulo-principal {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.painel__subtitulo {
  margin: 0;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
}

/* Logo no canto superior esquerdo. Âncora para a home. */
.painel__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 4px;
}

.painel__logo img {
  width: 132px;
  height: auto;
}

.painel__logo:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 3px;
  border-radius: var(--p-raio-p);
}

.painel__conteudo {
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--p-6) var(--p-5) var(--p-7);
}

.painel__titulo {
  margin: 0 0 var(--p-4);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Estados: carregando, erro, vazio, sem acesso
   -------------------------------------------------------------------------- */

.painel__estado {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--p-6) 0;
}

.painel__estado--aviso {
  padding: var(--p-6);
  background: var(--p-superficie);
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
  box-shadow: var(--p-sombra);
}

.painel__estado-titulo {
  margin: 0 0 var(--p-3);
  font-size: 1.125rem;
  font-weight: 650;
}

.painel__estado-texto {
  margin: 0 0 var(--p-4);
  color: var(--p-tinta-media);
  font-size: 0.9375rem;
}

.painel__estado-texto:last-child {
  margin-bottom: 0;
}

.painel__estado-texto code {
  padding: 2px 6px;
  background: var(--p-superficie-2);
  border-radius: var(--p-raio-p);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
}

.painel__estado--login {
  max-width: 440px;
  text-align: center;
}

.painel__login-form {
  display: flex;
  flex-direction: column;
  gap: var(--p-3);
  text-align: left;
}

.painel__erro-texto {
  color: var(--p-falha);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Skeleton em vez de spinner: mostra a FORMA do que vem, então a página não
   pula quando os dados chegam. */
.skeleton {
  border-radius: var(--p-raio);
  background: linear-gradient(90deg, var(--p-superficie-2) 25%, #e3e9f2 50%, var(--p-superficie-2) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}

.skeleton--resumo {
  height: 104px;
  margin-bottom: var(--p-4);
}

.skeleton--tabela {
  height: 280px;
  margin-bottom: var(--p-4);
}

@keyframes skeleton {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------------
   Resumo
   -------------------------------------------------------------------------- */

.resumo {
  margin-bottom: var(--p-6);
}

.resumo__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--p-3);
  margin: 0;
}

/* Sem card por item: régua superior + espaço já agrupa, e quatro caixas
   idênticas lado a lado é o padrão que faz painel parecer template. */
.resumo__item {
  padding: var(--p-4);
  background: var(--p-superficie);
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
}

.resumo__item dt {
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
  font-weight: 500;
}

.resumo__item dd {
  margin: var(--p-1) 0 0;
  font-size: 1.75rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.resumo__nota {
  margin: var(--p-1) 0 0;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Ferramentas
   -------------------------------------------------------------------------- */

.ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-3);
  margin-bottom: var(--p-4);
}

.campo-busca {
  flex: 1 1 260px;
  min-width: 0;
}

.campo-busca input {
  width: 100%;
  padding: 10px var(--p-3);
  border: 1px solid var(--p-linha-forte);
  border-radius: var(--p-raio-p);
  background: var(--p-superficie);
  color: var(--p-tinta);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--p-transicao), box-shadow var(--p-transicao);
}

.campo-busca input::placeholder {
  /* 4.5:1 mesmo em placeholder: cinza claro "elegante" é o motivo nº 1 de
     interface difícil de ler. */
  color: var(--p-tinta-fraca);
}

.campo-busca input:focus-visible {
  outline: none;
  border-color: var(--p-acao);
  box-shadow: 0 0 0 3px var(--p-acao-fraca);
}

/* Filtro em segmentos: afordância padrão, não controle inventado. */
.filtro {
  display: inline-flex;
  padding: 3px;
  background: var(--p-superficie-2);
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio-p);
}

.filtro__opcao {
  padding: 7px var(--p-3);
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--p-tinta-media);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
  transition: background var(--p-transicao), color var(--p-transicao);
}

.filtro__opcao:hover {
  color: var(--p-tinta);
}

.filtro__opcao[aria-pressed="true"] {
  background: var(--p-superficie);
  color: var(--p-tinta);
  box-shadow: var(--p-sombra);
}

.filtro__opcao:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
}

.filtro-onibus {
  display: inline-flex;
  align-items: center;
  gap: var(--p-2);
  color: var(--p-tinta-media);
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
}

.filtro-onibus select {
  min-width: 156px;
  padding: 8px 30px 8px var(--p-3);
  border: 1px solid var(--p-linha-forte);
  border-radius: var(--p-raio-p);
  background: var(--p-superficie);
  color: var(--p-tinta);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
}

.filtro-onibus select:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
}

.ferramentas__exportar {
  display: flex;
  gap: var(--p-2);
  margin-left: auto;
}

/* Botões: um vocabulário só, usado igual em toda a página. */
.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--p-2);
  padding: 10px var(--p-4);
  border: 1px solid transparent;
  border-radius: var(--p-raio-p);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--p-transicao), border-color var(--p-transicao),
    color var(--p-transicao), transform var(--p-transicao);
}

.botao:active {
  transform: translateY(1px);
}

.botao:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 2px;
}

.botao--primario {
  background: var(--p-acao);
  color: #ffffff;
}

.botao--primario:hover {
  background: var(--p-acao-escura);
}

/* Ação destrutiva (Remover reserva VIP): o vermelho de falha do painel. */
.botao--perigo {
  background: var(--p-falha);
  color: #ffffff;
}

.botao--perigo:hover {
  background: #82171e;
}

.botao--perigo:focus-visible {
  outline: 2px solid var(--p-falha);
  outline-offset: 2px;
}

.botao--discreto {
  background: var(--p-superficie);
  border-color: var(--p-linha-forte);
  color: var(--p-tinta);
}

.botao--discreto:hover {
  border-color: var(--p-tinta-fraca);
  background: var(--p-superficie-2);
}

.botao--secundario {
  background: var(--p-superficie);
  border-color: var(--p-acao);
  color: var(--p-acao-escura);
}

.botao--secundario:hover {
  background: var(--p-acao-fraca);
  border-color: var(--p-acao-escura);
}

.botao--secundario svg,
.frota-vip-controle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.botao--pequeno {
  padding: 6px var(--p-3);
  font-size: 0.8125rem;
}

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

.link-botao {
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-acao);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.painel__contagem {
  margin: 0 0 var(--p-3);
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */

.tabela-envolve {
  background: var(--p-superficie);
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
  box-shadow: var(--p-sombra);
  overflow: hidden;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--p-3) var(--p-4);
  background: var(--p-superficie-2);
  border-bottom: 1px solid var(--p-linha);
  color: var(--p-tinta-media);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela tbody td {
  padding: var(--p-3) var(--p-4);
  border-bottom: 1px solid var(--p-linha);
  vertical-align: baseline;
}

.tabela tbody td[data-rotulo] {
  align-content: center;
  vertical-align: middle;
}

/* Linhas da MESMA reserva ficam visualmente ligadas: quem confere lê por
   grupo, não por linha solta. A régua mais forte marca onde um grupo começa. */
.tabela tbody tr[data-grupo-inicio="true"] td {
  border-top: 2px solid var(--p-linha-forte);
}

/* Realce aplicado a TODAS as linhas da reserva, não só à linha sob o cursor.
   A classe vem do JS porque CSS não tem seletor de irmão anterior: `:hover` numa
   linha do meio do grupo não alcança as de cima. */
.tabela tbody tr.is-realcada td {
  background: var(--p-realce-linha);
}

.tabela tbody tr.tabela__linha--vip td {
  background: #fff8e7;
  border-bottom-color: #f0d99a;
}

.tabela tbody tr.tabela__linha--vip[data-grupo-inicio="true"] td {
  border-top-color: #e7c56d;
}

.tabela__col-reserva {
  width: 116px;
}

.tabela__col-num {
  width: 84px;
}

/* CPF em tabular-nums e monoespaçada: colunas de dígitos precisam alinhar
   verticalmente para o olho comparar, e a fonte proporcional desalinha. */
.tabela__col-cpf {
  width: 132px;
}

.tabela__cpf {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Aviso de nova reserva: aparece na linha do passageiro cuja reserva antiga
   cancelou/falhou, apontando para onde ele reapareceu. É a informação que evita
   a organização cobrar quem já pagou, então precisa de peso visual próprio,
   sem virar alarme vermelho: o problema já foi resolvido pela pessoa.
   Fundo tingido + ícone, não faixa colorida na borda esquerda. */
.tabela__nova-reserva {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--p-acao) 22%, transparent);
  border-radius: var(--p-raio-p);
  background: var(--p-acao-fraca);
  color: var(--p-tinta);
  font-size: 0.75rem;
  line-height: 1.35;
}

.tabela__nova-reserva__icone {
  flex: 0 0 auto;
  color: var(--p-acao-escura);
  font-weight: 700;
}

.tabela__nova-reserva code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tabela__nova-reserva .etiqueta {
  font-size: 0.6875rem;
  padding: 1px 6px;
}

.tabela__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Bloco do código da reserva com a contagem de pessoas logo abaixo. */
.tabela__bloco-reserva {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Quantidade de pessoas exibida em letra menor e tom fraco para nao competir com dados principais. */
.tabela__qtd-reserva {
  margin-top: 2px;
  color: var(--p-tinta-fraca);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Faixa etária de passageiros extras em letra pequena e discreta abaixo do nome. */
.tabela__faixa-passageiro {
  margin-top: 1px;
  margin-left: 18px;
  color: var(--p-tinta-fraca);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
}

/* Destaque tipografico leve ao nome do grupo, facilitando a chamada na porta do onibus. */
.tabela__grupo {
  font-weight: 600;
}

.tabela__nome {
  font-weight: 550;
  vertical-align: middle;
}

.tabela__tag-colo,
.tabela__tag-menor {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--p-raio-p);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}

.tabela__tag-colo {
  background: rgba(247, 148, 30, 0.14);
  color: #c76700;
}

.tabela__tag-menor {
  background: rgba(123, 31, 162, 0.1);
  color: var(--p-acao, #7b1fa2);
}

/* Marcador antes do nome: meeple para o responsável, travessão para os demais.
   Largura fixa para os nomes alinharem na vertical, independente do símbolo. */
/* Texto só para leitor de tela. O meeple comunica visualmente quem é o
   responsável, mas símbolo não é lido em voz alta: este rótulo cobre isso sem
   ocupar espaço na tela. `clip-path` em vez de `display:none` porque conteúdo
   escondido com display:none NÃO é anunciado. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tabela__posicao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

/* O meeple roxo representa um grupo; o azul representa uma reserva individual.
   VIPs preservam o dourado usado no planejamento de frota. */
.tabela__posicao--responsavel {
  color: #7b1fa2;
  font-size: 0.875rem;
  cursor: help;
}

.tabela__meeple {
  display: block;
  width: 18px;
  height: 18px;
}

.tabela__meeple--grupo {
  color: #7b1fa2;
}

.tabela__meeple--solo {
  color: #0077b6;
}

.tabela__meeple--vip {
  color: #d97706;
}

.tabela__tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela__whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: #0f7a42;
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--p-transicao), background var(--p-transicao);
}

.tabela__whatsapp-link:hover {
  color: #0a6335;
  text-decoration: none;
}

.tabela__whatsapp-link:focus-visible {
  color: #0a6335;
  outline: 2px solid #0f7a42;
  outline-offset: 3px;
  text-decoration: none;
}

.tabela__whatsapp-link svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.tabela__tel--vazio {
  color: var(--p-tinta-fraca);
  font-style: italic;
  align-content: center;
  text-align: center;
}

.tabela__secundario {
  display: block;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
}

.tabela__pagamento-criado {
  margin-top: 2px;
  font-size: 0.75rem;
}

.tabela__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Etiqueta de situação: cor semântica, com texto — nunca só cor, que exclui
   quem não distingue matizes. */
.etiqueta {
  display: inline-block;
  padding: 3px var(--p-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.etiqueta--ok {
  background: var(--p-ok-fundo);
  color: var(--p-ok);
}

.etiqueta--espera {
  background: var(--p-espera-fundo);
  color: var(--p-espera);
}

.etiqueta--falha {
  background: var(--p-falha-fundo);
  color: var(--p-falha);
}

.etiqueta--vip {
  background: #d97706;
  color: #ffffff;
}

.painel__sem-resultado {
  padding: var(--p-6) var(--p-4);
  text-align: center;
}

.painel__rodape {
  margin: var(--p-4) 0 0;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Responsivo: comportamento ESTRUTURAL (a tabela vira cartões), não
   tipografia fluida. No celular a organização confere de pé, com uma mão.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .painel__conteudo {
    padding: var(--p-5) var(--p-4) var(--p-6);
  }

  .ferramentas__exportar {
    margin-left: 0;
    width: 100%;
  }

  .ferramentas__exportar .botao {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  /* Filtro em largura total: mais área de toque e sem espaço morto à direita. */
  .filtro {
    display: flex;
    width: 100%;
  }

  .filtro__opcao {
    flex: 1;
  }

  .filtro-onibus {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: space-between;
  }

  .filtro-onibus select {
    flex: 1;
    min-width: 0;
  }

  .tabela-envolve {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .tabela thead {
    display: none;
  }

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

  .tabela tbody tr {
    margin-bottom: var(--p-3);
    padding: var(--p-3) var(--p-4);
    background: var(--p-superficie);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
  }

  .tabela tbody tr[data-grupo-inicio="true"] td {
    border-top: 0;
  }

  .tabela tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--p-4);
    padding: 5px 0;
    border-bottom: 0;
    text-align: right;
    /* min-width:0 é o que permite ao conteúdo encolher dentro do flex; sem ele,
       a linha "telefone · e-mail" do contato empurrava a página 39px além da
       viewport (medido a 390px). */
    min-width: 0;
  }

  /* Texto secundário longo (telefone + e-mail juntos) precisa poder quebrar,
     senão vira a fonte do overflow horizontal. `anywhere` fica restrito a
     e-mail/código: aplicado no nome, ele quebraria "Nascimento" no meio. */
  .tabela tbody td>* {
    min-width: 0;
  }

  /* Alinha a quantidade abaixo do codigo da reserva a direita no cartao mobile. */
  .tabela__bloco-reserva {
    align-items: flex-end;
    text-align: right;
  }

  /* Oculta celulas sem conteudo para nao exibir linhas orfas de rotulo no mobile. */
  .tabela tbody td:empty {
    display: none;
  }

  /* A célula do contato tem nome + telefone + e-mail. Empilha em vez de disputar
     largura com o rótulo: com três blocos na mesma linha, o nome ficava numa
     coluna de ~55px e quebrava no meio da palavra. */
  .tabela tbody td[data-rotulo="Contato principal"] {
    display: block;
    text-align: left;
  }

  /* Número + nome do passageiro andam juntos: com o flex da célula, o "1."
     ficava separado do nome nas pontas opostas da linha. */
  .tabela tbody td[data-rotulo="Passageiro"] {
    display: block;
    text-align: left;
  }

  .tabela tbody td[data-rotulo="Passageiro"]::before {
    display: block;
    margin-bottom: 2px;
  }

  .tabela tbody td[data-rotulo="Contato principal"]::before {
    display: block;
    margin-bottom: 2px;
  }

  .tabela__secundario {
    text-align: left;
    /* Só aqui: e-mail longo não tem espaço onde quebrar naturalmente. */
    overflow-wrap: anywhere;
  }

  /* O rótulo da coluna vira prefixo da célula: sem cabeçalho, o dado sozinho
     não diz o que é. */
  .tabela tbody td::before {
    content: attr(data-rotulo);
    color: var(--p-tinta-fraca);
    font-size: 0.8125rem;
    font-weight: 550;
    text-align: left;
    white-space: nowrap;
  }

  .tabela tbody td:first-child {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .ferramentas__exportar {
    flex-direction: column;
  }

  .painel__topo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p-3);
  }

  .painel__titulo-bloco {
    border-left: none;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: o skeleton pulsa, então precisa de alternativa.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--p-superficie-2);
  }

  .botao,
  .filtro__opcao,
  .campo-busca input,
  .onibus-card,
  .grupo-item,
  .grupo-item__tooltip,
  .onibus-vagas-livres-slot {
    transition: none;
  }

  .botao:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Rodapé — mesmo padrão visual de onibus.html (fundo escuro da marca), sem os
   links de navegação: o painel é ferramenta interna, não caminho para o evento.
   -------------------------------------------------------------------------- */

.painel-footer {
  margin-top: var(--p-7);
  padding: var(--p-6) var(--p-5) var(--p-5);
  background: #041d3a;
  color: rgba(255, 255, 255, 0.72);
}

.painel-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.painel-footer__brand {
  display: inline-flex;
  flex: 0 0 auto;
  width: 104px;
}

.painel-footer__brand img {
  width: 100%;
  height: auto;
}

.painel-footer__identity {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

.painel-footer__identity p {
  max-width: 22ch;
  margin: 0;
  font-family: Chantal, "Segoe Script", cursive;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.55;
}

.painel-footer__nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px clamp(18px, 2.4vw, 42px);
}

.painel-footer__nav a {
  color: rgba(233, 242, 251, 0.8);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--p-transicao);
}

.painel-footer__nav a:hover {
  color: #ffffff;
}

.painel-footer__nav a:focus-visible {
  outline: 2px solid #29c3f5;
  outline-offset: 5px;
}

/* Assinatura de quem fez o site, na mesma formatação da home
   (.ksio-powered-line em main.css): texto 1rem com tracking de 0.035em, link em
   1.2rem peso 700 sem sublinhado, e alvo de toque de 44px de altura.
   As cores da marca aparecem em hex literal porque o painel não carrega
   main.css e portanto não tem as custom properties --ocean-cyan / --foam-white.
   Centralizado, como pedido — na home fica à direita porque divide a linha com
   o bloco legal; aqui ocupa a faixa inteira, então centro é o eixo natural. */
.painel-footer__powered {
  max-width: 1240px;
  margin: var(--p-4) auto 0;
  padding-top: var(--p-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  /* Mesmo tom da home. O valor lá é `color-mix(in oklab, foam-white 52%,
     ocean-cyan)`, que resolve para rgb(171, 227, 252) — medido renderizando a
     cor num canvas, não estimado. Fica em hex porque o painel não carrega
     main.css e não tem as custom properties da marca. */
  color: #abe3fc;
  font-size: 1rem;
  letter-spacing: 0.035em;
  text-align: center;
}

.painel-footer__powered a {
  /* inline-flex + min-height 44px: mesmo alvo de toque da home. Com o pai
     centralizado, precisa de align-items para o texto não colar no topo. */
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #29c3f5;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-decoration: none;
  transition: color var(--p-transicao);
}

.painel-footer__powered a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.painel-footer__powered a:focus-visible {
  outline: 2px solid #29c3f5;
  outline-offset: 5px;
}

@media (max-width: 560px) {
  .painel-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .painel-footer__identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .painel-footer__nav {
    justify-content: flex-start;
  }
}

/* Impressão: a lista de embarque em papel é caso de uso real na porta do
   ônibus, onde às vezes não há sinal. */
@media print {

  .painel__topo,
  .ferramentas,
  .painel__acoes-topo,
  .painel-footer {
    display: none !important;
  }

  .painel {
    background: #ffffff;
    font-size: 11pt;
  }

  .tabela-envolve {
    border: 0;
    box-shadow: none;
  }

  /* Realce é recurso de tela: numa folha impressa viraria fundo cinza sem
     significado, e ainda gastaria tinta. */
  .tabela tbody tr.is-realcada td {
    background: none;
  }

  .etiqueta {
    border: 1px solid #000000;
    background: none !important;
    color: #000000 !important;
  }
}

/* ==========================================================================
   Abas
   ========================================================================== */
.painel-abas {
  display: flex;
  gap: var(--p-4);
  border-bottom: 1px solid var(--p-linha);
  margin-bottom: var(--p-5);
}

.painel-abas__botao {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--p-2) var(--p-1);
  font-size: 15px;
  font-weight: 500;
  color: var(--p-tinta-fraca);
  cursor: pointer;
  transition: color var(--p-transicao), border-color var(--p-transicao);
}

.painel-abas__botao:hover {
  color: var(--p-tinta);
}

.painel-abas__botao.ativo {
  color: var(--p-acao);
  border-bottom-color: var(--p-acao);
}

.painel-aba-conteudo {
  display: none;
}

.painel-aba-conteudo.ativa {
  display: block;
}

/* ==========================================================================
   Aba Frota
   ========================================================================== */
.frota-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--p-6);
  margin-bottom: var(--p-6);
  flex-wrap: wrap;
}

.frota-header__info {
  flex: 1 1 340px;
}

.frota-header__titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--p-tinta);
  letter-spacing: -0.015em;
  margin: 0 0 var(--p-2);
}

.frota-header__subtitulo {
  margin: 0;
  color: var(--p-tinta-media);
  max-width: 600px;
  font-size: 14px;
  line-height: 1.5;
}

.frota-header__vip {
  background: var(--p-superficie);
  padding: var(--p-4) var(--p-5);
  border-radius: var(--p-raio);
  border: 1px solid var(--p-linha);
  box-shadow: var(--p-sombra);
  min-width: 300px;
  flex: 0 1 360px;
}

.frota-vip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--p-tinta);
  margin-bottom: var(--p-2);
}

.frota-vip-controle {
  display: flex;
  gap: var(--p-2);
  margin-bottom: var(--p-2);
}

.frota-vip-input {
  width: 90px;
  padding: 6px 10px;
  border: 1px solid var(--p-linha-forte);
  border-radius: var(--p-raio-p);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--p-tinta);
  background: var(--p-fundo);
  transition: border-color var(--p-transicao), box-shadow var(--p-transicao);
}

.frota-vip-input:focus {
  outline: none;
  border-color: var(--p-acao);
  box-shadow: 0 0 0 3px var(--p-acao-fraca);
  background: var(--p-superficie);
}

.frota-vip-ajuda {
  margin: 0;
  font-size: 12px;
  color: var(--p-tinta-fraca);
  line-height: 1.4;
}

.frota-vip-controle .botao {
  min-height: 38px;
}

/* Grid da frota - layout horizontal em lista empilhada */
.frota-grid {
  display: flex;
  flex-direction: column;
  gap: var(--p-6);
  width: 100%;
}

.onibus-card {
  background: var(--p-superficie);
  border-radius: 18px;
  border: 1px solid var(--p-linha);
  box-shadow: 0 8px 28px rgba(13, 34, 66, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.onibus-card.drag-over {
  border-color: var(--p-acao);
  box-shadow: 0 0 0 3px var(--p-acao-fraca), 0 8px 30px rgba(123, 31, 162, 0.15);
  background: #fbf9fd;
  transform: scale(1.003);
}

.onibus-card.drag-error {
  border-color: var(--p-falha);
  box-shadow: 0 0 0 3px var(--p-falha-fundo), 0 8px 30px rgba(163, 35, 43, 0.15);
  background: #fff8f8;
  transform: scale(0.998);
}

/* Header horizontal do Ônibus */
.onibus-card__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--p-linha);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--p-fundo);
  flex-wrap: wrap;
  position: relative;
}

.onibus-card__header-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 380px;
}

.onibus-card__titulo {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: var(--p-tinta);
  letter-spacing: -0.03em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.onibus-card__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.onibus-card__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(4px, 1.2cqi, 15px);
  padding: clamp(8px, 2.5cqi, 14px) 6px;
  background: var(--p-superficie);
  border: 1.5px solid var(--p-linha);
  border-radius: var(--p-raio);
  box-shadow: 0 1px 3px rgba(13, 34, 66, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  aspect-ratio: 1 / 1;
  min-width: 0;
  box-sizing: border-box;
}

.onibus-card__stat-card:hover {
  border-color: var(--p-linha-forte);
  box-shadow: 0 4px 12px rgba(13, 34, 66, 0.08);
  transform: translateY(-2px);
}

.onibus-card__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 38%, 56px);
  height: clamp(40px, 38%, 56px);
  border-radius: clamp(10px, 25%, 16px);
  background: var(--p-superficie-2);
  color: var(--p-tinta-media);
  flex-shrink: 0;
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1;
  transition: transform 0.15s ease;
}

.onibus-card__stat-card:hover .onibus-card__stat-icon {
  transform: scale(1.1);
}

.onibus-card__stat-icon svg {
  width: 68%;
  height: 68%;
  max-width: 34px;
  max-height: 34px;
  stroke-width: 2.2;
}

.onibus-card__stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.onibus-card__stat-label {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-tinta-fraca);
  line-height: 1;
}

.onibus-card__stat-value {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--p-tinta);
  line-height: 1.2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
}

.onibus-card__stat-tag {
  font-size: 11px;
  font-weight: 850;
  color: inherit;
  line-height: 1;
}

.onibus-card__stat-value small {
  font-size: 10px;
  font-weight: 600;
  color: var(--p-tinta-media);
  line-height: 1;
}

/* Card Status */
.onibus-card__stat-card--status.is-contratado {
  background: var(--p-ok-fundo);
  border-color: rgba(15, 122, 74, 0.3);
}

.onibus-card__stat-card--status.is-contratado .onibus-card__stat-icon {
  background: rgba(15, 122, 74, 0.15);
  color: var(--p-ok);
}

.onibus-card__stat-card--status.is-contratado .onibus-card__stat-value {
  color: var(--p-ok);
}

.onibus-card__stat-card--status.is-lotado {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.onibus-card__stat-card--status.is-lotado .onibus-card__stat-icon {
  background: #e2e8f0;
  color: #334155;
}

.onibus-card__stat-card--status.is-lotado .onibus-card__stat-value {
  color: #1e293b;
}

.onibus-card__stat-card--status.is-aberto {
  background: var(--p-espera-fundo);
  border-color: rgba(138, 90, 0, 0.3);
}

.onibus-card__stat-card--status.is-aberto .onibus-card__stat-icon {
  background: rgba(138, 90, 0, 0.15);
  color: var(--p-espera);
}

.onibus-card__stat-card--status.is-aberto .onibus-card__stat-value {
  color: var(--p-espera);
}

.onibus-card__stat-card--livre .onibus-card__stat-icon {
  color: var(--p-ok);
  background: rgba(15, 122, 74, 0.12);
}

.onibus-card__stat-card--vip {
  background: var(--p-superficie);
  border-color: var(--p-linha);
}

.onibus-card__stat-card--vip:hover {
  border-color: var(--p-linha-forte);
}

.onibus-card__stat-card--vip .onibus-card__stat-icon {
  color: #d97706;
  background: rgba(251, 191, 36, 0.2);
}

.onibus-card__stat-card--vip .onibus-card__stat-icon svg {
  width: 72%;
  height: 72%;
  max-width: 36px;
  max-height: 36px;
  fill: #d97706;
  filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.3));
}

.onibus-card__stat-card--vip .onibus-card__stat-value {
  color: var(--p-tinta);
}

.onibus-card__header-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  max-width: none;
}

.onibus-card__vista-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--p-linha-forte);
  border-radius: 8px;
  background: var(--p-superficie);
  color: var(--p-tinta-media);
  cursor: pointer;
  font: inherit;
  transition: color 0.15s ease;
}

.onibus-card__titulo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.onibus-card__vista-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.onibus-card__vista-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onibus-card__vista-toggle:hover,
.onibus-card__vista-toggle:focus-visible {
  border-color: var(--p-acao);
  background: var(--p-acao-fraca);
  color: var(--p-acao);
  outline: none;
}

.onibus-card__lock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--p-linha-forte);
  border-radius: 8px;
  background: var(--p-superficie);
  color: var(--p-tinta-media);
  cursor: pointer;
  font: inherit;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.onibus-card__lock-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.onibus-card__lock-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onibus-card__lock-toggle:hover,
.onibus-card__lock-toggle:focus-visible {
  border-color: var(--p-acao);
  background: var(--p-acao-fraca);
  color: var(--p-acao);
  outline: none;
}

.onibus-card__lock-toggle--bloqueado {
  border-color: #d97706;
  background: #fef3c7;
  color: #b45309;
}

.onibus-card__lock-toggle--bloqueado:hover,
.onibus-card__lock-toggle--bloqueado:focus-visible {
  border-color: #b45309;
  background: #fde68a;
  color: #78350f;
}

.onibus-card--bloqueado {
  border-color: rgba(217, 119, 6, 0.45);
}

.onibus-card--bloqueado .grupo-item {
  cursor: default;
}

.onibus-card--bloqueado .grupo-item:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.grupo-item__mover-opcao--desabilitada,
.grupo-item__mover-opcao--bloqueado {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.onibus-card--compacto .onibus-card__corpo {
  display: none;
}

.onibus-card__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 12px;
}

.onibus-card__badge--contratado {
  background: var(--p-ok-fundo);
  color: var(--p-ok);
  border: 1px solid rgba(15, 122, 74, 0.2);
}

.onibus-card__badge--provisorio {
  background: var(--p-espera-fundo);
  color: var(--p-espera);
  border: 1px solid rgba(138, 90, 0, 0.2);
}

/* ==========================================================================
   Planta Baixa Horizontal do Ônibus (Estrutura do Veículo)
   ========================================================================== */

.onibus-planta-horizontal {
  display: flex;
  align-items: stretch;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 36px 18px 18px 36px;
  overflow: hidden;
  margin: 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
  .onibus-planta-horizontal {
    flex-direction: column;
    border-radius: 20px;
  }
}

/* Cockpit / Frente do Ônibus */
.onibus-planta__cockpit {
  width: 88px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px;
  border-radius: 34px 0 0 34px;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .onibus-planta__cockpit {
    width: 100%;
    flex-direction: row;
    border-radius: 18px 18px 0 0;
    padding: 10px 16px;
  }
}

.onibus-planta__parabrisa {
  width: 46px;
  height: 16px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.45) 0%, rgba(14, 165, 233, 0.15) 100%);
  border: 1.5px solid #38bdf8;
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.onibus-planta__volante {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
}

.onibus-planta__porta {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
  text-transform: uppercase;
}

/* Salão Principal de Passageiros */
.onibus-planta__cabine {
  flex: 1;
  background: #ffffff;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onibus-planta__cabine-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onibus-planta__faixa-janelas {
  display: flex;
  gap: 8px;
  justify-content: space-around;
  opacity: 0.7;
}

.onibus-janela {
  flex: 1;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
}

.onibus-planta__status-cabine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
  font-size: 12.5px;
  color: var(--p-tinta-media);
}

/* Grade de Grupos (Quadrados Grandes dentro da Planta do Ônibus) */
.onibus-planta__assentos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Card de Grupo dentro da Planta do Ônibus - Altura e Alinhamento Padronizados */
.grupo-item {
  background: #ffffff;
  border: 1.5px solid #d8e2ee;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 3px rgba(13, 34, 66, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 84px;
  min-height: 84px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}

.grupo-item:hover {
  border-color: var(--p-acao);
  box-shadow: 0 6px 18px rgba(123, 31, 162, 0.12);
  transform: translateY(-2px);
  z-index: 10;
}

.onibus-card:has(.grupo-item--menu-aberto) {
  overflow: visible;
  z-index: 20;
}

.grupo-item:active {
  cursor: grabbing;
}

.grupo-item.dragging {
  opacity: 0.35;
  transform: scale(0.96);
  box-shadow: none;
}

.grupo-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.grupo-item__titulo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.grupo-item__info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  cursor: help;
  transition: color 0.15s ease;
}

.grupo-item__info-trigger svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grupo-item__info-trigger svg circle[fill="currentColor"],
.grupo-item__info-trigger svg rect {
  fill: currentColor;
  stroke: none;
}

.grupo-item__info-trigger--vip {
  color: #64748b;
}

.grupo-item__info-trigger--vip svg {
  fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(100, 116, 139, 0.3));
}

.grupo-item__titulo-wrap:hover .grupo-item__info-trigger,
.grupo-item__info-trigger:focus-visible {
  color: var(--p-acao);
  outline: none;
}

.grupo-item__titulo {
  font-weight: 750;
  font-size: 13.5px;
  color: var(--p-tinta);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.grupo-item__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  min-width: 86px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  appearance: none;
  font: 700 12px/1 ui-monospace, monospace;
  font-weight: 700;
  color: var(--p-tinta-fraca);
  background: transparent;
  border: 0;
  padding: 4px 0;
  border-radius: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.grupo-item__code::after {
  content: attr(data-copy-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 40;
  padding: 4px 7px;
  border-radius: 5px;
  background: #1e293b;
  color: #ffffff;
  font: 600 10px/1.2 var(--p-fonte-corpo, system-ui, sans-serif);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.grupo-item__code:hover,
.grupo-item__code:focus-visible,
.grupo-item__code.is-copiado {
  color: var(--p-acao);
  outline: none;
}

.grupo-item__code:hover::after,
.grupo-item__code:focus-visible::after,
.grupo-item__code.is-copiado::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.grupo-item__code.is-copiado::after {
  background: var(--p-ok);
}

.grupo-item__code>span {
  white-space: nowrap;
}

.grupo-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Container de Meeples de Jogo de Tabuleiro */
.grupo-item__meeples {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  padding: 0;
  max-width: calc(100% - 90px);
  overflow-x: auto;
  scrollbar-width: none;
}

.grupo-item__meeples::-webkit-scrollbar {
  display: none;
}

.grupo-item__meeples-grupo {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}

.grupo-item__meeples-compacto {
  display: none;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.grupo-item__meeples-individual {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.grupo-item__meeples-contagem {
  font-size: 14px;
  font-weight: 850;
  color: var(--p-tinta);
  line-height: 1;
  white-space: nowrap;
}

.grupo-item__meeples--compacta .grupo-item__meeples-individual {
  display: none;
}

.grupo-item__meeples--compacta .grupo-item__meeples-compacto {
  display: inline-flex;
}

@media (max-width: 560px) {
  .grupo-item__meeples--compacta-mobile .grupo-item__meeples-individual {
    display: none;
  }

  .grupo-item__meeples--compacta-mobile .grupo-item__meeples-compacto {
    display: inline-flex;
  }
}

/* Meeple Adulto (Regular que ocupa assento) */
.meeple-svg {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.meeple-svg--adult {
  color: #7b1fa2;
  filter: drop-shadow(0 1px 1px rgba(123, 31, 162, 0.25));
}

.grupo-item__meeples--solo .meeple-svg--adult {
  color: #0077b6;
  filter: drop-shadow(0 1px 1px rgba(0, 119, 182, 0.28));
}

.grupo-item:hover .meeple-svg--adult {
  transform: scale(1.1);
}

/* Separador + */
.grupo-item__meeples-sep {
  font-size: 11px;
  font-weight: 900;
  color: var(--p-tinta-media);
  line-height: 1;
  margin: 0 1px;
  user-select: none;
}

/* Meeple de pagante que desistiu (mesmo vermelho da etiqueta "Desistiu") */
.meeple-svg--adult.meeple-svg--desistente,
.grupo-item__meeples--solo .meeple-svg--adult.meeple-svg--desistente {
  color: var(--p-falha);
  filter: drop-shadow(0 1px 1px rgba(163, 35, 43, 0.3));
}

.grupo-item__meeples-contagem--desistentes {
  color: var(--p-falha);
}

/* Meeple Criança de Colo (Menor) */
.meeple-svg--child {
  color: #ec4899;
  filter: drop-shadow(0 1px 1px rgba(236, 72, 153, 0.3));
}

.grupo-item:hover .meeple-svg--child {
  transform: scale(1.15);
}

/* Meeple VIP da Organização (Dourado) */
.meeple-svg--vip {
  color: #d97706;
  filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.45));
}

.grupo-item:hover .meeple-svg--vip {
  transform: scale(1.15);
}

.grupo-item--vip {
  background: #fffaf0;
  border-color: #f1dfab;
}

.grupo-item--vip:hover {
  border-color: #e7c56d;
  box-shadow: 0 4px 12px rgba(138, 87, 0, 0.1);
}

.grupo-item--vip .grupo-item__titulo {
  color: var(--p-tinta);
}

.grupo-item__select-mover {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-tinta-media);
  background: var(--p-fundo);
  border: 1px solid var(--p-linha);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  max-width: 88px;
  flex-shrink: 0;
}

.grupo-item__select-mover:hover,
.grupo-item__select-mover:focus {
  border-color: var(--p-acao);
  color: var(--p-acao);
  background: var(--p-superficie);
}

/* Menu de destino: ação compacta no card, com opções visuais e acessíveis. */
.grupo-item__mover {
  position: relative;
  flex-shrink: 0;
}

.grupo-item__mover-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--p-linha);
  border-radius: 7px;
  background: var(--p-fundo);
  color: var(--p-tinta-media);
  cursor: pointer;
  font: 600 11px/1 inherit;
  list-style: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.grupo-item__mover-trigger::-webkit-details-marker {
  display: none;
}

.grupo-item__mover-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grupo-item__mover-trigger:hover,
.grupo-item__mover[open] .grupo-item__mover-trigger,
.grupo-item__mover-trigger:focus-visible {
  border-color: var(--p-acao);
  background: var(--p-superficie);
  color: var(--p-acao);
  outline: none;
}

.grupo-item__mover-chevron {
  width: 11px !important;
  height: 11px !important;
  transition: transform 0.15s ease;
}

.grupo-item__mover[open] .grupo-item__mover-chevron {
  transform: rotate(180deg);
}

.grupo-item__mover-opcoes {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 4px;
  min-width: 205px;
  padding: 6px;
  border: 1px solid var(--p-linha);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(13, 34, 66, 0.18);
}

.grupo-item__mover:not([open]) .grupo-item__mover-opcoes {
  display: none;
}

.grupo-item__mover-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--p-tinta);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.grupo-item__mover-opcao:hover,
.grupo-item__mover-opcao:focus-visible {
  background: var(--p-fundo);
  outline: none;
}

.grupo-item__mover-opcao>svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--p-acao);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grupo-item__mover-opcao--espera>svg {
  stroke: #b45309;
}

.grupo-item__mover-opcao-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.grupo-item__mover-opcao-copy strong {
  font-size: 11px;
  font-weight: 750;
  line-height: 1.15;
}

.grupo-item__mover-opcao-copy small {
  color: var(--p-tinta-fraca);
  font-size: 10px;
  line-height: 1.1;
}

/* Tooltip com Informações Extras no Hover */
.grupo-item__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  background: #0f172a;
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  width: max-content;
  max-width: 320px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  text-align: left;
}

.grupo-item__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 9px;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

.grupo-item__titulo-wrap:hover>.grupo-item__tooltip,
.grupo-item__info-trigger:focus-visible~.grupo-item__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.grupo-item__tooltip-resp {
  font-size: 11.5px;
  font-weight: 500;
  color: #f1f5f9;
  margin-bottom: 6px;
  display: block;
}

.grupo-item__tooltip-resp strong {
  color: #ffffff;
  font-weight: 700;
}

.grupo-item__tooltip-pax-titulo {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
}

.grupo-item__tooltip-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.grupo-item__tooltip-item {
  font-size: 11px;
  color: #e2e8f0;
  line-height: 1.35;
  white-space: nowrap;
}

.grupo-item__tooltip-faixa {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 450;
}

/* Desistência: nome vermelho e riscado, faixa etária trocada por "Desistência" */
.grupo-item__tooltip-nome-desistiu {
  color: #f87171;
  text-decoration: line-through;
}

.grupo-item__tooltip-faixa--desistiu {
  color: #f87171;
}

.grupo-item__tooltip-pagamento {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  color: #94a3b8;
  display: block;
}

.grupo-item__tooltip-pagamento strong {
  color: #cbd5e1;
  font-weight: 600;
}

/* Bloco de Vagas Livres dentro da Planta - Altura Padronizada */
.onibus-vagas-livres-slot {
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-tinta-media);
  height: 84px;
  min-height: 84px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.onibus-vagas-livres-icone {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.onibus-vagas-livres-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onibus-vagas-livres-info strong {
  font-size: 13.5px;
  color: var(--p-tinta);
}

.onibus-vagas-livres-info span {
  font-size: 12px;
  color: var(--p-tinta-fraca);
}

/* Traseira do Ônibus (WC e Motor) */
.onibus-planta__traseira {
  width: 64px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px;
  border-radius: 0 16px 16px 0;
  flex-shrink: 0;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .onibus-planta__traseira {
    width: 100%;
    flex-direction: row;
    border-radius: 0 0 18px 18px;
    padding: 10px 16px;
  }
}

.onibus-planta__wc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 8px;
  border-radius: 8px;
}

.onibus-planta__motor {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  width: 100%;
  text-align: center;
}

/* Card especial: Botão Adicionar Ônibus Vazio */
.onibus-card--adicionar {
  border: 2px dashed var(--p-linha-forte);
  background: transparent;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  min-height: 90px;
  text-align: left;
  color: var(--p-tinta-media);
  transition: all 0.2s ease;
}

.onibus-card--adicionar:hover,
.onibus-card--adicionar:focus-visible {
  border-color: var(--p-acao);
  background: rgba(123, 31, 162, 0.03);
  color: var(--p-acao);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(123, 31, 162, 0.08);
}

.onibus-card--adicionar-icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--p-superficie-2);
  border: 1px solid var(--p-linha);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.onibus-card--adicionar:hover .onibus-card--adicionar-icone {
  background: var(--p-acao-fraca);
  border-color: var(--p-acao);
  color: var(--p-acao);
}

.onibus-card--adicionar-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onibus-card--adicionar-titulo {
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  color: inherit;
}

.onibus-card--adicionar-desc {
  font-size: 12px;
  color: var(--p-tinta-fraca);
  margin: 0;
  line-height: 1.4;
}

/* ProgressBar no card */
.progresso-bar {
  height: 8px;
  background: var(--p-linha);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: var(--p-1);
}

.progresso-bar__fill {
  height: 100%;
  width: 100%;
  background: var(--p-acao);
  transform-origin: left;
  transition: transform var(--p-transicao);
}

.progresso-bar__fill--ok {
  background: var(--p-ok);
}

.progresso-bar__fill--cheio {
  background: #1e293b;
}

.progresso-bar__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 87%;
  /* 40/46 = 86.9% */
  width: 2px;
  background: #ffffff;
  z-index: 1;
}

.progresso-texto {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--p-tinta-media);
}

/* Mapa de ocupação: duas fileiras de assentos, com a meta como corte visual. */
.onibus-card__corpo {
  padding: 16px;
  background: var(--p-superficie);
}

.onibus-planta__assentos-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

/* ==========================================================================
   Mapa Artístico de Assentos do Ônibus (46 Lugares com Cota Mínima e Flex)
   ========================================================================== */

/* ==========================================================================
   Mapa Artístico de Assentos do Ônibus (46 Lugares) com Chassi Detalhado
   ========================================================================== */

.ocupacao-mapa.onibus-arte-mapa {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  width: auto;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

/* Chassi com acabamento rodoviário e detalhes realistas */
.onibus-arte-mapa__chassi {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 2px solid #94a3b8;
  border-radius: 14px 44px 44px 14px;
  padding: 12px 16px 12px 14px;
  position: relative;
  box-shadow: 0 4px 16px rgba(13, 34, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-right: 5px solid #475569;
  flex-shrink: 0;
}

/* Retrovisores exteriores */
.onibus-arte-mapa__retrovisor {
  position: absolute;
  right: 14px;
  width: 7px;
  height: 14px;
  background: #334155;
  border-radius: 3px;
  z-index: 3;
}

.onibus-arte-mapa__retrovisor.top {
  top: -9px;
  transform: rotate(-20deg);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.onibus-arte-mapa__retrovisor.bottom {
  bottom: -9px;
  transform: rotate(20deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Rodas / Caixas de roda */
.onibus-arte-mapa__roda {
  position: absolute;
  width: 28px;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  z-index: 1;
}

.onibus-arte-mapa__roda.roda--tras-top {
  top: -4px;
  left: 35px;
}

.onibus-arte-mapa__roda.roda--diant-top {
  top: -4px;
  right: 55px;
}

.onibus-arte-mapa__roda.roda--tras-bot {
  bottom: -4px;
  left: 35px;
}

.onibus-arte-mapa__roda.roda--diant-bot {
  bottom: -4px;
  right: 55px;
}

.onibus-arte-mapa__grade {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.onibus-arte-mapa__bloco {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.onibus-arte-mapa__linha {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
}

.onibus-arte-mapa__corredor {
  height: 8px;
  margin: 1px 0;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #f8fafc 0, #f8fafc 6px, #e2e8f0 6px, #e2e8f0 12px);
}

.onibus-poltrona {
  min-width: 32px;
  width: 32px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: -0.02em;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  user-select: none;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.onibus-poltrona:hover {
  transform: scale(1.12);
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Assentos VIP da Organização (Dourado Brilhante com Estrela ★) */
.onibus-poltrona.onibus-poltrona--vip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 45%, #d97706 100%) !important;
  color: #78350f !important;
  border-color: #b45309 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Assento Base Ocupado (1-40) - Variante 1 Quente */
.onibus-poltrona.is-ocupada:not(.onibus-poltrona--vip) {
  background: #f97316;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #ffffff;
  border-color: #c2410c;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.25);
}

/* Assento Extra Flex (41-46) */
.onibus-poltrona.onibus-poltrona--extra {
  border-color: #0284c7;
  background: #f0f9ff;
  color: #0369a1;
}

.onibus-poltrona.onibus-poltrona--extra.is-ocupada:not(.onibus-poltrona--vip) {
  background: #0284c7;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #ffffff;
  border-color: #0369a1;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.3);
}

/* Cabine do motorista (à direita / frente do ônibus) */
.onibus-arte-mapa__cabine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  margin-left: 10px;
  border-left: 2px dashed #cbd5e1;
  padding-left: 8px;
  position: relative;
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.2), rgba(226, 232, 240, 0.4));
  border-radius: 0 32px 32px 0;
}

.onibus-arte-mapa__volante {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1.5px solid #94a3b8;
  color: #334155;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.onibus-arte-mapa__farol-grupo {
  position: absolute;
  right: -21px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
  pointer-events: none;
}

.onibus-arte-mapa__farol {
  width: 6px;
  height: 12px;
  background: #eab308;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.8), 2px 0 6px rgba(253, 224, 71, 0.6);
}

.onibus-arte-mapa__farol.top-aux,
.onibus-arte-mapa__farol.bottom-aux {
  height: 6px;
  width: 4px;
  background: #fbbf24;
  opacity: 0.85;
}

/* Legenda Vertical Ocupando a Mesma Altura do Ônibus */
.onibus-arte-mapa__legenda--vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  border-left: 1.5px solid var(--p-linha);
  padding-left: 16px;
  flex-shrink: 0;
  min-width: 175px;
}

.onibus-arte-mapa__legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--p-superficie);
  border: 1px solid var(--p-linha);
  transition: background 0.15s ease;
}

.onibus-arte-mapa__legenda-item:hover {
  background: var(--p-superficie-2);
}

.onibus-arte-mapa__legenda-cor {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.onibus-arte-mapa__legenda-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.onibus-arte-mapa__legenda-texto strong {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--p-tinta);
  line-height: 1.1;
  display: block;
}

.onibus-arte-mapa__legenda-texto span {
  font-size: 10px;
  color: var(--p-tinta-media);
  line-height: 1.1;
  display: block;
}

.onibus-arte-mapa__legenda-cor--vip {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 45%, #d97706 100%) !important;
  color: #78350f !important;
  border: 1px solid #b45309;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.onibus-arte-mapa__legenda-cor--base {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  border: 1px solid #c2410c;
}

.onibus-arte-mapa__legenda-cor--extra {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border: 1px solid #0369a1;
}

.onibus-arte-mapa__legenda-cor--livre {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}



.progresso-texto__meta {
  font-weight: 650;
  text-align: right;
}

.progresso-texto__meta--ok {
  color: var(--p-ok);
}

.progresso-texto__meta--cheio {
  color: var(--p-tinta);
}

.onibus-planta__vazio {
  grid-column: 1 / -1;
  padding: 24px 16px;
  border: 1px dashed var(--p-linha-forte);
  border-radius: var(--p-raio);
  background: var(--p-superficie-2);
  color: var(--p-tinta-fraca);
  font-size: 13px;
  text-align: center;
}

/* Ações da distribuição automática. */
.frota-header__acoes {
  display: flex;
  flex: 0 1 260px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--p-2);
  padding-top: 2px;
}

.frota-header__acao-ajuda {
  margin: 0;
  color: var(--p-tinta-fraca);
  font-size: 12px;
  line-height: 1.4;
}

.frota-otimizacao,
.frota-sem-onibus {
  margin-bottom: var(--p-5);
  padding: var(--p-5);
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
  background: var(--p-superficie);
  box-shadow: var(--p-sombra);
}

.frota-otimizacao {
  border-left: 3px solid var(--p-acao);
}

.frota-sem-onibus {
  border-left: 3px solid var(--p-espera);
  background: #fffdf8;
}

.frota-otimizacao__cabecalho,
.frota-sem-onibus__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-4);
  margin-bottom: var(--p-4);
}

.frota-otimizacao h3,
.frota-sem-onibus h3,
.frota-otimizacao h4 {
  margin: 0;
  color: var(--p-tinta);
  font-size: 1rem;
  font-weight: 700;
}

.frota-otimizacao__cabecalho p,
.frota-sem-onibus__cabecalho p {
  margin: 4px 0 0;
  color: var(--p-tinta-media);
  font-size: 13px;
}

.frota-otimizacao__vip-aviso {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p-espera);
  font-size: 11px;
  font-weight: 650;
}

.frota-otimizacao__lista {
  display: grid;
  gap: var(--p-2);
  margin-top: var(--p-3);
}

.frota-otimizacao__movimento {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio-m);
  background: var(--p-superficie);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.frota-otimizacao__movimento:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.frota-otimizacao__movimento-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-3);
  flex-wrap: wrap;
}

.frota-otimizacao__movimento-info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13.5px;
  color: var(--p-tinta);
}

.frota-otimizacao__movimento-grupo {
  font-weight: 700;
  color: var(--p-tinta);
  font-size: 14px;
}

.frota-otimizacao__movimento-sep {
  color: #cbd5e1;
  font-weight: 400;
  user-select: none;
}

.frota-otimizacao__movimento-contato {
  color: var(--p-tinta);
  font-size: 13px;
  font-weight: 500;
}

.frota-otimizacao__movimento-contato-label {
  color: var(--p-tinta-fraca);
  font-size: 12.5px;
  font-weight: 400;
}

.frota-otimizacao__movimento-qtd {
  color: var(--p-tinta-media);
  font-size: 12.5px;
  font-weight: 600;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.frota-otimizacao__movimento-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.frota-otimizacao__movimento-pagamento {
  color: var(--p-tinta-fraca);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.frota-otimizacao__movimento-rota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e40af;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.frota-otimizacao__rota-seta {
  color: #3b82f6;
  font-weight: 700;
}

/* Linha de Passageiros da Otimização */
.frota-otimizacao__movimento-passageiros {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  font-size: 12px;
  line-height: 1.4;
  color: var(--p-tinta-media);
  overflow-x: auto;
}

.frota-otimizacao__movimento-pax-label {
  font-weight: 700;
  color: var(--p-tinta);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.frota-otimizacao__movimento-pax-lista {
  color: var(--p-tinta);
  font-weight: 500;
}

.frota-otimizacao__movimento-pax-sep {
  color: #94a3b8;
  padding: 0 4px;
  font-weight: 400;
  user-select: none;
}

.frota-otimizacao__vazio {
  margin: var(--p-3) 0 0;
  color: var(--p-tinta-media);
  font-size: 13px;
}

.frota-otimizacao__espera-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: var(--p-3) 0 0;
  padding-left: 18px;
  color: var(--p-espera);
  font-size: 13px;
}

.frota-otimizacao__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--p-2);
  margin-top: var(--p-5);
}

.frota-sem-onibus__lista {
  display: grid;
  gap: var(--p-2);
}

.frota-sem-onibus__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #ead99f;
  border-radius: var(--p-raio-m);
  background: var(--p-superficie);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.frota-sem-onibus__item:hover {
  border-color: #d8c278;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.frota-sem-onibus__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-3);
  flex-wrap: wrap;
}

.frota-sem-onibus__info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13.5px;
  color: var(--p-tinta);
}

.frota-sem-onibus__nome-grupo {
  font-weight: 700;
  color: var(--p-tinta);
  font-size: 14px;
}

.frota-sem-onibus__nome-grupo--vip {
  color: #8a5700;
}

.frota-sem-onibus__sep {
  color: #cbd5e1;
  font-weight: 400;
  user-select: none;
}

.frota-sem-onibus__contato {
  color: var(--p-tinta);
  font-size: 13px;
  font-weight: 500;
}

.frota-sem-onibus__contato-label {
  color: var(--p-tinta-fraca);
  font-size: 12.5px;
  font-weight: 400;
}

.frota-sem-onibus__qtd {
  color: var(--p-tinta-media);
  font-size: 12.5px;
  font-weight: 600;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.frota-sem-onibus__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.frota-sem-onibus__pagamento {
  color: var(--p-tinta-fraca);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.frota-sem-onibus__select {
  flex: 0 0 auto;
  min-width: 170px;
  max-width: 200px;
  height: 34px;
  font-size: 12.5px;
}

/* Linha de Passageiros */
.frota-sem-onibus__passageiros {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  font-size: 12px;
  line-height: 1.4;
  color: var(--p-tinta-media);
  overflow-x: auto;
}

.frota-sem-onibus__pax-label {
  font-weight: 700;
  color: var(--p-tinta);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.frota-sem-onibus__pax-lista {
  color: var(--p-tinta);
  font-weight: 500;
}

.frota-sem-onibus__pax-sep {
  color: #94a3b8;
  padding: 0 4px;
  font-weight: 400;
  user-select: none;
}

@media (max-width: 768px) {
  .frota-header__acoes {
    flex: 1 1 100%;
    padding-top: 0;
  }

  .frota-header__acoes .botao {
    width: 100%;
  }

  .onibus-card__header-center {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .onibus-card__header-right {
    margin-left: auto;
  }

  .frota-otimizacao__cabecalho,
  .frota-sem-onibus__cabecalho {
    flex-direction: column;
  }

  .frota-otimizacao__vip-aviso {
    align-self: flex-start;
  }

  .frota-otimizacao__movimento-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .frota-otimizacao__movimento-info-left {
    gap: 6px;
  }

  .frota-otimizacao__movimento-right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
  }

  .frota-otimizacao__movimento-pagamento {
    text-align: left;
  }

  .frota-otimizacao__movimento-rota {
    width: fit-content;
  }

  .frota-sem-onibus__top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .frota-sem-onibus__info-left {
    gap: 6px;
  }

  .frota-sem-onibus__right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
  }

  .frota-sem-onibus__pagamento {
    text-align: left;
  }

  .frota-sem-onibus__select {
    width: 100%;
    max-width: none;
    height: 38px;
  }
}

@media (max-width: 560px) {

  .onibus-card__header,
  .onibus-card__corpo,
  .frota-otimizacao,
  .frota-sem-onibus {
    padding: var(--p-3);
  }

  .onibus-card__header-left {
    min-width: 0;
  }

  .onibus-card__titulo {
    font-size: 16px;
  }

  .onibus-card__header-right {
    width: 100%;
    margin-left: 0;
  }

  .onibus-card__vagas-badge {
    width: 100%;
    text-align: center;
  }

  .progresso-texto {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .progresso-texto__meta {
    text-align: left;
  }

  .frota-otimizacao__acoes {
    flex-direction: column-reverse;
  }

  .frota-otimizacao__acoes .botao {
    width: 100%;
  }
}

/* Header da frota: no tablet a leitura passa a ser vertical; no celular os
   indicadores ficam em uma grade compacta e o mapa continua explorável por
   gesto horizontal quando a planta não couber na largura disponível. */
@media (max-width: 1023px) {
  .onibus-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
  }

  .onibus-card__header-left {
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

  .onibus-card__stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .onibus-card__stat-card {
    aspect-ratio: auto;
    min-height: 92px;
    padding: 10px 6px;
  }

  .onibus-card__header-center {
    grid-column: 1;
    order: initial;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    overflow-x: auto;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
  }

  .ocupacao-mapa.onibus-arte-mapa {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  .onibus-arte-mapa__chassi {
    align-self: center;
  }

  .onibus-arte-mapa__legenda--vertical {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    border-top: 1.5px solid var(--p-linha);
    border-left: 0;
    padding: 10px 0 0;
  }

  .onibus-arte-mapa__legenda-item {
    min-width: 0;
    padding: 5px 6px;
  }

  .onibus-card__vista-toggle,
  .onibus-card__lock-toggle {
    width: 44px;
    height: 44px;
  }

  .onibus-card__vista-toggle:focus-visible,
  .onibus-card__lock-toggle:focus-visible {
    outline: 2px solid var(--p-ciano, #00aeef);
    outline-offset: 2px;
  }
}

@media (max-width: 560px) {
  .onibus-card__header {
    gap: 12px;
    padding: 12px;
  }

  .onibus-card__titulo {
    font-size: 18px;
  }

  .onibus-card__stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .onibus-card__stat-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 72px;
    padding: 9px 8px;
    text-align: left;
  }

  .onibus-card__stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .onibus-card__stat-content,
  .onibus-card__stat-value {
    align-items: flex-start;
    text-align: left;
  }

  .onibus-card__stat-label {
    font-size: 9px;
  }

  .onibus-card__stat-value {
    font-size: 11px;
  }

  .onibus-card__header-center {
    justify-content: flex-start;
    margin-inline: -4px;
    width: calc(100% + 8px);
  }

  .onibus-arte-mapa__chassi {
    align-self: flex-start;
  }

  .onibus-arte-mapa__legenda--vertical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onibus-arte-mapa__legenda-texto strong {
    font-size: 10.5px;
  }

  .onibus-arte-mapa__legenda-texto span {
    font-size: 9px;
  }
}

/* ============================================================================
   Modal / Diálogo Moderno (<dialog class="bus-dialog">)
   ========================================================================== */
.bus-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 460px;
  width: min(calc(100% - 32px), 460px);
  max-height: calc(100vh - 40px);
  padding: 24px 28px;
  border: 1px solid var(--p-linha);
  border-radius: 16px;
  background: var(--p-superficie);
  color: var(--p-tinta);
  box-shadow: 0 20px 50px rgba(8, 24, 46, 0.28), 0 0 0 1px rgba(90, 113, 132, 0.1);
  z-index: 9999;
  box-sizing: border-box;
}

.bus-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: busModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes busModalPop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bus-dialog::backdrop {
  background: rgba(8, 24, 46, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: busBackdropFade 0.2s ease-out;
}

@keyframes busBackdropFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.bus-dialog__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bus-dialog__badge-icone {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bus-dialog__badge-icone--erro {
  background: var(--p-falha-fundo);
  color: var(--p-falha);
}

.bus-dialog__badge-icone--ok {
  background: var(--p-ok-fundo);
  color: var(--p-ok);
}

.bus-dialog__badge-icone--aviso {
  background: var(--p-espera-fundo);
  color: var(--p-espera);
}

.bus-dialog h2 {
  color: var(--p-tinta);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 700;
}

.bus-dialog p {
  margin: 0;
  color: var(--p-tinta-media);
  font-size: 0.95rem;
  line-height: 1.6;
}

.bus-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.bus-dialog--vip {
  width: min(calc(100% - 32px), 760px);
  max-width: 760px;
  padding: 28px;
}

.bus-dialog--vip form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bus-dialog__subtitle {
  margin: 4px 0 0;
  color: var(--p-tinta-fraca);
  font-size: 0.8125rem;
}

.bus-dialog__badge-icone--vip {
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 0;
  color: #d97706;
}

.bus-dialog__badge-icone--vip svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.45));
}

.vip-formularios {
  display: grid;
  gap: 14px;
  max-height: min(55vh, 520px);
  overflow-y: auto;
  padding: 2px 5px 2px 1px;
}

.vip-formulario {
  padding: 16px;
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
  background: var(--p-superficie-2);
}

.vip-formulario__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.vip-formulario__numero {
  color: var(--p-tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vip-formulario__remover {
  padding: 4px 8px;
  border: 0;
  border-radius: var(--p-raio-p);
  background: transparent;
  color: var(--p-falha);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}

.vip-formulario__remover:hover {
  background: var(--p-falha-fundo);
}

.vip-formulario__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vip-formulario__campo {
  display: grid;
  gap: 5px;
}

.vip-formulario__campo--nome {
  grid-column: 1 / -1;
}

.vip-formulario__campo label {
  color: var(--p-tinta-media);
  font-size: 0.75rem;
  font-weight: 650;
}

.vip-formulario__campo input,
.vip-formulario__campo select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--p-linha-forte);
  border-radius: var(--p-raio-p);
  background: var(--p-superficie);
  color: var(--p-tinta);
  font: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.vip-formulario__campo input[data-vip-field="full_name"] {
  text-transform: uppercase;
}

.vip-formulario__campo input[data-vip-field="email"] {
  text-transform: lowercase;
}

.vip-formulario__campo input:focus-visible,
.vip-formulario__campo select:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
  border-color: var(--p-acao);
}

.vip-formulario__campo input[aria-invalid="true"],
.vip-formulario__campo select[aria-invalid="true"] {
  border-color: var(--p-falha);
  box-shadow: 0 0 0 3px var(--p-falha-fundo);
}

.vip-form__erro {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--p-raio-p);
  background: var(--p-falha-fundo);
  color: var(--p-falha);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.bus-dialog__actions--vip {
  align-items: stretch;
}

.bus-dialog__actions--vip .botao:first-child {
  margin-right: auto;
}

@media (max-width: 560px) {
  .bus-dialog--vip {
    padding: 20px 16px;
  }

  .vip-formularios {
    max-height: 52vh;
  }

  .vip-formulario__grid {
    grid-template-columns: 1fr;
  }

  .vip-formulario__campo--nome,
  .vip-formulario__campo--onibus {
    grid-column: auto;
  }

  .bus-dialog__actions--vip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bus-dialog__actions--vip .botao:first-child {
    margin-right: 0;
  }
}

/* ---- Edição de reserva: lápis na lista e no card da frota ---------------- */

/* Código da reserva e lápis na mesma linha, acima da contagem de pessoas. */
.tabela__codigo-linha {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Lápis da lista de reservas: mesmas cores do código no card da frota,
   discreto e roxo ao passar o mouse. */
.tabela__editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  border-radius: var(--p-raio-p, 6px);
  background: transparent;
  color: var(--p-tinta-fraca);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.tabela__editar:hover,
.tabela__editar:focus-visible {
  color: var(--p-acao);
  background: var(--p-acao-fraca);
}

.tabela__editar:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
}

.tabela__editar svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Lápis do card da frota: botão redondo flutuando no canto superior direito,
   fora do fluxo do topo (o título e o código não perdem largura). Fica
   escondido e só aparece no card em foco: mouse em cima, foco do teclado dentro
   ou menu "Mover" aberto. Só opacidade (nada de display/visibility) para o
   Tab continuar alcançando o botão e o :focus-within revelá-lo. */
.grupo-item__editar {
  position: absolute;
  top: -11px;
  right: -5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #d8e2ee;
  border-radius: 50%;
  background: #ffffff;
  color: var(--p-tinta-fraca);
  box-shadow: 0 2px 6px rgba(13, 34, 66, 0.14);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.grupo-item:hover .grupo-item__editar,
.grupo-item:focus-within .grupo-item__editar,
.grupo-item--menu-aberto .grupo-item__editar,
.grupo-item__editar:hover,
.grupo-item__editar:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.grupo-item__editar:hover,
.grupo-item__editar:focus-visible {
  color: var(--p-acao);
  border-color: var(--p-acao);
  background: var(--p-acao-fraca);
}

.grupo-item__editar:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
}

.grupo-item__editar svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Sem mouse para revelar o lápis (toque): sempre visível, no mesmo canto. */
@media (hover: none), (pointer: coarse) {
  .grupo-item__editar {
    right: -4px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grupo-item__editar {
    transition: none;
  }
}

/* Toque: área de clique de 44 x 44 px (WCAG 2.5.5) sem engordar o botão. O
   acréscimo vai para cima e para os lados (espaço vazio acima do card), nunca
   para baixo, então não rouba o clique do código nem do "Mover". */
@media (max-width: 860px), (pointer: coarse) {
  .tabela__editar {
    position: relative;
  }

  .tabela__editar::before {
    content: '';
    position: absolute;
    inset: -6px;
  }

  .grupo-item__editar::before {
    content: '';
    position: absolute;
    inset: -22px -11px 0;
  }
}

/* Passageiro que desistiu continua na lista (conferência), riscado e num tom
   mais apagado; a etiqueta "Desistiu" e a data ficam legíveis, sem risco.
   Cor sólida em vez de opacidade: com opacity .6 o texto caía para 2.3:1.
   `--p-tinta-fraca` dá 5.5:1 no branco, 4.5:1 na linha realçada e 5.2:1 na
   linha VIP (AA para texto normal). */
.tabela__linha--desistente .tabela__nome {
  color: var(--p-tinta-fraca);
  text-decoration: line-through;
}

.tabela__linha--desistente .tabela__faixa-passageiro {
  color: var(--p-tinta-fraca);
}

.tabela__desistiu {
  margin-top: 2px;
  margin-left: 18px;
  color: var(--p-tinta-fraca);
  font-size: 0.75rem;
  line-height: 1.3;
}

.tabela__desistiu .etiqueta {
  font-size: 0.6875rem;
  padding: 1px 6px;
}

/* ---- Modal "Editar reserva" ------------------------------------------------
   Mesma moldura do modal VIP (.bus-dialog--vip); o corpo rola e o rodapé com
   Cancelar / Salvar fica sempre visível. */

.bus-dialog--editar {
  width: min(calc(100% - 32px), 680px);
  max-width: 680px;
  max-height: calc(100dvh - 40px);
}

/* `.vip-formulario__campo` (grid) e `.etiqueta` (inline-block) venceriam o
   atributo `hidden`; dentro do modal ele sempre esconde. */
.bus-dialog--editar [hidden] {
  display: none !important;
}

.bus-dialog__badge-icone--editar {
  background: var(--p-acao-fraca);
  color: var(--p-acao);
}

.bus-dialog__badge-icone--editar svg {
  width: 18px;
  height: 18px;
}

.bus-dialog--editar form {
  max-height: calc(100vh - 96px);
  /* dvh acompanha o teclado do iOS: o rodapé com Salvar fica acima dele. */
  max-height: calc(100dvh - 96px);
}

/* O corpo rola (overflow-y:auto), o que também corta o que passa da caixa:
   o respiro à volta deixa o anel de foco (2px + 1px de offset) inteiro. */
.editar-corpo {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 3px 4px 3px 3px;
}

/* Cabeçalho do modal de edição: selo | título | nome do grupo, à direita. */
.bus-dialog__header--editar {
  flex-wrap: wrap;
}

.bus-dialog__header--editar > div:not(.bus-dialog__badge-icone):not(.editar-grupo-cabecalho) {
  flex: 1 1 200px;
  min-width: 0;
}

.editar-grupo-cabecalho {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px;
}

.editar-grupo {
  display: grid;
  width: 200px;
  max-width: 100%;
  gap: 3px;
  justify-items: start;
}

.editar-grupo label {
  color: var(--p-tinta-media);
  font-size: 0.6875rem;
  font-weight: 650;
}

.editar-grupo select:disabled {
  background: var(--p-superficie-2);
  color: var(--p-tinta);
  opacity: 1;
  cursor: default;
}

/* Link discreto: parece texto, não botão. */
.editar-grupo__alterar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-acao);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.editar-grupo__alterar:hover {
  color: var(--p-acao-escura);
  text-decoration: underline;
}

.editar-grupo__alterar:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 2px;
  border-radius: 2px;
}

.editar-grupo__aviso,
.bus-dialog p.editar-grupo__aviso {
  margin: 2px 0 0;
  color: var(--p-espera);
  font-size: 0.75rem;
  line-height: 1.4;
}

.editar-passageiros {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editar-passageiro {
  border: 1px solid var(--p-linha);
  border-radius: var(--p-raio);
  background: var(--p-superficie);
}

.editar-passageiro--aberto {
  border-color: var(--p-linha-forte);
  background: var(--p-superficie-2);
}

.editar-passageiro__resumo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--p-raio);
  background: transparent;
  color: var(--p-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.editar-passageiro__resumo:hover {
  background: var(--p-realce-linha);
}

.editar-passageiro__resumo:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: -2px;
}

.editar-passageiro__icone {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--p-tinta-fraca);
}

.editar-passageiro__icone--responsavel {
  color: var(--p-acao);
}

.editar-passageiro__icone svg {
  width: 18px;
  height: 18px;
}

.editar-passageiro__texto {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
}

.editar-passageiro__nome {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editar-passageiro__meta {
  color: var(--p-tinta-fraca);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.editar-passageiro__etiqueta {
  flex: 0 0 auto;
}

.editar-passageiro__seta {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--p-tinta-fraca);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--p-transicao);
}

/* Reserva de uma pessoa só: cabeçalho informativo, sem seta nem clique. */
.editar-passageiro__resumo.editar-passageiro--fixo {
  cursor: default;
}

.editar-passageiro__resumo.editar-passageiro--fixo:hover {
  background: transparent;
}

.editar-passageiro__resumo[aria-expanded="true"] .editar-passageiro__seta {
  transform: rotate(180deg);
}

/* Desistente: nome riscado em cor sólida (5.5:1 no branco, 4.9:1 no cinza do
   item aberto), sem opacidade. */
.editar-passageiro--desistente .editar-passageiro__nome {
  color: var(--p-tinta-fraca);
  text-decoration: line-through;
}

.editar-passageiro__painel {
  padding: 4px 14px 14px;
}

.editar-passageiro__painel .vip-formulario__campo select,
.editar-passageiro__painel .vip-formulario__campo textarea,
.editar-grupo select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--p-linha-forte);
  border-radius: var(--p-raio-p);
  background: var(--p-superficie);
  color: var(--p-tinta);
  font: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.editar-grupo select:focus-visible,
.editar-passageiro__painel textarea:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 1px;
  border-color: var(--p-acao);
}

.editar-passageiro__painel textarea {
  resize: vertical;
  line-height: 1.4;
}

.editar-desistencia {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--p-linha);
}

/* Switch "Desistiu": botão com role=switch, rótulo visível no próprio botão. */
.editar-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-height: 44px;
  padding: 4px 6px 4px 0;
  border: 0;
  background: transparent;
  color: var(--p-tinta);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}

.editar-switch:focus-visible {
  outline: 2px solid var(--p-acao);
  outline-offset: 2px;
  border-radius: var(--p-raio-p);
}

.editar-switch__trilho {
  position: relative;
  display: inline-block;
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  border: 1px solid var(--p-tinta-fraca);
  border-radius: 999px;
  background: var(--p-superficie);
  transition: background var(--p-transicao), border-color var(--p-transicao);
  box-sizing: border-box;
}

.editar-switch__botao {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--p-tinta-fraca);
  transition: transform var(--p-transicao), background var(--p-transicao);
}

.editar-switch[aria-checked="true"] .editar-switch__trilho {
  border-color: var(--p-falha);
  background: var(--p-falha);
}

.editar-switch[aria-checked="true"] .editar-switch__botao {
  background: #ffffff;
  transform: translateX(18px);
}

.editar-nota,
.bus-dialog p.editar-nota {
  margin-top: 12px;
  color: var(--p-tinta-media);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.editar-responsavel {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--p-acao);
  border-radius: var(--p-raio);
  background: var(--p-acao-fraca);
}

.editar-responsavel legend {
  padding: 0 6px;
  color: var(--p-acao-escura);
  font-size: 0.8125rem;
  font-weight: 700;
}

.editar-responsavel__dica,
.bus-dialog p.editar-responsavel__dica {
  margin: 0 0 8px;
  color: var(--p-tinta-media);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.editar-responsavel__opcoes {
  display: grid;
  gap: 2px;
}

.editar-responsavel__opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: var(--p-raio-p);
  color: var(--p-tinta);
  font-size: 0.875rem;
  cursor: pointer;
}

.editar-responsavel__opcao:hover {
  background: var(--p-superficie);
}

.editar-responsavel__opcao input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--p-acao);
}

.editar-responsavel__nome {
  font-weight: 650;
}

.editar-responsavel__falta {
  color: var(--p-tinta-media);
  font-size: 0.8125rem;
}

/* `.bus-dialog p` (0,1,1) venceria `.vip-form__erro` (0,1,0) na margem, cor e
   tamanho; aqui a mensagem de erro do modal fica com o vermelho de falha. */
.bus-dialog--editar p.vip-form__erro {
  margin: 14px 0 0;
  color: var(--p-falha);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.editar-aviso,
.bus-dialog p.editar-aviso {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--p-raio-p);
  background: var(--p-espera-fundo);
  color: var(--p-espera);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .bus-dialog--editar form {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
  }

  /* Celular: o nome do grupo desce para uma linha própria, sob o título. */
  .editar-grupo-cabecalho {
    flex: 1 1 100%;
    margin-left: 0;
    padding: 3px;
  }

  .editar-grupo {
    width: 100%;
  }

  .editar-passageiro__painel {
    padding: 4px 10px 12px;
  }

  .editar-passageiro__etiqueta {
    padding: 2px 6px;
    font-size: 0.6875rem;
  }
}