/* ══════════════════════════════════════════════════════════════════ COP · EL BORDE DEGRADADO — UN SOLO ARCHIVO (27/08/2026) Franco: *«hay un diseño de tarjeta en uiverse que me gusta… lo que más me interesa es el estilo del borde, que es intenso abajo y baja en cuanto empieza a subir; el fondo interno tiene que ser el color de fondo de la página, y los bordes tienen que cambiar de color según competencia o pedido mío. Volvelo un componente estandarizado que se pueda adaptar a diferentes tamaños y colores. No quiero el blur ni los hover»*. ══ CÓMO FUNCIONA, PORQUE NO ES UN `border` ══════════════════════════ El original apila dos cajas: la de afuera se pinta con un degradé y lleva 1,6 px de `padding`; la de adentro la tapa entera menos ese hueco. Lo que se ve de borde es el degradé asomando por el hueco — por eso puede ser intenso abajo y apagarse arriba, cosa que un `border` de un color no puede hacer. ⚠ ACÁ SE HACE CON UN SOLO ELEMENTO. Un `border` transparente abre el hueco, y dos fondos lo llenan: el relleno recortado al `padding-box` y el degradé recortado al `border-box`. Mismo dibujo, sin envolver nada: así este borde se le puede poner a un chip, a un botón o a una tarjeta que ya existen sin tocarles el marcado. ══ LO QUE SE DEJÓ AFUERA, A PROPÓSITO ══════════════════════════════ · el `::before` con `filter:blur(70px)` — el resplandor de la demo. Franco: *«no quiero el blur»*. Además un blur de 70 px es de lo más caro que se le puede pedir a un teléfono. · los `:hover` (escala del SVG, cambio de color) — *«tampoco los hover»*. · el relleno `radial-gradient(#1b1b1b, #000)` de la demo: acá adentro va el fondo de la página, que es lo que Franco pidió. ══ LAS PERILLAS ════════════════════════════════════════════════════ --borde-rgb color del borde, en tres números (255,255,255) --borde-abajo cuánto se ve abajo, de 0 a 1 (1) --borde-arriba cuánto se ve arriba, de 0 a 1 (.1) --borde-grosor el hueco por donde asoma (1.6px) --borde-radio las esquinas (18px) --borde-fondo lo de adentro (var(--bg)) ⚠ `--borde-rgb` VA EN TRES NÚMEROS SEPARADOS POR COMA, no en `#hex`: es el mismo formato que ya usan `--cb-rgb` y `--f11-rgb` en la app, y es lo que permite bajarle la opacidad para el degradé. Con un `#hex` habría que declarar dos colores en vez de uno. ══════════════════════════════════════════════════════════════════ */ /* ⚠⚠ EL SELECTOR VA REPETIDO A PROPÓSITO (27/08/2026). `.cop-borde` tres veces es el mismo elemento tres veces: no cambia a qué le pega, sube la especificidad de 0-1-0 a 0-3-0. Hace falta porque este borde se le pone a piezas que YA tienen marco propio, y algunas lo declaran con reglas muy específicas: `.cop-chip` 0-1-0 `.cop-chip.active` 0-2-0 `[data-comp="rivals"] .mc-btn` 0-2-0 `.cop-partidos > .cop-partido .mc-btn` 0-3-0 ← ésta ganaba Con dos repeticiones el botón «Jugar Ahora» se quedaba con el borde viejo: en la foto se veía un borde violeta y parecía bien, porque el marco de antes TAMBIÉN es violeta en División. Lo destapó el arnés leyendo el `background-image`, que decía `none`. ⚠ EL EMPATE LO DESEMPATA EL ORDEN, así que este archivo tiene que cargarse DESPUÉS de `cop-ui-partido.css` y de `cop-ui-tabs.css` en toda página que lo use. El arnés lo comprueba pantalla por pantalla. ⚠ SI ALGUNA VEZ HACE FALTA UNA CUARTA REPETICIÓN PARA UN CASO NUEVO, ésa es la señal de parar: quiere decir que la pieza de abajo tiene el marco demasiado clavado y lo que hay que cambiar es esa pieza, no seguir subiendo acá. La alternativa —borrarle el borde al componente compartido— cambiaría las once pantallas que lo usan, que es justo lo que Franco NO pidió: quería el borde nuevo en tres. */ .cop-borde.cop-borde.cop-borde{ /* el hueco por donde asoma el degradé */ border:var(--borde-grosor, 1.6px) solid transparent; border-radius:var(--borde-radio, 18px); /* ⚠ EL ORDEN IMPORTA: el relleno va PRIMERO (queda arriba) y recortado al `padding-box`, así no invade el hueco; el degradé va segundo y recortado al `border-box`, que es el único lugar donde se ve. */ background: linear-gradient(var(--borde-fondo, var(--bg, #0b0e14)), var(--borde-fondo, var(--bg, #0b0e14))) padding-box, linear-gradient(to top, rgba(var(--borde-rgb, 255,255,255), var(--borde-abajo, 1)), rgba(var(--borde-rgb, 255,255,255), var(--borde-arriba, .1))) border-box; -webkit-background-clip:padding-box, border-box; /* ⚠ SIN ESTO EL DEGRADÉ SE ESTIRA CON EL SCROLL en los contenedores que se desplazan: el fondo se ancla al bloque, no al elemento. */ background-origin:border-box; background-repeat:no-repeat; } /* ⚠⚠ EL RESPALDO NO ES OPCIONAL. `background-clip` con dos capas es de 2015 para acá, pero si un navegador viejo no lo entiende el elemento se queda con un `border` TRANSPARENTE: o sea, sin borde y sin que nada avise. Con esto, ahí se ve un borde liso del color pedido —peor que el degradé, muchísimo mejor que nada—. */ @supports not (background-clip: padding-box){ .cop-borde.cop-borde.cop-borde{ border-color:rgba(var(--borde-rgb, 255,255,255), var(--borde-abajo, 1)); background:var(--borde-fondo, var(--bg, #0b0e14)); } } /* ── LOS TAMAÑOS ──────────────────────────────────────────────────── ⚠ SON SÓLO EL RADIO Y EL GROSOR. No fijan ancho ni alto: el tamaño lo sigue poniendo la pieza que lleva el borde —un chip mide lo que mide su texto, una tarjeta lo que mide su contenido—. Franco: *«tal vez quiera que las chips tengan su tamaño pero con este diseño de bordes»*. Por eso el componente no define cajas. */ /* ⚠⚠ EL CHIP NO ES UNA PÍLDORA, Y ME LO CORRIGIÓ EL ARNÉS. Lo puse en 999px porque «chip» suena a píldora, y con eso pasaban dos cosas mal a la vez: el chip de Champions dejaba de medir igual que el de Resultados —el arnés de chips lo marcó al toque— y, sobre todo, no es la forma que Franco describió: *«esa forma media cuadrada con bordes redondeados»*. Los 14 px son los que ya tenía el chip de la app. */ .cop-borde--chip {--borde-radio:14px; --borde-grosor:1.4px} /* ⚠ CUADRADO CON ESQUINAS REDONDEADAS, no redondo (Franco, 27/08/2026): *«que sean botones cuadrados no redondos, sí con las esquinas redondeadas pero cuadrado»*. Es para los accesos chicos de lineup. */ .cop-borde--fab {--borde-radio:11px; --borde-grosor:1.4px} .cop-borde--boton {--borde-radio:14px; --borde-grosor:1.5px} .cop-borde--tarjeta{--borde-radio:22px; --borde-grosor:1.6px} .cop-borde--panel {--borde-radio:32px; --borde-grosor:1.6px} /* ══════════════════════════════════════════════════════════════════ `--esquinas` · EL MARCO CON DOS ESQUINAS CRUZADAS (22/09/2026) ────────────────────────────────────────────────────────────────── Franco, con una captura de referencia en la mano: *«quiero que le pongas un diseño de marco arriba a la izquierda y abajo a la derecha, cruzado, con un borde visible en esos sectores, y líneas grises leves en el resto, como si fuera un ejemplo para destacar esas esquinas, sin movimiento»*. ⚠⚠ ES UNA VARIANTE DE `cop-borde` Y NO UN MARCO NUEVO. Reemplaza la segunda capa —la que dibuja el degradé— y hereda todo lo demás del bloque de arriba: el `border` transparente que abre el hueco, el `background-origin`, el recorte y el relleno. Un marco propio para una pantalla habría sido la enésima copia de esto. ══⚠⚠⚠ POR QUÉ DOS RADIALES ANCLADOS A LAS ESQUINAS Y NO UN `conic-gradient` ════════════════════════════════════════════ El `conic-gradient` es la respuesta obvia —«brillante a 315° y a 135°»— y está MAL para esto, porque esos dos ángulos son las esquinas **sólo en un cuadrado**. Estas tarjetas miden unos 350×90: en un rectángulo así, el vértice de arriba a la izquierda cae a ~284° y el de abajo a la derecha a ~104°. O sea que un cónico pondría los dos brillos en el medio de los lados largos, no en las esquinas, y encima se movería solo cada vez que la tarjeta cambiara de alto. `radial-gradient(… at 0% 0%)` se ancla al VÉRTICE, mida lo que mida la caja. El arnés mide el ancho real de la tarjeta justamente para dejar constancia de que el caso ancho es el que importa. ══⚠ LAS TRES CAPAS, EN ORDEN (la primera queda arriba) ═══════════ 1. el relleno, recortado al `padding-box` (no invade el hueco); 2. los dos radiales del acento, en las esquinas cruzadas; 3. la línea tenue, pareja, para TODO el resto del contorno. Sin la 3 no es un marco: son dos esquinas sueltas flotando. ══⚠ SIN MOVIMIENTO ══════════════════════════════════════════════ Ni `animation` ni `transition` sobre el fondo. Franco lo pidió con esas palabras y el arnés lo exige: un marco que respira al pasar el dedo es lo que en el teléfono se lee como «la pantalla hace algo». ══ LAS PERILLAS ══════════════════════════════════════════════════ --esq-alcance cuánto se extiende el brillo desde el vértice --esq-fuerte opacidad del acento en la esquina --esq-tenue opacidad de la línea del resto ══════════════════════════════════════════════════════════════════ */ :is(.cop-borde--esquinas, .cop-esquinas-capa){ /* ⚠⚠ LA RECETA DE LAS ESQUINAS VIVE EN UNA VARIABLE (25/09/2026), para que la dibujen DOS piezas sin copiarla: el borde de siempre (abajo) y `.cop-esquinas-capa`, que la pinta en una capa aparte (ver más abajo). ⚠ Se declara EN el elemento, no en `:root`: así `--borde-rgb` se resuelve con el color de ESE elemento, y un `::before` la hereda ya resuelta. */ --esq-capas: /* 2 · la esquina de ARRIBA A LA IZQUIERDA ⚠⚠ EL ALCANCE SE MIDIÓ EN LA CAPTURA, NO SE ESTIMÓ. Arrancó en `62% 190%` y el brillo cubría el lado izquierdo ENTERO: se leía como «media tarjeta con borde azul», no como una esquina destacada. Con `45% 60%` el brillo llega hasta un tercio del lado largo y poco menos de la mitad del corto, que es la proporción de la referencia que trajo Franco. ⚠ Y LA CAÍDA ES RÁPIDA (pleno hasta el 10%, apagado al 62%): con una caída suave el degradé se lee como un baño de color sobre todo el contorno en vez de un acento. */ radial-gradient(var(--esq-alcance, 45% 60%) at 0% 0%, rgba(var(--borde-rgb, 12,149,235), var(--esq-fuerte, 1)) 0%, rgba(var(--borde-rgb, 12,149,235), var(--esq-fuerte, 1)) 10%, rgba(var(--borde-rgb, 12,149,235), 0) 62%) border-box, /* 3 · la de ABAJO A LA DERECHA */ radial-gradient(var(--esq-alcance, 45% 60%) at 100% 100%, rgba(var(--borde-rgb, 12,149,235), var(--esq-fuerte, 1)) 0%, rgba(var(--borde-rgb, 12,149,235), var(--esq-fuerte, 1)) 10%, rgba(var(--borde-rgb, 12,149,235), 0) 62%) border-box, /* 4 · la línea tenue de todo el resto */ linear-gradient(rgba(255,255,255, var(--esq-tenue, .13)), rgba(255,255,255, var(--esq-tenue, .13))) border-box; } .cop-borde--esquinas.cop-borde--esquinas.cop-borde--esquinas{ background: /* 1 · el relleno */ linear-gradient(var(--borde-fondo, var(--bg, #0b0e14)), var(--borde-fondo, var(--bg, #0b0e14))) padding-box, /* 2-4 · las dos esquinas y la línea tenue: la receta de arriba */ var(--esq-capas); -webkit-background-clip:padding-box, border-box, border-box, border-box; background-clip:padding-box, border-box, border-box, border-box; background-origin:border-box; background-repeat:no-repeat; /* ⚠ el pedido, en una línea */ animation:none; } /* ══ `.cop-esquinas-capa` · EL MISMO MARCO, EN UNA CAPA APARTE (25/09/2026) Franco: *«cuando se indique un grupo o posición en el ranking no uses más ese diseño cuadrado celeste alrededor de todo, necesito que uses un diseño moderno como el borde de las tarjetas de megaspin»*. ⚠⚠ POR QUÉ UNA CAPA Y NO `cop-borde--esquinas`: el borde de siempre necesita un `border` transparente de 1,6 px en el propio elemento, y la fila de ranking NO puede crecer ni correrse: está alineada al píxel con las otras 9 y su relleno lo deciden tres reglas distintas según el ancho. Con la capa, el elemento no cambia ni un píxel: el marco se dibuja en un `::before` recortado a su anillo con una máscara, así que tampoco hace falta un relleno que tape nada. ⚠ LAS PERILLAS SON LAS MISMAS (`--borde-rgb`, `--esq-*`, `--borde-radio`, `--borde-grosor`) más una: `--capa-inset`, cuánto se mete el marco desde el borde de la pieza (para que no toque el borde de la pantalla en una fila a sangre). ⚠ Usa el `::before` de la pieza: no se le pone a algo que ya lo use. */ .cop-esquinas-capa{position:relative} .cop-esquinas-capa::before{ content:"";position:absolute;inset:var(--capa-inset, 0);pointer-events:none; border-radius:var(--borde-radio, 18px); padding:var(--borde-grosor, 1.6px); background:var(--esq-capas); background-origin:border-box;background-repeat:no-repeat; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:none; } /* ── EL COLOR ─────────────────────────────────────────────────────── ⚠ NO HAY UNA CLASE POR COMPETENCIA. El color viaja en el dato, como en el resto de la app: la pantalla que ya sabe en qué competencia está escribe `--borde-rgb` y este archivo no se entera. Estas cuatro clases son sólo atajos para los colores fijos del sistema. */ /* ⚠ LOS NÚMEROS SON LOS TOKENS DE LA APP, NO COLORES PARECIDOS. `--primary` var(--primary, #0c95eb) → 12,149,235 · `--purple` var(--purple, #9d2bff) → 157,43,255 · `--gold` (y `--oro`) var(--gold, #ffc233) → 255,194,51. ⚠⚠ EL DORADO ESTABA EN 240,185,11 (27/08/2026): otro dorado, de otra paleta, que entró con este archivo y que hasta hoy no usaba nadie fuera de la probeta. Al lado de un trofeo o de una Clash Coin —que salen de `--oro`— se leían como dos dorados distintos en la misma pantalla. Se corrige AHORA, que lo estrenan las recompensas de carrera y las tarjetas de equipos competitivos; con tres pantallas puestas ya no se puede tocar sin revisarlas. ⚠ EL DÍA QUE `cop-ui-tokens.css` TENGA `--xxx-rgb`, estas cuatro líneas pasan a leerlos. Hoy no existen, y repetir el número acá es mejor que inventar un token a mitad de una tanda. */ .cop-borde--blanco {--borde-rgb:255,255,255} .cop-borde--primary{--borde-rgb:12,149,235} .cop-borde--purple {--borde-rgb:157,43,255} .cop-borde--gold {--borde-rgb:255,194,51} /* ── RELLENO GRIS ─────────────────────────────────────────────────── ⚠ Franco, 03/09/2026: los botones de acción del flujo de sobres («comprar / confirmar compra / abrir») y los del pie de la carta («comprar por / accesos») pasan del vidrio translúcido a FONDO GRIS con el borde celeste en degradé. El relleno se cambia con `--borde-fondo`, NUNCA con `background`: el componente dibuja el marco con DOS capas de fondo y un `background` propio se las pisa (§ arriba). ⚠ ES UN GRIS, NO EL NEGRO DE LA PÁGINA: el default de `--borde-fondo` es `var(--bg)` (casi negro) y ahí el botón se funde con el fondo. Este gris lo despega sin tapar el degradé celeste. */ .cop-borde--gris{--borde-fondo:#20232b} /* ⚠ HEREDA EL COLOR DE LA COMPETENCIA SIN ESCRIBIR NADA. Los banners y las pantallas de competencia ya declaran `--cb-rgb`; con esto, un borde adentro de una de ellas sale del color que corresponde. */ .cop-borde--comp{ /* ⚠ `--cop-acento-rgb` PRIMERO: es el que `cop-ui-tabs.css` cambia con `[data-comp="…"]` en toda la pantalla, así que es el que de verdad sigue a la competencia. `--cb-rgb` sólo existe adentro del banner. */ --borde-rgb:var(--cop-acento-rgb, var(--cb-rgb, var(--f11-rgb, 255,255,255))); } /* ── ELEGIDO ──────────────────────────────────────────────────────── ⚠ SE SUMA A LA CONVENCIÓN QUE YA TIENE LA APP, no inventa otra: las tabs y las chips marcan lo elegido con `.active` desde siempre. Una pieza con borde que además esté elegida se prende con el color del acento; sin elegir, queda en un blanco tenue. Es el mismo idioma que el riel de ligas: apagado neutro, encendido con color. */ /* ⚠ EL BORDE SE QUEDA TRANSPARENTE PASE LO QUE PASE. Los estados de la tarjeta de partido pintan `border-color` con 0-4-0 (`.cop-partidos > .cop-partido .mc-btn[disabled]`, `.mio`, `.espera`): un color opaco ahí tapa el degradé, porque el borde se dibuja ENCIMA del fondo. Esta línea sólo neutraliza eso; el color sigue saliendo del degradé, que es de donde tiene que salir. */ .cop-borde.cop-borde.cop-borde.cop-borde{border-color:transparent} .cop-borde.cop-borde.cop-borde.active{ --borde-rgb:var(--cop-acento-rgb, 255,255,255); --borde-abajo:1; --borde-arriba:.28; } /* sin elegir, el borde no compite con lo elegido */ .cop-borde--apagable:not(.active){--borde-abajo:.55; --borde-arriba:.06} /* ── EL RESPLANDOR, APAGADO POR DEFECTO ───────────────────────────── La demo lleva `box-shadow: 0 0 80px -10px rgba(255,255,255,.15)`, que es un halo suave alrededor. No es el `filter:blur()` que Franco descartó, pero se lee parecido, así que queda como algo que se pide y no como algo que viene puesto. */ .cop-borde--brillo{ box-shadow:0 0 60px -12px rgba(var(--borde-rgb, 255,255,255), .18); }