From 75dedc4e674732258fb18ddf2c8e422d059303d0 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Fri, 28 Aug 2026 05:53:15 +0000
Subject: [PATCH] fix(ecommerce): outline de accesibilidad del buscador sigue
 el pill

globals.css define input:focus-visible { outline: 3px solid
rgb(0 85 184 / .5); ... } como indicador de foco por teclado global,
intencional (no se toca). Le gana en especificidad CSS a la utilidad
outline-none de Tailwind, asi que seguia mostrandose sobre el input
propio del buscador (commit anterior) -- pero como ese input no tenia
border-radius, se veia como un rectangulo de esquinas rectas
superpuesto al pill redondeado, reportado en produccion (v1.0.192).

Agrega rounded-full al input para que el mismo outline (que se debe
conservar) siga el contorno del pill en vez de cortarlo.
---
 .../components/search/predictive-search.tsx          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/workloads/ecommerce/components/search/predictive-search.tsx b/workloads/ecommerce/components/search/predictive-search.tsx
index d393d0f..a425d5a 100644
--- a/workloads/ecommerce/components/search/predictive-search.tsx
+++ b/workloads/ecommerce/components/search/predictive-search.tsx
@@ -59,12 +59,20 @@ export function PredictiveSearch() {
             anulaba de forma confiable via tailwind-merge dentro de este
             contenedor compuesto (input + boton circular), causando un
             segundo ring visible al hacer foco. Mas simple y robusto no
-            heredar clases de foco que hay que pelear despues. */}
+            heredar clases de foco que hay que pelear despues.
+
+            Sin outline-none: globals.css define un outline de
+            accesibilidad global para foco por teclado
+            (input:focus-visible, azul de marca) que le gana en
+            especificidad a la utilidad outline-none de Tailwind -- no
+            se debe quitar, es intencional. Se le agrega rounded-full
+            aqui para que ese outline seguido el contorno del pill en
+            vez de dibujarse como rectangulo recto. */}
         <input
           value={query}
           onChange={(event) => setQuery(event.target.value)}
           placeholder="Busca juguetes, mochilas, personajes…"
-          className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 outline-none"
+          className="h-[48px] w-full rounded-full border-0 bg-transparent p-0 text-sm text-slate-950"
         />
         {query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
         <button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">