/* ========================================================================== El Camino DT — La previa -------------------------------------------------------------------------- Cero tokens nuevos. Tres columnas que son tres preguntas: con quién salgo, qué va a hacer el rival, y qué hago yo. El pronóstico vive en la del medio, pegado al informe, porque es lo que cambia cuando movés un mando de la derecha: la respuesta tiene que estar a la vista de la pregunta. ========================================================================== */ body { display: flex; flex-direction: column; height: var(--alto-ventana); overflow: hidden; } .previa { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-page); } /* Las tres son tarjetas —la placa la pone `.tarjeta` (app.css)— y las tres scrollean por dentro, así que las tres pueden encogerse. */ .previa__once, .previa__centro, .previa__plan { gap: var(--sp-4); min-height: 0; overflow: auto; } /* La del medio se pregunta a sí misma cuánto mide. Lo que decide cómo se reparten los dos planteos y el informe no es la ventana sino ESTA columna: a 2000 mide 1343 y a 1440 mide 783, y entre medio las otras dos no se mueven un píxel porque son de ancho fijo. Un quiebre de ventana para un problema de columna se desajusta el día que alguien toca la retícula, y no da error. */ .previa__centro { container: centro / inline-size; } /* EL PANEL DEL ONCE VA SOBRE LA SUPERFICIE TÁCTICA. Es lo que hace FM26: el panel donde se arma el equipo tiene color propio —un teal con borde más claro— y el resto de la pantalla se queda en el azul de siempre. Acá cumple la misma función que allá, aunque el nuestro sea una lista y el suyo una cancha: es el sitio donde se decide quién juega. Los valores y el porqué del brillo, en `--tactico-fondo` (`tokens.css`). */ .previa__once { background: var(--tactico-fondo); border-color: var(--tactico-borde); } /* -------------------------------------------------------------------------- EL ONCE, EN CORTO -------------------------------------------------------------------------- */ .once-lista { display: grid; gap: 1px; } .fila-once { display: grid; grid-template-columns: 32px 20px minmax(0, 1fr) 20px; align-items: center; gap: var(--sp-3); min-height: 22px; padding: 0 var(--sp-3); border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--text-secondary); } .fila-once--vacia { color: var(--text-muted); } .fila-once--vacia .fila-once__nombre { font-style: italic; } /* EL QUE NO PUEDE JUGAR SIGUE EN SU RENGLÓN, tachado y con el motivo donde iba el nivel. Es la diferencia entre «acá falta alguien» y «acá falta ÉSTE»: la previa se mira para saber a quién hay que reemplazar, y un hueco vacío manda a buscar el nombre a otra pantalla. La última columna se ensancha sólo en este renglón —la palabra no entra en los 20px del nivel— y el resto de la retícula no se entera. */ .fila-once--fuera { color: var(--text-muted); } .fila-once--fuera .fila-once__nombre { text-decoration: line-through; } .fila-once__fuera { color: var(--danger); display: flex; justify-content: flex-end; } .fila-once__rol { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); color: var(--text-muted); } .fila-once__n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .fila-once__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila-once__nivel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; } .once-lista--banco .fila-once { color: var(--text-muted); } /* EL RESTO SE VE MÁS APAGADO QUE EL ONCE, con el color apagado del sistema y NADA MÁS. La primera versión le agregaba `opacity: 0.72` encima para que fueran tres escalones y no dos, y ahí está la trampa: `opacity` se aplica al subárbol entero, así que el contraste real no es el del color sino el del color YA MEZCLADO con el fondo. Medido sobre el teal del panel: once y suplentes 6,29 el resto con el color apagado 4,63 ✓ el resto con ese color al 72 % 3,07 ✗ (el mínimo es 4,5) Y no se ve venir leyendo la hoja: el `getComputedStyle` del renglón del nombre sigue diciendo 4,63, porque la opacidad está en el padre. Hay que componer el alfa para que el número diga la verdad. Ver la nota del barrido de contraste. Dos escalones legibles valen más que tres, y el que no viaja igual se lee — hay que poder buscar un nombre ahí adentro para subirlo. */ .once-lista--resto .fila-once { color: var(--text-muted); } /* LO QUE ELEGISTE VOS, marcado con un filo y no con un color: el renglón ya usa el color para decir en qué lista está, y un segundo significado sobre el mismo canal es el que nadie aprende. Es el mismo violeta de lo elegido que ya usan el puesto marcado y el renglón que va a recibir. */ .once-lista--banco .fila-once--mio { /* `--accent-texto` y no `--accent`, por lo mismo que la marca gemela de la tabla del plantel: el violeta de acento se queda en 2,9 y un indicador que no es texto igual necesita 3. El filo se ve mejor y las dos pantallas marcan «lo elegiste vos» con el mismo color. */ box-shadow: inset 2px 0 0 var(--accent-texto); color: var(--text-secondary); } .once-lista__vacia { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); } /* «Automático» es el deshacer del banco, así que va escrito como un enlace y no como un botón: un botón sólido al lado de dos cabeceras compite con CONTINUAR, que es el único control importante de esta pantalla. */ .once-auto { padding: 0; background: none; border: 0; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); cursor: pointer; } .once-auto:hover { color: var(--accent); } /* -------------------------------------------------------------------------- ARRASTRAR EL ONCE -------------------------------------------------------------------------- Los mismos tres estados del plantel, en lista en vez de en cancha: el que viaja se apaga (`.arrastrando`, en `app.css`), el renglón bajo el cursor se enciende con el violeta de lo elegido, y los puestos donde el que viene no juega se apagan. Ni un color nuevo. -------------------------------------------------------------------------- */ .fila-once[draggable='true'] { cursor: grab; } .fila-once[draggable='true']:active { cursor: grabbing; } .fila-once[draggable='true']:hover { background: var(--bg-hover); } .fila-once--recibe { background: var(--bg-selected); box-shadow: inset 0 0 0 1px var(--accent); } .once-lista--eligiendo .fila-once[data-encaja='0'] { opacity: 0.4; } /* El puesto elegido tocándolo. Lleva el MISMO tratamiento que el puesto que está por recibir una caída —fondo lavado y filo violeta— porque significa lo mismo: «acá va a entrar alguien». Dos dibujos distintos para el mismo estado serían dos cosas que aprender en vez de una. */ .fila-once[aria-current='true'] { background: var(--bg-selected); box-shadow: inset 0 0 0 1px var(--accent); } .previa__ayuda { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); min-height: 2.4em; } /* EL AVISO DEL BANCO VA DESPUÉS DE `.previa__ayuda` Y NO ANTES, y no es prolijidad: las dos son una sola clase, o sea la misma especificidad, así que gana la que esté más abajo. Escrita arriba —donde la puse primero— el ámbar perdía contra el gris y el aviso salía del color de una nota cualquiera. No da error: sale un renglón perfecto del color equivocado. Ámbar y no rojo porque en este sistema ámbar es «atención» y rojo es «esto está mal»; un banco sin arquero no está mal, está elegido. Es el mismo token con el que la tarjeta de formación dice cuántos quedan fuera de puesto. */ .previa__ayuda--aviso { color: var(--warn); } /* -------------------------------------------------------------------------- EL CRUCE -------------------------------------------------------------------------- */ .cruce { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--ink-950); } .cruce__escudo { width: 38px; height: 38px; --halo: 0.68px; object-fit: contain; flex: none; } .cruce__id { display: grid; gap: 1px; flex: 1 1 0; min-width: 0; } .cruce__id--der { text-align: right; } .cruce__id strong { font-size: var(--fs-md); color: var(--text-primary); } .cruce__vs { font-size: var(--fs-xs); color: var(--text-muted); flex: none; } .cruce__donde { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); } .previa__lectura { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-body); max-width: 64ch; } /* -------------------------------------------------------------------------- EL PRONÓSTICO -------------------------------------------------------------------------- */ .pronostico { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); } .pron { display: grid; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--ink-950); } .pron__valor { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pron__valor[data-band='good'] { color: var(--good); } .pron__valor[data-band='ok'] { color: var(--warn); } .pron__valor[data-band='bad'] { color: var(--danger); } .pron__nota { font-size: var(--fs-xs); color: var(--text-muted); } /* -------------------------------------------------------------------------- POR DEBAJO DE 1300 SE SUELTA EL ANCLA AL ALTO DE LA VENTANA -------------------------------------------------------------------------- Las tres columnas son de ancho fijo o casi —260 y 300 las laterales— así que al angostarse la ventana la única que cede es la del medio, y llega un punto en que ninguna de las tres entra. Medido en 1280x800, con 657px de panel: El once 674 ( 17 de más) El plan 767 (110 de más) Los planteos 962 (305 de más) Las tres se desplazaban por dentro AL MISMO TIEMPO. Tres barras en una pantalla es peor que una página que baja: cada panel esconde una parte distinta, ninguna avisa, y la fila de acciones —guardar, pedir consejo, cambiar el once— quedaba fuera de las tres. Así que a ese tamaño la pantalla deja de medir lo que mide la ventana y pasa a medir lo que mide su contenido: cada panel se abre entero y lo que se desplaza es la PÁGINA, una sola vez y con la barra de siempre. Es la misma salida que ya usa el plantel por debajo de 900, y por el mismo motivo. El umbral es 1300 y no 1500 a propósito: entre 1300 y 1500 la del medio se desplaza por dentro y ésa es una decisión tomada —la pantalla sigue entrando en una mirada y lo único que se busca bajando es el final del informe—. Acá abajo ya no entra nada, que es otra cosa. -------------------------------------------------------------------------- */ @media (max-width: 1300px) { body { height: auto; min-height: var(--alto-ventana); overflow: visible; } .previa { min-height: 0; } .previa__once, .previa__centro, .previa__plan { overflow: visible; min-height: auto; } } /* -------------------------------------------------------------------------- LOS DOS PLANTEOS -------------------------------------------------------------------------- EL HUECO QUE VINO A LLENAR, MEDIDO. En una ventana de 2000x1015 la columna del medio tiene 1343px —el 67% de la pantalla— y su contenido terminaba en el informe del ojeador: quedaban 357px de nada hasta la fila de botones, el 41% de su alto. Y el vacío no era contenido que faltara sino un hueco empujado a propósito, porque `.previa__acciones` lleva `margin-top: auto`. Las otras dos columnas estaban llenas: el once entra justo en 281 y el planteamiento en 324. O sea que la columna que se llevaba el ancho era la única a la que le sobraba alto. LO QUE FALTABA ERA LA CANCHA. La previa era la única de las tres pantallas del día del partido sin un campo dibujado —el partido tiene el suyo, el entretiempo tiene once pizarras— y tu once volvía convertido en una lista de apellidos en la columna angosta. Acá se dibujan los dos planteos con el mismo `.campito` del entretiempo. POR QUÉ SON TRES COLUMNAS Y NO DOS. Un campito es 88 por 68, o sea 1,29 de ancho por alto; el hueco es 3,76. Dos dibujos no llenan una franja de esa forma por más grandes que se hagan: sobraban 400px a la derecha. La tercera columna es el informe del ojeador, que se muda de arriba, y no es un relleno: habla del rival, así que su sitio natural es al lado del dibujo del rival. Es la misma lección que el entretiempo — el plano y las palabras que lo explican se leen juntos o no se leen. EL REPARTO LO DECIDE QUIÉN EMPUJA EL ALTO, Y NO ERA EL DIBUJO. El primer intento le dio 300px fijos al informe y el bloque salió 97px más alto que el hueco, con los botones abajo del pliegue: en 300px cada nota del ojeador cae en tres renglones, seis fichas apiladas miden 585 y el que mandaba en el alto de la fila era la columna de texto, no las canchas. Se arregla al revés de como parece: dándole MÁS ancho al informe. Con 459 le entran dos columnas de tarjetas —tres filas en vez de seis— y baja a 330, que ya es menos que el campito de al lado. Una columna angosta de prosa no ahorra sitio: lo gasta en vertical. Lo que queda es 1,4 / 1 / 1,35: el tuyo es el más ancho porque lleva los nombres encima, el de ellos no los necesita, y el informe pide lo justo para sus dos columnas. */ .planteos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sp-6); align-items: start; } /* Y EN LA COLUMNA DE EN MEDIO EL REPARTO SE CORRE HACIA EL INFORME, por lo mismo que arriba y al revés de lo que parece. Al angostarse la columna, el que se vuelve alto no es el dibujo —que encoge en los dos sentidos a la vez— sino la prosa, que sólo encoge en uno: cada nota gana un renglón. Así que el informe se lleva más parte cuanto menos hay, no menos. Medido en la columna de 1600 (907px): con el reparto ancho la fila salía 347 y el hueco daba para 300; con éste da 300 justos y los botones vuelven a entrar. El campito baja de 253 a 225 de alto, que en un dibujo de once puntos no se nota — y el renglón que se ahorra en seis notas, sí. */ @container centro (max-width: 1150px) { .planteos { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 1.6fr); } } /* SE PROBÓ APRETAR LA FICHA DEL INFORME A DOS RENGLONES —rótulo y valor en la misma línea— y se deshizo: ahorraba ochenta píxeles de alto y a cambio partía palabras. En la columna de 1440 el informe queda en fichas de unos 180, y ahí «Mentalidad» más «Defensiva» en el mismo renglón no entran: se cortaba el rótulo, y dando vuelta el reparto se cortaba el valor. Un valor que no se puede leer es un defecto; ochenta píxeles de desplazamiento en una columna que ya se desplaza, no. Queda escrito para que no se vuelva a intentar sin medir el ancho de la ficha primero. */ .planteo { display: grid; gap: var(--sp-4); margin: 0; min-width: 0; } /* El contenedor es el que posiciona: las fichas van en porcentaje de ESTE cuadro, y el campito de adentro ocupa exactamente el mismo, así que un nombre nunca puede despegarse de su punto por más que la columna cambie de ancho. Y se pregunta a sí mismo cuánto mide, porque lo que decide si un nombre entra no es la ventana ni la columna: es el dibujo. */ .planteo__campo { position: relative; container: campito / inline-size; } /* POR DEBAJO DE 300px EL NOMBRE SE VA Y QUEDA EL NÚMERO. Con la página en 1280x800 el campito cae a 177px de ancho y ahí la cuenta no cierra por poco, cierra por mucho: la ficha necesita unos 77px —catorce del dorsal, cincuenta y cinco del apellido, ocho de relleno— y el tope del 33% le da 58. Medido en esa ventana: OCHO pares de fichas pisándose y diez de los once apellidos cortados. Un nombre a medias encima de otro nombre a medias es peor que no ponerlo. El dorsal solo no pierde la información, la muda: la lista de al lado va ordenada por puesto y lleva el mismo número al lado del mismo nombre. Y el dorsal no se corta nunca, son dos cifras. 250 sale de la cuenta y no del ojo: la ficha necesita unos 80px para el apellido más largo del plantel con su dorsal, y el tope del 33% se los da a partir de 242. Se redondea para arriba porque la ficha más ancha no es la media —«Ascacíbar» pide más que «Villa»— y un umbral puesto en el promedio deja fuera justo a los apellidos largos, que son los que más falta hace leer enteros. Con 250, en una ventana de 1600 el campito mide 282 y los nombres se quedan; en 1440 cae a 230 y se van. */ @container campito (max-width: 250px) { .planteo__nombre { display: none; } .planteo__ficha { max-width: none; padding: 0 3px; } } .planteo__informe { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; } /* Dos columnas de tres, y la figura cruzada arriba. La tarjeta «Sistema» ya no está porque ahora es el plano de al lado. Y LA FIGURA VUELVE A CRUZARSE, que es lo que decía esta hoja desde siempre y el guion había dejado de hacer: la regla `.ojeo--figura` estaba escrita —«es el nombre con el que un DT empieza a leer a un rival, no un dato más de la rejilla»— pero `pintarOjeador()` pintaba las siete fichas con la misma clase, así que no se aplicaba a ninguna. Una regla que no alcanza a nadie no avisa; se ve el día que alguien mide la pantalla y no antes. */ .planteo__informe .ojeador { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .planteo__informe .ojeo { padding: var(--sp-3) var(--sp-4); } /* La ficha con el nombre. Va colgada del punto que dibuja el SVG, centrada en él y un poco por debajo: encima taparía la ficha, que es lo que dice DÓNDE juega. Sin `pointer-events` porque no se toca — el once se arma en la lista de la izquierda y en el plantel, no acá. */ .planteo__ficha { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 6px); display: flex; align-items: baseline; gap: 3px; max-width: 33%; padding: 1px 4px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--ink-1000) 62%, transparent); pointer-events: none; white-space: nowrap; } .planteo__n { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .planteo__nombre { font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--wd-condensed); color: var(--ink-100); overflow: hidden; text-overflow: ellipsis; } /* Un puesto sin cubrir dice su rol y en apagado: el hueco tiene que verse en el dibujo, que es donde se mira antes de salir a la cancha. */ .planteo__ficha--vacia .planteo__nombre { color: var(--text-muted); font-weight: 500; } /* -------------------------------------------------------------------------- EL INFORME DEL OJEADOR -------------------------------------------------------------------------- */ /* El piso va envuelto en `min()` por lo mismo que `.anos` en `camino.css`: el primer valor de un `minmax()` no se achica, así que en una columna más angosta que 150 px la pista se planta en 150 y el informe se sale. Acá no se llegaba a ver mientras `.planteos` mantenía sus tres columnas —el defecto lo destapaba ella—, y queda puesto para que no vuelva por otro lado. */ .ojeador { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-4); } .ojeo { display: grid; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--ink-950); } .ojeo__valor { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); } .ojeo__nota { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } /* La figura abre el informe y por eso se lleva el ancho entero: es el nombre con el que un DT empieza a leer a un rival, no un dato más de la rejilla. */ .ojeo--figura { grid-column: 1 / -1; border-color: var(--line); } .previa__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-5); } /* -------------------------------------------------------------------------- LOS TRES MANDOS -------------------------------------------------------------------------- */ .planes { display: grid; gap: var(--sp-6); align-content: start; } .mando { display: grid; gap: var(--sp-3); } .mando__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .mando__valor { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } /* Los cinco escalones de la mentalidad no entran en una línea a 300px: el segmentado se parte en dos filas en vez de encogerse hasta ser ilegible. */ .mando .segmented { flex-wrap: wrap; } .mando .segmented__btn { flex: 1 1 auto; } /* EL DIBUJO DEL MANDO. Ancho completo y bajo —40 de alto sobre 96 de ancho— porque esta columna mide unos 300px y el dibujo tiene que caber sin robarle sitio a la frase, que es la que explica. El trazo hereda `currentColor` desde acá, así que el color apagado se define UNA vez y las partes encendidas lo pisan con su propio `fill`. */ .mando__dibujo { width: 100%; height: 40px; color: var(--text-secondary); } .mando__frase { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } /* -------------------------------------------------------------------------- LA PELOTA PARADA -------------------------------------------------------------------------- Tres decisiones que se leen juntas y valen lo mismo, así que van en tres renglones iguales dentro de UN mando y no como tres mandos más: la columna ya tiene tres, y seis bloques con su título y su frase la convierten en una lista que hay que recorrer. Acá el título es el del grupo y la frase es una sola, porque la regla —si no está en cancha, la patea otro— es la misma para las tres. El rótulo mide lo que mide el más largo («Córners y centros») y el desplegable se lleva el resto: dos columnas y no una rejilla flexible, porque tres selects que empiezan en sitios distintos se leen como tres controles distintos. */ /* El aviso de que un designado no va a estar: ámbar, que en este sistema es «atención» y no «error» —el partido se juega igual y la pelota la patea otro— y es el mismo color con el que la tarjeta de formación dice cuántos quedan fuera de puesto. */ .mando__frase--aviso { color: var(--amber-500); } .parada { display: grid; gap: var(--sp-2); } .parada__fila { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: var(--sp-3); } .parada__fila .label { white-space: nowrap; } .parada__fila .desp, .parada__fila select { min-width: 0; } /* -------------------------------------------------------------------------- CUANDO NO CABEN LAS TRES COLUMNAS -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .previa { grid-template-columns: minmax(0, 1fr) 300px; } /* El once se va abajo: en la previa lo que se decide es el plan, y el once ya se decidió en la otra pantalla. */ .previa__once { grid-column: 1 / -1; order: 1; } } /* -------------------------------------------------------------------------- Y CON EL DEDO VUELVE ARRIBA -------------------------------------------------------------------------- La regla de acá arriba se escribió cuando esta pantalla NO se podía tocar: el once se mandaba abajo porque «ya se decidió en la otra pantalla», y eso era cierto mientras la única forma de corregirlo acá fuera arrastrar, que con el dedo no existe. Desde que el once se corrige tocando, mandarlo abajo tiene un precio medido: en un teléfono de 375×812 hay que rodar 3079 px —`previa__centro` son 1855 y `previa__plan` 1078— para llegar a los once renglones. Con esto se rueda 185, que es lo que mide la barra de arriba. NO ES LA REGLA DE ARRIBA CON OTRO NÚMERO, y por eso no se toca aquélla: en un escritorio angosto —una ventana de 1000 px, una tableta apaisada— sigue mandando el plan, porque ahí el once se arrastra y el argumento original no caducó. Lo que cambió es qué se puede HACER con el dedo, no cuánto mide la ventana; de ahí que la vara sea `pointer: coarse`, la misma con la que `app.css` reparte los 44 px del mínimo táctil. */ @media (pointer: coarse) and (max-width: 860px) { .previa__once { order: -1; } } /* -------------------------------------------------------------------------- UNA LISTA POR VEZ, CON EL DEDO -------------------------------------------------------------------------- Los 23 renglones que mueven futbolistas en esta pantalla medían 24 px de alto con 1 px de aire —paso de 25— contra los 44 del mínimo táctil, y no los cazaba ninguna vara: son `
` sin `role` ni `tabindex`, así que el selector de `movil-dedo.html` y `movil-toque.html` no los ve. Por eso el juego podía decir «los controles chicos son dos» teniendo éstos. Y NO HAY UN VALOR INTERMEDIO. Medido a 375×812: la tarjeta pide 747 y la ventana da 812, o sea 65 px de aire repartidos entre 23 renglones — el techo que conserva «todo en una pantalla» son 25 px de CSS, tres píxeles más de dedo. A 28 la tarjeta se va a 865, a 32 a 964 y a 44 a 1294. O se aceptan los objetivos chicos, o las dos listas dejan de verse juntas. TAMPOCO SIRVE AGRANDAR SÓLO LA ZONA SENSIBLE con un pseudo-elemento, que es lo que hace `.news__dot`: ahí el hueco medido entre punto y punto deja crecer 3 px por lado y las zonas se TOCAN sin superponerse. Acá el paso es 25, así que para llegar a 44 hay que crecer 10 por lado y dos renglones vecinos se pisarían 19 px. Un objetivo que abre el de al lado es peor que uno chico. ASÍ QUE SE MUESTRA UNA LISTA POR VEZ, que además es el gesto: tocás el puesto y RECIÉN ENTONCES necesitás el banco. Elegir un puesto abre el banco solo, así que traer un suplente sigue costando DOS toques, los mismos que antes. MEDIDO A 375×812 CON LOS RENGLONES YA EN 44: la tarjeta pide 706 en reposo y 810 eligiendo, contra los 715 que pedía con los renglones de 24 y las dos listas abiertas. O sea que el pliegue paga el aumento entero y sobra: los objetivos se duplican y la tarjeta no crece. Los 810 sólo cierran porque la ayuda de ese estado dejó de nombrar el intercambio, que ahí no se puede hacer —ver `previa.js`—; con el renglón largo pedía 842 y se iba 30 px. PERO LAS DOS SON PLEGABLES, Y ESO NO ES SIMETRÍA DECORATIVA: los tres movimientos del once son entrar, salir e INTERCAMBIAR, y el intercambio se hace tocando un puesto y después OTRO. Con el once plegado a su renglón elegido, el segundo puesto no está en la pantalla — o sea que auto-abrir el banco y dejarlo así mataba el gesto que se agregó el mismo día. Con la cabecera «El once» abriendo su lista, el intercambio cuesta un toque más y existe; sin ella no existe. El caso común no paga nada y el raro paga uno. EL ONCE PLEGADO DEJA VER EL RENGLÓN ELEGIDO Y NO SE ESCONDE ENTERO: sin él, la pantalla te pide elegir suplente para un puesto que ya no se ve. Cuando no hay ninguno elegido —el banco abierto a mano— no queda ninguno, y ahí la cabecera «El once · 11 de 11» es toda la referencia que hace falta. Y VA CON `pointer: coarse` MÁS UN ANCHO, que es la pareja exacta con la que `app.css` reparte los 44 px del mínimo táctil: «el `max-width` está para que una tableta apaisada —que ya muestra el juego en su forma de escritorio— tampoco pierda densidad». Sin ese segundo término, una tableta de 1920 con dedo plegaba el banco teniendo sitio de sobra para las dos listas, y este mismo bloque citaba la regla que estaba contradiciendo. Se usa el 860 de `app.css` y no un número propio: dos varas para la misma pregunta terminan discrepando el día que alguien mueva una. En el escritorio —y en esa tableta— las dos listas se ven enteras como siempre, sin botones y sin la cuenta de suplentes. ----------------------- */ .once-pliegue, .once-pliegue__eco { display: none; } @media (pointer: coarse) and (max-width: 860px) { .fila-once { min-height: 44px; } .once-pliegue__eco { display: inline; color: var(--text-muted); } /* El botón es el triángulo y nada más: el rótulo de al lado ya dice de qué lista habla, y repetirlo adentro del control sería decirlo dos veces. Los 44 de ancho salen de la misma regla que todo lo demás de esta hoja. */ .once-pliegue { display: flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; margin: calc(var(--sp-2) * -1) 0; padding: 0; background: none; border: 0; cursor: pointer; } .once-pliegue::after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-muted); transition: transform 120ms ease; } .once-pliegue[aria-expanded='true']::after { transform: rotate(180deg); } /* TRES LISTAS Y UNA SOLA ABIERTA. Con dos alcanzaba con esconder el banco; con tres hay que esconder las DOS que no están abiertas, o el teléfono muestra el resto entero debajo del once. Se escribe como «la que no es la abierta se esconde» y no como tres pares de reglas: así el día que haya una cuarta lista no hay que acordarse de venir. */ .previa__once:not([data-abierta='banco']) .once-lista--banco { display: none; } .previa__once:not([data-abierta='resto']) .once-lista--resto { display: none; } .previa__once:not([data-abierta='once']) [data-f='once'] .fila-once:not([aria-current='true']) { display: none; } /* El botón de automático no entra en la fila de 44px del teléfono junto al rótulo, la cuenta y el triángulo: se va al renglón de abajo, que es donde hay ancho. */ .once-auto { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 780px) { body { height: auto; min-height: var(--alto-ventana); overflow: visible; } .previa { grid-template-columns: 1fr; } .previa__once, .previa__centro, .previa__plan { overflow: visible; min-height: auto; } .previa__acciones .action { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- LOS TRES PLANTEOS, APILADOS -------------------------------------------------------------------------- El reparto 1,4 / 1 / 1,35 aguanta bastante más abajo de lo que uno diría: la fila recién se sale a los 400 px de ventana —medido, 1 px a 390, 11 a 360 y 20 a 320—. Pero «no se sale» y «se lee» no son lo mismo: entre 400 y 560 las tres columnas quedan en 100–140 px cada una, y ahí el campito es una estampilla y cada nota del informe gasta un renglón por palabra. Así que el quiebre no está donde empieza a romperse sino donde deja de servir, y son 560 — el mismo número con el que se apilan `jugador`, `partido` y `entrenamiento`. Apiladas, cada planteo se lleva el ancho entero, que es justo lo que la nota de arriba dice que necesita la prosa. -------------------------------------------------------------------------- */ @media (max-width: 560px) { .planteos { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- EL MANDO QUE SE PLIEGA -------------------------------------------------------------------------- Lo usa «La tanda»: sus cinco desplegables son la decisión de una noche de copa y no tienen nada que hacer en una fecha de liga, donde sólo gastan el alto de una pantalla que ya va justa. El triángulo es el mismo que el de la ayuda plegada de la Reserva, y gira igual. -------------------------------------------------------------------------- */ .mando--plegable > summary { cursor: pointer; list-style: none; } .mando--plegable > summary::-webkit-details-marker { display: none; } .mando--plegable > summary::after { content: ''; width: 7px; height: 7px; margin-left: var(--sp-3); border-right: 1.5px solid var(--icon-quiet); border-bottom: 1.5px solid var(--icon-quiet); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-fast) var(--ease); } .mando--plegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .mando--plegable > summary:hover::after { border-color: var(--text-secondary); } /* ========================================================================== EL TIEMPO, SOBRE EL CAMPITO -------------------------------------------------------------------------- Lo mismo que hace el lienzo del partido, en la pantalla donde se DECIDE. La previa ya decía «Lluvia · 11° a 16°» en el cruce y ya decía qué le hace al partido, pero los dos planteos se dibujaban sobre un campo de domingo de sol: el DT elegía el ritmo, la salida y la mentalidad mirando una cancha seca y después jugaba bajo el agua. Es el mismo agujero que tenía el marcador antes de que la lluvia entrara al lienzo, una pantalla más atrás. VA SOBRE LOS DOS CAMPITOS, el mío y el del rival, porque el tiempo es de la cancha y no de un equipo. Y va FUERA del ``: `.campito--espejo` refleja el dibujo del rival con un `scaleX(-1)`, así que una gota metida adentro caería inclinada para el otro lado y los dos campitos, uno al lado del otro, tendrían lluvias que se cruzan. Colgadas de `.planteo__campo` —que ya es `position: relative` para las fichas— las dos llueven igual. ACÁ VIVE SÓLO LO QUE SE MUEVE. El velo del pasto lo pinta `miniCampo()` —`.campito__velo`, en `app.css`— porque tiene que quedar DEBAJO de los once discos: como capa por encima del `` apagaba también el color de los clubes, que es lo único que significa algo en este dibujo. Las partículas sí van encima de todo, porque son lo que hay entre la cámara y el campo. LAS MEDIDAS SON LAS DEL PARTIDO, EN PROPORCIÓN AL ANCHO. En `partido.js` una gota mide `9 + z*9` píxeles sobre un lienzo de unos 950, o sea el 0,95 % del ancho más otro tanto por profundidad — y eso es lo que dice el `cqw` de acá. Así el campito no tiene una lluvia propia: tiene la misma lluvia, más chica. El campito es 88 por 68, así que su alto es siempre `77.27cqw`, y de ahí sale que se pueda medir todo en una sola unidad. LO QUE NO SE COPIÓ SON LOS ALFAS, y es la lección de la nieve otra vez: un alfa no se hereda, se mide contra lo que hay debajo Y contra el tamaño que va a tener. Una gota del partido es un trazo de 9 a 18 píxeles; acá el mismo 0,95 % son 4 a 9, y a 1,55:1 —el alfa del lienzo— cuatro píxeles de raya no existen. Medido sobre el campo con su velo: lluvia 0,200 → 0,347 da de 1,90:1 a 3,08:1 (el lienzo: 1,55 a 2,17) viento 0,130 → 0,183 da de 1,50:1 a 1,77:1 (el lienzo: 1,27 a 1,50) nieve 0,480 → 0,775 da de 3,04:1 a 5,24:1 (iguales al lienzo: el copo es un disco y su proporción aguanta el achique, así que su alfa se hereda tal cual) Los alfas de arriba no son los que dicen las fórmulas leídas a ojo: son los que devuelve `getComputedStyle` sobre las partículas ya pintadas, mínimo y máximo de las veinte. La fórmula tiene un `--z` adentro y el rango real sale de los extremos de la serie, no de los extremos que uno supone. Y LAS PARTÍCULAS SE APAGAN CON `prefers-reduced-motion`, el velo no. Misma vara que el lienzo y por el mismo motivo: un velo quieto no es movimiento, es el estado de la cancha, y esa información no se le esconde a nadie. Hace falta decirlo explícito porque la regla global de `app.css` no apaga nada, deja las animaciones en 1ms — que en algo infinito es un parpadeo, peor que el movimiento. ========================================================================== */ .tiempo { position: absolute; inset: 0; border-radius: var(--r-xs); overflow: hidden; pointer-events: none; } .tiempo i { position: absolute; display: block; } /* --- LA LLUVIA ------------------------------------------------------------ Cae inclinada y no a plomo, por lo mismo que en el lienzo: una lluvia vertical se lee como una cortina de rayas. Los 11° del trazo y el corrimiento de 20cqw por caída son la misma inclinación dicha dos veces —el sesgo 0,2 de `dibujarLluvia()`—, que es lo que hace que la gota vaya hacia donde apunta. El período, `1.05s / z`, es el del lienzo a velocidad normal. */ .tiempo[data-tiempo="lluvia"] i { --dur: calc(1.05s / var(--z)); left: calc(var(--x) * 100%); width: 1px; height: calc((0.95 + var(--z) * 0.95) * 1cqw); background: var(--campo-linea); opacity: calc(0.20 + (var(--z) - 0.55) * 0.19); animation: tiempo-gota var(--dur) linear infinite; animation-delay: calc(var(--y) * var(--dur) * -1); } @keyframes tiempo-gota { from { transform: translate(4cqw, -4cqw) rotate(11deg); } to { transform: translate(-16cqw, 81cqw) rotate(11deg); } } /* --- EL VIENTO ------------------------------------------------------------ Doce ráfagas en el lienzo son cuatro acá: la cuenta es por superficie, no por pantalla. El lienzo las dibuja como una curva porque dos rectas paralelas parecían una raya del propio lienzo; acá el mismo trabajo lo hace el degradado —la ráfaga nace y muere en nada— y por eso no hace falta la curva. */ .tiempo[data-tiempo="viento"] i { --dur: calc(4.5s / var(--z)); top: calc((0.06 + var(--y) * 0.88) * 77.27cqw); height: 1px; width: calc((4.2 + var(--z) * 7.4) * 1cqw); border-radius: 1px; background: linear-gradient(90deg, transparent, var(--campo-linea), transparent); opacity: calc(0.13 + (var(--z) - 0.6) * 0.10); animation: tiempo-rafaga var(--dur) linear infinite; animation-delay: calc(var(--x) * var(--dur) * -1); } @keyframes tiempo-rafaga { from { transform: translateX(-100%); } to { transform: translateX(100cqw); } } /* --- LA NIEVE ------------------------------------------------------------- Dos animaciones y no una, y por eso el copo es un `::before`: el elemento BAJA y su hijo se BALANCEA. En el lienzo las dos cosas salen de una suma —`y` lineal más un seno en `x`— y acá no hay dónde sumarlas si no son dos capas. El balanceo lleva su propia fase (`--f`) para que los copos no se vayan todos al mismo lado a la vez, que es el mismo motivo por el que `COPOS` tiene un cuarto número en `partido.js`. */ .tiempo[data-tiempo="nieve"] i { --dur: calc(3.33s / var(--z)); left: calc(var(--x) * 100%); animation: tiempo-copo var(--dur) linear infinite; animation-delay: calc(var(--y) * var(--dur) * -1); } .tiempo[data-tiempo="nieve"] i::before { content: ''; display: block; width: calc((0.19 + var(--z) * 0.29) * 1cqw); aspect-ratio: 1; border-radius: 50%; background: var(--ink-100); opacity: calc(0.48 + (var(--z) - 0.5) * 0.36); animation: tiempo-vaiven 5s ease-in-out infinite; animation-delay: calc(var(--f) * -5s); } @keyframes tiempo-copo { from { transform: translateY(-3cqw); } to { transform: translateY(80cqw); } } @keyframes tiempo-vaiven { 0%, 100% { transform: translateX(calc((0.63 + var(--z) * 1.05) * -1cqw)); } 50% { transform: translateX(calc((0.63 + var(--z) * 1.05) * 1cqw)); } } @media (prefers-reduced-motion: reduce) { .tiempo { display: none; } } /* LA RESPUESTA DE LA PANTALLA se mudó a `movimiento.css`, punto 3, el día que apareció la tercera pantalla que contesta —el portal— y esta hoja iba a ser una de tres copias del mismo gesto con el mismo nombre. El cuándo lo decide `contestar()` en `mundo.js`. */