/* camino.css */ /* ========================================================================== 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` ERA `.tarjeta` CON OTRO NOMBRE, y se unificaron el 21/9/2026. -------------------------------------------------------------------------- Las dos declaraban exactamente lo mismo —flex en columna, `--sp-5` de hueco, el mismo relleno, `--bg-panel`, borde hairline y `--r-md`—: dos nombres para una sola cosa, en un proyecto donde `.tarjeta` la usan veinte pantallas y `.bloque` tres. NO SE UNIFICÓ POR PROLIJIDAD, SE UNIFICÓ PORQUE YA SE HABÍAN SEPARADO. La banda de cabecera entró el 21/9 como `.tarjeta > .panel__head:first-child`, así que `club.html`, `carrera.html` y `espera.html` —las tres que usaban `.bloque`— se quedaron sin ella y pasaron a verse de otro juego. Un duplicado no hace daño el día que nace: lo hace el día que alguien mejora uno de los dos. Este archivo ya lo sabía y lo decía más abajo: «dentro de `.bloque`, que ya es una tarjeta». De paso se fueron dos clases muertas, una de cada punta: `.bloque--anos` estaba en `carrera.html` sin una sola regla, y `.bloque--ancho` tenía regla y ningún HTML. Las dos formas de la misma deriva. */ /* -------------------------------------------------------------------------- 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 > .tarjeta--banda { grid-column: 1 / -1; } /* ══════════════════════════════════════════════════════════════════════════ EL ESCUDO ENCENDIDO DETRÁS DE LA BANDA (22/9/2026) ══════════════════════════════════════════════════════════════════════════ Es el mismo efecto que el resplandor de la barra —`chrome.css`— y el mismo que el afiche de noticias de `inicio.css`, pero acá es el que MEJOR queda de los tres, y el motivo es de tamaño: esta banda mide 143 px de alto medidos, contra los 49 de la fila de la barra. Con 143 el escudo entra casi entero y se reconoce; con 49 sólo se ve una franja y por eso allá es una mancha con el color del club —que allá está bien, porque es lo que se eligió, pero es otra cosa—. VA POR LA DERECHA Y SANGRA CONTRA EL BORDE. La izquierda de esta banda es la ficha del club —escudo, nombre, división— y el medio es el texto del puesto; el hueco libre es el final, donde hoy sólo hay aire. Puesto ahí el escudo cierra la banda en vez de competir con nada, y se corta contra el canto, que es lo que lo hace ver impreso y no pegado. CUELGA DE `.tarjeta--banda` Y NO DE `.banda`. La segunda es una clase COMPARTIDA —la usan bienvenida, vuelta, coronación, mudanza y la mesa, y otra sesión acaba de rehacerlas con `--club-lavado`—, así que tocarla desde acá le movería el piso a cinco pantallas. `.tarjeta--banda` existe sólo en `club.html` y ya vive en esta hoja. ══════════════════════════════════════════════════════════════════════════ */ .camino > .tarjeta--banda { position: relative; overflow: hidden; isolation: isolate; } .tarjeta--banda > :not(.banda-halo) { position: relative; z-index: 1; } .banda-halo { position: absolute; right: -34px; top: 50%; width: 230px; height: 230px; transform: translateY(-50%); object-fit: contain; pointer-events: none; z-index: 0; opacity: 0.30; filter: blur(3px) saturate(1.5); -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 92%); mask-image: linear-gradient(to left, #000 55%, transparent 92%); } /* Y SE ACHICA EN EL TELÉFONO, POR LO MISMO QUE EL DE LA BARRA. -------------------------------------------------------------------------- Los 230 px se eligieron contra una banda de 959 de ancho: ahí el escudo ocupa un cuarto y cierra el borde. A 375 la banda mide menos de 350 y ese mismo escudo se come el tercio derecho, encima de las cifras del puesto —la confianza, el margen, la caja—, que es justo lo que la banda vino a decir. No se vio barriendo la paleta a 1280. Apareció probándola en teléfono, igual que el de la barra y el mismo día. */ @media (max-width: 700px) { .banda-halo { right: -22px; width: 132px; height: 132px; opacity: 0.22; } } /* El que pide contraste alto no quiere una imagen debajo del texto. */ @media (prefers-contrast: more) { .banda-halo { display: none; } } /* 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; } /* 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 > .tarjeta { 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 > .tarjeta { 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; } /* `--text-muted` Y NO `--text-disabled`: acá no hay nada inhabilitado. El token de deshabilitado está EXENTO de la vara de contraste porque marca un control que no se puede usar; escrito sobre un dato vivo pierde la exención y se queda en 2,87:1 contra un piso de 4,5. Medido el 7/9/2026 con el compositor de alfa: con `--text-muted` da 5,36. Ver [[barrido-de-contraste]]. */ .palma--vacia .palma__n { color: var(--text-muted); 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; } @media (hover: hover) { .escalon--va:hover { background: var(--bg-hover); color: var(--text-primary); } } @media (hover: hover) { .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:focus-visible .escalon__flecha { opacity: 1; } @media (hover: hover) { .escalon--va:hover .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; } } /* Y EL NOMBRE TAMBIÉN ENVUELVE, por la misma razón que lo hace la marca y que este archivo ya declara tres párrafos más arriba: «envolver es mejor que recortar el nombre». Envolver la marca no alcanzaba. Medido en el teléfono sobre la pirámide argentina, que tiene los nombres más largos del juego: contenedor 260 (ventana 320) el nombre dispone de 110 y se cortan LOS CINCO escalones — «Primera División» pide 116, «Primera B Metropolitana» 167 y «Torneo Promocional Amateur» 200 contenedor 315 (ventana 375) dispone de 165 · se cortan dos contenedor 330 (ventana 390) dispone de 180 · se corta uno contenedor 370 (ventana 430) dispone de 220 · no se corta ninguno Cinco peldaños con el nombre mutilado no son una pirámide: el nombre de la categoría es lo único que distingue un escalón del otro. El umbral va en 400 del CONTENEDOR y no de la ventana, por lo mismo que el de arriba: el defecto vive en el ancho de la tarjeta, y la tarjeta no mide lo que mide la pantalla. */ @container piramide (max-width: 400px) { /* `balance` para que no quede una palabra sola: sin él «Torneo Federal A» dejaba la «A» huérfana en su propio renglón. */ .escalon__nombre { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; } } .escalon__n { font-size: var(--fs-xs); /* `--text-secondary` Y NO `--text-muted`, y el motivo es el fondo. El gris `muted` está afinado para los fondos DECLARADOS —panel, tarjeta, chrome— y para los lavados de fila; el escalón de la pirámide lleva encima el TINTE DEL CLUB, que no estaba entre los medidos. Sobre ese lavado —rgb(49,36,39) con Racing— quedaba en 4,42 contra un piso de 4,5: corto por nada, y por un fondo que cambia con cada club. Con `secondary` da 6,00. */ color: var(--text-secondary); 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; } @media (hover: hover) { .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 `.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); } @media (hover: hover) { .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. */ @media (hover: hover) { .opcion--peligro:hover { border-color: var(--danger); } } @media (hover: hover) { .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); } /* -------------------------------------------------------------------------- TEMPORADA A TEMPORADA -------------------------------------------------------------------------- Una fila por temporada, del año en curso hacia atrás. El porqué de la tabla está en `carrera.html`; acá sólo cómo se ve. LA PRIMERA CELDA ES UN BOTÓN Y LA FILA ENTERA ES EL BLANCO. El botón existe para el teclado —se tabula, se pulsa con Enter— y el manejador está sobre la tabla, así que el clic vale en cualquier parte de la fila. Dibujar el botón como botón sería mentir sobre el tamaño de lo que se puede pulsar: se dibuja como el año que es. */ .recorrido__fila { cursor: pointer; } .recorrido__fila:hover td { background: var(--bg-hover); } /* LA BARRA VA EN LA PRIMERA CELDA Y NO EN TODAS. Puesta sobre `td`, el `inset` se dibuja UNA VEZ POR CELDA: la fila elegida salía con cinco rayas violetas verticales, una en cada juntura, como si la tabla tuviera bordes de columna. Es el mismo error que un `border-left` en `td`. */ .recorrido__fila.es-elegida td { background: var(--bg-selected); } .recorrido__fila.es-elegida td:first-child { box-shadow: inset 2px 0 0 var(--accent); } /* EL NOMBRE DEL CLUB VA A LA IZQUIERDA Y SU RÓTULO TAMBIÉN. La tabla del juego centra las columnas, y eso sirve para cifras y rótulos cortos; un nombre de club mide entre seis y veinticuatro letras y centrado deja el borde izquierdo en zigzag. La celda es un `flex` —lleva el escudo al lado— y un `flex` no obedece `text-align`, así que la primera versión tenía el rótulo centrado sobre nombres pegados a la izquierda: se alinean los dos acá. VA CALIFICADO CON `.recorrido` Y CON EL ELEMENTO, y eso es peso y no adorno: `.data-table th` es una clase MÁS un elemento y `.recorrido__club` sola es una clase, así que pierde. Escrito como `.recorrido__club { }` el rótulo se quedaba centrado y yo daba el arreglo por hecho mirando el código. */ .recorrido th.recorrido__club, .recorrido td.recorrido__club { text-align: left; } .recorrido__ir { all: unset; cursor: pointer; font-variant-numeric: tabular-nums; color: inherit; } .recorrido__ir:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; } .recorrido__curso { margin-left: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* La raya de «todavía no se sabe». Es la misma que el año por año escribe en sus campeones sin decidir, y se apaga para que la columna de títulos se lea por los números y no por los huecos. */ .u-raya { color: var(--text-disabled); } /* El escudo de la fila es más chico que el de una tabla de posiciones: acá la columna del club convive con otras cuatro y el nombre es lo que se busca. */ .recorrido .tabla-marca img, .recorrido .tabla-marca svg { width: 20px; height: 20px; flex: none; } /* EN VENTANA ANGOSTA SE VAN COLUMNAS, NO SE RUEDA DE COSTADO. La tabla pide 626 px y a 1100 la tarjeta le da 535: medido, desbordaba. Rodar una tabla horizontalmente esconde columnas igual, con el agravante de que no se ve que están escondidas y hay que descubrirlo arrastrando. SE VAN EN ESTE ORDEN Y POR ESTE MOTIVO: primero la categoría, que la tarjeta «Tu carrera» de al lado ya escribe entera —«Primera División → Primera Nacional»— así que es la única repetida; después el club, que en la carrera de un solo banco es el mismo nombre catorce veces. Lo que nunca se va es el año, qué pasó y los títulos: son las tres preguntas de la tabla. VAN POR CLASE Y NO POR `nth-child`. En esta tabla el número sería correcto, pero una columna que se agregue en el medio corre los índices y la que se esconde pasa a ser otra, sin error y sin aviso. */ @media (max-width: 1240px) { .recorrido .recorrido__cat { display: none; } } @media (max-width: 620px) { .recorrido .recorrido__club { display: none; } } /* espera.css */ /* ========================================================================== El Camino DT — La espera: tu oficina -------------------------------------------------------------------------- Cero tokens nuevos. La tarjeta, el rótulo, la fila de dato y el texto vacío vienen de `app.css` y `camino.css`, que la pantalla ya carga; lo que se escribe acá es la composición de la oficina y las tres piezas que una pantalla de menú no tenía: el sobre de la bandeja, la propuesta abierta y la regla de la vara. LA COMPOSICIÓN. Tres columnas a lo ancho, en el orden en que se trabaja: lo que llegó, lo que estás leyendo, quién sos. La del medio es la única que crece, porque es donde se decide; las de los costados tienen un ancho de lectura y no se estiran para tapar hueco. Las tres llegan hasta el piso de la ventana: la pantalla es un escritorio, no cuatro tarjetas flotando sobre un vacío negro, que es lo que era. ========================================================================== */ .oficina { flex: 1 1 0; display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: 'bandeja escritorio lado'; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-page); } .oficina__bandeja { grid-area: bandeja; min-width: 0; } .oficina__escritorio { grid-area: escritorio; min-width: 0; } .oficina__lado { grid-area: lado; display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; } /* El diario se queda con el alto que sobra: la columna termina en el piso igual que las otras dos. */ .oficina__lado > .tarjeta:last-child { flex: 1 0 auto; } /* El modo en que la oficina mide la ventana —columnas que se desplazan por dentro— va AL FINAL de la hoja (§5): tiene que ganarle por orden a las reglas de cada pieza, que tienen la misma especificidad. */ /* Por debajo de 1280 no entran tres columnas de lectura: el legajo y el diario bajan debajo de la bandeja y el escritorio ocupa el alto de las dos. */ @media (max-width: 1279px) { .oficina { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'bandeja escritorio' 'lado escritorio'; } } /* En el teléfono, una columna en el orden de la tarea: qué llegó, qué dice, quién sos. Tocar un sobre baja hasta el escritorio (`abrirPropuesta()`). */ @media (max-width: 900px) { .oficina { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'bandeja' 'escritorio' 'lado'; padding: var(--sp-4); gap: var(--sp-4); } .oficina__lado { gap: var(--sp-4); } /* Al tocar un sobre la página baja hasta el escritorio, y el chrome del teléfono —dos pisos, pegado arriba— le tapaba el encabezado. */ .oficina__escritorio { scroll-margin-top: calc(var(--chrome-h) * 2 + var(--sp-4)); } } /* -------------------------------------------------------------------------- EL ESCUDO DEL QUE TE ECHÓ, APAGADO -------------------------------------------------------------------------- El chrome de las otras pantallas lleva el escudo del club que dirigís. Acá no dirigís ninguno, y dejarlo a plena tinta sería seguir vistiendo al que te echó. Se apaga: sigue ahí —es de dónde venís— pero deja de ser tuyo. Lo mismo en el legajo. -------------------------------------------------------------------------- */ /* El gris compone con el halo del rescate y no lo pisa: `filter` no se suma, y acá el escudo apagado puede ser uno de los que no se ven sobre la pizarra. */ .crest--apagado { opacity: 0.38; filter: var(--halo-filtro, ) grayscale(1); } /* -------------------------------------------------------------------------- 1. LA BANDEJA: UN SOBRE POR PROPUESTA -------------------------------------------------------------------------- Escudo a la izquierda, nivel al extremo derecho —donde el DT ya lo busca en la carta del selector y en cada fila del plantel— y el vencimiento al pie. El abierto lleva el borde y el lavado de lo elegido, que es lo que el sistema usa para «esto es lo que estás mirando». -------------------------------------------------------------------------- */ .bandeja { display: grid; gap: var(--sp-3); } .sobre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-4); row-gap: 2px; width: 100%; padding: var(--sp-4) 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); } @media (hover: hover) { .sobre:hover { border-color: var(--line-strong); background: var(--bg-hover); } } .sobre[aria-pressed='true'] { border-color: var(--accent); background: var(--bg-selected); } .sobre__escudo { grid-row: 1 / span 3; width: 36px; height: 36px; object-fit: contain; } .sobre__club { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); } .sobre__nivel { grid-column: 3; grid-row: 1 / span 2; font-size: var(--fs-lg); } .sobre__liga { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-muted); } .sobre__pie { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); } .sobre__vence { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* La última fecha es la única vez que el sobre usa color, y lo usa para decir algo que cambia la decisión. */ .sobre__vence--ya { color: var(--warn); } .sobre__nueva { padding: 1px var(--sp-3); border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-texto); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Las vencidas se archivan plegadas: siguen contando quién te llamó, pero no compiten con lo que todavía se puede firmar. */ .sobre--vencida { opacity: 0.62; } .sobre--vencida[aria-pressed='true'] { opacity: 1; } .bandeja__archivo { margin-top: var(--sp-5); } .bandeja__archivo > summary { padding: var(--sp-2) 0; cursor: pointer; list-style-position: inside; } .bandeja__archivo[open] > summary { margin-bottom: var(--sp-3); } /* -------------------------------------------------------------------------- 2. EL ESCRITORIO Y LA PROPUESTA ABIERTA -------------------------------------------------------------------------- La tarjeta es el escritorio —un fondo más hondo que el panel— y la propuesta es el folio apoyado encima, con ancho de lectura y centrado. Estirarla hasta los bordes en una ventana de 2000 haría renglones de doscientos caracteres: el aire de los costados es el escritorio, no hueco. De alto, cuando la oficina mide la ventana, llega hasta el piso con la firma abajo (ver el bloque de arriba). -------------------------------------------------------------------------- */ /* Grilla y no flex: la fila única se estira hasta el alto de la mesa cuando la propuesta es corta y crece con ella cuando es larga, así el folio llega al piso sin que su fondo se corte cuando hay que desplazarlo. */ .oficina__lectura { flex: 1 0 auto; display: grid; justify-items: center; align-items: start; padding: var(--sp-6); border-radius: var(--r-md); background: var(--ink-950); } @media (max-width: 900px) { .oficina__lectura { padding: 0; background: none; } } .propuesta { width: min(100%, 860px); display: flex; flex-direction: column; gap: var(--sp-7); padding: var(--sp-7) var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raised); } @media (max-width: 900px) { .propuesta { padding: var(--sp-5); gap: var(--sp-6); } } /* El membrete: escudo grande, quién es y en qué liga juega. */ .propuesta__membrete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); } .propuesta__escudo { width: 72px; height: 72px; object-fit: contain; } .propuesta__quien { display: grid; gap: var(--sp-1); min-width: 0; } .propuesta__club { margin: 0; font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); } .propuesta__oficial { font-size: var(--fs-sm); color: var(--text-secondary); } .propuesta__liga { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); text-align: right; } .propuesta__logo { width: 40px; height: 40px; object-fit: contain; } .propuesta__pais { font-weight: 400; color: var(--text-muted); } @media (max-width: 640px) { .propuesta__membrete { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); } .propuesta__escudo { width: 56px; height: 56px; } .propuesta__club { font-size: var(--fs-xl); } .propuesta__liga { grid-column: 1 / -1; text-align: left; } .propuesta__logo { width: 28px; height: 28px; } } /* La nota de la comisión. Una cita, con la raya de quien firma. */ .propuesta__carta { margin: 0; padding-left: var(--sp-6); border-left: 2px solid var(--line-strong); } .propuesta__carta p { margin: 0; max-width: 68ch; font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-secondary); } .propuesta__carta footer { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); } .propuesta__carta footer::before { content: '— '; } /* El análisis: cuatro cifras en fila. La cifra arriba y el rótulo debajo, por la Regla de la Etiqueta (`app.css`, «el bloque de cifra»): se recorren los números y el rótulo se lee cuando uno sorprende. */ /* Cuatro o dos por fila, nunca tres: con `auto-fit` a 1024 quedaban tres y una huérfana abajo, que se lee como un bloque roto. Lo decide el ancho del FOLIO y no el de la ventana, porque el folio cambia de columna según la composición. */ .propuesta { container-type: inline-size; } .propuesta__analisis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; } @container (min-width: 720px) { .propuesta__analisis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container (max-width: 260px) { .propuesta__analisis { grid-template-columns: minmax(0, 1fr); } } .analisis { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-panel); } .analisis > dt { order: 2; } .analisis > .analisis__cifra { order: 1; } .analisis > .analisis__nota { order: 3; } .analisis > dd { margin: 0; } .analisis__cifra { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; color: var(--text-primary); font-variant-numeric: tabular-nums; } .analisis__cifra .attr__value { font-size: inherit; font-weight: inherit; } .analisis__de { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); } /* Un nombre de estadio no es una cifra: va un escalón más chico para que «Estadio Centenario Ciudad de Quilmes» entre en dos renglones y no en cuatro. */ .analisis__cifra--texto { font-size: var(--fs-md); } .analisis__cifra--bueno { color: var(--good); } .analisis__cifra--ojo { color: var(--warn); } .analisis__cifra--malo { color: var(--danger); } .analisis__nota { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-muted); } .analisis__nota--bueno { color: var(--good); } /* Lo que heredás: las seis mejores fichas del plantel, en dos renglones de tres. */ .propuesta__plantel { display: grid; gap: var(--sp-4); } .propuesta__sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-3); } .propuesta__sub h4 { margin: 0; } .figuras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-2) var(--sp-6); margin: 0; padding: 0; list-style: none; } .figura { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); } .figura__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .figura__pos { grid-row: 2; font-size: var(--fs-xs); color: var(--text-muted); } .figura .attr__value { grid-column: 2; grid-row: 1 / span 2; } /* El pie: cuánto queda para contestar y la firma. */ .propuesta__pie { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .propuesta__plazo { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .propuesta__plazo--ya { color: var(--warn); } .propuesta__pips { display: inline-flex; gap: 3px; } .propuesta__pip { width: 14px; height: 6px; border-radius: 2px; background: var(--line); } .propuesta__pip--viva { background: var(--text-secondary); } .propuesta__plazo--ya .propuesta__pip--viva { background: var(--warn); } .propuesta--vencida .propuesta__carta p { color: var(--text-muted); } @media (max-width: 640px) { .propuesta__pie .action { width: 100%; justify-content: center; } } /* El escritorio sin nada encima. */ .escritorio-vacio { align-self: center; display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-9) var(--sp-5); text-align: center; } .escritorio-vacio__icono { width: 32px; height: 32px; color: var(--text-muted); } .escritorio-vacio__titulo { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); } /* -------------------------------------------------------------------------- 3. EL LEGAJO -------------------------------------------------------------------------- */ .legajo { display: flex; flex-direction: column; gap: var(--sp-5); flex: 1 0 auto; } .legajo__salida { display: flex; align-items: center; gap: var(--sp-5); } .legajo__escudo { width: 40px; height: 40px; object-fit: contain; flex: none; } .legajo__motivo { display: block; font-size: var(--fs-md); color: var(--text-primary); } .legajo__donde { font-size: var(--fs-xs); color: var(--text-muted); } /* La vara, con la regla de veinte casillas. Lo lleno es lo que te queda la fecha que viene; la casilla en ámbar es lo que te cuesta no firmar hoy. */ .vara { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); } .vara__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); } .vara__cifra { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; } .vara__cifra .attr__value { font-size: var(--fs-xl); font-weight: 700; } .vara__regla { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; } .vara__casilla { height: 8px; border-radius: 2px; background: var(--line); } .vara__casilla--llena { background: var(--text-secondary); } .vara__casilla--se-va { background: var(--warn); } .vara__nota { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-muted); } /* Borrar la partida: la salida existe y se encuentra, pero no es un mueble de la oficina. Chica, al pie, y sólo toma el color del peligro cuando la mano ya va en camino — como «Renunciar» en la pantalla del club. */ .legajo__borrar { align-self: flex-start; margin-top: auto; padding: var(--sp-2) 0; border: 0; background: none; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } @media (hover: hover) { .legajo__borrar:hover { color: var(--danger); } } /* -------------------------------------------------------------------------- 4. EL DIARIO -------------------------------------------------------------------------- */ .diario__titular { margin: 0; font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; color: var(--text-primary); } .diario__secciones { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); } .diario__seccion { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-950); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .diario__seccion strong { font-size: var(--fs-sm); color: var(--text-primary); } .diario__seccion span { font-size: var(--fs-xs); color: var(--text-muted); } @media (hover: hover) { .diario__seccion:hover { border-color: var(--accent); background: var(--bg-hover); } } /* -------------------------------------------------------------------------- 5. LA OFICINA MIDE LA VENTANA -------------------------------------------------------------------------- Al final a propósito: pisa `flex` y `align-items` de las piezas, y una regla de reparto escrita antes que la base pierde contra ella sin avisar. -------------------------------------------------------------------------- */ /* EN UNA VENTANA ANCHA, LA OFICINA MIDE LA VENTANA y cada columna se desplaza por su cuenta, como un cliente de correo. Sin esto, abrir las vencidas estiraba la página entera y la firma de la propuesta se iba debajo del pliegue: lo que se lee empujaba lo que se decide. Sólo con alto suficiente —en una ventana petisa vuelve a desplazarse la página, que es lo que se espera— y con `--alto-ventana`, que sabe del zoom del sitio. */ @media (min-width: 1280px) and (min-height: 620px) { body:has(> .oficina) { display: flex; flex-direction: column; height: var(--alto-ventana); /* El mismo marco que `plantel.css`: cada columna se desplaza adentro, y sin el recorte el redondeo del zoom dejaba 5 px de página sobrantes (medido a 2000×890: 895 contra 890). */ overflow: hidden; } .oficina { min-height: 0; grid-template-rows: minmax(0, 1fr); } .oficina__bandeja, .oficina__escritorio { min-height: 0; } .oficina__bandeja > [data-f='bandeja'], .oficina__lectura { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* Sólo acá el folio llega al piso: la mesa mide la ventana. Con la página desplazándose, la mesa mide lo que mida la bandeja de al lado, y estirar el folio hasta ahí dejaba la firma a dos mil píxeles del membrete. */ .oficina__lectura { align-items: stretch; } .oficina__lado { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } } /* LA OFICINA DE NOCHE, CON FOTO (15/10/2026, «sumá más imágenes de fondo»): la ciudad por la ventana, la lámpara, la lluvia. La foto la elige `puerta.js` por la fecha (`--foto-de-seccion`) y va muy velada; las tarjetas quedan casi opacas, así que nunca hay foto detrás de un texto. */ html[data-fondo='espera'] body { background: linear-gradient(180deg, rgb(10 12 16 / 0.1) 0%, rgb(10 12 16 / 0.26) 50%, rgb(10 12 16 / 0.42) 100%), var(--foto-de-seccion) center 35% / cover fixed, var(--bg-page, #0e1014); } html[data-fondo='espera'] .oficina { background: transparent; } html[data-fondo='espera'] .oficina .tarjeta { background-color: rgb(24 27 33 / 0.92); } @media (min-width: 761px) { html[data-fondo='espera'] .oficina .tarjeta { background-color: rgb(22 25 31 / 0.77); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } } @media (max-width: 760px) { html[data-fondo='espera'] body { background-attachment: scroll, scroll, scroll; } } /* firma-espera.css */ /* ========================================================================== El Camino DT — LA FIRMA CON LA COMISIÓN (espera.html) -------------------------------------------------------------------------- El acto de `scripts/firma-espera.js`: la sala a la izquierda, el contrato en papel a la derecha y, al firmar, el presidente, el sello, el flash y tu primer día. Prefijo `acta` (`.cfed` es la carta del club en el correo y `.acto-firma` la cortina de la carrera nueva; éste toma de los dos). SIN SCROLL a 375×812 y a 1440×900: el papel achica la letra con el alto de la ventana y, en el teléfono, la sala se reduce a una cabecera. Los botones van fuera del papel, siempre a la vista. ========================================================================== */ html.con-acta, html.con-acta body { overflow: hidden; } .acta { --papel: #fffdf8; --tinta: #15130f; --azul: #1d3f8f; --sello: rgb(190 24 34 / 0.82); /* La letra del papel, atada al alto de la ventana: el contrato entero tiene que entrar sin barra. */ --letra: clamp(12px, 1.55vh, 14.5px); position: fixed; inset: 0; z-index: 120; display: grid; color: var(--text-primary); background: var(--ink-950); opacity: 0; transition: opacity 240ms var(--ease, ease); } .acta.es-visible { opacity: 1; } .acta__fondo { position: absolute; inset: 0; background: url('/assets/fotos/1600/modal-firma-2.webp') center / cover; } /* LA SALA QUE ROTA (16/10/2026): diez fotos que se funden, debajo del velo (`::after`). Las pone `vestirElActaConFotos()`. */ .acta__foto { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transform: scale(1.04); transition: opacity 1400ms ease; } .acta__foto--on { opacity: 1; animation: acta-acerca 12s linear both; } @keyframes acta-acerca { from { transform: scale(1.04); } to { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .acta__foto--on { animation: none; } } .acta__fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 640px at 22% 30%, color-mix(in srgb, var(--club-color) 42%, transparent), transparent 70%), linear-gradient(180deg, rgb(0 0 0 / 0.74), rgb(0 0 0 / 0.9)); } .acta__cerrar { position: absolute; top: 16px; right: 18px; z-index: 3; min-height: 40px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--r-pill, 999px); background: rgb(0 0 0 / 0.35); color: var(--text-primary); font: 700 14px/1 var(--font-ui); cursor: pointer; } .acta__cerrar:hover { background: rgb(255 255 255 / 0.12); } /* ---------- LA MESA: sala | contrato ---------- */ .acta__mesa { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 660px); gap: clamp(28px, 5vw, 72px); justify-content: center; align-items: center; padding: 56px 32px 24px; min-height: 0; } .acta__sala { display: grid; gap: 22px; align-content: center; } .acta__escudo { width: clamp(96px, 16vh, 150px); height: clamp(96px, 16vh, 150px); object-fit: contain; filter: drop-shadow(0 12px 32px rgb(0 0 0 / 0.5)); } .acta__rotulo, .acta__acto-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .acta__titulo { margin: 8px 0 0; font-size: clamp(32px, 3.4vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .acta__liga { margin-top: 8px; font-size: 15px; color: var(--text-secondary); } .acta__voz { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; color: #fff; } .acta__presi { display: flex; align-items: center; gap: 14px; } .acta__cara { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.1); outline: 2px solid var(--club-color); font-weight: 800; font-size: 18px; } .acta__presi b { display: block; font-size: 17px; } .acta__presi small { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .acta__lado { display: grid; gap: 14px; min-height: 0; } /* ---------- EL PAPEL (la carta del club, `.cfed`) ---------- */ .acta__papel { position: relative; padding: 22px 28px 16px; border-radius: 6px; background: var(--papel); color: var(--tinta); font-family: Georgia, 'Times New Roman', serif; font-size: var(--letra); line-height: 1.42; box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 18px 50px rgb(0 0 0 / 0.55); } .acta__membrete { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #24211c; } .acta__membrete-escudo { width: 44px; height: 44px; object-fit: contain; flex: none; } .acta__membrete b { display: block; font-size: 1.15em; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; } .acta__membrete small { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4a4336; } .acta__lugar { margin: 0 0 0 auto; text-align: right; font-style: italic; font-size: 0.92em; color: #4a4336; } .acta__nombre-del-papel { margin: 2px 0 8px; text-align: center; font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .acta__intro { margin: 0 0 8px; } .acta__clausulas { display: grid; gap: 0.45em; margin: 0; padding: 0; list-style: none; counter-reset: clausula; } .acta__clausulas li { display: grid; grid-template-columns: 1.7em 1fr; counter-increment: clausula; } .acta__clausulas li::before { content: counter(clausula) '.'; font-weight: 700; } .acta__t { font-family: var(--font-ui); font-size: 0.78em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- LAS FIRMAS ---------- */ .acta__firmas { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: end; margin-top: 12px; } .acta__zona { position: relative; height: clamp(58px, 9vh, 84px); } .acta__firma--dt .acta__zona { border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, rgb(29 63 143 / 0.06) 0 1px, transparent 1px 10px); outline: 1.5px dashed rgb(29 63 143 / 0.45); outline-offset: -1px; } .acta--firmada .acta__firma--dt .acta__zona { background: none; outline-color: transparent; } .acta__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } .acta__pista { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--azul); pointer-events: none; } .acta__pista::before { content: '✕ '; font-size: 15px; } .acta__borrar { position: absolute; top: 4px; right: 4px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: rgb(29 63 143 / 0.08); color: var(--azul); font: 700 12px/1 var(--font-ui); cursor: pointer; } .acta--presi .acta__borrar { display: none; } .acta__linea { padding-top: 4px; border-top: 1.5px solid #24211c; font-size: 0.92em; line-height: 1.25; } .acta__linea b { display: block; } .acta__linea small { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4a4336; } /* La letra de la rúbrica del presidente en el correo (`.cfed__rubrica`). */ .acta__rubrica { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; font-family: 'Snell Roundhand', 'Brush Script MT', 'Segoe Script', cursive; font-weight: 700; font-size: clamp(26px, 4.2vh, 38px); line-height: 1.1; white-space: nowrap; color: var(--azul); transform: rotate(-5deg); transform-origin: left bottom; pointer-events: none; } .acta__rubrica--presi { clip-path: inset(0 100% 0 0); } .acta--presi .acta__rubrica--presi { animation: acta-escribe 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } .acta--escribe .acta__rubrica--dt { animation: acta-escribe 760ms cubic-bezier(0.65, 0, 0.35, 1) both; } @keyframes acta-escribe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .acta__sello { position: absolute; left: 50%; bottom: 18px; width: 112px; height: 112px; margin-left: -56px; display: grid; place-items: center; border: 3px double var(--sello); border-radius: 50%; opacity: 0; transform: rotate(-14deg) scale(1.7); pointer-events: none; } .acta__sello-escudo { width: 50px; height: 50px; object-fit: contain; opacity: 0.5; filter: grayscale(1) sepia(1) saturate(7) hue-rotate(-30deg); } .acta__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; } .acta__sello text { font-family: var(--font-ui); font-size: 10px; font-weight: 800; fill: var(--sello); } .acta--sello .acta__sello { animation: acta-sella 340ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; } @keyframes acta-sella { 0% { opacity: 0; transform: rotate(-14deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-14deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } } /* ---------- LOS NOMBRES DE CLUB NO SE PARTEN ---------- Los tres títulos van en dos pisos: la frase chica arriba (`.acta__volanta`) y el club grande abajo (`.acta__club`), en un bloque que no se corta y que achica la letra antes de partirse (`ajustarNombresDelActa()`); si ni así entra, `acta--parte` lo deja partir, balanceado. En los renglones chicos cada dato es un bloque (`.acta__dato`) y el corte va entre datos. */ .acta__volanta { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: var(--text-secondary); } /* Ojo: `text-wrap` es la mitad de `white-space` y la pisa. Por eso el balance va recién cuando se deja partir, no junto al `nowrap`. */ .acta__club { display: block; max-width: 100%; min-width: 0; white-space: nowrap; } .acta__club.acta--parte { white-space: normal; text-wrap: balance; } .acta__liga, .acta__rotulo, .acta__membrete b, .acta__presi small, .acta__linea small, .acta__dia-bajada { text-wrap: balance; } .acta__nombre-club, .acta__dato { white-space: nowrap; text-wrap-mode: nowrap; } .acta--parte .acta__nombre-club, .acta--parte .acta__dato { white-space: normal; } .acta__membrete-nombre, .acta__quien, .acta__presi > div, .acta__linea { min-width: 0; } .acta__presi small, .acta__linea small { display: block; max-width: 100%; } .acta__acto-centro, .acta__dia { max-width: 100%; min-width: 0; } .acta__acto-club, .acta__dia-titulo { display: grid; justify-items: center; gap: 8px; max-width: min(92vw, 1100px); min-width: 0; margin: 0; } .acta__acto-club .acta__club { font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.01em; line-height: 1.05; } .acta__dia-titulo .acta__volanta { margin: 0; font-size: clamp(18px, 2vw, 26px); } /* ---------- LOS BOTONES ---------- */ .acta__botones { display: flex; justify-content: flex-end; gap: 12px; } .acta__boton { min-height: 52px; padding: 0 22px; font-size: 16px; } .acta__boton--si:disabled { background: var(--accent-degradado); color: var(--text-on-accent); border-color: transparent; opacity: 0.38; } .acta__aviso:empty { display: none; } /* ---------- EL ACTO: flash, nombre y primer día ---------- */ .acta__acto { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; visibility: hidden; opacity: 0; background: radial-gradient(900px 600px at 50% 40%, color-mix(in srgb, var(--club-color) 45%, transparent), transparent 70%), linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.85)), var(--foto-acto, url('/assets/fotos/1600/modal-firma-8.webp')) center / cover; transition: opacity 360ms var(--ease, ease), visibility 0s 360ms; } /* «Tu primer día» con otra foto: el pasto, el predio, el vestuario. */ .acta--dia .acta__acto { background: radial-gradient(900px 600px at 50% 40%, color-mix(in srgb, var(--club-color) 40%, transparent), transparent 70%), linear-gradient(180deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.84)), var(--foto-dia, url('/assets/fotos/1600/predio-tarde.webp')) center / cover; } .acta--acto .acta__acto { visibility: visible; opacity: 1; transition: opacity 360ms var(--ease, ease); } .acta__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .acta--acto .acta__flash { animation: acta-flash 700ms ease-out 80ms; } @keyframes acta-flash { 0% { opacity: 0; } 12% { opacity: 0.92; } 100% { opacity: 0; } } .acta__acto-centro, .acta__dia { grid-area: 1 / 1; display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; } .acta__acto-escudo { width: clamp(110px, 18vh, 160px); height: clamp(110px, 18vh, 160px); object-fit: contain; filter: drop-shadow(0 12px 32px rgb(0 0 0 / 0.5)); } .acta__acto-nombre { margin: 0; font-size: clamp(2.2rem, 7vw, 4.5rem); font-weight: 700; font-style: italic; letter-spacing: -0.02em; line-height: 1.1; transform: skewX(-6deg); } .acta__acto-nombre span { display: inline-block; padding: 0 0.25em; } .acta--acto .acta__acto-nombre span { animation: acta-escribe 760ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both; } .acta__dia { opacity: 0; } /* La partida nueva corre el acta mientras dura la conferencia de bienvenida y la trae de vuelta para «Tu primer día». */ .acta.acta--corrida { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease, ease), visibility 0s 360ms; } .acta--dia .acta__acto-centro { opacity: 0; transition: opacity 360ms; } .acta--dia .acta__dia { opacity: 1; transition: opacity 420ms 200ms; } .acta__dia-titulo { margin: 0; font-size: clamp(2rem, 5.6vw, 4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; } .acta__dia-bajada { margin: 0; font-size: clamp(16px, 1.6vw, 21px); color: var(--text-secondary); } /* ---------- EL TELÉFONO: la sala se vuelve cabecera ---------- */ @media (max-width: 900px) { .acta { --letra: clamp(11.5px, 1.82vh, 15px); } .acta__mesa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } .acta__sala { grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding-right: 104px; } .acta__escudo { width: 44px; height: 44px; } .acta__titulo { margin: 0; font-size: 18px; letter-spacing: -0.01em; } .acta__volanta { margin-bottom: 1px; font-size: 11px; } .acta__quien { display: flex; flex-direction: column-reverse; gap: 3px; } .acta__rotulo { font-size: 10px; letter-spacing: 0.08em; } .acta__liga, .acta__voz, .acta__presi { display: none; } .acta__cerrar { top: 14px; right: 12px; min-height: 38px; font-size: 13px; padding: 0 12px; } .acta__lado { grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; } .acta__papel { padding: 12px 14px 10px; overflow: hidden; display: flex; flex-direction: column; } .acta__membrete { display: none; } .acta__nombre-del-papel { font-size: 11px; margin: 0 0 6px; } .acta__clausulas li { grid-template-columns: 1.4em 1fr; } .acta__firmas { gap: 12px; margin-top: auto; padding-top: 10px; } .acta__zona { height: clamp(62px, 13vh, 112px); } .acta__clausulas { gap: 0.6em; } .acta__rubrica { font-size: 25px; } .acta__sello { width: 84px; height: 84px; margin-left: -42px; bottom: 26px; } .acta__sello-escudo { width: 36px; height: 36px; } .acta__botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; } .acta__botones [data-acta='pensarlo'] { display: none; } .acta__boton { min-height: 50px; padding: 0 10px; font-size: 15px; justify-content: center; } } /* El membrete vuelve en los teléfonos altos, donde sobra papel. */ @media (max-width: 900px) and (min-height: 760px) { .acta__membrete { display: flex; padding-bottom: 8px; margin-bottom: 8px; } .acta__membrete-escudo { width: 34px; height: 34px; } .acta__membrete b { font-size: 1em; } .acta__lugar { display: none; } } /* Escritorio bajo (notebooks de 768 de alto): menos aire para que entre. */ @media (min-width: 901px) and (max-height: 760px) { .acta__mesa { padding-top: 48px; } .acta__sala { gap: 14px; } .acta__papel { padding: 16px 24px 12px; } } @media (prefers-reduced-motion: reduce) { .acta, .acta.acta--corrida, .acta__acto, .acta--dia .acta__acto-centro, .acta--dia .acta__dia { transition: none; } .acta * { animation: none !important; } .acta--presi .acta__rubrica--presi { clip-path: none; } .acta--sello .acta__sello { opacity: 1; transform: rotate(-14deg); } } /* menu.css */ /* ========================================================================== El Camino DT — El menú del botón derecho -------------------------------------------------------------------------- Cero tokens nuevos. Es la superficie del diálogo —panel sobre línea fuerte— con las medidas de la fila de estado: 24px de alto útil, icono apagado a la izquierda y texto en 13px. SIN SOMBRA, a diferencia del diálogo. La única sombra del sistema existe porque un modal tapa la pantalla entera y tiene que despegarse del plano; este menú mide 200px y se apoya sobre lo que estabas mirando, así que le alcanza con un borde en Línea Fuerte, que es un paso más claro que cualquier borde de la pantalla que hay debajo. ========================================================================== */ .menu { position: fixed; /* Por encima del chrome pegajoso (20), que es lo más alto del sistema. */ z-index: var(--z-flotante); display: grid; /* `minmax(0, 1fr)` y no la columna automática: una fila del menú lleva el texto de la acción a la izquierda y su pista a la derecha —«Cambiar el número · Ahora lleva el 2»— y las dos juntas piden más que el ancho máximo del menú. Con la columna midiéndose por su contenido, las filas se salían y el menú aparecía con una BARRA DE DESPLAZAMIENTO HORIZONTAL abajo, que en un menú de cinco renglones no es un control, es un defecto. Con la columna acotada a cero, `.menu__texto` hace lo que ya sabía hacer: recortarse. */ grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 200px; /* Y un poco más de ancho antes de recortar nada: el menú de un futbolista lleva su nombre entero —«Ver la ficha de Lucas Ruiz»— y a 280 empezaba a comerse el apellido con una pista al lado que sí entraba. */ max-width: 340px; max-height: calc(var(--alto-ventana) - 2 * var(--sp-4)); overflow-x: hidden; overflow-y: auto; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-panel); } .menu__item { display: flex; align-items: center; /* Sin esto la fila se niega a bajar de su contenido —es el `min-width: auto` de todo elemento flexible— y la columna acotada de arriba no sirve de nada: el que tiene que ceder es el texto de la acción. */ min-width: 0; gap: var(--sp-4); min-height: 26px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); font-size: var(--fs-md); color: var(--text-secondary); text-align: left; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* CON EL DEDO, 44. La lista de los mínimos táctiles vive en `app.css` —«EL DEDO»— y ahí están los ochenta controles del juego; éste es la excepción que tiene que estar acá, porque `menu.css` se carga después de `app.css` y la regla base de arriba declara `min-height`: a igual especificidad ganaría la de este archivo, y el renglón de allá sería una regla muerta que se lee como si funcionara. Se corrigió después de escribirlo así y medir 30 px igual. POR QUÉ IMPORTA MÁS ACÁ QUE EN UNA TABLA. En una lista, errarle a un renglón por dos píxeles abre la ficha del futbolista de al lado y se vuelve; acá EJECUTA. Los renglones de este menú venden, mandan a la reserva, sacan del banco y cambian el número de la camiseta, y ninguno pregunta después. Un menú es la superficie donde el error de puntería es más caro del juego, y era la única que había quedado en 30. Y LA MISMA VARA QUE EL RESTO: `pointer: coarse` más el ancho, que es la pareja con la que `app.css` reparte los 44. Con qué se toca decide el mínimo; el ancho está para que una tableta apaisada, que muestra el juego en su forma de escritorio, no pierda densidad. */ @media (pointer: coarse) and (max-width: 860px) { .menu__item { min-height: 44px; } } .menu__item .i { color: var(--icon-quiet); } /* El hueco de un ítem sin icono. Mide lo que mide un `.i--sm` para que el texto quede en la misma columna que el de los ítems que sí lo llevan. */ .menu__hueco { width: 13px; flex: none; } /* El foco se dibuja como el hover y no sólo con el anillo: en un menú abierto con el teclado, el ítem enfocado ES la selección. */ .menu__item:focus { background: var(--bg-hover); color: var(--text-primary); } @media (hover: hover) { .menu__item:hover { background: var(--bg-hover); color: var(--text-primary); } } .menu__item:focus .i { color: inherit; } @media (hover: hover) { .menu__item:hover .i { color: inherit; } } /* Una acción que no se puede hacer se muestra apagada con su motivo al lado, igual que la tabla del plantel muestra el veto: esconderla dejaría al DT buscando una acción que él cree que existe. */ .menu__item[disabled] { color: var(--text-disabled); cursor: default; background: none; } .menu__item[disabled] .i { color: var(--text-disabled); } .menu__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu__pista { margin-left: auto; padding-left: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; /* Y cede antes de empujar. La pista la escribe el dato —el motivo por el que algo no se puede, que puede ser una frase entera— y sin esto no se recorta ninguna de las dos: el `max-width` del menú corta la pista contra el borde con `overflow: hidden`, o sea en silencio y sin puntos suspensivos. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* El pie. Aparece sólo en el menú que no tenía ninguna acción que ofrecer —el mapa— y dice cómo llegar al menú del navegador. No es un ítem: no se enfoca, no se pulsa y no entra en el recorrido del teclado, así que se dibuja como lo que es, la letra chica de abajo, separada por la misma línea que separa los grupos. */ .menu__pie { margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-3) var(--sp-2); border-top: 1px solid var(--line-hairline); font-size: var(--fs-xs); color: var(--text-muted); } .menu__sep { height: 1px; margin: var(--sp-2) 0; border: 0; background: var(--line-hairline); } /* Aparece fundiéndose y no creciendo: el menú ya sale del punto que tocaste, que es toda la relación de causa que necesita. Esa decisión sigue en pie —el desplegable SÍ crece desde su botón porque su botón está en un sitio fijo de la pantalla y el menú nace bajo el puntero—; lo que faltaba era irse. */ .menu { animation: menu-aparece var(--dur-fast) var(--ease); } @keyframes menu-aparece { from { opacity: 0; } } /* Y SE VA, que hasta el 1/9/2026 no hacía: `menu.js` llamaba a `.remove()` y el menú desaparecía entre dos fotogramas después de haber llegado fundiéndose. Es la Regla de la Mitad que Falta —ver `movimiento.css`, punto 4— en el hermano del desplegable, y se resuelve igual: el guion pone la marca, espera lo que dura esto y recién ahí lo saca del DOM. Deja de recibir clics en el mismo instante en que empieza a irse. Importa más acá que en el desplegable: los ítems de este menú venden a un futbolista y lo mandan a la reserva, y un menú que ya se está yendo no puede aceptar el segundo clic de un doble clic apurado. */ .menu[data-yendose] { animation: menu-se-va var(--dur-fast) var(--ease-salida) forwards; pointer-events: none; } @keyframes menu-se-va { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .menu { animation: none; } /* La salida no se apaga, se acorta: la regla global de `app.css` la deja en 1ms, y su `forwards` es lo que mantiene al menú invisible hasta que el guion lo saca. Con `none` se quedaría a la vista los 140ms de la espera. */ .menu[data-yendose] { animation-duration: 1ms; } }