/* ════════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE RECOMPENSA DEL NIVEL ACTUAL  (29/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«en Champions y en Divisions poner el menú arriba con las
   recompensas para el nivel en el que se encuentra, como aparece en la
   página de rangos»*.

   ⚠⚠ ESTO NO ES UNA COPIA DE LA TARJETA DE RANGOS: ES LA TARJETA DE
   RANGOS, MUDADA. Vivía escrita adentro de `rangos.html` —60 líneas de
   CSS y su markup—, y el pedido de Franco la pone en una segunda
   pantalla. Copiarla habría dejado dos tarjetas que se ven iguales hoy
   y se separan en el primer ajuste: la misma historia de la escalera,
   del dorsal estampado y del corte de la camiseta. Se mudó, y rangos
   ahora la lee de acá como cualquier otra pantalla.

   ⚠ NI UN NÚMERO DE ESTA TARJETA ESTÁ ESCRITO ACÁ NI EN SU JS: todos
   salen de `cfg_recompensa_semanal()` en la base, vía `cop-semana.js`.
   Mientras no llegue la respuesta la tarjeta no se dibuja — mostrar un
   monto de relleno y corregirlo medio segundo después es peor que
   esperar.

   ⚠ LOS NOMBRES DE CLASE SON LOS DE SIEMPRE (`.week`, `.wk-*`) y eso es
   a propósito: mudar el archivo y renombrar las clases en el mismo paso
   son dos cambios que se tapan entre sí, y el que quede mal se atribuye
   al otro.
   ════════════════════════════════════════════════════════════════════ */

.week{
  display:none;                       /* la muestra el JS cuando hay datos */
  /* ⚠ SIN BORDE (F9-UI, 20/08/2026, Franco): «sin ese borde celeste
     alrededor, como todo el contenido de la página de rangos».
     ⚠⚠ Y SIN FONDO TAMPOCO (23/08/2026): *«sacar el color de fondo
     diferente de la parte de arriba de esa página, tiene que tener el
     mismo fondo que la página»*. El `#0b0d11` era lo último que quedaba
     de la caja; ya no separaba nada del banner y hacía que la primera
     sección se leyera como una tarjeta suelta arriba de una lista que
     no las usa.
     ⚠ Y CON EL FONDO SE VA EL PADDING LATERAL: sin caja que lo
     justifique, ese 1,1 rem dejaba el contenido corrido respecto de
     todo lo demás de la página. */
  border-radius:0;background:none;
  /* ⚠⚠ UN POCO DE AIRE A LOS COSTADOS (Franco, 30/08/2026): *«esa
     tarjeta tiene que tener márgenes normales de espacio a los costados,
     agregarle un poquito más de margen del contenido al borde de la
     pantalla, y mantener el mismo tamaño de letra en todo, ya que va a
     hacer que esté un poco más junto y mejor visualmente»*.
     ⚠ ES `padding` Y NO `margin`: la tarjeta no tiene fondo, así que
     los dos se verían igual — pero el `margin` la achicaría también
     para el `--wk-a` de la barra de progreso, que tiene que seguir
     yendo de punta a punta del contenido.
     ⚠⚠ Y «EL MISMO TAMAÑO DE LETRA EN TODO» LO LEÍ AL REVÉS LA PRIMERA
     VEZ. Entendí «que la letra quede como está» —el aire sale del
     borde, no de achicar el texto— y se lo pregunté. Franco contestó
     el 30/08: *«quería un solo tamaño de tipografía y que se respeten
     los márgenes acordemente»*. O sea: UNA sola medida para todo el
     contenido (está más abajo, en `--wk-letra`) Y este aire lateral,
     las dos cosas. Dejo escrita la lectura equivocada porque el
     comentario de al lado la explicaba con razones que suenan bien —y
     que no eran lo que pedía. */
  padding:0 var(--gap-sm, .5rem) var(--gap-xl, 1.2rem);margin-bottom:var(--gap-xl, 1.2rem);
}
.week.on{display:block}

/* ⚠⚠ TOCABLE SÓLO CUANDO ALGUIEN LE DA ALGO QUE ABRIR. En rangos la
   tarjeta no abre nada y no tiene que parecer un botón; en modos
   competitivos abre el detalle de recompensas. La diferencia la marca
   una clase que pone el JS, no dos hojas de estilo distintas. */
.week.tocable{cursor:pointer}
.week.tocable .wk-top{position:relative;padding-right:var(--gap-2xl, 1.8rem)}
.week.tocable .wk-top::after{
  content:'';position:absolute;right:.15rem;top:50%;
  width:.55rem;height:.55rem;border-right:2px solid var(--text-dim);
  border-bottom:2px solid var(--text-dim);
  transform:translateY(-50%) rotate(-45deg);
  /* ⚠ el chevron apunta a la DERECHA («abre otra cosa»), no hacia abajo
     («despliega acá»): lo que abre es un panel aparte. */
}
.week.tocable:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

.wk-top{display:flex;align-items:center;gap:var(--gap-lg, 1rem)}
/* el emblema al MISMO tamaño que las insignias de la lista de
   divisiones (74px, 62 en chico) — F9-UI, Franco: «el logo de la
   división igual que las divisiones» */
.wk-emblem{width:74px;height:74px;display:grid;place-items:center;flex:0 0 auto}
.wk-emblem .cop-div{--cop-div:74px;height:74px}
@media(max-width:520px){
  .wk-emblem{width:62px;height:62px}
  .wk-emblem .cop-div{--cop-div:62px;height:62px}
}
.wk-txt{flex:1 1 auto;min-width:0}

/* ══ UN SOLO TAMAÑO DE LETRA EN TODA LA TARJETA ═══════════════════
   Franco, 30/08/2026: *«quería un solo tamaño de tipografía y que se
   respeten los márgenes acordemente»*.

   Antes había CUATRO tamaños en una tarjeta de cinco líneas: el rótulo
   .72, el nombre de la división 1.05, el monto 1.15 y la leyenda .8.

   ⚠⚠ LA JERARQUÍA NO SE PIERDE, CAMBIA DE HERRAMIENTA. Lo que decía
   «esto es lo importante» era el tamaño; ahora lo dicen el PESO (800 en
   el nombre y en el monto, 500 en el rótulo) y el COLOR (blanco lo
   tuyo, apagado lo de contexto). Sin eso, un solo tamaño deja cinco
   renglones iguales y la tarjeta no se lee de un golpe.

   ⚠ EL RÓTULO BAJÓ DE 600 A 500 EN EL MISMO PASO, y no es un cambio de
   tamaño disfrazado: en mayúsculas y a la misma medida que el nombre de
   la división, «RECOMPENSA SEMANAL» le ganaba al «División 7» que tiene
   que ser el título. Antes lo resolvía el tamaño; ahora, el peso.

   ⚠ ES UNA PERILLA Y NO CUATRO NÚMEROS REPETIDOS: el día que este
   tamaño se toque, se toca acá. Cuatro `font-size` iguales escritos en
   cuatro reglas vuelven a separarse en el primer ajuste — que es
   exactamente lo que pasó para que hubiera cuatro tamaños.
   ══════════════════════════════════════════════════════════════════ */
.week{ --wk-letra:.85rem }
.wk-kicker{font-family:'Inter',sans-serif;font-weight:500;font-size:var(--wk-letra);
  letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim)}
.wk-div{font-family:'Inter',sans-serif;font-weight:800;font-size:var(--wk-letra);
  color:#fff;line-height:1.35}
.wk-monto{display:flex;align-items:center;gap:var(--gap-xs, .3rem);flex:0 0 auto;
  font-family:'Inter',sans-serif;font-weight:800;font-size:var(--wk-letra);
  color:#fff;white-space:nowrap}
/* ⚠ EL ÍCONO VA EN `em` Y POR ESO SIGUE SOLO AL TAMAÑO DE LA LETRA: con
   un valor en px habría que acordarse de bajarlo también, y la moneda
   quedaría más grande que el número que acompaña. */
.wk-monto .cop-ico{--cop-ico:1.25em}
/* progreso de duelos */
.wk-bar{margin-top:var(--gap-lg, 1rem);height:8px;border-radius:999px;background:var(--card-border);overflow:hidden}
/* ⚠ EL COLOR DE LA BARRA ES UNA PERILLA CON EL VALOR DE SIEMPRE POR
   DEFECTO. La tarjeta ahora vive también en Division League, que es
   violeta de punta a punta: una barra celeste ahí se lee como algo que
   quedó sin pintar. La pantalla que quiera otro color escribe
   `--wk-a`/`--wk-b`; la que no escriba nada —rangos— sigue igual que
   antes, sin que nadie tenga que ir a mirarla. */
.wk-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--wk-a,var(--primary)),var(--wk-b,var(--secondary)));
  transition:width .6s ease}
.wk-legend{display:flex;justify-content:space-between;gap:var(--gap-md, .7rem);margin-top:.5rem;
  font-family:'Inter',sans-serif;font-size:var(--wk-letra);color:var(--text-dim)}
.wk-legend b{color:#fff;font-weight:700}
.wk-legend .listo{color:#3ddc84;font-weight:700}
.wk-ultima{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--card-border);
  font-family:'Inter',sans-serif;font-size:var(--wk-letra);color:var(--text-dim)}
.wk-ultima b{color:#fff;font-weight:700}
@media(max-width:420px){
  .wk-top{flex-wrap:wrap}
  .wk-monto{width:100%;justify-content:flex-start}
}