/* ════════════════════════════════════════════════════════════════════ COP · EL BOTÓN DEL SISTEMA (05/09/2026) ──────────────────────────────────────────────────────────────────── Franco, 05/09/2026: *«donde haya un botón de cualquier cosa en toda la app tiene que seguir estos parámetros, así no tengo que andar diciendo dónde o qué cambiar. ES LEY FIJA, éste es el diseño determinado para toda la app»*. Y: *«cualquier página o modificación que cree y lleve botones tiene que seguir estos parámetros, ya que me faltan páginas por crear y la única forma de que se sientan todas integradas es creándolas desde el primer momento bajo estos parámetros»*. ⚠⚠ ESTE ARCHIVO EXISTE PORQUE HABÍA 536 BOTONES Y 3 USABAN EL COMPONENTE. Medido el 05/09: ` ⚠ ORDEN DE CARGA: `cop-borde.css` ANTES que esta hoja. Y toda página que use `.cop-b` tiene que enlazar las dos: sin `cop-borde.css` el botón se queda sin marco y no hay forma de detectarlo desde el CSS. LAS TRES TALLAS, Y NADA MÁS: .cop-b 44px · para casi todo .cop-b .cop-b--sm 36px · adentro de una fila .cop-b .cop-b--lg 52px · la acción principal de la pantalla .cop-b--sec · el mismo cuerpo con el borde apagado ════════════════════════════════════════════════════════════════════ */ .cop-b{ /* ⚠⚠ LA ALTURA ES LA PERILLA Y EL RADIO SALE DE ELLA (05/09/2026). Franco: *«no tenés que hacer el chico con la misma redondez de esquinas, ya que parece diferente —redondo por la falta de ancho—. Visualmente tiene que tener la misma proporción de curvatura»*. Tenía razón, y es un efecto óptico medible: un radio FIJO en un elemento más bajo se come una fracción mayor del borde y se lee más redondo. Un botón de 36px con radio 14 tiene el 39% de su altura en curva; uno de 44px, el 32%. ⚠ POR ESO NO SON TRES RADIOS SUELTOS, ES UNA REGLA. Tres números nuevos en un sistema que ya arrastra 25 radios distintos contra los 2 decididos habría sido empeorarlo. Acá hay UNA proporción —14 sobre 44, que es `--r-card` a la talla canónica— y las otras dos salen solas: chico 36→11.5 · normal 44→14 · grande 52→16.5. */ --b-alto:44px; --borde-radio:calc(var(--b-alto) * 14 / 44); /* ⚠ EL COLOR SALE DEL ACENTO DE LA COMPETENCIA, NO DE UN CELESTE FIJO. `--cop-acento-rgb` lo resuelve `cop-ui-tabs.css` desde el `data-comp` de la pantalla, así que en División League y Carrera el botón sale violeta sin una sola regla nueva. El respaldo literal es obligatorio: no se puede asumir que la página cargó esa hoja. */ --borde-rgb:var(--cop-acento-rgb, 12,149,235); --borde-abajo:1; --borde-arriba:.12; --borde-grosor:1.5px; --borde-fondo:var(--bg, #0b0e14); /* ⚠ `box-sizing` SE DECLARA ACÁ Y NO SE HEREDA: hay páginas sin reset, y ahí el padding se SUMA al ancho. */ box-sizing:border-box; font-family:var(--texto, Inter, system-ui, -apple-system, sans-serif); font-weight:700; font-size:var(--fs-md, .88rem); line-height:1.1; letter-spacing:.01em; /* el mínimo táctil: 44px es el piso por debajo del cual el dedo falla */ min-height:var(--b-alto); padding:0 var(--gap-xl, 1.2rem); color:var(--text, #f4f6fb); display:inline-flex;align-items:center;justify-content:center;gap:.5rem; position:relative;overflow:hidden; cursor:pointer;text-decoration:none;white-space:nowrap; -webkit-tap-highlight-color:transparent; user-select:none; transition:transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1); } /* ⚠ EL ÍCONO PIDE MENOS AIRE ADELANTE QUE ATRÁS: ópticamente un glifo rodeado de espacio se ve más separado del borde que una letra. */ .cop-b svg{width:16px;height:16px;display:block;margin-left:-2px;flex:none} /* ⚠⚠ EL `[hidden]` PROPIO. `[hidden]{display:none}` tiene especificidad 0-1-0, la misma que `.cop-b`, y en empate gana la que se declara después. Todo componente que declare `display` tiene que declarar también su `[hidden]`. Van SIETE apariciones de este bug en CP. */ .cop-b[hidden]{display:none} /* ── EL BARRIDO ───────────────────────────────────────────────────── La luz que cruza la superficie. Es lo que Franco eligió de las tres direcciones que se probaron el 05/09. ⚠ SE DISPARA AL SOLTAR, NO AL APRETAR: la luz cruza cuando la acción se confirma, no mientras el dedo todavía duda encima. Lo enciende `cop-boton.js` agregando `.barre`; sin ese script el botón funciona igual, sólo que sin barrido. ⚠ VA EN LAS TRES TALLAS por decisión de Franco (05/09): *«vamos con el barrido en todas, si está muy cargado después lo sacamos o acomodamos, pero primero quiero total coherencia, simetría e igualdad»*. Si algún día molesta en el chico —que vive adentro de una fila y se aprieta muchas veces por sesión— se apaga acá, en una línea, y no en 536. */ .cop-b::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(var(--borde-rgb, 12,149,235), .30) 50%, transparent 62%); transform:translateX(-110%); } .cop-b.barre::after{animation:cop-b-barrido 620ms cubic-bezier(.2,.8,.2,1)} @keyframes cop-b-barrido{ to{ transform:translateX(110%) } } /* ── 1 · CON PUNTERO ──────────────────────────────────────────────── ⚠ SÓLO DONDE HAY PUNTERO DE VERDAD: en el teléfono el navegador simula el hover al apoyar el dedo y el botón queda pintado — se lee como que «el diseño cambió después de usarlo». */ @media (hover:hover) and (pointer:fine){ .cop-b:hover{ --borde-arriba:.30 } } /* ── 2 · APRETADO ─────────────────────────────────────────────────── 120 ms. Es el cambio más chico de todos y el que más se nota: el botón acusa recibo ANTES de que conteste el servidor. Sin esto hay medio segundo en el que el jugador no sabe si lo escuchaste. */ .cop-b:active{ --borde-arriba:.85; transform:scale(.975) } /* ── 3 · FOCO DE TECLADO ──────────────────────────────────────────── ⚠⚠ NO ES UN ANILLO DE SISTEMA Y NO APARECE CON EL DEDO NI CON EL MOUSE. `:focus-visible` se enciende sólo cuando la persona llegó navegando con el teclado. Franco pidió sacar el contorno celeste flotante de la primera versión —tenía razón, era genérico y no pertenecía a la marca—, así que el foco pasó a ser EL PROPIO BORDE al máximo con un halo suave: se lee como «este botón está elegido». ⚠ NO SE BORRA. Sin ningún estado de foco, quien navega con teclado o con lector de pantalla no puede saber dónde está parado y la app le queda inutilizable. */ .cop-b:focus{ outline:none } .cop-b:focus-visible{ --borde-arriba:.9; --borde-grosor:2px; box-shadow:0 0 0 3px rgba(var(--borde-rgb, 12,149,235), .22); } /* ══════════════════════════════════════════════════════════════════ EL MARCO DE ESQUINAS EN UN BOTÓN: SE PROBÓ Y SE VOLVIÓ ATRÁS (23/09) ────────────────────────────────────────────────────────────────── Franco pidió ver `cop-borde--esquinas` en los botones de la tarjeta de Mega Spin y en los de Champions, *«para ver cómo queda»*, y después: *«no, vamos a seguir con nuestro diseño anterior»*. Las reglas se sacaron; queda ESTE COMENTARIO, que es lo caro de la tanda. ⚠⚠⚠ SI ALGÚN DÍA SE VUELVE A INTENTAR, ESTO ES LO QUE HAY QUE SABER: todos los estados del botón —hover, apretado, foco, los de acá arriba— están escritos sobre `--borde-arriba`, que es la perilla del marco DE SIEMPRE. La variante de esquinas NO lee `--borde-arriba` en ninguna de sus cuatro capas: dibuja con `--esq-fuerte` y `--esq-tenue`. O sea que ponerle la variante a un botón y no hacer nada más le APAGA LOS TRES ESTADOS DE GOLPE, sin un solo error en la consola y sin que se note leyendo el CSS: el botón queda dibujado igual apretado que suelto y se siente deshabilitado. Hay que reescribir los estados sobre las perillas nuevas. ⚠⚠ Y EL ALCANCE NO SE HEREDA DE LA TARJETA. El radial se define en PORCENTAJES de la caja: la tarjeta mide 358×178 y el botón 135×37, así que el mismo `45% 60%` que allá llega a un tercio del alto, acá cruza de punta a punta y enciende las CUATRO esquinas — el marco deja de ser cruzado. En el botón hacía falta `34% 46%`, medido, no estimado. ⚠ POR QUÉ NO QUEDÓ, que es lo que de verdad importa: el marco de esquinas es tenue a propósito, y la tarjeta YA lo lleva. Repetirlo adentro le sacaba peso a «Jugar Ahora», que es la acción principal de la pantalla. Un botón discreto adentro de una tarjeta discreta deja de ser un botón. La medición entera y las capturas enfrentadas viven en `arnes/_botones-esquinas.mjs`. ══════════════════════════════════════════════════════════════════ */ /* ── 4 · CARGANDO ─────────────────────────────────────────────────── ⚠⚠ EL ANCHO NO SE MUEVE, Y ÉSE ES TODO EL PUNTO. El texto se vuelve invisible pero sigue ocupando su lugar, y la rueda se centra encima. Si en cambio se reemplaza el texto por «Cargando…», el botón cambia de ancho y toda la fila se corre: es el delator más visible de una app a medio terminar. Lo enciende `COPBoton.cargando(el, true)`. */ .cop-b .cop-b-rueda{ width:15px;height:15px;flex:none; border:2px solid rgba(255,255,255,.28); border-top-color:currentColor; border-radius:50%; animation:cop-b-gira .7s linear infinite; } @keyframes cop-b-gira{ to{ transform:rotate(360deg) } } .cop-b.cargando{ pointer-events:none } .cop-b.cargando .cop-b-txt{ visibility:hidden } .cop-b.cargando .cop-b-rueda{ position:absolute;left:50%;top:50%;margin:-7.5px 0 0 -7.5px; } /* ── 5 · APAGADO ──────────────────────────────────────────────────── Se apaga, no se esconde: el jugador tiene que ver que la acción existe. Es la regla 9 del sistema. */ .cop-b[disabled], .cop-b.apagado, .cop-b.bloqueado{ opacity:.4; cursor:default; pointer-events:none } /* ══ LAS TRES TALLAS ═══════════════════════════════════════════════ */ .cop-b--sm{ --b-alto:36px; font-size:var(--fs-sm, .8rem); padding:0 1rem } .cop-b--lg{ --b-alto:52px; font-size:var(--fs-lg, 1.15rem); padding:0 var(--gap-2xl, 1.8rem); width:100% } /* ⚠ EL SECUNDARIO ES EL MISMO CUERPO CON EL BORDE APAGADO, NUNCA OTRO BOTÓN. Si el secundario fuera una pieza distinta volveríamos al problema del que venimos: dos botones que no se hablan. */ .cop-b--sec{ --borde-rgb:255,255,255; --borde-abajo:.34; --borde-arriba:.06; color:var(--text-dim, #9aa3b5); } /* ⚠ EL VERDE DE «LO TUYO», que la fila de partido ya usaba para «Ver mi duelo». Se conserva como variante del mismo botón en vez de como una regla suelta en `cop-ui-partido.css`. */ .cop-b--mio{ --borde-rgb:34,197,94; color:var(--accent-green, #22c55e) } /* ════════════════════════════════════════════════════════════════════ EL BOTÓN DE ÍCONO: EL MISMO CUERPO, CUADRADO Y SIN TEXTO ──────────────────────────────────────────────────────────────────── Volver, cerrar, una flecha de carrusel, «ver todo». Es la quinta familia de la tabla del sistema —la de ícono— y hasta hoy era «su propia pieza», o sea: una copia por pantalla. Franco, 09/09/2026: *«en todos los lugares donde haya botones nuestro diseño de botones de la app ya que es otro ahora, en todos los lugares, no dejes ninguno sin cambiar por el diseño nuevo»*. ⚠⚠ ERAN CINCO COPIAS QUE YA NO SE PARECÍAN. Medidas en `en-vivo.html` antes de tocar nada: `.cat-ov-back` 38px/radio 11 y fondo `#0a0d14`; `.sm-flecha` 34px/radio 10, mismo fondo; `.pl-cat-arrow` 34px/radio 10 y fondo `#000`. Tres fondos, dos radios y ningún estado apretado. Nada de eso se decidió: se copió. ⚠ EL RADIO NO SE ESCRIBE, SALE DEL ALTO — la misma regla del botón (`--b-alto * 14 / 44`). En un cuadrado importa más que en nada: un radio fijo de 14 en una caja de 34 se lee redondo, casi una píldora. ⚠ ES CUADRADO DE VERDAD: `width` = `--b-alto`. Sin eso el padding del cuerpo lo deja rectangular y una flecha centrada en una caja más ancha que alta se ve descentrada. ════════════════════════════════════════════════════════════════════ */ /* ⚠⚠ Y POR QUÉ EL `?v=` NO SE SUBIÓ EN LAS 57 PÁGINAS (09/09/2026). La regla del proyecto es: si tocás una hoja compartida, subís el `?v=` en todas las que la cargan, o algunas ven la vieja. Acá NO se hizo, a propósito y con el motivo escrito: este cambio **sólo agrega una clase nueva**, no modifica ni una regla existente, así que una copia cacheada de la hoja vieja dibuja EXACTAMENTE lo mismo en las 56 páginas que no usan `.cop-bi`. Subirlo en todas habría sido una entrega de 60 archivos —57 de ellos con un dígito de diferencia— para no cambiar nada, y una entrega así no se puede revisar. ⚠ LO QUE SÍ HAY QUE HACER: la página que EMPIECE a usar `.cop-bi` sube su propio `?v=`. Hoy la única es `en-vivo.html`, con `?v=2`. Si algún día se modifica una regla que ya existe, ahí sí van las 57. */ .cop-bi{ --b-alto:36px; --borde-radio:calc(var(--b-alto) * 14 / 44); --borde-rgb:var(--cop-acento-rgb, 12,149,235); --borde-abajo:.62; --borde-arriba:.08; --borde-grosor:1.5px; --borde-fondo:var(--bg, #0b0e14); box-sizing:border-box; width:var(--b-alto);height:var(--b-alto); min-height:var(--b-alto); flex:0 0 auto; padding:0; display:inline-grid;place-items:center; position:relative;overflow:hidden; color:var(--text, #f4f6fb); cursor:pointer;text-decoration:none; -webkit-tap-highlight-color:transparent; user-select:none; transition:transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1); } /* ⚠ EL `[hidden]` PROPIO: declara `display`, así que sin esto `hidden` deja de esconderlo. Van ONCE apariciones de este bug en CP. */ .cop-bi[hidden]{display:none} .cop-bi svg{width:18px;height:18px;display:block;margin:0;flex:none} .cop-bi--sm{ --b-alto:30px } .cop-bi--lg{ --b-alto:44px } .cop-bi--sm svg{width:15px;height:15px} .cop-bi--lg svg{width:20px;height:20px} /* los cinco estados, los mismos del botón */ @media (hover:hover) and (pointer:fine){ .cop-bi:hover{ --borde-arriba:.3; color:#fff } } .cop-bi:active{ --borde-arriba:.85; transform:scale(.94) } .cop-bi:focus{ outline:none } .cop-bi:focus-visible{ --borde-arriba:.9; --borde-grosor:2px; box-shadow:0 0 0 3px rgba(var(--borde-rgb, 12,149,235), .22); } .cop-bi[disabled], .cop-bi.apagado{ opacity:.35; cursor:default; pointer-events:none } /* ⚠ EL ANCHO MÍNIMO DE LA FILA DE PARTIDO. `.mc-btn` traía `min-width:112px` para que «Jugar» y «Estadísticas» midieran igual y la columna de acciones quedara pareja. Eso es del CONTEXTO, no del botón, así que vive acá y no en la talla. */ .cop-partidos > .cop-partido .cop-b{ min-width:112px } @media (max-width:359px){ .cop-partidos > .cop-partido .cop-b{ min-width:92px; padding:0 .7rem } } /* ════════════════════════════════════════════════════════════════════ EL CHIP: EL MISMO CUERPO, EN TALLA CHICA ──────────────────────────────────────────────────────────────────── Franco, 05/09/2026: *«las chips son chips, pero tienen que tener el mismo diseño de los botones, así que los botones o chips de picks en lineup, en cuotas de los partidos etc tienen que tener el mismo diseño que los botones en tamaño chico»*. ⚠ SIGUE SIENDO OTRO COMPONENTE, y la distinción del sistema no se toca: la TAB te lleva a otro contenido, el CHIP filtra o elige entre lo que ya está en pantalla, el BOTÓN ejecuta una acción. Lo que se unifica es el CUERPO —alto, radio, marco, respuesta al dedo—, no el comportamiento. Un chip sigue teniendo estado activo; un botón no. ⚠⚠ EL CUERPO VIVE ACÁ Y NO EN `cop-ui-tabs.css` a propósito: si estuviera duplicado en las dos hojas, el día que se cambie el botón los chips se quedarían atrás — que es exactamente el problema del que venimos. Una sola declaración, dos usuarios. `cop-boton.css` carga DESPUÉS de `cop-ui-tabs.css`, así que gana. ════════════════════════════════════════════════════════════════════ */ .cop-b, .cop-chip, .pc-act{ /* el cuerpo compartido se declara arriba, en `.cop-b` */ } .cop-chip, .pc-act{ --b-alto:36px; --borde-radio:calc(var(--b-alto) * 14 / 44); --borde-rgb:var(--cop-acento-rgb, 12,149,235); --borde-grosor:1.5px; --borde-fondo:var(--bg, #0b0e14); box-sizing:border-box; font-family:var(--texto, Inter, system-ui, -apple-system, sans-serif); font-weight:700; font-size:var(--fs-sm, .8rem); line-height:1.1; letter-spacing:.01em; min-height:var(--b-alto); padding:0 1rem; color:var(--text, #f4f6fb); display:inline-flex;align-items:center;justify-content:center;gap:.5rem; position:relative;overflow:hidden; cursor:pointer;text-decoration:none;white-space:nowrap; -webkit-tap-highlight-color:transparent; user-select:none; flex:0 0 auto; transition:transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1); } .cop-chip[hidden],.pc-act[hidden]{display:none} .cop-chip .cop-chip-ico{display:inline-flex;align-items:center} .cop-chip .cop-chip-ico svg{width:16px;height:16px} /* el barrido, igual que el botón */ .cop-chip::after, .pc-act::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(var(--borde-rgb, 12,149,235), .30) 50%, transparent 62%); transform:translateX(-110%); } .cop-chip.barre::after, .pc-act.barre::after{animation:cop-b-barrido 620ms cubic-bezier(.2,.8,.2,1)} /* ⚠ EN REPOSO EL CHIP VA MÁS APAGADO QUE UN BOTÓN. Un botón es una acción y pide atención; un chip es una lista de opciones donde una sola está elegida, así que las no elegidas tienen que retroceder o la fila entera grita. Es el mismo patrón que `cop-borde--apagable`. */ .cop-chip:not(.active):not(.on), .pc-act:not(.active):not(.on){ --borde-abajo:.42; --borde-arriba:.05; color:var(--text-dim, #9aa3b5); } /* elegido: el marco al máximo y la tinta en blanco */ .cop-chip.active, .cop-chip.on, .pc-act.active, .pc-act.on{ --borde-abajo:1; --borde-arriba:.32; color:#fff; /* ⚠ EL RELLENO VA COMO SOMBRA INTERIOR, NO COMO `background`: un `background` propio apaga las dos capas con las que `cop-borde` dibuja el marco. La sombra interior pinta sólo el padding-box. */ box-shadow:inset 0 0 0 999px rgba(var(--borde-rgb, 12,149,235), .10); } @media (hover:hover) and (pointer:fine){ .cop-chip:not(.active):not(.on):hover, .pc-act:not(.active):not(.on):hover{ --borde-arriba:.22 } } .cop-chip:active, .pc-act:active{ transform:scale(.975) } .cop-chip:focus{outline:none} .pc-act:focus{outline:none} .cop-chip:focus-visible, .pc-act:focus-visible{ --borde-arriba:.9; --borde-grosor:2px; box-shadow:0 0 0 3px rgba(var(--borde-rgb, 12,149,235), .22); } .cop-chip:disabled,.cop-chip.disabled, .pc-act:disabled,.pc-act.disabled{ opacity:.4;cursor:default;pointer-events:none; }