Merge fix/adr0008-buscador-outline-a11y-redondeado into main

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.

workloads/ecommerce/components/search/predictive-search.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Search, X } from "lucide-react";
 import { FormEvent, useEffect, useState } from "react";
-import { Input } from "@/components/ui/input";
 import type { Product } from "@/lib/headless/types";
 
 export function PredictiveSearch() {
@@ -55,7 +54,26 @@ export function PredictiveSearch() {
   return (
     <form onSubmit={submit} className="relative w-full">
       <div className="flex items-center rounded-full border-2 border-slate-200 bg-white pl-5 pr-1.5 shadow-sm transition focus-within:border-ari-marino focus-within:ring-4 focus-within:ring-ari-coral-claro/30">
-        <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[48px] border-0 bg-transparent p-0 shadow-none focus-visible:ring-0" />
+        {/* input propio (no el <Input> compartido) -- ese componente trae su
+            propio focus:ring-4 focus:ring-cyan-300/30 hardcodeado que no se
+            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.
+
+            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 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">
           <Search className="size-4.5" />

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.189
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.192
           env:
             - name: HEADLESS_PROVIDER
               value: medusa