/*
 * Estilos de /buscar (cargados solo en esa página con $this->push('styles')).
 * Tokens en tokens.css; base compartida en app.css; el resto del panel
 * interactivo (filtros, mapa, botón flotante) vive en
 * public/assets/components/search-results/search-results.css.
 */

/* — Barra de resultados (rediseño 2026-09, docs/rediseno-2026-09.md §4) — */
.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
}

.results-bar__main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.results-bar__side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Conteo en serif grande (`.section__heading`, app.css) — "en Ciudad" vive
   en un <em> hermano del <span data-bind> para no chocar con la reescritura
   reactiva de homly.js (que solo toca el texto del propio <span>, ver el
   comentario en views/buscar.php). Hereda `.section__heading em` de app.css:
   itálica en `--brand`. */
.buscar-heading {
  margin: 0;
}

.buscar-heading__chips {
  padding-block: var(--space-2) 0;
}

/* — Estado vacío (spec /buscar: "nunca una pantalla vacía") — */
.buscar-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 56ch;
  margin-inline: auto;
}

/*
 * `search-results.js` alterna `hidden` a mano (`empty.hidden = …`, ver
 * `_renderResultados`) en vez de `data-if` — este contenedor no tiene una
 * sola clave del store detrás, sino `vacio` calculado del `total` fetcheado.
 * Sin `data-if` no cubre la regla global `[data-if][hidden]{display:none
 * !important}` de app.css, y CUALQUIER regla de autor que fije `display`
 * (como el `display: grid` de arriba) le gana al `[hidden]` del user-agent
 * sea cual sea el orden — encontrado al verificar en el navegador: con 8
 * resultados, el estado vacío igual se veía arriba de la grilla. Repetir acá
 * la especificidad extra del atributo lo resuelve sin tocar app.css.
 */
.buscar-empty[hidden] {
  display: none;
}

.buscar-empty__chips {
  justify-content: center;
  padding-block: 0;
}

.buscar-empty__cta {
  margin-top: var(--space-2);
}

.buscar-empty__suggestions {
  width: 100%;
  margin-top: var(--space-7);
  text-align: left;
}

.buscar-empty__suggestions .eyebrow {
  margin-bottom: var(--space-4);
}

/* — Shimmer de carga (spec /buscar: "skeleton shimmer for cards") —
   Superpuesto sobre #buscar-grid (position:relative en su contenedor), así
   el alto lo sigue dando la grilla real y no hay salto de layout al
   aparecer/desaparecer (mismo criterio anti-CLS que el resto de la página). */
#buscar-grid-wrap {
  position: relative;
}

#buscar-grid {
  transition: opacity var(--dur) var(--ease-out);
}

#buscar-grid.is-loading {
  opacity: 0.35;
  pointer-events: none;
}

.buscar-skeleton {
  position: absolute;
  inset: 0;
}

.skeleton-card {
  display: grid;
  gap: var(--space-2);
}

.skeleton-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.skeleton-card__line {
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.skeleton-card__line--title {
  width: 80%;
  margin-top: var(--space-1);
}

.skeleton-card__line--meta {
  width: 55%;
}

.skeleton-card__line--price {
  width: 40%;
  margin-top: var(--space-1);
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton-card__media,
  .skeleton-card__line {
    background: linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes skeleton-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

/* `.section` (app.css) trae 72px de aire arriba pensado para la home; aquí la
   lista tiene que arrancar pegada al header. */
search-results.section {
  padding-top: var(--space-4);
}

@media (max-width: 640px) {
  search-results.section {
    padding-top: var(--space-2);
  }
}