From 23700c5b1de9a7318648220e94a08009b3bb3d89 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Fri, 28 Aug 2026 06:09:06 +0000
Subject: [PATCH] fix(ecommerce): buscador usa un solo indicador de foco (no
 dos)

El outline de accesibilidad global (input:focus-visible, azul de
marca, globals.css) y el indicador de foco propio del wrapper
(focus-within:border-ari-marino + ring amarillo) se mostraban ambos a
la vez -- redondear el outline (commit anterior) evito el rectangulo
recto pero seguia leyendose como dos bordes anidados, reportado en
produccion (v1.0.193).

focus-visible:outline-none en el input iguala la especificidad de la
regla global (mismo patron que ya usa buttonVariants en button.tsx) y
deja el indicador de foco del wrapper como el unico visible -- no se
pierde accesibilidad, se elimina la duplicacion.
---
 .../components/search/predictive-search.tsx     | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/workloads/ecommerce/components/search/predictive-search.tsx b/workloads/ecommerce/components/search/predictive-search.tsx
index a425d5a..5ff00db 100644
--- a/workloads/ecommerce/components/search/predictive-search.tsx
+++ b/workloads/ecommerce/components/search/predictive-search.tsx
@@ -61,18 +61,21 @@ export function PredictiveSearch() {
             segundo ring visible al hacer foco. Mas simple y robusto no
             heredar clases de foco que hay que pelear despues.
 
-            Sin outline-none: globals.css define un outline de
-            accesibilidad global para foco por teclado
+            focus-visible:outline-none (no outline-none a secas): globals.css
+            define un outline de accesibilidad global 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. */}
+            especificidad a un outline-none plano. El wrapper de este
+            componente ya tiene su propio indicador de foco visible
+            (focus-within:border-ari-marino + ring amarillo, mismo patron
+            que button.tsx) que cumple el mismo proposito de accesibilidad
+            sin duplicarlo -- variante focus-visible: en vez de la base
+            iguala la especificidad de la regla global (mismo truco que ya
+            usa button.tsx) y evita el doble indicador de foco. */}
         <input
           value={query}
           onChange={(event) => setQuery(event.target.value)}
           placeholder="Busca juguetes, mochilas, personajes…"
-          className="h-[48px] w-full rounded-full border-0 bg-transparent p-0 text-sm text-slate-950"
+          className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 focus-visible:outline-none"
         />
         {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">