/* ==========================================================================
   F22 — FLUXO DE CAMPANHA
   Compositor em três passos, prova, pré-voo e fila de agendadas.

   Arquivo próprio e numerado (regra anti-conflito do plano): nenhuma fatia
   edita 03_componentes.css no meio. Tudo aqui reusa os tokens do design
   system — nenhuma cor literal nova.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Trilho dos passos
   -------------------------------------------------------------------------- */
.passos__trilho {
  display: flex;
  gap: var(--esp-2);
  list-style: none;
  margin: 0 0 var(--esp-2);
  padding: 0;
  flex-wrap: wrap;
}

.passos__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.passos__marca:hover { border-color: var(--cor-borda-forte); }
.passos__marca:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

.passos__numero {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--cor-fundo-afundado);
  color: var(--cor-texto-suave);
  font-weight: var(--peso-semi);
  font-size: 0.75rem;
}

.passos__marca--ativa {
  border-color: var(--cor-acao);
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
}
.passos__marca--ativa .passos__numero { background: var(--cor-acao); color: var(--cor-acao-contraste); }

.passos__marca--feita .passos__numero { background: var(--cor-acao-suave); color: var(--cor-acao-forte); }

/* CUIDADO — `display` DE CLASSE APAGA O `hidden` DO HTML.
   `[hidden]{display:none}` mora na folha do navegador e tem a MESMA
   especificidade de uma classe; entre empatados, ganha quem vem depois, e a
   folha do autor sempre vem depois. Ou seja: `.passos__passo{display:grid}`
   deixava os três passos visíveis para sempre, e o compositor "em três passos"
   virava o compositor de sempre com um trilho decorativo em cima.
   O `:not([hidden])` devolve o controle ao atributo — que é quem o Stimulus
   liga e desliga — e a linha-guarda abaixo protege todo o resto do bloco. */
.passos__passo:not([hidden]) { display: grid; gap: var(--esp-4); }

.passos [hidden] { display: none !important; }

.passos__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
}

.passos__acoes-fim {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

/* A ordem visual das ações. Ela DIVERGE da ordem no DOM de propósito: o submit
   de salvar precisa vir primeiro na árvore para ser o botão padrão do Enter
   (ver o comentário em _navegacao_de_passos.html.erb) e último na tela, que é
   onde a mão do assessor o procura. */
.passos__acao--cancelar { order: 1; }
.passos__acao--prova    { order: 2; }
.passos__acao--conferir { order: 3; }
.passos__acao--avancar  { order: 4; }
.passos__acao--salvar   { order: 5; }

/* --------------------------------------------------------------------------
   Prova ("manda pra mim antes de mandar pra todo mundo")
   -------------------------------------------------------------------------- */
.prova { display: inline-block; }

.prova__janela {
  inline-size: min(30rem, calc(100vw - var(--esp-6)));
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
}

.prova__janela::backdrop { background: rgb(0 0 0 / 45%); }

.prova__cabecalho { padding: var(--esp-4) var(--esp-4) 0; }
.prova__corpo { padding: var(--esp-4); display: grid; gap: var(--esp-3); }
.prova__titulo { margin: 0 0 var(--esp-1); font-size: 1.125rem; }

.prova__rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
  border-end-start-radius: var(--raio-lg);
  border-end-end-radius: var(--raio-lg);
}

/* --------------------------------------------------------------------------
   Pré-voo — a conferência entre "escrevi" e "gastei"
   -------------------------------------------------------------------------- */
.pre-voo__area:empty { display: none; }

.pre-voo {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
}

.pre-voo__topo {
  display: flex;
  gap: var(--esp-5);
  flex-wrap: wrap;
  align-items: flex-start;
}

.pre-voo__numero { display: grid; }
.pre-voo__valor { font-size: 2.5rem; font-weight: var(--peso-forte); line-height: 1; }
.pre-voo__unidade { color: var(--cor-texto-suave); font-size: 0.875rem; }

.pre-voo__fora { color: var(--cor-texto-suave); font-size: 0.875rem; }
.pre-voo__motivos, .pre-voo__avisos { margin: var(--esp-1) 0 0; padding-inline-start: var(--esp-4); }
.pre-voo__avisos li { margin-block-end: var(--esp-1); }

.pre-voo__custo {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}
.pre-voo__custo--faltando { box-shadow: inset 3px 0 0 var(--cor-perigo, #c0392b); }

.pre-voo__subtitulo { margin: 0 0 var(--esp-2); font-size: 0.9375rem; }

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

.pre-voo__boneco {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo);
  /* A causa raiz do "cortado": item de grid nasce com min-width auto e um
     texto longo empurra a coluna. Aqui a mensagem quebra, não estoura. */
  min-inline-size: 0;
}

.pre-voo__boneco-quem { display: grid; font-weight: var(--peso-semi); font-size: 0.875rem; }

.pre-voo__boneco-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  line-height: var(--altura-solta);
}

.pre-voo__acoes { display: grid; gap: var(--esp-2); justify-items: start; }

/* --------------------------------------------------------------------------
   Fila de agendadas
   -------------------------------------------------------------------------- */
.fila { display: grid; gap: var(--esp-3); list-style: none; margin: 0; padding: 0; }

.fila__item {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
}

.fila__item--fora { box-shadow: inset 3px 0 0 var(--cor-perigo, #c0392b); }

.fila__identidade { display: grid; gap: var(--esp-1); min-inline-size: 0; }
.fila__nome { font-weight: var(--peso-semi); overflow-wrap: anywhere; }

.fila__tempo { display: grid; gap: var(--esp-1); min-inline-size: 0; }
.fila__quando { font-size: 0.875rem; }
.fila__contagem { color: var(--cor-texto-suave); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.fila__contagem--iminente { color: var(--cor-perigo, #c0392b); font-weight: var(--peso-semi); }
.fila__aviso { color: var(--cor-perigo, #c0392b); font-size: 0.75rem; }

.fila__acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 60rem) {
  .fila__item { grid-template-columns: 1fr; }
  .fila__acoes { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Prévia do público — "quem vai receber isso?", no passo 2 (R6)
   --------------------------------------------------------------------------
   A tabela tem TETO DE ALTURA e rola dentro de si: o público é amostrado no
   servidor (25 linhas), mas mesmo 25 linhas empurrariam os botões do passo
   para fora da tela em celular. O que rola aqui é a lista, não a página. */
.previa-publico__area {
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
}

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

.previa-publico__contagem { margin: 0; font-size: 1rem; }
.previa-publico__contagem strong { font-size: 1.75rem; line-height: 1; }
.previa-publico__contagem--vazia { color: var(--cor-texto-suave); }

.previa-publico__subtitulo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.previa-publico .tabela-rolagem { max-height: 18rem; overflow-y: auto; }

.previa-publico__fora summary { cursor: pointer; color: var(--cor-texto-suave); }
.previa-publico__motivos { margin: var(--esp-2) 0; padding-inline-start: var(--esp-4); }
.previa-publico__destino--torto { color: var(--sgp-atencao); }