/* =========================================================================
   Busca por campo - tela nova (/search).

   So o que e DESTA tela: o topo que gruda e os ajustes de quem vem
   emprestado. O campo de busca e a barra da home (barra-busca.css) e os
   cartoes de resultado sao os do Catalogo Inteligente
   (catalogo-inteligente.css) - a mesma informacao, e duas folhas para o
   mesmo componente divergem na primeira correcao que alguem fizer em uma
   so.
   ========================================================================= */

.bu {
  max-width: 1180px; margin: 2.5rem auto 4rem;
  /* Camada propria: o .header-admin tem z-index altissimo e, sem isto, a
     primeira linha da tela e pintada por baixo dele. */
  position: relative; z-index: 1;
  font-family: 'Outfit', 'Signika', Arial, sans-serif;
  color: #191C1D; text-align: left;
}
.bu *, .bu *:before, .bu *:after { box-sizing: border-box; }

/* Declarada aqui tambem, e nao so no barra-busca.css: rotulo de leitor de
   tela que vira texto visivel por falta de uma folha vizinha e um defeito
   caro para o que custa repetir tres linhas. */
.bu .visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bu p, .bu h1, .bu h2, .bu h3, .bu h4 { margin: 0; padding: 0; color: inherit; }

/* ------------------------------------------------------< resultados */

.bu__barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.bu__barra[hidden] { display: none; }
.bu__barra .ci__total { margin: 0; }

/* O corpo da tela carrega a classe .ci, para herdar os botoes e os cartoes
   do Catalogo Inteligente. O que se desarma aqui e so o LAYOUT DE TELA
   daquela classe - grade de duas colunas, altura de viewport, moldura
   propria -, que ali serve ao chat e aqui atrapalharia. As regras dos
   cartoes continuam valendo inteiras. */
.bu .ci, .bu.ci {
  display: block; height: auto; min-height: 0;
  max-width: none; margin: 0; gap: 0;
}
/* Depois da regra acima, e com a mesma forca: ".bu .ci" zera a margem da
   classe emprestada, e o respiro entre o campo e o resultado e desta tela. */
.bu .bu__corpo { margin-top: 20px; }

/* O cartao de resultado e o painel de obra vem de catalogo-inteligente.css;
   aqui so o que precisa mudar por estarem fora daquela tela. */
.bu .ci__lista-cartao, .bu .ci__visao {
  background: #FFFFFF; border: 1px solid #E2E8EF; border-radius: 14px; overflow: hidden;
}
/* Na conversa o turno ja da respiro entre os cartoes de obra; aqui eles
   ficam soltos no fundo e precisam do proprio. */
.bu .ci__obra-cartao { margin-bottom: 16px; }
.bu .ci__obra-cartao:last-child { margin-bottom: 0; }
.bu .ci__visao { padding: 16px; }
.bu .ci__visao-nota { padding: 20px; font-size: 15px; color: #667A88; }

/* A ficha mora fora do .bu e por isso nao pega o ".bu .ci" acima: a
   classe emprestada precisa ser desarmada de novo aqui, senao a grade de
   tela cheia dela empurra a ficha para dentro de uma coluna. */
.bu__ficha-raiz {
  display: block; height: auto; min-height: 0; max-width: none; margin: 0; gap: 0;
}

@media (max-width: 760px) {
  .bu { margin: 1rem auto 3rem; }
}