/* ═══════════════════════════════════════════════════════════════════
   cop-ui-base.css · LA ESCALA — CALIGRAFÍA, INTERLINEADO, RADIOS, AIRE
   Componente compartido. Se toca UNA vez y baja a todas las pantallas.

   ⚠⚠ ESTE ARCHIVO NO PUEDE CAMBIAR NADA POR ENLAZARLO. A PROPÓSITO.
     Solo declara variables en :root y clases con prefijo `.cop-`, un
     espacio de nombres que HOY no existe en ninguna página. Hasta que
     se agregue la clase a mano, no encuentra a quién estilar.
     Es la misma decisión que salvó a cop-ui-tabs.css, al registro de
     íconos y a cop-ui-partido.css: se AGREGA, no se reescribe.
     (§9sexdecies, §9quater, §9novodecies)

   ⚠ VA DESPUÉS de cop-ui-tokens.css y ANTES del <style> de la página.
     Si la página declara su propio valor, sigue ganando el suyo. El día
     que se unifique esa pantalla, se borra su línea y hereda de acá.

   ────────────────────────────────────────────────────────────────────
   POR QUÉ EXISTE (medido el 12/08/2026 sobre las 30 páginas vivas,
   leyendo el CSS real, no un resumen):

     · 36 valores distintos de border-radius conviviendo
     · 70 tamaños de tipografía distintos
     · 19 interlineados distintos
     · 89 reglas de botón con 11 radios, 13 alturas y 15 tamaños
     · 403 "cajas" (fondo + radio) repartidas en 28 páginas
     · 592 KB de CSS pegado adentro de los HTML

   No es que el diseño esté mal: son 30 versiones ligeramente distintas
   del mismo diseño. Variaciones que de a una no se notan y juntas se
   leen como algo sin terminar. Es exactamente el diagnóstico que ya
   había hecho cop-ui-tokens.css el 03/08 para los colores — esto es lo
   mismo para la caligrafía, el interlineado y la forma.

   ⚠ LOS VALORES SON LOS CANÓNICOS, NO LOS LINDOS. Cada uno es el que
     ya usaba la mayoría de la app. Elegirlos por frecuencia y no por
     gusto es lo que hace que aplicar esto se vea como "ordenar", no
     como "rediseñar".
   ═══════════════════════════════════════════════════════════════════ */

:root{

  /* ════════ 1 · CALIGRAFÍA ════════
     70 tamaños → 8. Entre paréntesis, los usos reales que absorbe cada
     escalón. Ninguno es inventado: todos son el valor más frecuente de
     su grupo.

     ⚠ REGLA DE FRANCO (12/08, §9unquinquagies §6): ante la duda, la
       ELECCIÓN HEREDA EL TAMAÑO DEL NOMBRE, no al revés. Y los pesos
       van en 700 como estadísticas — lo que difería entre pantallas
       era el peso, no la fuente: es la misma Inter en toda la app. */

  /* ⚠⚠ LA ESCALA SE ABRIÓ — 18/09/2026, EL MAPA DE ROLES CONFIRMADO
     Franco, 18/09: *«que ordene en todos lados los parámetros de espacio,
     tamaños de letra fijos por sección ya sea título, subtítulo, etc.»* ·
     *«quiero que se vea pro (…) muchas son réplicas mal logradas»*.

     Medido antes de tocar: .80 · .85 · .95 eran TRES escalones dentro de
     .15rem — a ojo, el mismo texto. Un salto del 6 % no se ve, así que la
     app tenía siete tamaños y tres jerarquías. Ese es buena parte del
     "medio hecho": no era falta de diseño, era falta de CONTRASTE.

     Ahora cada escalón sube ~12 % sobre el anterior (progresión
     geométrica), que es el mínimo que el ojo registra como "otro nivel".
     ⚠ EL TECHO SIGUE EN 1.5rem — Franco, 12/08: *«no quiero textos tan
       grandes»*. La escala se abrió hacia ABAJO y por el medio, no hacia
       arriba: 2xl no se movió ni un punto.

     ⚠⚠ CADA ESCALÓN TIENE UN TRABAJO, Y ES EL ÚNICO QUE TIENE. Para eso
     existe el mapa: para que nadie tenga que ELEGIR un tamaño nunca más.
     Si una pieza no entra en ningún renglón de abajo, el problema es la
     pieza, no la escala. */

  --fs-xs:    .72rem;   /* MICRO — pies, sellos, leyendas                  */
  --fs-sm:    .80rem;   /* RÓTULO — encabezado de columna, chip            */
  --fs-md:    .88rem;   /* DATO SECUNDARIO — la 2ª línea de una fila       */
  --fs-base:  1rem;     /* CUERPO — texto corrido, botones                 */
  --fs-lg:   1.15rem;   /* TÍTULO DE TARJETA / FILA — el nombre de lo que
                           se toca                                        */
  --fs-xl:    1.3rem;   /* TÍTULO DE SECCIÓN — lo escribe `.cop-tsec`      */
  --fs-2xl:   1.5rem;   /* TÍTULO DE PANTALLA — uno por pantalla, en Anton.
                           EL TECHO.                                      */

  /* ⚠ LA ÚNICA EXCEPCIÓN AL TECHO: el NÚMERO DE DISPLAY — marcador,
     premio, contador — en Anton y con su tamaño propio. No es texto: es
     una cifra que se mira de lejos. No lleva token a propósito, porque
     tokenizarlo invitaría a usarlo para texto. */

  /* ⚠ NO HAY ESCALÓN MÁS GRANDE, Y ES UNA DECISIÓN (Franco, 12/08):
       *"el 3xl sacalo, no quiero textos tan grandes"*.
     El techo de la app es 1.5rem. Lo que hoy vive arriba de eso baja a
     --fs-2xl cuando su tanda lo toque. El caso concreto:
       · estadisticas-jugador.html, el APELLIDO del hero — hoy 2.05rem
         (1.7 en ≤390px). Baja a 1.5. Es el mismo bloque que Franco
         pidió "enorme" el 12/08 a la mañana; esta decisión lo corrige.
     Se toca en la tanda 9. */

  /* ════════ 2 · INTERLINEADO ════════
     19 → 4. El `1` no se toca: es el de los números y los íconos, donde
     cualquier aire de más descentra la caja. */

  --lh-none:  1;        /* números, íconos, marcadores   (137 usos) */
  --lh-tight: 1.1;      /* títulos y botones             (1.05 1.1 1.15) */
  --lh-base:  1.3;      /* texto corrido de interfaz     (1.2 1.25 1.3 1.35) */
  --lh-loose: 1.5;      /* párrafos — casi no se usa en esta app */

  /* ════════ 3 · FORMA — DOS RADIOS, NO MÁS ════════
     36 radios → 2. Decisión de Franco, 12/08: *"no quiero tantas
     opciones, quiero que sean solo 2… la de fila está clara para cuáles
     va, después la otra va para chips y todo lo que suplante a los otros
     tamaños"*.

     Esto es lo que da la FIRMEZA que pidió: hoy conviven 9·10·11·12·14·
     16·18·20·22·24 y píldoras de 999. Ninguna de esas diferencias la
     decidió nadie — se acumularon. Con dos, la app deja de tener
     "esquinas de humor variable".

     ⚠ HALLAZGO: el token `--radius: 18px` de cop-ui-tokens.css NO es el
       radio de la app. Se usa 23 veces. El radio real, medido, es 14px
       (121 usos) — y es también el del botón del sistema definido el
       01/08 y el de la fila de partido. `--radius` queda como está para
       no romper a quien lo lea, pero lo canónico es `--r-card`. */

  --r-fila:   0;        /* la fila NO tiene radio: no es caja.
                           Filas de partido, de liga, de historial, de
                           misión — todo lo que se separa por una línea. */

  --r-card:  14px;      /* TODO LO DEMÁS. Tarjeta, botón, banner, chip,
                           píldora, hoja, modal, cajita interna, imagen.
                           Absorbe: 2·3·5·6·7·8·9·10·11·12·15·16·18·20·
                           22·24 y las píldoras de 999. */

  /* ⚠ EL CÍRCULO NO ES UN RADIO, ES UNA FORMA — y por eso sobrevive.
       `50%` aparece 134 veces en 26 páginas: avatares, insignias de
       división, el punto de "en vivo", las fichas de la ruleta. No es
       una variante de esquina redondeada: es "esto es un círculo".
       Mandarlo a 14px convierte 134 círculos en cuadraditos.
       Queda declarado aparte, fuera de la escala de radios.
       ⚠ Si Franco quiere que también caiga, es borrar esta línea. */
  --r-round: 50%;

  /* ════════ 4 · AIRE ════════
     Dos medidas, y son distintas a propósito (§9novodecies): dónde
     TERMINA la línea no es lo mismo que dónde ARRANCA el contenido. */

  --aire-contenido: 16px;  /* el margen de contenido del resto de la app */
  --aire-fila:      22px;  /* los 16 + los 6 que pidió Franco para que ni
                              la camiseta ni el botón queden pegados.
                              Es el mismo valor que --cop-pt-aire. */

  /* ════════ 4bis · RITMO VERTICAL — LA SEPARACIÓN ES UN ESTÁNDAR ════
     ⚠⚠ PEDIDO EXPLÍCITO DE FRANCO (12/08): *"es muy importante marcar la
     misma distancia siempre a lo largo de toda la plataforma, no quiero
     decirlo más, empezá a usar estándares fijos"*.

     Medido antes de escribir esto: **77 valores de separación distintos**
     en las 30 páginas. Es el mismo desorden que los radios y la
     tipografía, y era el que faltaba en esta escala.

     6 escalones. Como siempre, son los CANÓNICOS —el valor que ya usaba
     la mayoría—, no los lindos:
       .3rem (127 usos) · .5 (222) · .7 (224) · 1rem (347) · 1.2 (109) */

  /* ⚠⚠ EL AIRE SE ELIGE POR DISTANCIA, NO POR GUSTO — 18/09/2026.
     Los VALORES no se movieron (son los canónicos de la medición del
     12/08). Lo que se fijó es QUÉ TRABAJO hace cada uno, que antes
     estaba escrito de otra manera y por eso cada pantalla elegía. La
     regla es de escala: cuanto más lejos están dos cosas en el árbol,
     más aire llevan, y la distancia no se decide dos veces. */

  --gap-xs:  .3rem;    /* MICRO — dentro de una pieza          (.2 .25 .35) */
  --gap-sm:  .5rem;    /* RÓTULO ↔ DATO                        (.4 .45 .55) */
  --gap-md:  .7rem;    /* ÍCONO ↔ TEXTO, dentro de una fila    (.6 .65 .75) */
  --gap-lg:  1rem;     /* ENTRE FILAS de una lista             (.85 .9 1.1) */
  --gap-xl:  1.2rem;   /* ENTRE BLOQUES de una sección         (1.3 1.4)    */
  --gap-2xl: 1.8rem;   /* ENTRE SECCIONES — el respiro grande               */
  /* ⚠ el AIRE LATERAL no está acá: es `--cop-aire` de cop-ui-tokens.css,
     que ya lo comparten el contenido y la topbar. Un número, un lugar. */

  /* ⚠⚠ EL AIRE DE UN TÍTULO DE SECCIÓN — Franco, 17/09/2026:
       *«tenés que mantener como regla la misma distancia arriba y abajo
       de ese título, tomando como referencia la que tiene con el texto
       de "Division League" que está arriba»*. Esa distancia, medida en
       la portada a 390px, es **1.1rem**. Es el único número nuevo de
       esta tanda y es el que usan TODOS los títulos de sección.
       ⚠ Va acá y no adentro de `cop-ui-titulo.css` porque lo tienen que
       poder leer también las pantallas que todavía no migraron al
       componente. Un número que vive en dos archivos es dos números. */
  --gap-tsec: 1.1rem;

  /* ⚠⚠ LA DISTANCIA QUE MÁS SE NOTA, Y LA QUE FRANCO SEÑALÓ:
       de la BARRA DE TABS al primer contenido de abajo.
       Medida en las 8 pantallas con tabs antes de fijarla:
         tienda 0 · misiones 0 · hitos 0 · estadisticas 11 ·
         ligas 16 · ranking 18 · torneo-juego 19
       Siete pantallas, cinco distancias, tres de ellas PEGADAS.
       **A partir de acá es UNA sola: 1rem.** Toda pantalla con tabs la
       usa; ninguna decide la suya. */
  --gap-tabs: 1rem;

  /* ════════ 5 · ALTOS COMPARTIDOS ════════
     "Que las tarjetas y los banners midan todos lo mismo" (Franco,
     12/08). Son PISOS, no altos fijos: una fila con más contenido crece
     igual, pero ninguna arranca más baja que la de al lado. */

  --alto-fila:   154px;                      /* = --cop-pt-alto. La FILA DE
                                                PARTIDO, que lleva dos
                                                renglones de equipo. */
  --alto-item:    56px;                      /* la fila de una LISTA (liga,
                                                ranking, misión, objeto):
                                                un renglón. Que las tres
                                                midan lo mismo es lo que
                                                hace que cambiar de tab no
                                                mueva nada bajo el dedo. */
  --alto-banner: clamp(92px, 15.8dvh, 156px);/* = --bn-h de la portada */

  /* ════════ 6 · SUPERFICIES, ELEVACIÓN Y MOVIMIENTO ════════
     Agregado el 19/09/2026 con `MANUAL-DE-MARCA.md` §3, §4 y §7.
     Franco: *«quiero que hagamos un manual de marca y dejemos todo claro
     (…) para que se aplique a cada una de las páginas de forma coherente
     y lineal»*.

     ⚠⚠ ESTOS TRES GRUPOS NO EXISTÍAN COMO TOKEN, y por eso cada pantalla
     los inventaba. Medido antes de escribirlos: 150 recetas de sombra
     distintas (la más repetida, 9 veces), 54 duraciones y ninguna curva
     canónica. No es que estuvieran mal elegidos: no estaban elegidos. */

  /* ── 6.1 · La rampa de superficies ──────────────────────────────
     UN SOLO TINTE (matiz 219–225°) y un escalón parejo de +3 puntos de
     luz. ⚠ NO ES UNA PALETA NUEVA: `--s1` ES `--card`, que ya se usa 450
     veces. Lo que se agrega son los dos escalones que faltaban y un
     fondo que deja de ser gris neutro.
     ⚠⚠ Y EL CAMBIO DE FONDO NO CUESTA CONTRASTE: `#0f0f0f` y `#0b0e14`
     tienen exactamente la misma luz (L6). Lo único que cambia es el
     matiz, de 0 % de saturación a 29 %. Ninguna pantalla se oscurece ni
     se aclara — sólo deja de verse muerta. */
  --s0:#0b0e14;   /* fondo de la app — reemplaza #0f0f0f (206 usos) */
  --s1:#11141d;   /* superficie / tarjeta — es `--card`, sin cambio */
  --s2:#161b25;   /* elevada — reemplaza #161616 (156 usos y NO era token) */
  --s3:#1c222e;   /* capa flotante: hoja, menú, modal */
  --b1:#1e2330;   /* borde sutil — es `--card-border`, sin cambio */
  --b2:#2c3546;   /* borde marcado */

  /* ⚠ EL TERCIARIO ACCESIBLE. `--text-faint` (#5a6275) da 3,16:1 sobre
     el fondo y NO llega al mínimo legible: sirve para adornos, no para
     texto. Todo rótulo va en `--t-resto` (#7c8597), que da 5,21:1 y ya
     existía declarado en `cop-ui-tokens.css` — no hubo que inventarlo.
     ⚠ Y EL VIOLETA TAMPOCO LLEVA TEXTO CHICO: #9d2bff da 3,88:1. Para
     letra violeta —Modo Carrera, que es todo violeta por decisión de
     Franco— va la variante clara. El MARCO sigue siendo #9d2bff. */
  --tx-3:#7c8597;      /* rótulos y etiquetas: 5,21:1 */
  --purple-tx:#b05cff; /* texto violeta: 5,35:1 */

  /* ── 6.2 · Elevación ────────────────────────────────────────────
     ⚠⚠ EN UNA INTERFAZ OSCURA LA SOMBRA CASI NO SE VE: LO QUE ELEVA ES
     LA LUZ. Una capa se separa del fondo porque es más clara, no porque
     tenga sombra; la sombra sólo confirma. Por eso cada nivel es una
     PAREJA superficie + sombra, y usar la sombra sola no eleva nada.
     Cuatro niveles y nada más: una sombra que no está acá es una sombra
     que alguien no decidió. */
  --elev-1:0 1px 2px rgba(0,0,0,.5);     /* apoyado: tarjetas */
  --elev-2:0 8px 24px rgba(0,0,0,.55);   /* elevado: menús, popovers */
  --elev-3:0 20px 48px rgba(0,0,0,.65);  /* flotante: hojas y modales */
  /* ⚠ EL ÚNICO BRILLO PERMITIDO, y va en UNA sola pieza por pantalla:
     la que el jugador tiene que mirar. Si brillan dos, no brilla
     ninguna. Lee el acento de la competencia, así que en Carrera y
     División sale violeta sin una regla nueva. */
  --luz-comp:0 0 24px rgba(var(--cop-acento-rgb, 12,149,235), .25);

  /* ── 6.3 · Movimiento ───────────────────────────────────────────
     ⚠⚠ LOS CINCO VALORES ESTÁN CONTADOS, NO ELEGIDOS: `.2s` aparece 387
     veces en la app, y las dos curvas 41 y 39. Son los que ya
     predominaban; lo único que cambia es que ahora tienen nombre y son
     los únicos.
     ⚠ NADA SE MUEVE MÁS DE .3s: arriba de eso el jugador espera a la
     interfaz en vez de usarla. */
  --dur-rapido:.15s;   /* apretado, hover, cambio de estado */
  --dur-base:.2s;      /* el canónico — todo lo demás */
  --dur-lento:.3s;     /* una capa que entra o sale */
  --curva-salida:cubic-bezier(.2,.8,.2,1);      /* algo que aparece */
  --curva-entrada:cubic-bezier(.22,.61,.36,1);  /* algo que se va */
}

/* ⚠⚠ Y LA REGLA QUE HACE QUE EL MOVIMIENTO NO SEA UN PROBLEMA DE SALUD.
   Hay gente que se marea con el movimiento en pantalla, y el sistema
   operativo ya sabe quién: lo dice en `prefers-reduced-motion`. No se
   apaga la app, se apaga el movimiento — las duraciones se van casi a
   cero y todo sigue funcionando igual.
   ⚠ `!important` y `!important` en los tres: acá el objetivo es
   justamente ganarle a cualquier regla de pantalla, que es lo contrario
   de lo que pasa en el resto del sistema. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-rapido:.01s; --dur-base:.01s; --dur-lento:.01s; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   6 · EL BOTÓN DEL SISTEMA

   ⚠ NO HAY NADA QUE DISEÑAR ACÁ: HAY QUE HACER CUMPLIR.
     El proyecto definió este botón el 01/08 — #161616 · borde 1,5 ·
     Inter 600 · radio 14. De 391 botones en pantalla, solo 105 lo
     cumplen, con 8 radios distintos conviviendo.

   Los valores son EXACTAMENTE los de `.mc-btn` en cop-ui-partido.css,
   copiados al carácter. Si algún día cambian, cambian en los dos
   archivos en la misma pasada (regla del espejo, §0).

   ⚠ El fondo #161616 sobrevive aunque la fila no tenga ninguno: el
     fondo del botón es lo que lo hace un botón. Es lo único que queda
     de la caja.
   ═══════════════════════════════════════════════════════════════════ */

/* El secundario no compite con el de jugar: mismo cuerpo, borde apagado. */

/* El lleno, para la acción principal de una pantalla (no de una fila). */

@media (max-width:400px){
}

/* ═══════════════════════════════════════════════════════════════════
   7 · LA ZONA SIN CAJA, PARA LO QUE NO ES UNA FILA DE PARTIDO

   El idioma visual que Franco fijó el 05/08 vale para toda la app, no
   solo para los partidos: sin caja, separado por una línea que cruza la
   pantalla de borde a borde, contenido metido hacia adentro.

   `cop-ui-partido.css` ya lo hace para la FILA DE PARTIDO, que tiene su
   propio marcado (camiseta, marcador, botón). Esto es lo mismo para
   cualquier otra lista: ligas, recompensas, historial, misiones, hitos,
   objetos de inventario.

   ⚠ NO es "agregarle .cop-partido a todo". Esas listas muestran otra
     información. Hay que ADAPTAR el contenido al formato — el formato
     es el TRATAMIENTO, no el HTML de la fila de partido (§9novodecies).
   ═══════════════════════════════════════════════════════════════════ */

.cop-lista{
  /* llega al borde físico sin saber cuánto padding tiene el contenedor
     de cada página — que es distinto en cada una */
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding:0;
}

.cop-lista > .cop-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--gap-md, .7rem);
  padding:.85rem var(--aire-fila);
  background:none;
  border:0;
  border-radius:var(--r-fila);
  border-bottom:1px solid var(--cop-pt-linea, rgba(255,255,255,.07));
  font-size:var(--fs-base);
  line-height:var(--lh-tight);
  color:var(--text,#f4f6fb);
  text-align:left;
  width:100%;
  min-height:var(--alto-item);
}

.cop-lista > .cop-item:first-child{
  border-top:1px solid var(--cop-pt-linea, rgba(255,255,255,.07));
}

/* el nombre manda; lo que va al lado se achica para que entre entero */
.cop-lista > .cop-item .cop-item-nom{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--fs-base);
  font-weight:600;
  line-height:var(--lh-tight);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ⚠ SIMETRÍA DE CALIGRAFÍA (Franco, 12/08): la elección hereda el
   tamaño del nombre. Mismo tamaño, mismo peso — cambia el color. */
.cop-lista > .cop-item .cop-item-val{
  flex:0 0 auto;
  font-size:var(--fs-base);
  font-weight:700;
  line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums;
  color:var(--text,#f4f6fb);
}

/* la etiqueta de arriba, en versalitas */
.cop-lista > .cop-item .cop-item-meta{
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint,#5a6275);
}

/* ⚠ EL ACENTO DE LA COMPETENCIA VA SOLO EN LOS ACENTOS (regla de
   Franco, 12/08): la barrita, el borde del botón, la flecha. Nunca el
   cuerpo del texto, que va en blanco. */
.cop-lista > .cop-item .cop-item-acento{ color:var(--comp, var(--primary,#0c95eb)) }

.cop-lista > .cop-item:hover{ background:rgba(255,255,255,.02) }

@media (max-width:400px){
  .cop-lista > .cop-item{ padding-inline:var(--aire-contenido) }
}

/* ═══════════════════════════════════════════════════════════════════
   8 · ALTOS IGUALES PARA TARJETAS Y BANNERS

   "Todo lo que sean tarjetas o banners, mismo tamaño" (Franco, 12/08).
   Se aplica agregando la clase; no hay nada automático.
   ═══════════════════════════════════════════════════════════════════ */

.cop-banner{
  height:var(--alto-banner);
  border-radius:var(--r-card);
  overflow:hidden;
  position:relative;
}

.cop-tarjeta{
  min-height:var(--alto-fila);
  border-radius:var(--r-card);
  background:var(--card,#11141d);
  border:1px solid var(--card-border,#1e2330);
}

/* ⚠ Los carruseles llegan al borde FÍSICO derecho: la tarjeta termina
   cerca del borde y la siguiente asoma apenas, cortada por el borde
   mismo, no por el margen (§9unquinquagies, 6ª vuelta). */
.cop-carrusel{
  display:flex;
  gap:var(--gap-md, .7rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-left:var(--aire-contenido);
  padding-right:0;
  scrollbar-width:none;
}
.cop-carrusel::-webkit-scrollbar{ display:none }
.cop-carrusel > *{
  flex:0 0 calc(100% - 14px);
  scroll-snap-align:start;
}

/* ═══════════════════════════════════════════════════════════════════
   9 · EL RITMO, HECHO CUMPLIR

   ⚠ Se aplica agregando la clase al contenedor que va DEBAJO de la
     barra de tabs. No se toca `cop-ui-tabs.css`: ese archivo lo enlazan
     16 barras y cambiarlo movería las 16 de una — que es exactamente lo
     que rompió 58 páginas el 03/08.

   ⚠ REGLA QUE QUEDA, y vale para toda pantalla nueva:
     ninguna pantalla decide su propia separación. Si un espacio no está
     en la escala de arriba, es un espacio que alguien no decidió.
   ═══════════════════════════════════════════════════════════════════ */

.cop-bajo-tabs{ margin-top:var(--gap-tabs) !important }
.cop-bloque   { margin-top:var(--gap-lg) }
.cop-seccion  { margin-top:var(--gap-xl) }