/* Dibujo de los cosméticos de perfil. Va junto con avatares.css.
   El catálogo (qué marcos, banners y pines existen) está en cosmeticos.js. */

/* ===== MARCO =====
   El anillo va ENCIMA de la foto y sobresale hacia afuera, así poner o sacar
   un marco no cambia el tamaño ni corre nada de lugar.

   El -25.8% no es un número al azar: las imágenes de los marcos están
   recentradas para que el hueco del anillo quede en el medio y ocupe el 66%
   del lado. Para que una foto de lado A llene ese hueco, el marco tiene que
   medir A/0,66 = 1,515·A, o sea sobresalir (1,515−1)/2 = 25,8% por lado.
   Si se cambia el arte hay que mantener esa proporción. */
.jmarco{position:relative;display:inline-flex;flex-shrink:0}
.jmarco > *{position:relative;z-index:0}
/* El gradiente de respaldo: se ve solo si la imagen del anillo no carga. */
.jmarco::after{content:"";position:absolute;inset:-25.8%;z-index:1;pointer-events:none;
  border-radius:50%;background:var(--jm)}
.jmarco .jav{z-index:2}
/* El anillo de verdad, encima de todo. */
.jmarco-ani{position:absolute;inset:-25.8%;width:151.6%;height:151.6%;max-width:none;
  z-index:3;pointer-events:none;object-fit:contain}
.jmarco.gira .jmarco-ani{animation:jm-gira 7s linear infinite}
@keyframes jm-gira{to{transform:rotate(360deg)}}

/* ===== PIN =====
   La imagen se dibuja arriba del SVG de respaldo. Si el archivo no carga,
   el onerror la saca y queda el dibujo. */
.jpin{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.jpin svg,.jpin img{position:absolute;inset:0;width:100%;height:100%}
.jpin svg{color:inherit}
.jpin img{object-fit:contain}

/* ===== BANNER DE LA FILA =====
   El banner se dibuja en dos capas que hacen cosas distintas:

   1. De fondo de la fila, muy apagado. Solo le presta el color. La imagen la
      pone `fondoFila()` en el atributo style; el velo lo pone este archivo.
   2. Como PIEZA, entero y nítido, en el hueco libre de la fila. Eso es
      `.jbanner-pieza`.

   EL VELO VA ACÁ Y NO EN EL ATRIBUTO style, y el motivo importa: en el celular
   la fila deja de ser una fila y pasa a ser una tarjeta, y ahí hace falta un
   velo más flojo. Un velo escrito en el style no se puede aflojar desde una
   media query, así que terminaban apilándose dos y el banner no se veía.

   Se dibuja con un box-shadow interno enorme en vez de una capa aparte porque
   un `::before` adentro de un <tr> no funciona: el navegador lo mete dentro de
   la primera celda. El box-shadow se pinta arriba del fondo y abajo del
   contenido, que es justo lo que tiene que hacer un velo. */
.jfila-banner,
.jfila-previa{--jvelo:rgba(7,12,20,.95);box-shadow:inset 0 0 0 2000px var(--jvelo)}
.jfila-banner.jfila-propia,
.jfila-previa{--jvelo:rgba(20,15,4,.94)}

/* La pieza: el banner entero, sin recortar ni estirar.

   El truco es que fija el ALTO y deja el ancho libre. Así se adapta sola a la
   proporción del arte: con los banners 5:1 de ahora queda de 230px de ancho, y
   si algún día llegan con otra proporción sigue entrando completo.

   Va anclada a la derecha de la celda de números y se corre hacia afuera para
   caer en el hueco que queda entre el botón "+N más" y el emblema. Ese hueco
   se midió sobre la fila real: del 68% al 88% del ancho no cae ninguna letra.
   El borde izquierdo se desvanece para que no parezca un recorte pegado. */
.jbanner-pieza{position:absolute;top:50%;right:-60px;transform:translateY(-50%);
  height:46px;width:auto;max-width:none;z-index:2;pointer-events:none;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%)}

/* La vista previa del perfil ("así te ven en los sorteos") es una franja mucho
   más corta que la fila de verdad: 520x62 contra 1180x55. Dos ajustes:

   · La pieza va corrida 104px para adentro, que es lo que ocupan el emblema y
     el porcentaje. Pegada al borde los tapaba.
   · El velo va más cerrado que en la fila. Al ser una caja tan chica, del
     fondo entra mucho más banner y se leía el nombre del agente por atrás del
     texto, compitiendo con la pieza. */
.jfila-previa{position:relative;overflow:hidden;--jvelo:rgba(20,15,4,.97)}
.jfila-previa .jbanner-pieza{right:104px}

/* En el celular la fila es una tarjeta alta y angosta: el texto ocupa todo el
   ancho y no queda hueco para la pieza. Se saca, y el banner queda de fondo,
   que es como lo aprobó el cliente.

   El recorte se elige a mano: la tarjeta es casi cuadrada (362x180) y el banner
   es 5:1, así que entra el alto completo y el 40% del ancho. Con `75%` esa
   ventana cae sobre el personaje, que es lo que se reconoce. No hace falta
   ningún zoom, así que tampoco se agranda la imagen: antes se dibujaba a
   1440px de ancho y ahora a 900, la mitad de exigente. */
@media (max-width: 768px){
  .jbanner-pieza{display:none}
  .jfila-banner,
  .jfila-previa{background-position:75% center !important}
  .jfila-banner{--jvelo:rgba(7,12,20,.76)}
  .jfila-banner.jfila-propia,
  .jfila-previa{--jvelo:rgba(20,15,4,.74)}
}

/* ===== MUESTRAS (los selectores del perfil) ===== */
.jmuestra{display:block}
.jm-marco{position:relative;width:52px;height:52px;margin:0 auto;
  border-radius:50%;background:var(--jm)}
.jm-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.jm-marco.gira{animation:jm-gira 7s linear infinite}
/* La baldosa del selector muestra el banner ENTERO, igual que la pieza de la
   fila: `contain` y no `cover`. Con `cover` la baldosa recortaba a lo ancho y
   en el celular, que es angosta, quedaban nombres cortados ("ZAN", "LOW").
   Con `contain` sobra un poco de aire arriba y abajo, que es preferible a
   cortar. Y sirve para cualquier proporción que llegue. */
.jm-banner{width:100%;height:46px;background-size:contain !important;
  background-position:center !important;background-repeat:no-repeat !important}
.jm-pin{display:flex;align-items:center;justify-content:center;height:52px}

@media (prefers-reduced-motion: reduce){
  .jmarco.gira::after,.jm-marco.gira{animation:none}
}