/* ════════════════════════════════════════════════════════════════════
   COP · FILTROS — el botón y su panel  (30/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«en la misma línea del título “Grupos sugeridos” y “Equipos
   sugeridos” tenés que agregar un botón que diga “Filtros”; eso va a
   abrir un menú de filtros por país, puntos necesarios, lugares
   disponibles, cantidad de puntos totales del equipo en la competencia
   y cantidad de puntos totales de los jugadores del equipo en sus
   perfiles individuales»*.

   ⚠⚠ ES UN COMPONENTE Y NO DOS PANELES. El pedido nombra las dos
   pantallas en la misma frase, así que nacen iguales; escritos por
   separado, dejan de serlo en el primer ajuste. Y el proyecto ya tenía
   TRES desplegables de filtro distintos —el de inventario, el de
   resultados en vivo y el riel de chips— que hacen casi lo mismo con
   tres CSS. Éste no los borra hoy, pero es el que tienen que usar los
   próximos.

   ⚠ EL RIEL DE CHIPS DE `cop-ui-tabs.css` SE REUSA, NO SE COPIA: el
   botón de cada filtro es un `.cop-chip`, que es lo que ese archivo
   dice que hay que usar «cuando filtrás una lista que ya está en
   pantalla». Acá sólo vive lo que ese componente no tiene: el panel.
   ════════════════════════════════════════════════════════════════════ */

/* ── LA FILA DEL TÍTULO ───────────────────────────────────────────────
   ⚠⚠ VIVE ACÁ Y NO EN CADA PANTALLA. Franco pidió el botón *«en la
   misma línea del título»* en las dos vidrieras a la vez; escrita en
   cada `<style>` inline, esa fila nace duplicada — que es justo el
   defecto que esta tanda vino a arreglar en la tarjeta.
   ⚠ El `margin-bottom` lo lleva LA FILA y se le saca al título: dejado
   en el `<h2>`, el botón queda 11 px más arriba que la base del título
   y se lee torcido. */
.cf-fila{display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-md, .7rem);margin-bottom:.7rem}
.cf-fila > h2{margin-bottom:0}

/* el botón que abre, en la línea del título */
/* ⚠⚠ LA TRAMPA DE `hidden`, SEXTA APARICIÓN EN ESTE PROYECTO
   (encontrada el 31/08/2026, armando los filtros de Rankings). El JS
   esconde el botón con `boton.hidden = true` cuando ningún campo tiene
   de dónde filtrar —la decisión más importante de este componente— y
   ESO NO ESCONDÍA NADA: la regla del navegador es `[hidden]{display:
   none}` con especificidad 0-1-0, la misma que `.cf-btn`, y en un
   empate gana la que se declara después. Como esta hoja carga después,
   ganaba `inline-flex`.
   ⚠ NO SE VEÍA EN GRUPOS NI EN EQUIPOS: allá siempre hay al menos un
   campo con datos, así que el botón nunca se escondía y la rama no
   corría nunca. Apareció en Rankings, donde hoy los tres campos están
   vacíos — o sea, justo el caso para el que se escribió esa línea. */
.cf-btn[hidden]{display:none}
.cf-btn{
  display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-sm, .8rem);
  padding:var(--gap-xs, .3rem) .7rem;line-height:1;
  color:#fff;cursor:pointer;
  /* ⚠⚠ EL FONDO SE DECLARA, NO SE HEREDA (Franco, 31/08/2026: *«el fondo
     del botón de filtros tiene que ser del color del fondo de la página,
     no ese azul claro medio gris»*).
     En Grupos el botón lleva `cop-borde`, y de ahí sacaba un relleno que
     ya era `--bg`. Pero en `ranking.html` NO lo lleva y esa página ni
     siquiera carga `cop-borde.css`: ahí el `<button>` caía al fondo por
     defecto del navegador —el gris azulado del sistema—, que es
     exactamente «ese azul claro medio gris». Depender de que otra hoja
     esté cargada para tener fondo es la clase de acuerdo que se rompe
     sin que nadie lo note.
     ⚠ `--borde-fondo` ADEMÁS del `background`: es la variable que lee la
     capa `padding-box` de `cop-borde`, así que las dos formas del botón
     —con degradé y sin él— quedan del mismo color. */
  background:var(--bg, #0b0e14);
  --borde-fondo:var(--bg, #0b0e14);
  --borde-rgb:var(--gr-rgb, 157,43,255);
  /* ⚠⚠ ERA UNA PÍLDORA DE 999px Y SE VEÍA CASI REDONDO (Franco,
     05/09/2026): *«los botones de filtros que son chicos siguen teniendo
     la misma curvatura de antes que los hacía casi redondos»*.
     Ahora sigue la MISMA regla que el botón y el chip: el radio sale de
     la altura, no es un número propio. 36 de alto → 11.5 de radio. */
  --b-alto:36px;
  --borde-radio:calc(var(--b-alto) * 14 / 44);
  --borde-grosor:1.5px;
  min-height:var(--b-alto);
}
/* ⚠ EL CONTADOR SÓLO APARECE CON FILTROS PUESTOS. Un «(0)» permanente
   enseña a ignorar el número justo cuando empieza a importar. */
.cf-btn .cf-n{
  display:none;place-items:center;
  min-width:1.05rem;height:1.05rem;padding:0 .2rem;
  border-radius:999px;background:rgb(var(--gr-rgb, 157,43,255));
  color:#fff;font-size:var(--fs-xs, .72rem);font-weight:800;
}
.cf-btn.con-filtros .cf-n{display:grid}
.cf-btn .cf-chev{
  width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s;
}
.cf-btn[aria-expanded="true"] .cf-chev{transform:rotate(-135deg) translate(-1px,-1px)}

/* ── EL PANEL ─────────────────────────────────────────────────────────
   ⚠⚠ ES UNA CAPA A PANTALLA COMPLETA Y NO UN DESPLEGABLE PEGADO AL
   BOTÓN. Los filtros son cinco y dos son rangos: un menú anclado al
   botón, en un teléfono de 390, o se sale por la derecha o queda de
   140 px de ancho. La capa además resuelve gratis el toque afuera para
   cerrar, que los tres desplegables viejos del proyecto resuelven cada
   uno a su manera. */
.cf-capa{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.62);
  display:none;align-items:flex-end;justify-content:center;
}
.cf-capa.abierto{display:flex}
.cf-panel{
  width:100%;max-width:520px;max-height:82vh;overflow-y:auto;
  /* ⚠ EL PANEL TAMBIÉN. Era `--card` (var(--card, #11141d)), que al lado del fondo de
     la página (var(--s0, #0b0e14)) se lee como un azul grisáceo — el mismo que
     marcó Franco. La hoja oscura sobre la que se apoya ya lo despega del
     resto; no hace falta además un color distinto. */
  background:var(--bg, #0b0e14);
  border-top-left-radius:var(--r-card, 14px);border-top-right-radius:var(--r-card, 14px);
  padding:1rem var(--gap-xl, 1.2rem) 1.2rem;
  font-family:'Inter',sans-serif;
}
@media(min-width:560px){
  .cf-capa{align-items:center}
  .cf-panel{border-radius:var(--r-card, 14px);max-height:76vh}
}
.cf-head{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md, .7rem);margin-bottom:var(--gap-lg, 1rem)}
.cf-tit{font-weight:800;font-size:var(--fs-base, 1rem);color:#fff;margin:0}
.cf-limpiar{
  background:none;border:none;padding:.2rem 0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:var(--fs-sm, .8rem);color:var(--text-dim,#8b93a7);
}
.cf-limpiar:disabled{opacity:.4;cursor:default}

.cf-campo{margin-bottom:var(--gap-lg, 1rem)}
.cf-campo:last-of-type{margin-bottom:var(--gap-sm, .5rem)}
.cf-lbl{
  display:block;font-weight:700;font-size:var(--fs-sm, .8rem);letter-spacing:.4px;
  text-transform:uppercase;color:var(--text-dim,#8b93a7);margin-bottom:.5rem;
}
/* las opciones de una lista: el riel de chips del sistema */
.cf-ops{display:flex;flex-wrap:wrap;gap:var(--gap-sm, .5rem)}

/* ── LOS RANGOS ───────────────────────────────────────────────────────
   ⚠ SON DOS CASILLAS Y NO UN DESLIZADOR. Un deslizador necesita saber
   el mínimo y el máximo posibles, y acá los extremos los pone el dato
   que llegó: con tres grupos en pantalla, el deslizador miente sobre
   cuánto hay. Dos casillas dicen exactamente lo que el jugador quiso. */
.cf-rango{display:flex;align-items:center;gap:.5rem}
.cf-rango input{
  flex:1 1 0;min-width:0;width:100%;
  background:var(--card-2,#0f131b);border:1px solid var(--card-border,#232a36);
  border-radius:var(--r-card, 14px);padding:.5rem var(--gap-md, .7rem);
  font-family:inherit;font-size:var(--fs-md, .88rem);color:#fff;
  font-variant-numeric:tabular-nums;
}
.cf-rango input:focus{outline:none;border-color:rgb(var(--gr-rgb, 157,43,255))}
.cf-rango span{font-size:var(--fs-sm, .8rem);color:var(--text-dim,#8b93a7);flex:0 0 auto}

.cf-pie{display:flex;gap:var(--gap-md, .7rem);margin-top:1rem}
.cf-aplicar{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:var(--gap-md, .7rem) var(--gap-md, .7rem);font-family:inherit;font-weight:800;font-size:var(--fs-md, .88rem);
  color:#fff;cursor:pointer;
  --borde-rgb:var(--gr-rgb, 157,43,255);
  --borde-radio:14px; --borde-grosor:1.5px;
}
/* ⚠ EL RESULTADO SE DICE ANTES DE APLICAR: «12 de 40» arriba del botón
   evita el viaje de aplicar, mirar, volver a abrir y corregir. */
.cf-cuenta{
  margin-top:.7rem;text-align:center;
  font-size:var(--fs-sm, .8rem);font-weight:600;color:var(--text-dim,#8b93a7);
}
.cf-cuenta b{color:#fff;font-weight:800}
.cf-cuenta.vacio{color:#ff8b8b}

/* ════════════════════════════════════════════════════════════════════
   LO QUE SE AGREGÓ EL 28/09/2026 (Rankings, tanda H) — TODO OPT-IN
   ────────────────────────────────────────────────────────────────────
   Franco: *«agregues un filtro igual nuevo a su derecha que sirva para
   filtrar por país, provincia y otras cosas más que sean más
   completas»*. Nada de esto se dibuja si la pantalla no lo pide: las
   clases nuevas sólo las pone `montar()` con las opciones nuevas.
   ════════════════════════════════════════════════════════════════════ */

/* ── el chip con ícono: bandera, camiseta o escudo a la izquierda ──── */
.cf-op-ico{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:20px;height:20px}
.cf-op-ico img{width:100%;height:100%;object-fit:contain;display:block}
/* ⚠ LA BANDERA VA REDONDA: rectangular, al lado de un texto de 13 px, se
   lee como una imagen rota; el círculo es la forma de «país» en las apps
   de juego y ocupa el mismo cuadrado que la camiseta y el escudo. */
.cf-op-ico--bandera img{border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.cf-op-ico svg{width:100%;height:100%;display:block}
.cf-op-txt{white-space:nowrap}

/* ── las opciones en columnas iguales (división 1 a 10) ──────────────
   ⚠ `width:auto;margin:0` y sin padding: el riel de `.cop-chips` va a
   sangre (100vw) en el teléfono, y adentro del panel eso lo sacaba de la
   hoja. */
.cf-ops.cf-ops--grilla{
  display:grid;grid-template-columns:repeat(var(--cf-cols, 5), minmax(0, 1fr));
  gap:var(--gap-sm, .5rem);width:auto;margin:0;padding:0;overflow:visible;
}
.cf-ops--grilla .cop-chip{padding:0 .3rem;gap:.3rem;min-width:0;width:100%}
/* ⚠ COLUMNAS QUE ENTRAN SOLAS (país, provincia, club): veinticuatro
   provincias sueltas dejan un borde derecho serrucho; en columnas iguales
   la hoja se lee como una grilla ordenada. Un nombre largo («Santiago del
   Estero») baja a dos renglones en vez de cortarse con «…». */
.cf-ops.cf-ops--auto{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
  gap:var(--gap-sm, .5rem);width:auto;margin:0;padding:0;overflow:visible;
}
.cf-ops--auto .cop-chip{width:100%;min-width:0;justify-content:flex-start;padding:.45rem .7rem;
  white-space:normal;text-align:left;line-height:1.15}

/* ── el interruptor adentro del panel ─────────────────────────────── */
/* ⚠ `.cf-panel .cf-sw` (0-2-0): `cop-ui-interruptor.css` carga DESPUÉS en
   Rankings y su `padding:0 .7rem` corría el ícono 11 px adentro */
.cf-panel .cf-sw{width:100%;justify-content:flex-start;height:44px;padding:0;
  --sw-color:rgb(var(--gr-rgb, 12,149,235));
  font-size:var(--fs-md, .88rem);font-weight:700;color:var(--text, #f4f6fb)}
.cf-sw .cop-sw-txt{flex:1 1 auto;text-align:left}
.cf-sw:disabled{cursor:default}

/* ── lo apagado se apaga, no se esconde (regla 9 del sistema) ─────── */
.cf-apagado .cop-chip,.cf-apagado .cf-sw{opacity:.4;pointer-events:none}
.cf-nota{margin:-.2rem 0 .5rem;font-size:var(--fs-xs, .72rem);line-height:1.4;
  color:var(--text-dim,#8b93a7)}
.cf-pie-nota{margin:.2rem 0 0;font-size:var(--fs-xs, .72rem);line-height:1.45;
  color:var(--text-dim,#8b93a7);text-align:center}

/* ── la variante completa: secciones con aire y el botón fijo abajo ──
   ⚠ EL BOTÓN DE APLICAR QUEDA SIEMPRE A LA VISTA: con un país elegido
   aparecen veinticuatro provincias y el panel scrollea; un «Ver 12
   jugadores» que hay que ir a buscar abajo de todo es el paso que el
   jugador no da. */
/* ⚠ el aire lateral es el de la app en el teléfono (16 px), no el 1.2rem
   del panel de siempre; y el riel de chips NO va a sangre acá adentro:
   `.cop-chips` se estira a 100vw en el teléfono y corría los chips 3 px
   a la izquierda del rótulo de su sección */
.cf-panel--completa{padding:1rem var(--aire-contenido, 16px) 0;display:flex;flex-direction:column}
.cf-panel--completa .cf-ops{width:auto;margin:0;padding:0;overflow:visible;touch-action:auto}
.cf-panel--completa .cf-head{margin-bottom:var(--gap-md, .7rem)}
.cf-panel--completa .cf-campo{padding-bottom:var(--gap-lg, 1rem);margin-bottom:var(--gap-lg, 1rem);
  border-bottom:1px solid var(--card-border, #1e2330)}
.cf-panel--completa .cf-campo:last-of-type{border-bottom:0;margin-bottom:0}
.cf-panel--completa .cf-pie{
  position:sticky;bottom:0;margin-top:var(--gap-sm, .5rem);
  padding:var(--gap-md, .7rem) 0 calc(var(--gap-lg, 1rem) + env(safe-area-inset-bottom, 0px));
  background:var(--bg, #0b0e14);
  /* un fundido corto arriba: lo que pasa por debajo se esconde, no se corta */
  box-shadow:0 -14px 14px -2px var(--bg, #0b0e14);
}
.cf-panel--completa .cf-aplicar{min-height:48px;font-size:var(--fs-base, 1rem)}
.cf-aplicar b{font-weight:800}
.cf-aplicar[aria-busy="true"]{color:var(--text-dim,#8b93a7)}
/* la hoja entra desde abajo; sin movimiento si el jugador lo pidió */
@keyframes cf-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cf-capa.abierto .cf-panel--completa{animation:cf-sube 220ms cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: reduce){
  .cf-capa.abierto .cf-panel--completa{animation:none}
}
/* el escudo de división (`COPRangos.simbolo`) es un hexágono vertical que
   se mide por el alto: acá ocupa el alto del cuadrado del ícono */
.cf-op-ico .cop-div{--cop-div:20px}
/* chip de sólo ícono (división): el escudo más grande, centrado */
.cf-ops--grilla .cop-chip .cf-op-ico{width:auto;height:26px}
.cf-ops--grilla .cop-chip .cop-div{--cop-div:26px}