/* ════════════════════════════════════════════════════════════════════
   COP · EL CARTEL DE RECOMPENSAS DE UNA DIVISIÓN  (30/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«tenés que agrandar todos los menús de la página que se abre
   con las recompensas, y mostrar logo y nombre de la división, abajo la
   cantidad de niveles, y abajo las 2 columnas con 2 filas de
   recompensas, y más abajo el botón de cerrar. Quiero que agregues el
   botón de tabs de “Común” y “Premium”… y si el usuario quiere hacer
   swipe ahí adentro donde están las recompensas, que también cambie de
   tab»*.

   ⚠⚠ ESTE ARCHIVO NACE DE DOS COPIAS QUE YA SE HABÍAN SEPARADO. El
   mismo cartel estaba escrito adentro de `rangos.html` y de
   `modos-competitivos.html`, con las mismas clases —`.rwd-caja`,
   `.rwd-head`, `.rwd-premios`— y dos diferencias que nadie puso a
   propósito: el de modos tenía el selector Común/Premium y el `.rwd-
   estado`, y el de rangos tenía un `--cop-ico:46px` que al otro le
   faltaba. Dos pantallas que muestran el mismo cartel y ya decían
   cosas distintas: exactamente el caso que este proyecto resuelve con
   un componente.

   ⚠ EL ORDEN DE ADENTRO ES EL QUE PIDIÓ FRANCO, en ese orden:
     insignia + nombre → cantidad de niveles → tabs → 2 × 2 → cerrar.
   ════════════════════════════════════════════════════════════════════ */

/* ══ 23/09/2026 · EL CARTEL, REDISEÑADO ════════════════════════════════
   Franco: *«a ese recuadro de recompensas que está en un montón de
   caminos de recompensas ponele un diseño mucho más moderno, estético y
   cercano a nuestra app, tanto en color como en bordes y todo»*.
   Lo que era: una caja gris (#12141c) con borde gris y un botón gris,
   cuatro premios flotando sin orden. Lo que la app dice en todos lados:
     · el FONDO ES EL DE LA APP (`--bg`) con la luz del acento arriba —
       la misma luz que la cabecera de un torneo—, no un gris propio;
     · el BORDE ES EL DE LOS BOTONES DEL SISTEMA (`cop-borde`): un
       degradé del acento, tenue arriba y encendido abajo. Se dibuja con
       dos fondos (padding-box / border-box) para no depender de que la
       pantalla cargue `cop-borde.css`;
     · los PREMIOS SIN CAJAS, separados por líneas: una cruz fina que
       divide el 2 × 2, como los tres datos de un torneo;
     · MOVIMIENTO CON PROPÓSITO: el cartel crece desde el centro (scale
       in) y los premios entran escalonados (stagger). Sin movimiento
       (reduced motion), todo aparece puesto.
   ⚠ LAS CLASES NO CAMBIAN: el JS de cuatro pantallas cuelga de ellas.
   ⚠⚠ `modos-competitivos.html` tenía SU copia de este cartel (mismas
   clases) y desde hoy carga esta hoja: sus reglas repetidas se borraron. */
.rw-detalle{
  position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:1.2rem;
  background:rgba(4,7,12,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overscroll-behavior:contain;
}
.rw-detalle.abierto{display:grid;animation:rwd-velo .22s ease-out both}
@keyframes rwd-velo{from{opacity:0}to{opacity:1}}
/* ⚠ MÁS GRANDE (Franco, 30/08: *«tenés que agrandar todos los menús»*):
   380 px de tope, alto con `max-height` y scroll propio. */
.rwd-caja{
  --rwd-a:var(--rwd-rgb, 12,149,235);
  position:relative;isolation:isolate;
  width:min(100%,380px);max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  border-radius:var(--r-card, 14px);padding:1.8rem var(--gap-xl, 1.2rem) var(--gap-xl, 1.2rem);text-align:center;
  border:1.5px solid transparent;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--rwd-a),.20), transparent 70%) padding-box,
    linear-gradient(var(--bg, #0b0e14), var(--bg, #0b0e14)) padding-box,
    linear-gradient(180deg, rgba(var(--rwd-a),.18), rgba(var(--rwd-a),.85)) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 40px rgba(var(--rwd-a),.10);
}
.rw-detalle.abierto .rwd-caja{animation:rwd-entra .42s cubic-bezier(.16,1,.3,1) both}
@keyframes rwd-entra{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ── 1 · insignia + nombre ─────────────────────────────────────────── */
.rwd-head{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:var(--gap-sm, .5rem)}
.rwd-insignia{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
/* la luz detrás de la insignia: la misma que enciende el dato destacado */
.rwd-insignia::before{
  content:'';position:absolute;inset:-14px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--rwd-rgb, 12,149,235),.35), transparent 72%);
  filter:blur(6px);
}
.rwd-insignia .cop-div{--cop-div:86px;height:86px}
.rwd-textos{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;min-width:0}
.rwd-tit{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;
  font-size:2.1rem;line-height:1;text-transform:uppercase;color:#fff;margin:0;
  white-space:nowrap;letter-spacing:.3px;
}
/* ── 2 · la cantidad de niveles, debajo ────────────────────────────── */
.rwd-sub{font:700 .76rem/1.2 'Inter',sans-serif;text-transform:uppercase;
         letter-spacing:.08em;color:rgb(var(--rwd-rgb, 12,149,235));margin:0;white-space:nowrap}

/* ── 3 · las tabs Común / Premium ──────────────────────────────────── */
/* ⚠ SON LAS TABS DEL SISTEMA en chico: subrayado del acento. */
.rwd-tabs{display:flex;justify-content:center;gap:var(--gap-2xl, 1.8rem);margin:1.2rem 0 1rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
/* ⚠⚠⚠ `[hidden]` NECESITA SU REGLA PORQUE ACÁ SE DECLARA `display`. */
.rwd-tabs[hidden]{display:none}
.rwd-tab{
  background:none;border:none;padding:var(--gap-sm, .5rem) .1rem var(--gap-md, .7rem);position:relative;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-md, .88rem);letter-spacing:.2px;
  color:var(--text-dim);transition:color .2s;
}
.rwd-tab::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:2.5px;border-radius:3px;
  background:rgb(var(--rwd-rgb, 12,149,235));transition:left .25s cubic-bezier(.16,1,.3,1),right .25s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){ .rwd-tab:hover{color:#fff} }
.rwd-tab.active{color:#fff}
.rwd-tab.active::after{left:0;right:0}
/* ⚠ EL PUNTITO ES «LA QUE COBRÁS», distinto de «la que mirás». */
.rwd-tab.rwd-toca::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:var(--gap-xs, .3rem);vertical-align:middle;background:rgb(var(--rwd-rgb, 12,149,235));
}

/* ── 4 · los premios, 2 × 2 SIN CAJAS, con la cruz de líneas ────────── */
/* ⚠⚠ `touch-action:pan-y`: el swipe horizontal cambia de tab y el
   vertical sigue scrolleando el cartel. */
.rwd-premios{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:var(--gap-sm, .5rem) 0 var(--gap-xl, 1.2rem);
  touch-action:pan-y;
}
.rwd-p{
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm, .5rem);
  padding:1rem var(--gap-sm, .5rem);
  animation:rwd-p-entra .45s cubic-bezier(.16,1,.3,1) both;
}
/* la cruz: línea vertical entre columnas y horizontal entre filas */
.rwd-p:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}
.rwd-p:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
.rwd-p:nth-child(1){animation-delay:.06s}
.rwd-p:nth-child(2){animation-delay:.12s}
.rwd-p:nth-child(3){animation-delay:.18s}
.rwd-p:nth-child(4){animation-delay:.24s}
@keyframes rwd-p-entra{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.rwd-p-ico{font-size:2.1rem;line-height:1;display:grid;place-items:center;height:52px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.rwd-p-ico .cop-ico{width:46px;height:46px;--cop-ico:46px}
.rwd-p-val{font-family:'Anton','Arial Narrow',sans-serif;font-size:1.6rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.rwd-p-lbl{font:700 .66rem/1 'Inter',sans-serif;text-transform:uppercase;
           letter-spacing:.08em;color:var(--text-dim)}

/* ── 5 · cerrar: el botón del sistema, a lo ancho ──────────────────── */
/* ⚠ SE DIBUJA ACÁ Y NO CON `cop-b`: no todas las pantallas que abren el
   cartel cargan `cop-boton.css`. Es el mismo trazo —borde en degradé
   del acento, radio 14, Inter 700— escrito para no depender de eso. */
.rwd-cerrar{
  display:block;width:100%;min-height:46px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-base, 1rem);color:#fff;
  border:1.5px solid transparent;border-radius:14px;padding:.7rem var(--gap-2xl, 1.8rem);cursor:pointer;
  background:
    linear-gradient(var(--bg, #0b0e14), var(--bg, #0b0e14)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(var(--rwd-rgb, 12,149,235),.8)) border-box;
  transition:transform .12s ease, box-shadow .2s ease;
}
.rwd-cerrar:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .rwd-cerrar:hover{box-shadow:0 0 18px rgba(var(--rwd-rgb, 12,149,235),.28)}
}
.rwd-cerrar:focus-visible{outline:2px solid rgb(var(--rwd-rgb, 12,149,235));outline-offset:3px}
/* ⚠ el hueco del selector de modos competitivos (lo mueve `traerSwitch`) */
.rwd-switch{display:flex;justify-content:center;margin-bottom:var(--gap-xl, 1.2rem)}
.rwd-switch:empty{display:none}

@media (prefers-reduced-motion: reduce){
  .rw-detalle.abierto,.rw-detalle.abierto .rwd-caja,.rwd-p{animation:none}
}
@media (max-width:359px){
  .rwd-caja{padding:var(--gap-2xl, 1.8rem) 1rem var(--gap-xl, 1.2rem)}
  .rwd-tit{font-size:1.8rem}
  .rwd-insignia .cop-div{--cop-div:72px;height:72px}
}