/* ════════════════════════════════════════════════════════════════════
   COP CAMISETA DE JUGADOR — apellido y número encima de la camiseta
   Va junto con cop-camiseta-jugador.js. 14/08/2026.

   ⚠ Las medidas de texto NO están acá: las calcula el JS en proporción
   al tamaño de la camiseta (.115 y .30 del lado), porque el mismo
   componente se usa a 80 px y a 140 px y un cuerpo fijo se rompe en uno
   de los dos. Acá va solo lo que no depende del tamaño.
   ════════════════════════════════════════════════════════════════════ */

.cj-camiseta{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  line-height:0;                 /* sin el hueco del baseline debajo */
}

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

/* ── LA CAMISETA PARTIDA AL MEDIO: MITAD DE CADA EQUIPO ──────────────
   Franco, 28/08/2026 (tarjeta de pick): *«la mitad de la izquierda del
   equipo local y la mitad de la derecha del visitante»*.
   Franco, 29/08/2026 (página de estadísticas): *«cambiar las 2
   camisetas por la que es una cortada a la mitad, mitad de cada
   equipo»*.

   ⚠⚠ ESTO VIVÍA EN `cop-tarjeta-pick.css` COMO `.tp-cam.doble` Y SE
   MUDÓ ACÁ (tanda X). Es el mismo corte en dos pantallas: copiado, el
   día que una cambie el eje o el solape la otra se queda con el corte
   viejo y nadie relaciona las dos cosas — no se ven juntas nunca.

   ⚠ NO HAY NINGUNA IMAGEN RECORTADA NUEVA: son las dos camisetas del
   sistema, del mismo tamaño que una sola, superpuestas y partidas por
   mitades con `clip-path`. El día que cambie una foto, la mitad cambia
   con ella.
   ⚠ EL CORTE CAE EN EL EJE DE LA PRENDA: la tela ocupa del 15,9 % al
   83,9 % del cuadrado (medido sobre el canal alfa), o sea que está
   centrada — partir el cuadrado al 50 % parte la camiseta al medio.
   ⚠ EL SOLAPE SALE DE `--cj-lado`, que escribe el JS con el MISMO
   número con el que pidió las dos camisetas. Antes salía de una variable
   de la tarjeta (`--tp-cam-s`), o sea que cada pantalla tenía que traer
   la suya. */
.cj-dupla{display:inline-flex; align-items:flex-end; gap:0; line-height:0}
.cj-dupla--par .cj-camiseta{clip-path:inset(0 50% 0 0)}
.cj-dupla--par .cj-camiseta + .cj-camiseta{
  clip-path:inset(0 0 0 50%);
  margin-left:calc(-1 * var(--cj-lado, 80px));
}

/* ── LA ANATOMÍA DE LA CAMISETA, MEDIDA — no estimada ─────────────────
   Las 195 fotos salen todas del mismo productor y comparten el lienzo,
   así que estos números valen para todas (verificado sobre 8 clubes de
   5 ligas, con silueta idéntica al píxel):

     lienzo                416 × 416
     camiseta              y 16..399   →   3,8 % .. 95,9 %
     el cuello termina en  y ≈ 70      →  17 %
     las mangas terminan   y ≈ 182     →  44 %
     el TORSO (el pecho, ya sin mangas)  x 110..305  →  26 % .. 73 %

   De ahí salen las dos medidas de abajo. Antes estaban puestas a ojo.  */

/* el APELLIDO arriba, como en una camiseta real */
.cj-nom{
  position:absolute;
  /* ⚠ 27 % DE MARGEN A CADA LADO — es EXACTAMENTE el pecho medido
     (26 %..73 %). Todo lo que pase de ahí cae sobre la manga. Con el 14 %
     que había antes la caja del texto era 72 % de ancho contra un pecho
     de 47 %, y "Mac Allister" se leía de hombro a hombro. Medido sobre
     el canal alfa, no calculado a ojo. */
  top:var(--cj-top,27%);left:27%;right:27%;
  text-align:center;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.5px;
  /* ⚠ EL BORDE VA DEBAJO DEL RELLENO. Sin `paint-order` el contorno se
     dibuja ENCIMA de la letra y se la come desde adentro: a 66 px un
     apellido queda como una mancha del color del borde. */
  paint-order:stroke fill;
  white-space:nowrap;
  /* ⚠⚠ ACÁ NO VA `overflow:hidden`, Y NO ES UN OLVIDO.
     Franco, 14/08/2026: «jamás puede verse recortado». Un `overflow`
     recorta por los CUATRO lados, y con `line-height:1` el que cortaba no
     era el ancho sino el ALTO: las tildes de "Martínez" por arriba y la
     cola de la "y" de "Mctominay" por abajo quedaban comidas. Y recorta
     callado: no rompe el diseño, no tira error, y en la captura el
     jugador simplemente se llama distinto.
     El ancho ya lo resuelve `ajustar()`, que ACHICA y después CONDENSA
     hasta que el apellido entra de verdad. Con eso no hay nada que
     recortar, así que recortar solo puede hacer daño.
     ⚠ El precio de esto: si algún día `ajustar()` no corre (JS apagado,
     el <b> perdido en un refactor), un apellido larguísimo se DESBORDA a
     la vista en vez de recortarse. Es a propósito: un desborde se ve y se
     arregla, un recorte no se ve nunca. */
  line-height:1.18;              /* aire para tildes y para la cola de la y */
}

/* ⚠ el <b> de adentro es lo que se condensa. Tiene que ser
   `inline-block` para tener ancho propio que medir, y el escalado va
   desde el centro para que el apellido no se corra de lado. */
.cj-nom > b{
  display:inline-block;
  font-weight:inherit;
  transform-origin:50% 50%;
}

/* el NÚMERO al centro del pecho. Arranca al 34 % —justo abajo del
   apellido— y mide 30 % del lado, así que ocupa 34 %..64 %: entra entero
   entre el cuello (17 %) y el ruedo, y cruza la línea de las mangas
   (44 %) por el centro, que es donde va en una camiseta de verdad. */
.cj-num{
  position:absolute;
  top:34%;left:0;right:0;
  text-align:center;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
  paint-order:stroke fill;
}

/* ── EL DORSAL ESTAMPADO ─────────────────────────────────────────────
   Franco, 27/08/2026: *«más realistas, sin el borde negro, de un solo
   color como si fuera estampado… bajale la opacidad… mucho más chico y
   en el pecho, justo entre medio de los dos pectorales»*.

   ⚠⚠ ESTO VIVÍA EN `cop-tarjeta-pick.css` Y SE MUDÓ ACÁ. Lo pidió
   Franco el 28/08/2026 para la carta del perfil: *«debe ser exactamente
   la misma aplicación que las tarjetas de picks de jugadores: el número,
   el tamaño y la posición»*. Copiado en las dos hojas, el mismo dorsal
   habría salido de dos tamaños distintos según la pantalla — que es
   justo lo contrario de lo que pidió.

   ⚠ VA DESPUÉS DE `.cj-num` Y NO ANTES: las dos son una clase sola
   (misma especificidad), así que la que manda es la ÚLTIMA. Escrito
   arriba hacía falta un `!important` en cada línea para ganarle a un
   rival que ni siquiera es más fuerte.

   ⚠ EL TAMAÑO NO ESTÁ ACÁ SINO EN EL JS (0,11875 del lado de la
   camiseta), porque el componente lo escribe en línea; y el contorno y
   la sombra tampoco se apagan acá: el JS directamente NO los escribe
   cuando el dorsal es estampado. Apagar en el CSS lo que otro archivo
   acaba de encender obliga a un `!important` por propiedad y deja las
   dos versiones vivas al mismo tiempo. */
.cj-num--estampado{
  top:25%;
  font-weight:700;
  letter-spacing:0;
  opacity:.72;
}

/* ⚠ SIN NÚMERO, EL APELLIDO NO SE MUEVE. Es tentador centrarlo cuando
   está solo, pero entonces la misma camiseta salta de lugar según haya
   o no alineación publicada, y el salto se ve como un error de la app.
   El apellido vive siempre en el mismo lugar. */