/**
 * 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.
 */

.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;
}

.buscar-heading {
  margin: 0;
}

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

.buscar-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 56ch;
  margin-inline: auto;
}

.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);
}

#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;
  }
}

search-results.section {
  padding-top: var(--space-4);
}

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