/* ══════════════════════════════════════════════════════════════════
   COP · EL BOTÓN QUE ABRE UN MENÚ DE FILTRO, Y SU MENÚ  (24/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«en la página de rankings agregá un botón de filtros igual
   que el de competencias de la página de resultados, pero que muestre
   las distintas competencias del juego que tienen rankings»*.
   ⚠⚠ «IGUAL» QUIERE DECIR EL MISMO ARCHIVO. Estas reglas vivían en el
   `<style>` de `resultados-en-vivo.html` (con la historia de por qué el
   botón va sin marco, que se mudó entera) y se BORRARON de ahí: las dos
   pantallas enlazan esta hoja. Los nombres (`.re-filter`, `.re-menu`,
   `.re-menu-item`) se conservan porque el JS de Resultados los busca.
   ⚠ LO QUE SIGUE SIENDO DE CADA PANTALLA es dónde va el menú (`#reCompMenu`
   centrado, `#reOrderMenu` a la derecha, `#rkCompMenu` a la izquierda) y
   el alto de su fila (`--re-alto`).
   ══════════════════════════════════════════════════════════════════ */
.re-filter{
  display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);
  width:100%;justify-content:center;
  height:var(--re-alto, 34px);
  padding:0 .2rem;
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-md, .88rem);
  color:var(--text, #f4f6fb);
  background:none;border:0;border-radius:0;box-shadow:none;
  cursor:pointer;
  white-space:nowrap;overflow:hidden;
  /* ⚠⚠⚠ SIN MARCO — Y ESTA VEZ DE VERDAD (Franco, 21/09/2026): *«a los
     botones de competencia y de ligas u hora sacales ese borde celeste
     y dejalo sólo al texto con sus flechas para abrir el expandible»*.

     ⚠⚠ LA HISTORIA, PORQUE ESTO YA FUE Y VINO DOS VECES y conviene que
     el próximo que lo lea no lo revierta de nuevo:
       · 01/09 — Franco pidió sacar los contornos. Se puso el fondo de la
         página con `background`, que apagó las dos capas con las que
         `cop-borde` dibuja el marco.
       · 09/09 — dijo que los botones «tienen la animación como si
         estuvieran apagados». Se devolvió el marco con `--borde-fondo`,
         porque sin marco Y sin color de chip encendida no quedaba nada
         que dijera que el botón estaba aplicando un filtro.
       · 21/09 — pide sacar el marco otra vez, esta vez nombrando el
         color: «ese borde celeste».
     Lo que resuelve las dos cosas a la vez es que se vaya el MARCO y se
     quede la TINTA: la clase `.on` del sistema deja la letra blanca, así
     que el botón sigue leyéndose como encendido sin dibujar una caja.
     Por eso se saca `cop-borde` del marcado —no alcanza con apagarlo
     desde acá— y con él se va `--borde-fondo`, que era su relleno.
     ⚠ EL MENÚ DESPLEGABLE CONSERVA SU FONDO: flota sobre la lista y sin
     él no se leería. */
}
.re-filter svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
/* menú desplegable — mismo fondo que el botón cerrado (.re-filter) */
.re-menu{
  position:absolute;top:calc(100% + .4rem);z-index:30;
  /* ⚠ EL FONDO ES EL DE LA APP (Franco, 24/09/2026: *«cuando se abre el menú
     expandible tiene que tener el color de fondo de la app, no ese gris
     neutro genérico»*). Era `--s2`. Lo separa de lo que tiene abajo el
     borde y la sombra, que ya estaban. Vale para Rankings y Resultados:
     es el mismo menú. */
  background:var(--bg, #0b0e14);border:1px solid var(--card-border);border-radius:var(--r-card, 14px);
  padding:var(--gap-xs, .3rem);display:none;flex-direction:column;gap:.1rem;
  box-shadow:0 16px 44px rgba(0,0,0,.7);max-height:340px;overflow-y:auto;
}
.re-menu.open{display:flex}
.re-menu-item{
  display:flex;align-items:center;gap:var(--gap-sm, .5rem);white-space:nowrap;
  padding:var(--gap-md, .7rem) var(--gap-md, .7rem);border-radius:var(--r-card, 14px);background:none;text-align:left;
  font-family:'Inter',sans-serif;font-size:var(--fs-md, .88rem);font-weight:600;color:var(--text);transition:background .15s;
}
.re-menu-item:hover{background:rgba(255,255,255,.06)}
.re-menu-item.active{background:rgba(12,149,235,.16);color:#fff}
.re-menu-allico{font-size:var(--fs-base, 1rem);width:22px;text-align:center}