/* css/sport-filter.css — el vestido del filtro de deporte (js/sport-filter.js).
 *
 * VA EN UN ARCHIVO Y NO EN EL <style> DE CADA PAGINA. El resto del sitio hornea
 * su CSS dentro del HTML porque cada pagina es un documento suelto, pero este
 * componente lo comparten tres paginas con tres hojas distintas, y horneadas
 * serian tres copias que empiezan iguales y dejan de serlo -exactamente lo que
 * le paso a NAV_CSS, copiado a mano en 28 archivos que hoy ya no coinciden.
 *
 * TODO var() LLEVA SU LITERAL DE RESERVA. Este archivo se carga en paginas que
 * no declaran los mismos tokens: si el token no esta, la declaracion entera es
 * INVALIDA y el chip sale sin fondo ni borde. No es un color feo, es la
 * ausencia de superficie. Misma leccion que ya escribio NAV_CSS.
 */

/* La fila. flex-wrap y NUNCA overflow-x en ESCRITORIO: overflow crea un
   contexto de recorte que corta el panel desplegado a la altura de la barra -se
   vio en pantalla, el panel abria y solo asomaba una franja blanca. En movil si
   hay carril, y el recorte se resuelve sacando el panel del flujo; ver abajo. */
.sf{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}

/* ── MOVIL: UN SOLO RENGLON CON CARRIL ────────────────────────────────────── */
/* A 375px las seis entradas de /datos envuelven en TRES renglones: 114px, el
   17% de la pantalla, y como la barra es sticky ese 17% no se recupera
   bajando. Con el header encima son casi 190px -un tercio de la pantalla- para
   elegir liga en una pagina cuyo contenido es la tabla de abajo.
   Medido en /datos/nfl a 375x667.

   EL RECORTE DEL PANEL SIGUE SIENDO REAL, NO SE HA IDO. overflow-x:auto obliga
   a overflow-y a calcularse como auto -el valor `visible` no sobrevive si el
   otro eje no es visible-, asi que el desplegable de futbol quedaria cortado a
   la altura de la barra, que es el fallo que documenta el comentario de
   arriba. Lo resuelve mountSportFilter(): al abrir, saca el panel del flujo con
   position:fixed y lo coloca con las coordenadas del chip. El CSS solo no
   puede; por eso esta regla NO se aplica sola.

   LA CLASE LA PONE EL JS, Y ESO ES LA GARANTIA. Sin script no hay `sf--carril`,
   no hay overflow y la barra vuelve a envolver en tres renglones: feo, pero
   entero y con el desplegable funcionando. Activar el carril desde el CSS a
   secas dejaria, en esa misma situacion, un desplegable recortado y sin manera
   de abrirlo -cambiar un defecto de espacio por uno de funcion.

   La barra de scroll se esconde pero el carril NO pierde su affordance: los
   chips se cortan a media pieza en el borde, que es lo que dice "esto sigue".

   NADA SE PINTA ENCIMA DE LOS CHIPS (2026-09-19). Hubo un degradado en los
   bordes (mask-image) como señal de "hay mas", y se quito entero: en iPhone
   difuminaba el chip activo por los dos lados y se comia su texto. Tapar el
   contenido es peor que no dar señal. La unica señal es la que no pinta sobre
   nada: el chip siguiente cortado a la vista en el borde derecho. Lo vigila
   scripts/test-barra-deportes-movil.mjs, que exige que ninguna capa decorativa
   (mascara, pseudo-elemento o elemento encima) toque el texto de un chip. */
@media(max-width:768px){
  .sf.sf--carril{flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* DE BORDE A BORDE DE LA PANTALLA (2026-09-19). El carril heredaba el
       margen lateral de la pagina, asi que el recorte caia 16-24px antes del
       borde fisico y se leia como un chip roto, no como "hay mas". Ahora sale
       de ese margen con margenes negativos y lo devuelve como padding interno:
       el primer chip sigue alineado con el texto de arriba, el ultimo llega al
       borde al desplazar, y el corte ocurre en el borde de la pantalla.
       --sf-sangria la declara CADA PAGINA en la misma regla que su padding
       lateral (ver app.html main, tipsters.html .wrap y la .wrap de
       generate-verificados.mjs), para que no puedan separarse. Sin declarar vale
       0 y no cambia nada: /datos y /movimientos ya van de borde a borde. */
    margin-left:calc(-1 * var(--sf-sangria, 0px));
    margin-right:calc(-1 * var(--sf-sangria, 0px));
    padding-left:var(--sf-sangria, 0px);
    /* Aire al FINAL: el mismo margen de la pagina, y nunca menos de 12px, para
       que el ultimo chip no quede pegado al borde como si estuviera recortado. */
    padding-right:max(12px, var(--sf-sangria, 0px));
    /* Con scroll-snap el carril se sentiria un carrusel y pelearia con el
       desplazamiento a la vista del chip activo. Aqui solo hace falta que el
       chip no quede pegado al borde cuando el navegador lo trae a la vista. */
    scroll-padding-inline:12px}
  .sf.sf--carril::-webkit-scrollbar{display:none}
  /* flex:0 0 auto en los hijos: sin el, flexbox los encoge para que quepan
     -que es justo lo que el carril existe para no hacer- y los rotulos largos
     ("College Football") saldrian partidos. */
  .sf.sf--carril > *{flex:0 0 auto}
}

/* ── EL CHIP ──────────────────────────────────────────────────────────────── */
.sf-chip{display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;
  color:var(--ink-soft,#5A6B7B);background:var(--white,#FFFFFF);
  border:1px solid var(--line,#E3E8ED);border-radius:999px;
  padding:7px 14px;cursor:pointer;white-space:nowrap;transition:.12s;
  -webkit-tap-highlight-color:transparent}

/* EL HOVER VA EN @media (hover: hover) Y EL ACTIVO DESPUES. Las dos cosas por
   el mismo fallo, que este componente hereda ya corregido de los chips de
   periodo de /verificados: en tactil el navegador aplica :hover al TOCAR y lo
   deja pegado hasta el siguiente toque, asi que el chip recien elegido se
   quedaba con el estilo de hover encima del de activo; y en escritorio un
   hover mas especifico que el activo le robaba el color del texto y dejaba
   #0E1B2A sobre #0A0D11.

   Aqui el activo se declara DESPUES y cubre tambien su propio hover, asi que
   gana en los dos estados sin depender de contar pseudoclases. */
@media (hover: hover){
  .sf-chip:hover{border-color:var(--ink-soft,#5A6B7B);color:var(--ink,#0E1B2A)}
}
.sf-chip.active,.sf-chip.active:hover{
  background:var(--charcoal,#0A0D11);border-color:var(--charcoal,#0A0D11);color:#fff}
.sf-chip:focus-visible{outline:2px solid var(--green,#13B670);outline-offset:2px}

/* ── EL GRUPO DE FUTBOL ───────────────────────────────────────────────────── */
/* position:relative NO ES COSMETICA: es el ancla del panel, y soltarla es el
   bug que tenia /app. Un position:absolute sin ancestro posicionado resuelve
   contra el bloque contenedor inicial, cuya altura es la del viewport, asi que
   top:calc(100% + 6px) dejaba el panel a 100vh del ORIGEN DEL DOCUMENTO: fuera
   de la vista y, una vez scrolleado, encima de las tarjetas. */
.sf-group{position:relative;flex:0 0 auto}

/* El marker nativo del <details> se quita por TRES vias porque ningun navegador
   las respeta todas: el triangulo hacia que la fila pareciera un breadcrumb
   ("▶ Futbol") en vez de una fila de botones. */
.sf-sum{list-style:none}
.sf-sum::-webkit-details-marker{display:none}
.sf-sum::marker{content:""}

/* El caret se DIBUJA con bordes. El glifo ▾ del marcado se apaga con
   font-size:0 y se queda como respaldo para el caso sin CSS: a 9px salia
   sub-pixel y por encima de la linea de base, y se leia como una comilla suelta
   detras del rotulo. Un triangulo de bordes mide siempre lo mismo, hereda el
   color con currentColor y gira con el mismo transform. */
.sf-caret{font-size:0;line-height:0;width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .12s;
  transform-origin:50% 30%}
.sf-group[open] .sf-caret{transform:rotate(180deg)}

/* ── EL PANEL ─────────────────────────────────────────────────────────────── */
/* z-index alto y sombra larga: cae sobre el contenido de la pagina, no lo
   empuja. Empujarlo movia la tabla entera al abrir el menu.
   85 y no 70 (2026-09-19): en /app el slip de apuestas es fixed con z-index 70
   y va DESPUES en el DOM, asi que con 70 ganaba el empate y tapaba el final del
   panel. 85 queda por encima del slip (70) y de la hamburguesa (80), y por
   debajo del menu de herramientas (90) y del nav elevado (100), que si deben
   cubrirlo cuando se abren. El fondo es OPACO a proposito: se lee encima de la
   rejilla, no a traves de ella. */
.sf-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:85;
  display:flex;flex-direction:column;gap:2px;
  min-width:210px;width:max-content;max-width:calc(100vw - 24px);
  padding:8px;background:var(--white,#FFFFFF);
  border:1px solid var(--line,#E3E8ED);border-radius:12px;
  box-shadow:0 18px 44px -20px rgba(14,27,42,.4);
  /* El alto exacto lo pone mountSportFilter() al abrir, midiendo el hueco. Esto
     es el respaldo para el caso sin JS: once ligas miden ~480px y en un
     telefono eso se sale de la pantalla. overscroll-behavior corta el
     encadenado, que es lo que evita que al llegar al final del panel el gesto
     siga arrastrando la pagina de debajo. */
  max-height:70vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ABRE HACIA ARRIBA cuando no cabe abajo. La clase la pone mountSportFilter()
   al abrir, midiendo; aqui solo vive el resultado. Va DESPUES de la regla base
   para pisarle el `top`. */
.sf-panel--up{top:auto;bottom:calc(100% + 6px)}

.sf-item{display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;
  color:var(--ink-soft,#5A6B7B);background:transparent;border:none;border-radius:8px;
  text-align:left;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
@media (hover: hover){
  .sf-item:hover{background:var(--surface,#F5F7F9);color:var(--ink,#0E1B2A)}
}
.sf-item.active,.sf-item.active:hover{
  background:var(--green-soft,#E4F6EE);color:var(--green-deep,#0C7E4E);font-weight:700}
.sf-item:focus-visible{outline:2px solid var(--green,#13B670);outline-offset:-2px}

/* En un telefono el toque quiere 44px, no 40. */
@media(max-width:620px){
  .sf-item{min-height:44px;font-size:15px}
}