/* ════════════════════════════════════════════════════════════════════ COP · LUCES DE COLOR DEL EQUIPO — 2ª VUELTA (Franco, 22/08/2026) ──────────────────────────────────────────────────────────────────── La referencia que pasó Franco: las tarjetas de partido de las casas grandes, donde cada equipo tiene una LUZ de su color entrando desde el borde izquierdo de la pantalla, a la altura de su escudo, que se apaga justo cuando empieza su nombre. Las dos se encuentran en el medio de la tarjeta. ⚠⚠ QUÉ ESTABA MAL EN LA PRIMERA VERSIÓN (y por qué): 1. NO LLEGABAN AL BORDE DE LA PANTALLA. La luz colgaba de `.mc-row`, que vive ADENTRO de los 22 px de aire de la fila, así que empezaba en x=22 y dejaba una franja negra contra el borde. Franco: «tenés que usar el margen izquierdo completo hasta el final de la pantalla, ya que ahora respetás ese margen y no ponés contenido de las luces ahí». Ahora la luz se sale de `.mc-row` con un `left` negativo del mismo tamaño que ese aire: **una sola variable manda las dos cosas**, así no se pueden desincronizar. 2. ERAN DEMASIADO ANCHAS. Ocupaban el 68 % de la fila, o sea que pasaban por debajo del nombre entero y llegaban casi al botón. En la referencia la luz muere donde ARRANCA el nombre: alumbra el escudo, no la tarjeta. 3. ESTABAN SEPARADAS. Cada una llenaba su fila completa, así que se leían como dos barras paralelas. Franco: «tienen que estar más juntas al medio». Ahora cada luz nace en la esquina INTERIOR de su fila —la de arriba abajo, la de abajo arriba— y las dos se encuentran en el centro de la tarjeta, como en la imagen. 4. LES FALTABA DEFINICIÓN. Un degradé plano al 60 % de opacidad da una mancha lavada. Ahora el alfa va DENTRO del degradé, con el núcleo casi opaco y una caída corta: se ve una luz, no una nube. ⚠ ALTA DEFINICIÓN SIEMPRE: son degradés de CSS, no imágenes. Se dibujan vectorialmente en cada pantalla, así que no pixelan ni pesan un kilobyte de descarga. ⚠ LOS COLORES SON LOS DE LA CAMISETA, no una paleta nueva: los pone el JS leyendo `COPKit.datos(nombre)`, la MISMA fuente con la que se dibuja la camiseta del equipo. Dos reglas que salieron de mirarlo: · el color representativo NO es siempre el primero — Racing es celeste Y blanco y su primero es el blanco: la luz salía gris. Gana el más saturado y no muy claro. · dos colores distintos pueden parecerse: River y San Lorenzo daban DOS ROJOS y la tarjeta era una sola mancha. Si los TONOS están a menos de 35°, el segundo equipo usa su alternativo. ⚠⚠ DEJÓ DE SER UNA PRUEBA (Franco, 22/08/2026, noche): *«tenés que agregar las luces a los equipos en todas las tarjetas de partidos para que se vean como las de champions clash. en todas las tarjetas de partidos de la app»*. O sea que ya no se enciende a mano en una pantalla: lo hace `cop-luces-equipo.js`, que las pinta solas en cualquier tarjeta que tenga la forma de siempre (dos `.mc-row` con su `.mc-team-name`), incluidas las que se dibujan después. ⚠ POR ESO EL SELECTOR YA NO PIDE `.cop-partido`. Tres pantallas —la portada, torneo-juego y duelo-equipos— tienen su propia copia del CSS de la tarjeta y sus `article.match-card` NO llevan esa clase. Pidiéndola, las luces se encendían en 7 pantallas de 10 y las otras 3 quedaban distintas, que es exactamente lo que Franco vino a corregir. Ahora manda la clase que pone el componente y nada más. ════════════════════════════════════════════════════════════════════ */ /* ⚠⚠ LAS REGLAS `.lv-team` DE ESTE ARCHIVO ESTÁN DORMIDAS DESDE EL 23/08/2026. `cop-luces-equipo.js` dejó de mirar `.live-card` porque Franco pidió que la tarjeta de en vivo de la portada NO lleve luces («eso es solo para las de partidos»), así que ninguna `.lv-team` recibe ya la clase `franjas-equipo` y estas reglas no se aplican en ninguna pantalla. NO SE BORRAN todavía a propósito: son el gemelo exacto de las de `.mc-row` —cada una escrita al lado de la suya— y separarlas obliga a reescribir el archivo entero por algo que quizás vuelva. Si en unas semanas la tarjeta en vivo sigue sin luces, se limpian de una pasada. Lo que SÍ se sacó fue el selector del JS: un selector muerto miente sobre lo que hace el componente; una regla CSS sin sujeto, no. */ /* la tarjeta recorta lo que se salga y crea el contexto de apilado */ .franjas-equipo{ position:relative; overflow:hidden; isolation:isolate } /* cada fila (equipo) lleva su luz detrás del contenido */ .franjas-equipo .mc-row, .franjas-equipo .lv-team{ position:relative; z-index:0 } .franjas-equipo .mc-row > *, .franjas-equipo .lv-team > *{ position:relative; z-index:2 } .franjas-equipo .mc-row::before, .franjas-equipo .lv-team::before{ content:''; position:absolute; z-index:1; pointer-events:none; /* ⚠ EL BORDE DE LA PANTALLA, NO EL DEL CONTENIDO. `--cop-pt-aire` es el mismo padding lateral que usa la fila del componente, así que este `left` negativo la cancela exactamente. Si mañana el aire cambia (y cambia solo: abajo de 360 px pasa a 16), la luz lo acompaña sin que nadie se acuerde de tocarla. */ left: calc(-1 * var(--cop-pt-aire, 22px)); /* ⚠⚠ LA LUZ MUERE DONDE EMPIEZA EL NOMBRE, Y ESO SE CALCULA — NO SE ESTIMA CON UN PORCENTAJE (Franco, 22/08/2026, noche: "el degradé debe terminar en donde empieza el nombre del equipo"). El nombre arranca después del aire de la tarjeta + el escudo + su separación. Con un `right:64%` el punto donde moría dependía del ancho de la pantalla: en un teléfono angosto quedaba corto y en uno ancho se comía media tarjeta. Con la cuenta, muere en el mismo lugar en 320 y en 680. El `* 1.12` es aire de sobra para que el degradé llegue a cero ANTES del borde de la caja: si terminara justo en el borde, ese borde sería la línea recta que Franco marcó como error. */ --eq-fin: calc(var(--cop-pt-aire, 22px) + var(--cop-pt-col, 38px) + .65rem); width: calc(var(--eq-fin) * 1.12); right: auto; /* ⚠⚠ LA LUZ SE ESTIRA MÁS ALLÁ DE SU FILA, y es lo que evita el corte. Antes eran `top:-1px; bottom:-1px`: la luz terminaba exactamente en el borde de la fila y ese borde se leía como una línea recta. Ahora invade 1 rem hacia afuera y la máscara la apaga ahí, así que el degradé se termina solo y nunca contra un canto. Hacia ADENTRO (el lado que comparten las dos filas) se estira media separación —los 8 px de `gap` de `.mc-body`— para que los dos colores se toquen en el medio en vez de dejar una franja negra. */ top: var(--eq-arriba, -1rem); bottom: var(--eq-abajo, -1rem); /* ── EL COLOR: FUERTE A LA IZQUIERDA, APAGADO EN EL NOMBRE ── Un degradé LINEAL y no radial: el radial tenía un centro visible y por eso las dos luces se leían como dos manchas. Lineal, las dos filas se leen como una sola pared de color partida al medio, que es lo de la referencia. */ background: linear-gradient(90deg, rgba(var(--eq-rgb, 255,255,255), .95) 0%, rgba(var(--eq-rgb, 255,255,255), .74) 26%, rgba(var(--eq-rgb, 255,255,255), .40) 52%, rgba(var(--eq-rgb, 255,255,255), .14) 74%, rgba(var(--eq-rgb, 255,255,255), 0) 92%); /* ── LA CAÍDA VERTICAL: MÁSCARA, NO UN SEGUNDO DEGRADÉ ── ⚠⚠ ES LA PIEZA QUE HACE TODO EL EFECTO. La máscara apaga la luz hacia el borde EXTERIOR de cada fila (arriba en la de arriba, abajo en la de abajo) y la deja a pleno en el borde que comparten. O sea: los dos colores chocan en el medio a máxima intensidad y se van desvaneciendo hacia los costados, exactamente como en la captura. Con un degradé de fondo no se podía: el fondo ya lo usa el color horizontal, y superponer dos capas dejaba una costura. */ -webkit-mask-image: var(--eq-mask); mask-image: var(--eq-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* el color, el lado por el que se estira y de dónde sale la luz */ .franjas-equipo .mc-row:nth-of-type(1)::before, .franjas-equipo .lv-team:nth-of-type(1)::before{ --eq-rgb: var(--eq1-rgb, 255,255,255); /* la de arriba: se estira hacia arriba y baja hasta la mitad del gap */ --eq-arriba: -1rem; --eq-abajo: -4px; /* ⚠ LLEGA A CERO EN EL 92 %, NO EN EL 100 %. Con el cero justo en el borde de la caja, el último píxel todavía tenía un resto de color y ESE resto es la línea recta. Dejando un tramo final ya transparente, la luz se termina adentro y el borde no existe. Medido: el resto bajó de 26 a 4 sobre 255. */ --eq-mask: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.5) 56%, rgba(0,0,0,.12) 80%, rgba(0,0,0,0) 92%); } .franjas-equipo .mc-row:nth-of-type(2)::before, .franjas-equipo .lv-team:nth-of-type(2)::before{ --eq-rgb: var(--eq2-rgb, 255,255,255); --eq-arriba: -4px; --eq-abajo: -1rem; --eq-mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.5) 56%, rgba(0,0,0,.12) 80%, rgba(0,0,0,0) 92%); } /* ⚠ SIN COLOR DEL CLUB NO HAY LUZ. Si `COPKit` no conoce al equipo, el JS no escribe `--eqN-rgb` y una luz blanca al 92 % sería una mancha sobre el escudo. Se apaga entera, que es lo honesto. */ .franjas-equipo .mc-row:nth-of-type(1)::before, .franjas-equipo .lv-team:nth-of-type(1)::before{ display:none } .franjas-equipo .mc-row:nth-of-type(2)::before, .franjas-equipo .lv-team:nth-of-type(2)::before{ display:none } .franjas-equipo[style*="--eq1-rgb"] .mc-row:nth-of-type(1)::before, .franjas-equipo[style*="--eq1-rgb"] .lv-team:nth-of-type(1)::before{ display:block } .franjas-equipo[style*="--eq2-rgb"] .mc-row:nth-of-type(2)::before, .franjas-equipo[style*="--eq2-rgb"] .lv-team:nth-of-type(2)::before{ display:block } /* ⚠ EL TEXTO PRIMERO. Con la luz detrás, el nombre sobre un color claro (Boca amarillo, River blanco) perdía contraste. Una sombra corta lo devuelve sin ensuciar el diseño. */ .franjas-equipo .mc-team-name, .franjas-equipo .lv-name{ text-shadow:0 1px 6px rgba(0,0,0,.75) } /* los botones se quedan sobre su fondo propio: la luz no los toca */ .franjas-equipo .mc-btn, .franjas-equipo .lv-jugar{ position:relative; z-index:3 } /* ⚠ EL AJUSTE DE ESCRITORIO SE FUE, Y NO ES UN OLVIDO. Existía porque el ancho era un porcentaje y en una tarjeta larga la luz se comía media pantalla. Ahora el ancho sale de una CUENTA en píxeles (aire + escudo + separación), o sea que la luz muere en el nombre en 320 y en 680 sin ninguna regla extra. Una excepción menos que mantener. */ /* respeta a quien pidió menos efectos visuales: la misma forma, más suave. ⚠ SE MANTIENE LA MÁSCARA — sin ella volvería el corte recto, que no es un "efecto" sino un error de dibujo. */ @media (prefers-reduced-motion:reduce){ .franjas-equipo .mc-row::before, .franjas-equipo .lv-team::before{ background: linear-gradient(90deg, rgba(var(--eq-rgb, 255,255,255), .55) 0%, rgba(var(--eq-rgb, 255,255,255), .22) 50%, rgba(var(--eq-rgb, 255,255,255), 0) 88%); } }