/* ═══════════════════════════════════════════════════════════════════
   cop-tarjeta-ranking.css · LA FILA DE RANKING
   ------------------------------------------------------------------
   Componente compartido. Se toca UNA vez y baja a todas las pantallas
   que muestran una tabla de posiciones de jugadores.

   ⚠⚠ ESTE ARCHIVO NO SE ESCRIBIÓ A MANO: son las reglas `.rk-*` que
   vivían adentro de `ranking.html`, sacadas TAL CUAL y en el mismo
   orden. El orden importa — la página tenía cuatro bloques `<style>` y
   las reglas del final pisan a las del principio a propósito (el
   comentario original lo dice: «se AGREGA al final; el CSS viejo queda
   intacto y pierde por orden»). Reordenarlas al mudarlas habría
   cambiado el diseño sin que nadie tocara un valor.

   ⚠ LO ÚNICO QUE CAMBIÓ ES EL NOMBRE DEL CONTENEDOR: `#rankList` y
   `.rank-list` pasaron a `.cop-ranking`, que es el espacio de nombres
   del componente. Una regla colgada de un `id` no puede servir a dos
   pantallas.

   ⚠ POR QUÉ SE MUDÓ (Franco, 23/08/2026): la página de Grupos necesita
   la MISMA tabla de posiciones para el ranking interno —*«igual que en
   la página de rankings pero ordenado por rendimiento interno»*—. La
   alternativa era copiar estas 40 reglas a `grupo.html`, que es
   exactamente lo que produjo las cuatro tarjetas de historial distintas
   que hubo que unificar esa misma mañana.

   ⚠ ESTE ARCHIVO NO PUEDE CAMBIAR NADA POR ENLAZARLO. Sin la clase
   `.cop-ranking` en el contenedor, la mitad de las reglas no encuentran
   a quién estilar; y `.rk-card` sale de `COPRanking.fila()`, que es la
   única cosa que la escribe.
   ═══════════════════════════════════════════════════════════════════ */

/* la fila propia (fase 4 sesión 3): borde y chip "vos" */
/* ⚠⚠ 25/09/2026: SE FUE EL ARO CELESTE (`box-shadow:inset … var(--primary)`).
   Franco: *«no uses más ese diseño cuadrado celeste alrededor de todo,
   necesito que uses un diseño moderno como el borde de las tarjetas de
   megaspin con las esquinas superior izquierda e inferior derecha
   iluminadas»*. El marco lo dibuja la capa de `cop-borde.css`
   (`.cop-esquinas-capa`, la fila la trae desde `COPRanking.fila()`), así
   que la fila no crece ni se corre. Acá queda sólo cómo le queda a una
   FILA:
     · el color es el de la competencia (violeta en División y Carrera);
     · el radio es el de tarjeta (14): la fila normal no es caja, ésta sí;
     · en el teléfono la fila va a sangre (100vw), así que el marco se
       mete desde el borde de la pantalla (`--capa-inset`, abajo). */
.rk-card.rk-yo{
  --borde-rgb:var(--cop-acento-rgb, 12,149,235);
  --borde-grosor:1.5px;
  --borde-radio:var(--r-card, 14px);
}
/* la línea separadora de mi fila no va: el marco ya la encierra */
.rk-card.rk-yo::after{display:none}
@media (max-width:760px){
  /* ⚠ la fila del teléfono mide 100vw: sin esto el marco tocaría los dos
     bordes de la pantalla. Se mete lo justo para abrazar el contenido. */
  .rk-card.rk-yo{--capa-inset:0 .35rem}
}

.rk-vos{font:800 .62rem 'Inter',sans-serif;letter-spacing:.8px;text-transform:uppercase;
  color:#04121f;background:var(--primary,#0c95eb);border-radius:999px;padding:.14rem .5rem;margin-left:var(--gap-sm, .5rem)}


/* ════════ LISTA DE RANKING ════════ */
.cop-ranking{display:flex;flex-direction:column;gap:.7rem}


/* tarjeta de ranking — mismo componente que el leaderboard de jugadores
   de ligas.html (.lb-card): sin contorno, sin fondo y sin líneas divisorias */
.rk-card{
  /* ⚠⚠ `border-box` FIJADO ACÁ (24/09/2026). Franco preguntó si el ranking de
     Equipos Competitivos y el de Rankings miden lo mismo: camiseta (52),
     puesto (24/800), nombre (16/600) y puntos (12,8/700) SÍ; la FILA no —
     83 contra 79—, porque `equipo-competitivo.html` no trae el reset de
     box-sizing y el `min-height` se medía sin el relleno. Es la trampa que
     `cop-ui-partido.css` ya había pagado; ahora el componente la cierra
     para todas las pantallas que lo usan. */
  box-sizing:border-box;
  position:relative;display:flex;align-items:center;gap:var(--gap-md, .7rem);
  padding:var(--gap-sm, .5rem) .3rem;border-radius:var(--r-card, 14px);
  background:none;border:none;box-shadow:none;
  --rk-glow:12,149,235;                 /* se conserva para los acentos de texto */
  cursor:pointer;transition:background .2s;overflow:visible;
}

.rk-card:hover{background:rgba(255,255,255,.03)}

/* colores por puesto: 1 dorado, 2 plata, 3 bronce, 4+ celeste */
.rk-card[data-pos="1"]{--rk-glow:255,208,0}

.rk-card[data-pos="2"]{--rk-glow:170,185,205}

.rk-card[data-pos="3"]{--rk-glow:255,140,40}

.rk-bar{display:none}

.rk-card.top3{padding-left:.3rem}


/* ⚠⚠ LA CAMISETA, NO EL AVATAR REDONDO (Franco, 23/08/2026): *«en lugar
   de mostrar las 2 iniciales del usuario tenés que poner ahí su
   camiseta, de la misma forma que se muestran y tienen el diseño de las
   camisetas de los clubes»*.
   ⚠ `contain` Y SIN RECORTE CIRCULAR, y no es cosmético: la camiseta es
   una figura con hombros y mangas. Con `cover` dentro de un círculo se
   le comen las dos puntas y queda una mancha de color que no se
   reconoce. Es la misma decisión que ya estaba tomada en `.mc-crest` de
   las tarjetas de partido, donde el comentario dice, textual: «sin caja
   alrededor de la camiseta: la camiseta ya es la figura». */
.rk-mini{
  /* ⚠ el tamaño (52 × 52) está en «LA REGLA FIJA», al final */
  flex:0 0 auto;border-radius:0;overflow:hidden;
  background:none;border:none;box-shadow:none;
  display:grid;place-items:center;font-size:var(--fs-2xl, 1.5rem);
}

.rk-mini img{width:100%;height:100%;object-fit:contain;display:block}


/* info central */
.rk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap-xs, .3rem)}

.rk-namerow{display:flex;align-items:center;gap:.5rem;min-width:0}

.rk-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,255,255,.15)}

.rk-name{font-family:'Inter',sans-serif;letter-spacing:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rk-statsrow{display:flex;align-items:center;gap:var(--gap-md, .7rem)}

.rk-pts{font-family:'Inter',sans-serif;letter-spacing:0;color:#fff}

.rk-trophy{display:inline-flex;color:var(--text-dim)}
/* ⚠ LA UNIDAD ESCRITA (Victorias) COMPARTE EL LUGAR DEL TROFEO: es la
   misma ranura, así que la fila mide igual con ícono o con palabra y
   las dos tablas se alinean entre sí. */
.rk-trophy.rk-unidad{font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-xs, .72rem);letter-spacing:.2px;align-items:center}

.rk-trophy svg{width:14px;height:14px}

.rk-up{display:inline-flex;align-items:center;gap:.25rem;font-family:'Inter',sans-serif;font-size:var(--fs-sm, .8rem);font-weight:600;color:#9bff66}

.rk-up svg{width:13px;height:13px}


/* posición a la derecha: número grande y limpio */
.rk-rank{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:38px}

/* rango del usuario, a la derecha de la tarjeta */
.rk-rango-r{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:58px}

/* ⚠ El escudo es el protagonista: no lleva texto debajo (Franco,
   04/08). El tamaño está calculado para ocupar también el lugar que
   dejó el nombre, si no la columna quedaba con un hueco. */
.rk-rango-r .rr-e{font-size:2.2rem;line-height:1;display:flex;align-items:center}

/* ── LOS DOS CAMINOS: División (D) y Torneos (T) · 24/08/2026 ──────
   ⚠ SOLO SE APLICA CON `.rk-rango-2`. La fila de un camino solo —
   Grupos, Equipos, la pestaña de División— no entra acá y queda
   idéntica: el escudo grande y sin letra que decidió Franco el 04/08. */
.rk-rango-r.rk-rango-2{flex-direction:row;gap:.5rem;min-width:0;justify-content:flex-end}
.rk-rango-2 .rr-cam{display:flex;flex-direction:column;align-items:center;gap:.1rem}
/* ⚠⚠ MISMO TAMAÑO QUE EL ESCUDO ÚNICO (Franco, 03/09/2026): *«en la tab
   de división o torneo se muestra el logo de la división más grande y
   bien a la derecha; en la de rankings general y acá tenés que hacer lo
   mismo pero agregando la otra división a la izquierda, respetando el
   mismo tamaño»*. Antes iban en 1.65rem para no empujar el alias; la
   columna se optimiza sacando el min-width (los dos escudos miden menos
   que los 104px que reservaba) y pegándolos a la derecha. */
.rk-rango-2 .rr-e{font-size:2.2rem}
.rk-rango-2 .rr-let{
  font-family:'Inter',sans-serif;font-weight:800;font-size:.6rem;
  letter-spacing:1.2px;color:var(--text-dim,#9aa3b5);line-height:1;
}
/* el camino sin dato: apagado y con su hueco, nunca con el número del otro */
.rk-rango-2 .rr-vacia{opacity:.42}
.rk-rango-2 .rr-vacia .rr-let{color:var(--text-faint,#5a6275)}
/* ⚠ ACÁ VIVÍA `.cop-div--off`, el círculo punteado del camino sin dato.
   Se fue con su marcado (Franco, punto 22: el logo de rangos en su
   lugar). Se BORRA en vez de dejarlo: una regla que dibuja algo que ya
   nadie pide es diez líneas que el próximo lector tiene que descartar —
   y peor, un nombre en el espacio `cop-div-` que hace pensar que el
   componente de divisiones tiene un estado «off» que no tiene. */


.rk-rank-trophy{display:none}

.rk-rank-num{color:#fff}

.rk-rank-num sup{display:none}

.rk-card[data-pos="1"] .rk-rank-num{color:#ffd000}

.rk-card[data-pos="2"] .rk-rank-num{color:#c5ccd6}

.rk-card[data-pos="3"] .rk-rank-num{color:#ff8c28}


/* ⚠ ACÁ HABÍA UNA MEDIA QUERY DE 560 px QUE AGRANDABA LA CAMISETA SÓLO EN
   EL TELÉFONO (40 → 52) y se BORRÓ el 23/09/2026: por eso la fila medía
   distinto en una tablet o en la compu. Las medidas son una sola, en «LA
   REGLA FIJA», al final del archivo. */


/* ═══════════════════════════════════════════════════════════════════
   TANDA 1 · EL SISTEMA VISUAL (12/08/2026)
   Se AGREGA al final. El CSS viejo queda intacto y pierde por orden;
   se borra en la tanda 10 con diff píxel a píxel.
   ⚠ Ni una línea de marcado ni de JS se tocó. Solo CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · FORMA: dos radios ────────────────────────────────────────
   El círculo del avatar NO se toca: es una forma, no un radio. */
.rk-up{ border-radius:var(--r-card) }

.rk-card{ border-radius:var(--r-fila) }


/* ⚠ EL RADIO ES UNA PROPORCIÓN, NO UN NÚMERO ABSOLUTO — y esto lo cazó
   la CAPTURA, no los números. La bandera mide 20×14: con radio 14 el
   navegador la recorta hasta dejarla OVALADA, porque 14 supera la mitad
   de su alto. Es una imagen chica, no una caja: misma lógica que el
   círculo del §3 de la escala. Queda en 3px, el MISMO valor que en
   ligas, y marcado para que Franco decida si las imágenes chicas entran
   a la escala. */
.rk-flag{ border-radius:3px }


/* ── 2 · LA LISTA, SIN CAJA ───────────────────────────────────────
   Mismo tratamiento y MISMO alto de fila que las listas de Ligas:
   cambiar de pantalla no mueve nada bajo el dedo. */
@media (max-width:760px){

  .cop-ranking{
    width:100vw; margin-inline:calc(50% - 50vw); max-width:none;
    padding:0; gap:0;
  }
  .rk-card{
    background:none; border:0;
    position:relative;
    padding-inline:var(--aire-fila);
    padding-block:var(--gap-lg, 1rem);   /* ⚠ el aire vertical también se unifica:
                               equipos tenía 1rem y ranking .55 — misma
                               pieza, dos paddings que nadie decidió */
    min-height:var(--alto-item);
    border-radius:var(--r-fila);
  }
  /* ⚠⚠ LA LÍNEA VA DEL NÚMERO AL LOGO, NO DE BORDE A BORDE (Franco,
     26/08/2026): *«la línea de las tarjetas de ranking tiene que ir
     desde el número de posición hasta el logo de la división»*.
     Era un `border-bottom` de la tarjeta, y la tarjeta mide 100vw
     (`.cop-ranking` la estira a pantalla completa a propósito), así que
     la raya cruzaba de un borde de la pantalla al otro mientras el
     contenido arrancaba 16 px adentro: la lista se leía rayada en vez
     de separada.
     Ahora es un `::after` con el MISMO inset que el padding de la fila
     —`--aire-fila`—, que es justo donde arranca el número de posición y
     donde termina el logo de división. Es la misma solución que usa
     `cop-ui-partido.css` para separar partidos: una sola forma de
     separar filas en toda la app.
     ⚠ Y ARRIBA DE LA PRIMERA NO VA NADA (mismo pedido): el
     `border-top` del `:first-child` se BORRA, no se condiciona — era la
     única regla que lo dibujaba, grepeada antes de sacarla. */
  /* ⚠⚠ LOS DOS INSETS SON DISTINTOS PORQUE LA FILA ES ASIMÉTRICA, y
     eso lo dijo la medición, no el ojo: a la izquierda la columna del
     puesto arranca a .3rem (regla del 20/08 que alinea el 1º con el
     10º) y a la derecha el logo de división termina en `--aire-fila`.
     Los dos primeros intentos fallaron por suponer simetría:
       · `var(--aire-fila)` de los dos lados → la línea arrancaba 17 px
         a la derecha del número;
       · `0` de los dos lados → un absoluto se posiciona contra la caja
         de PADDING, que incluye el padding, así que `0` es el borde de
         la tarjeta: la línea volvía a cruzar de punta a punta.
     El aire de la izquierda pasa a ser variable para que el padding y
     la línea salgan del MISMO número. */
  .rk-card::after{
    content:""; position:absolute; z-index:1; pointer-events:none;
    left:var(--rk-aire-izq,.3rem); right:var(--aire-fila); bottom:0; height:1px;
    background:var(--cop-pt-linea, rgba(255,255,255,.07));
  }
  .rk-card:hover{ background:rgba(255,255,255,.02) }
}


/* ── 3 · CALIGRAFÍA ───────────────────────────────────────────────
   La regla de Franco: el número hereda el tamaño del nombre, pesos en
   700, el color de la competencia solo en los acentos.
   ⚠ El escudo (.rk-rank-ins) es un ÍCONO: su tamaño es una dimensión,
   no un escalón de la escala. Queda como está. */
/* ⚠ el tamaño del nombre y del dato se mudó a «LA REGLA FIJA» (23/09):
   acá leían tokens que sólo existen con `cop-ui-base.css` cargada. */
.rk-up{
  font-size:var(--fs-sm, .8rem); font-weight:700; line-height:var(--lh-tight, 1.1);
}
.rk-pts, .rk-up{ font-variant-numeric:tabular-nums }


/* ⚠ El número de puesto bajaba de 2rem: el techo de la app es 1.5rem
   (Franco, 12/08 — "no quiero textos tan grandes"). */
.rk-rank-num{ font-variant-numeric:tabular-nums }   /* el tamaño: «LA REGLA FIJA» */


/* ── ALINEACIÓN ÚNICA DE POSICIONES (F9-UI, 20/08/2026, Franco):
   «1, 2 y 3 están bien alineadas y con su color, pero el resto está
   más a la derecha y no alineado de la misma forma». La causa era
   doble: el top3 lleva padding-left propio (.3rem) mientras el resto
   heredaba el de la fila unificada, y la columna del número era
   min-width — con 2 dígitos empujaba distinto. Una sola columna fija
   para TODAS las filas, con el mismo arranque que el top 3. Va al
   final a propósito: gana por orden. */
.rk-card, .rk-card.top3{padding-left:var(--rk-aire-izq,.3rem)}

.rk-rank, .rk-rank.plain{width:46px;min-width:46px;justify-content:center}

/* ── LA LÍNEA CHICA EXTRA (23/08/2026) ──────────────────────────────
   `.rk-up` existía para el «+3 puestos» de Rankings y hoy no lo usa
   nadie. El ranking interno de un grupo sí: ahí va el track record que
   pidió Franco («4 duelos · 2 ganados»).

   ⚠ SIN ESTAS TRES LÍNEAS SE PARTE EN DOS RENGLONES y la fila crece
   ~14 px, así que la lista del grupo deja de tener el mismo alto de
   fila que la de Rankings — que es justamente lo que el componente
   existe para evitar. Se corta con puntos suspensivos en vez de
   empujar: el dato completo está en la tabla del duelo. */
/* ⚠⚠ Y NO VA SCOPEADO A `.cop-ranking` (08/09/2026). Estas tres líneas
   vivían bajo `.cop-ranking .rk-up`, o sea sólo adentro del ranking de un
   grupo. En la lista de «Ganadores últimos torneos» de la página de club
   —misma fila, mismo componente, otro contenedor— el extra «+100 CP» se
   partía en dos renglones («+100» arriba, «CP» abajo) y esa fila crecía
   14 px contra las demás, que es exactamente lo que el componente existe
   para evitar. Un comportamiento del componente no puede depender de en
   qué caja lo pongan: si mañana aparece un tercer lugar donde se usa,
   vuelve el mismo defecto.
   ⚠ `.rk-up` no lo usa nadie más —el «+3 puestos» de Rankings se fue—,
   así que ampliar el alcance no puede pisarle nada a nadie. */
.rk-statsrow{ min-width:0 }
.rk-up{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ════════════════════════════════════════════════════════════════════
   LA TABLA DE POSICIONES · el botón «ver» y la capa que abre
   ────────────────────────────────────────────────────────────────────
   ⚠⚠ ESTO NO ES NUEVO: VIVÍA ADENTRO DE `duelo.html` Y SE MUDÓ ACÁ TAL
   CUAL (23/08/2026, noche). No se rediseñó nada ni se cambió un valor.

   El motivo es que ahora son DOS pantallas las que ponen filas de
   ranking y un botón para abrir lo que jugó ese jugador:
       · `duelo.html`   → pestaña «Posiciones» del duelo de todos
                          contra todos (grupos y equipos)
       · `futbol11.html` → pestaña «Ranking», con «Ver Alineación»
   Franco lo pidió así: *«lo importante es reutilizar las UI y adaptar
   con los detalles que te digo»*. Copiar estas veinte líneas habría
   sido el error de siempre: la misma mañana en que hubo que unificar
   cuatro tarjetas de historial que habían nacido copiando una.

   ⚠ EL NOMBRE DE LAS CLASES SE MANTIENE (`pos-*`), aunque en Fútbol 11
   la pestaña no se llame «Posiciones». Renombrarlas obligaría a tocar
   `duelo.html` en once lugares para no cambiar nada.
   ⚠ Y ACÁ NO SE ESTILA NI UNA FILA NI UNA TARJETA DE PICK: la fila la
   dibuja este mismo archivo más arriba, y la tarjeta de pick la pone
   cada pantalla. Lo único que vive acá es lo que la tabla AGREGA.
   ════════════════════════════════════════════════════════════════════ */
/* ⚠⚠ EL PREMIO DE LA SALA, ARRIBA DE LA TABLA (Franco, 29/08/2026:
   *«en la tab de posiciones tenés que poner el premio arriba con el
   multiplicador»*). Sólo lo dibuja Mega Spin: en grupos y equipos no hay
   pozo ni multiplicador, y la regla no se aplica sin el elemento.
   ⚠ EL MARCO ES `cop-borde`, NO UNA CAJA NUEVA: la pantalla ya lo carga
   y así el recuadro del premio se ve como el resto de las piezas con
   borde de la app. Acá van el reparto y la letra, nada más.
   ⚠ EL MULTIPLICADOR ES LO MÁS GRANDE de los tres: es el número que
   sorteó la ruleta y es de lo que se está hablando. */
.pos-premio{
  display:flex;align-items:center;gap:.7rem;
  margin:.2rem 0 var(--gap-lg, 1rem);padding:var(--gap-md, .7rem) var(--gap-lg, 1rem);
  --borde-rgb:255,194,51; --borde-abajo:1; --borde-arriba:.22;
  --borde-radio:16px; --borde-grosor:1.5px;
}
.pos-premio .pp-mult{
  font-family:'Anton',sans-serif;font-size:1.7rem;line-height:1;
  color:var(--gold,#ffc233);
}
.pos-premio .pp-txt{
  flex:1;font:700 .78rem 'Inter',sans-serif;color:var(--text-dim,#8b93a7);
  text-transform:uppercase;letter-spacing:.6px;
}
.pos-premio .pp-pozo{
  font:800 1.05rem 'Inter',sans-serif;color:#fff;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);
}
.pos-premio .cop-ico{width:18px;height:18px}

.pos-cab{font:700 .78rem 'Inter',sans-serif;color:var(--text-dim,#8b93a7);
  text-transform:uppercase;letter-spacing:.6px;margin:.2rem 0 var(--gap-md, .7rem);text-align:center}
.pos-nota{font-size:var(--fs-sm, .8rem);color:var(--text-dim,#8b93a7);line-height:1.45;
  margin-top:var(--gap-lg, 1rem);padding:.7rem var(--gap-lg, 1rem);border:1.5px solid var(--card-border,#1e2330);
  border-radius:14px;text-align:center}
.pos-vacio,.pos-cargando{padding:2rem 1rem;text-align:center;
  color:var(--text-dim,#8b93a7);font-size:var(--fs-md, .88rem)}
/* la fila tocada: se marca y hace lugar para el botón */
/* ⚠⚠ EN LA COMPARACIÓN, MI FILA NO LLEVA EL ARO CELESTE (Franco,
   29/08/2026: *«en la página de comparación de picks tenés que sacarle
   esos bordes celestes a las líneas que separan jugadores en las
   posiciones»*).
   El aro es `.rk-card.rk-yo{box-shadow:inset 0 0 0 1.5px var(--primary)}`
   y marca cuál de las filas sos vos. En una tabla larga —el ranking
   general, con cientos— eso sirve: te encontrás de un vistazo. En una
   sala de tres, con tu fila a la vista y la chip «vos» al lado del
   nombre, el aro dice por segunda vez algo que ya está dicho, y sus dos
   lados horizontales se leen como dos líneas celestes que separan
   jugadores — que es exactamente lo que Franco vio.
   ⚠ SE APAGA SÓLO ACÁ. En `ranking.html` y en el ranking interno de un
   grupo el aro se queda: ahí sí hace falta. */
.pos-tabla .rk-card.rk-yo::before{display:none}
.pos-tabla .rk-card{position:relative;flex-wrap:wrap}
.pos-tabla .rk-card.pos-abierta{background:rgba(255,255,255,.04);border-radius:14px}
/* ⚠ EL BOTÓN OCUPA SU PROPIO RENGLÓN (`flex-basis:100%`): metido en la
   misma línea empujaba la insignia de división fuera de la tarjeta en
   pantallas de 360 px. */
.pos-ver{flex:0 0 100%;margin-top:.5rem;background:var(--s2, #161b25);
  border:1.5px solid var(--primary,#0c95eb);border-radius:14px;padding:var(--gap-md, .7rem);
  color:var(--primary,#0c95eb);font:600 .85rem 'Inter',sans-serif;cursor:pointer}
.pos-ver:hover{background:rgba(12,149,235,.12)}
.pos-ver-off{border-color:var(--card-border,#1e2330);color:var(--text-dim,#8b93a7);
  cursor:default}
/* ⚠⚠ LA ACCIÓN DE LA FILA CON EL BOTÓN DE LA LEY (26/09/2026, «Ver
   Alineación» en Mi zona de Fútbol 11). El botón es `.cop-b .cop-b--sm
   .cop-borde` —la ley fija del 05/09— y esto sólo le da su renglón: igual
   que `.pos-ver`, metido en la misma línea se comía el nombre a 320 px.
   ⚠ Sin `background` acá: lo pinta `cop-borde` con sus dos capas. */
.pos-tabla .rk-card > .pos-accion{flex:0 0 100%;margin-top:var(--gap-sm, .5rem)}
.pos-tabla .rk-card > .pos-accion[hidden]{display:none}
/* la capa de picks, encima de la tabla y adentro de la página */
.pos-picks{margin-top:1rem;border-top:1px solid var(--card-border,#1e2330);padding-top:var(--gap-lg, 1rem)}
.pos-picks[hidden]{display:none}
.pos-picks-cab{position:relative;display:flex;align-items:center;gap:var(--gap-md, .7rem);
  margin-bottom:var(--gap-md, .7rem);padding-right:2.2rem}
.pos-picks-nom{font:800 1rem 'Inter',sans-serif;color:#fff}
.pos-picks-pts{font:700 .82rem 'Inter',sans-serif;color:var(--text-dim,#8b93a7)}
/* ⚠ ARRIBA A LA DERECHA, como pidió Franco: sin la X la única salida
   sería recargar y la tabla quedaría tapada. */
.pos-cerrar{position:absolute;top:-.2rem;right:0;width:30px;height:30px;
  display:grid;place-items:center;background:var(--s2, #161b25);
  border:1.5px solid var(--card-border,#1e2330);border-radius:var(--r-card, 14px);
  color:var(--text,#f4f6fb);cursor:pointer;padding:0}
.pos-cerrar:hover{border-color:rgba(255,255,255,.32)}
.pos-cerrar svg{width:15px;height:15px}


/* ════════════════════════════════════════════════════════════════════
   ⚠⚠⚠ LA REGLA FIJA DE LA FILA DE RANKING  (Franco, 23/09/2026)
   ────────────────────────────────────────────────────────────────────
   *«las camisetas, números y logos de división del usuario son fijos
   siempre, y en algunos lugares son más grandes y en otros más chicos.
   El que me gusta a mí es el de la página de equipos competitivos (…)
   hacelo componente o regla fija para todos los rankings (…) después los
   nombres, datos y eso también tienen que tener el mismo tamaño que acá»*.

   Son las medidas que tiene la fila en Equipos Competitivos, en el
   teléfono: número 1,5rem en 800 · camiseta 52 × 52 · escudo de división
   2,2rem (36 × 51) · nombre 1rem en 600 · dato ,8rem en 700 · unidad
   ,72rem en 700.

   ⚠⚠ POR QUÉ HAY QUE ESCRIBIRLAS OTRA VEZ, ACÁ AL FINAL. La fila ya era un
   solo componente; lo que la separaba eran dos cosas medidas
   (`_ranking-fijo.mjs`):
     · EL ANCHO: la camiseta era de 40 px por encima de 560 px y de 52 por
       debajo — en una tablet o en la compu, otra fila;
     · LA HOJA: el número, el nombre y el dato leían `--fs-2xl`,
       `--fs-base` y `--fs-sm`, que declara `cop-ui-base.css`. En las
       pantallas que no la cargan (Duelo de Penales, aislada a propósito)
       el `var()` quedaba inválido y todo caía a 13 px.
   ⚠ POR ESO VAN EN VALORES LITERALES Y NO EN TOKENS, y sin media query:
   son medidas del componente, no escalones de la escala de texto, y
   tienen que ser las mismas en cualquier pantalla y a cualquier ancho.
   ⚠ `.rk-card.rk-card` (0-3-0) para que ninguna página las pise sin
   querer desde su `<style>`, que carga después. El que necesite otra
   medida en una fila de ranking tiene que venir a escribirla ACÁ, con su
   porqué — que es exactamente lo que Franco pidió: una regla fija.
   ⚠ LO QUE NO ENTRA ACÁ: la insignia semanal de Draft (`cs-insignia`) no
   es un escudo de división —son las victorias y las vidas de la semana—
   y tiene su tamaño en `cop-camino-semanal.css`.
   ════════════════════════════════════════════════════════════════════ */
.rk-card.rk-card .rk-rank-num{
  font-family:'Inter', system-ui, sans-serif;
  font-size:var(--fs-2xl, 1.5rem); font-weight:800; line-height:1; letter-spacing:-1px;
}
.rk-card.rk-card .rk-mini{ width:52px; height:52px; flex:0 0 52px }
.rk-card.rk-card .rk-rango-r .rr-e{ font-size:2.2rem }
.rk-card.rk-card .rk-name{
  font-family:'Inter', system-ui, sans-serif;
  font-size:var(--fs-base, 1rem); font-weight:600; line-height:1.1;
}
.rk-card.rk-card .rk-pts{
  font-family:'Inter', system-ui, sans-serif;
  font-size:var(--fs-sm, .8rem); font-weight:700; line-height:1.1;
}
.rk-card.rk-card .rk-trophy.rk-unidad{ font-size:var(--fs-xs, .72rem); font-weight:700 }

/* ══ EL ESTADO EN UN TORNEO DE ELIMINACIÓN (24/09/2026, Survival) ══════
   Franco: *«ponerle algún símbolo de eliminados y que finalizó en X
   posición (…) a los que siguen en juego (…) algún símbolo o indicador
   que muestre que siguen vivos»*.
     vivo       · un punto verde que late en el lugar del puesto
     eliminado  · una cruz roja con el puesto en que terminó, y la fila
                  apagada: sigue en la tabla (terminó ahí), pero ya no
                  compite
   ⚠ El latido es chico y lento (2 s): con veinte vivos en pantalla,
   veinte puntos rápidos serían una pantalla que tiembla. */
.rk-est{flex-direction:column;gap:.15rem}
.rk-est-ico{display:grid;place-items:center;width:22px;height:22px}
.rk-est--vivo .rk-est-ico i{
  position:relative;display:block;width:10px;height:10px;border-radius:50%;
  background:var(--ok, #22c55e);box-shadow:0 0 10px rgba(34,197,94,.7);
}
.rk-est--vivo .rk-est-ico i::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(34,197,94,.55);
  animation:rk-late 2s ease-out infinite;
}
@keyframes rk-late{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}}
.rk-est--fuera .rk-est-ico{color:var(--red, #ff3b5c);width:16px;height:16px}
.rk-est--fuera .rk-est-ico svg{width:100%;height:100%;display:block}
.rk-est-pos{font:400 .95rem/1 Anton, 'Arial Narrow', sans-serif;color:var(--text-dim, #9aa3b5);
  font-variant-numeric:tabular-nums}
.rk-est-linea{font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-xs, .72rem);
  letter-spacing:.3px;color:var(--text-dim, #9aa3b5)}
.rk-card--vivo .rk-est-linea{color:var(--ok, #22c55e)}
.rk-est-num .rk-rank-num{position:relative}
.rk-est-dot{position:absolute;top:-2px;right:-9px;width:8px;height:8px;border-radius:50%;
  background:var(--ok, #22c55e);box-shadow:0 0 8px rgba(34,197,94,.75);animation:rk-dot 2s ease-in-out infinite}
@keyframes rk-dot{50%{box-shadow:0 0 0 4px rgba(34,197,94,.18),0 0 8px rgba(34,197,94,.75)}}
.rk-card--eliminado{opacity:.62}
.rk-card--eliminado.rk-yo{opacity:1}
@media (prefers-reduced-motion: reduce){
  .rk-est--vivo .rk-est-ico i::after{animation:none;opacity:0}
  .rk-est-dot{animation:none}
}
.rk-card[data-alias]{cursor:pointer}

/* ══ MI FILA CON LUZ (08/10/2026, `luz:true` en `COPRanking.fila`) ══
   Franco: «que el equipo del usuario no tenga el recuadro, sino que tenga
   una luz celeste entrando desde la izquierda como los equipos en las
   tarjetas de partidos». La misma pared de color de `.ctp-fila::before`
   (nace en el borde y muere antes del nombre), en el acento celeste. */
.rk-card.rk-yo--luz{position:relative;isolation:isolate}
.rk-card.rk-yo--luz::after{display:block}
.rk-card.rk-yo--luz::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;top:0;bottom:0;width:min(46%, 200px);
  background:linear-gradient(90deg, rgba(var(--rk-luz-rgb, 12,149,235),.62) 0%, rgba(var(--rk-luz-rgb, 12,149,235),.40) 30%,
    rgba(var(--rk-luz-rgb, 12,149,235),.15) 62%, rgba(var(--rk-luz-rgb, 12,149,235),0) 100%)}

/* ── 09/10/2026 · LA MINI TARJETA (cop-skin.js) ─────────────────────────
   Franco: «en rankings y eso se muestra la skin suelta del usuario (camiseta
   o skin) con el borde de minitarjeta que también se va a poder editar y
   comprar». Borde = el `borde` equipado (celeste si no eligió); adentro, la
   skin entera o la espalda de su camiseta. Sin fondo de carta: el fondo es
   de la CARTA, no de la skin suelta. 54 × 68: entra en la fila sin agrandarla. */
.rk-card.rk-card .rk-mini--carta{ width:54px; height:68px; flex:0 0 54px; position:relative; overflow:hidden;
  border-radius:9px; border:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(var(--mc-rgb,12,149,235),.38), rgba(var(--mc-rgb,12,149,235),.08) 60%, transparent 100%), #0a1328;
  box-shadow:0 0 0 1.6px rgba(var(--mc-rgb,12,149,235),.95), 0 0 12px rgba(var(--mc-rgb,12,149,235),.25), 0 6px 14px rgba(0,0,0,.5) }
.rk-mini--carta .mc-skin{ position:absolute; left:0; bottom:0; width:100%; height:100%; object-fit:contain; object-position:50% 100% }
.rk-mini--carta[data-sk="camiseta"] .mc-skin{ inset:6% 4% 2%; width:92%; height:92%; object-position:50% 50% }
.rk-mini--carta::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%) }
/* la mini tarjeta es más alta que la camiseta: la fila no crece, el aire se achica */
.rk-card.rk-card:has(.rk-mini--carta){ padding-block:var(--gap-sm, .5rem) }