/* ════════════════════════════════════════════════════════════════════
   cop-rareza.css — LA RAREZA Y LA VALIDEZ DE UNA CARTA, UN SOLO DIBUJO
   (economía v3 · tanda 2 · 30/09/2026)
   ────────────────────────────────────────────────────────────────────
   ECONOMIA-V3 §4.1: «Precio fijo por rareza; la cara de la carta no
   vende acceso · 1 carta = 1 entrada · vencida queda en la colección».
   Desde esta tanda la RAREZA es lo que se compra, así que tiene que
   verse igual en las cinco pantallas de la tienda (tienda, promo-cartas,
   carta, abrir-sobre, inventario) y en la hoja de probabilidades. Una
   copia por pantalla es cómo nacieron las cuatro tarjetas de historial.

     .cop-rz[data-rz="plata"]           el rótulo de la rareza (no es un
                                        chip: no filtra ni se toca)
     .cop-vale[data-vale="vale|vencida"] «Vale como entrada hasta 30/10»
     [data-rz] en cualquier pieza       le da --rz-rgb para su luz / borde

   ⚠ Los colores son los tokens de rareza que ya existían en
   `cop-ui-tokens.css` (--bronce, --plata, --oro, --diamante, --leyenda),
   escritos como terna porque el borde y la luz componen rgba(). Honor es
   un dorado más claro que el Oro: vale como Oro, pero no es una carta
   de Oro (se gana, no se compra).
   ⚠ El texto va en blanco; el color sólo en el punto, el borde y la luz
   (regla 6 del sistema).
   ════════════════════════════════════════════════════════════════════ */
[data-rz="bronce"]  { --rz-rgb:205,127,50 }
[data-rz="plata"]   { --rz-rgb:184,192,204 }
[data-rz="oro"]     { --rz-rgb:255,194,51 }
[data-rz="diamante"]{ --rz-rgb:157,43,255 }   /* Especial = violeta (Franco, 07/10/2026) */
[data-rz="leyenda"] { --rz-rgb:12,149,235 }   /* Legendaria = celeste */
[data-rz="honor"]   { --rz-rgb:255,222,140 }

/* ── el rótulo ──────────────────────────────────────────────────── */
.cop-rz{
  display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem);
  box-sizing:border-box; max-width:100%;
  padding:.22rem .5rem .22rem .42rem; border-radius:999px;
  font:800 var(--fs-xs, .72rem)/1 'Inter', sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text, #f4f6fb); white-space:nowrap;
  background:rgba(var(--rz-rgb, 255,255,255), .10);
  box-shadow:inset 0 0 0 1px rgba(var(--rz-rgb, 255,255,255), .42);
}
.cop-rz::before{
  content:''; flex:0 0 auto; width:.46rem; height:.46rem; border-radius:50%;
  background:rgb(var(--rz-rgb, 255,255,255));
  box-shadow:0 0 8px rgba(var(--rz-rgb, 255,255,255), .85);
}
.cop-rz[hidden]{ display:none }

/* ── la validez como entrada ────────────────────────────────────── */
.cop-vale{
  display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem);
  font:600 var(--fs-xs, .72rem)/1.25 'Inter', sans-serif;
  color:var(--text-dim, #9aa3b5); white-space:nowrap;
}
.cop-vale::before{
  content:''; flex:0 0 auto; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--ok, #22c55e); box-shadow:0 0 6px rgba(34,197,94,.7);
}
.cop-vale[data-vale="vale"]{ color:var(--text, #f4f6fb) }
/* por vencer (menos de 3 días): el punto en dorado, el texto igual */
.cop-vale[data-pronto]::before{ background:var(--oro, #ffc233); box-shadow:0 0 6px rgba(255,194,51,.75) }
/* vencida: queda en la colección, apagada (no roja: no es un error) */
.cop-vale[data-vale="vencida"]::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--text-faint, #5a6275) }
.cop-vale[hidden]{ display:none }

/* ── el botón adentro de una pieza de una rareza ─────────────────────
   «Comprar» de un sobre o de una carta lleva el color de lo que compra
   (la rareza), como antes el sobre Leyenda llevaba su dorado. ⚠ Va con
   0-5-0 porque `.cop-borde` escribe su color con 0-3-0. */
[data-rz] .cop-b.cop-borde.cop-borde.cop-borde{ --borde-rgb:var(--rz-rgb, 12,149,235) }
/* la «i» de las probabilidades, adentro de un sobre de una rareza, con
   su color (la pieza vive en `cop-sobre-info.css`; su respaldo era
   `--promo-c`, que en los tokens es un rojo de las promos viejas) */
[data-rz] .cop-sp-i{ border-color:rgb(var(--rz-rgb, 12,149,235)) }
