/* ========================================================================== 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); } .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. */ @media (max-width: 1620px) { .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; } /* 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. */ .nav-sub__item--salta .i { color: var(--icon-quiet); margin-left: 1px; } .nav-sub__item--salta:hover .i { color: var(--text-secondary); } /* -------------------------------------------------------------------------- 4. LA BARRA DE MARCADORES -------------------------------------------------------------------------- Seis atajos en el segundo piso, a la derecha. Es la pieza del portal de FM26 que más trabajo hace por lo poco que ocupa: este juego son veinte documentos y cinco de ellos concentran casi todas las visitas, pero viven a dos clics —abrir la sección, elegir la subsección— desde cualquier otra sección. -------------------------------------------------------------------------- */ .marcadores { display: flex; align-items: center; gap: var(--sp-2); flex: none; margin-left: auto; } .marcadores__btn { display: flex; align-items: center; gap: var(--sp-3); height: 22px; padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .marcadores__btn:hover { background: var(--bg-active); color: var(--text-primary); } .marcadores__btn[aria-expanded='true'] { background: var(--bg-active); color: var(--text-primary); } .marcadores__btn .i { width: 12px; height: 12px; opacity: 0.7; } .marcadores__tira { display: flex; align-items: center; gap: 1px; } /* Misma razón que los cuatro de la barra: la tira de marcadores es la fila hermana y se lee junto con ella, así que los dos grupos dibujan el glifo al mismo tamaño o la segunda fila parece apagada al lado de la primera. */ .marcadores__tira .i, .marcadores__btn .i { width: 18px; height: 18px; } .marcadores__link { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); color: var(--icon-quiet); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .marcadores__link:hover { background: var(--bg-active); color: var(--text-primary); } .marcadores__link[aria-current='page'] { color: var(--nav-aqui); } /* LA GUARDA ESTABA DONDE NO ENTRA, Y ES EL MISMO DEFECTO DE LA FILA DE ARRIBA. El segundo piso son dos piezas RÍGIDAS: `.nav-sub` es `flex: none` y `.marcadores` también, con `margin-left: auto`. Nadie cede, así que cuando no entran no se estrecha ninguna: se pasa la PÁGINA, y el juego entero se corre de costado. La guarda escondía la barra a 1080 y a 1100 el portal se iba 65 px fuera de la ventana. EL NÚMERO SALE DE LA SECCIÓN MÁS ANCHA, que es el portal — y es la pantalla donde empieza casi toda sesión. Lo que pide la fila, medido por sección con una carrera de Boca: sección nav-sub marcadores pide Portal 857 261 1159 Plantilla 491 261 792 Contratación 468 261 769 Carrera 221 261 523 Día del partido 186 261 488 Club — — — (no tiene segundo piso) Y la del portal es su PEOR estado, no el cómodo: las dos últimas solapas —«Competencias» e «Informe del rival»— son `--salta` y las pone el guion sólo cuando hay copa y hay próximo rival. Con las cinco del mapa la fila pide 932; con las siete, 1 159. El número tiene que ser el de las siete. La cuenta de arriba es de cajas y se queda corta por el redondeo, así que el punto se midió A OJO CERRADO, achicando la ventana hasta que el desborde aparece: 1166 da 0 y 1160 da 5, o sea que **el piso real son 1165 de maquetación**. De ahí al `@media` hay un salto que no se ve, y es el mismo que la fila primaria dejó escrito: **la consulta mide la VENTANA y la maquetación recibe ventana menos la BARRA.** Donde la vertical es clásica se lleva ~15 px, así que la cuenta es `1165 + 15 = 1180`. Va 1220, que deja cuarenta de aire para la subsección que venga. Se redondea hacia arriba a propósito, porque el error se paga distinto de cada lado: tarde, se esconden seis atajos unos píxeles antes de hacer falta y se llega igual por la navegación, que es un clic; temprano, la página entera se arrastra de costado. Y esconder la barra —y no dejar rodar `.nav-sub`— es lo que manda la regla de esta hoja: los marcadores son atajos, las solapas del segundo piso son el juego. */ @media (max-width: 1220px) { .marcadores { display: none; } } /* El panel de elegir cuáles. Una lista con casilla, no un diálogo: elegir seis de dieciocho es una tarea de un vistazo y un modal la convertiría en un trámite. Se guarda al instante en la partida, sin botón de confirmar. */ .marcadores__panel { position: fixed; z-index: var(--z-flotante); width: 268px; max-height: 60vh; overflow: auto; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-panel); } .marcadores__panel[hidden] { display: none !important; } .marcadores__cabeza { padding: var(--sp-3) var(--sp-4) var(--sp-4); color: var(--text-muted); font-size: var(--fs-2xs); } .marcadores__opcion { display: flex; align-items: center; gap: var(--sp-4); width: 100%; height: 28px; padding: 0 var(--sp-4); border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); text-align: left; } .marcadores__opcion:hover { background: var(--bg-active); color: var(--text-primary); } .marcadores__opcion .i { color: var(--icon-quiet); flex: none; } .marcadores__opcion[aria-pressed='true'] { color: var(--text-primary); } .marcadores__opcion[aria-pressed='true'] .i--tilde { color: var(--accent); } .marcadores__opcion .i--tilde { margin-left: auto; opacity: 0; } .marcadores__opcion[aria-pressed='true'] .i--tilde { opacity: 1; } /* -------------------------------------------------------------------------- 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-md); 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» 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; } .chrome .action:hover:not(:disabled) { background: var(--accent-degradado-hover); } /* 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 cubren el botón más largo medido —«Te esperan 2 tareas», 222— con doce de aire. */ 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 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; } }