/* ========================================================================== El Camino DT — Día del partido -------------------------------------------------------------------------- Una sola pantalla con tres trabajos simultáneos: mirar, entender y corregir. Por eso la retícula es de tres columnas y no de pestañas: si el DT tiene que cambiar de panel para hacer un cambio, deja de mirar el partido — y el partido no se detiene. El campo es la excepción de movimiento del sistema. En el resto del producto el movimiento es de 120–200ms y comunica un cambio de estado; acá el movimiento ES el dato. La regla que sigue vigente es la otra: nada se mueve que no signifique algo. ========================================================================== */ /* -------------------------------------------------------------------------- 1. RETÍCULA -------------------------------------------------------------------------- Las columnas laterales son de ancho fijo porque su contenido es una lista de dorsales y nombres: no gana nada con más ancho y el campo sí. El hairline entre columnas es el gap, no un borde: una sola línea entre dos paneles. -------------------------------------------------------------------------- */ .match { display: grid; /* LA COLUMNA DE LA ALINEACIÓN ERA 236 Y CORTABA UN APELLIDO POR LISTA. ----------------------------------------------------------------- La fila del once ya está apretada hasta el hueso —30px de puesto en versalita condensada, 18 de dorsal, 20 de medidor y 36 de nota, todos medidos uno por uno en el bloque de `.lineup__row`— así que al nombre le quedaban 93,3px y no había de dónde sacarle más ADENTRO de la fila. Los píxeles tenían que salir del panel, y ésa es la decisión de maqueta que faltaba tomar. MEDIDO SOBRE LOS 27.849 APELLIDOS DISTINTOS del juego, con la fuente y el tamaño reales de `.lineup__name` leídos del sitio servido: columna del nombre apellidos que se cortan 93,3px 1.567 (5,63 %) ← 1,3 por lista de 23 123,3px 243 (0,87 %) ← 1 cada cuatro listas «Martínez Quarta» mide 112,4 y «Lewandowski» 93,3: los dos entran ahora y ninguno entraba antes. El percentil 99 de los apellidos del juego es 123,0, que es exactamente lo que la columna pasa a medir. LOS TREINTA PÍXELES SE LOS PAGA EL CAMPO Y LOS TIENE DE SOBRA. Su piso medido es 440px —pasado ese punto el disco del jugador deja de achicarse— y en la ventana más angosta donde esta retícula de tres columnas se aplica (1241px, que es donde la de abajo toma el relevo) el campo mide 695 y pasa a 665: **225px por encima del piso**. A 1280 son 264 y a 1600, 584. Y las dos columnas quedan parejas —266 y 262— que es lo que ya insinuaba el 236 contra 262: la de la derecha siempre fue la ancha. */ grid-template-columns: 266px minmax(0, 1fr) 262px; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-page); /* Chrome y miga: lo que queda es de las tres columnas — ni un píxel más. Esta pantalla NO se baja: bajar la página durante un partido es perder de vista el campo, que es justo lo que la pantalla existe para no hacer. Las dos listas que crecen solas —el banquillo y la cronología— se desplazan dentro de su propio panel, y el campo se estrecha antes que nada. */ height: calc(var(--alto-ventana) - var(--chrome-h) - var(--subnav-h) - 27px); } /* Cada columna es su propia caja cerrada: lo que no entra se desplaza adentro, nunca empuja a la página. */ .match > .band { background: var(--bg-panel); min-height: 0; overflow: hidden; } /* La columna de la gente: el banquillo es lo elástico. El once nunca se recorta —son los once que están jugando— y la ayuda del pie tampoco. */ .match__once { grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-content: stretch; } /* «NUESTRA ALINEACIÓN» EN UN RENGLÓN. Es el título más largo de la pantalla y vive en la columna más angosta: por debajo de unos 1150px de ventana se doblaba en dos, y el renglón que ganaba el encabezado se lo perdía la lista —que es lo que hay que mirar— porque esta columna reparte su alto entre filas fijas y una elástica. Entra sin apretar nada: el título pide 153px y la formación 34, y la columna da 211. Lo único que hacía falta era decirle que no se parta. El recorte con puntos suspensivos es la red de abajo, para el día que alguien meta un club de nombre largo en «Once de …»: antes de empujar la columna, se recorta. */ .match__once .panel__title { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .match__once .lineup--banquillo { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } /* La columna de los datos: lo elástico es la cronología, que es lo único que crece con el partido. El once del rival queda anclado abajo. */ .match__rival { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; align-content: stretch; } /* La columna central respira distinto: el campo necesita margen propio para que la línea de banda no toque el hairline del panel. Y es un CONTENEDOR: la pizarra de abajo se parte en dos columnas o se apila según lo que mida esta columna, que no es una función del ancho de la ventana —depende de cuántas columnas queden en pie, y a 1240px se cae la del rival y la central gana 274px de golpe—. Preguntarle a la ventana daría la respuesta equivocada justo en los tamaños intermedios. */ .match__campo { container: campo / inline-size; /* Y es el marco de la HOJA: cuando la pizarra abierta ya no cabe debajo del campo, se abre SOBRE él, y se coloca contra esta caja. */ position: relative; gap: var(--sp-5); padding: var(--sp-5) var(--sp-7); /* Y es la única columna que se desplaza como último recurso. No debería hacer falta nunca —la cuenta del campo le deja sitio a todo—, pero entre recortarle el pie a la pizarra y dejar que este panel se baje unos píxeles, se baja. */ overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } /* -------------------------------------------------------------------------- 2. MARCADOR -------------------------------------------------------------------------- Escudo, nombre y cifra. El minuto va debajo del resultado porque es el dato que cambia solo: si estuviera al lado, competiría con la cifra que el DT está mirando. -------------------------------------------------------------------------- */ .marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .marcador__eq { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; } .marcador__eq--visita { flex-direction: row-reverse; } .marcador__ident { display: grid; gap: 1px; min-width: 0; } .marcador__eq--visita .marcador__ident { text-align: right; } .marcador__nombre { font-size: var(--fs-lg); font-weight: 700; font-stretch: var(--wd-condensed); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .marcador__meta { font-size: var(--fs-xs); color: var(--text-muted); } .marcador__centro { display: grid; justify-items: center; gap: 1px; } .marcador__cifra { display: flex; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-3xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; } /* El guion del marcador se queda apagado y NO cuenta para el contraste, porque lleva `aria-hidden` en el marcado: es un separador tipográfico entre dos cifras enormes, no un dato. Quien lo escucha oye «dos a uno» y no «dos guion uno», y quien lo mira ya tiene los dos números. La marca de `aria-hidden` es la que lo declara presentacional; sin ella sería sólo un texto ilegible. */ .marcador__guion { color: var(--ink-600); } /* El gol se anuncia una vez y se apaga. Un marcador que parpadea sin parar es ruido; uno que destella cuando cambia es información. Se pinta en CAL y no en el color de canal. Dos razones que apuntan al mismo lado: un gol es el mejor valor que da esta pantalla, no un control que puedas pulsar; y la regla vieja de que el acento no entra al campo sigue en pie — con el violeta gobernando lo interactivo, un marcador violeta se leería como un botón. */ .marcador__cifra[data-gol='true'] { color: var(--good); } .marcador__reloj { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* EL GLOBAL DE LA LLAVE. Debajo del reloj y más chico que él: es el segundo número de la cabecera y no puede competir con el marcador de hoy, que es el que se mira mientras rueda la pelota. Se colorea porque contesta una pregunta cerrada —¿alcanza?— y las tres respuestas ya tienen color en el sistema: verde el que pasa, ámbar el igualado (que en una vuelta es alargue, no eliminación) y arcilla el que va abajo. Es el mismo trío que usan las bandas de la mesa y el temple del que vende; un cuarto color acá sería un vocabulario nuevo para nada. La cabecera no lo reserva cuando no existe: el hueco lleva `hidden` y en una ida o un partido único no ocupa una línea en blanco debajo del reloj. */ .marcador__global { display: block; margin-top: var(--sp-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-muted); } /* EL TIEMPO QUE HACE. El tercer renglón de la caja del medio, y el más chico de los tres: el marcador es el número, el reloj es cuándo, y esto es una condición que no cambia en todo el partido. En la voz apagada y sin color, igual que en las otras tres pantallas que lo dicen — ver `.clima` en `app.css`, que es la forma larga del mismo parte. `inline-flex` y no la rejilla de `.clima`: acá es una línea sola dentro de una columna centrada, sin consecuencia debajo, y una rejilla de dos columnas la habría estirado a todo el ancho de la caja. Y LO QUE CUESTA ESTÁ MEDIDO, porque en esta pantalla todo lo que no es campo se lo cobra al campo: veintidós píxeles de marcador, que a 1440x900 con la pizarra plegada son 805x521 de cancha contra 786x509, o sea un 4,6 % del área. Se paga a sabiendas: es un dato del partido que no cambia en noventa minutos y que explica lo que se ve pasar en la cancha. No hace falta re-medir `--sin-campo` a mano: `medirLoQueNoEsCampo()` lo suma solo. Los números de arriba son para el que venga a agregar el renglón veintitrés y quiera saber cuánto lleva gastado. */ .marcador__clima { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .marcador__clima .i { color: var(--text-secondary); } .marcador__global[data-va='arriba'] { color: var(--good); } .marcador__global[data-va='igual'] { color: var(--warn); } .marcador__global[data-va='abajo'] { color: var(--danger); } /* -------------------------------------------------------------------------- 3. EL CAMPO -------------------------------------------------------------------------- Ancho gobernado por la altura disponible: el campo es una proporción fija (105 × 68) y lo que no puede hacer es empujar los controles fuera de la pantalla. Se estrecha antes de crecer hacia abajo. -------------------------------------------------------------------------- */ .pitch { position: relative; /* CUÁNTO ALTO LE QUEDA A LA CANCHA, Y QUIÉN LO DICE. Lo dice `--campo-alto`, y lo escribe `medirLoQueNoEsCampo()` restándole a la caja de la columna sus hermanos, los huecos y el relleno. La cuenta que había acá lo reconstruía desde la ventana —chrome, subnav, «37px de miga y borde» y `--sin-campo`— y esos 37 eran DIECISÉIS PÍXELES CORTOS: no contaban el canalón de `.match` (24) ni el borde del panel (2), contra los 10 que ya traían de más. La cancha se llevaba dieciséis de ancho que no tenía, se estiraba quince de alto, y el borde de abajo terminaba 3,7px PINTADOS por debajo del relato — el hueco de 12 tapaba el resto y por eso se leía como un roce y no como un desborde. La cuenta de abajo queda como ESTIMACIÓN del primer cuadro, la que rige hasta que el guion mide; la constante ya va en 53. Es lo mismo que hacía el `427` de `--sin-campo`: un valor razonable para el instante en que todavía no hay nada medido. Quien manda es el estilo en línea que pone el guion. Es una variable y no un número porque la pizarra ocupa cuatro filas, tres o dos según el ancho de la columna, y cada fila que se ahorra son 39px que el campo se lleva: 427 con las cuatro, 388 con tres, 346 con dos. Los tres medidos sobre la pantalla, no estimados, y los tres incluyen los DOS renglones que la nota tiene reservados, que es lo que llega a ocupar cuando cuenta cómo terminó una llave. La regla de siempre: cada cosa que entra o sale del alto fijo se la cobra o se la devuelve al campo, que se estrecha antes de empujar un control fuera de la pantalla. Una palanca nueva se paga con ancho de campo. PERO SE LA COBRA HASTA UN PISO, que es lo que faltaba y por lo que la pizarra abierta dejaba el campo en 192x124 a 1440x900 y en 2x2 a 1280x720. La regla decía «el campo se estrecha antes que nada» y nadie había escrito dónde deja de tener sentido estrecharlo. Está escrito en el motor de dibujo y se puede medir: `RADIO_JUGADOR()` es `max(7, vista.u * 1.75)`, o sea que por debajo de `u = 4px` por metro el disco del futbolista DEJA DE ACHICARSE. Achicar más el campo ya no achica a los once: sólo los amontona. Ese punto son 440px PINTADOS de campo —`u = 4` con el 4,4 % de canalón que `medir()` reserva a cada lado—, y acá se escriben en píxeles de maquetación, que es lo que entiende esta hoja: `440 / --escala-sitio`. Medido en el navegador, no estimado: con el campo a 407px de maquetación, `vista.u` da 3,90 y `RADIO_JUGADOR()` da exactamente 7. Qué pasa cuando el piso se toca lo decide `medirLoQueNoEsCampo()`: la pizarra deja de ser hermana del campo y se abre como HOJA sobre él. */ --campo-piso: calc(440px / var(--escala-sitio)); --campo-alto: calc(var(--alto-ventana) - var(--chrome-h) - var(--subnav-h) - 53px - var(--sin-campo, 427px)); width: min(100%, max(var(--campo-piso), calc(var(--campo-alto) * 1.544))); margin-inline: auto; aspect-ratio: 105 / 68; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-1000); overflow: hidden; cursor: crosshair; } .pitch__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; } /* Etiqueta al vuelo: sólo aparece bajo el cursor y por eso puede ser opaca. Se dibuja en HTML y no en el canvas para que el nombre tenga la misma tipografía y el mismo antialiasing que el resto de la pantalla. */ .pitch__tip { position: absolute; z-index: 2; transform: translate(-50%, -140%); display: grid; gap: 1px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--ink-950); white-space: nowrap; pointer-events: none; } /* Al que está pegado a la línea de fondo no le cabe el cartel arriba: se le pone abajo. El salto es de arriba a abajo y nunca a medio camino, para que el cartel no baile mientras el cursor recorre el campo. */ .pitch__tip[data-abajo='true'] { transform: translate(-50%, 40%); } .pitch__tip[hidden] { display: none !important; } .pitch__tip b { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } .pitch__tip span { font-size: var(--fs-2xs); color: var(--text-muted); } /* -------------------------------------------------------------------------- 3 bis. EL CARTEL DEL GOL Y DE LA TARJETA -------------------------------------------------------------------------- Dos segundos sobre el campo con el nombre entero del que marcó o del que vio la tarjeta, y su club. Vive dentro de `.pitch` y fuera de flujo: no le cobra un píxel a nadie. NO ES UN MODAL Y NO DEBE PARECERLO. No hay botón, no hay foco que atrapar y no se tapa la pantalla: es un rótulo que pasa. La Regla del Foco del sistema dice que el momento de autor se hace sobre UN elemento —el que es el motivo de la pantalla— y nunca escondiendo el resto, y acá ese elemento es el campo. ESTE COMENTARIO DECÍA ADEMÁS «no se detiene el partido», Y ERA FALSO: dejó de serlo el día que `partido.js` frenó la simulación mientras dura el cartel del gol, y nadie volvió acá a corregirlo. Desde el 1/9/2026 frena en los tres —gol, amarilla y roja—, a pedido. Lo que sigue siendo cierto es lo que esa frase quería decir: el que se detiene es el RELOJ DE LA SIMULACIÓN y no la pantalla. El transporte sigue diciendo que el partido está en marcha, el dibujo sigue corriendo y el campo debajo sigue contestando al cursor —`pointer-events: none`—, así que esto no atrapa a nadie. El porqué entero está en `partido.js`, en «Y MIENTRAS HAY UN CARTEL, EL PARTIDO NO SIGUE». EL VELO ES DEL CAMPO, NO DE LA PÁGINA, y por eso puede ser oscuro sin apagar nada: lo que atenúa son veintidós discos que en ese instante están parados y el marcador, la alineación y la cronología siguen a plena luz al lado. Y ES EL ÚNICO VELO. Hasta el 1/9/2026 había DOS anuncios del mismo gol, uno encima del otro: debajo de éste, el lienzo pintaba su propio lavado de acento al 12 % con la palabra GOL en el medio, que era el anuncio de antes de que este cartel existiera. Se leía por debajo del 62 % de acá, en verde y desenfocada, atrás del nombre. Se fue el lavado y se fue la palabra; queda el que dice QUIÉN. -------------------------------------------------------------------------- */ .cartel { position: absolute; inset: 0; z-index: 3; /* Escudo y texto uno al lado del otro, los dos centrados en el campo. `column` y no dos columnas declaradas: el escudo mide lo suyo y el texto lo que le haga falta, sin repartir un ancho que ninguno de los dos conoce. */ display: grid; grid-auto-flow: column; align-content: center; justify-content: center; align-items: center; gap: var(--sp-6); padding: var(--sp-6); /* Ni un evento: el campo debajo sigue respondiendo al cursor, que es lo que hace que esto sea un rótulo y no una capa modal. */ pointer-events: none; background: color-mix(in srgb, var(--ink-1000) 62%, transparent); } .cartel[hidden] { display: none !important; } /* El escudo del club al que se le adjudica. Crece con la columna igual que el nombre, y con los mismos dos topes de sentido común: por debajo de 40px un escudo es una mancha y por encima de 84 le compite al nombre, que es lo que este cartel vino a decir. */ .cartel__escudo { display: grid; } .cartel__escudo .crest { width: clamp(40px, 9cqi, 84px); height: auto; aspect-ratio: 1; object-fit: contain; } /* El bloque de texto. Alineado a la izquierda porque ahora tiene un vecino: los tres renglones centrados al lado de un escudo se leen como tres cosas sueltas y no como una ficha. */ .cartel__info { display: grid; gap: var(--sp-2); justify-items: start; text-align: left; } /* Y EN UNA CANCHA ANGOSTA SE APILA. Con el escudo al lado, el nombre más largo del universo se queda sin ancho antes que la cancha se quede sin píxeles: por debajo de 520px de columna el escudo sube y los tres renglones vuelven al centro, que es el reparto que ya funcionaba. El número está medido con «Athanasios Papathanasiou-Gerofokas», no elegido. */ @container campo (max-width: 520px) { .cartel { grid-auto-flow: row; justify-items: center; gap: var(--sp-4); } .cartel__info { justify-items: center; text-align: center; } } /* Y EN UN TELÉFONO DE 360 NO ALCANZA CON APILAR: hay que achicar. La cancha ahí mide 265x172 y el cartel apilado con el nombre más largo del universo pide ocho píxeles más de los que tiene — comprobado, escondía justo 8 en las cinco ventanas de 360 y ninguna de 390. El corte son 285px de COLUMNA y está medido, no elegido: la columna del campo da 227 a 320 de ventana, 266 a 360, 280 a 375, 295 a 390 y 318 a 414. En 285 entran los tres teléfonos angostos y se quedan afuera el 390 y el 414, que ya entraban sin apretar nada. Lo que se achica es todo junto y en un solo paso: el escudo, los huecos, el canalón y las dos tipografías de abajo. El rótulo del suceso NO se toca —es el que dice qué pasó— y el nombre baja a 18px, que en esta escala sigue siendo el tamaño de un título de panel. */ @container campo (max-width: 285px) { .cartel { padding: var(--sp-4); gap: var(--sp-3); } .cartel__info { gap: 2px; } .cartel__quien { font-size: var(--fs-lg); } .cartel__club { font-size: var(--fs-sm); } .cartel__escudo .crest { width: 34px; } } /* Y UN ESCALÓN MÁS PARA EL TELÉFONO MÁS CHICO QUE EXISTE. A 320 de ventana la columna da 227 y la cancha queda en 227x147: ni con el escalón de arriba entra el nombre más largo, faltaban quince píxeles. Acá el nombre baja al tamaño del dato base —el mismo de la lista de suplentes de al lado— y el escudo a 28, que sigue siendo un escudo reconocible y deja de competir. Es el último escalón a propósito, y LO QUE NO ALCANZA SE DICE: en una ventana de 320 —un iPhone SE de primera generación, la cancha más chica que el juego dibuja— el nombre más largo del universo todavía se pasa unos once píxeles del alto del cartel, y el `overflow: hidden` del campo se los recorta. Se probó apilar y no apilar y se probó bajar otro escalón de tipografía: en esa cancha no entran un escudo, un rótulo, un nombre de treinta y cuatro caracteres y un club de treinta y dos, y el siguiente recorte tendría que QUITARLE algo al cartel en vez de achicarlo. Se paga a sabiendas y con la cuenta a la vista: son once píxeles de la última línea, en el teléfono más chico que existe, y sólo con el nombre más largo de los 46.634 del juego. `medir-cartel.html` barre desde 360 por eso, y lo dice ahí también para que nadie crea que 320 está cubierto. */ @container campo (max-width: 240px) { .cartel { padding: var(--sp-2); gap: var(--sp-2); } .cartel__que { font-size: var(--fs-2xs); } .cartel__quien { font-size: var(--fs-md); line-height: 1; } .cartel__club { font-size: var(--fs-xs); } .cartel__escudo .crest { width: 28px; } } /* EL QUÉ, en versalitas y del color del suceso. Tres palabras como mucho: es el rótulo más corto de la pantalla y aguanta las mayúsculas (ver la regla de las versalitas en DESIGN.md). */ .cartel__que { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .cartel[data-tipo='gol'] .cartel__que { color: var(--good); } .cartel[data-tipo='amarilla'] .cartel__que { color: var(--amber-500); } .cartel[data-tipo='roja'] .cartel__que { color: var(--danger); } /* EL NOMBRE ENTERO, que es el motivo por el que este cartel existe. Se recorta antes que desbordar el campo, y puede doblar: acá no hay nada debajo que correr —el cartel está fuera de flujo— así que dos renglones no cuestan nada y un nombre partido en tres puntos sí. */ .cartel__quien { max-width: 100%; /* Crece con la COLUMNA y no con la ventana: `campo` es el contenedor que ya declara `.match__campo`, y la cancha mide entre 423 y 1.567px de ancho según la pantalla — un tamaño fijo sería enorme en una y no se leería en la otra. Los topes son los dos tamaños del sistema que tienen sentido acá: el de la navegación primaria abajo y el del nombre de un futbolista en su ficha arriba, que es exactamente lo que esto es. El 4 % está medido contra el peor caso —la cancha en su piso con el nombre más largo del universo— y no elegido: ver `medir-cartel.html`. */ font-size: clamp(var(--fs-xl), 4cqi, var(--fs-3xl)); font-weight: 700; line-height: 1.1; color: var(--text-primary); text-wrap: balance; } .cartel__club { font-size: var(--fs-md); color: var(--text-secondary); } /* La entrada: sube dos píxeles y aparece. Es la excepción de movimiento del campo dicha en pequeño — el resto de la pantalla no se mueve. */ @media (prefers-reduced-motion: no-preference) { .cartel:not([hidden]) { animation: cartel-entra var(--dur) var(--ease-entrada) both; } @keyframes cartel-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* -------------------------------------------------------------------------- 4. RELATO Y TRANSPORTE -------------------------------------------------------------------------- */ /* Una línea, siempre la misma altura: si creciera con el texto, el campo entero saltaría en cada jugada. Y ESO NO SE CUMPLÍA SOLO, que es lo que faltaba: `min-height` fija el piso y no el techo. La frase más larga que el motor escribe —«… mueve el banco: entra X por Y», con un club de nombre largo y dos apellidos largos, 103 caracteres— dobla a dos renglones en la columna central de una ventana de tres columnas, y el renglón de más se lo come la cancha: el alto de la cancha se mide UNA vez, al cargar y al cambiar de ventana, no en cada jugada. Medido a 1280×800: la cancha quedaba 8px por debajo de la primera línea del texto. Se recorta, que es lo que este sistema hace en todas partes antes de empujar una columna (ver el título del panel del once y el nombre del club en el marcador). El texto ENTERO se queda en el documento: esta línea es la alternativa del lienzo y su región viva, así que lo que se lee en voz alta no pierde una palabra — sólo se recorta lo que se dibuja. */ .relato { min-height: 20px; font-size: var(--fs-md); color: var(--text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .relato strong { color: var(--text-primary); font-weight: 600; } /* -------------------------------------------------------------------------- EL AVISO SE DISTINGUE DEL RELLENO, Y EL MOTOR YA LO SABÍA -------------------------------------------------------------------------- `contar()` narra con dos pesos: sin tono es AMBIENTE y con tono es AVISO —lo dice su propia primera línea, «un aviso pisa al ambiente; el ambiente no pisa a un aviso»— y el aviso además dura 2,2s contra 1,6. Esa clasificación se escribía en el DOM (`data-tono`) y la hoja **sólo miraba el gol**: los cincuenta y dos sitios del motor que marcan un aviso se pintaban exactamente igual que el relleno. Medido sobre un tiempo entero, los 137 cambios de esta línea: ambiente 104 · aviso 32 · gol 1 O sea que UNA DE CADA CUATRO veces el motor dice «esto pesa» y la pantalla lo decía igual que «centra fulano». Es el mismo defecto que el `data-gol` que leía la variable equivocada: información calculada y tirada. SUBE UN ESCALÓN DE TINTA Y NADA MÁS. De secundario a primario, que es el mismo salto que ya usa el `` de los nombres dentro de esta línea: no se inventa un color —el verde es del gol y no se reparte— ni se toca el peso, porque a `nowrap` con `ellipsis` un peso mayor recorta antes y la frase perdería palabras en la ventana angosta. -------------------------------------------------------------------------- */ .relato[data-tono='aviso'] { color: var(--text-primary); } .relato[data-tono='gol'] { color: var(--verde-300); font-weight: 600; } /* Y EL AVISO LLEGA; EL AMBIENTE SE CAMBIA. La distinción de arriba es estática y por eso no le importa la cadencia. Ésta sí, y por eso va SÓLO en el aviso: a Rápido un tiempo dura 37 segundos reales, así que los 137 cambios son uno cada 0,27s y un fundido de 120ms sobre todos estaría corriendo el 44 % del tiempo — eso no es una llegada, es un parpadeo continuo debajo de la cancha. Los 32 avisos son uno cada 1,15s en el peor caso: el mismo fundido ocupa el 10 %, y lo que se mueve es lo que vale la pena mirar. No se le pone al gol aunque sea el más raro de los tres: ya lo anuncian el cartel y el salto del marcador, y un tercer anuncio del mismo hecho es exactamente el defecto que se sacó del lienzo. */ .relato[data-llega] { animation: relato-llega var(--dur-fast) var(--ease-entrada); } @keyframes relato-llega { from { opacity: 0; transform: translateY(2px); } } .transport { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); } /* -------------------------------------------------------------------------- 5. PIZARRA — táctica, estrategia y cambios -------------------------------------------------------------------------- Los cuatro controles que el DT tiene durante el partido, en el orden en que los usa: la forma, la intención, el ritmo y la salida. Cada uno es una fila con su etiqueta a la izquierda, para que se lean como una lista de decisiones y no como una barra de herramientas. Cuántas filas ocupan es cosa del ancho que haya, y no un capricho: ninguno de los cuatro segmentados llega a la mitad de la columna central, así que apilarlos siempre sería pagar ochenta píxeles de alto por un vacío a la derecha. Y el alto de esta caja sale del campo —es la misma pantalla y no se baja—, o sea que ese vacío se cobra en cancha. Tres repartos, de menos a más ancho: las cuatro en fila, las dos cortas compartiendo renglón, y las cuatro en dos columnas de dos. -------------------------------------------------------------------------- */ .pizarra { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); } /* Los dos repartos anchos son de la pizarra DEL PARTIDO y no del componente: en el entretiempo la misma caja vive en una columna angosta, donde partirla sería obligar a cada segmentado a doblarse en dos renglones. Por eso cuelgan del contenedor `campo`, que sólo existe en esta pantalla. Y se le pregunta a la columna, no a la ventana: a 1240px se cae la columna del rival y la central gana 274px de golpe, así que el mismo ancho de ventana da columnas centrales muy distintas. Las medidas son por dentro, que es lo que mide un contenedor. PRIMER PASO, el de los portátiles de 1440: no entran las cuatro filas en dos columnas, pero sí las dos cortas —ritmo y salida— compartiendo renglón. Cada una pide 323px con su etiqueta; dos más el canalón y el relleno de la caja son los 710. Una fila menos son 39px que se le devuelven al campo. */ @container campo (min-width: 710px) { .pizarra { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); } /* La forma y la intención siguen mandando un renglón entero cada una: son las dos filas anchas y partirlas las doblaría. */ .pizarra__row:nth-child(1), .pizarra__row:nth-child(2), .pizarra__ellos, .pizarra > .pizarra__lectura, .pizarra > .pizarra__nota { grid-column: 1 / -1; } /* Acá había un `--sin-campo: 388px`, y ya no dice nada: desde que `medirLoQueNoEsCampo()` lo MIDE y lo escribe en el estilo en línea del campo, ninguna de estas tres constantes se aplicaba nunca. Y las tres habían quedado cortas —en este mismo reparto la suma real es 564, no 388—, así que además de muertas mentían. La medida manda; los repartos que siguen abajo son de la retícula, que es lo suyo. */ } /* SEGUNDO PASO: las cuatro en dos columnas de dos. 900px es donde entran —421 pide la fila más ancha, la de las cinco estrategias, 233 la más angosta, y el resto son etiquetas, canalones y relleno—. Se lee por columnas y no por filas: a la izquierda la forma y la intención, a la derecha el ritmo y la salida. Por eso el flujo es por columna, y la primera se mide por su contenido: repartir mitad y mitad doblaría las estrategias en dos renglones, que es justo el renglón que veníamos a sacar. */ @container campo (min-width: 900px) { .pizarra { /* Colocación EXPLÍCITA, y no `grid-auto-flow: column`. El flujo automático por columna funcionó mientras todos los hijos fueran iguales; con el plan del rival puesto a mano en la tercera columna, el algoritmo reacomodaba el resto y la pizarra salía en desorden —el ritmo arriba, la táctica abajo y fuera de la caja—. Seis piezas y seis coordenadas: no hay nada que adivinar. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr); grid-template-rows: repeat(4, auto); column-gap: var(--sp-7); } /* Izquierda la forma y la intención, al medio el ritmo y la salida: se lee por columnas, de lo que se decide una vez a lo que se corrige jugando. Las dos miden IGUAL —`1fr` y `1fr`, no `max-content`—, porque desde que los desplegables se estiran `max-content` significa «todo lo que haya»: la táctica se llevaba 656px para escribir «4-4-2» y el ritmo quedaba apretado contra el borde. Cuatro decisiones del mismo peso, del mismo ancho. */ .pizarra__row:nth-child(1) { grid-area: 1 / 1; } .pizarra__row:nth-child(2) { grid-area: 2 / 1; } .pizarra__row:nth-child(3) { grid-area: 1 / 2; } .pizarra__row:nth-child(4) { grid-area: 2 / 2; } /* El rival, en la tercera columna y los dos renglones. NO suma alto: entra en el que ya existía, que es la única forma de que la cancha no lo pague —se dimensiona con lo que le sobra a esta caja. */ .pizarra__ellos { grid-area: 1 / 3 / span 2 / auto; } /* La nota cruza las tres. Va al tercer renglón mientras haya dos por encima; cuando la pizarra se apaga —un partido ajeno se mira, no se dirige— queda sola y sube a la primera, o la caja reservaría el alto de dos filas vacías. */ .pizarra > .pizarra__lectura { grid-column: 1 / -1; grid-row: 3; } .pizarra > .pizarra__nota { grid-column: 1 / -1; } .pizarra > .pizarra__nota:not(:only-child) { grid-row: 4; } /* Dos filas de pizarra en vez de cuatro son 80px que vuelven al campo. La cuenta del alto fijo se paga siempre; acá se cobra en ancho de cancha —y cuánto exactamente lo mide el guion, no esta hoja. */ } /* `[hidden]` no alcanza solo: `.pizarra` es `display: grid` y una declaración de display gana siempre al `display: none` que el atributo trae de la hoja del navegador. */ .pizarra[hidden] { display: none; } /* -------------------------------------------------------------------------- LA HOJA — la pizarra cuando ya no cabe debajo del campo -------------------------------------------------------------------------- La regla vieja era «la palanca nueva se paga con ancho de campo» y no tenía fondo: con la pizarra abierta, `--sin-campo` llegaba a 623 sobre los 522 que hay a 1280x720 y el campo salía de 2x2 píxeles, con la columna desbordada 111px por abajo. A 1440x900 salía de 192x124. Un campo así no es un campo chico: es un campo que no se puede mirar. EL PISO ESTÁ MEDIDO Y ESTÁ EN EL MOTOR DE DIBUJO, no elegido a ojo: por debajo de 440px pintados de ancho, `RADIO_JUGADOR()` se planta en su mínimo de 7px y los once dejan de achicarse con la cancha —sólo se amontonan—. Estrechar más allá de ahí no compra nada. Y ES UN INTERRUPTOR, NO UN TOPE. Sirve de tope de último recurso (el `max()` del `.pitch`), pero lo que hace de verdad es decidir el reparto: mientras el campo aguante el piso, la pizarra va DEBAJO y se paga con cancha, que es lo de siempre y lo que pasa a 1920x1080. Cuando no aguanta, la pizarra sale del flujo y se abre SOBRE el campo. El campo recupera entonces el tamaño que tendría con la pizarra cerrada. POR QUÉ TAPAR EL CAMPO Y NO PARTIR LA DIFERENCIA. Se midieron las dos salidas que había sobre la mesa y ninguna llega a 1280x720: - Piso duro + la pizarra desplazándose por dentro: a 1280x720 quedan 522px para todo, 195 son el marcador, el relato y el transporte, y el piso del campo pide 264 de alto. A la pizarra le sobran 51px de los 418 que mide. Un panel de control mirado por una ranura de 51px no es un panel. - Que la pizarra se pliegue sola por debajo de cierto alto: deja al DT sin poder replantear con el partido corriendo en 1280x720, que es media pantalla. El propio archivo lo dice arriba: poder corregir mientras corre «es medio juego». Lo que se pierde tapando es la VISTA del campo, y sólo mientras la pizarra está abierta —un clic la cierra, y el botón que la cierra queda debajo de la hoja, a la vista—. No se pierde el partido: el marcador, el reloj y el relato, que es la descripción en texto de lo que pasa en la cancha, quedan los tres fuera de la hoja. El partido tampoco se detiene. La hoja se coloca sobre la caja del campo con dos medidas que escribe `medirLoQueNoEsCampo()` —`offsetTop` y `offsetHeight` del campo, en píxeles de MAQUETACIÓN, que es lo que entiende `top`—. Se miden y no se calculan por el mismo motivo que `--sin-campo`: una constante acá se rompe la próxima vez que el marcador crezca un renglón. -------------------------------------------------------------------------- */ .match__campo[data-planteo='hoja'] .pizarra { position: absolute; z-index: 3; top: var(--hoja-arriba, 0); right: var(--sp-7); left: var(--sp-7); height: var(--hoja-alto, auto); /* Opaca y con sombra: si dejara ver el césped por debajo, los desplegables se leerían sobre jugadores en movimiento. */ align-content: start; background: var(--ink-950); box-shadow: var(--sombra-modal); /* Y si aun tapando el campo entero no entra —a 1280x720 la pizarra apilada mide 418 y la caja del campo 327—, se desplaza por dentro. Es el único sitio donde la pizarra se desplaza, y cae del lado correcto: arriba están los cuatro mandos y abajo el plan del rival y la nota, que son lectura. */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } /* El botón que la abre. Lleva la flecha del desplegable y la gira al abrir, que es el mismo gesto que ya hacen los cuatro mandos de adentro. */ .planteo-btn { display: inline-flex; align-items: center; gap: var(--sp-2); } .planteo-btn .i { transition: transform var(--dur-fast) var(--ease); } .planteo-btn[aria-expanded='true'] .i { transform: rotate(180deg); } .pizarra__row { display: grid; /* 88 y no 78: «Estrategia» mide 81px y se cortaba por tres. Medido, no estimado — es el rótulo más largo de los cuatro. */ grid-template-columns: 88px 1fr; align-items: center; gap: var(--sp-5); } .pizarra__row .segmented { flex-wrap: wrap; } /* El desplegable de la pizarra se fue a `app.css`: lo usan la pizarra del partido y el mando de la previa, o sea dos pantallas. El plan de enfrente se fue por lo mismo: lo pintan el partido y el entretiempo. */ .pizarra__nota { font-size: var(--fs-xs); color: var(--text-muted); } /* Dos renglones reservados en la pizarra del partido. La nota cambia sola —el resultado de una llave ocupa el doble que "elegí un titular"—, y si el hueco creciera con ella empujaría la caja fuera de la pantalla justo cuando más cosas dice. Se paga una vez, en la cuenta del campo, y no cada vez. */ .match__campo .pizarra > .pizarra__nota { min-height: 31px; } .pizarra__nota strong { color: var(--text-secondary); font-weight: 600; } /* -------------------------------------------------------------------------- 6. ALINEACIÓN -------------------------------------------------------------------------- La fila de jugador de esta pantalla NO es la fila de atributo: no hay escala 1–20 que rellenar. Comparte su altura (22px) y su ritmo para que las tres columnas midan igual, pero su dato propio es la condición física, que es lo que decide un cambio. LA CONDICIÓN DEJÓ DE SER EL FONDO DE LA FILA. Durante mucho tiempo el relleno era la fila entera escalada en X, y el argumento era bueno —el DT ve la caída sin leer un número—; lo que no se había mirado es qué pasa cuando hay DIECIOCHO. Al saque los dieciocho están cerca del 100 %, así que las dieciocho barras miden casi lo mismo y el panel se lee como un gráfico de barras dentado en el que ninguna barra dice nada. La señal era chica y el ruido, de dieciocho renglones de alto. La piel de FM26 resuelve las dos cosas de una: la fila pasa a ser una SUPERFICIE PAREJA con su esquina redondeada —la lista se lee como una lista, que es lo que es— y la condición se muda a un medidor cápsula de 26px, el `.meter__track` del sistema, que es la misma forma con la que la referencia dibuja sus barras. Un borde recto y deliberado en vez de dieciocho bordes accidentales. -------------------------------------------------------------------------- */ .lineup { display: grid; gap: var(--sp-1); } .lineup__row { position: relative; display: grid; /* EL NOMBRE ES LO QUE SE LEE, y en esta fila es lo único que mide distinto en cada renglón: todo lo demás son anchos fijos que hay que apretar hasta lo que de verdad ocupan. La columna del medidor le costó 38px al apellido la primera vez que entró, y «K. Lom…» no es un renglón de alineación. Medido y no estimado: un dorsal de dos cifras en condensada mide 16 y la cápsula lee igual a 20 que a 32. Con el canalón a 4px la fila gasta 12px MENOS de lo fijo que antes de que el medidor existiera. LA COLUMNA DEL PUESTO ERA 28 Y «MCO» MIDE 35,4, y es exactamente el defecto que cuenta el párrafo de abajo sobre la columna de la nota, otra vez: los 28 se midieron con la versalita en 10px —«MCD» daba 26 de tinta—, `--fs-2xs` subió a 13 y nadie volvió a medir ESTA columna. Lo que se veía es que la etiqueta se derramaba 7,4px y le caía 3,4 ENCIMA del dorsal: «MCO14», «MCD23», que no son un puesto y un número sino una palabra que no existe. Cinco de los doce puestos llevan tres letras; dos se montan —MCO a −3,4 y MCD a −2,6— y otros dos quedan a dos píxeles pelados, DFC y DFD, que a esta escala se lee igual de mal. NO SE ARREGLA CENTRANDO, y se probó antes de tocar nada: «MCO» no ENTRA en la celda, así que centrar derrama lo mismo por los dos lados y la colisión queda IDÉNTICA —los mismos −3,4 medidos—. Lo único que mueve es la otra punta: PO se mete 3,3px y EI 6,9, y ahí se pierde el riel izquierdo, que es lo que permite barrer con el ojo veintitrés renglones de puestos. SE ARREGLA EN LA ETIQUETA Y NO EN LA COLUMNA. La versalita pasa a la misma anchura condensada que ya usa el dorsal pegado a ella —ver `.lineup__pos`—: «MCO» baja de 35,4 a 29,6, la columna cierra en 30 y el canalón más apretado queda en 4,4. El nombre paga DOS píxeles —95,3 a 93,3— en vez de los ocho que costaba llevar la columna a 36. Y los ocho no son teóricos: a 87,3 se empiezan a cortar apellidos que hoy entran enteros —«Lomónaco» en la fila, y «Lewandowski» (93,4) o «Aubameyang» (90,9) en cuanto se dirige afuera—. El entretiempo sí llevó su columna a 36 y ahí sigue estando bien: esa fila tiene una cabecera con «Pos» encima, que mide 30,6 y pide la columna ancha aunque la etiqueta de abajo se achique. Medido después de este cambio: su canalón más apretado pasó de 5,4 a 10,4 y ningún apellido nuevo se corta. LO QUE ESTE CAMBIO NO ARREGLA, dicho para que no se lea como arreglado: por debajo de 980 la lista se parte en dos columnas y al nombre le quedaban 27,6px: los VEINTITRÉS apellidos salen como «Ta…», medido a 390. Ahí estos dos píxeles también se pagan —quedan 25,6— y no se notan porque no hay nada que perder: esa pantalla ya no tenía nombres antes de este cambio. Es otro defecto y necesita otra fila, no otra columna. LA COLUMNA DE LA NOTA ERA 30 Y LA PASTILLA MIDE 37, y ahí estaba el defecto que se veía: «6,5» medía 28 cuando la escala de datos era de 13px, la escala subió dos escalones y nadie volvió a medir esta columna. Como la pastilla va anclada a la derecha, los siete píxeles que le sobran se le caían encima al medidor por la izquierda: no quedaba «pegada» al riel gris, estaba **montada sobre él 3px**. Medido, no mirado. Los números de ahora, con el aire de la pastilla apretado a 4px —que es lo único que esta fila puede tocar de un componente compartido, y ya lo dice el bloque de abajo—: una nota normal mide 33 y «10,0», que el motor puede dar porque la nota va de 3 a 10, mide 43. Con 36 de columna la normal entra con tres de sobra y la de dos cifras se come el canalón sin llegar al riel. El nombre paga seis píxeles, que es lo que había que pagar. */ grid-template-columns: 30px 18px minmax(0, 1fr) 20px 36px; align-items: center; gap: var(--sp-2); width: 100%; height: var(--row-h); padding: 0 var(--sp-3); /* 5px y no 3: es el escalón hacia el radio de FM26, y sobre una superficie llena se nota — sobre un relleno que casi nunca llegaba al borde, no. */ border-radius: var(--r-sm); background: var(--bg-row); text-align: left; isolation: isolate; transition: background var(--dur-fast) var(--ease); } .lineup__row:hover { background: var(--bg-hover); } /* EL AIRE DE LA LISTA. La fila nació midiendo lo mismo que la fila de atributo —22px, el `--row-h` de las tablas— y en una tabla eso está bien: una tabla se barre con el dedo por una columna. Esta lista no se barre, se LEE: son veintitrés renglones apilados en la columna más angosta de la pantalla, cada uno con puesto, dorsal, apellido, medidor y nota, y a 22px con 2px entre medio el bloque deja de tener renglones y pasa a ser un muro. El aire va ADENTRO de la fila y no entre las filas: la fila tiene superficie propia desde que es una tarjeta de FM26, así que lo que separa un renglón del siguiente ya es el fondo, y estirar el canalón sólo habría despegado unas cápsulas que ya estaban despegadas. Con 27px la caja respira alrededor del nombre de 13px —siete arriba y siete abajo— que es la proporción de la fila del menú y la de la bandeja, las otras dos listas largas del juego. Sólo en el partido. `.et` hereda esta fila y su pantalla tiene otra cuenta —una sola columna y un portátil de 900 como piso—, así que la altura nueva se aplica desde `.match`, que es donde está el muro. Y con su devolución escrita en la respuesta a pantalla: en una ventana baja el aire se lo paga el banquillo, que es lo único elástico de la columna, y cinco píxeles por renglón le comen dos suplentes de los que se ven. */ .match .lineup__row { height: var(--fila-lectura); } /* El medidor de condición. Es el `.meter__track` del sistema con dos cambios, y los dos son de significado, no de forma: - El relleno normal es NEUTRO y no de acento. El acento es de lo que responde al dedo; y además, al saque los dieciocho están al 100 % y dieciocho cápsulas violetas serían color que no informa nada. - Por debajo del 60 % se vuelve ámbar —«atención», que es exactamente lo que pide una pierna fundida— y ahí sí el color significa. Es `--warn` y no un ámbar nuevo: el sistema ya tiene el color de atención. Sin cifra al lado, que es la excepción que esta pantalla ya tenía declarada: en el partido en vivo la lista se mira de reojo. En el entretiempo, donde la condición ES la decisión, la fila crece y lleva su número. */ /* El riel se hunde en vez de posarse. El `.meter__track` del sistema es `--ink-800`, que es EL MISMO color que la fila desde que la fila tiene superficie: con los dos iguales no se veía el riel, sólo el relleno, y un 81 % se leía como un guion en lugar de como una cápsula a medio llenar. Un tono más oscuro que la fila lo convierte en una ranura, que es lo que dice «esto se llena hasta acá». */ /* Dieciséis y no veinte, y los cuatro píxeles son para la nota: la pastilla de una nota de dos cifras —«10,0», que el motor puede dar porque la nota va de 3 a 10— mide 43 contra los 36 de su columna, y sin este aire le tocaba el riel. Medido con las tres notas posibles: 10 px de canalón con una nota normal, 1 con la de dos cifras, y ninguna encima del riel. No se pierde nada: el ancho de la cápsula no es el dato —el dato es cuánto se llena— y a 16 px se lee igual que a 20. Lo que no se leía era la nota. */ .lineup__meter { width: 16px; height: 5px; background: var(--ink-1000); } .lineup__meter .meter__fill { background: var(--ink-400); } .lineup__row[data-cansado='true'] .meter__fill { background: var(--warn); } /* LA VERSALITA VA CONDENSADA, y no es un adorno: es lo que hace que «MCO» entre en su columna sin quitarle ancho al apellido. La anchura es la MISMA que la del dorsal que va pegado a ella —`--wd-condensed`, ver `.lineup__num`—, así que el par «MCO 14» se lee como una sola cosa en vez de como dos dialectos distintos a cuatro píxeles. Medido, con el tamaño y el tracking intactos: MCO 35,4 → 29,6 · MCD 34,6 → 29,4 · DFD 29,9 → 26 · DFC 29,7 → 25,3 · PO 21,4 → 17,9. Lo que NO se toca es el cuerpo: 13px es el piso de la escala y bajarlo era la otra salida, la que arregla un renglón rompiendo la escala de todos. */ .lineup__pos { font-size: var(--fs-2xs); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-label); color: var(--text-muted); } .lineup__num { font-size: var(--fs-sm); font-weight: 700; font-stretch: var(--wd-condensed); color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; } .lineup__name { font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* LA NOTA ES EL COMPONENTE `.rating`, la pastilla del sistema, y no una tinta suelta. Es lo que hace FM26 en su columna de media —pastilla rellena en cada fila, con el corte en 7,00, que resulta ser exactamente el nuestro— y acá además termina con dos formas de escribir lo mismo: la ficha y el historial ya usaban la pastilla y la alineación no. Veintidós pastillas rellenas en una alineación no contradicen la regla de que una acción por fila no se rellena: **esto no es una acción, es un valor**, y el relleno contesta «esto es lo que hay» y no «tocá acá». Acá sólo queda lo que es DE LA FILA: el tamaño y que se alinee a la derecha con sus hermanas. Los colores viven en el componente. */ /* El aire lateral es de la FILA y no del componente: en la columna más angosta del juego, seis píxeles a cada lado de una cifra de tres glifos son doce que no informan. Los colores, el radio y el peso siguen viviendo en `.rating`. */ .lineup__rate { font-size: var(--fs-sm); justify-self: end; padding-inline: var(--sp-2); } /* Marcas de suceso pegadas al nombre: gol, amarilla, cambio. */ .lineup__marks { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--sp-3); vertical-align: -2px; } .lineup__marks .i { width: 11px; height: 11px; } .lineup__marks .i--gol { color: var(--good); } .lineup__marks .i--amarilla { color: var(--amber-500); } /* La roja y el botiquín son las dos marcas que se leen antes que el nombre, y por eso son las dos únicas que van al color de peligro: en una tira de ochenta píxeles con dieciocho renglones, el DT las tiene que encontrar sin buscarlas. La expulsión además apaga el renglón entero —lo hace `[data-fuera]`, que ya existía para el que salió— así que el color no está solo. */ /* El renglón del hueco: es una nota al pie de la alineación y no un futbolista, así que se lee como lo que es —apagado, sin nota y sin medidor— pero conserva la retícula de la fila para que la columna del puesto siga alineada. */ .lineup__row--hueco { opacity: 0.42; cursor: default; } .lineup__row--hueco .lineup__name { font-style: italic; } /* EL HUECO SE ENCIENDE CUANDO SE LE PUEDE MANDAR A ALGUIEN. Apagado al 42 % es una nota al pie —«acá falta uno»— y así tiene que verse mientras no haya nadie elegido. Con un titular elegido pasa a ser un destino, y un destino que sigue apagado es un destino que nadie encuentra: el `box-shadow` de `[data-destino]` solo, sobre un renglón al 42 %, no se ve. Se sube a 0,85 y no a 1: sigue sin ser un futbolista, y la diferencia con los diez que sí lo son tiene que quedar a la vista incluso encendido. */ .lineup__row--hueco[data-destino='true'] { opacity: 0.85; cursor: pointer; } .lineup__marks .i--roja { color: var(--danger); } .lineup__marks .i--roto { color: var(--danger); } /* La estrella del pateador designado va en ámbar y no en el color de canal: el acento es del chrome —lo que está activo, dónde estás— y esto es un dato del futbolista, como su gol o su amarilla. */ .lineup__marks .i--parada { color: var(--amber-500); opacity: 0.8; } .lineup__marks .i--roja { color: var(--danger); } /* Los tres estados del flujo de cambio. Elegido: el que va a salir o moverse. Destino: los que pueden recibir ese movimiento. El resto se apaga, porque un botón que no hace nada durante una selección es una promesa falsa. */ .lineup__row[aria-pressed='true'] { background: var(--accent-wash-hi); box-shadow: inset 0 0 0 1px var(--accent-line); } .lineup[data-eligiendo='true'] .lineup__row:not([data-destino='true']):not([aria-pressed='true']) { opacity: 0.4; } .lineup__row[data-destino='true'] { box-shadow: inset 0 0 0 1px var(--line-strong); } .lineup__row[data-destino='true']:hover { background: var(--bg-active); } /* Un futbolista que todavía puede entrar, salir o cambiar de puesto se agarra. El que ya salió no: su renglón es el registro de algo que pasó. La regla es de las dos pantallas que usan esta lista —el partido y el entretiempo—, así que vive con el componente y no en la hoja de una de ellas. */ .lineup__row[draggable='true'] { cursor: grab; } .lineup__row[draggable='true']:active { cursor: grabbing; } /* El renglón bajo el cursor mientras algo se arrastra encima. Existe aparte del `:hover` porque durante un arrastre el navegador congela el hover: sin esta marca, el destino se elige a ciegas. Es el mismo violeta que el destino elegido, que es lo que va a pasar al soltar. */ .lineup__row--recibe { background: var(--accent-wash-hi); box-shadow: inset 0 0 0 1px var(--accent); } /* El que ya salió se apaga, y deja de responder al cursor: su renglón pasó a ser el registro de lo que pasó. `--bg-row` y no `none` desde que la fila tiene superficie propia — un `none` la volvía transparente al pasar por encima, que es lo contrario de "acá no hay nada que tocar". */ .lineup__row[data-fuera='true'] { opacity: 0.45; } .lineup__row[data-fuera='true']:hover { background: var(--bg-row); } /* Alineación del rival: mismo ritmo, sin interacción y sin condición física. No la conocés, así que no se dibuja. El medidor se esconde en vez de quitarse, para que las dos listas midan sus columnas igual. */ .lineup--rival .lineup__row { cursor: default; } .lineup--rival .lineup__meter { visibility: hidden; } .lineup--rival .lineup__row:hover { background: var(--bg-row); } .band__sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-hairline); } /* -------------------------------------------------------------------------- 7. ESTADÍSTICAS ENFRENTADAS -------------------------------------------------------------------------- */ .vs { display: grid; gap: var(--sp-3); } .vs__row { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: var(--sp-4); } .vs__cifra { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .vs__cifra--v { text-align: right; } .vs__medio { display: grid; gap: var(--sp-1); } .vs__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); text-align: center; } /* -------------------------------------------------------------------------- EL DATO QUE ACABA DE CAMBIAR -------------------------------------------------------------------------- Esta pantalla es la que más cambia del juego y era la que menos lo decía: en 62 KB de hoja había TRES transiciones y un fotograma. La cancha cuenta lo que pasa AHORA; los paneles cuentan lo que YA pasó, y se actualizaban como si no hubiera pasado nada. LA REGLA SALE DE CONTAR, NO DE ELEGIR. Medido sobre un tiempo entero (44 minutos de juego, 293 segundos reales a Normal y ocho veces menos a Rápido), cuántas veces cambia cada dato: posesión 123 notas de los 22 233 relato 146 tiros 18 faltas 11 córners 8 a puerta 3 adelantados 0 sucesos 7 Son DOS FAMILIAS y el corte no es de gusto: **lo que se PROMEDIA se mueve solo y todo el tiempo; lo que se CUENTA ocurre.** La posesión, las notas y el relato derivan de todo lo jugado y cambian cada dos segundos a Normal y varias veces por segundo a Rápido: un acuse ahí no es un latido, es un estrobo, y además mentiría —no pasó nada, se corrió un promedio—. Los remates, las faltas, los córners y los sucesos de la cronología SON hechos, y son entre 3 y 18 por tiempo: a Rápido, uno cada dos segundos en el peor caso. De ahí la regla, que vale para cualquier dato que se agregue después: **ACUSA LO QUE SE CUENTA, NO LO QUE SE PROMEDIA.** Dos de los cuatro candidatos con los que empecé —el relato y las notas— los mató la medición, que es para lo que se mide antes y no después. -------------------------------------------------------------------------- */ /* La cifra que subió, y SÓLO la del lado que subió: el acuse dice además QUIÉN, que es la mitad del dato. Sube al blanco del texto primario y vuelve al suyo. NO MUEVE LA FILA. La escala va sobre un `span` en línea, así que no le pide un píxel a la retícula —estas filas miden 4px de barra y el panel entero entra por poco—, y el 1,18 es más que el 1,12 del marcador porque esto es un número de 13px en una columna de seis: al tamaño del marcador no se vería. */ .vs__cifra[data-subio] { animation: vs-subio var(--dur) var(--ease-entrada); } @keyframes vs-subio { 0% { transform: scale(1); } 30% { transform: scale(1.18); color: var(--text-primary); } 100% { transform: scale(1); } } .vs__cifra { display: inline-block; } .vs__track { display: flex; height: 4px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-800); } .vs__fill { height: 100%; transition: flex-grow var(--dur) var(--ease); } /* La barra enfrentada es un REPARTO, no un estado: se lee, no se pulsa. */ .vs__fill--l { background: var(--good); flex: var(--l, 1) 1 0; } .vs__fill--r { background: var(--ink-500); flex: var(--r, 1) 1 0; } /* El acento marca lo TUYO, no el lado izquierdo. Cuando el Rivera juega de visitante su barra está a la derecha, y pintar de cal la del rival sería usar el acento para señalar al que no elegiste — el cuarto uso que la Regla de la Cal no admite. */ .vs[data-nuestro='1'] .vs__fill--l { background: var(--ink-500); } .vs[data-nuestro='1'] .vs__fill--r { background: var(--good); } /* -------------------------------------------------------------------------- 8. CRONOLOGÍA -------------------------------------------------------------------------- */ /* La cronología crece todo el partido. Con scroll propio, el once del rival sigue estando debajo al minuto 90; sin él, empuja la columna y hay que bajar la página entera para ver quién juega enfrente. Su tope ya no es una fracción de la pantalla sino el hueco que le deja la columna: es la fila elástica de las tres columnas de esta pantalla. */ .crono { display: grid; align-content: start; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } .ev { display: grid; grid-template-columns: 26px 14px minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); } .ev:last-child { border-bottom: 0; } .ev__min { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ev .i { width: 13px; height: 13px; color: var(--icon-quiet); margin-top: 1px; } /* EL SUCESO QUE ACABA DE PASAR. Es aquello por lo que despegaste la vista de la cancha, y llegaba sin distinguirse de los veinte de arriba. ENTRA SÓLO EL NUEVO, y esto es la mitad del trabajo: `pintarCrono()` rehace TODAS las filas con `replaceChildren`, así que una animación sobre `.ev` las haría parpadear a todas en cada suceso — la lista entera temblando para contar que llegó un renglón. La marca la pone el guion comparando cuántos sucesos hay contra cuántos había, y la lleva sólo la primera fila, que es la más nueva: la cronología va del último al primero. Baja desde arriba, que es de donde viene: el renglón nuevo empuja a los otros hacia abajo. Seis píxeles y el fundido del sistema; ni un color nuevo — el tipo de suceso ya se pinta solo y no hace falta decirlo dos veces. */ .ev[data-nuevo] { animation: ev-llega var(--dur) var(--ease-entrada); } @keyframes ev-llega { from { opacity: 0; transform: translateY(-6px); } } .ev[data-tipo='gol'] { color: var(--text-primary); } .ev[data-tipo='gol'] .i { color: var(--good); } .ev[data-tipo='amarilla'] .i { color: var(--amber-500); } .ev[data-tipo='roja'] .i { color: var(--danger); } .ev[data-tipo='roja'] { color: var(--text-primary); } .ev[data-tipo='lesion'] .i { color: var(--danger); } .ev[data-tipo='cambio'] .i { color: var(--text-secondary); } .ev b { font-weight: 600; color: var(--text-primary); } /* El club que protagoniza el suceso, detrás del texto. En una cronología de dos equipos, "gol" sin dueño obliga a mirar el minuto y adivinar de quién fue. */ .ev__eq { color: var(--text-muted); } .crono__vacio { padding: var(--sp-6) 0; font-size: var(--fs-sm); color: var(--text-muted); } /* -------------------------------------------------------------------------- 9. RESPUESTA A PANTALLA -------------------------------------------------------------------------- Estructural, no fluida. Por debajo de 1240px cae la columna del rival: entre ver el campo y ver el once del contrario, el campo gana. Por debajo de 980px la alineación propia pasa a ser una banda horizontal encima del campo, que es la única forma de que el campo siga siendo el elemento más grande. -------------------------------------------------------------------------- */ @media (max-width: 1240px) { /* Los mismos treinta píxeles que arriba, y acá hacían más falta: con el panel en 226 al nombre le quedaban 84 y se cortaba el 8 % de los apellidos. El campo, que en esta franja no comparte con la tercera columna, mide 719 en la ventana más angosta (981px) y pasa a 689 — 249 por encima del piso. */ .match { grid-template-columns: 256px minmax(0, 1fr); } .match__rival { display: none; } } @media (max-width: 980px) { /* Apiladas, las columnas ya no caben en una pantalla y el alto fijo dejaría medio banquillo recortado: acá la página sí se baja, y cada panel vuelve a medir lo que mide su contenido. */ .match { grid-template-columns: minmax(0, 1fr); height: auto; } .match > .band { overflow: visible; } .match__once, .match__rival { grid-template-rows: none; align-content: start; } .match__once .lineup--banquillo { overflow: visible; } .crono { max-height: 32vh; } .match__campo { order: -1; } .pitch { width: 100%; } .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lineup--titulares { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Y LA COLUMNA DEL CAMPO DEJA DE MEDIR LO QUE MIDE SU PIEZA MÁS ANCHA. `.band` es una retícula sin columnas declaradas (`app.css`), o sea una pista `auto`, y una pista `auto` se planta en el min-content de lo que lleva: acá el transporte, que son 494 px de «Empezar» más Lento / Normal / Rápido en una fila que no dobla. La pista se quedaba en 494 y arrastraba con ella al marcador, al campo y al relato —los cuatro medían 494 en una ventana de 390, y el nombre del visitante y «Rápido» quedaban fuera de la pantalla—. El `min-width: 0` de `.band` no lo tapa: lo que hay que poner en cero es el piso de la PISTA. Con el piso en cero el transporte sería el único que se sale, así que además dobla. Es el orden correcto de las dos: la pista deja de contagiar el ancho, y la pieza ancha se hace cargo del suyo. */ .match__campo { grid-template-columns: minmax(0, 1fr); } .transport { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- Y EN EL TELÉFONO LA LISTA VUELVE A UNA COLUMNA -------------------------------------------------------------------------- Las dos columnas de arriba son correctas para una tablet y falsas para un teléfono, y no por poco: a 390 el panel mide 351, cada mitad se queda con 157 y de ahí salen primero los 132 de lo fijo —puesto, dorsal, medidor, nota y sus cuatro canalones—. Al apellido le quedaban 25,6px y los VEINTITRÉS salían «Ta…», «Es…», «C…». Una alineación sin apellidos no es una alineación: es una lista de puestos con nota. La cuenta es una recta —cada píxel de ventana le da medio al apellido— y por eso el umbral se despeja en vez de elegirse. Medido en la pantalla con la carrera sembrada, la pista del nombre con dos columnas: 980 → 302 · 760 → 204 · 640 → 146 540 → 98 · 430 → 45 · 390 → 26 La vara no es «que entre algo», es **que entre lo mismo que en el escritorio**: la columna del once medía 236 y ahí el apellido tenía 93,3. Dos columnas dan 93,4 a los 531px de ventana, medido y no despejado. Por debajo de eso, una. ESA VARA SE MOVIÓ Y HAY QUE DECIRLO. El 1/9/2026 el panel del escritorio pasó de 236 a 266 —cortaba 1,3 apellidos por lista de 23, medido sobre los 27.849 del juego; ver el bloque de `.match` arriba— así que el apellido de arriba tiene ahora 123,3 y no 93,3. La igualdad que despejó este umbral ya no se cumple entre 561 y 980: ahí dos columnas dan 107,8, que es MENOS que el escritorio. No es una regresión —antes daban 25,6— pero tampoco es la vara que dice este párrafo. Despejada con la misma recta, la igualdad nueva cae en 591px. **No se movió el umbral** por lo que dice el párrafo de abajo: 560 ya era el quiebre del teléfono en esta hoja, y meter otro a treinta píxeles es volver a abrir la franja que nadie mide. Queda anotado como residuo medido. EL NÚMERO ES 560 Y NO 531 A PROPÓSITO: 560 YA ERA el quiebre del teléfono en esta hoja —el del marcador, acá abajo, con el que ahora comparte bloque— y dos quiebres a treinta píxeles uno del otro son la franja que nadie vuelve a medir. A 561 la pista da 107,8: cuando este párrafo se escribió eso era MÁS que los 93,3 del escritorio y el margen se pagaba en una tablet chica. Con el escritorio en 123,3 es MENOS, y es el residuo que el párrafo de arriba deja anotado. La frase se corrige acá y no en una nota nueva: una nota que describe un estado se mueve con el estado, y dos frases del mismo bloque diciéndose lo contrario a veinte renglones de distancia son peor que una frase vieja sola. Y VA EN EL BLOQUE QUE YA EXISTÍA, no en uno propio con la misma consulta: dos `@media` idénticos a veinte renglones de distancia es el patrón donde un día alguien edita uno sin ver el otro. Una consulta, un bloque. Lo que cuesta: veintitrés renglones apilados en vez de doce. Por debajo de 980 esta pantalla ya rueda la página —lo dice el bloque de arriba—, así que el alto es lo que hay de sobra; el ancho no. -------------------------------------------------------------------------- Y EL MARCADOR, EN EL MISMO TELÉFONO -------------------------------------------------------------------------- Escudo y nombre uno al lado del otro necesitan un renglón que en 319 px no existe: cada lado se queda con unos 110, el escudo se come 45 y al nombre le sobran tres letras y los puntos suspensivos —«In…» contra «Independiente Rivadavia»—, mientras «Local · 4-3-1-2» se parte en tres renglones. Se gira el eje: escudo arriba, nombre abajo, los dos centrados. Es el mismo contenido y las mismas tres columnas —el resultado sigue en el medio, que es lo que la sección de arriba declara—, pero el nombre pasa a tener el ancho de la columna entera en vez de lo que sobra al costado del escudo, y con dos renglones disponibles entra sin recortarse. -------------------------------------------------------------------------- */ @media (max-width: 560px) { /* La lista del once, a una columna: la cuenta está arriba. */ .lineup, .lineup--titulares { grid-template-columns: minmax(0, 1fr); } /* `start` y no el `center` heredado: con los tres bloques centrados, la línea del clima —que vive en la columna del medio y es la más ancha de las tres— quedaba a la altura del nombre del local y los dos se leían como un solo renglón revuelto. Alineados arriba, los dos escudos y el resultado empiezan en la misma línea y cada columna crece hacia abajo por su cuenta. */ .marcador { gap: var(--sp-4); align-items: start; } .marcador__eq, .marcador__eq--visita { flex-direction: column; gap: var(--sp-3); } /* SÓLO `text-align`, NUNCA `justify-items`. Los dos centran, y no es lo mismo: `justify-items: center` le saca a los hijos el `stretch` que los hace medir el ancho de su pista, y pasan a medir SU CONTENIDO. Acá adentro vive la línea de goleadores de `entretiempo.html` —que comparte esta hoja—, que es `nowrap` con puntos suspensivos y cuenta con que alguien le imponga un ancho: sin `stretch` se estiraba a los 209 px del texto entero, salía de la pantalla y los puntos suspensivos no aparecían nunca. Medido: la pantalla pasó de 0 px de desborde a 28 a 390, y a 36 a 360. El texto se centra igual con `text-align`, que es lo que hacía falta. */ .marcador__ident, .marcador__eq--visita .marcador__ident { text-align: center; } /* Y el nombre deja de recortarse para doblar: acá el recorte no es la red de abajo sino el caso normal, y un nombre de club recortado no identifica a nadie. Dos renglones y el tamaño de la escala que sigue. */ .marcador__nombre { font-size: var(--fs-md); white-space: normal; overflow: visible; text-overflow: clip; } } /* LA VENTANA JUSTA DEVUELVE EL AIRE DE LA FILA. Entre 641 y 800 de alto la columna del once reparte un presupuesto que ya estaba ajustado: los 27px de la fila salen del banquillo —lo único elástico— y a 720 lo dejan en hueco de pieza y media, que no es una lista de suplentes, es una mirilla. Ahí la fila vuelve a los 22px de tabla, que es lo que había, y la densidad la elige la pantalla y no una preferencia. Sólo en el reparto de alto fijo: apilada (por debajo de 980 de ancho) o con la página bajándose (por debajo de 692 de alto) el banquillo no paga nada, así que ahí la fila se queda con su aire. */ @media (min-width: 981px) and (min-height: 692px) and (max-height: 800px) { .match .lineup__row { height: var(--row-h); } } /* Pantallas bajas: no hay reparto que alcance —el campo se volvería una tira—, así que se devuelve el scroll antes que dar una pantalla ilegible. EL UMBRAL SON 691 Y ESTÁ MEDIDO, no elegido: hasta el 1/9/2026 decía 640 y era falso. La cuenta cierra recién en 692. Entre 641 y 691 el campo ya estaba clavado en su piso —`--campo-piso`, donde los once dejan de achicarse— y todo lo que le sobraba a la columna se lo comía el relato: a 1600×689 la cancha caía nueve píxeles por debajo del hueco, y a 981×684 lo pisaba de lleno. El marco fijo no se rompía; escondía. Que no se viera es lo de siempre: `.match__campo` tiene `overflow-y: auto` como último recurso, pero la cancha se sale de su FILA y no de la columna, o sea que la columna nunca se entera y la barra no aparece nunca. MEDIDO CON EL MARCADOR PESADO, que es lo que mueve el número: la caja del medio tiene dos renglones que aparecen solos —el clima y el global de una llave de vuelta— y con los dos puestos el umbral pasa de 661 a 692. Un umbral afinado a un sábado de liga no es más generoso: es el mismo defecto con fecha de aparición. La vara es `herramientas/medir-relato-y-cancha.html`. Lo que cuesta, dicho entero: un portátil con 641–691px de ventana útil —un 1366×768 con la barra del navegador puesta es justo eso— pasa a rodar la página durante el partido. Se paga a sabiendas: la alternativa era una cancha que ya no se achica más tapando el relato. */ @media (max-height: 691px) { .match { height: auto; min-height: 0; } .match > .band { overflow: visible; } .match__once .lineup--banquillo { overflow: visible; } /* Si la página se baja igual, el campo deja de pagarle el alto a los controles: se le da una medida propia en vez de la resta. */ .pitch { width: min(100%, 620px); } } @media (prefers-reduced-motion: reduce) { /* El campo sigue moviéndose: es el contenido, no un adorno. Lo que se apaga es la estela del balón, que es lo único decorativo del lienzo. */ .pitch { --sin-estela: 1; } } /* ========================================================================== EL AMBIENTE DE PRETEMPORADA -------------------------------------------------------------------------- Un amistoso de julio no se juega de noche en un estadio: se juega a las cinco de la tarde en un predio, y el campo tiene que decirlo antes de que nadie lea el rótulo. Es el mismo campo y el mismo motor —no hay una segunda forma de dibujar— con la paleta corrida: el verde sube tres pasos de luminancia y se entibia, la banda del corte se separa más del fondo porque una cancha de entrenamiento se corta y se ve, y la cal baja de blanco puro a cal de verdad. Se hace con los TRES tokens que el motor ya leía (`--campo`, `--campo-franja` y `--campo-linea`) y ni una línea de dibujo nueva. Que un cambio de ambiente completo quepa en tres propiedades es la prueba de que aquella decisión —leer la paleta del documento en vez de escribirla en el guion— estaba bien tomada. El atributo lo pone `partido.js` ANTES de que el motor lea los colores; ver el comentario de `ES_DE_PRETEMPORADA` allá. ========================================================================== */ :root[data-ambiente='pretemporada'] { --campo: hsl(126 34% 24%); --campo-franja: hsl(126 32% 29%); /* La cal de un predio no es blanco de estadio: se lava con la tierra y con el sol. A 88 % sigue dando 6,4:1 contra el campo, muy por encima del piso. */ --campo-linea: hsl(76 12% 88%); } /* Y el marco del campo acompaña. La placa que lo contiene es la misma del sistema; lo que cambia es que el borde deja de ser el hairline neutro y toma el verde del césped, que es lo que hace que el conjunto se lea como una cancha al sol y no como un campo claro dentro de una noche. */ :root[data-ambiente='pretemporada'] .pitch { border-color: hsl(126 26% 30%); background: hsl(126 30% 14%); }