/* ==========================================================================
   CAPTURA ASSISTIDA (F26) — ditado, foto de ficha, conversa colada e o selo
   "sugerido pela IA".

   Arquivo próprio e numerado, como manda o acordo anti-conflito da onda: nada
   aqui edita 03_componentes.css no meio. Tudo usa os tokens do design system —
   nenhuma cor literal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O painel de captura, acima do formulário
   -------------------------------------------------------------------------- */
.captura {
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-afundado);
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.captura__cabecalho { display: flex; flex-direction: column; gap: var(--esp-1); }
.captura__titulo { margin: 0; font-size: var(--texto-lg); font-weight: var(--peso-semi); }
.captura__ajuda { color: var(--cor-texto-suave); font-size: var(--texto-sm); }

/* Dois canais lado a lado no desktop, empilhados no celular — que é onde a
   foto de ficha e o ditado de fato acontecem. */
.captura__canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-3);
}

.captura__canal {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  /* min-width: 0 — a causa raiz do "cortado" em item de grid (o padrão é
     min-width:auto e o conteúdo largo estoura a coluna em vez de encolher). */
  min-width: 0;
}

.captura__canal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.captura__canal-titulo { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-semi); }
.captura__rodape { font-size: var(--texto-sm); }

/* `hidden` no botão do microfone NÃO estava escondendo nada: `.botao` declara
   `display: inline-flex`, e declaração de autor vence o `[hidden]` da folha do
   navegador (que é do agente do usuário). O efeito medido: onde não existe
   reconhecimento de voz — a WebView do Android, o WKWebView, o Firefox — o
   Stimulus saía cedo sem revelar o botão, e o botão aparecia assim mesmo,
   morto ao toque. É o mesmo gotcha já anotado em 10_sms.css e
   10_telefone_pais.css. */
.captura__microfone[hidden] { display: none; }

/* O botão do microfone piscando enquanto ouve: é o único jeito de o operador
   saber que o aparelho ainda está gravando a fala dele. */
.captura__microfone--ativo {
  border-color: var(--sgp-perigo);
  color: var(--sgp-perigo);
  animation: captura-pulso 1.6s ease-in-out infinite;
}

@keyframes captura-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .captura__microfone--ativo { animation: none; }
}

/* --------------------------------------------------------------------------
   A origem do dado, dentro do formulário de conferência
   -------------------------------------------------------------------------- */
.captura-origem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: flex-start;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-afundado);
  margin-bottom: var(--esp-4);
}

.captura-origem__texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.captura-origem__rotulo { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.captura-origem__transcricao {
  font-size: var(--texto-sm);
  color: var(--cor-texto);
  border-left: 3px solid var(--cor-borda-forte);
  padding-left: var(--esp-3);
}
.captura-origem__imagem { display: flex; flex-direction: column; gap: var(--esp-2); }
.captura-origem__foto {
  max-width: 220px;
  max-height: 260px;
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   Candidatos a solicitante (nunca escolhidos pela máquina)
   -------------------------------------------------------------------------- */
.captura-candidatos {
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  margin-bottom: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.captura-candidatos__titulo { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-semi); }
.captura-candidatos__citado { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.captura-candidatos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
/* O <template> do chip é inerte, mas continua sendo um nó: sem isto ele entra
   na conta do `gap` do flex e abre um vão entre os candidatos. */
.captura-candidatos__item { display: contents; }
.captura-candidatos__item > template { display: none; }
.captura-candidatos__detalhe {
  margin-left: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

/* --------------------------------------------------------------------------
   O selo por campo
   -------------------------------------------------------------------------- */
.selo-ia {
  align-self: flex-start;
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-acao-forte);
  background: var(--cor-acao-suave);
  border-radius: var(--raio-sm);
  padding: 2px var(--esp-2);
}

/* Campo tocado pela máquina: a borda muda, o fundo não — o texto tem de
   continuar tão legível quanto o que o operador digitou. */
.campo__controle--sugerido,
.campo__selecao.campo__controle--sugerido,
.campo__area.campo__controle--sugerido {
  border-color: var(--cor-acao);
  box-shadow: inset 2px 0 0 var(--cor-acao);
}

.captura__selo-aviso { margin-bottom: var(--esp-4); }

/* --------------------------------------------------------------------------
   A fila de conferência
   -------------------------------------------------------------------------- */
/* A BARRA DO TOPO do esqueleto (área "filtros"): o placar da fila. */
.barra-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-3) var(--esp-4);
}
.barra-fila__placar { font-weight: var(--peso-semi); }
.barra-fila__acoes { display: flex; gap: var(--esp-2); align-items: center; }

/* A COLUNA DA FILA (área "lista" do esqueleto, ~340px). Item de coluna
   estreita: `min-width: 0` em tudo que carrega texto, senão o nome comprido se
   recusa a encolher e empurra a ficha para fora — a mesma causa raiz que a F09
   consertou na base (10_grid_base.css). */
.fila-capturas { list-style: none; margin: 0; padding: var(--esp-2); display: flex; flex-direction: column; gap: var(--esp-1); }

.fila-capturas__item {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  justify-content: space-between;
  border-radius: var(--raio-md);
  min-width: 0;
}
.fila-capturas__item:hover { background: var(--cor-fundo-sutil); }
/* O mesmo par (fundo de ação + faixa à esquerda) que marca o item aberto em
   `.lista__item--ativo`: o operador não tem de aprender um realce novo só
   porque a lista é de fichas e não de pessoas. */
.fila-capturas__item--aberta {
  background: var(--cor-acao-suave);
  box-shadow: inset 3px 0 0 var(--cor-acao);
}

.fila-capturas__abrir {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--esp-3);
  color: inherit;
  text-decoration: none;
}
.fila-capturas__nome { font-weight: var(--peso-semi); min-width: 0; overflow-wrap: anywhere; }
.fila-capturas__resumo {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  min-width: 0;
  /* Duas linhas e reticências: o resumo é contexto, não conteúdo — se ele
     crescer, a fila deixa de caber na coluna e some o que ela existe para
     mostrar (quantas fichas faltam). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fila-capturas__falha { font-size: var(--texto-sm); color: var(--sgp-perigo); }
.fila-capturas__acoes { display: flex; gap: var(--esp-2); align-items: center; padding-right: var(--esp-2); }

.captura-endereco {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  margin-bottom: var(--esp-4);
  min-width: 0;
}
.captura-endereco legend { padding: 0 var(--esp-2); }