/* ========================================================================== El Camino DT — Carrera y Club -------------------------------------------------------------------------- Cero tokens nuevos. Las dos pantallas comparten hoja porque comparten la forma: bloques de ficha en una retícula que se acomoda al ancho, y adentro de cada uno las mismas filas de dato que usa el resto del juego. Son las dos únicas pantallas del juego que NO son la fecha que viene. Por eso respiran más que el portal: acá no se decide nada urgente, se mira hacia atrás y hacia los costados. ========================================================================== */ .camino { flex: 1 1 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-content: start; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-page); } /* El bloque es una TARJETA: superficie, borde hairline y esquina de 8px, con su rótulo magenta arriba. */ .bloque { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); background: var(--bg-panel); border: 1px solid var(--line-hairline); border-radius: var(--r-md); } /* El año por año crece hacia abajo y no compite por ancho con los otros dos. */ .bloque--ancho { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- LA PANTALLA DEL CLUB NO ES UNA RETÍCULA DE TARJETAS IGUALES -------------------------------------------------------------------------- Era `auto-fit, minmax(340px, 1fr)` —seis tarjetas equivalentes— y sus seis cosas no son equivalentes. Medido a 2000 px: las cinco de la primera fila se estiraban a 664 px de alto sin importar qué traían adentro, y «El club» gastaba 287 de esos 664. Mil ciento setenta y cinco píxeles muertos, el 34 % de la superficie de las tarjetas. Mientras tanto «La salida» caía en la fila que se reparte lo que sobra: 180 px para 272 de contenido, o sea las dos salidas del juego adentro del scroll de una tarjeta. Y era, además, exactamente lo que DESIGN.md declara rechazado: «cualquier retícula de tarjetas iguales usada como estructura de página». Los dos defectos no eran accidentes, eran su consecuencia. Ahora la forma dice lo que la pantalla dice. Una banda a lo ancho con lo que se vino a averiguar, y abajo tres columnas agrupadas por lo que se hace con ellas: **lo que se negocia con la comisión**, **lo que se firma con la marca** y **lo que sólo se lee**. La columna de la izquierda es más ancha porque lleva dos bloques con botones; la de la derecha es la más angosta porque no tiene ni uno. -------------------------------------------------------------------------- */ /* CON LA VENTANA ANGOSTA, UNA SOLA COLUMNA. Las tres de abajo se declaran dentro de la consulta de ancho y no acá, porque una retícula de tres columnas fijas no se rinde nunca: a 375 px daba tres columnas de 107 px con las tarjetas adentro. Lo que hacía el `auto-fit` que había antes —colapsar solo— hay que escribirlo cuando las columnas se nombran de a una. */ .camino--club, .camino--carrera { grid-template-columns: minmax(0, 1fr); } .camino > .bloque--banda { grid-column: 1 / -1; } /* La columna es una PILA, no una tarjeta: no tiene superficie ni borde propios —eso sería anidar tarjetas— y lo único que aporta es el mismo hueco que hay entre columnas, para que la retícula se lea igual en los dos ejes. */ .columna { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; min-height: 0; } /* -------------------------------------------------------------------------- LO QUE NO SE BAJA ES LA LISTA, NO LA PÁGINA -------------------------------------------------------------------------- Las dos pantallas son dos filas de tarjetas: la de arriba mide lo que mide su contenido —fichas y ofertas, que no crecen— y la de abajo lleva la lista que sí crece: los quince clubes de tu zona en el club, y una fila por temporada en la carrera. Esa segunda fila empujaba la página treinta centímetros hacia abajo el primer día, y una temporada más cada año. Eso es lo que hay que evitar, y es lo único: que el paso del tiempo alargue la página. La lista que crece se desplaza contra un techo dentro de su tarjeta y la página se queda quieta por más temporadas que pasen. ESTO DECÍA «NI ÉSTA NI LA DEL CLUB SE BAJAN», y de ahí salía un alto de ventana para toda la retícula con una válvula de scroll en cada tarjeta. La medición de más abajo cuenta por qué esa parte se cayó: la válvula no era la excepción, era el estado normal de siete tarjetas de nueve. Con la ventana angosta las tarjetas se apilan en tres filas o más y nada de esto rige: ahí no hay reparto de alto que hacer. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LA VÁLVULA ERA EL ESTADO NORMAL -------------------------------------------------------------------------- Lo de acá abajo decía que cada tarjeta lleva «su propia válvula por si alguna vez es ella la que no entra». Medido el 28/8/2026 sobre la carrera sembrada, en el club: SIETE DE NUEVE tarjetas abrían la válvula a la vez, en todos los tamaños de ventana, y lo escondido no bajaba nunca de mil píxeles. ventana 1280x720 1440x900 1600x1000 1920x1080 2000x1200 2560x1400 escondido 1789 1585 1521 1397 1177 1112 Y lo escondido no era el pie de una tarjeta: eran 572 px de «La caja» y 459 de «La marca», cortados a mitad de renglón y sin ninguna señal de que abajo hubiera más. En la carrera pasaba lo mismo con «La vitrina» (378) y «La pirámide» (103). La válvula no falló: la suposición que la sostenía —que las tarjetas de contenido fijo entran— es falsa y lo fue siempre. Así que el alto deja de ser un techo y pasa a ser un piso: la retícula mide LO QUE MIDE y la página se baja si hace falta, que es lo mismo que hizo `entrenamiento.css` cuando se descubrió que esa pantalla tampoco entraba. LO QUE SIGUE VALIENDO ES LA INVARIANTE DE ABAJO, y por eso la válvula no se borra: se apunta. Las listas que crecen para siempre —una fila por temporada cerrada, una por club dirigido— no pueden empujar la página un renglón más cada año, así que ésas, y sólo ésas, siguen desplazándose adentro de su tarjeta contra un techo. Una caja que se desplaza por columna, y que sea una LISTA, que es la regla del entretiempo. -------------------------------------------------------------------------- */ @media (min-width: 1068px) and (min-height: 641px) { .camino { /* Un píxel más que el chrome y la subnavegación: el borde de abajo de la barra, que es de la barra y no de la retícula. */ min-height: calc(var(--alto-ventana) - var(--chrome-h) - var(--subnav-h) - 1px); grid-template-rows: auto auto; align-content: start; } /* Las que crecen sin techo, y ninguna más. El techo se mide contra la ventana y no en píxeles: en un monitor alto la lista muestra más. EL AÑO POR AÑO YA NO ESTÁ EN ESTA LISTA, y es el resultado que buscaba su rediseño: era una tarjeta por temporada apilada hacia abajo —la lista más larga del juego, y la que más crecía— y ahora es una tira de años que se desplaza a lo ancho más la ficha de UNO, que mide lo que mide y no crece nunca. Un techo vertical ahí no tendría nada que cortar. */ .camino .bancos, .camino .zona-lista { max-height: clamp(14rem, calc(var(--alto-ventana) - 30rem), 46rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } /* En el club la primera fila es la banda —mide lo que mide— y la segunda se queda con el resto de la ventana. Adentro de la columna los bloques miden LO QUE MIDEN: `0 1 auto` los deja encogerse si la ventana no alcanza —y ahí cada uno se desplaza adentro suyo, que es la válvula de siempre— pero nunca estirarse. Estirar el último fue el primer intento y devolvía el defecto que esta pantalla vino a arreglar, sólo que más abajo: «Tu entorno» pasaba a tener 468 px de alto con 210 de contenido. El hueco que sobra es hueco de PÁGINA al pie de la columna, que no se lee como una tarjeta a medio llenar. */ /* TRES COLUMNAS HASTA 1800 Y CUATRO DE AHÍ PARA ARRIBA, y el quiebre está medido y no elegido: con tres, esta pantalla rodaba 461 px a 2000×1010 porque el contenido son ~2.460 px repartidos en tres columnas de 683 disponibles. Con cuatro entra sin rodar y sobra. LA CUARTA NO SE PONE SIEMPRE porque las columnas se angostan: a 1440 serían de unos 340 y «La marca» —tres ofertas con su letra chica— no entra. A 1800 dan 440, que es más de los 420 con los que ya vive hoy la más angosta. LOS ANCHOS SIGUEN EL CONTENIDO y no son iguales: la marca es la más ancha porque lleva tres tarjetas con texto; la caja va después porque son tres tablas; las dos de los extremos son las cortas. */ /* LA CABECERA DEL PANEL ENVUELVE EN ESTA PANTALLA, y sólo en ésta. -------------------------------------------------------------------- `app.css` le pone `nowrap` al rótulo que acompaña al título, y la razón está escrita ahí y es buena: son medidas cortas —«4-3-1-2», «10 DE 11»— y partirlas a mitad de token es un error de imprenta. Acá los rótulos NO son medidas cortas: «Dos maneras, muy distintas» mide 243 px y «Primera División · Zona A» 218. Con cuatro columnas la más angosta da 274 a 1280×800, así que el primero se iba 36 px FUERA del documento y la página rodaba a lo ancho. Medido: `scrollWidth` 1301 contra `clientWidth` 1265, y el barrido sobre todos los elementos devolvió ese `span.label` como único culpable. ENVOLVER NO ES PARTIR: el rótulo baja ENTERO a un segundo renglón, que es justo lo que el `nowrap` protege. Cuesta un renglón de alto donde no entra, y esta pantalla lo tiene —a 2000 no rueda ni un píxel—. Y SE ARREGLA ACÁ Y NO ACORTANDO EL TEXTO porque el texto no es el problema: el día que una liga se llame más largo que «Primera División · Zona A» vuelve a pasar, y nadie lo va a estar mirando. ENVOLVER SOLO NO ALCANZA, y lo dijo la medición: a 1100 la cuarta columna da 233 y la cabecera 198, así que el rótulo de 243 se seguía yendo aunque tuviera un renglón entero para él. Hace falta que además PUEDA romperse. `white-space: normal` con el `overflow-wrap` por defecto rompe SÓLO EN ESPACIOS, que es exactamente lo que la regla de `app.css` protege: una medida como «4-3-1-2» no tiene espacios y sigue siendo indivisible; una frase como «Dos maneras, muy distintas» se dobla entre palabras. La regla no era «no envolver», era «no partir un token», y esto la cumple. */ .camino--club .panel__head { flex-wrap: wrap; } .camino--club .panel__head .label { white-space: normal; } .camino--club { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); grid-template-rows: auto auto; } .camino--club .columna > .bloque { flex: 0 0 auto; } .camino--club .columna { align-content: start; } /* -------------------------------------------------------------------------- Y EN LA CARRERA, LA FILA DE ABAJO LLEVA DOS -------------------------------------------------------------------------- La regla de arriba dice «una fila de fichas y una lista que crece», y valió mientras la carrera tuviera una sola lista. Desde que los bancos se muestran son dos —dónde estuviste y qué pasó cada año— y las dos crecen. Agregar el bloque sin esto lo rompía de una manera que sólo se ve en pantalla y no leyendo el HTML: la retícula declara DOS filas, así que la tercera caía en `grid-auto-rows` contra una altura ya repartida y los bancos quedaban aplastados en 66 píxeles con 137 de contenido. Se veía una fila y media, sin ningún error. Así que se reparte a lo ancho en vez de a lo largo: dos columnas fijas, las dos fichas arriba y las dos listas abajo, cada una desplazándose dentro de la suya. La invariante que la pantalla defiende —que no se baja— sigue entera; lo que cambia es cuántas cosas entran en la fila que se desplaza. -------------------------------------------------------------------------- */ /* La carrera comparte la forma del club: banda arriba, columnas abajo. Lo que cambia es el criterio con el que se reparten, porque acá el problema es el TIEMPO: dos de las cuatro listas crecen para siempre —una fila por club dirigido y una por temporada cerrada— y dos no crecen nunca. Medido en la temporada 1: 730 px muertos, el 43 % de la superficie, con «Los bancos» gastando 284 de sus 391 en nada mientras esperaba filas que van a llegar dentro de años. Así que las dos que crecen tienen columna propia y las dos que no, comparten la angosta. */ /* Y EL REPARTO CAMBIÓ CUANDO LA VITRINA CRECIÓ. Era 1,12 / 1,12 / 0,9 con la vitrina y la pirámide compartiendo la columna angosta, y valía mientras la vitrina fueran seis casilleros. Desde que muestra también lo internacional son hasta diez en dos estantes rotulados, y esa columna pasó a desplazarse por dentro mientras las dos listas de al lado tenían medio alto de página vacío en la temporada 1. Así que la pirámide se mudó con los bancos —misma pregunta, dos tiempos: por dónde pasaste y en qué escalón estás— y la vitrina se quedó sola. Y EL REPARTO VOLVIÓ A CAMBIAR cuando el año por año dejó de ser una pila de tarjetas y pasó a ser una tira más una ficha. La del medio es la única que tiene DOS cosas adentro —la tira de años, que quiere ancho, y la ficha, que escribe rótulos de torneo y nombres de club en el mismo renglón— así que es la más ancha de las tres. Las otras dos son listas de una columna: la primera lleva dos bloques cortos y la tercera doce renglones de vitrina, y ninguna de las dos mejora con más ancho. */ .camino--carrera { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto; } .camino--carrera .columna > .bloque { flex: 0 0 auto; } .camino--carrera .columna { align-content: start; } } /* -------------------------------------------------------------------------- Y EN UNA VENTANA ANCHA, EL AÑO POR AÑO SE LLEVA DOS COLUMNAS -------------------------------------------------------------------------- Las tres tarjetas de abajo no piden lo mismo. Dos son listas de UNA columna —los clubes que dirigiste con la pirámide, y la vitrina— y a más ancho no mejoran: una fila de vitrina con 600 px de ancho es la misma fila con más aire a la derecha. La del medio es una RETÍCULA: doce campeones, dos movimientos de liga y nueve premios que se reparten en celdas, así que cada píxel de ancho le saca un renglón de alto. A 2000 px la pantalla terminaba a los 940 y sobraban 300 de página vacía mientras la tarjeta del medio se doblaba en tres columnas de celdas. Con dos columnas de retícula para ella son seis, el año entra en menos alto y el ancho que sobraba pasa a estar usado por lo único que sabe usarlo. EL UMBRAL ES 1700 Y NO 1800 —el de la pantalla del Club— porque acá la que se ensancha es UNA tarjeta y allá se agrega una cuarta columna: el riesgo de angostar a las demás es la mitad. Medido a 1700: las dos columnas de los costados quedan en 372 px, que es más que los 333 con los que la pirámide entra en un renglón. */ @media (min-width: 1700px) and (min-height: 641px) { .camino--carrera { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 1fr); } /* El año por año es el segundo hijo de la fila —banda, columna 1, columna 2, columna 3— y se lleva las dos pistas del medio. */ .camino--carrera > .columna:nth-of-type(2) { grid-column: 2 / 4; } } /* -------------------------------------------------------------------------- LA FICHA DE ARRIBA -------------------------------------------------------------------------- */ .ficha { display: flex; align-items: center; gap: var(--sp-5); } .ficha__escudo { width: 64px; height: 64px; --halo: 1.16px; object-fit: contain; flex: none; } .ficha__logo { width: 48px; height: 48px; object-fit: contain; flex: none; } .ficha__id { display: grid; gap: var(--sp-1); min-width: 0; } .ficha__nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); } .ficha__nota { font-size: var(--fs-xs); color: var(--text-muted); } /* -------------------------------------------------------------------------- LA VITRINA — UN LISTADO, NO UNA RETÍCULA DE CASILLEROS -------------------------------------------------------------------------- Eran hasta diez cuadrados con un logo, un número y un nombre, repartidos en dos retículas cuyo número de columnas se declaraba caso por caso —había cuatro reglas, una por cada tamaño posible de estante, con su cuenta escrita a mano—. Todo ese aparato existía para acomodar una pieza que sólo sabe decir DOS cosas: cómo se llama el torneo y cuántas veces lo ganaste. Las dos preguntas que un DT le hace a su vitrina son **cuándo** y **con quién**, y ninguna entraba en un cuadrado de 90 px. En una fila entran las cuatro: [logo] Campeón de Liga 6 Platense · 2027–2032 Y de paso desaparecen las cuatro reglas de retícula: una lista no tiene número de columnas que declarar, así que un torneo nuevo entra sin que nadie recalcule nada. LO QUE ESTÁ EN CERO SE MUESTRA IGUAL, apagado, que es la regla que la vitrina ya tenía: un trofeo en cero es una promesa, y una vitrina que sólo enseña lo ganado no dice qué falta. DOS ESTANTES: tu país y el continente. No se comparan y no se mezclan. -------------------------------------------------------------------------- */ .estante + .estante { margin-top: var(--sp-6); } /* El rótulo del estante se apoya en la línea de arriba de sus filas, como los `band__sub` del resto del juego: es el mismo gesto —nombrar un grupo— y no merece un vocabulario propio. */ .estante__rotulo { display: block; margin-bottom: var(--sp-3); } .palmares { display: grid; gap: 1px; } /* TRES ZONAS, LA MISMA RETÍCULA QUE `.escalon` Y `.rival-fila`: marca a la izquierda, identidad elástica, cifra a la derecha. Cero vocabulario nuevo. La cifra va en una columna de ancho FIJO y no `auto`: se compara hacia abajo —cuántas ligas contra cuántas copas— y una columna que cambia de ancho por fila obliga a leer en vez de escanear. */ .palma { display: grid; grid-template-columns: 34px minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-xs); } .palma__logo { width: 34px; height: 34px; object-fit: contain; } .palma__id { display: grid; gap: 1px; min-width: 0; } .palma__nombre { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); line-height: var(--lh-snug); } /* Con quién y en qué años. Envuelve —no se recorta con puntos suspensivos— porque es el dato que esta fila vino a traer: un palmarés que esconde la mitad de los años detrás de un «…» vuelve a ser el casillero cuadrado. */ .palma__donde { font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-snug); } /* Los años, un escalón más apagados que el club: el club es quién y el año es cuándo, y de los dos el que se busca primero es el club. */ .palma__anos { color: var(--text-muted); font-variant-numeric: tabular-nums; } .palma__n { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; } /* LO QUE FALTA ES UN RENGLÓN SOLO, y lo que ganaste son dos. No es un ahorro de alto: es la jerarquía de la tarjeta dicha con la forma. Un torneo sin ganar no tiene nada que contar —no hay año ni club— así que su segunda línea decía «Todavía no», que es lo mismo que ya dice el guion de la derecha y con más tinta. Sacarla deja la vitrina con un relieve que se lee de lejos: lo ganado sobresale y lo que falta es una lista prolija abajo. Y SE APAGA CON TOKENS Y NO CON `opacity`, que es la diferencia que se ve en los logos: `opacity: 0.4` sobre la fila entera atenúa también el PNG del torneo, que ya es un dibujo ajeno y de tinta escasa —la mitad de las marcas de este juego necesitan plata para verse sobre la pizarra—. Bajado al 40 % desaparece. Así que el texto baja de token y el logo baja lo suyo, que es bastante menos. */ .palma--vacia .palma__nombre { color: var(--text-muted); font-weight: 400; } .palma--vacia .palma__logo { opacity: 0.55; } .palma--vacia .palma__n { color: var(--text-disabled); font-size: var(--fs-sm); font-weight: 400; } /* -------------------------------------------------------------------------- LA PIRÁMIDE -------------------------------------------------------------------------- */ /* La pirámide es su propio contenedor de consulta, por lo mismo que la lista de clubes: lo que la aprieta no es la ventana sino la columna que le tocó. */ .piramide { display: grid; gap: 1px; container-type: inline-size; container-name: piramide; } /* «ESTÁS ACÁ» VA PEGADO AL NOMBRE Y NO EN UNA COLUMNA PROPIA, y las dos formas que ya se probaron cuentan por qué. La primera lo declaraba `grid-column: 1 / -1`, o sea que se llevaba una fila entera de la retícula: la fila de tu categoría medía el doble que las otras cuatro y la pirámide se leía torcida justo en el escalón que hay que mirar. La segunda le dio columna propia, reservada en las cinco filas para que la cuenta de clubes quedara alineada. Se veía bien a 1600 y **a 1280 recortaba cuatro de los cinco nombres**: los 88 px de la columna reservada salen del nombre, que a esa ventana se queda con 84 —«Primera Di…», «Torneo Fed…»—. Una columna reservada para una marca que aparece UNA vez la pagan las cinco filas, en el ancho de lo único que la fila tiene que decir. Pegado al nombre, la marca sólo le cuesta ancho a la fila que la lleva —la tuya, cuyo nombre además ya sabés— y la cuenta de clubes sigue alineada hacia abajo porque su columna nunca se movió. Medido a 1280: los cinco nombres enteros. */ /* CUATRO COLUMNAS DESDE QUE EL ESCALÓN LLEVA A ALGÚN LADO: la cuarta es el galón, y su sitio está reservado en las cinco filas aunque una no sea enlace. Con `auto`, la fila sin galón terminaría en otro sitio que las cuatro de al lado, y una columna que se mueve por fila es lo que esta retícula ya arregló una vez con «Estás acá». */ .escalon { display: grid; grid-template-columns: 34px minmax(0, 1fr) 4.25rem 12px; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--text-secondary); } /* El escalón que lleva a su categoría. El galón está apagado hasta que el puntero entra: cinco flechas encendidas en una columna de cinco renglones dibujan una segunda lista al costado de la primera. */ .escalon--va { cursor: pointer; } .escalon--va:hover { background: var(--bg-hover); color: var(--text-primary); } .escalon--va.escalon--mio:hover { background: var(--tuyo-wash); color: var(--tuyo); } .escalon--va:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } .escalon__flecha { color: var(--icon-quiet); opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .escalon--va:hover .escalon__flecha, .escalon--va:focus-visible .escalon__flecha { opacity: 1; } /* Tu escalón, con el mismo realce con el que la lista de clubes marca el banco de hoy: es la misma pregunta —¿dónde estoy en esta lista?— y no merece un recurso nuevo. */ .escalon--mio { background: var(--tuyo-wash); color: var(--tuyo); font-weight: 600; } .escalon__logo { width: 34px; height: 34px; object-fit: contain; } .escalon__id { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; } .escalon__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CON LA TARJETA ANGOSTA, LA MARCA BAJA UN RENGLÓN. «Primera División» pide 117 px y «ESTÁS ACÁ» otros 84: juntos son 207, y la fila sólo se los puede dar cuando la tarjeta mide 333 o más —el resto se lo llevan el logo, la cuenta de clubes, los huecos y el relleno—. A 1280 de ventana la columna da 314 y el nombre se cortaba en «Primera Divis…», que es justo la fila que la pirámide existe para señalar. Envolver estira UNA fila de cinco y sólo donde no entra, que es mejor que recortar el nombre o que reservarle a la marca una columna en las cinco —eso ya se probó y costaba el nombre de las OTRAS cuatro—. EL UMBRAL SE MIDE CONTRA LA TARJETA Y NO CONTRA LA VENTANA: la primera versión preguntaba `max-width: 480px` de ventana y por eso a 1280 no se activaba, que es donde el defecto estaba. */ @container piramide (max-width: 345px) { .escalon__id { flex-wrap: wrap; } } .escalon__n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; /* «30 clubes» partido en dos renglones estira la fila y descoloca la columna: la cifra y su unidad son un solo dato. */ white-space: nowrap; } /* La cuenta de clubes, con su palabra. Se probó dejar el número pelado —la palabra se repite cinco veces en cinco renglones, o sea que no distingue ninguno— y la medición dijo que no: sin la palabra, «30» y «36» son dos números de los que la pantalla no dice de qué son, y el rótulo de la tarjeta dice «5 categorías», que es otra cosa. */ .escalon__marca { flex: none; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; /* Dos palabras en versalitas con seguimiento: partidas en dos renglones estiran justo la fila que la pirámide existe para señalar. */ white-space: nowrap; /* Rótulo, no estado: es el nombre de un escalón de la pirámide y no se puede pulsar. Va en el naranja de «lo tuyo», que es el color con el que ya estaba escrito el nombre de la categoría en esa misma fila — en magenta eran dos acentos distintos diciendo la misma cosa en el mismo renglón. */ color: var(--tuyo); } /* -------------------------------------------------------------------------- TU CARRERA — LOS CLUBES QUE DIRIGISTE -------------------------------------------------------------------------- La carrera como currículum: una fila por trabajo. Cero tokens nuevos — es la misma retícula de tres zonas que ya usan `.escalon` y `.rival-fila`: marca a la izquierda, identidad elástica, cifras a la derecha. La tarjeta se llamaba «Los bancos» y pasó a llamarse «Tu carrera»; las clases siguen diciendo `banco`, y es a propósito: ahí adentro la palabra nombra el registro —`banquillos()`, un banco de suplentes— y no ambigua con nada. -------------------------------------------------------------------------- */ .bancos { display: grid; gap: var(--sp-3); /* LA CONSULTA DE ABAJO ES DE ANCHO PROPIO Y NO DE VENTANA, por lo mismo que el bloque del rival en `entretiempo.css`: lo que aprieta a esta lista no es la ventana sino la columna que le tocó. */ container-type: inline-size; container-name: bancos; } /* -------------------------------------------------------------------------- LA FILA, EN DOS RENGLONES FIJOS, Y POR QUÉ SE FUE EL UMBRAL -------------------------------------------------------------------------- Tenía SEIS columnas —escudo, identidad y cuatro cifras— que piden 436 px de ancho fijo antes de darle un solo píxel al nombre del club, y la tarjeta mide 338 en un monitor de 1280. O sea que no era una fila apretada: era una fila que se desbordaba 130 px fuera de su placa, con «Boca Juniors» apilándose una palabra por renglón. El arreglo de entonces fue una consulta de CONTENEDOR con dos maquetas y un umbral medido en 566 px: dos renglones abajo de eso, seis columnas arriba. Funcionaba, y era una maqueta de más: dos formas de la misma fila, cada una con su comportamiento, y un número que hay que volver a medir cada vez que la fila cambia de contenido. Ahora los dos renglones son la ÚNICA forma. Arriba la identidad —escudo, club y cómo terminó—; abajo, en un renglón de prosa separado por puntos, todo lo que antes eran columnas: la liga, los años y las fechas. Un renglón de prosa entra a cualquier ancho y envuelve donde no entra, así que no hay umbral que medir ni maqueta que elegir. Lo que se pierde es la comparación columna contra columna, y no se extraña: son cuatro datos que se leen POR FILA —cuánto duró este trabajo— y no hacia abajo. LOS TÍTULOS SE QUEDARON APARTE de esa prosa, y es la única excepción: es la cifra que celebra algo, la única de la fila que un DT busca de un vistazo, y metida entre puntos al lado de «181 fechas» pesaba lo mismo que ella. -------------------------------------------------------------------------- */ .banco { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--text-secondary); } .banco__escudo { width: 36px; height: 36px; --halo: 0.65px; grid-row: 1 / span 2; object-fit: contain; } .banco__id { display: grid; gap: 1px; min-width: 0; } .banco__club { font-weight: 600; color: var(--text-primary); } /* Dónde, cuándo y cuánto, en un renglón. `.banco__donde` y las tres cifras sueltas eran cuatro elementos con cuatro reglas para decir esto mismo. */ .banco__meta { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); } /* Los títulos ganados ahí, debajo de cómo terminó y alineados con él a la derecha: las dos cosas que se leen de un vistazo van juntas en la misma columna, y ninguna de las dos se mete en la prosa de la izquierda. */ .banco__titulos { grid-column: 3; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* En cero se apaga y no se pinta un guion: un guion en una columna que dice «título» se lee como «no sé», y acá se sabe — ese banco no ganó nada. */ .banco__titulos--cero { color: var(--text-disabled); font-weight: 400; } /* El de hoy, con el mismo realce con el que la pirámide marca tu escalón: es la misma pregunta —¿dónde estoy en esta lista?— y no merece un recurso nuevo. */ .banco--hoy { background: var(--bg-selected); color: var(--text-primary); } .banco__fin { grid-column: 3; grid-row: 1; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: right; white-space: nowrap; } /* Cómo terminó cada uno, y por qué se pintan distinto: es la diferencia entre una decisión tuya y una de otro, y es lo que hace que la lista cuente una historia en vez de enumerar clubes. Tres renuncias y dos despidos son dos carreras muy distintas con los mismos escudos. */ /* Y el del medio es el CALLADO de los tres, que es lo que dice que irse por decisión propia no es una mala noticia: el de hoy va en el color del rótulo y el despido en el de la advertencia, así que el que queda tiene que bajar, no quedarse donde está el resto del renglón. Decía `--text-dim`, que NO EXISTE en `tokens.css` —lo nombraba la lista de colores de DESIGN.md y nada más—. Una declaración con una variable que no está es inválida y se descarta entera, así que la renuncia se quedaba con el color heredado de `.banco`: exactamente el mismo del resto de la fila. O sea que de los tres estados, dos se distinguían y el tercero no, y no había forma de verlo sin medirlo — el resultado se leía perfecto. */ .banco__fin--hoy { color: var(--label-color); } .banco__fin--propio { color: var(--text-muted); } .banco__fin--ajeno { color: var(--danger); } /* -------------------------------------------------------------------------- Y CON LA TARJETA MUY ANGOSTA, LA PROSA SE LLEVA EL RENGLÓN ENTERO -------------------------------------------------------------------------- LA CONSULTA ES DE ANCHO PROPIO Y NO DE VENTANA, por lo mismo que el bloque del rival en `entretiempo.css`: lo que aprieta a esta lista no es la ventana sino la columna que le tocó. A 375 px de teléfono la fila tiene 311 y la columna de la derecha —«Seguís acá», «32 títulos»— se lleva 86, así que a «Primera División · 2027–2033 · 181 fechas» le quedaban 165 y se partía en tres renglones. Con la prosa en su propia fila tiene los 251 y se parte en dos. `display: contents` en el envoltorio es el mismo recurso que esta lista ya usaba para su otra maqueta: el club y la prosa dejan de ser un bloque y pasan a ser dos celdas de la retícula de la fila. */ /* Los escudos y las marcas de esta pantalla son MÁS GRANDES que en el resto del juego, y es a propósito: acá no se decide nada: se mira hacia atrás. Un escudo de 28 px es del tamaño con el que una tabla de treinta filas lo sostiene; una lista de tres clubes dirigidos y una vitrina de doce trofeos tienen sitio de sobra, y el escudo es la mitad de lo que se vino a mirar. Es la misma razón por la que el chrome le da 60 px al escudo del club. */ @container bancos (max-width: 380px) { .banco__id { display: contents; } .banco__club { grid-column: 2; grid-row: 1; } .banco__meta { grid-column: 2 / -1; grid-row: 2; } .banco__titulos { grid-column: 2 / -1; grid-row: 3; } } /* -------------------------------------------------------------------------- AÑO POR AÑO — LA TIRA Y LA FICHA -------------------------------------------------------------------------- Era una retícula de tarjetas, una por temporada, dentro de una caja que se desplazaba contra un techo. En la temporada 7 eso son siete tarjetas de las que se ven una y media; en la veinte, veinte. Y la primera temporada de una carrera —la que uno vuelve a mirar— quedaba en el fondo de la lista más larga del juego. Ahora son dos piezas. La TIRA muestra la carrera entera de un golpe, un botón por año, con la cuenta de tus títulos en cada uno: eso contesta «¿cómo me fue?» sin abrir nada. La FICHA se queda con el ancho entero de la columna para contar UN año — los campeones, quién subió, quién bajó y los premios, que antes se repartían 280 px. -------------------------------------------------------------------------- */ /* EL DESPLEGABLE DEL AÑO, con su rótulo al lado. Un control necesita decir qué elige, y «2035» solo no lo dice: el rótulo es lo que separa un desplegable de una cifra grande con una flecha al lado. LA CAJA VA EN LA CLASE DEL `` queda escondido y su clase se le COPIA al botón que lo reemplaza, así que el tamaño, el borde y el fondo los pone la pantalla una sola vez y valen para los dos. `.desp__btn` sólo aporta lo que hace falta por ser un botón —la fila, la flecha, el cursor—, y una regla puesta ahí sería un desplegable distinto del de las otras seis pantallas. Y LA CAJA HACE FALTA. Sin ella el control es un texto con un galón al lado, que es exactamente lo que ya había fallado una vez en esta pantalla: la primera versión del selector de año era una tira de botones y no se leía como algo que se pueda tocar. Superficie elevada, borde y esquina: el mismo cuerpo que el desplegable del entrenamiento. */ .ano-sel { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .ano-sel__sel { min-width: 11rem; padding: var(--sp-2) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-primary); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; } .ano-sel__sel:hover { border-color: var(--line-strong); } .ano-sel__sel:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } /* -------------------------------------------------------------------------- LA FICHA DEL AÑO -------------------------------------------------------------------------- */ /* LA FICHA NO ES UNA TARJETA, y hasta este rediseño lo era: superficie propia, borde y esquina de 8 px, dentro de `.bloque`, que ya es una tarjeta. Era una tarjeta anidada —lo que DESIGN.md rechaza y lo que este mismo archivo explica en `.columna`— y tenía su motivo mientras hubiera MUCHAS: una lista de siete años necesitaba que se viera dónde termina uno y empieza el otro. Con una sola ficha por vez ese motivo se fue y quedó sólo el costo: 26 px de relleno y borde, y un segundo marco alrededor de lo único que hay adentro del primero. Lo que separa un año del otro ahora es la tira. */ .ano { display: grid; gap: var(--sp-4); } .ano__titulo { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ano__grupo { display: grid; gap: var(--sp-3); } .ano__grupo + .ano__grupo { margin-top: var(--sp-3); } .ano__lista { display: grid; gap: var(--sp-2); } /* EL NOMBRE DEL TORNEO ES EL RÓTULO DE SU CELDA, con el mismo `.label` con el que esta tarjeta ya rotula los premios —«FIGURA DEL APERTURA»— y sus tres grupos. Sin él, doce nombres de club en una retícula obligan a contar posiciones para saber cuál ganó qué. ESTUVO UN RATO EN CAJA NORMAL Y APAGADO, y la razón era de ancho: en versalitas con seguimiento «CONFERENCE LEAGUE» mide 150 px contra 111, y con la columna del medio en un tercio de pantalla eso era la diferencia entre dos columnas de celdas y una. Se pudo volver atrás cuando la columna pasó a ocupar dos tercios en las ventanas anchas: el ancho dejó de ser lo que decidía, y decide lo que la pieza ES. */ /* EL RÓTULO A LA IZQUIERDA Y EL CAMPEÓN A LA DERECHA, con el aire en el medio. Antes el rótulo tenía un ancho fijo de 76 px que alcanzaba para «Ascienden» y no para «Proyección Apertura», y por eso el año en curso —cuyos rótulos son todos nombres de torneo— tenía su propia regla de excepción con `space-between`. Las dos formas eran la misma composición escrita dos veces; ahora es una, y no hay ancho que medir: el rótulo ocupa lo suyo, el campeón se va al otro extremo, y cuando los dos juntos no entran el renglón parte, que es lo correcto en una columna angosta. El hairline entre renglones es lo que hace que doce campeones se escaneen: sin él, rótulo y club de dos filas distintas se leen como un mismo par. */ .ano__lista li { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); } .ano__lista li:last-child { border-bottom: 0; } /* -------------------------------------------------------------------------- LAS LISTAS DE PARES SON CELDAS APILADAS, Y NO RENGLONES EN DOS COLUMNAS -------------------------------------------------------------------------- Los campeones y los premios son «uno → uno» —un torneo y su campeón, un premio y quién se lo llevó— así que caben de a varios por fila. Los ascensos no: son «uno → varios» y no entran ni en la columna entera cuando bajan tres. Por eso son dos formas y no una. EL PRIMER INTENTO FUE EL RENGLÓN DE SIEMPRE EN DOS COLUMNAS, y falló medido: a 272 px de columna, DIEZ de veinte pares no entraban en un renglón —«Copa Sudamericana» con «Vasco da Gama», «Conference League» con «Atlético de Madrid»— y se partían en dos. El resultado eran dos columnas de renglones de alto distinto con sus hairlines cruzados a distinta altura, que es exactamente el desprolijo que este rediseño vino a sacar. Y NO SE ARREGLA CON MÁS ANCHO. Para que el par más largo entre en un renglón la columna del medio necesita 680 px, y esos 680 salen de las otras dos: a 426 la pirámide ya recorta «Primera B Metropolitana». El ancho no alcanza para nadie; lo que estaba mal era la forma. Apilado, el par mide lo que mide el más largo de sus DOS mitades en vez de la suma, así que entra en 168 px en vez de 300 — y con eso caben TRES por fila en la misma columna del medio de siempre. Doce campeones pasan de doce renglones a cuatro filas. SIN HAIRLINES: lo que separaba renglones acá separa ahora columnas, y una retícula de celdas no las necesita —el aire ya agrupa cada torneo con su campeón—. Es además lo que hace que un nombre largo que se dobla no desalinee nada: sin regla horizontal no hay nada con qué desalinearse. */ .ano__lista--par { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-5) var(--sp-6); align-items: start; } /* LOS 12rem SON EL RÓTULO MÁS LARGO, MEDIDO, y no un número redondo. En versalitas con seguimiento los doce nombres de torneo van de 82 px —«APERTURA»— a 191 —«RECOPA SUDAMERICANA»—, y una celda por debajo de eso parte ESE rótulo en dos renglones y ninguno de los otros once: la retícula queda con cuatro celdas altas y ocho bajas, que es peor que una columna menos. Probado a 10,5rem: tres columnas y cuatro rótulos partidos. Con 192 la retícula da dos columnas a 1600, tres a 1700 y cuatro a 2000, y en los tres casos las celdas miden lo mismo hacia abajo. */ .ano__lista--par li { display: grid; justify-content: start; gap: 1px; padding: 0; border-bottom: 0; } .ano__lista--par .ano__quien { text-align: left; } /* Ver el comentario de `pintarAnos()`: tres cosas y un rótulo en versalitas piden más celda que dos cosas cortas. */ .ano__lista--anchas { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } /* El club, con su escudo, como una unidad: envuelto, el escudo no se queda sólo en un renglón cuando el nombre parte. */ .ano__quien { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; text-align: right; } /* EL AÑO EN CURSO SE DISTINGUE DEL QUE YA PASÓ —los cerrados son registro y éste todavía se mueve— y ahora lo dice en dos sitios y ninguno es un borde: la pastilla al lado del año en la ficha, y el rótulo «en curso» en su botón de la tira. El borde de acento se fue con la tarjeta anidada. */ .ano__curso { margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-texto); } /* Lo que todavía no tiene campeón se dice, no se deja en blanco: un renglón vacío se lee como un error de la pantalla. */ .ano__pendiente { color: var(--text-muted); font-style: italic; } .ano__nota { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); } .ano__lista .crest { width: 22px; height: 22px; --halo: 0.4px; } /* Las líneas donde aparece tu club. Un palmarés en el que no se distingue de un golpe qué te pasó a vos es una lista de otros. */ .linea--mia { color: var(--text-primary); font-weight: 600; } .vacio { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); max-width: 62ch; } /* La cifra de un premio —la nota, los goles, la edad— va apagada y al final del renglón: lo que se busca leyendo esta lista es el NOMBRE, y el número es la razón por la que está ahí. Al revés, la lista se leería como una tabla. */ .ano__premiado { display: inline-flex; align-items: baseline; gap: var(--sp-2); } .ano__cifra { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- LOS QUE VENDISTE -------------------------------------------------------------------------- Dos renglones por salida y no una tabla de cinco columnas: acá no se compara entre filas —cada venta se lee sola y no hay nada que ordenar— así que una tabla habría sido una lista con reglas. Arriba el nombre y lo que te pagaron; abajo, en Secundario, qué pasó después. El nombre lleva `min-width: 0` y su propio recorte porque un club como Independiente Rivadavia dentro de la frase de abajo empuja el renglón fuera de la columna. Ver `recortar-un-texto-pelado`. -------------------------------------------------------------------------- */ .vendidos { display: grid; gap: var(--sp-3); } .vendidos__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-2); border-bottom: 1px solid var(--line-hairline); } .vendidos__fila:last-child { border-bottom: 0; } .vendidos__quien { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: var(--fs-sm); color: var(--text-primary); } .vendidos__quien .crest { width: 18px; height: 18px; flex: none; --halo: 0.35px; } .vendidos__quien strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vendidos__monto { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); } /* El pie ocupa las dos columnas: es la frase entera y no una celda. */ .vendidos__pie { grid-column: 1 / -1; margin: 0; font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--text-muted); } .vendidos__pie [data-tono='bueno'] { color: var(--good); } .vendidos__pie strong { color: var(--text-secondary); } /* -------------------------------------------------------------------------- LA ZONA -------------------------------------------------------------------------- */ .zona-lista { display: grid; gap: 1px; } .rival-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); min-height: 26px; padding: 0 var(--sp-3); border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--text-secondary); } .rival-fila .crest { width: 22px; height: 22px; --halo: 0.4px; } .rival-fila--mio { color: var(--tuyo); font-weight: 600; } .rival-fila__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rival-fila__n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- LA SALIDA -------------------------------------------------------------------------- Abandonar la carrera borra todo y no se deshace, así que no se disfraza de enlace de navegación: va al extremo opuesto de la barra, separada de las solapas que llevan a algún lado, y se pone roja al acercarse. -------------------------------------------------------------------------- */ /* La marca de la competición en el chrome VIVE EN `app.css` (con su `flex: none`, que la copia de acá ni siquiera tenía). Acá había un `.comp-marca`/`.chrome__logo` casi idéntico que co-cargaba con el bueno en carrera.html; la contra-auditoría del 25/8 lo encontró y se borró. */ /* -------------------------------------------------------------------------- LA DIRIGENCIA -------------------------------------------------------------------------- La confianza es una barra ancha y nada más. Se pensó en un dial como el de la referencia, pero un dial pide leer un ángulo: una barra dice «vas por acá» sin traducir nada. -------------------------------------------------------------------------- */ .medidor { padding: var(--sp-2) 0; } .barra--ancha { display: block; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } /* Se llena con `transform` y no con `width`: animar el ancho obliga al navegador a rehacer el diseño en cada fotograma, y el compositor mueve una escala gratis. Es el mismo idioma que `.match__fill` en el buscador, que ya lo hacía bien — dos formas de llenar una barra en el mismo sistema eran una de más. */ .barra--ancha::before { content: ''; display: block; height: 100%; width: 100%; transform: scaleX(calc(var(--v) / 100)); transform-origin: left; border-radius: var(--r-pill); background: var(--text-muted); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .barra--ancha[data-band='good']::before { background: var(--good); } .barra--ancha[data-band='ok']::before { background: var(--warn); } .barra--ancha[data-band='bad']::before { background: var(--danger); } /* -------------------------------------------------------------------------- EL ACUERDO -------------------------------------------------------------------------- Dos opciones que se leen enteras antes de elegir: el título, lo que te da y lo que te cuesta. Es la única decisión irreversible del año fuera de un partido, así que las consecuencias van a la vista y no detrás del clic. -------------------------------------------------------------------------- */ .opciones { display: grid; gap: var(--sp-4); } .opcion { display: grid; gap: var(--sp-1); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .opcion:hover { border-color: var(--accent); background: var(--bg-hover); } .opcion__titulo { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); } /* La cifra de una opción es lo que esa opción VALE, no la opción elegida: el estado de elección lo lleva el borde de `.opcion`, que sí es violeta. */ .opcion__valor { font-size: var(--fs-sm); font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; } .opcion__nota { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } /* La opción que te saca de donde estás: renunciar. En reposo se ve igual que las demás —no grita— y sólo al acercarse toma el color de la advertencia, que es como el juego trata a «Abandonar la carrera» en el chrome. Una decisión irreversible tiene que avisar cuando la mano ya va en camino, no antes: pintada de rojo desde el principio, la ficha de la dirigencia entera se leería como una zona de peligro. */ .opcion--peligro:hover { border-color: var(--danger); } .opcion--peligro:hover .opcion__titulo { color: var(--danger); } .vacio strong { color: var(--text-secondary); } /* -------------------------------------------------------------------------- LA MARCA -------------------------------------------------------------------------- Los archivos de `assets/marcas/` son siluetas de un solo color sobre transparente: como `` serían un logo negro sobre un panel negro, o sea un cuadrado vacío. Van como MÁSCARA y el color lo pone el texto de al lado, así que la marca se lee con el mismo gris que su nombre y no compite con él. Es también lo que hace que el mismo archivo sirva a 44 px en la ficha y a 22 px dentro de un botón sin un segundo recorte. -------------------------------------------------------------------------- */ .marca-logo { width: 44px; height: 44px; flex: none; color: var(--text-primary); background-color: currentColor; -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat; } .marca-logo--sm { width: 22px; height: 22px; } /* En la mesa de ofertas, el logo y el nombre son un solo renglón. */ .opcion__titulo--marca { display: flex; align-items: center; gap: var(--sp-3); } /* -------------------------------------------------------------------------- LA BANDA -------------------------------------------------------------------------- Tres zonas en una fila: quién sos, qué dice la comisión, y las seis cifras con las que se juega el resto de la pantalla. Es una BANDA y no un titular con un número grande: acá ninguna cifra crece: crece el hueco entre ellas, que es lo que las hace escanear en línea. -------------------------------------------------------------------------- */ /* Flex y no grid de tres columnas: la banda del club lleva tres zonas —identidad, veredicto y cifras— y la de la carrera lleva dos, porque ahí no hay comisión que opine. Con la retícula fija, la de la carrera dejaba una columna vacía en el medio y el logo de la liga quedaba flotando en el centro de la pantalla sin nada alrededor. */ .banda { display: flex; align-items: center; gap: var(--sp-6) var(--sp-8); flex-wrap: wrap; } .banda > .ficha { flex: 0 1 auto; } .banda__veredicto { flex: 1 1 18rem; } .banda .attrs--fila { margin-left: auto; } .banda__veredicto { display: grid; gap: var(--sp-2); min-width: 0; } .banda__titular { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); line-height: var(--lh-snug); } /* El veredicto se tiñe con la misma banda que el medidor, y sólo él: teñir además el detalle convertiría dos renglones en un cartel de color. */ .banda__titular[data-band='ok'] { color: var(--warn); } .banda__titular[data-band='bad'] { color: var(--danger); } .banda__detalle { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-body); } .banda .medidor { padding: var(--sp-1) 0 0; } /* -------------------------------------------------------------------------- EL AVANCE DEL AÑO — la zona del medio de la banda de la carrera -------------------------------------------------------------------------- «Fechas jugadas: 1 de 32» era una fila de dato más entre cuatro, y contesta una pregunta que ninguna otra contesta: en qué punto del año estás. Leído como número hay que dividir para saber si es marzo o noviembre; leído como barra no hay nada que traducir. Es el mismo argumento por el que la confianza de la dirigencia, dos tarjetas más allá, es una barra y no un dial. Ocupa el sitio que en la banda del club ocupa el veredicto de la comisión, y con el mismo `flex`: las dos bandas quedan con la misma composición —quién sos, cómo vas, las cifras— y no hay una segunda maqueta que mantener. */ .avance { flex: 1 1 12rem; display: grid; gap: var(--sp-2); min-width: 0; max-width: 17rem; } .avance__cifras { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .avance__n { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* «de 32 fechas» acompaña al número y no compite con él: es la escala contra la que se lee, no un segundo dato. */ .avance__de { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); } /* La barra del avance no se tiñe: no hay avance bueno ni malo del calendario —la fecha 3 no es peor que la 30— así que se queda con el gris del medidor sin banda, que es lo que `.barra--ancha` ya pinta por defecto. Teñirla de acento la habría convertido en la cosa más brillante de la banda por un dato que no decide nada. */ /* Las cifras: la misma fila de dato del resto del juego, puesta en horizontal. Cero componentes nuevos — es `.stat-row`, que ya sabe poner rótulo tenue a la izquierda y valor primario a la derecha. Y DOBLA CUANDO NO ENTRA. Era una retícula de columnas `max-content`, que es una fila que no se rinde nunca: pedía su ancho entero por angosta que fuera la ventana, y como está dentro de una caja de flex —`.banda`, con la fila en `margin-left: auto`— lo que se encogía era la CAJA, dejando las cifras afuera. MEDIDO en la carrera, con las animaciones de entrada terminadas, y TODO EN PÍXELES DE HOJA —los de acá abajo, no los pintados: el sitio va con `zoom` —`--escala-sitio`—, así que un `getBoundingClientRect()` hay que dividirlo por esa escala antes de compararlo con un número escrito en un CSS—. La fila pide 1029 px: 236 «Categoría · Primera División» 233 «En la tabla anual · Sin jugar» 220 «Fechas jugadas · 0 de 32» 337 «En este banco · Desde el principio del año» y la banda mide lo que le deja la ventana. Cuánto se salía de su banda: ancho ventana 800 900 1000 1024 1068 1100 1150 1160 1174 carrera 359 267 174 152 98 69 22 13 0 club 280 187 95 73 19 8 0 0 0 EL DEFECTO NO EMPIEZA DONDE EMPIEZA EL DESBORDE DE PÁGINA, y ésa es la parte que costó ver. Abajo de 1068 lo que se salía empujaba la ventana y la ventana recortaba: eso se ve. Arriba de 1068 la regla de alto fijo de la línea 101 le pone `overflow-y: auto` a la tarjeta, y con un eje en `auto` el otro deja de ser `visible` y pasa a `auto` también. O sea que de 1068 a 1155 la tarjeta de la banda era un CARRUSEL HORIZONTAL —a 1100, 52 px de scroll propio y una barra clásica que se comía 11 px de su alto (12 en ventana de verdad; el redondeo del zoom)— y hasta 1173 la fila seguía comiéndose el relleno derecho. Ciento seis píxeles de ancho de ventana en los que un barrido de `scrollingElement` da CERO y la pantalla está rota igual: justo donde cae un portátil de 1152, o un navegador a media pantalla en un monitor de 2000. Flex con `wrap` y no una retícula que se apila abajo de cierto ancho: las cifras no son cuatro ni seis —el club lleva seis y la carrera cuatro— y lo que las tira al renglón siguiente tiene que ser lo que MIDEN, no un número escrito acá. ARRIBA DE 1174 NO SE MUEVE NADA, y está medido elemento por elemento contra la línea base: la fila sigue midiendo 1029 en la carrera y 950 en el club, las cuatro y las seis cifras conservan sus anchos exactos —236/233/220/337 y 172/165/133/179/145/151— y la banda mide 125 y 132 px de alto igual que antes. `flex: 0 1 auto` sobre contenido `max-content` da los mismos anchos que daba `grid-auto-columns: max-content`; lo único que cambia es que ahora hay un renglón siguiente al que ir. Abajo de 1174 la banda paga un renglón: crece a 151 en la carrera y a 159 en el club, y entra. */ .attrs--fila { display: flex; flex-wrap: wrap; gap: 1px; align-items: stretch; } .attrs--fila .stat-row { gap: var(--sp-5); padding-inline: var(--sp-5); } /* -------------------------------------------------------------------------- TU ENTORNO -------------------------------------------------------------------------- */ /* La fila del entorno lleva una columna más que la de la zona vieja —el puesto antes del escudo— así que la retícula se declara acá y no se hereda: sin esto el puesto se comía la celda del escudo y el nombre se iba a la derecha, que es exactamente lo que pasó al primer intento. */ .zona-lista .rival-fila { grid-template-columns: 1.75rem 22px minmax(0, 1fr) auto; } .rival-fila__puesto { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; } /* El puesto que te piden. Un hairline al pie y no un relleno: el relleno es del violeta y el violeta es de lo que se pulsa, y esta fila no se pulsa. */ .rival-fila[data-vara] { border-bottom: 1px solid var(--good); } .rival-fila[data-vara] .rival-fila__puesto { color: var(--good); } /* Cuántos clubes hay en el hueco. Va centrado y tenue porque no es una fila de club: es la distancia entre dos que sí lo son. */ .entorno__salto { padding: var(--sp-2) 0; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-disabled); text-align: center; } /* El plazo que se está por vencer. Ámbar y no arcilla: en este sistema el ámbar es «mirá esto antes de que sea un problema» —la amarilla al borde de la sanción, el contrato por vencer— y quedarse sin reunión con la comisión es exactamente eso. Arcilla sería un negativo ya consumado, y todavía no lo es: quedan fechas. Y no es violeta porque la fila no se pulsa; el botón está dos renglones más abajo y ése sí. */ .stat-row--urge dd { color: var(--warn); }