/* ══════════════════════════════════════════════════════════════════
   cop-tarjeta-jugador.css · LA TARJETA DE UN JUGADOR
   ------------------------------------------------------------------
   Franco, 23/08/2026: *«se abre el menú con los amigos del usuario que
   tienen la misma forma y diseño que las tarjetas de ranking»*.

   Es el diseño de la fila del ranking —avatar redondo con las iniciales
   pintadas del color de la división, el alias, los trofeos, y la
   insignia grande a la derecha— más una cosa que el ranking no tiene:
   un BOTÓN de acción (Desafiar · Agregar · Aceptar · Quitar).

   ⚠ SE LLAMA `pj-` Y NO `rk-`, A PROPÓSITO. Ya hubo dos intentos de
   unificar componentes reescribiendo el CSS de una pantalla que
   andaba, y los dos terminaron mal (§8septvigies). `ranking.html` se
   queda con su copia y no se toca en esta tanda: este archivo nace
   para las pantallas NUEVAS —el modal de desafío y la página de
   Amigos—, que hoy no comparten nada. El día que ranking adopte esto,
   se hace con su propio arnés y su propia tanda.

   ⚠ SIN FONDO NI BORDE, COMO EN EL RANKING. La versión con recuadro
   azul es la vieja del modal (`.ch-card`) y la de `amigos.html`; las
   dos se van. Una lista de personas se lee mejor sin una caja por
   persona.
   ══════════════════════════════════════════════════════════════════ */

.pj-lista{display:flex;flex-direction:column;gap:.15rem}

.pj-card{
  position:relative;display:flex;align-items:center;gap:var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) .3rem;   /* 24/09/2026: el alto de la fila del ranking */border-radius:var(--r-card, 14px);
  background:none;border:none;box-shadow:none;
  cursor:pointer;transition:background .2s;
}
.pj-card:hover{background:rgba(255,255,255,.03)}

/* ⚠⚠ EL AVATAR ES LA CAMISETA (Franco, 02/09/2026, tanda BI: *«cambiá
   las letras JU por la camiseta»*): `cop-tarjeta-jugador.js` pone la
   asignada de `COPKit.deUsuario`; las iniciales quedan de respaldo si
   la pantalla no cargó `cop-camisetas.js`.
   ⚠ `contain` Y SIN RECORTE CIRCULAR: una camiseta tiene hombros y
   mangas; metida en un círculo con `cover` queda una mancha de color
   (la misma decisión que `.mc-crest`, `.rk-mini` y `.gr-cam`). El
   radio se queda por las esquinas, pero la figura entra ENTERA. */
.pj-mini{
  /* ⚠ 52 Y NO 40 (Franco, 24/09/2026: *«el listado de amigos tiene que tener el
     mismo tamaño de camiseta y textos que tiene nuestro diseño de rankings»*):
     medido en `.rk-mini` de la página de Rankings. */
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:none;border:none;box-shadow:none;
  display:grid;place-items:center;
  font:800 .95rem 'Inter',sans-serif;color:var(--mc,#0c95eb);
}
.pj-mini img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

.pj-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap-xs, .3rem)}
.pj-namerow{display:flex;align-items:center;gap:.5rem;min-width:0}
.pj-name{
  /* 16 px y 600, como `.rk-name` (24/09/2026) */
  font-weight:600;font-size:var(--fs-base, 1rem);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pj-statsrow{display:flex;align-items:center;gap:var(--gap-md, .7rem)}
.pj-pts{font-weight:700;font-size:var(--fs-sm, .8rem);color:#fff;font-variant-numeric:tabular-nums}   /* como `.rk-pts` */
.pj-trophy{display:inline-flex;color:var(--text-dim)}
.pj-trophy svg{width:14px;height:14px}
/* una línea chiquita para «te mandó una solicitud», «desde marzo», etc. */
.pj-nota{font-weight:500;font-size:var(--fs-sm, .8rem);color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* la insignia de división, grande y a la derecha — igual que el ranking */
.pj-rango{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:44px;font-size:2.2rem;line-height:1;
}
.pj-rango:empty{display:none}

/* ── las acciones ────────────────────────────────────────────────
   ⚠ MISMA FORMA QUE LAS CHIPS Y LOS BOTONES DE PARTIDO: borde de
   1.5px, radio 10 y fondo casi negro. Es el botón que ya usa toda la
   app; uno nuevo acá sería un cuarto botón distinto en la misma
   pantalla. */
.pj-acciones{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--gap-sm, .5rem);margin-left:auto;
  min-width:5.9rem}   /* 24/09: el ancho del más largo, así las insignias caen en la misma columna */
/* ⚠⚠ A LA ALTURA DEL NOMBRE, NO DEL CENTRO DE LA FILA (Franco, 24/09/2026:
   *«poner siempre alineados los botones a la misma altura que los nombres»*).
   La fila se centra en la camiseta (52) y el nombre es el renglón de ARRIBA
   del bloque de texto, así que un botón centrado en la fila caía ~10 px más
   abajo que el nombre. Apoyado arriba, su centro cae en el del nombre:
   medido, 28,8 contra 28,5 px desde el borde de la fila (botón de 32 y
   de 29,5; camiseta de 52; relleno de .8rem). Si cambia alguno de esos
   tres, lo vuelve a medir `arnes/_ronda4.mjs` (control AM3). */
.pj-card:not(.pj-card--doble) .pj-acciones{align-self:flex-start}

/* ⚠⚠ CON DOS BOTONES, LOS BOTONES BAJAN A SU PROPIA LÍNEA.
   Medido a 390px: «Aceptar» + «Rechazar» + la insignia le dejaban al
   alias unos 60px y «DavoXeneize» se leía «DavoX…». El nombre es de
   quién estamos hablando: es lo último que se puede cortar. La marca
   `pj-card--doble` la pone `cop-tarjeta-jugador.js`. */
.pj-card--doble{flex-wrap:wrap;row-gap:.1rem}
.pj-card--doble .pj-acciones{
  flex-basis:100%;margin-left:0;justify-content:flex-end;
  padding:.1rem 0 .25rem;
}
.pj-btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-md, .88rem);letter-spacing:.3px;
  color:#fff;background:#0a0d14;border:1.5px solid var(--primary);
  padding:var(--gap-xs, .3rem) 1rem;border-radius:var(--r-card, 14px);cursor:pointer;white-space:nowrap;line-height:1.2;
  transition:background .2s,transform .15s;
}
.pj-btn:hover{background:rgba(12,149,235,.18)}
.pj-btn:active{transform:scale(.96)}
.pj-btn[disabled]{opacity:.5;pointer-events:none}

/* la variante secundaria: rechazar, quitar, cancelar. Gris y sin
   borde de color — que «no» no compita visualmente con «sí». */
.pj-btn.pj-btn-no{
  border-color:rgba(255,255,255,.18);color:var(--text-dim);
  padding:var(--gap-xs, .3rem) .7rem;
}
.pj-btn.pj-btn-no:hover{background:rgba(255,255,255,.06);color:#fff}

/* el botón de ícono (tilde / cruz), cuadrado y del alto de los otros */
.pj-btn.pj-btn--ico{width:36px;height:32px;padding:0;display:grid;place-items:center}
.pj-btn.pj-btn--ico svg{width:17px;height:17px;display:block}

/* ⚠ EL BOTÓN CON `cop-borde` (Franco, 02/09/2026: el «Cancelar» de
   «Esperando respuesta» *«con el diseño en degradé en bordes celestes y
   el fondo del color del fondo de la página»*). Acá van SOLO las
   variables: el degradé y el relleno los dibuja `cop-borde`, cuya
   triple especificidad le gana al fondo propio de `.pj-btn` — la página
   tiene que cargar `cop-borde.css` (amigos ya lo hace). */
.pj-btn.cop-borde{
  color:#fff;
  --borde-rgb:12,149,235;--borde-abajo:1;--borde-arriba:.22;
  --borde-radio:10px;--borde-grosor:1.5px;
}

/* ── estados de la lista ─────────────────────────────────────────── */
.pj-vacio{
  text-align:center;padding:2.2rem 1rem;color:var(--text-faint);font-size:var(--fs-md, .88rem);
  line-height:1.5;
}
.pj-cargando{text-align:center;padding:2.2rem 1rem;color:var(--text-faint);font-size:var(--fs-md, .88rem)}

/* el título de cada bloque (Solicitudes · Mis amigos · Sugerencias) */
.pj-seccion{
  display:flex;align-items:baseline;gap:.5rem;
  padding:var(--gap-xl, 1.2rem) .3rem var(--gap-xs, .3rem);
  font-weight:700;font-size:var(--fs-sm, .8rem);letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-dim);
}
.pj-seccion .pj-n{
  font-weight:800;font-size:var(--fs-sm, .8rem);color:#fff;
  background:rgba(255,255,255,.08);border-radius:999px;padding:.05rem var(--gap-sm, .5rem);
}
.pj-seccion:empty,.pj-seccion[hidden]{display:none}

@media(max-width:360px){
  .pj-rango{font-size:1.8rem;min-width:36px}
  .pj-btn{font-size:var(--fs-sm, .8rem);padding:var(--gap-xs, .3rem) var(--gap-md, .7rem)}
}