/* ════════════════════════════════════════════════════════════════════
   COP · LAS PROBABILIDADES DEL SOBRE — LA PIEZA, EN UN SOLO ARCHIVO
   16/09/2026
   ────────────────────────────────────────────────────────────────────
   Apple y Google exigen mostrar las probabilidades ANTES de una compra
   al azar. Sin esto la app no se puede ni enviar. Esto es el DIBUJO de
   esa lista; el dato lo trae `cop-sobre-info.js` desde el catálogo del
   servidor, que es la misma fuente que hace el sorteo.

   ⚠⚠ NO HAY UN MARCO ACÁ ADENTRO. La hoja que sube desde abajo es
   `cop-ui-hoja.css` —el velo, la caja, el tirador, la ✕ y la
   animación—, ya compartida por nueve pantallas. Escribir otra habría
   sido la décima copia del mismo cajón, que es exactamente cómo
   nacieron las cuatro tarjetas de historial que después no se parecían.
   Acá va SÓLO lo que la hoja muestra.

   ⚠ Y LA MISMA PIEZA SE USA EN LAS DOS PANTALLAS que llevan a una
   compra: la tienda (la «i» al lado de «Comprar») y la pantalla de
   confirmación (`abrir-sobre.html?comprar=…`, la «i» de la cabecera).
   Un solo generador, así no pueden decir números distintos.

   ⚠ SIN MARCOS Y SIN FONDO DISTINTO (regla 1 del sistema): las filas se
   separan con una LÍNEA entre ellas, no con una caja por fila. Y la
   línea es un borde INTERIOR (`fila + fila`), no un borde en todas:
   así no queda un trazo suelto arriba de la primera ni debajo de la
   última.
   ════════════════════════════════════════════════════════════════════ */

/* ── LA «i» QUE LA ABRE ──────────────────────────────────────────────
   ⚠⚠ ESTA REGLA SE MUDÓ DESDE EL `<style>` DE `tienda.html` (era
   `.sobre-info`), NO SE COPIÓ. Ahora la usan las dos pantallas, y el
   día que Franco le cambie el borde cambia en las dos.

   ⚠ ES UN BOTÓN DE VERDAD, no un span con un click: se llega con el
   teclado y los lectores de pantalla la anuncian. Y lleva `aria-label`,
   porque una «i» sola no dice nada.

   ⚠ FAMILIA «ÍCONO», NO «BOTÓN»: es cuadrada y sin texto, así que NO
   lleva `.cop-b`. Meterla en el botón borraría la distinción que el
   sistema define a propósito (ya pasó con `pc-act` y hubo que
   revertirlo).

   ⚠ EL COLOR SALE DE LA PROMO, con dos escalones de respaldo: la tienda
   declara `--promo-c` por sección y `abrir-sobre` declara `--pk-c`. Si
   no hay ninguno, el celeste de marca. Un componente no puede depender
   de que otra hoja declare su variable. */
.cop-sp-i{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  box-sizing:border-box;
  background:transparent;
  border:1.5px solid var(--promo-c, var(--pk-c, var(--primary,#0c95eb)));
  color:var(--text,#f4f6fb);
  font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-xs, .72rem);line-height:1;
  display:grid;place-items:center;padding:0;cursor:pointer;
  transition:background .2s;
}
/* ⚠ HOVER SÓLO CON PUNTERO DE VERDAD: en el teléfono el navegador
   simula el hover al apoyar el dedo y deja la «i» pintada — se lee como
   «el diseño cambió después de usarlo». */
@media (hover:hover) and (pointer:fine){
  .cop-sp-i:hover{
    background:color-mix(in srgb, var(--promo-c, var(--pk-c, var(--primary,#0c95eb))) 28%, transparent);
  }
}
.cop-sp-i:focus-visible{outline:2px solid var(--primary,#0c95eb);outline-offset:2px}
/* ⚠⚠ `display:grid` LE GANA AL ATRIBUTO `hidden`: las dos valen 0-1-0 y
   gana la última declarada. Van siete apariciones de este bug en el
   proyecto. Todo componente que declare `display` declara su `[hidden]`. */
.cop-sp-i[hidden]{display:none}

/* ── EL CUERPO DE LA HOJA ────────────────────────────────────────────
   ⚠ El techo del TEXTO es 1,5 rem y acá nada lo toca: la lista es de
   lectura, no de display. */
.cop-sp{
  font-family:'Inter',sans-serif;
  color:var(--text,#f4f6fb);
}
.cop-sp[hidden]{display:none}

.cop-sp-bajada{
  font-size:var(--fs-base, 1rem);line-height:var(--lh-base,1.3);
  color:var(--text,#f4f6fb);margin:0 0 var(--gap-lg,1rem);
}
.cop-sp-bajada b{color:#fff;font-weight:800}

.cop-sp-tit{
  font-family:'Anton',sans-serif;font-size:var(--fs-lg, 1.15rem);
  letter-spacing:.4px;text-transform:uppercase;color:#fff;
  margin:0 0 var(--gap-sm,.5rem);line-height:var(--lh-tight,1.1);
}

/* ⚠ SIN VIÑETAS Y SIN CAJA POR FILA. La hoja YA es la superficie: una
   pastilla por carta sería la caja adentro de la caja que la regla 1
   evita. */
.cop-sp-lista{list-style:none;margin:0;padding:0}
.cop-sp-lista[hidden]{display:none}

.cop-sp-fila{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap-lg,1rem);
  padding:var(--gap-md,.7rem) 0;
}
.cop-sp-fila[hidden]{display:none}
/* ⚠ SÓLO LAS LÍNEAS INTERIORES */
.cop-sp-fila + .cop-sp-fila{border-top:1px solid var(--card-border,#1e2330)}

/* ⚠⚠ EL NOMBRE SE PARTE ANTES QUE RECORTARSE. Un `text-overflow:
   ellipsis` acá esconde el final de «DAVOO XENEIZE» en 320 px y el
   defecto es INVISIBLE en una captura: hay que medir `scrollWidth`
   contra `clientWidth` para verlo. Prefiero dos renglones a un nombre
   a medias — la pantalla existe para que se lea QUÉ carta puede salir. */
.cop-sp-nom{
  font-weight:700;font-size:var(--fs-base, 1rem);
  line-height:var(--lh-base,1.3);color:#fff;
  min-width:0;overflow-wrap:anywhere;
}
/* ⚠ EL PORCENTAJE NO SE PARTE NUNCA y va con cifras de ancho fijo, para
   que la columna derecha quede alineada sola sin una tabla. */
.cop-sp-pct{
  flex:0 0 auto;white-space:nowrap;
  font-weight:800;font-size:var(--fs-base, 1rem);
  line-height:var(--lh-base,1.3);color:#fff;
  font-variant-numeric:tabular-nums;
}

/* ── LOS BLOQUES (economía v3, 30/09/2026) ──────────────────────────
   La hoja de un sobre por rareza tiene tres partes: la carta 1
   (garantizada), las otras (la rareza de cada una, de la tabla) y qué
   cara te puede tocar dentro de cada rareza (la vista del sorteo). Se
   separan con aire, no con cajas. (El renglón «Total» se fue: el de la
   rareza es la tabla tal cual y el de las caras suma 100 por rareza.) */
.cop-sp-bloque{ margin:0 0 var(--gap-xl, 1.2rem) }
.cop-sp-bloque[hidden]{ display:none }
.cop-sp-bloque:last-of-type{ margin-bottom:0 }
/* la izquierda de una fila: la cartita teñida + el nombre */
.cop-sp-izq{ display:flex; align-items:center; gap:var(--gap-sm, .5rem); min-width:0 }
.cop-sp-fila{ align-items:center }
.cop-sp-grupo + .cop-sp-grupo{ margin-top:var(--gap-lg, 1rem) }
.cop-sp-sub{
  display:flex; align-items:center; gap:var(--gap-sm, .5rem); margin:0 0 var(--gap-xs, .3rem);
  font:600 var(--fs-sm, .8rem)/1.2 'Inter', sans-serif; color:var(--text-dim, #9aa3b5);
}
.cop-sp-grupo .cop-sp-fila{ padding:var(--gap-sm, .5rem) 0 }
.cop-sp-grupo .cop-sp-nom{ font-weight:600 }

.cop-sp-nota{
  font-size:var(--fs-sm, .8rem);line-height:var(--lh-loose,1.5);
  color:var(--text-dim,#9aa3b5);
  margin:var(--gap-lg,1rem) 0 0;
}
/* ⚠ EL AVISO DE QUE NO HAY DATO NO ES UN ERROR ROJO: es la verdad de la
   pantalla. Se apaga, no se grita. Lo que NO puede pasar es que en su
   lugar aparezca un cero o un porcentaje de ejemplo. */
.cop-sp-falta{
  font-size:var(--fs-base, 1rem);line-height:var(--lh-base,1.3);
  color:var(--text-dim,#9aa3b5);margin:0;
}