/* ══════════════════════════════════════════════════════════════════
   COP · LA BARRA DE BÚSQUEDA  (23/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«quiero que las barras de búsqueda de todas las páginas sea
   un solo componente con un diseño más moderno. tené en cuenta que no
   usamos muchos recuadros, generalmente es contenido separado por
   líneas aplicado sobre el fondo, así que el diseño de la barra debería
   ser así también»*.

   ⚠⚠ REEMPLAZA A SEIS BARRAS: `.am-buscar` (Amigos), `.ex-buscar`
   (Explorar), `.gp-buscar` (Grupo), `.gr-buscar` (Equipos y Grupos),
   `.inv-search` (Inventario, Promo y Torneo) y `.ch-search` (el desafío
   de Modos). Cada una tenía su caja, su radio, su color de fondo y su
   tamaño de letra. Las reglas viejas se BORRARON de cada página: migrar
   es dos pasos, y el segundo es el que se olvida.

   ══ LA FORMA ═══════════════════════════════════════════════════════
   · SIN CAJA: ni fondo, ni borde arriba o a los costados, ni radio. Una
     LÍNEA abajo, la misma de las filas de la app, apoyada sobre el fondo
     de la página (regla 1 del sistema).
   · Al escribir, la línea se enciende con el acento de la competencia
     —crece desde el centro— y la lupa toma ese color. Es el único
     movimiento, y dice «estás acá» sin dibujar una caja.
   · La lupa a la izquierda, siempre. La ✕ a la derecha, sólo con texto.
   · ⚠ LETRA DE 16 px Y NO MENOS: con menos, Safari del iPhone hace zoom
     al tocar el campo y la pantalla entera salta.
   · 44 px de alto: el mínimo cómodo para el dedo, el mismo del botón.

   ══ CÓMO SE USA ═══════════════════════════════════════════════════
     <div class="cop-buscar">
       <svg class="cop-buscar-lupa" …/>          ← la lupa, primero
       <input type="search" placeholder="Buscar…">
       <button class="cop-buscar-x" type="button" data-cop-limpiar
               aria-label="Borrar la búsqueda"><svg …/></button>
     </div>
   `data-cop-limpiar` hace que la ✕ la maneje `cop-buscador.js`: vacía
   el campo y AVISA a la pantalla con un evento `input`, así la lista se
   des-filtra sola. Si la pantalla ya maneja su ✕ (Explorar), va sin el
   atributo. `.cop-buscar-x--fija` la deja siempre visible, para cuando
   la ✕ CIERRA la búsqueda en vez de borrarla (Grupo).
   ══════════════════════════════════════════════════════════════════ */
.cop-buscar{
  --cb-rgb: var(--cop-acento-rgb, 12,149,235);
  position:relative;
  box-sizing:border-box;
  display:flex; align-items:center; gap:var(--gap-md, .7rem);
  width:100%; min-height:44px;
  margin:0 0 var(--gap-lg, 1rem);
  padding:0 .1rem;
  background:none;
  border:0; border-bottom:1px solid var(--cop-pt-linea, rgba(255,255,255,.12));
  border-radius:0;
}
/* ⚠ SU PROPIO `[hidden]`: declara `display`, así que sin esto el atributo
   deja de esconderla (Grupo la esconde así). Van catorce apariciones de
   este bug en CP. */
.cop-buscar[hidden]{ display:none }

/* la línea encendida, que crece desde el centro al escribir */
.cop-buscar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,
    rgba(var(--cb-rgb), 0) 0%, rgba(var(--cb-rgb), 1) 50%, rgba(var(--cb-rgb), 0) 100%);
  transform:scaleX(0); transform-origin:center;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.cop-buscar:focus-within::after{ transform:scaleX(1) }

.cop-buscar > svg:first-child{
  width:18px; height:18px; flex:0 0 auto;
  color:var(--text-dim, #9aa3b5);
  transition:color 160ms;
}
.cop-buscar:focus-within > svg:first-child{ color:rgb(var(--cb-rgb)) }

.cop-buscar input{
  flex:1 1 auto; min-width:0;
  height:44px; box-sizing:border-box;
  margin:0; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none; outline:none;
  -webkit-appearance:none; appearance:none;
  font-family:'Inter', system-ui, sans-serif;
  font-size:var(--fs-base, 1rem);               /* ⚠ no bajar: zoom del iPhone */
  font-weight:500;
  color:var(--text, #f4f6fb);
}
.cop-buscar input::placeholder{ color:var(--text-faint, #5a6275); opacity:1 }
/* la ✕ propia del navegador se va: hay una sola, la nuestra */
.cop-buscar input::-webkit-search-cancel-button,
.cop-buscar input::-webkit-search-decoration{ -webkit-appearance:none; display:none }

.cop-buscar-x{
  flex:0 0 auto;
  width:32px; height:32px; margin-right:-.3rem;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%; padding:0;
  color:var(--text-dim, #9aa3b5);
  cursor:pointer;
}
.cop-buscar-x svg{ width:16px; height:16px; display:block }
/* ⚠ SÓLO CON TEXTO: con el campo vacío no hay nada que borrar. Se usa
   `visibility` y no `display` para que el campo no cambie de ancho al
   aparecer la ✕. */
.cop-buscar input:placeholder-shown ~ .cop-buscar-x:not(.cop-buscar-x--fija){ visibility:hidden }
.cop-buscar-x:focus{ outline:none }
.cop-buscar-x:focus-visible{ box-shadow:0 0 0 2px rgba(var(--cb-rgb), .6) }
@media (hover:hover) and (pointer:fine){
  .cop-buscar-x:hover{ color:var(--text, #f4f6fb) }
}