/* Buscar (ui/js/buscar.mjs): el campo arriba y, debajo, Descubrir (descubrir.css) o lo buscado
   (el género, la gente y los títulos, con las piezas de Descubrir). Con los tokens de estilo.css. */

/* ---------------------------------------------------------------- la navegación */
/* Buscar es una sola entrada: en el dock, su pestaña; en el móvil, la pieza del acento de en medio
   de la barra (.boton-anadir, estilo.css), así que ahí la pestaña sobra. Temporada cuenta como
   Buscar. Sin cuenta (la vista previa), la barra no tiene la pieza: va la pestaña. */
@media (max-width: 899px) { body.dentro #barra .pestana-descubrir { display: none; } }

/* ---------------------------------------------------------------- el campo y los tipos */
.buscar-campo { margin-top: var(--esp-2); cursor: text; }
.buscar-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-4); }
.buscar-filtros .chips { flex: 1 1 100%; margin-bottom: 0; }
.buscar-filtros .chip { flex: none; }
.buscar-descubrir { margin-top: var(--esp-4); }

/* ---------------------------------------------------------------- lo buscado */
.buscar-resultados { display: grid; gap: var(--esp-8); margin-top: var(--esp-5); padding-bottom: var(--esp-8); }
.buscar-seccion { display: grid; gap: var(--esp-3); min-width: 0; }
.buscar-seccion:empty { display: none; }
.buscar-cab { display: grid; gap: 2px; }
.buscar-titulo { font-size: var(--tam-xl); letter-spacing: -0.02em; line-height: 1.2; }
.buscar-detalle { margin: 0; font-size: var(--tam-s); }
.buscar-seccion .descubrir-rejilla { margin-top: 0; }
.buscar-titulos { transition: opacity var(--medio); }
.buscar-titulos.buscando { opacity: 0.6; }

/* Un género en «Todo»: una fila por tipo, con su nombre algo más pequeño que el del género. */
.buscar-genero .descubrir-fila { margin-top: var(--esp-2); }
.buscar-genero .descubrir-fila-titulo h3 { font-size: var(--tam-l); letter-spacing: -0.015em; line-height: 1.2; }

/* La gente: en columnas, cada cual en su tarjeta (la de Para ti y la de la vista previa). */
.buscar-gente-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--esp-2); }
.buscar-gente-lista > * { margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-tarjeta); background: var(--superficie); }

.buscar-tal-cual { margin: 0; }
.buscar-titulos .vacio-filtro { padding: var(--esp-6) 0; }