/* ==========================================================================
   COMPONENTE: Buscador de listado
   Uso: <div class="list-search"><input type="search" placeholder="Buscar…"></div>
   Pensado para el card-header de cualquier vista "listar" — hoy es solo
   presentación (ver shared/ListSearch.js); cuando se vuelva funcional, el
   filtrado se conecta ahí sin tocar este componente visual.
   ========================================================================== */

.list-search {
  width: 100%;
  max-width: 280px;
}

.list-search input[type="search"] {
  width: 100%;
  height: 2.5rem; /* 40px, igual que .search-box del topbar */
  padding: 0 var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text-main);
  transition: border-color var(--transition-base);
}

.list-search input[type="search"]:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.list-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Pista de mínimo de caracteres — solo visible mientras el usuario escribe
   menos del mínimo (ver ListSearch.js), para no confundir "sin resultados"
   con "búsqueda todavía no válida". */
.list-search-hint {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.list-search-hint[hidden] {
  display: none;
}

/* Workspace angosto: el buscador ocupa todo el ancho del card-header
   (que ya se apiló en columna, ver cards.css) y crece al área táctil. */
@container workspace (max-width: 640px) {
  .list-search {
    max-width: none;
  }

  .list-search input[type="search"] {
    height: var(--touch-target);
  }
}