/* ═══ Contrato visual común · Copa Internacional Promesas ═══════════════════
   Un solo archivo para los DOS front del ERP:

     · index.html + app.js  → el ERP interno, el que usa el equipo   (rojo)
     · club.php             → el portal de las delegaciones, externo (naranja)

   Aquí vive lo que tienen que compartir: la ESCALA. Espacios, esquinas, tiempos
   de animación, sombras, capas y el mínimo que se puede tocar con el dedo.

   Aquí NO viven los colores de marca. Son dos productos distintos y tienen que
   seguir distinguiéndose: el ERP es SISPRO y sigue rojo, el portal es la Copa y
   sigue naranja. Cada archivo pone el suyo. Lo que se normaliza es el ritmo, no
   la identidad.

   POR QUÉ EXISTE: cada uno tenía su propia escala inventada a mano. Entre los
   dos hay ~130 esquinas escritas con número fijo y seis valores distintos de
   radio, elegidos sueltos en su momento. Nada estaba roto: estaba disperso, que
   es lo que hace que los dos se separen un poco más en cada cambio.

   OJO con los radios de club.php: tiene dos juegos (16/12 y 8/5) y NO se pisan.
   El segundo vive dentro de `@media(min-width:1024px)`: el escritorio va más
   apretado a propósito. Si algún día parece un duplicado, no lo es.

   REGLA: si un valor lo usan los dos, va aquí. Si es de uno solo, va en su
   archivo. Cuando cambies algo aquí, sube el «?v=» del <link> en los dos.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Espacio: ritmo de 4px (Material / Apple HIG) ──────────────────────── */
  --cp-e-1:4px;  --cp-e-2:8px;  --cp-e-3:12px; --cp-e-4:16px;
  --cp-e-5:24px; --cp-e-6:32px; --cp-e-7:48px;

  /* ── Esquinas: cuatro, no seis ─────────────────────────────────────────── */
  --cp-r-xs:6px;     /* lo más apretado: celdas y chips en escritorio */
  --cp-r-s:8px;      /* etiquetas, botones pequeños          */
  --cp-r-m:12px;     /* tarjetas y controles                 */
  --cp-r-l:16px;     /* pop-ups, hojas, portadas             */
  --cp-r-full:999px; /* píldoras y puntos                    */

  /* ── Movimiento ────────────────────────────────────────────────────────────
     150-300ms es el rango en que un cambio se lee como causa-efecto: más rápido
     no se percibe, más lento se siente pesado. La salida va más corta que la
     entrada para que cerrar algo se sienta inmediato. */
  --cp-t-rapido:140ms; --cp-t-normal:220ms; --cp-t-lento:320ms;
  --cp-ease-entra:cubic-bezier(.32,.72,0,1);  /* desacelera al llegar */
  --cp-ease-sale:cubic-bezier(.4,0,1,1);      /* acelera al irse      */

  /* ── Capas: una escala, no números sueltos ─────────────────────────────── */
  --cp-z-nav:40; --cp-z-hoja:60; --cp-z-modal:250; --cp-z-aviso:400;

  /* ── Velo de fondo de los pop-ups ──────────────────────────────────────────
     Entre 40% y 60%: menos deja el fondo compitiendo con lo que se va a leer. */
  --cp-velo:rgba(10,16,34,.52);

  /* ── Área mínima que se puede tocar sin fallar ─────────────────────────── */
  --cp-toque:44px;
}

/* El modo oscuro se enciende distinto en cada uno —el portal con un atributo y
   el ERP con una clase— y no vale la pena unificar eso: obliga a tocar los dos
   archivos de JavaScript por un cambio que no se ve. Este archivo responde a
   los dos y ya. */
:root[data-tema="oscuro"], html.pp-dark{
  --cp-velo:rgba(0,0,0,.62);
  color-scheme:dark;
}

/* ── Las tres animaciones que comparten ─────────────────────────────────────
   Un pop-up entra desde donde va a quedarse: la hoja del celular sube desde
   abajo, la caja del computador aparece creciendo desde su centro. */
@keyframes cp-fade{ from{opacity:0} to{opacity:1} }
@keyframes cp-sube{ from{transform:translateY(14px);opacity:0} to{transform:none;opacity:1} }
@keyframes cp-aparece{ from{transform:scale(.97);opacity:0} to{transform:none;opacity:1} }

/* Quien pidió menos movimiento en su sistema operativo lo pidió en serio: puede
   ser mareo, migraña o un trastorno vestibular. Se apagan TODAS, no solo las
   decorativas, y se deja lo justo para que nada parezca congelado. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}