/* ========================================================================== El Camino DT — EL CHROME DE FM26 -------------------------------------------------------------------------- Lo que esta hoja agrega a la barra que ya existía en `app.css`, medido sobre la captura a resolución nativa del portal de FM26 que el dueño aportó el 20 de agosto de 2026 (`referencia/fm26/notas.md`, sección «La captura buena»). Hasta ese día la única evidencia era un video de YouTube comprimido, y por eso faltaban justo las piezas que el compresor no dejaba leer: 1. LA PLACA DEL ESCUDO. El escudo no flota sobre la barra: se apoya en un bloque del COLOR DEL CLUB que cruza los dos pisos, con cuatro corchetes en las esquinas. Es lo que hace que la barra se lea como la de tu club en vez de como una barra de herramientas, y era lo que este chrome buscaba cuando subió el escudo de 36 a 60px sin llegar del todo. 2. LOS DESPLEGABLES. Cada sección del primer piso abre su submenú. El chevrón no es adorno: es la promesa de que ahí hay algo. 3. EL BUSCADOR Y LA FILA DE UTILIDADES, que ocupan el hueco de la derecha. 4. LA BARRA DE FAVORITOS en el segundo piso. 5. CONTINUAR EN DEGRADADO — la única superficie con degradado del producto, declarada como excepción en `tokens.css`. Nada de esto lo escribe una pantalla: lo monta `scripts/chrome.js` sobre el marcado que las veinte ya tienen, por el mismo motivo por el que `controles.js` mejora los `` permanente en la barra promete filtrar la pantalla. */ .buscador-global { display: flex; align-items: center; gap: var(--sp-4); width: 176px; height: 32px; padding: 0 var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--ink-1000); color: var(--text-muted); font-size: var(--fs-sm); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } @media (hover: hover) { .buscador-global:hover { border-color: var(--line-strong); color: var(--text-secondary); } } .buscador-global .i { flex: none; } /* -------------------------------------------------------------------------- DÓNDE CEDE LA FILA, Y EN QUÉ ORDEN -------------------------------------------------------------------------- El primer piso pasó de cinco piezas a ocho, y el sobrante que antes repartía entre el reloj y el hueco se acabó. Sin un orden declarado, el que cedía era el que tuviera `min-width: 0` —el reloj, a 28px, o sea a nada— mientras el buscador conservaba su palabra y CONTINUAR se cortaba contra el borde. Eso está al revés: el reloj dice cuándo estás parado, el buscador es un atajo, y la acción principal no se corta nunca. El orden, de lo primero que se va a lo último: 1760 la palabra «Buscar» — el icono ya dice qué es 1700 el aire: canalón de fila y flancos de la navegación 1400 la navegación baja un escalón de cuerpo (21 → 18) 1500 la marca de competición — el reloj ya nombra el torneo al lado 1300 las utilidades — son atajos, y el reloj es estado 1240 el reloj entero (regla que ya existía) 1080 lo que ya había: navegación a 16 y buscadores de pantalla en icono Los números salen de MEDIR la fila a cada ancho, no de estimarla: la cuenta a mano daba 1.370 donde el navegador daba 1.333, porque los flancos de la navegación cambian con el propio quiebre que se está midiendo. Todo se mide contra el ANCHO DE VENTANA aunque el sitio se dibuje con `zoom` (`--escala-sitio`): una media query no sabe del zoom, así que a 1440 de ventana la fila tiene 1.384 de maquetación —con la escala en 1,04; eran 1.333 cuando estaba en 1,08—. Por eso los cortes están donde están y no donde parecería. -------------------------------------------------------- */ @media (max-width: 1760px) { .buscador-global__txt { display: none; } .buscador-global { width: 32px; padding: 0; justify-content: center; } } @media (max-width: 1700px) { .chrome__row--primary { gap: var(--sp-4); } /* La navegación cede AIRE, no cuerpo. Son seis palabras largas en español —«Contratación», «Día del partido»— y achicarlas acá es perder el escalón que las hace navegación; juntarlas 2px por lado, no. */ .nav-primary { gap: 0; } .nav-primary__item { padding-inline: var(--sp-3); } } /* LAS TRES GRADAS SON UNA, Y ESTÁ DONDE EL MOBILIARIO ENTRA. Eran tres —la tipografía a 1400, las utilidades y la placa a 1300— y las tres devolvían mobiliario ANTES de que hubiera sitio, así que ensanchar la ventana ROMPÍA la navegación. Medido en una carrera de Boca: ancho 1280 1300 1301 1350 1400 1440 1500 1560 sobra 0 0 138 93 46 77 21 0 A 1300 entran las seis secciones; a 1301 se pasa 138 px. Al cruzar, la ventana gana UN píxel y la fila pide 167 más — hijo por hijo: 1300 placa 65 utiles 0 hueco 6 nav 671 de caja, 621 de contenido 1301 placa 82 utiles 138 hueco 8 nav 521 de caja, 621 de contenido Vuelven las utilidades (+138), engorda la placa (+17) y el hueco pasa de 6 a 8 (+12). Y quien lo paga es siempre la misma: `.chrome__utiles` es `flex: 0 0 auto` y no cede nunca; la navegación es la única `0 1 auto` con `min-width: 0`. En 1400 pasaba lo mismo por el otro lado: el tipo sube de 18 a 21 y el contenido de la nav salta de 621 a 688. LA NAVEGACIÓN VA ANTES QUE LAS UTILIDADES, y esta hoja ya tenía escrita la mitad de la regla —«las utilidades se van antes que el reloj»—. Los cuatro botones de ahí son ATAJOS: buscador, ligas del mundo, tu recorrido y favoritos, y los cuatro se alcanzan por la navegación. Esconder un atajo cuesta un clic; esconder secciones detrás de un arrastre cuesta encontrarlas. EL NÚMERO SALE DEL PEOR ESTADO Y NO DEL CÓMODO, que es la lección que la grada de abajo ya dejó escrita en este mismo archivo. La fila no mide siempre lo mismo: el rótulo del botón va de «Continuar» (145) a «Te esperan 12 tareas» (235, el más ancho de `continuar.js:143`), el reloj encoge hacia su piso de 140 según la fecha, y `.comp-marca` aparece y desaparece con la copa. Con los textos de hoy la fila entera entra desde 1530; con los peores, desde 1588 DE MAQUETACIÓN. Y de ahí al número del `@media` hay un salto que no se ve: **la consulta mide la VENTANA y la maquetación recibe ventana menos la BARRA**, y en toda pantalla que rueda la página la vertical es clásica —las reglas traen `scrollbar-color`, y Chrome con eso puesto no usa superposición— y se lleva 15 px. Comprobado en ventana de verdad, no en iframe: con la grada en 1600, a 1601 de ventana la maquetación recibía 1586 y en el peor estado quedaban 2 px de navegación fuera. La cuenta es `1588 + 14`; va 1620, que deja diecisiete de aire. Y el error se paga distinto de cada lado, así que se redondea hacia arriba a propósito: tarde, se esconden cuatro atajos unos píxeles de más y no lo nota nadie; temprano, se van secciones del juego detrás de un arrastre lateral. */ @media (max-width: 1620px) { .nav-primary__item { font-size: var(--fs-lg); } } /* EL LOGO DE COMPETICIÓN YA NO SE VA. Se escondía a 1500 con este argumento: «el reloj ESCRIBE el torneo y el logo lo dibuja; de los dos se queda el que se puede leer en voz alta». El argumento era bueno y dejó de ser cierto — la caja de fecha ya no escribe el torneo, dice sólo cuándo, como la fuente. Sin ese texto, esconder el logo es quedarse sin decir en qué competición estás. Y el sitio salió de donde estaba el problema: la caja liberó los ~100 px que se llevaba el nombre del torneo, que es más de lo que el logo ocupa. */ /* La placa se estrecha y el hueco se aprieta con la misma grada de arriba: los tres ajustes valen 167 px juntos y hay que darlos —o quitarlos— de una vez. Estaban en 1300 con este argumento, que sigue siendo cierto para lo que miraba: «la banda entre 1240 y 1300 es la peor de todas y era donde CONTINUAR se cortaba». Lo que no miraba es lo que pasa ARRIBA del número. */ @media (max-width: 1620px) { .chrome__placa .crest { width: 48px; height: 48px; } .chrome__row--primary { gap: var(--sp-3); } } /* El reloj no baja de acá: recortado con puntos suspensivos sigue diciendo el torneo, pero por debajo de 140px lo que queda es «Primera Divi…» sin fecha, que es un rótulo ilegible ocupando sitio. Antes de eso ceden los de arriba. */ .clock { min-width: 140px; } /* LAS UTILIDADES SE VAN ANTES QUE EL RELOJ, y hasta hoy se iban después: el orden decía 1240 el reloj y 1180 las utilidades, que contradice el motivo por el que este orden existe —«el reloj dice cuándo estás parado, el buscador es un atajo»—. Estaba escrito el argumento y aplicado al revés. Se arregla ahora porque hacía falta: con la cara nueva, a 1280 la fila se pasaba 36 px y CONTINUAR colgaba 24 fuera de la ventana. Sacar las utilidades devuelve 128 y de paso pone el orden de acuerdo con su propia razón. */ /* EL UMBRAL BAJÓ DE 1620 A 1080 (21/9/2026), Y EL NÚMERO VIEJO NO ESTABA MAL: ESTABA VENCIDO. -------------------------------------------------------------------------- Los 1620 se midieron con el botón de Favoritos todavía en esta fila. Esa barra se fue esta misma mañana y con ella su botón, así que el presupuesto de ancho cambió y nadie volvió a medirlo. Alberto lo notó por el otro lado: «añadime la opción de ir a la home», que estaba puesta desde hace semanas y escondida en su ventana de 1260. Medido ahora, con la fila en `max-content` y sin dejar encoger a nadie —que es la única forma de saber lo que PIDE: en una fila flex, `scrollWidth` iguala a `clientWidth` siempre y la primera medición decía «entra» en los diez anchos, incluidos los que desbordan—: ventana pide hueco 1620 1333 1841 entra 1400 1333 1591 entra 1280 1333 1455 entra 1260 1333 1432 entra ← la de Alberto 1100 1187 1250 entra 1024 1183 1164 NO entra El corte cae entre 1024 y 1100. Va 1080, redondeado hacia arriba por lo mismo que decía el número viejo: tarde, se esconden tres atajos unos píxeles antes de hacer falta y se llega igual por la navegación; temprano, la fila entera se corre de costado. */ @media (max-width: 1080px) { .chrome__utiles { display: none; } } /* LA ÚLTIMA GRADA NO ES UNA GRADA: NO LLEVA `@media`, y es a propósito. MEDIDA, la fila primaria no baja de 941 px de maquetación —64 el historial, 60 la placa, 613 la navegación, 32 la marca de competición, 130 CONTINUAR, más los seis huecos y el relleno—. Contra el ancho de ventana eso son 1.016, y la grada siguiente estaba en 860 (`app.css`): entre 861 y 1016 la fila se pasaba y no la sostenía nadie. Lo que sobraba, medido en una carrera de Boca: 15 px a 1000, 52 a 960, 108 a 900, 144 a 861. ESTO EMPEZÓ SIENDO UN `@media (max-width: 1020px)` Y DURÓ MEDIO DÍA. El número era correcto y aun así llegaba tarde, por dos motivos que son el mismo: **el número que se escribe en un `@media` no es el ancho que va a tener la caja.** · La media query mide la VENTANA y la maquetación recibe ventana menos BARRA. En una pantalla que rueda la página, la vertical clásica se lleva 15 px: a 1024 de ventana, `matchMedia('(max-width: 1020px)')` contesta que no y la fila tiene 1.009 útiles. La regla no entraba justo donde hacía falta. Medido en ventana de verdad, no en iframe —ahí las barras son de superposición y el defecto no aparece—. · Y los 941 NO SON UNA CONSTANTE: son los de esta partida, en este momento. Dos cosas los mueven, y las dos aparecen y desaparecen solas: `.comp-marca` viene vacía mientras no estés en una copa, así que la misma fila mide 931 en un club sin copa y ~1.017 en uno con copa. Y sobre todo EL RÓTULO DEL BOTÓN, que es el caso común y no el raro: `.chrome .action` es `flex: 0 1 auto` con el rótulo que dobla, así que cuando hay tareas pendientes —«Te esperan 2 tareas»— el botón se encoge y la fila entra; cuando no hay nada pendiente el rótulo es «Continuar», entra en un renglón y la fila pide más. El defecto aparecía justo en el estado en que no hay nada que hacer, que es el más frecuente, y se tapaba solo en cuanto había algo pendiente. Un umbral fijo elegido con cualquiera de los dos estados reabre el defecto en el otro, y un defecto que va y viene con la partida es peor que uno fijo: no se reproduce a pedido. Sin `@media` no hay umbral que elegir mal. Mientras la lista entre, un contenedor que puede desplazarse y no tiene nada que desplazar no se ve ni se comporta distinto: `scrollWidth === clientWidth`, no hay barra —va escondida igual— y el `scrollIntoView` de `chrome.js` con `nearest` es inerte. Cede exactamente cuando hace falta, sea por ancho de ventana, por barra clásica, por el zoom del sitio o por una marca de competición que apareció el domingo. Comprobado que a 1021, 1040, 1280, 1440 y 2000 los seis hijos de la fila caen en el mismo píxel que con la grada puesta. Y lo que se veía NO era una barra de más: era CONTINUAR fuera de la ventana. En las pantallas de alto fijo —plantel, mercado, reserva— el `overflow: hidden` del `body` se propaga a la ventana y RECORTA, así que el botón no estaba cortado a medias: no estaba, y no había barra ni rueda que lo trajera. En las que sueltan la página aparecía una barra horizontal y había que empujar la pantalla entera para pulsarlo. Las dos caras del mismo hueco. CEDE LA NAVEGACIÓN, NO LA FILA, y ahí está la diferencia con la grada de 860: ésa pone `overflow-x: auto` en `.chrome__row` entera, que se lleva CONTINUAR adentro del desplazamiento —la acción principal del juego detrás de un arrastre lateral—. Acá se desplaza sólo la lista de secciones, que es una lista y las listas se desplazan, y los cuatro fijos siguen fijos. La barra no se pinta porque la respuesta a «¿dónde estoy?» no la da una barra: `chrome.js` trae al sitio la sección en la que estás. */ .nav-primary { /* `0 1 auto` y NO `1 1 auto`: sólo hace falta que CEDA, no que crezca. Con `flex-grow: 1` la navegación se reparte el hueco libre con `.chrome__spacer` y queda más ancha de lo que mide su contenido — medido a 1280, 613 px de secciones en una caja de 654—. No se ve, porque el hueco que gana es tan vacío como el del espaciador, pero es un cambio sin motivo en la única fila que tiene todo puesto a mano. */ flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; /* EL RELLENO ES PARA EL ANILLO DE FOCO, y el margen negativo lo devuelve. `overflow: auto` recorta contra la caja de relleno aunque no haya nada que desplazar, y el anillo del sistema —`outline: 2px` con `outline-offset: 2` en `app.css:74`— se dibuja 4 px FUERA de la caja del ítem. Medido: los seis ítems miden exactamente el alto de la fila, y el primero y el último tocan sus bordes, así que el anillo quedaba recortado por los cuatro costados y la navegación con teclado dejaba de decir dónde estaba el foco. Los cuatro píxeles se los devuelve el margen: la caja de fuera mide lo mismo que antes y ningún hijo de la fila se mueve. */ padding: 4px; margin: -4px; } .nav-primary::-webkit-scrollbar { display: none; } /* Y CUANDO ESCONDE, LO DICE. Ésta es la otra mitad de la decisión de arriba: la barra no se pinta porque «¿dónde estoy?» lo contesta `alSitio()`, pero eso deja sin contestar «¿hay más?». Medido a 1280 el 4/9/2026: el amortiguador de la fila es `.chrome__spacer` y son 19,7 px; agotado, esta caja se encoge y se come los ítems de a uno —72 px de secciones ocultas en el primer escalón, o sea «Club» y media «Carrera»— sin ninguna señal. Un menú al que le faltan dos entradas y se ve entero es peor que uno recortado: el que no las ve no las busca. ES UNA DEGRADACIÓN Y NO UNA FLECHA, y no es gusto: una flecha es un control —pide sitio en la fila que justamente no lo tiene, y hay que poder pulsarla—, mientras que el borde que se apaga no ocupa nada y dice lo único que hay que decir. Va de los DOS lados por separado: apagado a la izquierda significa «hay algo atrás», a la derecha «sigue», y con las dos puntas encendidas estás en el medio. El estado lo escribe `chrome.js` con `data-mas`, que es quien puede mirar el desplazamiento. LOS 24 px SALEN DEL CONTENIDO Y NO DE UN GUSTO: el ítem más angosto de la navegación es «Club» y mide 71, así que 24 apagan un tercio del más chico —se lee que sigue— y no alcanzan a tapar ninguno entero. ══ Y LA MITAD QUE FALTABA: LA FILA DE SOLAPAS (8/9/2026) ══ Esto lo tenía la fila de SECCIONES y no la de subsecciones, y en el teléfono la que más esconde es la segunda: debajo de 860 las dos filas se desplazan —`app.css`, `.chrome__row { overflow-x: auto }`— y medido con `banco-las-tiras-del-chrome.mjs` sobre las 22 pantallas a 320/390/430 daba **43 tiras de solapas escondiendo hasta 316 px sin ninguna señal**. Cortaba la palabra al ras del borde, que es exactamente lo que llegó reportado por X —«en el celu el overflow le pinta berretín y no se entiende nada»—. No es una regla nueva: es la misma con el selector abierto. Va con `:is()` para no duplicar tres bloques, y la especificidad queda igual —las dos ramas son una clase sola, o sea (0,1,0), y `:is()` toma la de su argumento más específico—, que es lo que deja intacto el desempate de `:focus-within` de acá abajo. */ :is(.nav-primary, .chrome__row--secondary)[data-mas~='izq'] { mask-image: linear-gradient(to right, transparent 0, #000 24px); } :is(.nav-primary, .chrome__row--secondary)[data-mas~='der'] { mask-image: linear-gradient(to left, transparent 0, #000 24px); } :is(.nav-primary, .chrome__row--secondary)[data-mas~='izq'][data-mas~='der'] { mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } /* Y SE APAGA CON EL TECLADO ADENTRO. Medido a 1000 con 86 px de secciones escondidas: al tabular hasta «Carrera» el ítem queda a −0,1 px del borde derecho, o sea ENTERO dentro de los 24 del degradado, y con él su anillo de foco. Sería deshacer con una mano lo que el bloque de arriba arregla con la otra: esa caja se paga un relleno de 4 px y un margen negativo que lo devuelve sólo para que el anillo no se recorte. Se apaga entero y no sólo la punta enfocada porque `mask-image` no sabe de focos, y porque mientras el teclado está adentro la pregunta «¿hay más?» ya la contesta el propio recorrido: tabulando se llega a todas las secciones, estén desvanecidas o no. La señal es para el que mira, no para el que tabula. VA CON `[data-mas]` Y NO PELADO, y eso NO es adorno: `.nav-primary:focus-within` a secas es (0,2,0) y la regla de las dos puntas —`[data-mas~='izq'][data-mas~='der']`— es (0,3,0), así que la pisaba y esto no hacía NADA. Se computaba y no se aplicaba, que es el defecto que no da error ni se ve leyendo la hoja: hay que preguntarle a la propiedad. Con el atributo empata en (0,3,0) y gana por orden, que es el desempate correcto acá. Medido con foco puesto en «Carrera»: `maskImage` pasa de gradiente a `none`. */ .nav-primary[data-mas]:focus-within { mask-image: none; } /* La solapa que sale de la pantalla. La flecha va apagada y no crece con el hover: es un signo de destino, no un control aparte — lo pulsable es la solapa entera. */ /* `--salta` SE FUE CON SUS DOS SOLAPAS (4/9/2026). Marcaba con una flecha las del portal que saltaban a otra pantalla, y esas dos salieron de la barra por repetidas: ver el comentario de `index.html`. Hoy ninguna solapa del juego salta, así que la regla no tenía a quién pintar. El glifo sigue en el sprite —`#i-externo`— para el día que una lo necesite de verdad. */ /* -------------------------------------------------------------------------- 4. LA BARRA DE FAVORITOS SE FUE (21/9/2026) -------------------------------------------------------------------------- Acá vivían la barra de seis atajos del segundo piso, su panel de elección y la guarda que la escondía por debajo de 970 px. El porqué de la baja está en `chrome.js`, donde también estaba su código: ofrecía un atajo a lo que la navegación ya da a un clic y cobraba por él un renglón entero. LA GUARDA DE LOS 970 SE FUE CON ELLA Y NO HACE FALTA REEMPLAZARLA. Existía porque el segundo piso tenía DOS piezas rígidas compitiendo por el ancho —`.nav-sub` y `.marcadores`, las dos `flex: none`— y cuando no entraban no cedía ninguna: se corría la página entera de costado. Con una sola pieza esa competencia no existe. Si alguna vez vuelve una barra de atajos, lo que hay que volver a medir es eso: lo que pide la sección más ancha —el portal— más lo que pida la barra, y a ojo cerrado, achicando la ventana hasta que el desborde aparezca. El método está probado y es lo único que conviene heredar de aquella pieza. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. CONTINUAR, EN DEGRADADO -------------------------------------------------------------------------- Sólo la del chrome. Los otros dieciocho `.action` del juego —vender, firmar, listo— siguen siendo violeta pleno: si todo lo importante fuera degradado, el degradado dejaría de decir cuál es LA acción. -------------------------------------------------------------------------- */ .chrome .action { height: 38px; padding-inline: var(--sp-7) var(--sp-5); border-radius: var(--r-boton); background: var(--accent-degradado); /* Y EL RÓTULO NO SE PARTE. Es lo que hace VERDAD la regla que este archivo ya declaraba —«la acción principal NUNCA cambia de lugar, sólo de etiqueta»—: una etiqueta que se puede partir no cambia la etiqueta, parte el botón. El botón tiene alto fijo —38, y 34 debajo de 1080— y es `flex: 0 1 auto`, así que cuando la fila se quedaba sin sitio el rótulo doblaba y el contenido se salía de la píldora por abajo. Empezó cuando el botón pasó de decir «Continuar» a decir una frase (72cb072): «Continuar» nunca dobló. MEDIDO con «Te esperan 2 tareas» —el rótulo de entonces; hoy el botón dice el paso que sigue, ver el presupuesto reescrito al final de esta sección— y el ancho útil recortado 15 px, que es lo que se lleva una barra vertical clásica —contenido / caja—: ancho doblando con `nowrap` 860 146 px, 2 renglones 206 px, 1 renglón 38 / 34 34 / 34 960 167, 2, 38 / 34 206, 1, 34 / 34 1024 181, 2, 38 / 34 206, 1, 34 / 34 1280 205, 2, 40 / 38 210, 1, 38 / 38 Y no cuesta sitio a nadie más: el borde derecho del botón no se mueve —medido a 1000, queda en 972 con `nowrap` y sin él— y CONTINUAR sigue adentro con sus 12 px de aire en los cuatro anchos. Lo que cede son 24 a 59 px MÁS de navegación, que es la que tiene que ceder (ver la regla de `.nav-primary` acá arriba). Sin barra clásica el defecto es el mismo, sólo que en anchos más chicos: lo que lo dispara es que la fila se quede sin sitio, no un número. */ white-space: nowrap; } @media (hover: hover) { .chrome .action:hover:not(:disabled) { background: var(--accent-degradado-hover); } } /* -------------------------------------------------------------------------- Y EL BOTÓN SE ADELANTA CUANDO LE PASÁS POR ENCIMA -------------------------------------------------------------------------- «Otra animación, con el hover o algo» —Alberto, 22/9/2026—. El botón que relata el paso ya avisa solo —el anillo cada tres segundos, la palabra nueva entrando— y le faltaba contestar cuando lo mirás: hasta acá el hover era un cambio de degradado, que en dos violetas consecutivos casi no se ve. SON DOS GESTOS Y CADA UNO DICE UNA COSA DISTINTA: · LA PÍLDORA SE LEVANTA UN PÍXEL. Es el «te escuché» de cualquier control, y uno alcanza: dos ya es un botón que salta. Al pulsar vuelve a cero, que es el gesto completo —se levanta, se hunde— y no dos estados sueltos. · EL CHEVRÓN SE CORRE TRES. Éste es el que dice algo que el color no: ADÓNDE va. La flecha que ya estaba dibujada empuja hacia su lado, y con el rótulo diciendo «Contestar el planteo» eso se lee como el principio del viaje. `transform` Y NO `box-shadow`, y no es preferencia: el latido de `continuar.js` anima `box-shadow` con la API web, que está por encima de toda la cascada — una sombra de hover escrita acá no se vería nunca. Ver la nota entera al lado de `.action__mas` en `app.css`. SÓLO EN EL BOTÓN DEL CHROME, que es el que tiene el degradado y el oficio de llevarte a algún lado. Los otros dieciocho `.action` del juego siguen con su hover de color: si todo se levantara, levantarse dejaría de decir cuál es LA acción, que es el mismo argumento con el que este botón se quedó solo con el degradado. Y `hover: hover` deja afuera al teléfono, donde `:hover` se queda pegado después de tocar; `prefers-reduced-motion` lo apaga entero, y no se pierde nada: el degradado del hover sigue estando. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .chrome .action { transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .chrome .action > .i:last-child { transition: transform var(--dur-pantalla) var(--ease); } .chrome .action:hover:not(:disabled) { transform: translateY(-1px); } .chrome .action:hover:not(:disabled) > .i:last-child { transform: translateX(3px); } .chrome .action:active:not(:disabled) { transform: translateY(0); } } /* Y el `:active` deja de ser CAL. Estaba en verde-lima por herencia del mundo anterior —cuando la cal era el acento del producto— y desde el repintado pulsar Continuar daba un destello verde que ninguna guía pide. */ .chrome .action:active:not(:disabled) { background: var(--accent-degradado); filter: brightness(0.86); } .chrome .action .i { opacity: 0.9; } @media (max-width: 1080px) { .chrome .action { height: 34px; padding-inline: var(--sp-6) var(--sp-4); } } /* -------------------------------------------------------------------------- 6. LA FILA PRIMARIA EN EL TELÉFONO -------------------------------------------------------------------------- Debajo de 860 la fila entera pasa a ser un carrusel horizontal (`app.css`, `.chrome__row { overflow-x: auto }`). Esa decisión se queda: en 347 px de ancho útil no hay forma de que entren la placa del club, las seis secciones y CONTINUAR, y las otras dos salidas —plegar la barra o esconder secciones— cuestan más de lo que arreglan. Lo que NO se queda son las dos cosas que ese carrusel rompía, y las dos se midieron a 390×844 con la carrera sembrada y el botón diciendo «Te esperan 2 tareas», que es el rótulo largo y por lo tanto el caso malo (ver el desglose de `.chrome .action` acá arriba: el rótulo cambia el ancho del botón, así que cualquier medida de esta fila hay que anotarla con lo que decía el botón). · CONTINUAR SE IBA DETRÁS DEL ARRASTRE. 61 px del botón quedaban fuera del carrusel a 390, 91 a 360 y 21 a 430 — la acción principal del juego, la que hace avanzar el tiempo, escondida detrás de un gesto que nada anuncia. Es exactamente lo que la regla de `.nav-primary` de esta hoja ya declaraba mal cuando explicaba por qué ahí cede la navegación y no la fila. Se ancla con `sticky` y no escondiendo vecinos: el botón se queda pegado al borde derecho mientras el resto de la fila corre por debajo, así que no se pierde ninguna pieza y no hay umbral que elegir mal. Lleva fondo propio —el degradado— y por eso puede tapar lo que pasa detrás. · LA NAVEGACIÓN QUEDABA EN UNA ASTILLA DE 9 px. `.nav-primary` es `flex: 0 1 auto` con `min-width: 0` para que ceda, y en el teléfono cedía TODO: las seis secciones seguían ahí, dentro de un desplazamiento de nueve píxeles de ancho. Técnicamente alcanzable; en la práctica, el juego sin navegación. Y acá la nav DEJA DE DESPLAZARSE POR SU CUENTA, que es lo contrario de lo que pide arriba de 860. El motivo es que la fila ya es un carrusel: dejarle el suyo a la navegación pone un carrusel horizontal DENTRO de otro, y en una pantalla táctil eso no se maneja —el dedo cae en uno o en el otro según dónde apoye, y ninguno de los dos anuncia dónde termina—. Sin su `overflow`, las seis secciones son seis piezas más de la única fila que se arrastra, y un gesto las recorre todas. -------------------------------------------------------------------------- */ @media (max-width: 860px) { /* Y LA FILA PIERDE EL RELLENO DE LA DERECHA, que no es un detalle: el botón anclado se pega al borde del ÁREA DE DESPLAZAMIENTO, y ese relleno queda a su derecha como una franja de veinte píxeles por la que se ve pasar el texto de las secciones. Con el relleno en cero no hay franja que tapar. Teñir esos veinte píxeles con `--bg-chrome` era la otra salida y se descartó: el tinte del club vive detrás y no termina de disolverse hasta los 320 px, así que abajo de ~365 de ventana el parche se ve como costura (los números, en la sección 1 de esta hoja). */ .chrome__row--primary { padding-right: 0; /* Y EL ANCLAJE DE LA SECCIÓN ACTUAL ATERRIZA A LA IZQUIERDA DEL BOTÓN. `chrome.js` trae al sitio la sección en la que estás con un `scrollIntoView({inline:'nearest'})`, y `nearest` cumple dejándola en el borde del ÁREA DE DESPLAZAMIENTO — que acá termina debajo del botón anclado—. Medido en `plantel` a 390: la fila arranca desplazada 5 px, el botón ocupa de 153 a 375, y las dos únicas secciones que caían dentro del carrusel —«Portal» y «Plantilla»— quedaban las dos tapadas; `elementFromPoint` sobre su centro devolvía el `` del botón, o sea que NINGUNA de las seis se podía tocar sin arrastrar la barra a ciegas. El relleno de desplazamiento le dice al navegador que ese pedazo no cuenta como visible. No mueve un píxel del dibujo: sólo cambia dónde aterriza el desplazamiento. Los 240 cubrían el botón más largo de entonces —«Te esperan 2 tareas», 222— con doce de aire, y hoy se quedan cortos por once: el botón que relata llega a 251. No se toca porque esta línea ya no corre: la sección 7 de esta hoja la pone en cero en la misma media query, que es donde el carrusel dejó de existir. */ scroll-padding-inline-end: 240px; } .chrome__row--primary .action { position: sticky; right: 0; z-index: 2; } .nav-primary { flex: 0 0 auto; min-width: auto; overflow-x: visible; } } /* -------------------------------------------------------------------------- 7. LA NAVEGACIÓN, EN SU PROPIO RENGLÓN -------------------------------------------------------------------------- El carrusel de la sección 6 resolvía que nada se saliera, pero no que se pudiera USAR. Medido a 375 con `elementFromPoint` sobre el centro de cada sección: el botón anclado ocupa de 153 a 375 —el 59 % de la barra— y de las seis secciones sólo entraban dos en el carrusel, las dos debajo del botón. Ninguna se podía tocar. El `scroll-padding` de la sección 6 salva a la sección ACTUAL; las otras cinco seguían detrás de un arrastre a ciegas. Acá la fila deja de ser un carrusel y pasa a tener dos renglones: arriba la identidad y la acción, abajo las seis secciones a todo el ancho, con su propio desplazamiento y sin nada encima. Es lo que hace cualquier aplicación de teléfono, y cuesta un renglón de 44. PARA QUE EL RENGLÓN DE ARRIBA ENTRE HAY QUE SACARLE DOS COSAS, y las dos se eligieron por medida y no por gusto. Con los controles a 44 —la sección del dedo, en `app.css`— la fila pedía 96 de flechas + 65 de escudo + 35 de escudo de liga + 222 de botón = 418 en 375 de ancho útil: · LA FLECHA DE ADELANTE. Las dos flechas pasaron de 69 px a 96 al engordar para el dedo, y de las dos, «adelante» sólo sirve después de haber usado «atrás». En una instalación de pantalla completa —el `manifest` declara `standalone`— el navegador no presta ninguna, así que «atrás» se queda: es la única forma de volver. Se va la otra, y son 52 px. · EL ESCUDO DE LA LIGA. Es decoración: quién sos lo dice el escudo del club, que está al lado y mide 65. Son 35 px más. Quedan 44 + 65 + 222 = 331 con dos huecos de 8: 347 en 375, con 28 px de aire para que un rótulo de botón más largo que «Te esperan 2 tareas» —el más largo medido, 222— siga entrando en un renglón. Y ESE AIRE SE GASTÓ, A SABIENDAS. Desde el 22/9/2026 el botón no dice una cuenta sino el paso que sigue —«Contestar el planteo», «Sacar al sancionado», más la insignia de las que faltan— y eso mueve el presupuesto de 222 a 251, que es «Drop the suspended man», el más largo de los dos idiomas. Medido en la fila de verdad: 375 los diez pasos en castellano y los tres largos en inglés, UN renglón 320 los que pasan de ~210 bajan a su propio renglón A 375 —el ancho que mide `vara-la-barra-entra.mjs`, y el más chico de los cuatro iPhone que usa— entra todo con la flecha y el escudo al lado. A 320 el botón se va a un renglón suyo, y eso es lo que tiene que pasar: la fila es `flex-wrap: wrap` desde esta misma sección, así que lo que ocurre es que envuelve. No se recorta un rótulo, no se esconde una pieza y no se desborda la página —comprobado a 320: `scrollWidth` igual a la ventana en los siete rótulos—. Un renglón de más en una pantalla de 320 es más barato que un botón que no dice a qué te lleva. Y EL BOTÓN SE DESANCLA, porque ya no hay nada que se le pase por debajo: `sticky` era la respuesta a un carrusel que acá dejó de existir. Se va con él el `scroll-padding`, que existía para el mismo problema. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .chrome__row--primary { flex-wrap: wrap; height: auto; overflow-x: visible; scroll-padding-inline-end: 0; column-gap: var(--sp-2); row-gap: var(--sp-2); padding-block: var(--sp-2); /* El relleno lateral baja de --sp-5 a --sp-3: son 16 px de ancho útil que el renglón de arriba necesita para que el botón entre al lado del escudo en vez de irse a un tercer renglón. */ padding-inline: var(--sp-3); } .chrome__row--primary .action { position: static; } .history__btn[aria-label='Adelante'] { display: none; } .comp-marca { display: none; } /* Y EL ESCUDO PIERDE SU AIRE LATERAL, que es lo que compra el margen. Con el relleno de --sp-3 la placa mide 65 y el renglón de arriba cerraba en 384 de 390: seis píxeles, o sea que el primer rótulo de botón más largo que «Te esperan 2 tareas» lo mandaba a un tercer renglón justo en el ancho de teléfono más común. Con --sp-1 la placa mide 48 y sobran 23, y el corte a dos renglones baja de ~390 a ~373: entran también los de 375. El escudo no se achica, se le saca el margen. */ .chrome__placa { padding-inline: var(--sp-1); } /* El renglón de abajo: a todo el ancho y con su desplazamiento propio. Acá SÍ va `overflow-x`, al revés de la sección 6, y por el mismo motivo por el que allá no iba: allá la fila entera era un carrusel y anidar uno adentro de otro deja al dedo sin saber cuál agarra. Acá la fila ya no se desplaza, así que el único carrusel de la barra es éste. */ .nav-primary { /* `order` Y NO SÓLO LA BASE DEL 100 %. En el marcado la navegación viene ANTES del espaciador y del botón, así que al tomar su renglón empuja a los dos al siguiente y la barra queda en tres pisos, con CONTINUAR debajo de las secciones. Medido: 164 px de alto y el botón en 112. Mandándola al final del orden visual, arriba quedan las flechas, el escudo y el botón, y abajo las secciones. */ order: 1; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav-primary::-webkit-scrollbar { display: none; } } /* ========================================================================== EL RIEL DE LA IZQUIERDA — RETIRADO EL 21/9/2026 -------------------------------------------------------------------------- Vivió un día. Era una columna fija de 206 px con los veinticuatro destinos del juego agrupados, dibujada por `chrome.js` desde el mismo `MAPA` que los desplegables. Estaba medida: entraba desde 1200, no desbordaba en ninguna de las veintiuna pantallas y marcaba un solo destino de los veinticuatro. La sacó Alberto mirándola: «no suma y sólo achica los espacios». El porqué vale más que el componente: se llevaba una columna entera de contenido para ofrecer un atajo a lo que la sub-nav de cada pantalla ya ofrece. **Un atajo que cuesta una columna no es un atajo, es un peaje.** Si alguna vez vuelve, la condición es que NO le quite ancho al contenido: encima, desplegable, o en el hueco que sobra en un monitor muy ancho. Al lado, no. ========================================================================== */ /* ========================================================================== 9. EL SALTO DE LA TEMPORADA, ANCLADO EN LA FILA DE ABAJO -------------------------------------------------------------------------- «Que el botón del salto quede siempre a la vista» —Alberto, 22/9/2026—. Bajó de la cabecera del calendario; el porqué de la mudanza está en `index.html`, en el hueco que dejó, y el manejador propio que la mudanza obligó a escribir está en `inicio.js`. ESTA FILA YA SE COMIÓ UNA PIEZA Y LA ESCUPIÓ, y está contado en la sección 4: la barra de favoritos vivía acá y tuvo que esconderse por debajo de 970 px porque ella y `.nav-sub` eran las dos `flex: none` y no cedía ninguna — la página se corría de costado. La nota terminaba diciendo qué medir si volvía una pieza a esta fila: lo que pide la sección más ancha más lo que pida la pieza, achicando la ventana hasta que el desborde aparezca. Se midió, y la respuesta es que acá hay UNA sola rígida. El botón es `flex: none` —210 px, dentro del presupuesto de 222 de la píldora del chrome— y las solapas ceden, que es lo que ya saben hacer: por debajo de 860 px `.chrome__row` es `overflow-x: auto` y se vuelve un carrusel. -------------------------------------------------------------------------- */ /* Y NO PUEDE LLEVAR EL DEGRADADO, que es lo primero que se vio al mirarlo. -------------------------------------------------------------------------- `.chrome .action` —sección 5 de este archivo— le pone `--accent-degradado` a TODO `.action` que viva en la barra, y el `.action--callada` del marcado no alcanza para ganarle: la regla del chrome es más específica. Resultado en la primera foto a 390: dos píldoras amarillas apiladas, «Contestar la oferta» arriba y «Simular toda la temporada» justo debajo, las dos con el mismo peso. Lo dice la propia nota de aquella sección y es la regla de la casa: «si todo lo importante fuera degradado, el degradado dejaría de decir cuál es LA acción». Arriba vive LA acción —el botón grande, que cambia de etiqueta y nunca de sitio— y ésta es otra cosa: un atajo que está siempre disponible y casi nunca es lo que hay que hacer ahora. Así que se le devuelve el trato callado que el marcado ya pedía. No es una excepción caprichosa: es la misma jerarquía que el juego usa en las otras dieciocho pantallas, aplicada al único `.action` de la barra que no es EL botón. */ /* EL SELECTOR LLEVA LAS TRES CLASES A PROPÓSITO. `.chrome .action` es (0,2,0) y `.chrome__salto` sola es (0,1,0): escrito corto, esto no gana y el botón sigue saliendo amarillo. Es el caso que la casa ya tiene anotado —un valor copiado de la base se vuelve el techo el día que la base cambia— por el otro extremo: acá lo que falta no es el valor, es el peso. */ .chrome .action.chrome__salto { flex: none; background: none; border: 1px solid var(--line-control); color: var(--text-secondary); } @media (hover: hover) { .chrome .action.chrome__salto:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--line-control-strong); color: var(--text-primary); } } /* Y ABAJO DE 860 EL CARRUSEL SE LO LLEVARÍA PUESTO, que es la mitad que este cambio venía a arreglar. Con la fila desplazándose de costado, un botón al final de la tira está fuera de pantalla hasta que alguien la rueda — o sea exactamente el defecto de antes, mudado de eje: antes había que rodar 1.358 px hacia abajo, ahora habría que rodar de costado. `sticky` contra el borde derecho lo deja quieto mientras las solapas pasan por debajo. Lleva fondo propio y no es decoración: sin él las solapas se leen A TRAVÉS del botón cuando la tira se desplaza. El degradado de la izquierda es el mismo recurso que la fila ya usa para avisar que hay más (`[data-mas~='der']`), del lado que ahora tapa el botón. */ /* TRES RÓTULOS Y UN SOLO ENCENDIDO. El largo manda, y los otros dos aparecen sólo donde la fila los paga. El primer corte es el mismo 860 del carrusel a propósito: por encima la fila no desborda y acortar no le devuelve nada a nadie. El segundo es 374, medido: ver la nota del marcado en `index.html`. */ .chrome__salto-corto, .chrome__salto-min { display: none; } @media (max-width: 860px) { .chrome__salto-largo { display: none; } .chrome__salto-corto { display: inline; } /* Y EL RELLENO SE APRIETA, que son siete píxeles y deciden un ancho entero. `.chrome .action` lleva `padding-inline: var(--sp-7) var(--sp-5)` —16 y 8— porque es el del botón grande, que tiene una flecha del lado corto. Éste no la tiene. Con 8 y 8 el botón pasa de 119 a 112 px, y 112 es justo lo que hace falta para que «Calendario» entre a 360 sin tocar el rótulo: el umbral medido ahí es 114. */ .chrome .action.chrome__salto { padding-inline: var(--sp-5); position: sticky; right: 0; z-index: 2; margin-left: var(--sp-4); /* Y EL FONDO LLEVA EL TINTE DEL CLUB, no `--bg-chrome` pelado. Esta fila no tiene fondo plano: se lo pinta `.chrome__row--secondary::before` con un degradado que arranca en 34 % sobre la esquina y se apaga hacia la derecha. Un botón con el fondo sin teñir se lee como un parche más claro pegado al borde — probado, y se ve—. El 14 % es donde está el degradado a la altura del borde derecho en una ventana de teléfono: entre el 22 % de los 125 px y el 9 % de los 560. */ background: color-mix(in srgb, var(--club-fondo, transparent) 14%, var(--bg-chrome)); box-shadow: -12px 0 12px -6px color-mix(in srgb, var(--club-fondo, transparent) 14%, var(--bg-chrome)); } } /* Y A 374 SE CAE LA SEGUNDA PALABRA. Medido forzando el ancho del botón, el umbral para que «Calendario» entre sin arrastrar es 114 px a 360 y 75 px a 320. Con el relleno apretado «Simular el año» mide 112 —pasa a 360, no a 320— y «Simular año» mide 96, que tampoco pasa. Con una palabra son 67. El corte va en 374 y no en 375 porque 375 es el primer ancho que SÍ entra con el rótulo de dos palabras: el iPhone SE y el mini se quedan con la palabra sola, y de ahí para arriba nadie la ve. El nombre entero sigue en `aria-label` y en el globo; ver la nota del marcado. */ @media (max-width: 374px) { .chrome__salto-corto { display: none; } .chrome__salto-min { display: inline; } } /* ========================================================================== 10. LA CHINCHE DE «ABRE ACÁ» (22/9/2026) -------------------------------------------------------------------------- RENUMERADA DE 9 A 10 AL MERGEAR (22/9/2026): la sección 9 se la ganó el botón del salto, que entró a esta misma hoja el mismo día y desde otra rama. Las dos son piezas nuevas del chrome y ninguna toca a la otra —aquélla vive en la fila de abajo, ésta adentro del desplegable—, así que el choque era el número y nada más. Se queda con el 9 la que ya está en producción. Lo cuarto del deep dive de FM27: elegir en qué pantalla aterriza cada opción de la navegación. La chinche vive en la fila del destino, dentro del desplegable de sección que ya existe, así que cuesta CERO píxeles de la pantalla — no hay panel nuevo ni fila nueva; hay un botón más en una fila que ya estaba. LA FILA SE ENVUELVE Y EL ENLACE NO CAMBIA. `