/* ========================================================================== El Camino DT — Sistema compartido -------------------------------------------------------------------------- Todo lo que vive en más de una pantalla: reset, chrome de dos pisos, panel, botón, pastilla, estrellas, la fila de atributo, banda, tabla de datos. Si una pantalla nueva necesita agregar algo acá, es una decisión de sistema y hay que anotarla en DESIGN.md. Si necesita un TOKEN nuevo, el sistema falló. ========================================================================== */ /* ========================================================================== El Camino DT — Sistema de interfaz Orden: reset · primitivas · chrome · ficha · atributos · tarjetas · util ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET Y BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Todo el sitio, un poco más grande. El número y las razones están en `tokens.css`, con el token; acá sólo se aplica. */ zoom: var(--escala-sitio, 1); } body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-snug); /* LA REGLA TABULAR VIVE ACÁ Y SE QUEDA, y el 20 de agosto de 2026 se probó mudarla y se volvió atrás. Vale escribir por qué, porque la próxima cara que se evalúe se va a topar con lo mismo. En Zalando Sans —la candidata que MÁS se parece a la cara de FM26— la característica `tnum` incluye al ESPACIO: con la regla en `body`, cada espacio de la interfaz pasaba a medir lo que mide un dígito, 10,11 px contra 4,16, y toda la prosa del juego se leía suelta. No hay forma de separarlo desde CSS: `tnum`, `font-feature-settings` y las combinaciones con `pnum` dan las tres el mismo espacio ancho. La salida obvia era bajar la regla de `body` a las superficies de dato. NO ALCANZA, y ahí está la lección: en esta interfaz la etiqueta y el número viven en el MISMO elemento. Una fila de atributo es «Tiros lejanos 1» y una celda de tabla es «Primera División»; poniendo `tnum` en `.attr` o en `.data-table` el espacio ancho vuelve por la puerta de al lado. Para usar esa cara habría que marcar celda por celda los números de veintidós pantallas, y cualquier superficie nueva empezaría desalineada hasta que alguien se acordara. O sea que esto no es una preferencia: es una CONDICIÓN de compatibilidad. Una cara cuyo `tnum` toque al espacio queda descartada para este proyecto, por más que sea la que más se parece. */ -webkit-font-smoothing: antialiased; } h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; } /* El [hidden] del navegador es una regla de elemento: cualquier clase con display la gana. En una interfaz con paneles de pestaña esto no es un detalle, es la diferencia entre ocultar un panel y mostrarlos los cuatro. */ [hidden] { display: none !important; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } svg { display: block; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); } .i { width: 16px; height: 16px; flex: none; } .i--sm { width: 13px; height: 13px; } .i--lg { width: 20px; height: 20px; } .i--faint { color: var(--icon-quiet); } .i--warn { color: var(--amber-500); } .u-hidden { display: none !important; } .u-num { text-align: right; } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Etiqueta micro en versalitas: el recurso que permite meter un nombre de campo sin gastar una línea entera de jerarquía. */ .label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* CUANDO EL ROTULO ES UNA FRASE. Contado sobre el juego: de los rotulos de `.label`, 38 son de una palabra, 19 de dos y 15 de tres. Un rotulo de ocho o de catorce en versalitas no se lee como rotulo, se lee como un grito, y encima ocupa dos renglones donde el original ocupaba uno. Mismo tamano y mismo color —sigue siendo el texto chico que acompana a una cifra— en la caja y el espaciado con que se escribe una oracion. Sale de `.pre__rotulo`, que resolvio esto mismo en la pretemporada y se quedo encerrado en su hoja; aca esta donde lo puede usar cualquiera. */ .label-frase { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); } /* -------------------------------------------------------------------------- 2. CHROME — navegación de dos pisos -------------------------------------------------------------------------- Piso 1: secciones del juego + acción principal fija a la derecha. Piso 2: subsecciones de la sección activa. La acción principal NUNCA cambia de lugar, sólo de etiqueta. -------------------------------------------------------------------------- */ .chrome { position: sticky; top: 0; z-index: var(--z-chrome); background: var(--bg-chrome); border-bottom: 1px solid var(--line); } .chrome__row { display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); } .chrome__row--primary { height: var(--chrome-h); } .chrome__row--secondary { height: var(--subnav-h); border-top: 1px solid var(--line-hairline); gap: var(--sp-6); } .chrome__spacer { flex: 1 1 auto; } /* Historial: adelante deshabilitado demuestra el vocabulario de estados. */ .history { display: flex; gap: var(--sp-2); } .history__btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--bg-raised); color: var(--text-secondary); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .history__btn:hover { background: var(--bg-active); color: var(--text-primary); } .history__btn[disabled] { color: var(--text-disabled); cursor: default; background: var(--ink-800); } /* Escudo del club. La caja es cuadrada con `contain` y no una proporción de escudo heráldico (30×34): los escudos reales vienen redondos, ovalados y en pentágono, y forzarlos a una proporción los deforma o los recorta. El tamaño base es el del CHROME, que es el único sitio donde se usa sin modificador. Subió de 36 a 60 porque en FM26 el escudo es lo más grande de la barra —~90px sobre 1920— y es lo que hace que se lea como la barra de TU club y no como una barra de herramientas. De ahí sale también que el primer piso mida 76 y no 48: el alto de esa fila lo manda el escudo, no el botón. */ .crest { width: 60px; height: 60px; --halo: 1.08px; flex: none; object-fit: contain; object-position: center; } .crest--lg { width: 42px; height: 42px; --halo: 0.76px; } .crest--sm { width: 17px; height: 17px; --halo: 0.31px; } .nav-primary { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .nav-primary__item { display: flex; flex: none; white-space: nowrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); /* La navegación de FM26 es lo más grande y pesado de su pantalla: medida sobre su fuente son ~27px a 1920, que a nuestro ancho de trabajo son estos 18. Es la barra la que dice dónde estás, y a 15px en peso 600 lo decía en voz baja. */ font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text-secondary); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .nav-primary__item:hover { color: var(--text-primary); background: var(--bg-hover); } /* LA SECCIÓN ACTIVA VA EN MAGENTA, no en el violeta de lo interactivo. Medido a 1:1 en el video de FM26: «Día del partido» abierto se pinta rosa-magenta mientras las otras cinco quedan en blanco. Y rompe una regla de esta guía a sabiendas —el magenta nombra secciones y no baja de ahí—, sólo que mirándola de cerca no la rompe tanto: la barra primaria ES la lista de secciones del juego, así que el magenta ahí está haciendo exactamente su trabajo. Lo que cambia es que ahora también dice CUÁL, que era trabajo del violeta. Lo que sí hay que vigilar es que el violeta no se quede sin decir «acá estás»: lo sigue diciendo el segundo piso, donde la subsección activa va violeta Y subrayada. Los dos pisos no dicen lo mismo con el mismo color. */ .nav-primary__item[aria-current='page'] { color: var(--nav-aqui); } .nav-primary__item .i { color: var(--icon-quiet); } /* Las secciones que existen y no se pueden abrir. Hoy hay una sola situación que las apaga —estar sin club, cuando cuatro de las seis hablan de un plantel que no es tuyo— y se apagan en vez de sacarse: que Plantilla siga en la barra y en gris cuenta que hay un plantel del que ya no decidís nada. */ .nav-primary__item[aria-disabled='true'] { color: var(--text-disabled); cursor: default; } .nav-primary__item[aria-disabled='true']:hover { background: none; color: var(--text-disabled); } .nav-sub { display: flex; align-items: center; gap: var(--sp-5); flex: none; } .nav-sub__item { position: relative; display: flex; flex: none; white-space: nowrap; align-items: center; gap: var(--sp-2); height: var(--subnav-h); font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } .nav-sub__item:hover { color: var(--text-primary); } /* Subrayado de 2px Y texto violeta: en el piso de abajo FM26 marca las dos cosas, y no es redundancia — el subrayado dice cuál de siete, el color dice que ese "cuál" es el mismo violeta que gobierna todo lo activo. */ /* `location` y no `page` es lo que dice ARIA cuando estás DEBAJO de una solapa y no en ella: el entretiempo es un momento del partido, no una pantalla aparte de la sección, así que enciende «Partido» sin decir que lo es. Se pinta igual porque para el ojo la pregunta es la misma —de cuál de éstas cuelga lo que estoy mirando—; quien lo lee con voz sí escucha la diferencia. */ .nav-sub__item[aria-current='page'], .nav-sub__item[aria-current='location'] { color: var(--nav-aqui); } .nav-sub__item[aria-current='page']::after, .nav-sub__item[aria-current='location']::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--nav-aqui); } .nav-sub__item .i { color: var(--icon-quiet); } /* Contador de la subnavegación: la prueba de que marcar sirvió para algo. */ .nav-sub__count:not(:empty) { display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-left: var(--sp-2); padding: 0 3px; border-radius: var(--r-pill); background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 700; } .nav-sub__item--marcado { color: var(--text-primary); } /* Buscador */ .search { display: flex; align-items: center; gap: var(--sp-3); width: 168px; height: 30px; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--ink-950); color: var(--text-muted); font-size: var(--fs-sm); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .search:hover { border-color: var(--line-strong); color: var(--text-secondary); } /* -------------------------------------------------------------------------- LA MARCA DEL JUEGO -------------------------------------------------------------------------- El nombre del producto sólo aparece en las dos pantallas que corren cuando todavía no hay un club que ponga el suyo: elegir carrera y el sorteo de zonas. En todas las demás, el primer piso del chrome es del ESCUDO de tu club, y meter ahí también el logo del juego sería discutirle la barra al único dueño que tiene. Es un LOCKUP y no una palabra: el símbolo (`assets/marca.svg`, la pelota de gajos que este juego comparte con El Camino) y el nombre, con el `DT` en el color de canal. Antes eran cuatro reglas escritas dos veces —una en `nueva.css` y otra en `sorteo.css`— que es como una marca empieza a tener dos versiones sin que nadie lo decida. 28 píxeles y no 24: por debajo de ahí los seis gajos se funden y la pelota pasa a ser un disco claro. Por arriba le empieza a competir al logo de la liga de la cabecera, que es lo que la pantalla está mirando de verdad. -------------------------------------------------------------------------- */ .marca { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: var(--tracking-tight); } .marca__pelota { width: 28px; height: 28px; flex: none; } /* EL LOCKUP GRANDE. Bajó acá desde `nueva.css` el 21 de agosto de 2026, y el motivo es el mismo por el que el lockup chico ya estaba: lo dibujan DOS pantallas. Mientras la única que lo agrandaba era la de elegir club, la composición era suya y estaba bien que viviera en su hoja; con la portada —que es la primera pantalla del juego y la casa de la marca— pasó a ser un tamaño del componente, y un tamaño escrito en la hoja de una pantalla es una regla que la de al lado copia y termina con dos versiones. Lo que se quedó en `nueva.css` es lo que sí es composición de aquella pantalla: que su barra de chrome centre el lockup y aparte la temporada. */ /* EL LOCKUP DE LA PORTADA. Dos renglones apilados, versales, en el ancho más comprimido que tiene Asap y en su peso más alto; la pelota ocupa el sitio de la O de CAMINO y por eso mide lo que mide una letra y se apoya en la línea de base, no en el centro. El interlineado es 0,86: dos renglones de versales con el interlineado normal se leen como dos palabras sueltas, y lo que tienen que formar es un bloque. */ .marca--grande { /* EL TAMAÑO LO PONE LA PANTALLA, LA PROPORCIÓN LA PONE ACÁ. Las dos casas del lockup grande no lo quieren del mismo porte: en el selector de clubes vive dentro de una barra de chrome y comparte renglón con la temporada, y en la portada es el objeto más grande de la pantalla. Lo que NO puede cambiar entre las dos es la relación entre los dos renglones —«EL» apoya contra la C de CAMINO y no flota— así que el renglón corto se calcula del largo y no se escribe dos veces. 0,706 es 2,4 sobre 3,4, que son los dos números con los que se dibujó por primera vez. */ --marca-alto: 3.4rem; display: grid; justify-items: center; gap: 0; line-height: 0.86; letter-spacing: -0.01em; /* 75 % es el extremo del eje de Asap, no un número elegido: el logo de referencia es una grotesca negra mucho más estrecha, y esto es lo más cerca que se puede estar con la cara del sistema. Para llegar a ESA letra hace falta el archivo del logo. */ font-stretch: 75%; font-weight: 700; text-transform: uppercase; } /* LOS DOS ÚNICOS TAMAÑOS DEL JUEGO FUERA DE LA ESCALA, y están escritos acá para que se sepa que es a propósito: el detector de diseño los marca en cada pasada y una excepción sin razón escrita termina «arreglada» por alguien. La escala de `DESIGN.md` es la de la INTERFAZ —de 13 a 34px— y esto no es interfaz: es la marca del producto en su casa, en las dos pantallas que se abren antes de que exista una carrera. El 3.4rem del renglón largo sale de que CAMINO con la pelota adentro mida lo mismo que la placa de abajo, y el 2.4 del corto de que EL apoye contra la C sin flotar. Si alguna vez la portada cambia de composición, estos dos números se vuelven a sacar de ahí; lo que NO hay que hacer es meterlos en la escala, porque el escalón de arriba —34px, el nombre de un futbolista— convierte el lockup en un título más. */ .marca__linea { display: block; } .marca__linea--uno { font-size: calc(var(--marca-alto) * 0.706); } .marca__linea--dos { display: flex; align-items: baseline; font-size: var(--marca-alto); } /* EL `DT`, QUE FALTABA. El lockup grande dibujaba «EL CAMINO» y nada más: el nombre del producto, incompleto, en las dos únicas pantallas que lo muestran grande. No era una decisión —el lockup chico del sorteo sí lo trae, y DESIGN.md dice que el `DT` es lo que separa a este juego de El Camino a secas—, era un renglón que nunca se escribió. Va más chico que la palabra y apoyado en la línea de base, como un sufijo: a la misma altura que CAMINO sería una tercera palabra y el lockup dejaría de tener una forma. El color lo pone `.marca strong`, que es la regla del sistema y el único violeta que no marca algo pulsable. */ .marca--grande .marca__dt { margin-left: 0.12em; font-size: 0.42em; letter-spacing: 0.01em; } /* La pelota, del alto de la versal y pegada a la N: es una letra más. El ajuste vertical la baja a la línea de base, donde cae el redondo de una O. */ .marca--grande .marca__pelota { width: 0.7em; height: 0.7em; margin-left: 0.02em; transform: translateY(0.02em); } /* El `DT` va en el color de canal, y es el único sitio del sistema donde el violeta no marca algo pulsable: no es un estado de la interfaz, es parte de cómo se llama el producto —es lo que separa a este juego de El Camino a secas—. Vale acá y no baja de acá. Ver «La Regla del Dedo» en DESIGN.md. */ .marca strong { color: var(--accent); } /* -------------------------------------------------------------------------- LAS MARCAS DE COMPETICIÓN -------------------------------------------------------------------------- El logo de la liga o del torneo, en los tres sitios donde el juego dice en qué competición estás parado: el chrome, la cabecera de una tabla y la columna de competición de la Programación. Tres tamaños y ninguna caja: el logo se apoya sobre lo que ya hay. Un marco alrededor lo convertiría en un botón, y ninguno de los tres se pulsa. -------------------------------------------------------------------------- */ /* LA ESCALA DE LAS MARCAS DE LIGA -------------------------------------------------------------------------- Los archivos de `assets/ligas` no son iconos: son el escudo de la competición CON SU NOMBRE adentro —«PRIMERA NACIONAL» en dos renglones, «PRIMERA B» en curva alrededor de la B— y encima traen aire propio en el borde del PNG. Eso pone un piso: por debajo de unos 18 píxeles no se lee de cuál se trata, y un logo que no se identifica es una mancha de color que ocupa sitio. Los cinco tamaños del juego —18 en una fila de tabla, 24 en la barra, 32 en la cabecera de una pantalla, 34 sobre una tabla, 40 en la ficha del camino— son escalones de ese piso hacia arriba, y ninguno baja de él. Estaban repartidos entre 13 y 20 porque cada uno se había medido contra el icono que tenía al lado en vez de contra lo que el archivo necesita para leerse. */ /* LA PLATA. Un dibujo ajeno sin tinta clara no se ve sobre la pizarra, y el juego está lleno de dibujos ajenos: trece de las treinta y tres marcas de liga —la Ligue 2 es un «2» negro, la Eredivisie es negra entera— y 104 de los 828 escudos —Juventus es negro entero, el de Liverpool es todo del mismo bordó—. En una fila de mercado quedaba el nombre del club y un hueco al lado. Se les da un rectángulo claro donde apoyarse, que es el soporte que las dos cosas tienen impresas en cualquier lado. Una clase para los dos casos porque es un solo problema; quién la lleva sale de MEDIR los PNG con `herramientas/medir-escudos.py`, y el umbral —20 % de tinta clara— es el mismo con el que el selector decide si un escudo se ve sobre su carta. La ÚNICA superficie que no la usa es la carta del selector de equipos, que no se apoya sobre la pizarra sino sobre el color del club: ahí el problema está resuelto eligiendo el color que deja ver el escudo, y perfilando los que no se ven sobre ninguno. Ver `escudo(id, clase, { plata: false })`. El `padding` va con `border-box` para que la plata NO agrande la caja: los tamaños de escudo y de marca están medidos contra lo que tienen al lado, y uno creciendo cuatro píxeles desalinea la fila entera. */ /* UN PÍXEL DE AIRE Y NADA MÁS, y la esquina en porcentaje. El aire estuvo en `7%` unas horas y era un error de los que se ven una sola vez: **el porcentaje de un `padding` se resuelve contra el ancho del CONTENEDOR, no del elemento.** En una celda de tabla angosta daba 2px y parecía funcionar; en la cabecera de la división, cuyo contenedor mide mil píxeles, daban 75 de cada lado y el logo de la Bundesliga salía como una baldosa blanca de 150px al lado de un título de 18. Un valor que se ve bien en el sitio donde lo probaste y explota en el de al lado no es proporcional: es una cuenta contra la caja equivocada. Con un píxel el escudo mide lo mismo que sus vecinos sin plata, que es lo que hace que una columna de escudos no parezca de dos tamaños. La ESQUINA sí puede ir en porcentaje —`border-radius` se resuelve contra la caja propia— y así la plata de 16px queda casi recta y la de 60 acompaña el radio de placa del sistema. */ .marca-plata { box-sizing: border-box; padding: 1px; border-radius: 14%; background: var(--ink-100); } /* LA PLATA DE NOCHE. Existe por UNA superficie: la cabecera de la mesa de negociación, que se viste del club de enfrente y por lo tanto puede ser CLARA. Sobre la pizarra y sobre la carta del selector el que desaparece es siempre el escudo oscuro —el fondo es siempre oscuro— y por eso ahí la plata clara alcanza; sobre el celeste del Racing el que desaparece es su escudo de tinta clara, y una plata blanca debajo lo borraría igual que el fondo. De los 115 escudos que no se ven sobre el color de su propio club, 30 son de este lado. De qué lado va lo dice la tinta del escudo, medida, no la de la superficie. */ .marca-plata--noche { background: var(--ink-1000); } /* EL HALO — la otra forma de rescatar un escudo, y la que se usa cuando se puede. La placa resuelve el contraste a cambio de convertir el escudo en una calcomanía: una caja blanca con esquinas donde debería haber un escudo. El halo hace lo mismo sin la caja —sigue la silueta del PNG, porque `drop-shadow` se calcula sobre el canal alfa— y deja el fondo del club asomando alrededor del dibujo. NO REEMPLAZA A LA PLACA, Y ESO ESTÁ MEDIDO. El halo sólo marca el BORDE, así que sirve cuando el dibujo se lee solo una vez despegado del fondo. Con la Juventus no sirve: es una J negra, el halo le dibuja el contorno y adentro no hay nada. Con el Eibar tampoco, aunque su dibujo sí tenga dos colores: su banderín es casi todo transparente por dentro y sin un fondo abajo se le ve la pizarra a través. De los 105 que necesitan ayuda sobre la pizarra, 74 llevan halo y 31 se quedan con la placa; quién va de cada lado lo deciden los dos números nuevos de `escudos-luz.js` y no una lista escrita a mano. EL RADIO ACOMPAÑA AL TAMAÑO, y ésta es la parte que se probó y falló primero. Con un radio fijo de 1px el halo se ve bien a 56px y EMPASTA a 17: a ese tamaño un píxel de halo es proporcionalmente seis veces más grueso, y el Liverpool y el Eibar quedaban peor que con la placa. Un radio de ~1,8 % del lado se comporta igual en todo el rango, y por eso `--halo` lo declara la regla de CADA TAMAÑO de escudo y esta clase sólo lo consume. No se puede resolver con porcentajes: `drop-shadow` no los acepta. Y `--halo` se declara allá y no acá por una razón de cascada, no de gusto: una custom property se resuelve por especificidad como cualquier otra, y `.marca-halo` y `.crest--sm` tienen la MISMA. Declarándolo acá ganaría éste por ir después en el archivo, y los diez tamaños quedarían todos en el valor de 56px — que es justo el que empasta a 17. El respaldo de `0.5px` es para un escudo que aparezca en una superficie sin regla de tamaño propia: queda correcto en el medio del rango en vez de romperse. Y va en DOS pasadas, no en una: la primera es el filo que despega el dibujo, la segunda es el desenfoque que lo separa del fondo. Con una sola, o se ve un contorno duro de sticker o se ve una nube. Y SE PUBLICA COMO `--halo-filtro` ADEMÁS DE APLICARSE, porque `filter` no se suma: se pisa. Cuatro superficies ya traen el suyo —la sombra que despega el escudo del fondo en la mesa, la bienvenida y la vuelta olímpica, y el gris de la barra de espera—, y son justo las que se visten del club, o sea las que más necesitan el halo. Componen las dos con `var(--halo-filtro, )`, que queda vacío cuando la clase no está puesta. El halo va PRIMERO en esa lista: los filtros se aplican en cadena, y con la sombra delante el halo terminaría rodeando también a la sombra. */ .marca-halo { --halo-filtro: drop-shadow(0 0 var(--halo, 0.5px) rgba(255, 255, 255, 0.95)) drop-shadow(0 0 calc(var(--halo, 0.5px) * 2.1) rgba(255, 255, 255, 0.5)); filter: var(--halo-filtro); } /* EL HALO DE NOCHE, por el mismo motivo que la plata de noche: sobre el celeste del Racing el que desaparece es el escudo de tinta CLARA, y un halo blanco debajo lo borraría igual que el fondo. Lo piden las tres superficies que se visten del club —la mesa, la bienvenida y la vuelta olímpica—. REDEFINE `--halo-filtro` Y NO SÓLO `filter`, y las dos cosas hacen falta. Esas tres superficies traen su propia sombra y por eso ganan la propiedad `filter` entera: si acá sólo se cambiara `filter`, el suyo lo descartaría y seguirían componiendo el halo BLANCO de la regla de arriba — que es exactamente el que no se ve sobre ellas. Se probó, y el escudo de tinta clara sobre el celeste del Racing volvía a desaparecer. */ .marca-halo--noche { --halo-filtro: drop-shadow(0 0 var(--halo, 0.5px) rgba(0, 0, 0, 0.9)) drop-shadow(0 0 calc(var(--halo, 0.5px) * 2.1) rgba(0, 0, 0, 0.45)); filter: var(--halo-filtro); } .comp-marca { display: flex; align-items: center; flex: none; } .chrome__logo { width: 24px; height: 24px; object-fit: contain; } /* En qué torneo y en qué fecha estás: es lo que contesta «¿dónde estoy?» al abrir cualquier pantalla, y estaba dicho en el cuerpo más chico del sistema y en el gris más apagado, del tamaño de un pie de tabla. Sube un escalón de cuerpo y otro de color —secundario, no primario: sigue siendo contexto y no el título de la pantalla— y el logo crece con él para no quedar de adorno. */ .chrome__row--primary .comp-marca .chrome__logo { width: 32px; height: 32px; } /* El rótulo del torneo dejó de ser un `.label` suelto y pasó a ser el renglón de arriba del reloj: ver EL RELOJ DEL JUEGO, más abajo. */ .tabla-marca { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } /* EL LOGO DE LA LIGA TIENE QUE LEERSE. Los de `assets/ligas` no son un símbolo suelto sino el escudo COMPLETO con el nombre debajo —«PRIMERA NACIONAL» en dos renglones— y a 22 píxeles eso no era un logo: era un punto azul al lado del título. Un adorno que no se puede identificar ocupa sitio y no dice nada. A 34 se reconoce de cuál se trata, que es todo lo que se le pide, y sigue por debajo del alto de la fila del encabezado. */ .tabla-marca__logo { width: 34px; height: 34px; object-fit: contain; flex: none; } /* El torneo, debajo del rótulo de la tarjeta. Va en blanco y en peso de dato, no en magenta: el magenta nombra la TARJETA —«Torneos»— y esto es lo que la tarjeta está mostrando ahora mismo, que cambia con la pestaña. Es la misma jerarquía que la fuente pone entre «Torneos» y «Premier League». */ .tabla-torneo { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* En la fila de Programación el logo ocupa el sitio que tenía el icono de trofeo. Nació con el ancho de ese icono —13 píxeles— y ahí está el error: un icono del sistema es un trazo de una sola forma y se lee a 13; una marca de liga es un escudo con letras adentro, y a 13 es una mancha de color. La columna se corrió tres píxeles y la marca pasó a distinguirse, que es lo único que se le pide. Ver LA ESCALA DE LAS MARCAS DE LIGA. */ .comp__logo { width: 18px; height: 18px; object-fit: contain; flex: none; } /* Botones de icono del chrome */ .icon-btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); } /* `.icon-btn__wrap` y `.badge` vivían acá para el sobre del chrome con su «9+»: un contador escrito a mano en el marcado, encima de un botón que no abría nada. El sobre se fue —Mensajes es una solapa del portal, que sí lleva a los mensajes— y el globo con él. Cuando haya un contador de verdad, el sitio es `.nav-sub__count`, que ya existe y ya lo alimenta el buscador. */ /* EL RELOJ DEL JUEGO: fecha y hora son estado, por eso viven pegados a la acción que las hace avanzar. Y DESDE HOY TAMBIÉN EL TORNEO, que es el mismo tipo de cosa —dónde y cuándo estás parado— y estaba al lado, en su propio rótulo. Dos cosas de la misma familia, en la misma esquina, con dos formas distintas: una en caja y la otra al aire. Apiladas ocupan lo que ocupaba el rótulo solo, y el piso primario a 1440 vuelve a entrar en una línea. */ .clock { display: grid; gap: 1px; padding: var(--sp-2) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); text-align: right; line-height: 1.1; } /* LA FECHA NO SE PARTE. El reloj nació en pantallas donde tenía todo el hueco entre la navegación y el botón; desde que también va en las once que llevan el torneo al lado, el sitio es el que sobra, y «Sáb 26/9/2026» se quebraba en dos renglones. La caja mide dos líneas, pero para otra cosa —la fecha arriba y el reloj del partido abajo—, así que partida ahí decía dos cosas donde hay una y encima empujaba el botón. */ /* Arriba el NÚMERO y abajo el día, que es la forma de la caja en la fuente (`29/9/2025` sobre `lun 00:00`). El número manda —es lo que se compara con el calendario— así que va más grande y en peso de dato; el día es el que dice si el sábado ya llegó, y va debajo en versalitas. */ .clock__comp { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; } .clock__date { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } /* PERO LA CAJA CEDE ANTES QUE LA PÁGINA. Medido: con «Copa Argentina · Treintaidosavos de final» adentro, el reloj pide 320 px y la fila primaria pasa a necesitar 1371. Debajo de eso —o sea, en cualquier pantalla de 1280, que son casi todas— la que abría barra horizontal era LA PÁGINA ENTERA, y lo que quedaba cortado del lado derecho no era el reloj: era la columna de la derecha de la pantalla que estuvieras mirando, en las veintiuna. Un rótulo de estado no puede cortar el contenido del juego. Así que el reloj se encoge y se recorta con puntos suspensivos, y cede exactamente lo que falte: entero a 1440, «Copa Argentina · Treintaidos…» a 1280. El `min-width: 0` es lo que lo permite —sin él un hijo `nowrap` fija el piso del padre— y va también en los dos renglones, que son celdas de una retícula y tienen el mismo piso automático. La fecha sigue sin partirse: se recorta, que es otra cosa. */ .clock { min-width: 0; } .clock__comp, .clock__date { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Y CUANDO RECORTARLO YA NO DICE NADA, SE VA. A 1100 el hueco que le queda son 36 px: no es un reloj angosto, es un rótulo ilegible ocupando sitio. Debajo de 1240 la fila entra sin él y no hace falta ninguna barra; es la misma decisión que ya se había tomado para 860, con el número donde de verdad está el límite. */ @media (max-width: 1240px) { .clock { display: none; } } .clock__time { font-size: var(--fs-md); font-weight: 700; font-stretch: var(--wd-condensed); } /* LA acción principal. Único bloque de color sólido de toda la pantalla. */ /* EL TEXTO VA CENTRADO, y hasta ahora no lo estaba: el botón nació con dieciséis píxeles de aire a la izquierda y ocho a la derecha —la medida de un botón con chevrón al final, donde el icono pide menos borde que una letra— y el contenido arrancando al principio. En «Continuar ›» eso es correcto; en «Vender», «Quedármelo» o «Listo», que son texto y nada más, la palabra queda corrida hacia un lado dentro de su caja, y es de esas cosas que se ven sin saber qué se está viendo. Así que el aire pasa a ser parejo y el contenido se centra, y el recorte se aplica SÓLO del lado donde efectivamente hay un icono. La regla la escribe el botón mirándose a sí mismo (`:has()`) y no cada sitio que lo usa: son dieciocho pantallas poniendo `.action`, y una clase extra para acordarse es una clase que la mitad se olvida. */ .action { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); height: 34px; padding: 0 var(--sp-6); border-radius: var(--r-md); background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.01em; transition: background var(--dur-fast) var(--ease); } .action:has(> .i:first-child) { padding-left: var(--sp-4); } .action:has(> .i:last-child) { padding-right: var(--sp-4); } .action:hover:not(:disabled) { background: var(--accent-strong); } /* El `:active` es VIOLETA HONDO y no cal. Estuvo en verde-lima desde el repintado —herencia del mundo anterior, cuando la cal era el acento— y era una regresión silenciosa: pulsar cualquier acción principal del juego daba un destello verde que la guía no pide en ninguna parte. */ .action:active:not(:disabled) { background: var(--accent-dim); } .action .i { opacity: 0.75; } /* EL BOTÓN APAGADO. Faltaba en el sistema, y hasta que la negociación fue una mesa no se notaba: un `disabled` sin piel propia es un botón de acento pleno que no hace nada al pulsarlo, que es peor que no tenerlo. Pierde el relleno y se queda con el borde del botón callado — sigue siendo un botón, deja de ser LA acción. El motivo por el que está apagado lo dice siempre el texto de al lado; el color no es el que informa. */ .action:disabled { background: none; border: 1px solid var(--line); color: var(--text-disabled); cursor: default; } /* -------------------------------------------------------------------------- 3. MIGA DE PAN -------------------------------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; gap: var(--sp-3); height: 26px; padding: 0 var(--sp-6); border-bottom: 1px solid var(--line-hairline); background: var(--ink-950); font-size: var(--fs-xs); color: var(--text-muted); } .breadcrumb a:hover { color: var(--text-secondary); text-decoration: underline; } .breadcrumb [aria-current='page'] { color: var(--text-secondary); } .breadcrumb .i { width: 11px; height: 11px; color: var(--ink-600); } /* Pastilla de dato: el contenedor genérico de toda la cabecera. */ .chip { display: flex; align-items: center; gap: var(--sp-3); height: 24px; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-950); font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; } .chip--plain { border-color: transparent; background: none; padding-left: 0; } .chip strong { color: var(--text-primary); font-weight: 600; } .chip--status { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-texto); font-weight: 600; } /* LA BANDERA LLEVA FILO. Una bandera no desaparece por dentro como un escudo —tiene colores— sino por el BORDE: la mitad de las banderas del mundo tienen una franja oscura, y donde esa franja toca el canto del rectángulo el canto deja de existir sobre la pizarra. Medido rasterizando las 109 del sprite y contando qué parte de su perímetro no llega a 1,5:1 contra el panel: 34 de 109 pierden al menos un décimo del contorno, y la de Curaçao pierde el 93 % —es azul oscuro entera y sobre el panel no era una bandera, era una mancha. Acá NO va la plata de los escudos: una bandera es un rectángulo lleno, no un dibujo con alfa, así que no necesita algo DEBAJO sino que se le vea el canto. Un filo de un píxel por dentro se lo devuelve a las 109 sin tapar ninguna. Va por dentro (`inset`) y no como `border` porque la bandera es chica y hay una columna de tabla contando esos píxeles; y en blanco translúcido y no en un token de línea porque tiene que aclarar el canto de una bandera oscura sin ensuciar el de una clara — sobre la bandera de Japón no se ve, que es lo correcto: ahí el canto lo dibuja la bandera. 20×14 desde el 18 de agosto de 2026, a pedido. Eran 16×11 y en la columna «NAC.» del plantel se leían como una manchita de color: a este tamaño se distingue una argentina de una uruguaya sin acercarse, que es exactamente para lo que está esa columna. La proporción es la misma —un pelo más de 1,4:1— así que ninguna de las 109 se deforma. */ .flag { width: 20px; height: 14px; border-radius: var(--r-hair); flex: none; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.28); } /* Estrellas: dos capas, la superior recortada por porcentaje. Permite medias estrellas sin dibujar un glifo aparte. */ .stars { position: relative; display: inline-flex; } .stars__layer { display: flex; gap: 1px; } .stars__layer--base { color: var(--ink-700); } /* En CAL y no en el acento: una estrella es una CALIFICACIÓN, no un control. Bajo la regla del mundo nuevo el violeta sólo pinta lo que responde al dedo, y unas estrellas violetas al lado de una pestaña violeta invitan a pulsarlas. Además las pone en la misma familia que la rampa de atributos, que es lo que la ficha compara de un vistazo. */ /* LAS ESTRELLAS VAN EN ÁMBAR, no en el verde del valor bueno. Leído a 1:1 en la guía de FM26: las estrellas de calidad de un futbolista son doradas, en las recomendaciones del cuerpo técnico y en la ficha. Y no rompe la regla del color: una estrella no es una CIFRA juzgada dentro de una rampa —eso son los atributos y las calificaciones, que siguen en verde—, es un símbolo con su propio idioma. Cinco estrellas doradas se leen sin saber nada de este sistema; cinco estrellas verdes hay que aprenderlas. El ámbar sigue significando lo mismo que ya significaba en otro sitio del juego — «mirá esto»— sólo que acá mira hacia arriba. */ .stars__layer--fill { position: absolute; inset: 0; overflow: hidden; color: var(--amber-400); width: var(--pct, 0%); } .stars .i { width: 13px; height: 13px; } .btn { display: flex; align-items: center; gap: var(--sp-3); height: 28px; padding: 0 var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raised); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn:hover { background: var(--bg-active); color: var(--text-primary); border-color: var(--line-strong); } .btn .i { color: var(--icon-quiet); } .btn:hover .i { color: var(--text-secondary); } /* Un botón agotado —el transporte del partido después del pitazo final— dice que ya no hace nada en vez de seguir ofreciéndose. Mismo vocabulario que el botón de historial del chrome, que era el único estado deshabilitado que tenía el sistema. */ .btn[disabled] { background: var(--ink-800); border-color: var(--line-hairline); color: var(--text-disabled); cursor: default; } .btn[disabled]:hover { background: var(--ink-800); color: var(--text-disabled); border-color: var(--line-hairline); } .btn[disabled] .i { color: var(--text-disabled); } .btn--accent { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-strong); } /* EL HOVER ACLARA DENTRO DEL ACENTO. Iba al paso alto de la familia del valor bueno, o sea que un botón violeta cambiaba de color al pasarle el ratón. Con la familia en verde-lima el defecto se leía como «se aclara»; con la familia en verde de verdad es un botón violeta cuya etiqueta se pone verde, que es la Regla del Dedo al revés — el color de lo que se lee invadiendo lo que se pulsa. Es el mismo defecto que tenía `.enlace:hover` en `nueva.css`, y los dos salieron a la luz por el mismo giro de paleta. */ .btn--accent:hover { background: var(--accent-wash-hi); color: var(--vio-200); } .btn--accent .i { color: var(--accent); } .panel { display: grid; align-content: start; gap: var(--sp-3); } .panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } /* Cabecera de bloque interior: misma jerarquía, sin la línea que separa un panel de primer nivel. */ .panel__head--flush { border: 0; padding-bottom: 0; } /* LO QUE VA A LA DERECHA DEL TÍTULO NO SE PARTE. En la cabecera de un panel el rótulo de la derecha es siempre una medida corta —«4-3-1-2», «5 CAMBIOS», «10 DE 11»— y todas se leen de una sola pieza. En la columna del once, que es la más angosta de la pantalla del partido, «4-3-1-2» se cortaba en «4-3-1-» arriba y «2» abajo: eso no es una formación, es un error de imprenta. Y el renglón que aparecía se lo comía a la lista de futbolistas. Sólo al rótulo que ACOMPAÑA, nunca al primero: un `.band__sub` que sólo trae su nombre —«La intención», «La charla»— tiene que poder doblarse si algún día le toca una columna angosta. */ .panel__head > .label:not(:first-child), .band__sub > .label:not(:first-child) { white-space: nowrap; } /* El rótulo de placa. En LA TRANSMISIÓN el título de un panel es lo único que se pinta de magenta —«Archivos adjuntos», «Formación», «Estadísticas del partido» en la fuente— y ese es TODO su trabajo: nunca es un estado, nunca se puede pulsar. Las etiquetas micro de `.label` siguen en gris apagado; si se pintaran también, el magenta dejaría de nombrar secciones y pasaría a ser el color del texto chico. */ .panel__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.01em; color: var(--label-color); } /* -------------------------------------------------------------------------- 5b. LA TARJETA -------------------------------------------------------------------------- Una placa con superficie propia, esquina de 8px y su rótulo magenta arriba. Es como FM26 compone el portal entero: cada bloque es una tarjeta y cada tarjeta DICE CÓMO SE LLAMA. El sistema separaba con hairlines y aire —tres columnas de un mismo plano—, y eso obligaba a que los bloques interiores se presentaran con una etiqueta micro gris, media jerarquía por debajo del título de la columna. En la fuente no hay esa media jerarquía: «Mensajes» y «Informe del próximo rival» se rotulan igual porque son lo mismo, dos tarjetas de un tablero. El rótulo NO lleva línea debajo: la separación ya la dibuja el borde de la propia tarjeta, y dos cortes para una sola división es uno de más. -------------------------------------------------------------------------- */ /* Sin `min-height: 0`: una tarjeta que no scrollea por dentro tiene que medir lo que mide su contenido. Con el mínimo en 0 la columna la encoge para que entre la de al lado y la tabla se sale de su propia placa — que es exactamente lo que pasaba con la Programación de temporada completa. */ .tarjeta { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); background: var(--bg-panel); border: 1px solid var(--line-hairline); border-radius: var(--r-md); } /* La que se queda con el alto que sobra en su columna: la lista larga de la pantalla, y la única que sí puede encogerse, porque tiene un scroller adentro que se hace cargo. */ .tarjeta--grow { flex: 1 1 auto; min-height: 0; } .tarjeta .panel__head { padding-bottom: 0; border-bottom: 0; } /* -------------------------------------------------------------------------- 6. LA FILA DE ATRIBUTO -------------------------------------------------------------------------- El patrón central de toda la pantalla. Una línea de 22px hace tres trabajos: etiqueta, valor numérico y comparación visual. El relleno es el fondo de la fila, no un elemento aparte: por eso 45 atributos entran sin que la pantalla se convierta en un gráfico de barras. -------------------------------------------------------------------------- */ .attrs { display: grid; gap: 1px; } .attr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--row-h); padding: 0 var(--sp-4); /* 5px y no 3: el escalón hacia el radio de FM26, donde nada es casi recto. No sube más porque el relleno se dibuja con `scaleX` y un radio grande se achata al escalar — a 8px la esquina de una barra corta y la de una larga ya no tienen la misma forma, y treinta y seis filas lo delatan. */ border-radius: var(--r-sm); isolation: isolate; transition: background var(--dur-fast) var(--ease); } /* El relleno proporcional al valor. */ /* Se escala en vez de animar el ancho: transform no dispara layout, así que las 36 filas pueden re-medirse a la vez al cambiar de jugador sin tirones. */ .attr::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-sm); background: var(--fill, transparent); transform: scaleX(calc(var(--v) / 20)); transform-origin: left center; transition: transform var(--dur) var(--ease); } .attr:hover { background: var(--bg-hover); } .attr__name { font-size: var(--fs-md); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attr__value { font-size: var(--fs-md); font-weight: 600; color: var(--val, var(--text-primary)); font-variant-numeric: tabular-nums; } /* Tramos. Un atributo flojo no se pinta de rojo: se apaga. El atributo data-tier está RESERVADO en todo el proyecto para la rampa 1–20, así que el mapeo vive una sola vez y lo heredan las tres formas de la fila de atributo: lectura (.attr), entrada (.thr) y celda (.cell). El tramo 0 es "sin exigencia": ni relleno ni cifra encendida. */ [data-tier='0'] { --fill: none; --val: var(--text-muted); } [data-tier='1'] { --fill: var(--attr-1-fill); --val: var(--attr-1-text); } [data-tier='2'] { --fill: var(--attr-2-fill); --val: var(--attr-2-text); } [data-tier='3'] { --fill: var(--attr-3-fill); --val: var(--attr-3-text); } [data-tier='4'] { --fill: var(--attr-4-fill); --val: var(--attr-4-text); } [data-tier='5'] { --fill: var(--attr-5-fill); --val: var(--attr-5-text); } /* El nombre del atributo acompaña a su cifra, pero un escalón por detrás: sólo se apaga en el tramo flojo y sólo sube en el élite. Los dos del medio se quedan en el color de lectura, porque son el 93 % de los casos y teñirlos convertiría la lista en un semáforo. El élite es el 4 desde que la rampa tiene cuatro tramos; el 5 se mantiene por si algún guion viejo lo emite. */ /* LA MARCA DEL ROL, al canto de la fila. Va con `box-shadow: inset` y no con `border-left`, por lo mismo que en la bandeja: un borde correría el contenido de todas las filas marcadas tres píxeles respecto de las que no lo están, y la lista dejaría de tener una sola columna de nombres. `data-marca` lo pone `marcaDelRol()` en `app.js` y cambia al elegir otro rol: la lista entera se re-marca sin recargar nada. */ .attr[data-marca='clave'] { box-shadow: inset 3px 0 0 var(--rol-clave); } .attr[data-marca='sosten'] { box-shadow: inset 3px 0 0 var(--rol-sosten); } .attr[data-tier='1'] .attr__name { color: var(--text-muted); } .attr[data-tier='4'] .attr__name, .attr[data-tier='5'] .attr__name { color: var(--text-primary); } .attr[data-tier='4'] .attr__value, .attr[data-tier='5'] .attr__value { font-weight: 700; } /* -------------------------------------------------------------------------- LO QUE NO SE SABE DEL TODO -------------------------------------------------------------------------- Un número estimado por tus ojeadores —«12–16» en vez de «14»— se escribe en el gris de lo secundario y no en el ámbar del aviso: no es una advertencia, es un dato de menor grado. En ámbar competiría con los plazos, que son lo único que apura en esta interfaz. Y en cursiva, que es lo que lo distingue de un número exacto de un vistazo sin agregar un color al sistema. Es la única cursiva del juego, y por eso funciona: significa una sola cosa. */ .attr__value--estimado, .cell--estimado { color: var(--text-muted); font-style: italic; font-variant-numeric: tabular-nums; } /* Variante sin barra, para datos que no son escala 1–20. */ .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); min-height: var(--row-h); font-size: var(--fs-md); } /* EL VALOR VA EN PASTILLA, y esto sale de la guía de FM26 leída a 1:1: en su ficha, «Club», «Nacionalidad», «Posiciones» y «Salario» llevan la etiqueta suelta a la izquierda y el valor DENTRO de una pastilla a la derecha. No es adorno. Una lista de pares etiqueta-valor con las dos mitades en texto plano se lee como una sola columna de palabras y hay que ir emparejando con el ojo; con el valor encapsulado, las dos mitades dejan de parecer la misma clase de cosa y el par se arma solo. Es el mismo recurso que la pastilla de equipo del portal, aplicado a un dato. Se queda en `--fs-sm` y sin negrita: la pastilla ya destaca lo suficiente, y sumarle peso convertiría cada fila en un titular. */ .stat-row dt { color: var(--text-muted); } .stat-row dd { margin: 0; justify-self: end; padding: 2px var(--sp-4); border: 1px solid var(--line-hairline); border-radius: var(--r-sm); background: var(--bg-row); color: var(--text-primary); font-size: var(--fs-sm); text-align: right; } /* -------------------------------------------------------------------------- EL BLOQUE DE CIFRA: LA CIFRA ARRIBA, LA ETIQUETA DEBAJO -------------------------------------------------------------------------- Los bloques de dato del juego —`.dato` en el plantel, el entrenamiento, el mercado y la contratación, `.pron` en la previa— ponían la etiqueta en versalitas ENCIMA del número. Y la guía de este proyecto ya lo prohibía por escrito, en la Regla de la Etiqueta: «una etiqueta chica sobre un texto grande es un antetítulo, y un antetítulo es siempre ruido; la única cifra grande que puede llevar etiqueta encima es la que encabeza una banda entera». Estos bloques no encabezan ninguna banda: son siete cifras en fila. FM26 hace lo mismo que la regla pide —«Mundo» sobre «Amplitud del ojeo», «3» sobre «Jugadores ojeados»— así que acá la fuente y nuestra propia guía coinciden, y lo que estaba mal era el código. El motivo de fondo es de escaneo, que es el principio del producto: en una fila de siete bloques se recorren los NÚMEROS y la etiqueta se lee sólo cuando un número sorprende. Con la etiqueta primero, cada bloque obliga a leer una palabra para llegar al dato. Se hace con `order` y no moviendo el marcado: el orden del DOM es el que quiere quien lo escucha con voz —«En cancha, 11 de 11»— y ése está bien. -------------------------------------------------------------------------- */ .dato > .label, .pron > .label { order: 2; } .dato > .dato__valor, .pron > .pron__valor { order: 1; } .pron > .pron__nota { order: 3; } /* Segmentado: el control de dos estados del sistema. */ .segmented { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); } .segmented__btn { padding: var(--sp-2) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; /* Un sistema es un número: "4-4-2" partido en dos líneas deja de nombrar una formación. Antes que cortarlo, el control se dobla o se estrecha. */ white-space: nowrap; color: var(--text-muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .segmented__btn:hover { color: var(--text-primary); } /* EL TILDE DELANTE DE LA ELEGIDA. Leído a 1:1 en FM26 (`Preparador | ✓ Mental`) y ya estaba anotado en la referencia desde el primer recorte: «la opción elegida de un grupo segmentado es un bloque violeta con el texto en blanco y un tilde delante». El relleno estaba; el tilde faltaba. No es redundante con el relleno: el relleno dice CUÁL está activa comparando con las de al lado, y el tilde lo dice sin comparar. En un grupo de dos —«Local | Visitante»— esa diferencia es la mitad del control. Va con `::before` y contenido de texto, no con un icono del sprite: es una marca tipográfica dentro de un botón de texto, y un SVG acá obligaría a que cada sitio que dibuja un segmentado se acuerde de meterlo. */ .segmented__btn[aria-pressed='true'] { background: var(--accent); color: var(--text-on-accent); } .segmented__btn[aria-pressed='true']::before { content: '✓'; margin-right: var(--sp-2); font-weight: 700; /* Un poco más chico que el rótulo: acompaña, no anuncia. */ font-size: 0.85em; } /* Y EL SITIO SALE DEL PROPIO BOTÓN, no del grupo. El tilde cuesta 19px, y los dos segmentados del portal —los filtros de la bandeja y las pestañas de la tabla— ya entraban por poco: con el tilde se partían en dos renglones. Como sólo hay UN botón activo a la vez, el flanco izquierdo de ese botón es exactamente el sitio que sobra — el tilde ocupa el aire que ya estaba ahí en vez de pedirle ancho al grupo. */ .segmented__btn[aria-pressed='true'] { padding-left: var(--sp-3); } /* Contador dentro de un botón segmentado. Sobre el relleno de cal se hunde en vez de pintarse de otro color: se deriva del token de texto sobre acento. */ .segmented__count { margin-left: var(--sp-3); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--bg-raised); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 700; } .segmented__btn[aria-pressed='true'] .segmented__count { /* 12 % y no 22: la chapita se apoya sobre el violeta del botón elegido y cada punto de blanco que se le pone de fondo se lo saca al blanco del número. MEDIDO: al 22 % el contador quedaba en 3,94:1 y al 12 % da 4,73, con la chapita todavía separándose del fondo. Es el caso de manual de un fondo translúcido que parece gratis y se cobra en el texto de encima. */ background: color-mix(in srgb, var(--text-on-accent) 12%, transparent); color: var(--text-on-accent); } /* -------------------------------------------------------------------------- EL SEGMENTADO DE FILTRO — pastillas sueltas, no riel -------------------------------------------------------------------------- VIVÍA EN `inicio.css` Y SE MUDÓ ACÁ, porque lo usan dos pantallas y no una: la bandeja del portal y el filtro por línea del plantel. Mientras estuvo en la hoja del portal, `plantel.html` pedía `segmented--filtros` en el marcado —a propósito: el `DESIGN.md` de 922c894 dice «cinco pastillas encima de la tabla»— y no lo recibía, porque esa pantalla no carga `inicio.css`. La clase no hacía nada y el filtro se dibujaba como riel. Un modificador que usan dos pantallas vive en la hoja del sistema. El `.segmented` del sistema es una CÁPSULA: un riel con borde y fondo propios y las opciones apretadas adentro. Es la forma correcta para elegir uno de tres valores de una misma cosa —una mentalidad, un ritmo— y es la que FM26 usa para su control de táctica. Los filtros de la bandeja son otra cosa en la fuente y por eso llevan modificador: **pastillas sueltas**, cada una con su borde de 1px, separadas por aire, la activa en violeta pleno. No es un capricho de forma — un riel dice «estas cuatro son excluyentes y del mismo eje», y acá lo que se elige es un recorte de una lista, que es la clase de cosa que se lee de a una. Y son más altas: 32px contra los 26 del riel. La bandeja pasó a filas de 62 y unos filtros de 26 encima de ellas se leían como una nota al pie del panel en vez de como su control. -------------------------------------------------- */ .segmented--filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; border: 0; background: none; } /* EL AIRE DE ADENTRO BAJA A 8 EN VEZ DE SUBIR A 16, y el motivo es el idioma. Medido en la columna de la bandeja: las cuatro pastillas con 12px de aire piden 382px sobre 376 disponibles —seis de más— y «Archivados» se cae a un segundo renglón; con 16 piden 414. Cuatro filtros en dos líneas dejan de leerse como un grupo. En la fuente los rótulos son «All», «New», «Tasks», «Unread»; acá son «Sin leer» y «Archivados», y el español paga ese ancho. Lo que SÍ sube es el alto, de 26 a 32, que es lo que este control necesitaba para acompañar a una bandeja de filas de 62 en vez de leerse como una nota al pie del panel. El aire horizontal no era lo que lo hacía chico. */ .segmented--filtros .segmented__btn { display: flex; align-items: center; height: 32px; /* Seis y no ocho, y es la tercera vez que este grupo pide sitio: la columna de la bandeja mide 376 y las cuatro pastillas en español piden más que en inglés. Cada cosa que entra al control —el contador, el tilde— se cobra acá. Seis por lado sigue separando el rótulo de su borde; por debajo, la pastilla deja de tener aire y pasa a ser un rótulo con caja. */ padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-secondary); } .segmented--filtros .segmented__btn:hover { border-color: var(--line-strong); color: var(--text-primary); } /* El contador dejó de ser una chapita: ahora es parte del rótulo, entre paréntesis, así que pierde fondo y forma y se queda sólo con el tono más apagado — que es lo que lo separa del nombre del filtro sin gritarlo. */ /* EL HUECO ANTES DEL CONTADOR LO PONE `gap`, NO EL MARCADO NI EL MARGEN. Los dos guiones —`inicio.js` y `plantel.js`— escriben un espacio entre el rótulo y el `` del contador, y ese espacio NO SE VE: el botón es `display: flex`, así que el texto y el span son dos ítems y el blanco entre ellos se colapsa. Medido en las dos pantallas antes de esto: hueco de 0 px, o sea «Sin leer(5)» y «Arqueros(4)». El comentario que vivía acá daba ese espacio por bueno y por eso el margen se había puesto en 0. DOS PÍXELES Y NO CUATRO, y el número sale de medir la bandeja entera. La fila de cuatro filtros del portal es la que menos sitio tiene, y su columna cambia de ancho con la ventana. Medido, lo que pide la fila contra lo que hay: ventana 1440 1500 1560 1600 1920 2000 hay 320 335 350 359 438 457 pide 339 346 350 359 438 457 (con `gap: 2`) A 1560 la fila entra JUSTA: con `--sp-2` (4px) pide 354 sobre 350 y se cae a dos renglones. Con `--sp-1` no se cae en ningún ancho de los catorce medidos, de 1100 a 2200. Y de paso queda dicho lo que el comentario viejo prometía y ya no era cierto: **a 1440 y 1500 la bandeja YA dobla en dos renglones sin ningún hueco** —339 sobre 320 y 346 sobre 335—. El renglón único que el margen en 0 vino a comprar hace tiempo que no se compra en esos anchos, así que los dos píxeles no le quitan nada a nadie. La medida vieja que estaba escrita acá —«378 sobre 376»— no se reproduce en ninguna ventana: la columna se movió y el número quedó viejo. */ .segmented--filtros .segmented__btn { gap: var(--sp-1); } .segmented--filtros .segmented__count { margin-left: 0; padding: 0; background: none; border-radius: 0; color: var(--text-muted); font-size: inherit; font-weight: 400; } .segmented--filtros .segmented__btn[aria-pressed='true'] .segmented__count { background: none; color: color-mix(in srgb, var(--text-on-accent) 72%, transparent); } /* Y le devuelve el BLANCO al elegido. `.segmented--filtros .segmented__btn` pesa lo mismo —dos clases— que `.segmented__btn[aria-pressed='true']`, así que le ganaba por venir después: el filtro elegido quedaba con el gris de los no elegidos encima de su propio fondo violeta, a 2,32:1. El único de los cuatro que ya decidiste era el que no se leía. El empate se rompe acá con una regla más específica y no con el orden, que es lo que hace que la mudanza desde `inicio.css` no cambie nada: antes ganaba por hoja, ahora por peso. */ .segmented--filtros .segmented__btn[aria-pressed='true'] { border-color: transparent; color: var(--text-on-accent); } /* La banda es una TARJETA con retícula: mismo cuerpo que `.tarjeta` — superficie, borde hairline, esquina de 8px— y adentro un `grid` en vez de una pila, porque su contenido son filas de estado y no bloques apilados. Antes se apoyaba en la retícula de 1px del contenedor para delimitarse; con las tarjetas, cada una se delimita sola. */ .band { display: grid; align-content: start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: var(--bg-panel); border: 1px solid var(--line-hairline); border-radius: var(--r-md); min-width: 0; } .band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .band__note { font-size: var(--fs-xs); color: var(--text-muted); } .dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; } .dot--good { background: var(--good); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--danger); } .big { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: var(--lh-tight); color: var(--text-primary); } .form-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; } .form-bars__bar { width: 9px; height: 100%; border-radius: var(--r-hair) var(--r-hair) 0 0; background: var(--ink-700); transform: scaleY(calc(var(--r) / 10)); transform-origin: bottom; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } /* Variante compacta, para cuando la forma acompaña a otro dato en una fila. */ .form-bars--mini { height: 16px; gap: var(--sp-1); } .form-bars--mini .form-bars__bar { width: 6px; } .form-bars__bar[data-band='good'] { background: var(--verde-500); } .form-bars__bar[data-band='ok'] { background: var(--ink-500); } .form-bars__bar[data-band='bad'] { background: var(--clay-500); } .meter__track { width: 56px; height: 4px; flex: none; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .meter__fill { display: block; width: 100%; height: 100%; border-radius: var(--r-pill); background: var(--accent); transform: scaleX(var(--pct, 0)); transform-origin: left; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .meter__fill--warn { background: var(--warn); } /* Sección no construida: lo dice, en vez de mover un subrayado sin efecto. */ .stub { display: grid; gap: var(--sp-4); max-width: 68ch; padding: var(--sp-9) var(--sp-6); } .stub--inline { padding: var(--sp-9) var(--sp-3); max-width: 54ch; } .stub--narrow { margin: auto 0; padding: 0; max-width: 34ch; } .stub__title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-secondary); } .stub__body { font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); } .stub__body strong { color: var(--text-secondary); font-weight: 600; } /* -------------------------------------------------------------------------- 9. TABLA DE DATOS -------------------------------------------------------------------------- */ .data-table { font-size: var(--fs-sm); } /* EL AIRE DE CELDA BAJA DE 6 A 4, y es la tercera y última factura de la cara. TikTok Sans es un 4 % más ancha que la que había, y ese 4 % no se acumula en una columna gorda que se pueda recortar: medido en el plantel, crece entre 1 y 8 px en DOCE columnas a la vez, 46 en total, y la tabla se salía 42 de su scroller — o sea que «Mercado» quedaba cortado al entrar y había que arrastrar para verlo. Trece columnas por 4 px devuelven 52, que alcanza. Y se paga acá y no en el `font-size` a propósito: la guía dice que cuando una pantalla se rompe se arregla su composición y no el tamaño de su letra, porque la letra es el sistema entero y la composición es de la tabla. Cuatro píxeles por lado siguen separando dos columnas sin que se toquen; el que decidía el ancho no era el aire, era el dato. Y ESOS CUATRO PÍXELES POR COLUMNA AHORA SOSTIENEN OTRA COSA, así que no se devuelven sin medir: la columna del expediente de `nueva.html` mide 490 px fijos, y su ancho salió del `max-content` de `.exp__once`. Medida con la cara nueva, esa tabla **pide 366,3 y tiene 366,7: tres décimas de píxel de holgura**. Cinco columnas por cuatro píxeles es lo que la salvó. **Y OJO CON CÓMO SE MIDE ESO, que la primera vez lo medí mal.** El `getBoundingClientRect()` de la tabla dibujada NO sirve: con `table-layout: auto` una tabla que no entra se COMPRIME en vez de desbordar, así que su rect siempre dice que entra y la medición no puede detectar el problema que fue a buscar. Da 396 y no significa nada. Hay que clonarla con `width: max-content` y medir el clon — eso es lo que la tabla PIDE. (Fue 440 hasta que se midió el once MÁS ANCHO del juego y no el que estaba a la vista: el de Belgrano pide 438,4 y tenía 406, o sea que la tabla venía comprimida treinta y dos píxeles sin que ninguna medición lo dijera. Con 490 le quedan 456 y 17,6 de margen.) El 490 tiene cuatro dueños y conviene tenerlos juntos: el contenido de la tabla, la cara del juego, este acolchado, y **el TEXTO de las cabeceras** — «Posición» y «Edad» eran «Pos» y «Ed», y alguien los alargó a pedido. Un cambio de texto ensancha una tabla sin agregarle una columna, que es el caso que no estaba en la lista. Tres décimas no son un margen. Si hace falta sitio ahí, el número que se mueve es el 490 de `nueva.css`, no éste, que ya se cobró una vez. */ .data-table th { padding: 0 var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); text-align: right; white-space: nowrap; } .data-table th:first-child { text-align: left; padding-left: var(--sp-4); } /* EL ALTO LO PONE LA TABLA, NO LO QUE HAYA ADENTRO. -------------------------------------------------------------------------- Antes el relleno vertical decidía y el alto salía de lo más alto que la fila tuviera adentro, así que once tablas del juego se habían abierto de 27,5 a 46 px sin que nadie lo decidiera: `ligas` daba 31,5 porque su celda más alta era un enlace de 19,5, `plantel` 32,9 por una pastilla de venta de 20,6, y `mercado` 34,7 por un escudo. Tres pantallas con el MISMO relleno y tres alturas distintas — o sea que unificar el relleno no habría alcanzado. Con `height` en la celda —que en una tabla es un mínimo— y el relleno vertical en cero, el alto deja de depender del contenido y el contenido se centra solo, que es lo que `vertical-align: middle` de una celda ya hace. El relleno horizontal no se toca: ése sí es del texto. Y son dos alturas y no una, porque medidas las once no había un abanico sino dos grupos. El porqué de cada número vive en `tokens.css`, con la medición. */ .data-table td { height: var(--fila-tabla); padding: 0 var(--sp-2); text-align: right; color: var(--text-secondary); white-space: nowrap; } /* LA FILA QUE LLEVA UN CONTROL respira más, y se pide DONDE VIVE. -------------------------------------------------------------------------- El primer intento fue automático —`tr:has(button, select, input)`— y estaba mal: medido, se llevaba puestas `plantel` y `mercado`, que pasaban de 33 a 46 por una pastilla de venta de 20 px que entra en 32 de sobra. Las dos tablas más largas y más miradas del juego un 40 % más altas, que es exactamente lo contrario de lo que se vino a hacer. «Tener un botón» no es la pregunta; la pregunta es si el control ENTRA, y eso el CSS no lo puede leer. Así que las tres tablas que de verdad no entran —`inferiores`, el plantel de `entrenamiento` y la lista de `reserva`, con un `.action` de 34 o un desplegable— lo declaran en su propia hoja, cada una con su motivo al lado. Tres excepciones escritas valen más que una regla que acierta a veces. */ .data-table td:first-child { text-align: left; padding-left: var(--sp-4); color: var(--text-primary); } .data-table th:last-child, .data-table td:last-child { padding-right: var(--sp-4); } /* Canalón: una columna de 3px que no lleva texto sino una marca (la zona de clasificación). Vive acá y no en la pantalla porque cualquier tabla con una franja de estado la necesita — y porque si no, la regla de :first-child de arriba obliga a un !important desde fuera para anularse a sí misma. */ .data-table th.gutter, .data-table td.gutter { width: 3px; padding: 0; } /* La marca que va DENTRO del canalón. Es una CELDA y no un borde de color pegado a la fila: es un dato de la tabla —a qué compite ese puesto— y lleva su leyenda. Vive acá desde que la usan dos pantallas: la clasificación del portal y las ocho tablas de grupo de la Libertadores. La franja es un VALOR —dónde termina ese club— y no un estado, así que va en cal y no en violeta: si no se puede pulsar, no lleva el color de canal. Los dos niveles de clasificación se separan por LUMINANCIA dentro de la cal y no por matiz, que es lo que deja el ámbar libre para una advertencia de verdad y la arcilla para un negativo de verdad. */ .zone-chip { display: block; width: 3px; height: 14px; border-radius: var(--r-hair); background: transparent; } .zone-chip[data-zone='champions'] { background: var(--good); } .zone-chip[data-zone='europa'] { background: var(--verde-600); } .zone-chip[data-zone='descenso'] { background: var(--danger); } /* LA FASE PREVIA: la misma copa, sin estar adentro todavía. Mismo color y MEDIA marca, que es la diferencia entre «clasificaste» y «jugás una llave para clasificar». Un cuarto color diría que es un cuarto torneo, y no lo es. Empezó siendo un chip HUECO —contorno en vez de relleno— y no servía: en la tabla el chip mide TRES píxeles de ancho, así que un contorno de píxel y medio por lado lo llena entero y se ve idéntico al lleno. Se probó en pantalla y por eso se cambió. La media altura sobrevive a los tres píxeles porque no depende del ancho. La marca se centra: media barra pegada arriba parecería una barra mal dibujada, y centrada se lee como lo que es, la mitad de algo. */ .zone-chip[data-previa] { transform: scaleY(0.5); } /* LA LEYENDA DE ZONAS. Vive acá y no en la hoja de una pantalla porque la leen el portal y las ligas: en `inicio.css` la de las ligas se quedaba sin nada —esa hoja no la carga— y las tres referencias salían en seis renglones, con el color encima de la palabra en vez de al lado. El chip de la leyenda es MÁS GRANDE que el de la tabla, y a propósito: en la tabla es una marca en el canto de una fila y lo que se lee es la fila, pero acá el color ES el contenido — es lo único que hay que reconocer para volver a la tabla y entenderla. Tres píxeles de ancho alcanzan para marcar un borde y no para nombrar un color. */ .zone-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); font-size: var(--fs-xs); color: var(--text-secondary); } .zone-legend__item { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; } .zone-legend .zone-chip { width: 10px; height: 10px; border-radius: var(--r-hair); } /* Va después de :first-child a propósito: una columna numérica se alinea a la derecha aunque sea la primera, o la cabecera y su dato apuntan a lados distintos. */ /* EL RENGLÓN DE TOTALES DE UNA TABLA no es una fila más: cierra la lista. Se distingue con la línea de arriba y el peso del texto, no con un fondo —el fondo alterno de las filas ya está usado, y dos señales de fondo peleando en la misma tabla es lo que hace que ninguna se lea—. Lo estrena la trayectoria de la ficha; sirve para cualquier tabla que sume. */ .data-table tbody tr.data-table__total > td { border-top: 1px solid var(--line-strong); font-weight: 600; color: var(--text-primary); } :where(.data-table tbody tr.data-table__total) { background: none; } .data-table th.u-num, .data-table td.u-num { text-align: right; } /* LA FRANJA, QUE ES LO QUE SEPARA UNA FILA DE LA SIGUIENTE. -------------------------------------------------------------------------- Hasta acá cada celda llevaba un hairline abajo y la tabla se leía como una grilla. FM26 no dibuja esa línea: alterna el fondo del renglón y deja que el ojo siga la franja hasta el final de la fila. Es lo que hace que una tabla de veinte clubes y ocho columnas se lea en diagonal sin perder el renglón, y es el rasgo suyo que más se echaba de menos acá. La línea se va: franja Y hairline es marcar la misma división dos veces, y entre las dos la franja gana porque acompaña al ojo por todo el ancho en vez de cortarlo. La única que queda es la de la cabecera, que separa otra cosa —los rótulos del dato— y esa sí es una división real. Va en las IMPARES para que la primera fila de toda tabla salga teñida: en una tabla corta —los seis partidos de la programación— empezar en blanco deja tres franjas sueltas que parecen un estado y no un ritmo. El escalón es de tres puntos de luminancia (`--bg-row` sobre `--bg-panel`). Más que eso y la tabla se convierte en un rayado; menos, y desaparece en el monitor de otro. VA EN `:where()`, Y ESO NO ES UN ADORNO. La franja es el PISO del fondo de una fila: cualquier cosa que la fila tenga para decir de sí misma —que está en el once, que sos vos, que el dedo está encima, que se vende— tiene que pintarse por arriba. Escrita con su especificidad real (0,2,2) le ganaba a `.plantel-tabla .es-titular` (0,2,0) y la mitad de los titulares perdía su violeta: la tabla decía que cuatro de los once estaban en el equipo. Dentro de `:where()` la regla pesa cero y gana siempre el estado, sea cual sea la hoja que lo escriba y sin que ninguna tenga que enterarse de que existe una franja debajo. Y VOLVIÓ A PASAR AL DÍA SIGUIENTE, por la puerta de al lado. Doscientas líneas más arriba había una SEGUNDA cebra —`.data-table tbody tr:nth-child(even)`, con un `hsl()` escrito a mano en vez del token— que nació el 20 de agosto sin enterarse de que ésta existía desde el 19. Entre las dos pintaban TODAS las filas, cada mitad de un color distinto, y la de arriba pesaba (0,2,2): les ganaba al verde de `.es-titular`, al lavado de `[aria-current]` y a cualquier estado que una fila quisiera declarar. El síntoma era el mismo de antes y peor de leer, porque ahora dependía de la PARIDAD: el plantel marcaba en verde a cinco o seis de los once —los que habían caído en renglón impar— y dejaba a los otros con el fondo de la cebra. Al ordenar por otra columna cambiaban de sitio y cambiaba también cuáles se veían, así que la tabla contestaba distinto a la misma pregunta según cómo estuviera ordenada. De ahí la regla, que es la misma escrita dos veces y por eso queda dicha fuerte: **la franja es UNA, va en las impares y vive dentro de `:where()`.** Una cebra nueva no se agrega; si hace falta cambiarla, se cambia ésta. */ :where(.data-table tbody tr:nth-child(odd)) { background: var(--bg-row); } .data-table tbody tr { transition: background var(--dur-fast) var(--ease); } .data-table tbody tr:hover { background: var(--bg-hover); } /* LA FILA QUE SOS VOS, EN CUALQUIER TABLA. «¿Dónde estoy yo?» es la primera pregunta que se le hace a una tabla de clubes, y la contestaban dos hojas por su cuenta —la clasificación del portal y la matriz del buscador— cada una con su propio selector y la misma declaración. Las tablas que no habían copiado la regla ponían el `aria-current` en la fila correcta y no pintaban nada. En los grupos de la Libertadores se veía entero el problema: el GRUPO llevaba su franja violeta —«acá estás»— y adentro tu club era uno más de los cuatro, así que la pantalla te decía en qué grupo estabas y te obligaba a buscar el nombre para saber en qué puesto. Va acá y no en cada hoja porque `aria-current` en una fila ya quiere decir exactamente esto —ésta es la tuya, ésta es la que estás mirando— y una respuesta que el sistema conoce no puede depender de que cada pantalla se acuerde de repetirla. */ .data-table tbody tr[aria-current='true'] { background: var(--bg-selected); } /* -------------------------------------------------------------------------- TU CLUB (`.es-tuyo`) -------------------------------------------------------------------------- La marca de PERTENENCIA, que hasta hoy no existía y se pedía prestada al violeta. En la tabla de posiciones del portal, la fila de tu club llevaba `aria-current="true"` y por lo tanto el mismo lavado violeta con el que la programación marca HOY: dos cosas distintas —cuál sos vos y dónde estamos parados— con una sola pinta, en la misma pantalla y a dos tarjetas de distancia. Y la peor consecuencia no era la ambigüedad sino la promesa: un lavado violeta es lo que este sistema usa para «seleccionado», así que la fila parecía elegida sin que nadie la hubiera elegido. Medido en la fuente: FM26 pinta el club dirigido en NARANJA, y lo pinta en la LETRA —el nombre— sin tocar el fondo de la fila. Eso es exactamente lo que hace falta acá: el relleno pleno sigue siendo del violeta, que es el único color que responde al dedo, y el naranja se queda en el texto, que es donde vive un dato que se lee. No lleva negrita además del color, y es a propósito: en la tabla de posiciones la negrita ya la gastan los puntos, y una fila con dos cosas en negrita deja de tener jerarquía. El color solo alcanza —5,9:1 sobre panel— y el nombre del club siempre está escrito, que es la Regla del Número. -------------------------------------------------------------------------- */ .es-tuyo, .es-tuyo .team__nombre { color: var(--tuyo); } /* El escudo no se tiñe: es una imagen del club y teñirla sería falsearla. */ .es-tuyo .crest { filter: none; } /* Contenedor con scroll para una tabla larga: la cabecera se queda pegada arriba mientras el cuerpo pasa. Lo usan la clasificación y la matriz de resultados, y cualquier tabla que venga después. */ .table-scroll { position: relative; flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } .table-scroll > table { height: min-content; } .table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); } /* -------------------------------------------------------------------------- ARRASTRAR GENTE -------------------------------------------------------------------------- Dos pantallas mueven futbolistas arrastrándolos —el plantel a la cancha, el entretiempo del banquillo al once— así que las dos piezas que comparten viven acá: el que viaja se apaga, y lo que sigue al cursor es una tarjeta con dorsal, nombre y puesto en vez de una captura del renglón de origen. La tarjeta vive a la izquierda del mundo: `setDragImage` fotografía lo que esté dibujado, y esto tiene que estar dibujado sin verse. Se saca de la vista en horizontal y no en vertical, que es lo que WebKit fotografía en blanco. -------------------------------------------------------------------------- */ .arrastrando { opacity: 0.4; } .foto-arrastre { position: fixed; top: 0; left: -9999px; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--bg-panel); white-space: nowrap; pointer-events: none; } .foto-arrastre__n { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .foto-arrastre__nombre { font-size: var(--fs-md); color: var(--text-primary); } .foto-arrastre__pos { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Cabecera ordenable. Vivía en la hoja del buscador cuando era la única tabla que ordenaba; desde que también ordena el plantel es una primitiva del sistema, y estaba a un copiado de convertirse en dos que se separan. Es un BOTÓN dentro del `th` y no el `th` escuchando clics: ordenar una tabla es una acción, y una acción a la que no llega el tabulador no existe para media interfaz. La flecha se dibuja siempre y sólo se ve en la columna activa —así la cabecera no cambia de ancho al ordenar, que es un salto de todas las columnas por tocar una. */ .sort { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; user-select: none; transition: color var(--dur-fast) var(--ease); } .sort:hover { color: var(--text-primary); } th[aria-sort='ascending'] .sort, th[aria-sort='descending'] .sort { color: var(--text-primary); } .sort .i { width: 11px; height: 11px; opacity: 0; } th[aria-sort='ascending'] .sort .i, th[aria-sort='descending'] .sort .i { opacity: 1; } /* El hueco de la flecha va del lado por donde la columna NO se lee. Reservarlo siempre es lo que evita el salto al ordenar, pero puesto detrás del rótulo en una columna alineada a la derecha corría quince píxeles cada cabecera menos la activa: los números caían a plomo entre ellos y ninguno debajo de su título. Con la flecha delante, el rótulo termina donde terminan los datos. En las columnas de texto —el nombre, que se lee desde la izquierda— la flecha vuelve a su sitio natural, detrás, por la misma razón dada vuelta. */ /* El subrayado punteado del navegador para `abbr[title]` sobre una versalita de once píxeles se lee como un error de renderizado, no como «esto se puede consultar»: la explicación la da el tooltip igual. */ .data-table th abbr[title] { text-decoration: none; } .data-table th .sort { flex-direction: row-reverse; } /* `u-txt` valía sólo para el `th` y por eso una columna de texto que no fuera la primera salía pegada a la derecha: el nombre de un futbolista, con el dorsal delante, quedaba a treinta píxeles de la columna siguiente y con un hueco a su izquierda. La celda necesita la misma regla que su rótulo. */ .data-table th.u-txt, .data-table td.u-txt { text-align: left; } .data-table th.u-txt .sort { flex-direction: row; } /* -------------------------------------------------------------------------- EL DESPLEGABLE DE UNA PALANCA -------------------------------------------------------------------------- Nació en la pizarra del partido y vive acá porque lo usan DOS pantallas: la pizarra y el mando de la previa. Existe porque diez formaciones y nueve estrategias no entran en una tira de botones —en la columna angosta de la previa envolvían en cinco renglones— y porque un desplegable dice algo que la tira ya no decía: esto es UNA elección entre muchas. El hueco del desplegable. La clase viaja del `` en un `.desp` que lleva `min-width: 0` —lo necesita para poder encogerse dentro de un flex— y el texto elegido recorta con puntos suspensivos. Con el ancho propio de antes, «Cambio de frente» y «Muy ofensiva» se leían «Cambio de fr…» en cuanto la caja se angostaba, que es exactamente lo que un desplegable no puede hacer: el valor elegido es la única parte que se ve sin abrirlo. */ .pizarra__desp { display: flex; min-width: 0; } .pizarra__desp > .desp { flex: 1 1 auto; } .pizarra__select { min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .pizarra__select:hover { background: var(--bg-hover); border-color: var(--line-strong); } /* El mando de la previa, con la misma cuenta: el `.desp` de `controles.js` lleva `min-width: 0` y recorta el valor elegido, así que se le da el renglón entero en vez de dejar que se encoja hasta los puntos suspensivos. */ .mando__desp { display: flex; min-width: 0; } .mando__desp > .desp { flex: 1 1 auto; } .comp { display: flex; align-items: center; gap: var(--sp-3); } /* Escudo + nombre de club. Flex por obligación: el reset pone los SVG en display block y dentro de un span inline el escudo se cae a su propia línea y duplica el alto de cada fila. Cualquier pantalla con partidos la usa. */ .team { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } /* El nombre, en su propio elemento para poder recortarse. Un texto suelto dentro del flex es una caja anónima y `text-overflow` no le llega: hay que dárselo a un span de verdad. Quien lo use decide DÓNDE se recorta —eso es cosa de la tabla, no del club—, pero el cómo se escribe una sola vez. */ .team__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp .i { color: var(--icon-quiet); } /* Calificación media: la única cifra de la tabla que se colorea. */ .rating { display: inline-grid; place-items: center; min-width: 34px; padding: 1px var(--sp-3); border-radius: var(--r-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .rating[data-band='good'] { background: var(--tint-good); color: var(--verde-200); } /* El tramo medio SUBE, y con él su tinta. En `--ink-800` la pastilla era invisible: se separaba de la fila par 1,05x, o sea nada, así que la mitad de las notas del juego eran texto suelto con forma de pastilla. FM26 separa la suya 1,63x. Con 26 % de luz llega a 1,62 y el `--ink-200` encima da 6,3:1; con `--text-secondary` no llegaba (4,38). Si el fondo sube, lo que va encima acompaña — es la tercera vez que este proyecto tropieza con lo mismo. */ .rating[data-band='ok'] { background: hsl(240 10% 26%); color: var(--ink-200); } .rating[data-band='bad'] { background: var(--tint-bad); color: var(--clay-300); } /* Sin nota todavía: caja sin relleno. Una pastilla gris llena diría «tiene una nota y es mala»; el guion tiene que decir «no jugó». */ .rating[data-band='none'] { background: none; color: var(--text-muted); } @media (max-width: 1080px) { .nav-primary__item { font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3); } .search { width: 40px; padding: 0; justify-content: center; } .search span { display: none; } /* El escudo manda el alto de la barra mientras la barra sea de escritorio. Acá ya no cabe todo en una fila, así que vuelve a ser un escudo de cabecera y devuelve los 20px que se había llevado. Se toca el TOKEN y no la fila: el alto del chrome lo leen también el día del partido y el entretiempo para calcular el suyo, y dos verdades sobre lo mismo es cómo se desincronizan. */ :root { --chrome-h: 56px; } /* `.chrome .crest` y no `.crest` a secas, que es lo que decía. El comentario de arriba habla del escudo de LA BARRA, pero el selector alcanzaba a todos los escudos del juego: debajo de 1080px, los de 17px de cualquier tabla —`.crest--sm`— pasaban a 40. Misma especificidad y esta regla va después, así que ganaba. Las filas de una tabla con escudo medían 58px en vez de 36 en TODAS las pantallas, no sólo en las ligas, y por eso entraba la mitad de lo que tenía que entrar. */ .chrome .crest { width: 40px; height: 40px; --halo: 0.72px; } } @media (max-width: 860px) { .chrome__row { overflow-x: auto; scrollbar-width: none; } .chrome__row::-webkit-scrollbar { display: none; } .clock { display: none; } /* Y LA MIGA DE PAN NO SE MUESTRA. Acá arriba hay ya dos tiras que dicen dónde estás —las secciones y las subsecciones—, y la ruta no agrega una tercera cosa: la agrega repetida. Comprobado en las siete pantallas que tienen miga, tramo por tramo, y el último de cada una está en la subnavegación con el mismo nombre: contratacion Portal › Contratación → la sección jugador Portal › Plantilla › Ficha del jugador → solapa «Ficha» mercado Portal › Contratación › Mercado de pases → solapa homónima propuestas Portal › Contratación › Propuestas → íd. scouting Portal › Contratación › Buscador → íd. partido Portal › Programación › Partido → solapa «Partido» entretiempo Portal › … › Entretiempo → íd. La única que dice algo propio es `partido`, donde el guion le cambia el último tramo por el nombre del cruce; y eso está dos centímetros más abajo, en el marcador, con los dos escudos. Son 44 px de los 200 que la cabecera se lleva en un teléfono. Repetir por tercera vez lo que ya está dicho no vale una quinta parte de esa cuenta. Se va entera y no sólo de vista: escondida a medias —visible para el lector de pantalla, invisible para el resto— sería anunciar tres veces la misma ruta a quien menos tiempo tiene de escucharla. Acá vivían dos reglas que la contenían: `overflow-x: auto` con `nowrap` para que no empujara la página, y un alto de 44 para que sus tramos se pudieran tocar. Las dos se fueron con ella; no hay nada que contener. */ .breadcrumb { display: none; } /* Y EL SEGMENTADO DOBLA, que es lo que su propia regla ya declaraba: «antes que cortarlo, el control se dobla o se estrecha». Estrecharse no puede —las piezas son `nowrap` a propósito, porque «4-4-2» partido en dos renglones deja de nombrar una formación—, así que en un teléfono sólo le queda doblar, y sin `flex-wrap` no doblaba: se salía. Es el mismo defecto en tres pantallas y con tres tamaños distintos, que es lo que delata que el arreglo va acá y no en cada hoja: el filtro de `mercado` mide 493 px («Todos · Arqueros · Defensores · …»), el de `entrenamiento` tiene una pieza sola de 174 («Con plan propio»), y en `scouting` el de posición es lo que le daba 428 px de piso a la banda entera de criterios —los otros tres campos entraban de sobra y se salían igual, arrastrados por él—. */ .segmented { flex-wrap: wrap; } /* Y LA CABECERA DE PANEL TAMBIÉN DOBLA. `.panel__head` es `flex` sin `wrap` con el título a un lado y lo que lo acompaña al otro; en el escritorio sobra sitio y en un teléfono no lo hay. Medido en `scouting` a 320: el título más el segmentado de vista piden 326 px en una caja de 258, y los que sobran los empuja la página. Doblar es lo correcto y no encoger: lo que acompaña al título es un control o una medida, y las dos cosas dejan de servir a medio ancho. Con `space-between` puesto, al doblar cada uno se queda en su borde, que es lo mismo que hace en una línea. */ .panel__head { flex-wrap: wrap; } /* Y AL DOBLAR, EL RÓTULO SE ALINEA A LA IZQUIERDA. Varias pantallas le ponen `text-align: right` porque en una sola línea el rótulo termina en el borde derecho y así queda a ras. Cuando dobla a su propio renglón —el de `mercado` son tres, «los 24 mejores que podés traer de Argentina, de 2631 que sus clubes soltarían»— ese `right` deja un párrafo alineado a la derecha debajo de un título alineado a la izquierda, que se lee torcido. No cuesta nada donde no dobla: un `.label` de flex mide lo que mide su texto, así que la alineación interna no tiene margen sobre el que actuar y el resultado es idéntico. */ .panel__head > .label:not(:first-child) { text-align: left; } } /* -------------------------------------------------------------------------- EL DEDO -------------------------------------------------------------------------- Un puntero grueso no acierta lo que un mouse acierta. Medido el 28/8/2026 en las veintiuna pantallas con carrera sembrada, a 390 px: `partido` tenía 41 controles de 42 por debajo de los 44 px de lado, con un mínimo de 20; `plantel`, 141 de 142, con un mínimo de 18. El texto entraba y se leía —eso lo arregló `bf1b04b`—; lo que no se podía era acertarle. POR QUÉ ALTO REAL Y NO UN ÁREA INVISIBLE, que es el truco de manual. Se probó primero, midiendo el AIRE de cada control: cuánto hay entre su caja y la del vecino más cercano. La respuesta del barrido es que no alcanza. Las filas de este juego miden 18–29 px con 2–27 de separación, así que estirando el área hasta la mitad del hueco —que es lo máximo que se puede sin que dos controles se pisen y el dedo abra lo que no quería— se llega a 26 en las celdas del mercado, a 31 en el once del partido y a 34 en el plantel. Nunca a 44. Para llegar a 44 la fila tiene que MEDIR 44, y eso es maqueta, no un pseudo. El área invisible queda para el único control al que engordarlo lo arruinaría: el punto del carrusel de noticias, que mide 4 px de alto porque es un punto. QUÉ CUESTA, y es lo que hay que mirar si algún día se discute: la pantalla muestra menos filas de una vez. En un teléfono ese cambio ya estaba hecho —las tablas se desplazan adentro de su caja desde `bf1b04b`—, así que lo que se paga es rueda, no contenido perdido. Y VA CON `pointer: coarse`, NO CON EL ANCHO SOLO. La pregunta es con qué se toca, no cuánto mide la ventana: un escritorio con la ventana angosta sigue teniendo mouse y no tiene por qué perder densidad. El `max-width` está para que una tableta apaisada —que ya muestra el juego en su forma de escritorio— tampoco la pierda. Se comprueba con el navegador emulando teléfono: la consulta atraviesa el `