/* O chaveador da ficha técnica na busca — 10/09/2026.
 *
 * Arquivo próprio, e não recorte de `onboarding.css` ou `search-page.css`: os
 * dois são o lote congelado do `v0`, REUTILIZAR por inteiro. O que é nosso
 * mora aqui, e some junto se a decisão for revertida.
 *
 * A regra `.la-catalog-heading` continua no arquivo congelado e ficou sem
 * consumidor — é a marca de onde o título estava, e apagá-la seria editar o
 * congelado por arrumação.
 */

.la-catalog-media {
  /* Âncora de posicionamento do chaveador. Sem isto ele se prenderia ao card
     inteiro e cairia sobre o texto. */
  position: relative;
}

.ficha-chave {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  /* Fundo opaco o bastante para o símbolo ler sobre foto clara ou escura: o
     card mostra imagem editorial de estúdio, quase sempre clara, mas o
     genérico é escuro. */
  background: rgba(17, 24, 32, .72);
  color: #ffffff;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  /* Sempre visível — decisão do Diretor em 10/09/2026.
   *
   * Ele aparecia só no hover, para não poluir a grade. O problema é que um
   * controle que só existe quando o ponteiro passa por cima é um controle que
   * ninguém descobre: quem não sabe que ele está lá não passa o mouse para
   * procurá-lo. E em telefone não há hover nenhum.
   *
   * O custo é sessenta marcas verdes na tela; o benefício é que a função
   * existe para quem não foi avisado dela. */
  transition: background-color .12s ease, transform .12s ease;
}

.ficha-chave:hover { transform: scale(1.08); }

.ficha-chave:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Estado ligado: o veículo está na busca. Mostra o ✓ e esconde o ✕. */
.ficha-chave[aria-pressed='true'] .ficha-chave-nao,
.ficha-chave[aria-pressed='false'] .ficha-chave-sim { display: none; }

.ficha-chave[aria-pressed='true'] { background: rgba(21, 106, 60, .82); }
.ficha-chave[aria-pressed='false'] { background: rgba(150, 32, 26, .86); }

/* A ficha marcada NÃO muda de aparência além do sinalizador — decisão do
 * Diretor em 10/09/2026. Nada de esmaecer, encolher ou sumir: quem some é a
 * ficha na próxima busca, e o card na tela continua legível até lá.
 *
 * O esmaecimento que havia aqui saiu junto com o `hidden` que não escondia
 * (`docs/54` §1). Esconder de verdade é o assunto da pilha de recolhidas, e
 * ainda não está implementado.
 */

/* O aviso na barra de controles.
 *
 * Ele divide a linha com a contagem de veículos, o toggle de ficha técnica, a
 * ordenação e dois botões — por isso é curto e discreto. A barra é do lote
 * congelado do `v0`; aqui só entra o que é deste elemento.
 */
.fichas-ocultas {
  display: inline-flex;
  gap: .2rem;
  align-items: baseline;
  /* `hidden` sozinho não bastaria: `inline-flex` venceria a regra de folha do
     navegador, que é o defeito que escondia nada nos cards (docs/54 §1). */
  font-size: .78rem;
  color: var(--muted, #5b6b7c);
  white-space: nowrap;
}

.fichas-ocultas[hidden] { display: none; }

/* Os parênteses e o botão como uma peça só, sem o `gap` do flex entre eles. */
.fichas-ocultas-acao { display: inline; }

.fichas-ocultas button {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.fichas-ocultas button:hover { color: var(--accent, #1f5c91); }