/* ==========================================================================
   TICKETU · Estilos de la página de BÚSQUEDA (Search/Index)
   Complementa a home.css (tarjetas y searchbar) y a main.css (layout/header).
   ========================================================================== */

.search-head{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding-block:clamp(28px,4vw,44px);
}
.search-head h1{
  font-family:"Bricolage Grotesque";
  font-weight:800;
  font-size:clamp(1.7rem,4vw,2.5rem);
  letter-spacing:-.02em;
  margin:8px 0 22px;
  line-height:1.05;
}

/* La searchbar reutiliza .searchbar de home.css, pero aquí va en una sola fila. */
.searchbar--page{
  position:relative;
  top:0;
  margin:0;
  grid-template-columns:1fr auto;
}
@media (max-width:640px){
  .searchbar--page{grid-template-columns:1fr}
}

.search-count{
  color:var(--muted);
  font-weight:600;
  margin-bottom:22px;
}

/* Estado vacío */
.search-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
}
.search-empty svg{color:var(--line-2);margin-bottom:14px}
.search-empty h2{
  font-family:"Bricolage Grotesque";
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.search-empty p{margin-bottom:22px}

/* Cargando */
.search-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:50px 20px;
  color:var(--muted);
  font-weight:600;
}
.search-loading[hidden]{display:none}
.spinner{
  width:20px;height:20px;
  border:2.5px solid var(--line-2);
  border-top-color:var(--orange);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Eventos pasados un poco atenuados */
.card.is-past .card-media img{filter:grayscale(.35)}