/* ==========================================================================
   uc-busca — o campo de busca da PAGINA (Fase 4b, 06/09/2026)
   ==========================================================================

   ==========================================================================
   1. POR QUE UM PREFIXO NOVO, E NAO A BUSCA DO TOPO
   ==========================================================================
   `uc-topo__busca` existe, funciona e esta em toda tela. Ela NAO serve aqui,
   e sao duas razoes independentes:

     (a) O painel dela e' `position:absolute` e SOBREPOE a pagina (topo.css
         §3: "o painel sangra de ponta a ponta da barra"). Uma busca aberta o
         tempo todo na tela de resultados cobriria os proprios resultados.
     (b) La' a busca e' CROMO -- fechada, ao alcance de um clique, um assunto
         entre outros. Aqui ela e' o ASSUNTO da tela. Assunto de tela nao se
         resolve abrindo um painel de navegacao.

   E reusar `.uc-topo__campo` fora do topo seria o emprestimo que a Regra 16
   existe para acusar -- exatamente o `.uc-top__marca` dentro do rodape que a
   tarefa G1 mediu e desfez.

   DOIS CONSUMIDORES, e e' o que justifica o prefixo em vez de um sufixo:
   `search.php` (refinar o que nao achou) e `404.php` (o caminho de volta, que
   o tema antigo ja' oferece em `<form class="uc-filters">` e que nao pode
   regredir).

   ==========================================================================
   2. O QUE ESTE ARQUIVO NAO PINTA
   ==========================================================================
   ⛔ O BOTAO. Ele e' `uc-botao--contorno`, inteiro, sem uma linha de override
   -- e nao ha aqui um seletor sequer que o mire. E' a mesma decisao que a
   tarefa F tomou no "ver mais" e a E no rodape do cartao, e ela tem preco: o
   alinhamento entre o campo e o botao sai do `align-items` do flex, nunca de
   uma altura escrita nos dois. Os dois ja' declaram `min-height` do mesmo
   token (`--uc-alvo-toque`), entao eles casam por construcao.

   ⚠️ E O ESTADO DE ERRO. O unico erro possivel nesta superficie e' enviar
   vazio, e quem o barra e' o `required` do proprio campo -- a mensagem e' a
   da plataforma, no idioma do navegador. Nao ha painel de erro desenhado aqui
   de proposito: erro de RESULTADO ("nao achei nada") e' da PAGINA de
   resultado, e la' ele e' o `uc-aviso`. Dois paineis de erro para a mesma
   pergunta seriam a copia que esta fase existe para desfazer.
   ========================================================================== */


/* --------------------------------------------------------------------------
   O FORMULARIO
   --------------------------------------------------------------------------
   `--uc-medida` e nao `--uc-maxw`: um campo de texto de 1.180px e' um campo em
   que ninguem consegue ler o que digitou de uma so' fixacao do olho. A regra
   de medida de leitura vale para o que se LE, e o que se digita aqui e' texto.
   -------------------------------------------------------------------------- */
.uc-busca{
  display:grid;
  gap:var(--sp-2);
  max-width:var(--uc-medida);
}

/* O rotulo e' VISIVEL, e isso e' escolha e nao esquecimento. No topo ele e'
   `screen-reader-text` porque a lupa ja' diz o que aquilo e' e o espaco da
   barra e' disputado; aqui a tela inteira e' sobre buscar, e um campo com
   `placeholder` no lugar de rotulo perde o nome no instante em que a pessoa
   comeca a digitar -- que e' justamente quando ela mais precisa saber o que
   esta preenchendo. */
.uc-busca__rotulo{
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  letter-spacing:var(--uc-tr-rotulo);
  color:var(--uc-ink-2);
}

/* `wrap` e' o unico mecanismo responsivo desta peca. A 320px o campo e o botao
   nao cabem lado a lado sem o campo cair abaixo do minimo utilizavel, e quebrar
   e' melhor do que espremer. Quando quebra, o campo fica sozinho na linha e o
   `flex-grow:1` dele o estica ate a borda -- nao sobra toco. */
.uc-busca__linha{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  align-items:center;
}

/* `min-width:0` e' o que permite o campo encolher dentro do flex: sem ele o
   `min-content` que o navegador calcula a partir do `size` do input estoura o
   container em 320px. Mesmo defeito que o topo ja' pagou. */
.uc-busca__campo{
  /* ⚠️ `8rem` E NAO `12rem`, e o numero saiu de uma CAPTURA: com 12rem de base
     o campo e o botao nao cabiam na mesma linha a 390px -- a linha quebrava e o
     botao "Buscar" ficava sozinho embaixo, encostado a esquerda, parecendo
     orfao. Com 8rem eles cabem (128 + 8 de vao + ~146 do botao = 282 dentro dos
     350 uteis) e o `flex-grow` devolve ao campo todo o espaco que sobra: ele
     mede ~196px a 390, nao os 128 da base.
     A 320px a conta nao fecha (282 contra 280 uteis) e a linha quebra sozinha,
     pelo `flex-wrap` -- sem media query, sem numero escolhido a mao. */
  flex:1 1 8rem;
  min-width:0;
  min-height:var(--uc-alvo-toque);
  padding-inline:var(--sp-3);
  border:var(--uc-borda) solid var(--uc-rule);
  border-radius:var(--uc-r-2);
  background:var(--uc-field);
  color:var(--uc-ink);
  font-family:var(--uc-sans);
  font-size:var(--uc-s-0);
  line-height:var(--uc-lh-controle);
}

/* `opacity:1` porque o Firefox aplica opacidade propria ao placeholder e
   derrubaria o contraste que --uc-ink-3 foi escolhido para dar. */
.uc-busca__campo::placeholder{
  color:var(--uc-ink-3);
  opacity:1;
}

.uc-busca__campo:hover{
  border-color:var(--uc-rule-forte);
}

/* ⛔ NAO HA `outline:none` AQUI, e a ausencia e' a licao de 04/09/2026: o campo
   de busca do topo compensava o `outline:none` com fundo e borda, e medido
   isso dava 2,15:1 contra o estado NAO focado -- abaixo dos 3:1 do WCAG
   2.4.11. O anel global do `01-base.css` fica; o realce de borda abaixo e'
   pista ADICIONAL, nunca substituta. */
.uc-busca__campo:focus-visible{
  border-color:var(--uc-acao);
}

/* A dica fica ABAIXO do campo e e' ligada por `aria-describedby`: acima, ela
   seria lida antes do rotulo e viraria o antetitulo que a peca nao tem. */
.uc-busca__dica{
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
  color:var(--uc-ink-2);
}


/* --------------------------------------------------------------------------
   NAO HA SECAO RESPONSIVA, E A AUSENCIA E' A DECISAO
   --------------------------------------------------------------------------
   A primeira versao tinha um `@media (max-width:400px)` que forcava o campo a
   ocupar a linha inteira. Ele saiu por duas razoes, e a segunda e' a que
   importa:

     (a) o numero 400 era escolhido a mao, e caia bem no meio do visor mais
         comum do site (390px), forcando a quebra exatamente onde ela nao
         precisava acontecer;
     (b) o `flex-wrap` ja faz isso sozinho e faz melhor: ele quebra quando NAO
         CABE, medindo o botao de verdade, em vez de adivinhar a largura em que
         o botao deixaria de caber. Media query aqui seria uma segunda fonte da
         verdade sobre a mesma pergunta.

   Quando a linha quebra, o campo ocupa a largura inteira sozinho -- e' o
   `flex-grow:1` agindo numa linha em que ele e' o unico item.
   -------------------------------------------------------------------------- */