/* ==========================================================
   ACÁ — Página Buscar / Categorías
   ========================================================== */

.buscar-form { margin: 16px 0 14px; box-shadow: var(--sombra-1); }
@media (min-width: 768px) { .buscar-form { margin: 24px 0 18px; max-width: 640px; } }

/* Chips de categorías (scroll horizontal) */
.chips-cat {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 6px; margin: 0 calc(-1 * var(--pad-x));
  padding-left: var(--pad-x); padding-right: var(--pad-x);
}
.chips-cat::-webkit-scrollbar { display: none; }
.chip-cat {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--blanco); border: 1.5px solid var(--gris-200);
  font-size: var(--fs-sm); font-weight: 500; color: var(--gris-700);
  white-space: nowrap; transition: all .15s ease;
}
.chip-cat .ico { font-size: 15px; }
.chip-cat:hover { border-color: var(--azul); color: var(--azul); }
.chip-cat.activo { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

/* Encabezado: título + controles */
.buscar-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 18px 0 14px;
}
.buscar-head h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; }
@media (min-width: 768px) { .buscar-head h1 { font-size: var(--fs-2xl); } }
.contador { color: var(--gris-500); font-size: var(--fs-sm); margin-top: 2px; }

.buscar-controles { display: flex; align-items: center; gap: 8px; }
.chip-toggle {
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--blanco); border: 1.5px solid var(--gris-200);
  font-size: var(--fs-sm); font-weight: 600; color: var(--gris-700);
  white-space: nowrap; transition: all .15s ease;
}
.chip-toggle:hover { border-color: var(--naranja); }
.chip-toggle.activo { background: var(--naranja-suave); border-color: var(--naranja); color: var(--naranja-oscuro); }

.orden-wrap { position: relative; display: inline-flex; }
.orden-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 34px 8px 14px; border-radius: var(--r-full);
  background: var(--blanco); border: 1.5px solid var(--gris-200);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--gris-700);
  cursor: pointer;
}
.orden-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--gris-500); border-bottom: 2px solid var(--gris-500);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.orden-wrap select:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }

/* Grilla de resultados: 2 columnas en celular, más en desktop */
.grid-resultados {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (min-width: 560px)  { .grid-resultados { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px)  { .grid-resultados { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .grid-resultados { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

/* Estado vacío */
.vacio { text-align: center; padding: 48px 20px 60px; }
.vacio-ico { font-size: 48px; display: block; margin-bottom: 12px; }
.vacio h2 { font-size: var(--fs-lg); margin-bottom: 6px; }
.vacio p { color: var(--gris-500); margin-bottom: 20px; }
.chip-cat .ico svg { width: 16px; height: 16px; vertical-align: -3px; }