/* inicio.css */ /* ========================================================================== El Camino DT — Portal (pantalla de inicio) -------------------------------------------------------------------------- Sólo composición y componentes propios de esta pantalla. Cero tokens nuevos: todo sale de tokens.css. El chrome, el panel, el botón, la pastilla, la tabla de datos, las barras de forma y el segmentado vienen tal cual de app.css. ========================================================================== */ /* La pantalla ocupa el alto de la ventana y NO scrollea: lo que scrollea es la bandeja y la clasificación, cada una dentro de su columna. Es la misma promesa que la ficha — todo a la vista de una vez. */ body { display: flex; flex-direction: column; /* `min-height` y no `height`: el porqué está en `plantel.css`. Resumen: con alto fijo, lo que no entra se sale de la caja y el documento rueda sólo hasta el borde del cuerpo, no hasta el final del contenido. */ min-height: var(--alto-ventana); /* `auto` y no `hidden`: el porqué está en `copa.css`, donde se escribió entero. Resumen: `hidden` recorta lo que no entra y no hay forma de llegar; `auto` se comporta igual mientras entra y deja bajar cuando no. */ overflow: auto; } /* SALVO EN EL VISTAZO GENERAL, QUE SÍ SE BAJA (21/9/2026). -------------------------------------------------------------------------- Esa vista mide más que la ventana a propósito —el porqué está abajo, en la regla de la retícula de cuatro zonas— y hasta hoy se bajaba dentro de sí misma: `.home` era su propio scroller. Eso se rompió cuando las tarjetas pasaron a medir lo que miden: `.home` creció con su contenido, no le sobró nada por dentro, y una caja con `overflow: auto` que no tiene nada que rodar se come la rueda igual. Se le sacó el scroller — y entonces apareció lo que estaba debajo todo el tiempo: **este `overflow: hidden`**, que recorta y no deja bajar. Medido a 1890: 1.727 px de contenido en un cuerpo de 1.278, el resto inalcanzable. Alberto lo reportó CUATRO veces. Las tres primeras lo diagnostiqué mal —dije que era el puntero sobre la tarjeta de noticias, que también se lo comía pero era una de ocho— y sólo lo cerró medir la rueda tamaño por tamaño a los dos lados del corte de 1280. El que se baja es el DOCUMENTO y no una caja de adentro, que es lo que la regla de esta vista decía desde el principio: un solo scroller, y es la página. Las otras cuatro vistas del Portal y las veinte pantallas siguen sin bajarse. */ body:has(.home[data-vista='general']) { height: auto; min-height: var(--alto-ventana); overflow: visible; } /* flex-basis 0, no auto: con basis auto el contenido manda y la columna crece hasta donde quiera. Con 0, la retícula ocupa exactamente el hueco que sobra y son los scrollers internos los que se hacen cargo. La retícula ya no dibuja las tres columnas con hairlines de 1px: ahora el fondo de la página se ve ENTRE las tarjetas, que es lo que las hace leer como placas sueltas y no como tres franjas de un mismo panel. */ .home { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(330px, 0.92fr) minmax(440px, 1.3fr) minmax(390px, 1fr); gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-page); } /* La columna es sólo el reparto vertical: no tiene superficie ni borde, los tiene cada tarjeta que hay dentro. */ .col { display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; min-width: 0; } .col__tools { display: flex; align-items: center; gap: var(--sp-1); } .col__more { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } @media (hover: hover) { .col__more:hover { color: var(--text-primary); } } /* Bloque interior de una columna. Agrupa sin dibujar otra tarjeta: el sistema no anida contenedores, separa con aire y una etiqueta. */ /* Lo que era el bloque interior —agrupar sin dibujar otra tarjeta— ya no existe: en este mundo cada bloque ES una tarjeta y se llama `.tarjeta` (app.css). De aquel componente sobreviven sólo sus dos piezas de texto, que siguen siendo texto dentro de una placa. */ .sub__lead { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .sub__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } /* El mismo canalón que hay entre columnas y entre tarjetas: dos tarjetas pegadas con un aire distinto se leen como si fueran otra cosa. */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } /* -------------------------------------------------------------------------- BANDEJA -------------------------------------------------------------------------- Lo único que distingue un mensaje leído de uno sin leer es el peso y el color del asunto. Nada de un punto de color: el acento ya tiene tres trabajos en el sistema y este no es uno. -------------------------------------------------------------------------- */ .inbox { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: calc(var(--sp-4) * -1); padding-right: var(--sp-4); } /* La fecha se pega arriba mientras el grupo pasa: en una bandeja larga perder el día es perder el contexto entero del mensaje. En FM26 no es una línea suelta sino una BARRA de ancho completo con superficie propia, que es lo que hace que los grupos se lean como días y no como párrafos. */ .inbox__date { position: sticky; top: 0; z-index: 1; margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--bg-row); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); } /* El ritmo de LECTURA, no el de tabla. Una bandeja no se escanea en columna: se leen cinco titulares de a uno, y a 22px por fila el asunto y el remitente se pisaban. `--row-lectura` es la altura que FM26 le da a esto. */ .msg { display: grid; /* 40 y no 32: es la medida del avatar en la captura de FM26, y con la fila a 62 el círculo de 32 quedaba flotando en el medio de un renglón que ya no era el suyo. El avatar y la altura de fila son una sola decisión. */ grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; width: 100%; min-height: var(--row-lectura); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); text-align: left; transition: background var(--dur-fast) var(--ease); } @media (hover: hover) { .msg:hover { background: var(--bg-hover); } } /* El mensaje abierto: lavado del acento Y una barra de 4px a la izquierda. La barra es lo que hace que se encuentre sin leer nada, que es el trabajo de una bandeja de treinta filas. Va con `box-shadow` en vez de `border-left` para no correr el contenido de la fila 4px cuando se selecciona. */ .msg[aria-current='true'] { background: var(--bg-selected); box-shadow: inset 4px 0 0 var(--accent); } /* EL PUNTO DEL NO LEÍDO. Entra el 20 de agosto de 2026, leído a 1:1 del video de FM26: la fila sin leer lleva un punto del acento pegado al canto izquierdo, además del asunto en blanco. Y esto contradice una decisión escrita de esta guía —«ningún punto de color: el acento ya tiene sus tres trabajos y este no es uno»—, así que vale decir por qué se revierte y no simplemente que la fuente lo hace. El argumento de entonces daba por sentado que el peso del asunto alcanzaba. No alcanza cuando la bandeja se llena: con veinte mensajes y quince leídos, distinguir «blanco 600» de «apagado 400» obliga a comparar filas entre sí, y comparar es lo que un aviso tiene que ahorrar. El punto se ve sin comparar nada. El acento acá SÍ es de los suyos: no dice «esto vale mucho» ni nombra una sección — dice «esto te está esperando», que es estado, que es su trabajo. Y no compite con la fila abierta, que lleva lavado Y barra de 4px: una es un punto de 6px y la otra es la fila entera. Va con `::before` sobre el avatar y no como una columna de la retícula: una columna más para seis píxeles corre las tres restantes en todas las filas, incluidas las catorce que no tienen punto. */ .msg[data-leido='false'] { position: relative; } .msg[data-leido='false']::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: var(--r-pill); background: var(--accent); } /* La fila abierta ya se anuncia con su lavado y su barra: el punto ahí sería el tercer aviso de lo mismo, y encima cae justo encima de la barra. */ .msg[aria-current='true']::before { display: none; } /* Acá NO va la silueta, y es una desviación consciente de la fuente. FM26 pone un monigote genérico en cada fila de su bandeja; nosotros dejamos el monograma porque estos remitentes tienen nombre —la secretaria técnica, el cuerpo médico, el de prensa— y la inicial dice cuál de ellos escribió, mientras que cinco siluetas idénticas no dicen nada. El hueco de retrato con silueta es de la ficha y del plantel, donde el sujeto es un futbolista sin cara, y llega con esas pantallas. */ .msg__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); /* Un escalón MÁS OSCURO que el panel, no más claro. En la fuente el círculo del remitente se hunde en la fila y la inicial es lo que sube; con el control elevado detrás, cuarenta píxeles de superficie clara por fila convertían la columna izquierda de la bandeja en una hilera de botones. */ background: var(--ink-900); border: 1px solid var(--line-hairline); color: var(--text-secondary); font-size: var(--fs-md); font-weight: 700; } .msg[data-leido='false'] .msg__avatar { color: var(--text-primary); } .msg__main { display: grid; gap: 1px; min-width: 0; } .msg__from { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg__subject { font-size: var(--fs-md); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg[data-leido='false'] .msg__subject { color: var(--text-primary); font-weight: 600; } .msg[data-leido='false'] .msg__from { color: var(--text-secondary); } .msg__meta { display: flex; align-items: center; gap: var(--sp-3); } .msg__time { font-size: var(--fs-xs); color: var(--text-muted); } .msg__tag { color: var(--warn); } /* LA DOBLE TILDE DEL LEÍDO. Es lo último que faltaba de la bandeja de FM26, que pone la hora a la derecha con una doble tilde verde al lado. No inventa vocabulario: `i-check-double` YA significa «leído» en este juego —es el icono del botón «Marcar todo como leído» de esta misma barra—, así que la fila usa el mismo signo que la acción que la produce. Y no duplica el punto del no leído, aunque los dos hablen del mismo estado: son los dos lados de un par y NUNCA caen en la misma fila. El punto vive a la izquierda, en la entrada del renglón, porque contesta «¿qué me falta?»; la tilde vive al final, pegada a la hora, porque contesta «¿esto ya está?». En una bandeja llena de nuevos habla el punto; en una al día, la tilde. Verde 500 y no `--good`: cumple de sobra el piso de icono —6,26:1 sobre la fila abierta, contra un piso de 3— y pesa menos que el verde de los VALORES, que en este sistema dice «esto es bueno». Que un mensaje esté leído no es un valor alto, es un trámite hecho. */ .msg__visto { color: var(--verde-500); display: inline-grid; place-items: center; } .inbox__empty { margin: auto 0; padding: var(--sp-8) var(--sp-3); font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); } /* -------------------------------------------------------------------------- NOTICIA DESTACADA -------------------------------------------------------------------------- Tres formatos con una sola retícula: portada de diario, posteo y placa de televisión. Los tres cuelgan de `--marca`, el color del medio que firma, que `prensa.js` planta en el panel y acá se reparte solo. Una hoja de estilo que supiera los nombres de los medios sería una hoja que hay que tocar cada vez que se agrega un país. -------------------------------------------------------------------------- */ /* Sin borde ni relleno propios: la noticia vive dentro de su tarjeta y el corte con lo que sigue lo dibuja el borde de la placa. Dos filas nombradas —los titulares y los puntos— porque la de arriba es la que cede. Los cinco titulares no miden lo mismo: un recorte de diario son 150px y un posteo con sus cifras son 267, y como la tarjeta pasa sola cada siete segundos, esa diferencia sería la columna entera moviéndose de sitio —el calendario de abajo subiendo y bajando— cada vez que cambia el titular. Acá el que se hace cargo es un scroller interno: la tarjeta mide lo que la columna le deja y el titular largo se termina de leer adentro. */ .news { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sp-5); min-height: 0; /* EL AFICHE PREGUNTA POR ESTA CAJA Y NO POR LA VENTANA: la misma tarjeta mide 1.073 px en el vistazo general y mucho menos en una ventana angosta, y lo que decide si el escudo de 250 px deja sitio al titular es el ancho de acá. Es el mismo patrón que el partido del día y la pirámide de Carrera. */ container-type: inline-size; container-name: news; } /* `overscroll-behavior: contain` SE FUE DE ACÁ, Y NO ERA UN ADORNO (21/9/2026). -------------------------------------------------------------------------- Esta caja puede rodar por dentro cuando el titular no entra, y `contain` estaba para que al llegar al final no arrastrara la página. Suena bien y es el defecto: la mayoría de las veces el titular ENTRA JUSTO —medido, 166 px en 166— y entonces esta caja no tiene nada que rodar, pero sigue siendo un contenedor de scroll. Una caja así se come la rueda igual, y con `contain` tampoco la deja pasar. El puntero cae ahí al entrar al portal, porque es el centro de arriba. Sin `contain`, cuando hay algo que rodar rueda, y cuando no, el gesto sigue de largo hasta la página. Lo único que se pierde es el freno al llegar al final de un titular largo, que es un lujo al lado de una pantalla que no se puede bajar. */ .news__panels { min-height: 0; overflow-y: auto; } /* Y para que ceda tiene que poder: un ítem flexible no baja de su contenido mientras no se le diga. Es la tarjeta que se achica primero porque es la única de la columna con una salida —«Ver todas»— y con la nota entera a un clic; el calendario, en cambio, tiene piso (ver LA TIRA DE QUINCE DÍAS). Y ES ESA TARJETA, UNA, NO LAS TRES. El comentario de arriba dice «la tarjeta» en singular desde el día que se escribió, pero el selector decía `[data-panel='general']` y en esa columna hay TRES con ese atributo: los titulares, «Próximo rival» y «Partidos de hoy». O sea que el permiso de achicarse por debajo del contenido —pensado para la única que tiene un scroller adentro— se lo llevaban también las otras dos, que no tienen dónde meter lo que sobra: lo recortan y ya. No se veía porque «Próximo rival» son tres renglones y nunca sobra nada. Se ve el último sábado del año, cuando esa misma tarjeta pasa a mostrar el balance —campeón, Apertura, Clausura, descensos, retiros y los juveniles que dejan las inferiores, siete renglones— y en una ventana baja el último queda partido contra el borde. La noticia más importante de la temporada, cortada a la mitad. `:has(.news)` y no una clase nueva en el HTML: la tarjeta ya se distingue por lo que lleva adentro, que es exactamente el motivo por el que puede ceder. */ .home[data-vista='general'] .col > .tarjeta[data-panel='general']:has(.news) { min-height: 0; } /* -------------------------------------------------------------------------- EL TITULAR DE LA VISTA GENERAL ES UN ADELANTO, NO LA NOTA -------------------------------------------------------------------------- La tarjeta tiene 198px en la columna del medio y los cuatro formatos piden 197, 183, 231 y 292 —medidos a 1512×945, o sea con la ventana grande—: dos de los cuatro no entran nunca. El contenedor scrollea, así que no se perdía nada técnicamente, pero la tarjeta pasa sola cada siete segundos: lo que hay debajo del borde no se alcanza a leer ni queriendo, y lo que se ve es un renglón partido por la mitad con la barra del carrusel encima. Lo que se va es lo DECORATIVO del posteo —las tres cifras y la barra de me gusta— y el cuerpo se corta en tres renglones con puntos suspensivos, que es un corte que se lee como corte. Queda el titular, la bajada y el pie con el medio y la fecha, que es lo que un adelanto tiene que decir. La nota entera sigue a un clic en «Ver todas las noticias», y ahí sí está completa: esto vale sólo dentro de la vista general. Medido después: los cuatro paneles quedan en 197, 183, 194 y 184 contra los 198 de la tarjeta. */ /* LA BARRA SE QUEDA, DESDE EL 21/9/2026. Se iba con las cifras —las dos eran «lo decorativo del posteo»— y estaba mal catalogada: las tarjetas de datos son un agregado, pero el renglón de respuestas, reposteos, me gusta y vistas es lo que hace que un posteo se lea como un posteo. Sin él la pieza es un párrafo con un avatar al lado. «Que tengan el formato real» —Alberto—. Lo que se va es sólo la tarjeta de cifras. */ .home[data-vista='general'] .news .xpost__datos { display: none; } .home[data-vista='general'] .news .news__body, .home[data-vista='general'] .news .xpost__texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Y de la portada de diario se van dos cosas más. La bajada segunda —son dos párrafos y el segundo es el contexto, «el primer compromiso es contra Independiente», que en un adelanto de tres renglones es lo primero que sobra. Y EL DIBUJO GRANDE, que era el que de verdad marcaba el alto: 168px de escudo contra 121 de texto, así que el panel medía lo que medía el adorno. Esta hoja ya lo baja a 96 cuando la columna se angosta —«el dibujo se lleva el ancho del titular»— y el argumento por ALTO es el mismo con otro eje: acá tiene 198px de tarjeta. */ .home[data-vista='general'] .news .news__text .news__body ~ .news__body { display: none; } .home[data-vista='general'] .news .news__mark { width: 96px; height: 96px; margin: 0; } /* El panel es la retícula; el artículo sólo lo contiene junto a los indicadores. Cada indicador controla uno de estos. */ .news__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-6); align-items: start; } /* CÓMO LLEGA EL TITULAR SIGUIENTE -------------------------------------------------------------------------- La tarjeta pasa sola cada siete segundos y un corte seco a esa cadencia se lee como un parpadeo de la pantalla. Es la misma llegada que ya tiene el producto entre pantalla y pantalla (`movimiento.css`) y por eso usa sus piezas: DOS animaciones sobre el mismo elemento, porque el fundido y el recorrido no quieren la misma curva —con la de llegada, que gasta el 90 % del camino en el primer tercio, un fundido se termina antes de que el ojo lo registre—. El viaje es de 6px y no de 10: es una tarjeta llegando dentro de una columna, no una pantalla entera. Y no llega de una pieza: el titular primero, la bajada después y las etiquetas al final, con 50ms entre medio. Es lo que hace que se lea como una noticia que se está escribiendo y no como un bloque que se desliza. Escalón corto a propósito: el titular —lo único que se viene a leer— ya está entero a los 240ms, y lo que se demora es lo que se lee después. */ @media (prefers-reduced-motion: no-preference) { .news__panel:not([hidden]) { animation: mov-entra-funde var(--dur-pantalla) ease-out both, news-entra-corre var(--dur-pantalla) var(--ease-entrada) both; } .news__panel:not([hidden]) > * { animation: mov-entra-funde var(--dur-pantalla) ease-out backwards; } .news__panel:not([hidden]) > :nth-child(2) { animation-delay: 50ms; } .news__panel:not([hidden]) > :nth-child(3) { animation-delay: 100ms; } .news__panel:not([hidden]) > :nth-child(n + 4) { animation-delay: 150ms; } } @keyframes news-entra-corre { from { transform: translateY(6px); } } /* Sólo la portada tiene dos columnas: el resto ocupa el ancho entero porque un posteo con una columna de adorno al lado deja de parecer un posteo. */ .news__panel--diario { grid-template-columns: minmax(0, 1fr) auto; } /* -------------------------------------------------------------------------- FORMATO 1 · LA PORTADA -------------------------------------------------------------------------- */ /* La marca entra UNA vez y entra en horizontal: la regla de abajo, que es como se imprime una cabecera. Esto antes llevaba además un filete vertical de color por el borde izquierdo del panel y era una segunda marca diciendo lo mismo — con el sello ya en color, la barra lateral no informaba, decoraba. LA SECCIÓN VA ARRIBA DEL NOMBRE Y NO AL LADO, que es como se compone una volanta de verdad: renglón chico en versalitas arriba, el nombre grande debajo, y la regla cerrando. Era una fila de dos piezas con `nowrap` a los dos lados, y en un teléfono no entran: como `.news__panel--diario` lleva `overflow: hidden`, la sección se iba afuera del panel y quedaba CORTADA sin que nada avisara —no se ve que falte texto, que es lo peor que puede hacer un recorte—. MEDIDO EL 17/9/2026 a 375px con los 57 medios de `scripts/prensa.js`: **8 empujaban la sección fuera del panel**, el peor 77px. Y ya pasaba con la siembra de siempre —`ESPN Argentina · Primera División · Previa` se salía 11px—, así que no era de los países nuevos: era que nadie había mirado esta cabecera en un teléfono. ENVUELVE SOLA, y NO va en pila a todo ancho. Esto último se probó y Alberto lo rechazó en el acto —«no tiene estilos eso, se ve todo muy cuadrado»— y tenía razón: en la portada el panel mide 531px, o sea que apilar dejaba trescientos píxeles vacíos a la derecha y convertía una cabecera de diario en un bloque alineado a la izquierda. El defecto era del teléfono y la cura se había aplicado a todos los anchos. CÓMO SE LLEGÓ A ESE ERROR, que es lo que no hay que repetir: la lámina que sirvió para elegir —`herramientas/cabecera-angosta.html`— dibuja las ocho salidas SÓLO al ancho de un teléfono. O sea que la elección se hizo mirando el caso angosto y la implementación la extendió al ancho, que nadie había visto. Una lámina que muestra un solo régimen no puede decidir por los dos. `flex-wrap: wrap` con la sección en `flex: 0 0 auto` se ajusta sola: donde los dos entran, entran en un renglón y la cabecera es la de siempre; donde no entran, la sección se va a su propio renglón entera. Sin consulta de medios, que es lo que hacía falta: este panel mide una cosa en la portada y otra en la vista de Noticias dentro de la misma ventana, así que un corte por ancho de VENTANA acertaría en una y erraría en la otra. El `0 0 auto` no es decoración: sin él la sección se deja apretar y se queda en el renglón partida en tres líneas angostas en vez de bajar entera. LAS OCHO SALIDAS ESTÁN DIBUJADAS Y MEDIDAS en `herramientas/cabecera-angosta.html`, sobre los pares medio × liga que el juego produce de verdad. Las que no entran a los dos anchos de teléfono están ahí con su número, y las dos que cortan con «…» también — porque «La Gazzetta dello…» es un medio que no existe, y el nombre del medio es justo lo que hay que leer. Y SE VA EL `column-reverse`, con su cesión: mientras estuvo en pila, el orden del marcado —sello y después sección— quedaba al revés de lo dibujado, así que lo leído en voz alta y lo visto no coincidían. Envolviendo no hace falta invertir nada: el sello va primero en las dos cosas. */ .cabecera { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); min-width: 0; padding-bottom: var(--sp-4); border-bottom: 2px solid hsl(var(--marca) / 0.4); } /* Que la sección BAJE ENTERA en vez de dejarse apretar, y que una vez abajo PUEDA envolver. Son dos cosas y hacen falta las dos: · `flex: 0 0 auto` le prohíbe encogerse, que es lo que la manda al renglón de abajo entera en vez de dejarla quedarse arriba partida en tres líneas angostas al lado del sello. · `max-width: 100%` es el tope que la deja envolver cuando YA está sola abajo. Sin él, un elemento que no encoge mide `max-content` y el texto no envuelve nunca: medido a 375px, «Independiente Rivadavia · Rueda de prensa» bajaba bien y se seguía saliendo 58px del panel. El `flex-wrap` resolvía el renglón y no el ancho. */ .cabecera__seccion { flex: 0 0 auto; max-width: 100%; margin-left: auto; } /* El sello es lo único de la portada que va del color del medio, y va en grande: en un diario la marca pesa más que la volanta. Y VA EN SU COLOR PORQUE EL COLOR LLEGA YA CORREGIDO, que es una decisión de Alberto del 17/9/2026 y no un descuido. El mismo día se midió que **23 de los 57 medios de `scripts/prensa.js` no llegaban a 4,5:1** acá —The Guardian `219 84% 34%` en 1,96, L'Équipe `206 96% 28%` en 2,20— y se probaron los dos caminos: sacar el nombre del color, como hizo `.placa__canal`, o corregir el TONO antes de inyectarlo. Ganó el segundo: `tonoLegible()` en `mundo.js` le mueve la luz al tono hasta que pasa, sin tocar matiz ni saturación, así que el azul del Guardian sigue siendo azul y el nombre se lee. LO QUE ESO **NO** ARREGLA, Y VIVE DOS BLOQUES MÁS ABAJO: la sigla de `.xpost__avatar`, que es el color de la marca sobre un lavado del MISMO color. Aclarar el tono mueve la tinta y el fondo juntos, así que la razón casi no se mueve: con el tono corregido quedaban 33 de 57 por debajo de 4,5, el peor en 3,73. Esa sí sale del color. Si algún día se revisa esta cabecera, la diferencia entre los dos casos es esa y no otra: acá la tinta se apoya en el panel, allá en sí misma. EL PISO ACÁ ES 4,5 Y NO 3, que es fácil de errar: el sello mide 18px con peso 800, y «texto grande» de WCAG pide 18,66px en negrita. Por 0,66px no entra, y `barrido-contraste.html` ya lo mide así. */ .cabecera__sello { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.015em; line-height: 1; color: hsl(var(--marca)); white-space: nowrap; } /* SIN `nowrap`, Y LA AUSENCIA ES LA REGLA. Lo llevaba de cuando esto era una fila y la volanta peleaba el ancho con el sello: ahí `nowrap` la mantenía entera de un lado. Desde que la cabecera va en pila la volanta tiene el renglón para ella sola, y `nowrap` dejó de proteger nada para pasar a ser lo único que puede romperla — dentro de `overflow: hidden`, un texto que no envuelve no se acomoda: se CORTA, y sin puntos suspensivos que avisen. Hoy no corta ninguna: las 558 volantas que el juego sabe producir —93 ligas por los seis sufijos de `prensa.js`, «Previa», «Sorteo», «Los premios», la fecha, «En juego» y «Final»— entran en un renglón a 375px, medido el 17/9/2026. O sea que esto no arregla un defecto: **cierra la puerta por la que iba a entrar el próximo**, y ya se sabe cuál: la rueda de prensa firma con `« · Rueda de prensa»`, y un club de nombre largo —«Independiente Rivadavia»— se salía 60px aun en pila. Con la volanta envolviendo, no hay nombre que la rompa. El precio es que una volanta larga se lleva dos renglones en un teléfono, y es el precio correcto: dos renglones se leen, medio renglón no. */ .cabecera__seccion { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); } .news__text { display: grid; gap: var(--sp-4); min-width: 0; } /* El recorte de tabla que un diario imprime al costado de la nota. Ancho fijo: es una columna de imprenta y no un bloque que se estira con el texto. */ .recorte { width: 170px; display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-row); } .recorte__fila { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: var(--sp-4); align-items: baseline; font-size: var(--fs-xs); color: var(--text-secondary); } .recorte__pos { color: var(--text-muted); font-variant-numeric: tabular-nums; } .recorte__club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recorte__pts { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .recorte__fila--mio { color: var(--tuyo); } .recorte__fila--mio .recorte__club { font-weight: 700; } /* El salto entre los de arriba y vos. Va punteado a propósito: una línea llena diría "acá termina la tabla" y lo que dice es "acá faltan renglones". */ .recorte__fila--corte { margin-top: var(--sp-3); padding-top: var(--sp-5); border-top: 1px dashed var(--line); } /* -------------------------------------------------------------------------- FORMATO 2 · EL POSTEO -------------------------------------------------------------------------- */ /* EL POSTEO, VESTIDO DEL CLUB Y CON EL FILETE DEL MEDIO. El porqué está en `inicio.js`; acá la forma. El resplandor va a la DERECHA, lejos del texto, que es la regla que el afiche pagó con 392 clubes en rojo: el color vive donde no hay letra. `isolation: isolate` es lo que mantiene el resplandor detrás del contenido sin pedirle un `z-index` a cada hijo. */ .xpost { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); /* SIN MARGEN NEGATIVO A LOS COSTADOS. Lo tuvo un momento, para ganar ancho, y con él el filete del medio quedaba FUERA de la tarjeta: lo recortaba su `overflow`. Un filete que marca de qué medio es el posteo y no se ve es tres píxeles de nada. */ border-radius: var(--r-md); border-left: 3px solid hsl(var(--marca) / 0.8); overflow: hidden; isolation: isolate; background: linear-gradient(90deg, color-mix(in srgb, var(--club, transparent) 10%, transparent), transparent 46%); } /* LA CAMISETA DEL FUTBOLISTA DEL QUE HABLA EL POSTEO. -------------------------------------------------------------------------- Reemplaza al escudo desenfocado cuando la nota es sobre alguien: «acá ni se ve el escudo, podemos poner algo que haga referencia al jugador que se menciona» —Alberto, 21/9/2026—. El juego no tiene fotos de futbolistas y no las va a tener: son 1.656 clubes. Lo que sí tiene es el DORSAL, que es con lo que se identifica a alguien en cualquier cancha del mundo, y los colores del club para vestirlo. Un número grande en la espalda es una camiseta sin dibujar una camiseta. VA APAGADA Y CONTRA EL BORDE, como el resplandor que reemplaza: es ambiente del posteo, no su contenido. Si compitiera con el texto haría lo que hacía el escudo al 100 % en la pizarra — robarle la lectura a lo que la pieza vino a decir. */ .xpost__camiseta { position: absolute; z-index: -1; top: 50%; right: var(--sp-6); display: grid; justify-items: center; gap: 2px; transform: translateY(-50%); pointer-events: none; opacity: 0.6; } .xpost__dorsal { font-size: 92px; font-weight: 800; line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--club, var(--accent)) 52%, var(--text-primary)); text-shadow: 0 6px 24px hsl(0 0% 0% / 0.55); } .xpost__apellido { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary); } /* EL MISMO ESCUDO QUE LA PIZARRA Y QUE EL AFICHE (21/9/2026: «acá hagamos más visible el escudo»). Estaba al 22 % de opacidad y desenfocado a 20 px, que es el ajuste que tenía el afiche antes de que Alberto pidiera lo mismo allá: a esa distancia el escudo deja de ser un escudo y es una mancha con su color. Lo que lo hace valer la pena es que SE RECONOZCA, y eso lo da el desenfoque corto — cuatro píxeles, los mismos de las otras dos piezas. Y SIGUE SIENDO AMBIENTE. Va contra el borde derecho, detrás del texto, y la máscara lo apaga antes de llegar a la columna de la letra: el posteo es una voz y no una portada, así que el escudo acompaña y no habla. Es la regla que el afiche pagó con 392 clubes en rojo — el color vive donde no hay letra. */ .xpost__halo { position: absolute; z-index: -1; top: 50%; right: -60px; width: 240px; height: 240px; object-fit: contain; opacity: 0.46; filter: blur(4px) saturate(1.35); transform: translateY(-50%); pointer-events: none; mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-size: 100% 200%; mask-position: left center; mask-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); -webkit-mask-size: 100% 200%; -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; } /* La pastilla del medio. Los logotipos reales no se dibujan —los de los clubes tampoco— y una pastilla con las iniciales es lo que hace una aplicación cuando no tiene la imagen. LA SIGLA NO VA EN EL COLOR DEL MEDIO, Y ES EL ÚNICO SITIO DEL PORTAL DONDE ESO HIZO FALTA. En los demás —el sello de la cabecera acá arriba, el hero de la portada, la tira de secciones— el color llega ya corregido por `tonoLegible()` (`mundo.js`) y el nombre se lee en su marca. Acá no alcanza, y el motivo es geométrico y no de tono: **la sigla se apoya en un lavado del 16 % DE SU MISMO COLOR**. Aclarar el tono mueve la tinta y el fondo juntos, así que la razón entre los dos casi no se mueve. MEDIDO EL 17/9/2026 sobre los 57 medios de `scripts/prensa.js`, contra el fondo compuesto: con el tono crudo 33 de 57 bajo 4,5 · peor 1,82 (The Guardian) con el tono ya corregido 33 de 57 bajo 4,5 · peor 3,73 (Lance!) con la sigla en tinta 0 de 57 · peor 10,37 (Canal+ Sport) Los 24,5 puntos de luz que `tonoLegible()` le sube al Guardian le compran a este avatar 1,95 puntos de contraste y lo dejan igual de flojo. Es el mismo párrafo que `.placa__canal` tiene escrito desde antes: un color de marca sobre un lavado de ese mismo color tiene poco de dónde agarrarse. LA FIRMA SE QUEDA ENTERA EN LA PASTILLA —el borde y el relleno siguen siendo el tono del medio—; lo único que se mueve es la tinta, que es lo que hay que LEER. Es la misma cesión que hizo la placa. NINGUNA VARA LO VE, Y ESO NO LO ARREGLA ESTE COMENTARIO. Dos motivos apilados: el `` lleva `aria-hidden="true"` en `inicio.js` —la sigla la dice el nombre de al lado, así que es correcto— y `barrido-contraste.html` exime lo marcado como presentacional; y encima el panel del posteo está `[hidden]` salvo los siete segundos que le toca al carrusel. O sea que estos números no salieron del barrido: salieron de medir los 57 tonos a mano. Ver [[lo-eximido-se-cuenta]]. */ .xpost__avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid hsl(var(--marca) / 0.45); background: hsl(var(--marca) / 0.16); color: var(--text-primary); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.02em; } .xpost__cuerpo { display: grid; gap: var(--sp-5); min-width: 0; } .xpost__quien { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: var(--fs-sm); } .xpost__nombre { font-weight: 700; color: var(--text-primary); white-space: nowrap; } .xpost__ok { flex: none; color: hsl(var(--marca)); } .xpost__arroba { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); } .xpost__logo { flex: none; margin-left: auto; color: var(--text-secondary); } /* El cuerpo del posteo va un punto más grande que la prosa del diario: en la red el texto ES la nota, no la bajada de un titular. */ .xpost__texto { max-width: 56ch; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-primary); text-wrap: pretty; } .xpost__texto strong { font-weight: 700; } .xpost__hilo { display: grid; gap: var(--sp-4); padding-left: var(--sp-6); border-left: 2px solid var(--line); font-size: var(--fs-md); color: var(--text-secondary); } /* La tarjeta de cifras que va enganchada al posteo. Tres como mucho: con cuatro deja de leerse de un vistazo, que es lo único que hace bien. */ .xpost__datos { display: flex; gap: var(--sp-4); } .xpost__datos > div { flex: 1; min-width: 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-row); } .xpost__datos dt { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } .xpost__datos dd { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xpost__pie { font-size: var(--fs-sm); color: var(--text-muted); } /* LA HORA, SOLA Y ARRIBA DE LA BARRA (21/9/2026: «que tengan el formato real»). Estaba pegada al arroba —«@ESPNArgentina · 08:12»—, que es el formato del TIMELINE; un posteo mostrado suelto, que es lo que es este módulo, lleva la hora en su propio renglón entre el texto y las acciones. Es un renglón de nada y es lo que más lo hace parecer un posteo de verdad. */ .xpost__cuando { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* LA BARRA DE ACCIONES, REPARTIDA A LO ANCHO. Apilada a la izquierda con un hueco fijo se lee como el pie de una tarjeta; repartida, como la barra de la red. Guardar y compartir se van contra el borde derecho, que es donde X los pone y donde no compiten con las cifras. */ .xpost__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .xpost__barra span { display: inline-flex; align-items: center; gap: var(--sp-3); } .xpost__barra-fin { gap: var(--sp-5); color: var(--text-muted); } /* Con la caja estrecha las cuatro cifras y los dos iconos no entran repartidos: antes de apretujarlos se van los dos de la derecha, que son los únicos que no llevan número. Lo que aprieta es la CAJA del módulo y no la ventana. */ @container news (max-width: 540px) { .xpost__barra-fin { display: none; } } /* -------------------------------------------------------------------------- FORMATO 3 · LA PLACA -------------------------------------------------------------------------- */ /* El color del canal entra por el borde izquierdo y por el lavado de la banda, nunca como relleno macizo detrás de texto: de los doce países hay medios de marca clara y de marca oscura, y un relleno que funciona con uno deja el texto ilegible con el otro. */ /* ========================================================================== LA PIZARRA DEL ESTADIO · el resultado, al tamaño que le corresponde -------------------------------------------------------------------------- Reemplaza a la placa. El porqué está en `inicio.js`; acá, la forma. CADA CLUB TIÑE SU MITAD y el centro queda neutro. La diagonal entre los dos colores no es decoración: es lo que hace que se lea como un enfrentamiento y no como dos tarjetas pegadas. El centro sin color es para que las cifras no peleen con ninguno de los dos — el marcador no es de nadie hasta que se lee. ========================================================================== */ .pizarra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 210px; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-6)); border-radius: calc(var(--r-tarjeta) - 1px); overflow: hidden; /* EL TINTE BAJA DE 40 A 18 Y EL ESCUDO SUBE. Los dos cambios son el mismo arreglo visto de los dos lados. ---------------------------------------------------------------------- Al 40 %, el nombre del club se apoya en el color del club y el barrido de los 1.673 daba 188 por debajo de 4,5:1 — los que juegan de amarillo, de celeste y de verde lima. Al 24 % quedan 19; al 18 %, cero. Es el mismo defecto que el afiche ya había pagado, en la pieza de al lado. Y lo que se pierde en tinte se recupera donde no molesta: «acá ni se ven, el efecto está bueno igual» —Alberto, sobre los escudos—. Van del 16 % al 34 % de opacidad, que es donde se reconocen sin disputarle la lectura a las cifras. El color del club pasa a estar dicho por su ESCUDO y no por un lavado de fondo, que además es lo que lo hace reconocible: un lavado celeste puede ser de cualquiera, el escudo de Racing es de Racing. */ background: linear-gradient(100deg, color-mix(in srgb, var(--casa, transparent) 18%, var(--ink-950)) 0%, var(--ink-950) 38%, var(--ink-950) 62%, color-mix(in srgb, var(--visita, transparent) 18%, var(--ink-950)) 100%); } .pizarra__lado { position: relative; display: grid; align-content: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-6) var(--sp-7); } /* EL CONTRASTE LO DA EL TEXTO, NO UNA BANDA ENCIMA DEL ESCUDO. -------------------------------------------------------------------------- Acá hubo una cortina —un degradado oscuro a lo ancho de cada mitad— y duró una medición: resolvía el contraste y tapaba justo lo que Alberto había pedido ver. «Es una buena idea, pero tapamos los escudos y no me gusta eso». Tenía razón: una banda oscura sobre un escudo es peor que un escudo tenue, porque además se ve la banda. Sobre una imagen, el contraste lo da el TEXTO. Es lo que hace cualquier transmisión cuando pone un nombre sobre el campo de juego: una sombra dura y cerrada alrededor de la letra, que oscurece sólo los píxeles que tocan el glifo y deja el resto de la imagen intacto. El escudo se ve entero. SON CUATRO SOMBRAS Y NO UNA. Una sola tiene dirección, y un nombre en negrita sobre un escudo claro se apoya en todos los lados: las cuatro cerradas —un píxel— más una difusa de seis arman un contorno completo sin que se lea como sombra. Lo mide `medir-el-nombre-en-la-pizarra.mjs`, que fotografía la franja del nombre y busca su peor píxel; con la sombra puesta, ese peor píxel ya no está al lado de la letra. */ .pizarra__club, .pizarra__pie { text-shadow: 0 1px 0 var(--ink-1000), 0 -1px 0 var(--ink-1000), 1px 0 0 var(--ink-1000), -1px 0 0 var(--ink-1000), 0 2px 6px hsl(0 0% 0% / 0.9); } .pizarra__lado--der { justify-items: end; text-align: right; } /* APAGADO, A SANGRE Y DESENFOCADO. Al 100 % el escudo compite con las cifras, que son lo que la pizarra vino a decir; apagado da la presencia sin disputar la lectura. Y DESENFOCADO POR LA MISMA RAZÓN QUE EL DEL AFICHE: pedido a 220 px sobre un archivo de 256, en Retina se dibuja al doble de lo que hay. Acá el desenfoque puede ser MENOR —8 px contra 22— porque al 16 % de opacidad el píxel ya casi no se lee; ocho alcanzan para borrar el borde escalonado, que es lo único que se notaba. */ .pizarra__escudo { position: absolute; top: 50%; left: -46px; width: 220px; height: 220px; object-fit: contain; /* 46 % Y NO 34: Alberto pidió verlos más, dos veces. A 34 se reconocen; a 46 se ven. El techo lo puso la medición del píxel real debajo del nombre del club —ver `medir-el-nombre-en-la-pizarra.mjs`—: por encima de 46 el escudo le come contraste al texto que tiene encima, que es lo que esta pieza vino a decir. */ opacity: 0.46; /* Y el desenfoque baja de 8 a 4 con la opacidad al alza: a 46 % un borde escalonado sí se leería, y cuatro píxeles alcanzan para borrarlo dejando más forma reconocible que ocho. */ filter: blur(4px) saturate(1.35); transform: translateY(-50%); pointer-events: none; } .pizarra__lado--der .pizarra__escudo { left: auto; right: -46px; } /* Y ARRIBA, EL ESCUDO DE VERDAD (21/9/2026: «acá también el doble escudo» —Alberto—, después de pedir lo mismo para el afiche). -------------------------------------------------------------------------- Son las dos capas del afiche y por el mismo motivo: el borrón de atrás da TAMAÑO y el de adelante da FILO. Ninguna de las dos sola hace las dos cosas —el material tiene 256 px y a 220 ya se lo está estirando—, y el truco es el mismo con el que una transmisión pone un escudo gigante de fondo: nunca está nítido, está encendido. PERO ACÁ NO VA ENCIMA DEL BORRÓN, Y ÉSA ES LA DIFERENCIA CON EL AFICHE. Se probó concéntrico, como allá, y no funciona: en el afiche el texto vive a la derecha del escudo y hay sitio; en la pizarra el nombre del club está ENCIMA, así que un escudo nítido detrás de la palabra «Liverpool» es una segunda figura disputándole el renglón a lo que la pieza vino a decir. Y volvía a traer el problema que se acababa de arreglar una capa más abajo: su presencia dependía del club. Va como un renglón más de la columna —escudo, nombre, goleadores— que es como se arma una ficha. El borrón sigue detrás de los tres. OCHENTA Y CUATRO Y NO MÁS: en Retina son 148 px físicos sobre los 256 del archivo —con el `zoom` del sitio adentro de la cuenta— así que se dibuja nítido con margen de sobra. Y es lo que deja que la columna entre en los 210 px de alto de la pizarra con el nombre y los goleadores debajo. */ .pizarra__nitido { width: 84px; height: 84px; object-fit: contain; margin-bottom: var(--sp-2); /* La sombra no es adorno: sin ella un escudo claro sobre su propio color lavado se funde con el fondo —Racing sobre celeste, River sobre blanco— y lo que se ve es una mancha. Es la misma del afiche. */ filter: drop-shadow(0 8px 20px hsl(0 0% 0% / 0.6)); pointer-events: none; } .pizarra__estado, .pizarra__donde { position: relative; font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .pizarra__club { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); } /* Los goleadores, y son SÓLO LOS TUYOS: van debajo de tu escudo y no centrados, que es lo que lo dice sin gastar una palabra. Del rival el juego no sabe quién juega. */ /* LOS GOLEADORES SE LEEN (21/9/2026, pedido de Alberto: «los que hagan goles, que se lean mejor»). Estaban en `--fs-xs` y `--text-secondary`, o sea al mismo peso que el rótulo «VOS» de arriba — y no es lo mismo: uno es una etiqueta y el otro son los nombres de los que ganaron el partido. Suben a `--fs-sm` y a la tinta principal, y el ícono de pelota delante los separa del nombre del club sin gastar una palabra. */ .pizarra__pie { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 1em; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .pizarra__lado--der .pizarra__pie { justify-content: flex-end; } .pizarra__pie .i { flex: none; color: var(--accent-texto); } .pizarra__quienes { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pizarra__centro { display: grid; justify-items: center; gap: var(--sp-2); padding: 0 var(--sp-6); } .pizarra__n { display: flex; align-items: baseline; gap: var(--sp-3); font-size: 64px; font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text-primary); } .pizarra__n i { font-style: normal; font-size: 26px; color: var(--text-disabled); } .pizarra__estado { color: var(--danger); } .pizarra__pen { font-size: var(--fs-xs); color: var(--text-muted); } /* ========================================================================== EL AFICHE · la nota se viste del club del que habla -------------------------------------------------------------------------- El porqué está en `inicio.js`. Acá: el escudo a sangre por la izquierda, el color del club lavado sobre el panel, y el titular en 34 px. ========================================================================== */ .afiche { position: relative; display: grid; align-content: center; min-height: 210px; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-6)); padding: var(--sp-6) var(--sp-7) var(--sp-6) 186px; border-radius: calc(var(--r-tarjeta) - 1px); overflow: hidden; /* EL TEXTO NO SE APOYA EN EL COLOR DEL CLUB, Y ÉSA ES LA REGLA QUE FALTABA. ---------------------------------------------------------------------- «Ojo acá con el contraste» —Alberto, con el afiche del Atlético de Madrid—. Tenía razón y el barrido lo puso en número: teñido al 22 %, el titular bajaba de 4,5:1 en 392 de los 1.673 clubes. Los que juegan de amarillo, de celeste y de verde lima aclaran el fondo hasta que la tinta clara deja de leerse. BAJAR EL TINTE NO ES LA SALIDA, y se midió antes de descartarla: al 18 % quedan 186 clubes en rojo, al 14 % setenta y cinco, y al 10 % —donde el color del club ya no se ve, o sea donde el afiche deja de ser un afiche— todavía fallan 18. Perseguir el número es perder las dos cosas. Lo que se hace es separar los dos trabajos: el color vive a la IZQUIERDA, donde está el escudo y no hay texto, y debajo del texto se apoya una cortina del fondo del sistema que lo devuelve a un contraste conocido. El degradado va de transparente en el escudo a opaco a partir del 34 % del ancho, que es donde el texto arranca. Con eso el contraste del titular deja de depender del club: es el mismo con Boca que con Leeds. Barrido en los 1.673 después del cambio: cero. */ background: /* LA CORTINA SE CIERRA ANTES DE QUE EMPIECE EL TEXTO, y la primera versión no lo hacía: llegaba a opaca recién al 40 % del ancho mientras el texto arranca a los 186 px de 1.073, o sea al 17 %. Ahí todavía pasaba color del club y el titular del Atlético de Madrid se leía rosa sobre rojo claro — lo vio Alberto, y mi barrido lo había dado por bueno porque midió un porcentaje que YO SUPUSE en vez del que la hoja pinta. Ahora se cierra al 16 %, justo antes del texto. El color no se pierde: vive en ese 16 % de la izquierda, que es exactamente donde está el escudo, y el resplandor sigue detrás de él. */ linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg-panel) 55%, transparent) 9%, var(--bg-panel) 16%), radial-gradient(120% 150% at 6% 50%, color-mix(in srgb, var(--club, transparent) 62%, transparent), transparent 58%), linear-gradient(100deg, color-mix(in srgb, var(--club, transparent) 30%, var(--bg-panel)), var(--bg-panel) 52%); } /* ══════════════════════════════════════════════════════════════════════════ EL ESCUDO, EN DOS CAPAS: UNA QUE DA PRESENCIA Y OTRA QUE DA NITIDEZ -------------------------------------------------------------------------- «Que no se pixelen y queden bien a nivel UI» —Alberto, 21/9/2026—. El problema es del material y conviene decirlo con el número: los escudos son PNG de 256 × 256 —y 144 los más chicos, medido sobre los 1.677—. Pedido a 250 px CSS en una pantalla Retina se dibuja a 500 físicos, o sea casi el DOBLE de lo que hay. Ningún filtro inventa ese detalle: lo único que se puede hacer es no pedirle al archivo lo que no tiene. Así que el escudo grande deja de ser un escudo y pasa a ser LUZ. Desenfocado a 22 px no hay píxel que se vea —el desenfoque borra justamente la escala a la que el archivo falla— y lo que queda es un resplandor con la forma y el color del club, que es lo que daba la presencia. Y ENCIMA VA EL ESCUDO DE VERDAD, A 104 PX. A 104 CSS son 208 físicos en Retina: por DEBAJO de los 256 del archivo, así que se dibuja nítido con margen. Es el tamaño más grande que el material aguanta sin inventar nada. Las dos capas juntas dan lo que ninguna da sola: el tamaño de la primera y el filo de la segunda. Es el mismo truco con el que una transmisión pone un escudo gigante de fondo — nunca está nítido, está encendido. ══════════════════════════════════════════════════════════════════════════ */ .afiche__halo, .afiche__escudo { position: absolute; object-fit: contain; pointer-events: none; } /* LA LUZ. `saturate` le sube el color porque el desenfoque lo lava, y el `opacity` la deja por debajo del texto: es fondo, no figura. */ .afiche__halo { top: 50%; left: -60px; width: 260px; height: 260px; transform: translateY(-50%); /* EL MISMO ESCUDO QUE LA PIZARRA, Y POR PEDIDO: «quiero que se vea así mi escudo» —Alberto, 21/9/2026, con la placa de resultado al lado—. Era un resplandor de 330 px desenfocado a 22: a esa distancia el escudo ya no es un escudo, es una mancha con su color. Lo que le gustó de la pizarra es que SE RECONOCE — el trébol del Celtic, el águila del AEL— y eso lo da el desenfoque corto, no el largo. Así que acá van los mismos cuatro píxeles de `blur` y la misma saturación que allá, con el escudo más grande que el afiche para que se corte contra los bordes en vez de flotar adentro. El nítido va encima. */ object-fit: contain; opacity: 0.46; filter: blur(4px) saturate(1.35); /* Y SE APAGA ANTES DEL TEXTO. ---------------------------------------------------------------------- «Podemos mejorar un poco más la zona del texto que queda opacada por el escudo». La cortina del fondo se cierra a los 186 px y por eso el barrido de contraste daba cero, pero la cortina es parte del BACKGROUND del afiche y esto es un `` que va ENCIMA: le pasaba por arriba y desembocaba en el titular. Medido con el Atlético de Madrid —el club de la captura—: la tinta llegaba a los 222 px, o sea 58 adentro del texto, con 120 sobre 255 de desviación justo en la columna donde arranca. La máscara lo apaga entre el 72 % y el 90 % de su caja, que en pantalla es de los 112 a los 153 px. El escudo nítido termina a los 150, así que el borrón muere justo detrás de él y once píxeles antes de la primera letra. `mask-size` va al 200 % de alto a propósito: la máscara recorta lo que no cubre, y al 100 % le comía el desenfoque por arriba y por abajo. */ mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 90%); mask-size: 100% 200%; mask-position: left center; mask-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 90%); -webkit-mask-size: 100% 200%; -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; } /* EL ESCUDO. Con sombra, y no es adorno: sin ella, uno claro sobre su propio color lavado se funde con el fondo —Racing sobre celeste, River sobre blanco— y lo que se ve es una mancha. La sombra es lo que lo despega en los 1.673. */ .afiche__escudo { top: 50%; /* MÁS GRANDE, HASTA DONDE EL ARCHIVO AGUANTA Y NI UN PÍXEL MÁS (21/9/2026: «subamos un poco el escudo nítido también», con la pizarra al lado como referencia). El techo no es una preferencia, es una cuenta: el PNG tiene 256 px, la pantalla Retina dibuja dos físicos por cada CSS y el sitio va con `zoom: 0.88`, así que el máximo real es 256 / (2 × 0,88) = 145 px. A 140 se dibuja a 246 físicos sobre 256: nítido, con 10 px de margen. Y SE CORRE A LA IZQUIERDA para que crecer no lo empuje contra el texto. El titular arranca a los 186; a 140 px desde los 46 el escudo terminaba justo encima. Desde los 30 termina a los 170 —y en pantalla, a los 150—, o sea adentro de la zona que la cortina deja para el club y por delante del corte del resplandor, que muere a los 153. */ left: 30px; /* EL ANCHO YA NO DEPENDE DEL NÚMERO DE LA ESCALA (29/9/2026). Es la línea que `tokens.css` dejaba propuesta: a 0,88 da 140, igual que antes; desde 0,914 para arriba baja lo justo para que el PNG de 256 px nunca se estire en Retina —a 0,92 da 139 px, que se pintan a 256 físicos—. Sin esto, subir la escala del sitio pixelaba el escudo del afiche. */ width: min(140px, calc(128px / var(--escala-sitio))); height: min(140px, calc(128px / var(--escala-sitio))); transform: translateY(-50%); filter: drop-shadow(0 10px 26px hsl(0 0% 0% / 0.6)); } .afiche__txt { display: grid; gap: var(--sp-4); min-width: 0; } .afiche__kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); margin: 0; font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; } .afiche__medio { font-weight: 800; color: var(--marca, var(--accent-texto)); } /* LA VOLANTA SUBE UN ESCALÓN, y el barrido dice por qué: con la cortina puesta quedaban TRES clubes por debajo de 4,5:1 —Pescara en 4,48, Vegalta y Falkenberg en 4,49— y los tres fallaban por esta tinta, no por el titular. Tres de 1.673 es poco y aun así se arregla: lo que cuesta es una línea, y lo que se evita es un rótulo ilegible con tres clubes de los que el juego tiene pantalla. */ .afiche__volanta { color: var(--text-secondary); } /* 34 PX Y `balance`. El tamaño es la mitad del argumento de esta forma; el `text-wrap: balance` es lo que impide que un titular de dos renglones deje una palabra sola abajo, que a este cuerpo se nota mucho más que a 18. */ .afiche__titulo { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance; } .afiche__bajada { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-secondary); } /* EN UNA TARJETA ANGOSTA EL ESCUDO SE CORRE Y EL TITULAR BAJA DE CUERPO. Con 250 px de sangría fija, por debajo de unos 560 de tarjeta al titular le quedan sesenta píxeles. Va por consulta de CONTENEDOR y no por ventana, como el partido del día: lo que aprieta es la caja. */ @container news (max-width: 560px) { .afiche { padding-left: 140px; } .afiche__escudo { width: 104px; height: 104px; left: 22px; } .afiche__halo { width: 200px; height: 200px; left: -46px; } .afiche__titulo { font-size: 24px; } } /* Y LA PIZARRA BAJA DE CUERPO ANTES DE RECORTAR UN NOMBRE. Medido con los dos nombres más largos del juego —«Independiente Rivadavia» y «Gimnasia y Esgrima La Plata»—: a 28 px no entran en media tarjeta por debajo de los 800 de ancho, y lo que hacían era terminar en puntos suspensivos. Un nombre de club recortado en un afiche es lo contrario de lo que el afiche vino a hacer. Dos escalones, medidos sobre ese peor caso: a 800 el nombre entra en 22 px y a 620 en 17, con el marcador bajando con él para que la proporción entre los dos se mantenga — un 64 junto a un nombre de 17 deja de ser un tanteador y pasa a ser un número suelto. */ @container news (max-width: 800px) { .pizarra__club { font-size: var(--fs-xl); } .pizarra__n { font-size: 52px; } .pizarra__escudo { width: 180px; height: 180px; } /* El nítido baja con él: la columna es escudo, nombre y goleadores, y en una caja más angosta el nombre ya se achicó. */ .pizarra__nitido { width: 64px; height: 64px; } } @container news (max-width: 620px) { .pizarra__club { font-size: var(--fs-md); } .pizarra__n { font-size: 40px; } .pizarra__lado { padding: var(--sp-5); } .pizarra__escudo { width: 140px; height: 140px; left: -32px; } /* Y acá se va. Con el nombre en `--fs-md` y el marcador en 40, un escudo nítido de cualquier tamaño deja de acompañar y empieza a empujar: lo que la pizarra tiene que decir en esta caja es el marcador. El borrón se queda, que es el que pone el color. */ .pizarra__nitido { display: none; } .pizarra__lado--der .pizarra__escudo { left: auto; right: -32px; } /* Y LA COLUMNA DEL MEDIO DEJA DE MANDAR (21/9/2026, encontrado por `vara-textos-en-el-telefono` con WebKit a 390 px: «Racing Club» se cortaba a lo ancho). ---------------------------------------------------------------------- La retícula es `1fr auto 1fr` y ese `auto` se mide por su contenido más largo, que no es el marcador: es el renglón de contexto —«Premier League · en casa»— que pide 221 px. Medido en el teléfono: el centro se llevaba 253 de los 367 y a cada club le quedaban 82 para un nombre que necesita 93. Las dos mitades del arreglo son la misma idea. `minmax(0, auto)` le permite al centro encogerse por debajo de su contenido, y el renglón de contexto pasa a poder partirse en dos líneas — que es lo que tiene que ceder, porque es lo único de la pizarra que se lee después del marcador y de los dos nombres. */ /* EL PISO VA EN LOS LADOS Y NO EN EL MEDIO, y la primera versión lo puso al revés: `minmax(0, auto)` en el centro no cambió nada, porque `auto` como MÁXIMO sigue siendo el contenido entero y la columna se lo toma igual. Lo que hace falta es que los clubes RECLAMEN su ancho primero — 96 px, que es lo que mide «Boca Juniors» en este cuerpo— y que el resto sea del centro. */ .pizarra { grid-template-columns: minmax(116px, 1fr) minmax(0, auto) minmax(116px, 1fr); } .pizarra__donde { white-space: normal; text-wrap: balance; } /* Y EL NOMBRE SE PARTE EN DOS RENGLONES. Con 96 px de columna y el relleno del lado le quedan 63, y «Racing Club» pide 93 en este cuerpo: por más que se reparta la retícula, en un teléfono un nombre de club no entra en una línea. Partirlo es lo que hace cualquier marcador de televisión en vertical, y acá hay sitio —la pizarra mide 210 px de alto y en esta caja ya no lleva el escudo nítido—. El corte con puntos suspensivos se va con el `nowrap`: un nombre de club recortado es lo contrario de lo que esta pieza vino a hacer. */ .pizarra__club { white-space: normal; overflow: visible; text-wrap: balance; line-height: 1.05; } } /* El zócalo de la placa se fue con la placa (21/9/2026): la pizarra pone el contexto —torneo y sede— debajo del marcador, en su centro, en vez de en una banda aparte al pie. */ /* Registro normal: el ancho comprimido es voz de marcador (cifras, nombres, reloj) y esto es un titular de prosa. */ .news__title { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--text-primary); text-wrap: balance; } .news__body { max-width: 62ch; font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-body); } .news__body + .news__body { color: var(--text-muted); } /* La marca de la competición es ornamento, y el acento no decora nunca: va en tono neutro. De cal sería el bloque de acento más grande de la pantalla, y no dice absolutamente nada. CRECIÓ DE 84 A 168 Y SE SALE POR EL BORDE. En la fuente la tarjeta de noticias no es un bloque de texto: tiene un dibujo grande a la derecha que se corta contra el canto de la placa, y es lo que la hace parecer una portada en vez de un párrafo. A 84px y centrada en su columna, la nuestra era una viñeta. Al doble y sangrada contra el borde hace el mismo trabajo con la misma materia —el escudo del torneo que ya estaba— y sin inventar un arte que este juego no tiene. Va más apagada que antes justamente porque ahora es grande: al 100 % de `--ink-700` un dibujo de 168px compite con el titular, que es lo que se vino a leer. Y `overflow: hidden` en el panel es lo que la corta; sin él la tarjeta se ensanchaba y empujaba a la columna del medio. */ .news__mark { width: 168px; height: 168px; margin: calc(var(--sp-6) * -1) calc(var(--sp-7) * -1) calc(var(--sp-6) * -1) 0; /* Un paso por debajo del que tenía a 84px, no dos. A `--ink-800` —tres puntos de luminancia sobre el panel— el dibujo grande desaparecía y la tarjeta volvía a ser un párrafo; a `--ink-700`, que era el de la viñeta, 168px de escudo compiten con el titular. `--ink-750` es el punto donde se ve que hay un dibujo y no se lee antes que la noticia. */ color: var(--ink-750); flex: none; } .news__panel--diario { overflow: hidden; } @media (max-width: 1400px) { /* Con la columna del medio estrecha, el dibujo se lleva el ancho del titular: vuelve a la viñeta antes que dejar «Arranca la temporada para Platense» en cuatro renglones. */ .news__mark { width: 96px; height: 96px; margin: 0; } } /* EL PIE DE LA NOTICIA, CON MÁS PESO (21/9/2026, pedido de Alberto: «un poco más de fuerza a este breadcrumb»). Era texto apagado del mismo tamaño que todo lo demás y se perdía debajo de un afiche de 34 px. No es decoración: dice de qué sección es la nota, de qué club y cuándo — las tres preguntas que uno hace después de leer el titular. Sube de cuerpo y de tinta, y los separadores pasan a ser puntos medios en vez de espacios: lo que lo hacía ilegible no era el color, era que tres datos distintos se leían como una frase sola. */ .news__meta { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); } /* EL PRIMERO ES LA SECCIÓN, y es el dato que ordena a los otros dos: «Previa» dice qué clase de nota es, y recién después importa de qué liga y de cuándo. Va en versales con tinta plena — el resto queda como acompañamiento. */ .news__meta span:first-child { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); } .news__meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: var(--sp-5); border-radius: var(--r-pill); background: var(--ink-500); vertical-align: middle; } .news__pager { grid-column: 1 / -1; display: flex; gap: var(--sp-3); } /* Cuando el enlace ES la cabecera sube de tamaño y de peso: pasa de eco al pie de un rótulo a ser lo único que encabeza la tarjeta. Sigue sin ser magenta — es un enlace, no el nombre de una sección. */ .col__more--titular { font-size: var(--fs-sm); font-weight: 600; /* EN BLANCO Y NO EN GRIS, con el globo en color. Cuando el enlace ES la cabecera de la tarjeta deja de ser un eco al pie de un rótulo y pasa a ser lo único que la encabeza: en la fuente se lee con el mismo peso visual que un rótulo magenta, no como una nota. Leído a 1:1 del video. */ color: var(--text-primary); } @media (hover: hover) { .col__more--titular:hover { color: var(--text-primary); } } @media (hover: hover) { .col__more--titular:hover .i:first-child { color: var(--accent-strong); } } .col__more--titular .i:first-child { color: var(--accent); } /* LA BARRA DEL PAGINADOR, no el puntito. En la captura de FM26 son tramos largos que ocupan el ancho entero de la tarjeta —unos 85 px cada uno— y no una hilera de guiones cortos arrinconados a la izquierda. La diferencia no es de gusto: un tramo largo se puede pulsar sin apuntar, y sobre todo hace de REGLA — se ve de un vistazo cuántas noticias hay y en cuál estás, que es lo que un carrusel que pasa solo tiene que decir. Se reparten el ancho con `flex: 1` en vez de medir fijo, así que cuatro noticias dan cuatro tramos anchos y nueve dan nueve angostos, sin que nadie elija un número. */ /* LOS DOS COLORES SON UN PAR MEDIDO, Y POR ESO VAN LITERALES Y NO EN TOKENS. Los puntos son `role="tab"`: cada uno es un control, así que WCAG 1.4.11 le pide 3:1 contra lo que tiene detrás para que se vea DÓNDE está. Con `--ink-700` daban **1,32** sobre el panel —medido el 8/9/2026 en producción, los cinco— y el barrido de contraste los venía acusando. Un commit anterior los había declarado «punto ciego de pseudo-elementos y no un defecto»: eso vale para UNO de los cinco —la barra de la cuenta atrás, que vive en un `::after` y el arnés no ve—, y los otros cuatro eran ciertos. La cuenta tiene DOS pisos y hay que pasarlos a la vez: la pista contra el panel (que se vea el control) y el relleno contra la pista (que se vea qué nota estás leyendo). La ventana entre los dos es angosta y por eso los valores van LITERALES, que es la lección de [[anclar-escalas]]: no valen por separado, valen como PAR. Apuntándolos a un escalón de la escala, el día que alguien la recalibre el par se rompe en silencio y sin que ninguna vara lo cace hasta el próximo barrido. Escritos acá, el que los toque ve los números al lado. ══════════════════════════════════════════════════════════════════════════ Y EL DÍA LLEGÓ: EL PAR SE REELIGIÓ CON LA PALETA NUEVA (22/9/2026) ══════════════════════════════════════════════════════════════════════════ Acá decía «un color elegido ahí está roto el día que alguien toque el panel», y el que lo tocó fui yo: el panel pasó de `hsl(243 25% 11%)` —violeta-negro— a gris. Medidos los dos pares contra los dos paneles nuevos, el viejo —pista `hsl(240 12% 46%)`, relleno `hsl(280 90% 86%)`— daba: panel de «Tinta» (0 0% 9%) 3,28 contra el panel ← pasa raspando panel de la ácida (0 0% 14%) 2,84 contra el panel ← NO PASA O sea que el aviso de este comentario se cumplió tal cual, y no lo habría cazado ninguna vara hasta el próximo barrido. Y encima el relleno era `hsl(280 90% 86%)`: el único violeta que quedaba en una paleta sin matiz. El par nuevo es monocromo y tiene más margen que el que reemplaza, en los dos paneles: pista hsl(0 0% 45%) 3,78 en Tinta · 3,27 en la ácida (piso 3) relleno hsl(0 0% 86%) 3,42 contra la pista (piso 3) 12,95 y 11,21 contra el panel Se eligió el escalón MÁS ALTO que sigue pasando el segundo eje: subir la pista mejora el primer piso y empeora el segundo, así que el par se buscó barriendo los dos a la vez y no uno después del otro — que es exactamente el error que este bloque ya documentaba como «arreglar sólo la mitad del par». ══════════════════════════════════════════════════════════════════════════ */ .news__dot { --pista: hsl(0 0% 45%); --contado: hsl(0 0% 86%); flex: 1 1 0; min-width: 0; height: 4px; border-radius: var(--r-pill); background: var(--pista); transition: background var(--dur-fast) var(--ease); } /* El hover ACLARA. Era `--ink-600`, que ahora quedaría más oscuro que el reposo: un hover que apaga el control se lee como si lo deshabilitara. */ @media (hover: hover) { .news__dot:hover { background: var(--ink-400); } } /* Sin animación no hay cuenta atrás, así que el punto activo se pinta entero del color del relleno. Antes era `--accent`, 3,13 contra el panel: pasaba solo, pero contra la pista nueva daría 1,02 y el activo dejaría de distinguirse de los otros cuatro. */ .news__dot[aria-selected='true'] { background: var(--contado); } /* El punto de la nota que se está leyendo CUENTA lo que le queda. Se llena en los mismos siete segundos que tarda el carrusel en pasar, así que el cambio deja de ser una sorpresa y se ve venir; y como la rotación se detiene al acercar el mouse o al entrar con el teclado, la barra se detiene con ella y dice que el titular ya no se va a ir solo. El plazo lo escribe `inicio.js` en `--rotacion-titulares`: la cifra vive en el reloj que rota y no escrita dos veces, que es como se desincronizan una animación y su temporizador. Se anima la escala y no el ancho: lo mismo a la vista, sin pedirle al navegador que rehaga la retícula sesenta veces por segundo durante siete segundos. */ @media (prefers-reduced-motion: no-preference) { .news__dot[aria-selected='true'] { position: relative; overflow: hidden; /* Lo que TODAVÍA NO transcurrió del punto activo. Va la pista y no `--ink-700`: con el oscuro de antes, el punto que se está leyendo arrancaba cada rotación siendo el MENOS visible de los cinco. */ background: var(--pista); } .news__dot[aria-selected='true']::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--contado); transform-origin: left; animation: news-cuenta var(--rotacion-titulares, 7000ms) linear both; } .news:focus-within .news__dot[aria-selected='true']::after, .portada__apertura:focus-within .news__dot[aria-selected='true']::after { animation-play-state: paused; } @media (hover: hover) { .news:hover .news__dot[aria-selected='true']::after, .portada__apertura:hover .news__dot[aria-selected='true']::after { animation-play-state: paused; } } } @keyframes news-cuenta { from { transform: scaleX(0); } } /* -------------------------------------------------------------------------- PRÓXIMO RIVAL Y PARTIDO DE HOY -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- CUPOS INTERNACIONALES -------------------------------------------------------------------------- Seis filas de 22px, el mismo ritmo que la fila de atributo y la de clasificación. La vía va a la derecha y apagada: es el porqué, y el porqué se lee después del quién. -------------------------------------------------------------------------- */ /* La zona de un club en la tabla de la Nacional. Las dos zonas van apiladas en un solo cuadro, así que la letra tiene que viajar con el nombre — sin ella, dos primeros puestos seguidos parecen un error. */ .team__zona { flex: 0 0 auto; margin-left: var(--sp-3); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* La tarjeta del rival tiene dos pisos desde que trae forma y comparación: arriba QUIÉN es, abajo CÓMO viene. Separados por un hairline, que es lo que este sistema usa para dividir dentro de una placa. */ .rival { display: grid; gap: var(--sp-5); } .rival__top { display: flex; align-items: center; gap: var(--sp-5); } .rival__id { display: grid; gap: 1px; min-width: 0; } .rival__name { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); } .rival__note { font-size: var(--fs-xs); color: var(--text-muted); } /* LOS DOS DATOS DEL PIE ENVUELVEN ANTES DE APRETARSE. Eran dos columnas flexibles sin base, así que se repartían lo que hubiera: en el hueco de 508 de la grilla de cuatro zonas, cada una quedaba en 106 px y «Sin partidos todavía» —que pide 131— se partía en dos, igual que «Más flojo −26 %», que además dejaba el «%» separado de su número. Con una base de 130 la decisión la toma el ancho disponible y no un umbral de ventana: si las dos entran van al lado, y si no, la segunda baja. Es el mismo arreglo que `.par`, por el mismo motivo y en el mismo día. */ .rival__pie { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-9); padding-top: var(--sp-5); border-top: 1px solid var(--line-hairline); } .rival__dato { display: grid; gap: var(--sp-3); align-content: start; flex: 1 1 130px; } .rival__nada { font-size: var(--fs-xs); color: var(--text-muted); } /* El veredicto: palabra en su color y cifra al lado en gris. La cifra no se tiñe — repetir el color en las dos mitades de la misma frase no lo dice dos veces, lo dice más fuerte de lo que es. */ .rival__veredicto { font-size: var(--fs-sm); font-weight: 600; } .rival__veredicto[data-band='good'] { color: var(--good); } .rival__veredicto[data-band='ok'] { color: var(--text-secondary); } .rival__veredicto[data-band='bad'] { color: var(--danger); } .rival__veredicto em { margin-left: var(--sp-3); font-style: normal; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* LA FILA DE DOS TARJETAS. Es la única del portal, y por eso es una clase y no una regla de la columna: el resto de la columna del medio sigue siendo una pila. Las dos miden lo mismo —en la captura son 290 y 300 px— así que no hay una principal y una accesoria; son dos respuestas a la misma pregunta. ARRANCÓ CON `align-items: start` Y AHORA ESTIRA (21/9/2026). El motivo de entonces era que forzarlas a la misma altura dejaba media tarjeta vacía debajo de la de partidos. Sigue siendo cierto que sobra alto — lo que cambió es dónde queda ese sobrante. Medido a 1920 con `start`: la tarjeta de partidos medía 152 en una fila de 283, el Parte médico 98 en una de 263, y el par del club 132 y 77 en una de 297. Eso son cuatro AGUJEROS en la retícula, no cuatro tarjetas cortas: el fondo de la página aparece entre medio y la columna se lee rota. Con `stretch` el mismo sobrante se va ADENTRO de la tarjeta, enmarcado, que es lo que hace la retícula de FM: todas las cajas llegan al borde de su celda. Es la diferencia entre una caja con aire y un hueco. */ /* DOS EN FILA SÓLO SI LAS DOS ENTRAN, Y LO DECIDE EL HUECO Y NO LA VENTANA. -------------------------------------------------------------------------- Esto vivía en un `@media (max-width: 1180px)` que apilaba las tarjetas en pantallas chicas, y era correcto mientras el par ocupaba siempre la columna del medio. Con la grilla de cuatro zonas dejó de serlo: el par de La caja y el Parte médico cae en un hueco de 335 px a 1920 de ventana, o sea con la media query dormida, y ahí una tarjeta mide 162. Y 162 no alcanza. Medido: «Sueldos por semana» pide 172 y su valor 51 —223 entre los dos— así que se partían LOS CUATRO renglones del panel. Lo peor no era el rótulo largo sino la cifra: **«2,19» y «M» quedaban en renglones distintos, y un número separado de su unidad deja de ser un número.** `auto-fit` con un mínimo lo resuelve sin umbral que mantener: si las dos entran van en fila, y si no, se apilan. Da igual por qué no entran —una ventana chica, un hueco angosto o una columna nueva que a nadie se le ocurrió todavía—. EL MÍNIMO ES 230 Y ESTÁ MEDIDO, no elegido: el par del rival funciona en su hueco de 508 (dos de 244) y tiene que seguir yendo en fila, así que el mínimo no puede pasar de 244; el par de la caja está en 335 y tiene que apilarse, así que dos mínimos tienen que superar 335. Entre 168 y 244, cualquiera sirve; 230 deja aire de los dos lados. Es el mismo defecto que la leyenda de zonas y por el mismo motivo: una regla atada a la ventana cuando lo que aprieta es la caja. */ .par { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); align-items: stretch; } /* Sin borde, sin fondo propio y sin radio: la placa que envuelve esto ya es la tarjeta de «Partidos». Una caja dentro de la caja sería el segundo marco para una sola cosa. */ /* -------------------------------------------------------------------------- EL PARTIDO DEL DÍA, DIBUJADO COMO UN DUELO -------------------------------------------------------------------------- Eran dos pastillas con escudo y nombre adentro, separadas por la hora, todo en un renglón. El porqué del cambio está en `inicio.js`: en la tarjeta de 313 px del Portal el nombre salía recortado y abajo sobraban 148 px. Los dos escudos enfrentados y grandes, el nombre debajo de cada uno, la hora en el medio, el clima después y la salida al pie. Todo CENTRADO: es un cartel de partido, y un cartel no tiene margen izquierdo. El escudo manda porque es lo que se reconoce antes de leer. Y el nombre deja de pelear el ancho con el escudo: ya no comparten renglón, así que entra el corto entero —«Argentinos», «Gimnasia»— sin puntos suspensivos. */ .today { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; } .today__duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; width: 100%; } .today__lado { display: grid; justify-items: center; gap: var(--sp-2); min-width: 0; } .today__escudo { width: 52px; height: 52px; object-fit: contain; } /* EL NOMBRE NO SE PARTE Y NO SE RECORTA. Con el escudo fuera de su renglón le queda la mitad de la tarjeta entera, que alcanza para el corto de los 1.673. El `min-width: 0` de arriba es lo que le permite encogerse dentro de la columna en vez de ensancharla; el recorte es el seguro para el que no entre. */ .today__nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .today__time { display: grid; place-items: center; min-width: 62px; height: 34px; padding: 0 var(--sp-4); border: 1px solid var(--line-hairline); border-radius: var(--r-sm); background: var(--ink-950); font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); /* Va alineada con los ESCUDOS y no con el centro del bloque: el nombre cuelga debajo, y una hora centrada entre los dos renglones queda flotando a media altura de un lado y del otro. */ align-self: start; margin-top: 9px; } /* La salida, al pie y dicha. Ancho completo porque es la última cosa de la tarjeta y no compite con nada: un botón angosto centrado debajo de dos escudos grandes se lee como un pie de foto. */ .today__ir { width: 100%; justify-content: center; } /* -------------------------------------------------------------------------- CALENDARIO -------------------------------------------------------------------------- La densidad se compra con iconos: a este tamaño "Entrenamiento de resistencia" no entra, pero un cono sí, y se reconoce sin leer. El texto completo aterriza en la línea de detalle de abajo, que sí es alcanzable. -------------------------------------------------------------------------- */ /* LO QUE ACOMPAÑA AL TÍTULO DEL CALENDARIO SON DOS COSAS, y por eso viajan juntas. `.panel__head` reparte con `space-between`: con el rango y el botón sueltos, tres hijos dejan el rango flotando en el medio de la cabecera, que no es donde vive ninguna medida del juego. Envueltos, la cabecera vuelve a tener dos lados. `align-self: center` por lo mismo que `.col__tools` de la bandeja, doce secciones más abajo: `.panel__head` alinea por `baseline`, que es lo correcto para un título y su eco de texto y manda media línea abajo a cualquier botón. Y el rango conserva su `nowrap`, que lo perdió al dejar de ser hijo directo de la cabecera: «16 ago – 29 ago» partido en dos renglones no es un rango. */ .cal__jefe { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2) var(--sp-4); } .panel__head .cal__jefe { align-self: center; } .cal__jefe .label { white-space: nowrap; } /* Y AL DOBLAR SE ALINEA A LA IZQUIERDA, que es la regla que `app.css` ya tiene escrita para el rótulo suelto de cualquier cabecera: en una línea el grupo termina en el borde derecho y ahí `flex-end` no tiene margen sobre el que actuar, pero cuando la cabecera dobla —a 860 el título se queda solo arriba— dejarlo a la derecha lee torcido debajo de un título alineado a la izquierda. El punto de corte es el mismo de esa regla, a propósito: dos cabeceras que doblan a anchos distintos son dos cabeceras distintas. */ @media (max-width: 860px) { .cal__jefe { justify-content: flex-start; } } /* Y SE VE, QUE ES LO QUE NO PASABA. «Simular toda la temporada» era `action--callada action--mini`: 20 px de alto y el borde de `--line`, que contra el fondo del panel da **1,32 de contraste** — medido el 3/9/2026 en el juego cargado—. O sea que la píldora prácticamente no se dibujaba y el botón se leía como un rótulo más de la cabecera. Alberto lo pidió con una captura: «que el botón sea más grande, que se vea». Dos cosas y ninguna es el color de relleno: · **Deja de ser `--mini`**, que es el tamaño de un control DENTRO DE UNA FILA de tabla y no el de la única acción de un panel. Pasa de 208×20 a 248×34, y de `--fs-xs` a `--fs-md`. Cuesta 11 px de cabecera, que es lo caro en esta pantalla —acá el alto es el recurso escaso— y por eso se midió que la quincena y el mes siguen enteros con la ventana baja. · **El borde y el texto, firmes.** Es exactamente el estado `:hover` de `action--callada` hecho permanente: `--line-strong` (1,82 contra el panel, 40 % más que `--line`) y `--text-primary` (15,05, contra 7,27 del secundario). Lo que no se veía era la FORMA, no la letra. NO LLEVA RELLENO DE ACENTO, y no es timidez: `DESIGN.md` reserva el relleno pleno para LA acción de una pantalla, y en el portal ésa ya es CONTINUAR —el botón de acento de la barra de arriba, que acá dice «Te esperan 2 tareas» o «Empezar 2028»—. Probadas las dos en pantalla: con el acento pleno quedan dos botones de acento en la misma vista y ninguno de los dos dice ya cuál es el principal. `:not(:disabled)` porque el apagado tiene su propia piel tres reglas abajo, y un botón que no se puede tocar no puede ser el que más se ve. */ /* SE FUE EL `border-color`, Y EL MOTIVO ES QUE AHORA ESTORBA — 3/9/2026, unas horas después de escribirlo. Esta regla subía el contorno de UN botón de `--line` a `--line-strong`, o sea de 1,32 a 1,82. Ese mismo día el barrido de contorno mostró que no era un caso: `button.action` sin relleno aparecía 146 veces entre 1,22 y 1,32 en siete pantallas, y el arreglo pasó a ser un token, `--line-control`, en `.action--callada`. CON EL TOKEN PUESTO, ESTA LÍNEA DEJABA AL BOTÓN DEBAJO DEL RESTO: gana por especificidad —`.cal__jefe .action:not(:disabled)` le pasa por encima a `.action--callada`— y lo clavaba en 1,82 mientras sus hermanos subían. Un parche puntual que sobrevive al arreglo de fondo se convierte en el techo del elemento que vino a salvar, y no avisa: el botón sigue viéndose mejor que antes. El `color` se queda: eso no lo da el token del contorno, y sigue siendo cierto que la única acción de este panel merece la tinta primaria. */ .cal__jefe .action:not(:disabled) { color: var(--text-primary); } /* Apagado cuando no hay temporada que simular: sin club, o con la post-temporada ya terminada. Es la misma disciplina que el «Hoy» del mes —un control que no significa nada enseña a no leer los que sí—. */ .cal__jefe .action:disabled { color: var(--text-disabled); cursor: default; } @media (hover: hover) { .cal__jefe .action:disabled:hover { background: none; color: var(--text-disabled); } } /* ========================================================================== EL CARTEL DE «SIMULANDO» — rediseñado el 11/10/2026 -------------------------------------------------------------------------- «Más grande, visualmente cómodo y entendible, fluido y con buena transición (paso del tiempo)», pidió Alberto. Ver la cabecera de `cartelDeEspera()` en `inicio.js`: allá está el porqué de cada pieza; acá, cómo se dibuja. LA REGLA DE MOVIMIENTO DE ESTA HOJA: todo lo que se mueve mientras corre la simulación lo hace con `transform` u `opacity`, que el compositor anima aunque el hilo principal esté tomado calculando un tramo. Un `width` o un `top` se congelarían hasta que el tramo termina, que es justo el «salto» que este rediseño vino a sacar. SIN SCROLL en 375×812, 1280×720 y 1440×900: el alto de cada pieza es fijo —la ventana de resultados mide cuatro filas, la fecha un renglón de tapa—, así que el cartel no crece mientras corre ni cambia de tamaño de un tramo a otro. ========================================================================== */ .dialogo--espera.simu { --simu-fila: 4.1rem; --simu-ritmo: 420ms; /* El ancho del parte que viene después (medido: 1.068 px visibles a 1440): el pase de uno al otro es un fundido entre dos cajas del mismo tamaño, no una caja que salta. */ width: min(1160px, calc(100vw - 2 * var(--sp-6))); max-height: calc(var(--alto-ventana) - 2 * var(--sp-4)); overflow: hidden; } /* La franja de foto del modo club (`franjaConFoto()`), más baja que en los partes: acá el protagonista es la fecha, no la foto. */ .simu > .mfoto { min-height: 6.5rem; } .simu > .mfoto .dialogo__titulo { letter-spacing: -0.01em; } /* Desde dónde y hasta dónde: la pregunta «¿qué se está simulando?». */ .simu__tramo { margin: 0 0 var(--sp-5); font-size: var(--fs-md); color: var(--text-muted); } .simu__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: start; } /* -------------------------------------------------------------------------- HOY: el día como número de tapa y, al lado, el día de la semana y el mes. -------------------------------------------------------------------------- */ .simu__fecha { display: flex; align-items: center; gap: var(--sp-4); } /* EL GIRO DE CUENTA. Los dos números —el que se va y el que llega— comparten la misma celda de la retícula, así que el renglón no cambia de alto ni de ancho mientras se cruzan; `overflow: hidden` es la ventanita del contador. */ .simu__giro { display: inline-grid; overflow: hidden; min-width: 1.15em; height: 1.08em; font-size: clamp(72px, 10vw, 136px); line-height: 1.08; } .simu__num { grid-area: 1 / 1; font-weight: 900; font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-primary); text-align: center; } /* Uno DETRÁS del otro y no cruzados: el viejo se va rápido hacia arriba y el nuevo entra de abajo cuando el viejo ya casi no está. Cruzados a la par, a mitad de camino se leían los dos números encimados («6» sobre «11»). */ .simu__num--sale { animation: simu-num-sale 140ms var(--ease-salida) both; } .simu__num--entra { animation: simu-num-entra 240ms var(--ease-entrada) 60ms both; } @keyframes simu-num-entra { from { transform: translateY(55%); opacity: 0; } } @keyframes simu-num-sale { to { transform: translateY(-55%); opacity: 0; } } .simu__dicho { display: grid; gap: 2px; min-width: 0; } .simu__semana { font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-tight); color: var(--text-primary); } .simu__mes { font-size: var(--fs-lg); color: var(--text-secondary); } /* TU CLUB Y TU PUESTO. El puesto es un rodillo: todos los ordinales en columna detrás de una ventana de un renglón, y la columna se desliza hasta el tuyo. Al pasar del 13.º al 9.º se ven pasar el 12, el 11 y el 10, que es la forma de contar que no necesita un temporizador. */ .simu__club { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--bg-raised); } .simu__escudo { width: 60px; height: 60px; object-fit: contain; } .simu__club-txt { display: grid; gap: 2px; min-width: 0; } .simu__club-txt b { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simu__club-txt small { font-size: var(--fs-md); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simu__puesto { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; column-gap: var(--sp-2); } .simu__puesto[hidden] { display: none; } .simu__rodillo { display: block; overflow: hidden; height: 1.08em; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.08; font-weight: 900; font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; color: var(--text-primary); } .simu__rodillo-in { display: block; transform: translateY(calc(var(--i, 0) * -1.08em)); /* Más corto que un tramo típico (150 ms a 1 s, medido): el rodillo tiene que asentarse en el número antes de que el próximo lo vuelva a mover. */ transition: transform 420ms var(--ease-entrada); } .simu__rodillo-in i { display: block; height: 1.08em; font-style: normal; text-align: right; } .simu__flecha { min-width: 2.2em; font-size: var(--fs-md); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); } .simu__flecha[data-va='sube'] { color: var(--good); } .simu__flecha[data-va='baja'] { color: var(--danger); } .simu__pts { grid-column: 1 / -1; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-muted); } /* LA FORMA: un cuadrito por partido, en orden, que se va llenando mientras corre el año. Es la misma tira que el parte muestra completa al terminar («La forma, partido a partido»), así que el pase de uno al otro es la misma tira, ahora entera. Las copas, redondas, como allá. */ .simu__forma-caja { margin-top: var(--sp-4); } .simu__forma { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; height: calc(14px * 3 + 4px * 2); margin-top: var(--sp-2); overflow: hidden; } .simu__f { width: 14px; height: 14px; border-radius: 4px; background: var(--text-disabled); } .simu__f--g { background: var(--good); } .simu__f--p { background: var(--danger); } .simu__f--e { background: var(--text-secondary); } .simu__f--copa { border-radius: 50%; } .simu__f--entra { animation: simu-f-entra 260ms var(--ease-entrada) both; animation-delay: calc(var(--k, 0) * 50ms); } @keyframes simu-f-entra { from { opacity: 0; transform: scale(0.2); } } /* -------------------------------------------------------------------------- LOS ÚLTIMOS PARTIDOS. Una ventana de cuatro filas exactas y una lista que se corre por dentro: lo nuevo entra arriba, lo viejo baja y se pierde en el fundido del borde de abajo. -------------------------------------------------------------------------- */ .simu__rotulo { margin: 0 0 var(--sp-2); } .simu__ventana { height: calc(var(--simu-fila) * 4); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); } .simu__lista { margin: 0; padding: 0; list-style: none; } .simu__vacio { display: flex; align-items: center; height: var(--simu-fila); font-size: var(--fs-md); color: var(--text-muted); } .simu__fila { --tono: var(--text-secondary); display: grid; grid-template-columns: 5.2rem 2.5rem minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--sp-3); height: var(--simu-fila); border-bottom: 1px solid var(--line-hairline); transition: opacity 420ms var(--ease); } .simu__fila[data-tono='bueno'] { --tono: var(--good); } .simu__fila[data-tono='malo'] { --tono: var(--danger); } /* Lo de atrás se aleja: la racha se lee de arriba hacia abajo. */ .simu__fila:nth-child(2) { opacity: 0.86; } .simu__fila:nth-child(3) { opacity: 0.72; } .simu__fila:nth-child(n+4) { opacity: 0.58; } /* El MÁS NUEVO primero y sin demora: los tramos llegan cada 150 ms a 1 s, y con la demora larga el último resultado —el que importa— pasaba la mitad del tiempo invisible esperando su turno. */ .simu__fila--entra { animation: simu-fila-entra 280ms var(--ease-entrada) both; animation-delay: calc(var(--k, 0) * 50ms); } @keyframes simu-fila-entra { from { opacity: 0; transform: translateX(-14px); } } /* EL MARCADOR GRANDE, teñido con los tres tonos de resultado del juego. */ .simu__marcador { display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 4px 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tono) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 38%, transparent); color: var(--tono); font-size: clamp(24px, 2.5vw, 32px); font-weight: 900; font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; line-height: 1.1; } .simu__fila[data-tono='igual'] .simu__marcador { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); } .simu__marcador i { font-style: normal; opacity: 0.6; } .simu__marcador small { font-size: 0.5em; font-weight: 700; } /* Los escudos del cartel no navegan: un clic a mitad de la simulación no puede llevarte a otra página (todo escudo del juego lleva `data-club`). */ .simu .crest { pointer-events: none; } .simu__escudo-rival { width: 2.5rem; height: 2.5rem; object-fit: contain; } .simu__txt { display: grid; gap: 1px; min-width: 0; } .simu__rival { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simu__donde { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simu__letra { font-size: var(--fs-md); font-weight: 800; text-align: center; color: var(--tono); } /* -------------------------------------------------------------------------- EL AÑO: la franja de meses y la barra de fechas, a todo el ancho. -------------------------------------------------------------------------- */ .simu__ano { margin-top: var(--sp-5); } .simu__linea { position: relative; } .simu__meses { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-raised); } /* LA TINTA CORRE CON EL RITMO MEDIDO de los tramos y en línea recta: llega a donde iba más o menos cuando llega el tramo siguiente, y el año se ve correr parejo. Es `scaleX` y no `width` por la regla de la cabecera. */ .simu__tinta { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: color-mix(in srgb, var(--accent) 34%, transparent); transition: transform var(--simu-ritmo) linear; } .simu__mes-celda { position: relative; padding: var(--sp-3) 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-disabled); transition: color var(--dur-fast) var(--ease); } .simu__mes-celda + .simu__mes-celda { box-shadow: inset 1px 0 0 var(--line-hairline); } .simu__mes-celda[data-estado='pasado'] { color: var(--text-secondary); } .simu__mes-celda[data-estado='ahora'] { color: var(--text-primary); } @media (max-width: 560px) { .simu__mes-celda { letter-spacing: 0; } .simu__mes-celda span { display: none; } } /* Las marcas de los hitos, colgadas del borde de abajo de la franja en el punto del año donde pasaron. */ .simu__marcas { position: absolute; inset: auto 0 -5px; height: 0; pointer-events: none; } .simu__marca { --tono-marca: var(--accent); position: absolute; bottom: 0; width: 9px; height: 9px; border: 1.5px solid var(--bg-panel); border-radius: 2px; background: var(--tono-marca); transform: translateX(-50%) rotate(45deg); animation: simu-marca 420ms var(--ease-entrada) both; } .simu__marca[data-tono='titulo'] { --tono-marca: var(--warn); } .simu__marca[data-tono='mercado'] { --tono-marca: var(--text-secondary); } .simu__marca[data-tono='info'] { --tono-marca: var(--text-primary); } @keyframes simu-marca { from { transform: translateX(-50%) rotate(45deg) scale(0); } } .simu__avance { margin-top: var(--sp-4); } .simu__barra { height: 12px; border-radius: var(--r-pill); background: var(--bg-raised); overflow: hidden; } .simu__barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform var(--simu-ritmo) linear; } .simu--fin .simu__barra i { transition: transform 420ms var(--ease); } .simu__cuenta { display: flex; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--text-secondary); } .simu__falta { color: var(--text-muted); } /* -------------------------------------------------------------------------- LA CINTA DE HITOS: entra desde arriba sobre la foto, se queda y se va sola. La mueve `animate()` (`PASO_DE_LA_CINTA` en `inicio.js`) y no un temporizador: no le pide nada al hilo ocupado. -------------------------------------------------------------------------- */ .simu__hito { --tono-hito: var(--accent); position: absolute; top: var(--sp-5); left: 50%; z-index: 2; max-width: calc(100% - 2 * var(--sp-6)); margin: 0; padding: var(--sp-2) var(--sp-5); overflow: hidden; border: 1px solid color-mix(in srgb, var(--tono-hito) 60%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink-950) 88%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); color: var(--text-primary); font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -160%); } .simu__hito strong { color: var(--tono-hito); } .simu__hito[data-tono='titulo'] { --tono-hito: var(--warn); } .simu__hito[data-tono='mercado'] { --tono-hito: var(--text-secondary); } .simu__hito[data-tono='info'] { --tono-hito: var(--text-primary); } /* EL PASE AL PARTE. El cartel se va agrandándose apenas mientras se funde, y el parte entra por debajo: un fundido cruzado. Lleva la lista ENTERA de la transición —con `overlay` y `display` discretos— porque reemplaza la de `movimiento.css`, y sin esas dos el cartel desaparecería de un cuadro al otro en vez de fundirse. */ .dialogo--espera.simu.simu--sale:not([open]) { opacity: 0; transform: scale(1.025); transition: opacity 300ms var(--ease-salida), transform 340ms var(--ease-salida), overlay 340ms allow-discrete, display 340ms allow-discrete; } /* EL TELÉFONO: una sola columna, la fecha y el club arriba, los partidos debajo y el año al pie. Los mismos datos que en la computadora. */ @media (max-width: 760px) { .dialogo--espera.simu { --simu-fila: 3.3rem; width: calc(100vw - 2 * var(--sp-4)); padding: var(--sp-4); } .dialogo--espera.simu > .mfoto { min-height: 5.5rem; margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3); } .simu__tramo { margin-bottom: var(--sp-3); font-size: var(--fs-xs); } .simu__cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .simu__giro { font-size: 68px; } .simu__semana { font-size: var(--fs-xl); } .simu__mes { font-size: var(--fs-md); } .simu__club-txt b { font-size: var(--fs-lg); } .simu__club-txt small, .simu__tramo, .simu__cuenta { font-size: var(--fs-sm); } .simu__forma-caja { margin-top: var(--sp-3); } /* En el teléfono, una sola fila pegada a la derecha: lo más viejo se va por la izquierda y siempre se ve lo último. */ .simu__forma { flex-wrap: nowrap; justify-content: flex-end; height: 12px; } .simu__f { flex: none; } .simu__f { width: 12px; height: 12px; } .simu__mes-celda { font-size: var(--fs-xs); padding: var(--sp-2) 0; } .simu__rival { font-size: var(--fs-md); } .simu__donde { font-size: var(--fs-xs); } .simu__marcador { font-size: 22px; } .simu__club { margin-top: var(--sp-3); padding: var(--sp-3); gap: var(--sp-3); } .simu__escudo { width: 44px; height: 44px; } .simu__rodillo { font-size: 40px; } .simu__fila { grid-template-columns: 4rem 1.9rem minmax(0, 1fr) 1.1rem; gap: var(--sp-2); } .simu__escudo-rival { width: 1.9rem; height: 1.9rem; } .simu__ano { margin-top: var(--sp-4); } .simu__avance { margin-top: var(--sp-3); } .simu__hito { top: var(--sp-3); font-size: var(--fs-xs); } } /* SIN MOVIMIENTO: los mismos datos, en el acto. La cinta de hitos, que sin su animación quedaría invisible, se muestra quieta mientras tenga algo. */ @media (prefers-reduced-motion: reduce) { .simu, .simu * { animation: none !important; transition: none !important; } .simu__hito:not(:empty) { opacity: 1; transform: translate(-50%, 0); } } /* -------------------------------------------------------------------------- LAS PREVIAS EN LA PREGUNTA DE SIMULAR (11/10/2026). Una lista corta con el torneo, el rival y la fecha de cada una, dentro del cuerpo del diálogo. -------------------------------------------------------------------------- */ .previas { display: block; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 7%, transparent); text-align: left; } .previas__titulo, .previas__ojo { display: block; } .previas__ojo { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); } .previas__lista { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); } .previas__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-3); font-size: var(--fs-sm); } .previas__que { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-muted); } .previas__rival { color: var(--text-primary); } .previas__cuando { color: var(--text-muted); font-variant-numeric: tabular-nums; } .previas__mas { font-size: var(--fs-xs); color: var(--text-muted); } /* EL BALANCE DEL AÑO, CUANDO LA SIMULACIÓN LO TERMINA. Es el último paso de «Simular toda la temporada»: el mismo bloque que el portal dibuja en el recuadro del informe del rival, con el marco de un diálogo. Ver `cierreDeLaTemporada()` en `inicio.js`. MÁS ANCHO QUE UNA PREGUNTA (500 px) porque lo que lleva adentro no es una pregunta: la despedida de los que se retiran es un renglón de nombres con sus años, y en el peor plantel medido son cinco. Y con TOPE DE ALTO, que es lo que la caja del portal no necesita: ahí el panel crece y la tarjeta hace su barra; acá el diálogo es la ventana, y un año con cinco retiros, tres descensos y dos campeones desbordaría por abajo con los dos botones afuera. Se desplaza el cuerpo y el pie se queda. EL ALTO SE MIDE CON `--alto-ventana` Y NO CON `100dvh`, que es la regla de este proyecto y está escrita entera en `card.css`: adentro del zoom del sitio las unidades de viewport siguen midiendo la ventana del navegador y no la caja donde el juego dibuja. */ .dialogo--balance { width: min(860px, calc(100vw - 2 * var(--sp-6))); max-height: calc(var(--alto-ventana) - 2 * var(--sp-6)); } .dialogo--balance[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; } /* Ya no es un `.rival__top` —una fila de escudo y textos— sino el marco del balance grande, que trae su propia cabecera adentro. Lo único que sigue siendo suyo es rodar cuando el año no entra. */ .balance__cuerpo { overflow-y: auto; margin-bottom: var(--sp-5); } /* -------------------------------------------------------------------------- EL BALANCE GRANDE -------------------------------------------------------------------------- Tres bloques en una caja de 860: lo tuyo arriba con el escudo, los campeones del año y quién se mueve. Las dos grillas son `auto-fill` y no un número de columnas: los campeones pueden ser tres (una liga sin copas) o diez (un año con las dos de CONMEBOL, la Recopa y el Mundial), y los que se mueven, dos o seis. Una grilla de tres fija dejaría una fila coja en los dos extremos. -------------------------------------------------------------------------- */ .bal { display: grid; gap: var(--sp-5); } .bal__tu { display: flex; align-items: center; gap: var(--sp-4); } .bal__sec { display: grid; gap: var(--sp-3); } .bal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-2) var(--sp-5); } /* La fila de un club: escudo, nombre y su rótulo. El rótulo va a la derecha y apagado porque la pregunta que este bloque contesta es «quién», no «qué»: la columna que se barre con la vista es la de los escudos. */ .bal__club { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-md); } /* El nombre del club es lo que se barre con la vista en este panel, así que sube a `--fs-md` con la fila: en `--fs-sm` competía con su propio rótulo, que está un tamaño más abajo, y los dos se leían como la misma cosa. La columna mínima de la grilla subió de 240 a 270 px por lo mismo — con la letra más grande, «Independiente Rivadavia» se recortaba con puntos suspensivos. */ .bal__club-n { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bal__club-r { font-size: var(--fs-xs); color: var(--text-muted); } .bal__club[data-tono='bueno'] .bal__club-n { color: var(--good); } .bal__club[data-tono='malo'] .bal__club-n { color: var(--danger); } /* Los renglones del balance suben de `--fs-xs` a `--fs-sm`: en la cajita del portal son una nota al margen de una pantalla llena, y acá son lo único que hay que leer. El nombre grande se queda como está — ya es `--fs-lg`. */ .balance__cuerpo .rival__note { font-size: var(--fs-sm); } .balance__cuerpo .rival__id { gap: var(--sp-2); } .calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-hairline); border: 1px solid var(--line-hairline); border-radius: var(--r-sm); overflow: hidden; } /* La tira de quince días se estira hasta el pie de su tarjeta en vez de dejar un hueco muerto debajo: la cabecera de días mide lo suyo y las dos semanas se reparten lo que sobra. Son SIEMPRE dos filas —`quincena()` pide catorce días desde el lunes—, así que la retícula puede nombrarlas de a una. Estira, pero no se deja encoger. Es un ítem flexible dentro de una tarjeta que puede quedarse corta, y con `overflow: hidden` encima lo que sobraba se recortaba a media semana: el sábado con la mitad de su número y sus marcas cortadas al ras. Dos defensas, y las dos dicen lo mismo —dos filas enteras o ninguna—: el piso de la tira es su propio contenido, y el piso de cada fila es el día más cargado de esa semana y no un número fijo, porque un día con tres marcas mide más que uno con una. Que la ventana sea baja se resuelve apretando el aire (ver LA VENTANA BAJA), no partiendo un renglón. */ /* Y NO SE ESTIRA, QUE ES LO CONTRARIO DE LO QUE HACÍA. Tenía `flex: 1 1 auto` para no dejar un hueco muerto bajo la tira, y ese estirón le salía de la única tarjeta de la columna que puede achicarse por debajo de su contenido: la de titulares. O sea que el calendario se quedaba con TODO el sobrante y la noticia pagaba la cuenta — medido, y es peor cuanto más grande la pantalla: en una ventana de 1600x1000 el calendario llegaba a 333px y a la noticia le quedaban 211, con la placa cortada por la mitad. Con más pantalla, menos noticia. Ahora toma lo suyo —`min-content`, que son sus dos semanas enteras— y el sobrante queda para el que sí sabe qué hacer con él. El hueco muerto que el estirón evitaba no aparece: sin `flex-grow` la tarjeta mide lo que mide su contenido y es la tarjeta entera la que se acorta, no la tira dentro de una tarjeta alta. */ .home[data-vista='general'] .cal--quincena { flex: 0 0 auto; min-height: min-content; grid-template-rows: auto repeat(2, minmax(min-content, 1fr)); } /* Y el piso de la tira sólo vale si la tarjeta que la contiene también lo tiene: `.tarjeta--grow` trae `min-height: 0` —está pensada para las que se encogen porque adentro llevan un scroller— y con ese cero la placa se achicaba por debajo de su contenido y la leyenda terminaba dibujada fuera del borde. El calendario no tiene scroller ni nada que recortar: mide lo que mide, y el hueco que falte lo cede la tarjeta de titulares. */ .home[data-vista='general'] .tarjeta[data-panel~='calendario'] { min-height: min-content; } .cal__head { padding: var(--sp-2) var(--sp-3); background: var(--ink-900); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Es un