/*
  components/form.css
  Estilo base de un input de texto: borde de acero que pasa a verde
  al enfocar (misma lógica que el LED de encendido: verde =
  listo/activo). Hoy solo lo usa el buscador del catálogo
  (.catalog-toolbar__input en sections/catalog-search.css), pero
  queda como componente genérico para cuando vuelva a haber un
  formulario en el sitio.
*/

.field__control {
  background: var(--ink-900);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius-sm);
  padding: 0.75rem var(--space-4);
  color: var(--text-primary);
  font-size: var(--size-body);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field__control::placeholder {
  color: var(--text-muted);
}

.field__control:focus {
  border-color: var(--brand-green);
}

.field__control:focus-visible {
  outline: none;
}