/* Busca que recolhe (01/10/2026, pedido do Rafael com um vídeo de referência:
   "na barra de pesquisa, quando recolher, deixe a lupa numa cor bem
   chamativa e quando expandir fica normal; vale para todo o projeto").
   Quem liga é o js/busca-recolhe.js: campo de busca vazio e sem foco ganha
   .br-recolhida e vira um botão redondo dourado só com a lupa. Clicou, ele
   abre com o estilo de sempre da tela e a lupa volta ao cinza normal.
   Fecha sozinho quando perde o foco vazio; com texto dentro fica aberto,
   senão o filtro aplicado ficaria escondido.

   A regra mexe no PRÓPRIO <input>, sem embrulhar em outro elemento: cada tela
   tem seu layout (flex:1, max-width, rótulo em cima), e embrulhar quebraria
   esses layouts um por um. Por isso os !important: a busca recolhida tem que
   vencer o CSS de cada tela. */
input.br-campo{
  transition: width .26s ease, min-width .26s ease, flex-basis .26s ease,
              background-color .2s ease, box-shadow .2s ease, border-radius .26s ease;
}
/* Aberta: lupa cinza dentro do campo. Só nos campos que não têm lupa própria
   (Recibo, Produção e a lista de clientes do GPD no celular já desenham a
   deles). Cinza médio de propósito: lê nos dois temas. */
input.br-campo:not(.br-lupa-propria):not(.br-recolhida){
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position: 11px 50% !important;
  background-size:16px 16px !important;
  padding-left:34px !important;
}

/* Recolhida: botão redondo dourado, lupa escura, brilho pulsando de leve. */
input.br-campo.br-recolhida{
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  flex:0 0 40px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid #F2B705 !important;
  background-color:#F2B705 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1408' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:18px 18px !important;
  color:transparent !important;
  caret-color:transparent;
  cursor:pointer;
  box-shadow: 0 0 0 4px rgba(242,183,5,.22), 0 4px 14px rgba(242,183,5,.35) !important;
  animation: br-pulso 2.4s ease-in-out infinite;
  -webkit-appearance:none;
  appearance:none;
}
input.br-campo.br-recolhida::placeholder{ color:transparent !important; }
input.br-campo.br-recolhida::-webkit-search-cancel-button{ display:none; }
input.br-campo.br-recolhida:hover{ background-color:#FFC928 !important; border-color:#FFC928 !important; }
@keyframes br-pulso{
  0%, 100%{ box-shadow: 0 0 0 4px rgba(242,183,5,.22), 0 4px 14px rgba(242,183,5,.35); }
  50%{ box-shadow: 0 0 0 7px rgba(242,183,5,.10), 0 4px 18px rgba(242,183,5,.5); }
}
@media (prefers-reduced-motion: reduce){
  input.br-campo, input.br-campo.br-recolhida{ animation:none; transition:none; }
}
/* Lupa própria da tela e o X de limpar somem com a busca recolhida: o botão
   dourado já é a lupa. */
.br-pai-recolhido > svg,
.br-pai-recolhido > .busca-x{ display:none !important; }
/* GPD no celular: a busca de clientes mora dentro de uma moldura própria
   (borda, fundo e padding). Recolhida, sobra só o botão dourado. */
.gpd-clientes-mobile-search.br-pai-recolhido{
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}