*, *::before, *::after { box-sizing: border-box; } /* Reserva el hueco de la barra de scroll SIEMPRE, aunque no haga falta todavía. Sin esto: la página arranca corta (sin tabla, sin scroll) y en cuanto llegan los datos se vuelve más alta que el viewport — aparece la barra vertical y todo el contenido se desplaza ~15px a la izquierda. Medido en producción: 1280px de ancho útil sin tabla, 1265px con tabla. Mismo tipo de bug que el del CLS de la leyenda (ver comentario más abajo), pero en horizontal y por scrollbar en vez de por `hidden`. `scrollbar-gutter: stable` (la solución "moderna") NO tuvo ningún efecto probado en el elemento raíz — comprobado en el navegador real, seguía desplazando igual. `overflow-y: scroll` es la solución de toda la vida y SÍ se comprobó estable en los dos estados (con tabla y sin ella): fuerza la barra siempre, así nunca aparece de la nada. */ html { overflow-y: scroll; } body { margin: 0; padding: calc(var(--alto-nav) + 1.5rem) 1rem 4rem; background-color: var(--fondo); color: var(--texto); font-family: var(--fuente); line-height: 1.5; /* Fondo atenuado: posiciones y alfas calcadas literalmente de 2daDivision (common-head.css, regla `body`): manchas en 60% 30% / 10% 80%, alfas 12% / 6% / 3%. Único cambio real: rojo de marca en vez de verde+naranja. El primer intento (80% 0%, 14%/6%/6%) reposicionó "a ojo" y el círculo principal quedó con el centro clipeado fuera del viewport y tapado por el nav — se veía plano porque casi no pintaba nada. Con estos valores el centro cae dentro del área visible (confirmado con elementFromPoint en el navegador real, no solo mirando una captura). `min-height: 100dvh` en `body` iguala el otro punto del hermano que faltaba. */ background-image: radial-gradient(ellipse 70% 60% at 60% 30%, var(--marca-resplandor) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 10% 80%, var(--marca-resplandor-2) 0%, transparent 60%), repeating-linear-gradient(90deg, var(--marca-rejilla) 0px, var(--marca-rejilla) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg, var(--marca-rejilla) 0px, var(--marca-rejilla) 1px, transparent 1px, transparent 60px); background-attachment: fixed; min-height: 100dvh; } .contenedor { max-width: var(--ancho-max); margin: 0 auto; } /* Barra fija: mismo ancho de contenido que .contenedor, pero el fondo ocupa todo el viewport. El padding-top de reserva su alto para que no tape el contenido al cargar. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--alto-nav); display: flex; align-items: center; background: var(--superficie); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); } .nav__inner { display: flex; align-items: center; gap: var(--espacio-3); width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 1rem; } .nav__logo { width: 32px; height: 32px; flex-shrink: 0; } .nav__marca { font-family: var(--fuente-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .nav__links { display: flex; gap: var(--espacio-4); margin-left: auto; } .nav__links a { color: var(--texto-suave); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.35rem 0; border-bottom: 2px solid transparent; } .nav__links a:hover { color: var(--texto); } .nav__links a[aria-current='page'] { color: var(--marca); border-bottom-color: var(--marca); } /* Detectado en un iPhone real (captura del usuario, 2026-09-14): con las tres cosas a la vez — logo, "2ª Federación" y los tres enlaces — "Avisos" quedaba cortado por el borde de la pantalla, sin scroll que lo revelara (.nav__inner no envuelve ni hace scroll horizontal). El nombre junto al logo es redundante en móvil: el

"Segunda Federación" ya lo dice justo debajo, a un scroll de nada. Se quita SOLO aquí, no en escritorio, donde sí hay hueco y sirve de ancla mientras se hace scroll más abajo. / @media (max-width: 480px) { .nav__marca { display: none; } } header { padding: 0 0 1.25rem; } h1 { margin: 0; font-family: var(--fuente-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; letter-spacing: 0.01em; } .subtitulo { margin: 0.35rem 0 0; color: var(--texto-suave); font-size: 0.95rem; } .grupos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; } .grupos a, .grupos button { padding: 0.45rem 0.9rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.9rem; cursor: pointer; / Clasificación usa enlaces (uno por grupo, para que Google los siga) y Resultados sigue con botones: mismo aspecto para los dos. / text-decoration: none; } .grupos a:hover:not([aria-current='true']), .grupos button:hover:not([aria-current='true']) { background: var(--marca-tinte); border-color: var(--marca); } .grupos a[aria-current='true'], .grupos button[aria-current='true'] { background: var(--marca); border-color: var(--marca); color: #fff; } / La tabla es ancha: que scrollee ella, nunca la página. Antes, a partir de 620px las columnas G/E/P/Goles se ELIMINABAN (display:none) en vez de quedar accesibles con scroll — con eso fuera, la tabla encajaba justa en el contenedor y `overflow-x: auto` no tenía nada que desplazar. Por fuera parecía que el gesto de deslizar no funcionaba; en realidad no había ningún exceso de ancho que desplazar. Detectado por el usuario probando en su móvil, comprobado midiendo scrollWidth vs clientWidth con el DOM real. Ahora las 9 columnas se mantienen siempre y es la tabla la que se desborda del contenedor, con scroll real. Las dos gradient-images de los lados dan la pista de que hay más tabla: sin ellas nada en pantalla insinúa que se puede deslizar, que es la otra mitad de por qué no se notaba. `background-attachment: local` hace que se desplacen con el contenido y desaparezcan solas al llegar al final — truco CSS puro, sin JS. / .tabla-envoltorio { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); background-image: linear-gradient(to right, var(--superficie) 30%, rgb(255 255 255 / 0%)), linear-gradient(to left, var(--superficie) 30%, rgb(255 255 255 / 0%)), linear-gradient(to right, rgb(0 0 0 / 12%), rgb(255 255 255 / 0%)), linear-gradient(to left, rgb(0 0 0 / 12%), rgb(255 255 255 / 0%)); background-position: left, right, left, right; background-repeat: no-repeat; background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%; background-attachment: local, local, scroll, scroll; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } thead th { position: sticky; top: 0; padding: 0.7rem 0.5rem; background: var(--superficie); border-bottom: 1px solid var(--borde); color: var(--texto-suave); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; white-space: nowrap; } thead th:nth-child(1), thead th:nth-child(2) { text-align: left; } tbody td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--borde); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--fuente-num); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } / Seguir una fila con la vista en una tabla de 18 filas y 9 columnas cuesta; el resalte al pasar el ratón es la ayuda barata. Con :not() para no tapar el tinte de zona, que lleva información y el hover no. / tbody tr:not([class='zona-']):hover { background: var(--fondo); } td.pos { width: 2.5rem; text-align: left; color: var(--texto-suave); position: relative; padding-left: 0.9rem; } /* Franja de color por zona (ascenso / playoff / descenso) / td.pos::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; } tr.zona-ascenso td.pos::before { background: var(--ascenso); } tr.zona-playoff td.pos::before { background: var(--playoff); } tr.zona-permanencia td.pos::before { background: var(--permanencia); } tr.zona-descenso td.pos::before { background: var(--descenso); } / Segundo canal: un tinte de fondo, para no depender solo de 3px de color. / tr.zona-ascenso { background: var(--ascenso-tinte); } tr.zona-playoff { background: var(--playoff-tinte); } tr.zona-permanencia { background: var(--permanencia-tinte); } tr.zona-descenso { background: var(--descenso-tinte); } td.equipo { text-align: left; font-family: var(--fuente); white-space: normal; min-width: 12rem; } / Escudo y nombre en la misma línea. A propósito NO se usa flex sobre el : convertir una celda en contenedor flex se lleva mal con border-collapse. Con inline-block la celda sigue siendo una celda. / td.equipo .escudo { display: inline-block; vertical-align: top; / El ya trae width/height —lo que reserva el hueco y evita el salto de layout—; esto solo lo blinda ante cambios de tipografía. / width: 20px; height: 20px; object-fit: contain; margin-right: 0.55rem; } td.equipo .nombre { display: inline-block; vertical-align: top; } / Solo si hay escudo delante hay que descontar su ancho, para que un nombre largo se parta bajo sí mismo y no bajo el escudo. Sin el selector de hermano, los grupos que todavía no tienen escudos perderían 25px de ancho útil a cambio de nada y partirían los nombres antes de tiempo. / td.equipo .escudo + .nombre { max-width: calc(100% - 20px - 0.55rem); } td.equipo .region { display: block; color: var(--texto-suave); font-size: 0.78rem; } td.pts { font-weight: 700; } .estado { padding: 2rem 0; color: var(--texto-suave); } .estado.error { color: var(--descenso); } .aviso { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--descenso); background: var(--superficie); border-radius: 0 var(--radio) var(--radio) 0; font-size: 0.88rem; color: var(--texto-suave); } / Leyenda de zonas. Es quien lleva de verdad el significado de los colores: el color solo acompaña. / .leyenda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.84rem; color: var(--texto-suave); } / OBLIGATORIO, no es cosmético: `display: grid` gana al `display: none` que el atributo `hidden` aplica con especificidad mínima. Sin esta regla la leyenda se ve desde el primer pintado aunque lleve `hidden`, y al aparecer la tabla la empuja hacia abajo — medido: CLS 0,152 y la nota de 100 a 94. Cualquier elemento con `hidden` al que se le dé un `display` necesita esto. */ .leyenda[hidden] { display: none; } .leyenda li { position: relative; padding-left: 0.85rem; line-height: 1.45; } .leyenda li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 3px; height: 0.9em; border-radius: 2px; } .leyenda .zona-ascenso::before { background: var(--ascenso); } .leyenda .zona-playoff::before { background: var(--playoff); } .leyenda .zona-permanencia::before { background: var(--permanencia); } .leyenda .zona-descenso::before { background: var(--descenso); } .leyenda strong { color: var(--texto); font-weight: 600; } footer { margin-top: 1.25rem; color: var(--texto-suave); font-size: 0.82rem; }