/* LAS CARAS, Y POR QUE SON MENOS DECLARACIONES QUE ANTES (2026-09-06). Aqui habia CATORCE bloques para SEIS archivos distintos. Inter y Space Grotesk son familias VARIABLES ---un solo woff2 cubre todo el rango de pesos--- y se declaraban una vez por peso con un NOMBRE DE ARCHIVO distinto cada una, asi que el navegador veia tres URLs y bajaba tres veces los mismos 48.256 bytes. Comprobado por sha256 sobre `sitio/tipos/`: 22 archivos, 16 contenidos. Declarada una sola vez con su rango `font-weight: 100 900`, la primera visita a una pagina en castellano baja **118.800 bytes menos, un 54 %**, sin cambiar una sola letra de como se ve. El nombre lo dice ahora: un archivo variable se llama `-var-` y no `-400-`, porque un nombre que afirma un peso que no es invita a que alguien borre «el 400 que no usamos». `herramientas/traer_tipografias.py` trae una familia nueva y escribe estas mismas declaraciones. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/Inter-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/Inter-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/tipos/PlexMono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/tipos/PlexMono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/tipos/PlexMono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/tipos/PlexMono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/SpaceGrotesk-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/SpaceGrotesk-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/tipos/BarlowCondensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/tipos/BarlowCondensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/tipos/BarlowCondensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/tipos/BarlowCondensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/tipos/BarlowCondensed-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/tipos/BarlowCondensed-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/Manrope-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/tipos/Manrope-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Hard instrument (ENCARGO_3 §2), con la PALETA del sistema de Codex portada el 2026-09-05 sobre estos mismos nombres de token ---la piel cambia, el sistema no; el porque y lo que se midio, en REDISENO.md 10---. Alto contraste, cantos duros, color solo donde significa algo. Every :root token has its contrast floor in pruebas/prueba_contraste.py; touching a color means passing that test. */ /* **`color-scheme` LO DECIDE EL NAVEGADOR, Y ES LO UNICO DE ESTE BLOQUE QUE NO ES UN COLOR** ---por eso el port se lo dejo---. Sin el, `getComputedStyle(:root).colorScheme` contesta `normal` aunque el lector tenga el tema oscuro puesto, y todo lo que pinta el navegador y no nosotros sale en claro. En la portada eso es la caja de filtro de la tabla: 283 x 30 px de blanco `#ffffff` sobre el papel `#151712`, o sea **18,05:1 contra el fondo, mas luminosa que el propio texto de la tabla** y lo primero a lo que se va el ojo. Y con ella la barra de desplazamiento de las tablas anchas, que ademas se pinta CLASICA y se come 15 px de ancho. Comprobado que es esto y solo esto: poner `colorScheme='dark'` desde el cliente cambia 7.861 pixeles de un visor de 1.280x900, todos dentro del rectangulo de la caja de filtro. La maqueta lo declara en sus tres bloques gemelos ---`dxm-system.css` lineas 5, 67 y 98---; de esos mismos bloques se copiaron los 25 tokens de color. */ :root { color-scheme: light; --tinta: #161813; --gris: #5b5d54; --gris2: #5b5d54; --linea: #76786f; --regla: #76786f; --fondo: #f2efe7; --suave: #d7d3c8; --cab: #e4e0d6; --cabtexto: #161813; --cabnota: #5b5d54; --barra: #ffc1a8; --tinte: #ffc1a8; --mas: #3e6250; --menos: #b52d09; --masf: #194257; --menosf: #b52d09; --aviso: #725500; --avisof: #ffd8c8; --rojo: #b52d09; --rojof: #ffd8c8; --panel: #e4e0d6; --panelb: #c9c6bb; --acento: #b52d09; --oro: #725500; --plata: #5b5d54; --bronce: #b52d09; --onda: #194257; --ondaf: #194257; --carta: #b52d09; --cartaf: #b52d09; --tierra: #e5e1d8; --tierrab: #c9c6bb; --hueco: 14px; /* ── EL ANCHO DE LA COLUMNA DE CONTENIDO Y EL MARGEN QUE LA CENTRA ─────────────────── Van juntos y por eso se declaran juntos: el margen es «la mitad de lo que sobre», y lo que sobra solo se sabe restando el tope. Escritos por separado, cambiar el tope dejaba el centrado calculando contra otro numero, que es la averia que esta casa persigue entre dos documentos y aqui pasaria dentro de una hoja. `--columna` es el ancho del CONTENIDO, no el de la caja. El tope anterior era `max-width: 1600px` con `box-sizing: border-box`, o sea que los 32 px de relleno iban DENTRO y el contenido efectivo eran 1.568. Hoy son 1.600 exactos, y esos 32 px de diferencia solo existen por encima de 1.840 px de ventana. **EL SUELO DEL `max()` NO ES DEFENSIVO, ES LO QUE SOSTIENE EL TELEFONO.** Por debajo del tope, `(100% - var(--columna))` es NEGATIVO y sin el suelo el relleno se iria a cero: a 390 px la pagina se quedaria pegada a los dos bordes. Y no lo caza ninguna otra guarda ---sin relleno no hay desbordamiento, asi que `LaBarraEnUnTelefono` sigue verde---, por eso `LaColumnaSeCENTRA` lo mide a 390 px explicitamente. */ --canal: 16px; --columna: 1600px; --margen-columna: max(var(--canal), (100% - var(--columna)) / 2); /* LA ESCALA DE ESPACIO, base 4 y con el medio vacio A PROPOSITO (2026-09-06). Su documento lo escribe asi y prohibe los 35, 55 o 74 que salen de decidir cada margen por separado: una pagina compuesta con nueve pasos tiene ritmo, y una compuesta con cuarenta numeros tiene ruido. La regla de corte es suya: 4-16 para controles, 24-32 para grupos, 48-96 para SECCIONES ---y es en ese tercer tramo donde hoy no tenemos nada, que es la mitad de por que su pagina respira y la nuestra aprieta---. No se meten aqui las tablas: `th, td { padding: 1px 7px }` es densidad medida y a proposito, y pasarla a la escala engorda cada tabla del sitio. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; /* LA FILA DE GRUPO Y EL DESPLAZAMIENTO DE LA SIGUIENTE SON EL MISMO NUMERO, y estaban escritos en dos sitios: la fila medía 20,5 px y el `top` de la de abajo decía 20 px a mano. Medio pixel de deriva que nadie ve hasta que la cabecera se pega y las dos filas se montan. */ --fila-grupo: 21px; --celda-y: 4px; --celda-x: 12px; /* ── LA ESCALA TIPOGRAFICA, PORTADA DEL SISTEMA DE CODEX (2026-09-06) ─────────────────── Nuestra hoja tenia CERO `clamp()`, cero `vw` y **281 literales en pixeles**: una escala que no se mueve ni con la ventana ni con el tamano de raiz que el lector haya elegido en su navegador. De 9 px a 30 px, un rango de 3,3:1; el suyo a 1440 px de ventana es 16,0:1, y esa distancia es la mitad de por que su pagina se lee y la nuestra aprieta. Los cuatro de display crecen con la ventana entre un suelo y un techo. Medidos a 1440 px: 100,8 / 144,0 / 43,2 / 50,4 px. *(Su propio ECOSYSTEM-RULES.md dice que D1 llega a 176 px «a una anchura normal de monitor»; eso solo es cierto desde 1760 px. A 1440 son 144, un 22 % menos de lo que su documento afirma.)* */ --texto-xs: 0.6875rem; /* 11 px: TODO rotulo, y lo que cambia entre niveles es el espaciado */ --texto-sm: 0.8125rem; /* 13 px: nota, pie, prosa secundaria */ --texto-md: 0.9375rem; /* 15 px: el cuerpo */ --texto-lg: 1.25rem; /* 20 px: entradilla */ --display-titular: clamp(2.75rem, 3.5vw, 4.25rem); /* EL TITULAR DE SECCION TIENE ESCALON PROPIO, Y COMPARTIRLO CON EL `h1` FUE UN ERROR MIO (2026-09-07). Se subio citando el sistema que se porta ---«alli `h1` y `h2` salen del mismo sitio»--- y **eso es falso en sus DOS hojas**: su `h2` es `clamp(2.25rem, 4vw, 4.5rem)` sobre un `h1` de `clamp(3.5rem, 7vw, 7rem)`, o sea una razon de 0,575 a 0,643. Lo que se copio no fue la relacion sino un numero de pixeles. Y hay una segunda mitad que lo explica: **la escala se porto de una tipografia CONDENSADA a una que no lo es.** Barlow Condensed a 68 px ocupa mucho menos ancho que Space Grotesk a 68, asi que el mismo numero da otra mancha. Medido con la nuestra: el `h2` de la portada dibuja 152,9 px de alto en CUATRO lineas y 1.270 px de tinta ---el doble de tinta que el `h1` de su propia pagina---. Sus titulares de seccion son de una o dos palabras; los nuestros son frases de once a dieciseis. `clamp(2rem, 2vw, 2.75rem)` da 0,571 y 0,647 contra el `h1`: la razon EXACTA de su sistema, que es lo que habia que portar. */ --display-seccion: clamp(2rem, 2vw, 2.75rem); /* LA CIFRA ES INVENCION NUESTRA, Y SE ACOTA. El sistema que se porta no tiene NINGUNA cifra en `clamp()`: su contador de avisos son 40 px fijos. La nuestra crecia hasta 56 px a 2.315. */ --display-cifra: 2.5rem; /* Y LA CIFRA DE PORTADA ES OTRA COSA, aunque hasta hoy compartiera token con esas dos. El sistema que se porta SI acota la suya ---`.scoreboard h1` es `clamp(7.5rem, 15vw, 14rem)`, o sea de 120 a 224 px--- y lo que deja fijo es el contador de avisos. Compartiendo token no se podia subir una sin subir las otras, y las otras son los KPI: exactamente los «numeros exageradamente grandes» que el propietario rechazo al ver la pantalla partida el 2026-09-07. EL TECHO SALE DE UNA MEDICION Y NO DEL GUSTO. La columna del dato mide 251 px de 1.280 en adelante ---por debajo se apila y ocupa todo el ancho---, y la cifra mas larga que puede caer ahi son CINCO caracteres: hoy son tres («190», «147»), pero el pie de la portada ya cuenta «out of 1,533 entrants», asi que cuatro y una coma es el caso realista. A 40 px «1,533» mide 107. **Y LA COLUMNA MAS ESTRECHA NO ES LA DE LA PORTADA SINO LA DEL TABLERO**: alli el `aside` se queda en su `min-width` de 13rem ---208 px--- mientras en la portada tiene 235. A 88 px la cifra mide 229 y desborda esos 208; a 76 mide 198 y deja diez de holgura. De ahi el 4,75rem, que lo caza la guarda y no el ojo: la primera version puso 5,5rem mirando solo la portada y se puso roja en la otra pagina a la primera corrida. **Se elige para el peor caso y no para el de hoy**: con «190» delante, cualquier tamano cabe, y el dia que la cifra crezca desborda sin que nadie lo haya visto venir. */ --display-dato: clamp(3.25rem, 4.4vw, 4.75rem); --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --cuerpo: "Inter", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; } * { box-sizing: border-box; } /* EL CUERPO EN `rem` Y NO EN PIXELES DUROS (2026-09-06). 13,5 px fijos ignoran el tamano de letra que el lector haya puesto en su navegador ---que es la unica preferencia de accesibilidad que casi todo el mundo sabe cambiar--- y ademas dejaban la medida de la prosa descolocada: con el cuerpo a 13,5 px, los 44rem de la caja daban 122 caracteres por linea en vez de los ~72 para los que esa anchura esta pensada. Los dos numeros van juntos y por eso se cambian juntos; lo dijo la guarda nueva al ponerse roja con solo la mitad hecha. */ body { margin: 0; font: var(--texto-md)/1.6 var(--cuerpo); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; } h1, h2, h3, .pts, .marca { font-family: var(--display); letter-spacing: -.01em; } .pos, .foto, code, .ind { font-family: var(--mono); } td, th, .cifras, .pts { font-variant-numeric: tabular-nums; } /* ── LA RETICULA DE TABLERO ────────────────────────────────────────────────────────────────── Barra lateral FIJA a la izquierda y una columna que hace su propio desplazamiento. Era una barra superior con quince preguntas envueltas en dos filas, y eso hacia que cada pagina se leyera como un documento: la navegacion ocupaba el sitio donde un tablero pone sus cifras. Con `min-height:0` en la columna, que sin el una rejilla se niega a encoger su contenido y el desplazamiento se va al `body`, dejando la barra lateral fuera de la pantalla al bajar. */ .app { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; } .col { display: flex; flex-direction: column; min-width: 0; min-height: 0; } aside.lado { background: var(--cab); border-right: 1px solid var(--linea); padding: 12px 0 16px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } aside.lado .marca { font-weight: 700; letter-spacing: .01em; padding: 2px 14px 6px; color: var(--cabtexto); } aside.lado nav { display: flex; flex-direction: column; gap: 12px; } aside.lado .grupo { display: flex; flex-direction: column; } /* El rotulo del grupo es una SENAL, no un titulo: pequeno, espaciado y apagado, para que se lea al ojear y desaparezca al leer. */ aside.lado .gtit { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--cabnota); padding: 0 14px 3px; } aside.lado nav a { display: flex; align-items: center; gap: 8px; padding: 4px 14px; color: var(--cabtexto); border-left: 2px solid transparent; } aside.lado nav a:hover { background: var(--suave); } aside.lado nav a[aria-current] { font-weight: 700; border-left-color: var(--barra); background: var(--suave); } aside.lado nav a .ico svg { width: 15px; height: 15px; } /* ── LA MARCA Y EL BUSCADOR DEL RAIL ───────────────────────────────────────────────────────────── La marca lleva tres barras de altura creciente ---un medidor de senal, que es literalmente lo que este panel mide--- dibujadas con CSS. Sin archivo nuevo, sin peticion, y escala con el texto. El buscador baja de la barra superior al rail porque ahi es donde se busca en el sistema que se porta, y porque la barra de arriba pasa a ser lo que dice donde estas, no una caja de mandos. */ aside.lado .marca { display: flex; align-items: center; gap: 8px; } aside.lado .senal { display: inline-flex; align-items: flex-end; gap: 2px; height: 1em; } aside.lado .senal::before, aside.lado .senal::after { content: ""; width: 3px; background: var(--acento); } aside.lado .senal::before { height: 55%; } aside.lado .senal::after { height: 100%; } aside.lado .buscar { display: block; padding: 0 14px var(--e3); } aside.lado .buscar > span { display: block; font-size: var(--texto-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); margin-bottom: var(--e1); } aside.lado .buscar input { width: 100%; font: inherit; font-size: var(--texto-sm); padding: 5px 8px; color: var(--tinta); background: var(--fondo); border: 1px solid var(--linea); border-radius: 2px; } aside.lado .buscar input:focus { outline: 2px solid var(--acento); outline-offset: 1px; } aside.lado details.grupo > summary { display: flex; justify-content: space-between; align-items: baseline; list-style: none; cursor: pointer; padding: 8px 14px; font-size: var(--texto-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); } aside.lado details.grupo > summary::-webkit-details-marker { display: none; } aside.lado details.grupo > summary::after { content: "+"; color: var(--acento); font-weight: 800; } aside.lado details.grupo[open] > summary::after { content: "‘2"; } aside.lado .noficial { margin-top: auto; padding: 0 14px; color: var(--cabnota); font-size: 11px; } /* AQUI SOLO QUEDA LO QUE ESTA REGLA DE VERDAD DECIDE. Declaraba ademas `display: flex`, `flex-wrap`, `gap`, `align-items` y `padding`, y las cinco las pisa la regla de la barra que vive ~640 lineas mas abajo ---misma especificidad, mas tarde, sin ninguna consulta de medios en medio---. Eran codigo muerto con forma de codigo vivo, y con el centrado se volvieron una trampa: quien busque «header.barra {» encuentra ESTA primero, escribe aqui el relleno nuevo y **la barra no se centra, sin que nada de error**. Se quita el cebo en vez de anotar un aviso; y quien lo escriba igual en el sitio equivocado se encuentra roja la asercion 4 de `LaColumnaSeCENTRA`. */ header.barra { border-bottom: 1px solid var(--linea); background: var(--cab); } /* LA BARRA LLEVA DONDE ESTAS, NO EL TITULO. Aqui habia un `h1` de 15 px con el rotulo de la seccion, y el titular de verdad ---la pregunta que la pagina contesta--- estaba oculto abajo. Hoy es al reves y esto es un rotulo pequeno: dice en que seccion estas, como una miga de pan, y el titulo lo dice el cuerpo. Deja de ser `h1` a proposito, para que la pagina declare UN solo titulo. */ header.barra .pt { font-size: var(--texto-xs); margin: 0; font-weight: 800; max-width: none; text-transform: uppercase; letter-spacing: .12em; color: var(--cabnota); } header.barra .idioma a { margin-left: 4px; } header.barra .idioma b { margin-left: 4px; } header.barra .foto { margin-left: auto; color: var(--gris); } /* ── LA COLUMNA SE CENTRA CON RELLENO, NO MOVIENDO EL ELEMENTO (2026-09-06) ────────────────── El sintoma, medido: en una pantalla de 2.315 px el contenido media 1.568 px y quedaban **523 vacios SOLO a la derecha**; a 2.560, 768. Un tope de ancho es una decision de legibilidad, y sin centrar no parece una decision sino que la pagina se quedo corta. *(La nota anterior decia «la pagina ocupa 1.286 y deja 1.029»: esa cifra estaba tomada sobre el estado REVERTIDO, con `margin: 0 auto` puesto, y exageraba el hueco al doble.)* **EL INTENTO ANTERIOR ROMPIO EL TELEFONO, Y POR ESO ESTE NO TOCA EL DIMENSIONADO.** Con `margin: 0 auto`, los margenes automaticos en el eje transversal de un contenedor flex en columna hacen que el item se dimensione POR SU CONTENIDO en vez de estirarse a la pista: `main` crecia hasta los 1.078 px de la tabla y a 390 px la pagina se desplazaba a lo ancho. `min-width: 0` no bastaba, porque el problema no era el minimo sino de DONDE sale el ancho. *Y el diagnostico que se dejo escrito aquella vez era medio falso, asi que se corrige: la cura de ese camino existe ---`margin-inline: auto` MAS `width: 100%`, que fija el ancho antes de que los margenes lo decidan--- y se descarta por otra razon, no por rota: **no puede alinear la barra**, que tiene fondo propio y no puede encogerse. Un mecanismo que resuelve la mitad del problema no es el mecanismo.* Aqui `main` sigue estirandose a toda la pista y lo que se mueve es su RELLENO. El elemento va a sangre y lo que se centra es lo de dentro; un relleno no puede hacer que un elemento se dimensione por su contenido, que es exactamente el mecanismo que fallo la otra vez. **EL `max-width` SE VA Y ESO NO ES LIMPIEZA: SI SE QUEDA, EL ARREGLO DA MENOS PAGINA QUE HOY.** El `100%` del relleno se resuelve contra el bloque contenedor de `main`, que es la caja de contenido de `.col` ---el contenedor flex--- y NO contra `main`. Con el tope puesto, a 2.560 el relleno vale (2.352-1.600)/2 = 376 a cada lado dentro de una caja ya recortada a 1.600: **el contenido se queda en 848 px**, 1.093 a 2.315. Medido. La lectura natural ---«el 100 % es el ancho de `main`»--- es justamente la que produce ese resultado. Medido a nueve anchos: el relleno cambia de rama exactamente a 1.840 px de ventana ---16 y 16, sin salto--- y de ahi para arriba crece parejo: 254 y 254 a 2.315, 376 y 376 a 2.560. Cero desbordamiento horizontal en todos, 390 y 900 incluidos. Y por debajo de 1.840 la pagina sale identica: comprobado sobre 34 paginas ---las 15 generales en los dos idiomas, mas una de club y una de indicativo--- a seis anchos, 204 comparaciones sin una sola diferencia. **VA ANTES DEL `@media print`, y eso importa:** el bloque de impresion es lo ultimo de la hoja y pone `padding: 0`. Escrito despues, el papel se quedaria con canal donde el PDF pide cero ---medido: 1.015 px utiles de los 1.047 de un A4 apaisado, un 3,1 % menos--- en una pagina que imprime las trece columnas a proposito. **Y NO SE HIZO CON EL RELLENO PROPORCIONAL DE LA MAQUETA** (`5vw`, que es lo que ella usa), porque se midio: entre 1.440 y 1.645 roba justo el ancho con el que esta calculado el umbral de la banda flotante y la tabla cae por debajo del pie de la columna ---la holgura pasa de +45 a -183---. Y no compra nada a cambio: la tabla mide 1.024 px a cualquier ancho, porque la dimensiona su contenido. */ main { padding: 10px var(--margen-columna) 30px; overflow-x: hidden; } /* EL TITULAR SALE DEL ESCONDITE (2026-09-06), Y LA RAZON POR LA QUE SE ESCONDIA ERA MEDIO CIERTA. Decia que la pagina «ya se anuncia arriba» y que repetirlo gastaba la primera pantalla en decir dos veces lo mismo. Al mirarlo: **no decian lo mismo.** La barra lleva el rotulo de navegacion ---«Clases»--- y el `h1` del cuerpo lleva la PREGUNTA que esa pagina contesta ---«¿La clase separa a alguien?»---. O sea que lo que estaba clavado a un pixel era la mitad buena, en las 31 apariciones de las 17 paginas, y lo que se veia era la etiqueta del menu. Cabe, y esta medido: el titulo mas largo del sistema tiene 32 caracteres y a 50 px ocupa unos 790 px de los 1.200 que hay de columna a 1440 px de ventana. El de la barra deja de ser un `h1` en el mismo cambio: dos `h1` en una pagina no es un detalle de estilo, es una pagina que declara dos titulos a quien la recorre con un lector de pantalla. */ /* `main h1` Y NO `main > h1:first-child`, y eso lo dijo la guarda nueva. Con el selector de primer hijo la regla llegaba a 13 de las 15 paginas: en `/tablero` el titular va detras de un `
` y en `/limites` vive dentro de una `
`, asi que las dos se quedaban con el titular a 17 px mientras las otras trece lo tenian a 50. **Un arreglo que alcanza al 87 % de los casos se ve arreglado**, y la unica forma de notar el 13 % restante era medir las quince. Como cada pagina declara ya UN solo `h1`, el selector de descendencia no tiene con que confundirse. */ /* EL TOPE DEL TITULAR VA CON `min()`, Y SIN ESO DESPLAZA EL TELEFONO. `max-width: 20em` sobre un elemento de tamano display es una caja de 880 px cuando la fuente esta en su suelo de 44 px, o sea mas del doble de una pantalla de 390. La caja no se encoge sola: se sale, y arrastra la pagina a lo ancho ---que en un sitio que se abre desde un enlace es de lo peor que puede pasar---. Lo cazo `LaBarraEnUnTelefono` a 390 px, que existe justamente porque esto ya paso una vez con la tabla de clubes. Un tope relativo al texto necesita SIEMPRE su tope relativo al hueco. */ /* ── LA APERTURA: ROTULO, TITULAR Y FRASE ──────────────────────────────────────────────────────── Las tres piezas se componen con la escala de espacio, y lo que hace que se lea como una apertura no es ninguna de las tres sino **el aire de arriba y de abajo**: 64 px antes y 48 despues. Esa franja es la que su sistema tiene y la nuestra no tenia en ningun sitio ---nuestro tramo mayor de separacion eran 26 px---, y es la mitad de por que su pagina parece un producto y la nuestra una consulta. El rotulo va en el naranja de senal, que es el unico sitio de la apertura donde entra color: el titular y la frase son tinta. Un color que aparece una vez por pantalla senala; repartido, decora. */ /* ── LA APERTURA, EN DOS COLUMNAS ──────────────────────────────────────────────────────────────── `align-items: end` alinea los BORDES INFERIORES del titular y de la cifra, que es lo que hace que los dos se lean como una sola linea de entrada en vez de como dos bloques que coinciden en la pagina. El dato lleva un filete a la izquierda porque lo separa sin encerrarlo: una caja lo convertiria en una tarjeta mas, y no lo es ---es el remate del titular---. */ header.apertura { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e7); margin-bottom: var(--e5); } header.apertura > div { min-width: 0; } header.apertura .rotulo { margin-top: var(--e8); } header.apertura h1 { margin-bottom: 0; } .dato { min-width: 13rem; padding-left: var(--e5); border-left: 1px solid var(--linea); } .dato > span { display: block; font-size: var(--texto-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); } .dato > strong { display: block; font-family: var(--display); font-size: var(--display-dato); /* El interlineado y el espaciado se cierran al crecer, que es lo que hace su sistema en la cifra grande (`line-height:.7; letter-spacing:-.05em`): a 88 px el aire que a 40 sostiene la cifra la deja flotando. */ line-height: .78; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .dato > small { display: block; font-size: var(--texto-xs); color: var(--gris); margin-top: var(--e2); max-width: 22em; white-space: normal; } @media (max-width: 900px) { .kpi { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; } .kpi:first-child { border-top: 0; } /* En angosto la cifra no puede robarle el ancho al titular: se pone debajo y pierde el filete. */ header.apertura { grid-template-columns: 1fr; gap: var(--e4); } .dato { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); padding-top: var(--e3); } } /* `.rotulo` A SECAS Y NO `main > .rotulo`: al meterlo dentro de la apertura dejo de ser hijo directo de `main` y el selector de hijo dejo de alcanzarlo ---publicado, el rotulo salio en gris y en caja baja---. Es el mismo error que el `main > h1:first-child` de esta misma sesion: un selector de hijo directo se rompe en silencio en cuanto algo envuelve al elemento, y no avisa. */ .rotulo { font-size: var(--texto-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); margin: var(--e8) 0 var(--e3); max-width: none; } main h1 { font-size: var(--display-titular); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 var(--e5); max-width: min(20em, 100%); } /* LA FRASE QUE SIGUE AL TITULAR ES PARTE DE LA APERTURA, no un parrafo mas: entra a 20 px contra los 15 del cuerpo, y de ahi para abajo la pagina vuelve a su tamano. Se elige con `+` para no tener que marcarla en las diecisiete paginas. */ main h1 + p { font-size: var(--texto-lg); line-height: 1.45; color: var(--gris); margin: 0 0 var(--e7); max-width: 34em; } @media (max-width: 900px) { /* Debajo de 900 la columna de 208 px se come el sitio de la tabla, asi que la barra vuelve arriba y se despliega en horizontal. No es una version movil: es que un tablero de dos columnas necesita dos columnas de ancho. */ .app { grid-template-columns: 1fr; } /* ENVUELVEN LOS TRES NIVELES, no dos: `aside`, `nav` y **cada grupo**. Faltaba el grupo, y un grupo de cinco enlaces en una fila que no envuelve se sale entero: medido a 390 px, seis de los quince enlaces fuera de la pantalla. Aqui hubo ademas un `overflow: visible`, puesto para que el `overflow-y: auto` de la regla ancha no convirtiera la barra en un carril horizontal. **Se quito porque el arnes demostro que no protegia nada**: envolviendo los tres niveles no se sale nadie, asi que `auto` nunca dispara y la linea era decoracion con un comentario de guarda ---que es peor que no estar, porque quien la lea creera que algo esta vigilado---. */ aside.lado { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 6px 10px; } aside.lado nav { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; } /* EL GRUPO ES UNA COLUMNA TAMBIEN AQUI, y el abierto ocupa su fila entera. En fila, el titulo competia con sus propios enlaces: medido a 390 px, «THE PEOPLE» quedaba en x=10 y su primer enlace en x=141 **en la misma linea**, con los otros tres sangrados debajo. Sumado a que los grupos cerrados se emparejaban por ser cortos, la barra tenia tres ritmos a la vez ---uno solo, uno con sangria francesa y dos apareados---, que es lo que el propietario vio desde su movil. Un titulo que no manda sobre lo que titula no es un titulo. */ aside.lado .grupo { flex-direction: column; } aside.lado details.grupo[open] { flex-basis: 100%; } /* Y EL TITULO CERRADO SE DIBUJA COMO LO QUE ES: un control que se pulsa. Era una etiqueta en versalitas con un signo al lado; en el lateral ancho eso basta porque la columna lo explica, pero suelto en una banda horizontal parece texto perdido. Una etiqueta pulsable que no parece pulsable es peor que un boton feo. */ aside.lado details.grupo > summary { border: 1px solid var(--linea); padding: 6px 10px; gap: 8px; } aside.lado details.grupo[open] > summary { border-color: transparent; padding-left: 0; padding-right: 0; } aside.lado .noficial { margin-top: 0; } } h1 { font-size: 17px; margin: 6px 0 2px; } /* EL TITULAR DE SECCION SUBE AL ESCALON DEL TITULAR DE PAGINA, Y PIERDE EL SUBRAYADO. Empezo siendo 14 px sobre un cuerpo de 15 ---un encabezado que no encabeza no ordena la pagina, la decora---, paso por `clamp(1.5rem, 2vw, 2rem)` con un filete debajo, y hoy usa el mismo `--display-titular` que el `h1`. **QUE COMPARTAN ESCALON NO ES UN DESCUIDO: ES LO QUE HACE EL SISTEMA QUE SE PORTA.** Alli `.section-heading h2` y el titular de la portada salen del mismo sitio, y lo que los distingue no es el tamano sino la POSICION ---uno abre la pagina, el otro abre una seccion---, el rotulo naranja que solo lleva el de arriba, y la interlinea (.82 contra .86). Se probo primero un escalon intermedio propio, `clamp(1.75rem, 2.4vw, 2.5rem)`, y era exactamente el «re skin» que el propietario nombro: parecido de lejos y de otro sistema de cerca. EL AIRE SUBE A `--e9` POR LA MISMA RAZON, que es lo que en su hoja hacen los 110 px de relleno de cada `.section`: **un titular de este tamano sin aire delante no abre nada, solo interrumpe.** EL `border-bottom` SE VA por dos motivos y el segundo es el que decide: a este tamano el subrayado ya no separa nada ---lo separa el aire de arriba--- y era el TERCER filete de 2 px de la pagina, junto al de la tabla y al del aviso, que si dicen algo. *Un filete que esta en todas partes no marca nada.* `.tarjeta > h2` y `.lat .tarjeta > h2` se quedan como estan por especificidad, y eso NO es algo que haya que recordar: ahi un `h2` no es un titular de seccion sino el rotulo de una tarjeta, y subir el `h2` desnudo sin acotarlo convertiria cada rotulo de tarjeta en un titular de 68 px. */ h2 { font-size: var(--display-seccion); line-height: .86; letter-spacing: -.035em; text-transform: uppercase; margin: var(--e8) 0 var(--e5); text-wrap: balance; } /* EL AIRE DE SECCION NO CABE DENTRO DEL BLOQUE QUE VA AL LADO DE LA COLUMNA, y lo dijo una guarda con una medida. Ese margen NO es aire entre secciones: **esta dentro del bloque que flota junto a la columna**, asi que cada pixel suyo son pixeles vacios a la izquierda de la columna ---el pozo que el flotador vino a cerrar--- y ademas empuja la tabla por debajo del pie de la columna, que es lo que la guarda mide. Con `--e9` encima la tabla caia 44 px por debajo; con `--e5` seguia cayendo 4 px a 1.825. Aqui no lleva aire propio: la separacion ya la pone la banda. **Y LA HOLGURA SE ENCOGE CUANTO MAS ANCHA ES LA PANTALLA, que es lo que no se ve de mirar un solo ancho:** `--display-titular` es `clamp(2.75rem, 3.5vw, 4.25rem)`, asi que el titular CRECE con el viewport ---de 118 px de alto a 1.645 a 136 a 2.100--- mientras la columna mide lo que miden sus paneles. Medido asi: +33 px de holgura a 1.645, +20 a 1.825 y +12 de 2.100 en adelante. Por eso el `margin-bottom` tambien baja a `--e3`: doce pixeles de holgura son del tamano de un cambio de metrica de fuente, y esta pareja ya se ha recalculado cuatro veces. La leccion: *un token de espacio no significa lo mismo dentro de un bloque que participa en una composicion que en el flujo normal.* */ .bloque-tabla > h2:first-child { margin-top: 0; margin-bottom: var(--e3); } /* LA NOTA QUE VIVE DENTRO DEL TITULAR NO HEREDA SU LETRA, y esto se vio MIRANDO la pagina, no corriendo nada. El titular de la tabla lleva dentro «(todos los clubes, por total de clase reclamado)», y con el titular en versalita y a -.035em de espaciado la nota salia en mayusculas, a 12 px y con las letras montadas unas encima de otras: ilegible. **Un espaciado negativo esta calculado para el tamano al que se aplica**; heredado por un texto seis veces mas pequeno no es apretado, es un borron. Va en bloque debajo, en la letra del cuerpo, que es lo que es: una aclaracion del titular y no parte de el. */ h2 .nota { display: block; margin-top: var(--e2); font-family: var(--cuerpo); font-size: var(--texto-sm); font-weight: 400; letter-spacing: normal; text-transform: none; } /* LA MEDIDA DE LA PROSA: 163 CARACTERES POR LINEA (medido el 2026-09-06). `120ch` con el cero de Inter a 13,5 px son 1.022 px, y con el avance medio real eso da 163 caracteres ---mas del doble del rango legible de 45 a 75, y mas del doble de los 77 de su hoja---. Se acota en `rem` y no en `ch` a proposito: **`ch` depende de la fuente**, asi que una medida en `ch` cambia sola el dia que cambie `--cuerpo`, que es justo lo que este porte va a hacer. `ch` se queda solo donde mide una COLUMNA, que es donde el dato de verdad es un recuento de caracteres. Y NO VALE `rem` TAMPOCO, QUE FUE EL PRIMER INTENTO: `rem` fija una CAJA, no una MEDIDA. Con la caja quieta, un texto mas pequeno mete MAS caracteres en la misma linea ---`.nota` va a 12 px y salia con 122 caracteres donde el cuerpo de 15 px salia con 102---. La unidad que conserva la medida a cualquier tamano es `em`, que es relativa al texto y no a la raiz: 34em son unos 75 caracteres tanto en una nota de 12 px como en un parrafo de 15. Lo dijo la guarda midiendo dos paginas, no el razonamiento ---la primera version de este mismo comentario defendia `rem`---. */ p { margin: 4px 0; max-width: 34em; line-height: 1.6; } p.cifras { font-size: 13px; margin: 2px 0 6px; font-variant-numeric: tabular-nums; } p.cifras b { font-size: 14px; } a { color: var(--tinta); text-decoration: none; } a:hover { text-decoration: underline; } a.grafias { text-decoration: underline dotted; text-underline-offset: 2px; } /* THE TABLE SCROLLS, NOT THE PAGE. Without this the body itself scrolled sideways on a phone and took the navigation bar with it. `overflow-x` on a container is the only way a table can scroll on its own: `display:block` on the table itself would let it scroll and break the column alignment between head and body, which is worse than the problem. */ .ancha { overflow-x: auto; } /* EL MARCO DE LAS TABLAS LARGAS, que es lo que hace que la cabecera fija se pegue de verdad. El alto sale de `70svh` ---la altura visible del navegador, que en un movil descuenta las barras--- topado a 46rem para que en una pantalla alta no se convierta en una tabla de treinta filas sin contexto. `overscroll-behavior: contain` impide que al llegar al final del desplazamiento arranque el de la pagina, que es lo que hace que una tabla dentro de una pagina se sienta como una trampa; y `scrollbar-gutter: stable` reserva el hueco de la barra para que la tabla no salte de ancho al aparecer. ── Y EL TOPE SE PIDE EN UNIDADES DE PAGINA MIENTRAS LO DE DENTRO ESTA CUANTIZADO EN FILAS ───── `min(70svh, 46rem)` es un presupuesto de pantalla; la fila mide 40 px y la cabecera fija 54. Cualquier resto parte la ultima fila por el medio, que es justo por donde va el texto. **Medido sobre la portada viva el 2026-09-08: de las 401 alturas de ventana entre 600 y 1.000 px, 391 parten la ultima fila y solo diez caen limpias** ---648, 649, 705, 706, 763, 820, 877, 934, 991 y 992---, o sea que la conducta por omision es la partida. El peor corte deja 39 px de una fila de 40 asomando bajo el pie de la tabla. El valor lo gasta en filas enteras `cuadrar()`, que escribe `--alto-cuadrado`. **Escribe una VARIABLE y no `max-height`, y eso no es estilo:** un estilo en linea le habria ganado a la regla de impresion de mas abajo ---`max-height: none`--- y el PDF saldria cortado a catorce filas. Sin JavaScript no se cuadra y se ve lo de siempre: el corte es cosmetico, no estructural. */ .ancha.larga { max-height: var(--alto-cuadrado, min(70svh, 46rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* THE IDENTITY COLUMNS STAY PUT WHILE THE REST SCROLLS. Measured on a phone (2026-08-29): the clubs table is 13 columns wide, only `#` and `Club` fit, and dragging sideways to reach a number took the club's own name off the screen. What was lost is not comfort --- it is the row's identity, and a number whose club you cannot see is not a hard-to-read number, it is a number that is not there. NO BREAKPOINT, and that is deliberate: `position: sticky` does nothing when the table already fits, so the rule is correct at every width and there is no magic number to keep true. The separator is a `border-right` rather than a shadow for the same reason --- it reads as a column group, which is what it is, and this table already separates its groups that way (`td.g1`). The `:has()` at the end only decides WHERE that separator goes when there are two identity columns; a browser without it draws one line too many and nothing else breaks. */ .ancha .ident { position: sticky; left: 0; z-index: 3; background: var(--fondo); } .ancha th.ident { z-index: 4; background: var(--cab); } /* When there are TWO identity columns the first is the rank, and it gets a fixed width so the second knows where to stop. Anchoring this to `:first-child` instead would have squashed the tables whose only identity column is a NAME --- `uno` is one --- to 3.6 rem. */ .ancha .ident:has(+ .ident) { box-sizing: border-box; width: 3.6rem; min-width: 3.6rem; border-right: 0; } .ancha .ident + .ident { left: 3.6rem; } .ancha tr:hover td.ident { background: var(--suave); } .ancha .ident { border-right: 2px solid var(--regla); } table { border-collapse: collapse; width: auto; margin: 2px 0 8px; border-bottom: 2px solid var(--regla); } /* ── UNA TABLA ANCHA LLENA SU CAJA ─────────────────────────────────────────────────────────────── `width: auto` es shrink-to-fit, asi que la tabla mide lo que mide su contenido y deja el resto del bloque en blanco: medido a 2.315 px, la de clubes dibujaba 1.024 px dentro de una caja de 1.270 y dejaba 246 vacios POR DENTRO. Es lo primero que el propietario vio distinto contra la maqueta. **NO SE PORTA EL `width: max-content` DE SU SISTEMA, y esto esta medido.** Todo el llenado lo hace `min-width: 100%`; `max-content` solo por su cuenta no mueve un pixel ---1.023,84 en una caja de 1.270---. Lo que si hace es ensanchar la tabla donde el ancho ESCASEA: +59,5 px de arrastre en el telefono sobre 265 filas, +252 en `fuentes` a 390 px y +98 px fuera de la hoja al imprimir. En SU sistema la propiedad es inerte porque sus celdas llevan `white-space: nowrap` y ahi `max-content` y `auto` son el mismo numero; en la nuestra muerde porque la columna del club envuelve. **Portar una propiedad que en su origen no hace nada y en el destino cuesta, es copiar la letra.** **Y VA ACOTADO A LAS TABLAS DE SEIS COLUMNAS O MAS, no a `table` a secas.** Medido sobre las 44 tablas del sitio: llenar una de dos o tres columnas abre huecos DENTRO de la fila que separan el rotulo de su cifra hasta 1.518 px ---«2010 ... 377»---, o sea que la fila deja de leerse como una fila. El corte esta entre cinco y seis columnas, y la de clubes tiene seis plegada. */ .ancha.llena > table { min-width: 100%; } /* LA DENSIDAD ES NUESTRA Y NO SE COPIA: su tabla pone la fila en 3rem y en 630 px le caben doce filas; a nosotros nos caben veintiseis, y en un panel de 262 clubes ver el doble vale mas que el aire. Lo que si se porta es la FORMA: la fila sale de un token, asi que subirla es cambiar un numero y no catorce reglas. Sube de 1 a 3 px ---la anterior venia de cuando el cuerpo eran 13,5--- y `vertical-align` pasa a `middle`, que es lo que impide que una cifra baile sobre el relleno de barra ahora que ese relleno ocupa la fila entera. */ /* EL FILETE ENTRE FILAS PASA AL TONO DECORATIVO, y no es un ajuste de gusto: es una regla escrita del sistema que se porta. «--line-subtle is intentionally decorative and must not carry boundaries or meaning. Any border that communicates structure or state uses --line.» Nuestras filas se separaban con el tono ESTRUCTURAL, y por eso la tabla se leia como una rejilla en vez de como una lista: 265 filetes a 3,90:1 compitiendo con los datos que separan. **El tono ya existe en las dos caras y no hay que inventar ninguno:** `--panelb` es `#c9c6bb` en claro y `#454940` en oscuro, que son los valores EXACTOS de su `--line-subtle`. Lo que sigue llevando la estructura es `--linea`/`--regla`: el filete de 2 px bajo la cabecera, el borde derecho de la columna de identidad y el cierre de la tabla. */ th, td { padding: var(--celda-y) var(--celda-x); border-bottom: 1px solid var(--panelb); text-align: left; vertical-align: middle; white-space: nowrap; } /* ── LA ALTURA DE FILA SE DICE, NO SE DEDUCE DEL RELLENO ───────────────────────────────────────── El propietario pidio un punto intermedio de ~40 px entre nuestros 31 y los 48 de su sistema. Con relleno solo no se llega a un numero redondo ---8/12 da 41,5--- y ademas el relleno tiene que quedarse en la escala de 4 px. Con una altura declarada da 40,00 exactos y el relleno se queda en 4/12. **VA EN `tbody td` Y NO EN `th, td`**, medido: en `th, td` la cabecera sube de 54 a 60,5 px sin que nadie lo haya pedido, y encima es la que se queda pegada arriba ocupando pantalla siempre. */ tbody td { height: 40px; } th { background: var(--cab); color: var(--cabtexto); font-weight: 600; position: sticky; top: 0; z-index: 2; border-bottom: 2px solid var(--regla); } th .nota { font-weight: 400; color: var(--cabnota); } th a { color: var(--cabtexto); } th[aria-sort] a { text-decoration: underline; text-underline-offset: 3px; } p.descarga { margin: 0 0 4px; } thead tr.grupos th { top: 0; height: 20px; line-height: 16px; padding: 2px 7px; font-weight: 400; color: var(--cabnota); border-bottom: 1px solid var(--cabnota); text-align: center; } /* `+` Y NO `~`, Y ESTO SOLO SE VE CUANDO LA CABECERA SE PEGA. El combinador de hermano GENERAL alcanzaba tambien a la segunda fila `.grupos` ---se emiten dos, `solo-poco` y `solo-todo`, y una se oculta con CSS---, asi que las dos quedaban en `top: 20px` y se superponian en cuanto hubo algo a lo que pegarse. Con `+` solo alcanza a la fila siguiente, que es la de rotulos. El defecto llevaba ahi desde que existe la fila de grupos y era invisible porque nada se pegaba. */ /* LA MARCA DE ORDEN LA PONE LA HOJA, NO EL TEXTO. Neutra en toda columna ordenable ---asi la columna dice que se puede ordenar ANTES de que nadie la toque--- y direccional en la que manda. Va en el naranja de senal y en escapes CSS y no en el caracter, que este repositorio escribe sin no-ASCII. En una columna numerica se pega al borde derecho, que es donde estan las cifras. */ /* La flecha ya no lleva su propio margen: con `column-gap` en el padre recibiria el aire DOS veces, y en las columnas estrechas eso son cuatro pixeles que le quita a la cifra. */ thead th[aria-sort] a::after { content: "\2195"; color: var(--acento); font-size: .85em; opacity: .55; } thead th[aria-sort="ascending"] a::after { content: "\2191"; opacity: 1; } thead th[aria-sort="descending"] a::after { content: "\2193"; opacity: 1; } /* **EL HUECO LO PONE `column-gap` PORQUE FLEXBOX SE COME EL ESPACIO** (2026-09-08). Aqui habia `display: inline-flex` a secas, y en un contenedor flex cada corrida de texto se envuelve en un item anonimo: la ultima pierde su espacio final y la `.nota` se blockifica. Medido con `Range` sobre el nodo de texto: ese espacio dibujaba **0,00 px** en las cinco cabeceras numericas con nota, mientras en la columna del club ---cuyo enlace sigue siendo `inline`--- el MISMO caracter dibuja 4,05. En pixeles: la juntura «Class total|claimed» eran 0,67 px de tinta a tinta, contra 1,33 entre dos letras de una misma palabra y 4,67 del espacio entre «Class» y «total». **El rotulo y su nota estaban mas juntos que dos letras**, y por eso se leia «Class totalclaimed» --- lo vio el propietario en una captura, no una guarda. `inline-flex` NO se quita: es lo que pega el rotulo al borde derecho, donde estan las cifras. */ thead th.num a { display: inline-flex; justify-content: flex-end; width: 100%; column-gap: .4em; } /* LAS CELDAS VACIAS DE LA CABECERA DE GRUPOS NO DIBUJAN UNA BANDA. Sobre las columnas de identidad no hay grupo que anunciar, asi que ahi van dos `th` sin texto ---hacen falta para que las columnas cuadren--- y hasta hoy llevaban el mismo borde inferior que las demas: una raya de lado a lado que no separaba nada y que el ojo lee como una fila mas. Lo correcto seria que la identidad ABARCARA los dos niveles con `rowspan`, y no se puede: se emiten DOS filas de grupo y se oculta una segun el estado plegado, que lo decide JavaScript en el cliente. Un `rowspan` que cruza una fila oculta se descuadra, asi que se quita la raya en vez de fingir una estructura que este marcado no puede tener. Queda anotado para cuando el plegado deje de vivir en el cliente. */ thead tr.grupos th.ident { border-bottom: 0; background: var(--cab); } thead tr.grupos + tr th { top: var(--fila-grupo); } td.num, th.num, td.barra, td.div { text-align: right; font-variant-numeric: tabular-nums; } td.txt { white-space: normal; max-width: 44ch; } td.g1, th.g1 { border-left: 2px solid var(--regla); } td.sec { color: var(--gris2); } td.total .v { font-size: 14px; font-weight: 700; } tr:hover td { background: var(--suave); } td.barra, td.div { position: relative; min-width: 9ch; } /* LA BANDA SE QUEDA EN 4-6 PX, Y NO ES UNA OMISION SINO UNA DECISION DEL PROPIETARIO. El 2026-09-06, portando el sistema nuevo, se intento subirla a la altura de la fila porque asi la hace el ---y la guarda de al lado lo impidio---. Al leer por que existia esa guarda: `ENCARGO_4` §1, escrito el 2026-08-22 **despues de mirar el panel con el propietario**, dice que la barra ocupaba casi toda la altura de la celda y que «a altura completa son bloques macizos que compiten con el numero en vez de acompanarlo». O sea que el bloque es lo que HABIA y se quito a proposito. Se deja escrito aqui porque la proxima vez que alguien compare con una maqueta ajena va a querer subirla otra vez, y la respuesta no esta en la maqueta sino en esta linea. *(Lo que si cambio desde entonces es el color: aquello eran grises a 3,23:1 y hoy `--barra` es un tinte calido claro. Si alguna vez se revisa, es ese el dato nuevo ---pero es una decision del propietario, no del que porta la hoja.)* */ /* ── LA BARRA DE TOTALES PASA A SER UN TINTE DETRAS DE LA CIFRA (2026-09-07) ───────────────────── **ESTO REVOCA UNA DECISION DEL PROPIETARIO, y por eso se escribe entera.** El `ENCARGO_4` §1 la dejo como una banda fina apoyada en la base tras rechazar bloques de altura completa, con esta formula: *«peso visual = contraste x area, y yo solo especifique la mitad»*. Aquella version era un bloque a 3,23:1 AL LADO del numero, compitiendo con el. La que entra hoy es otra cosa y por eso se pudo volver a mirar: el tinte va **DETRAS** de la cifra, que queda encima y en negrita. Se midieron las tres opciones y el propietario eligio esta viendolas. Lo medido: · el contraste del RELLENO no cambia ---1,36:1 en claro, 1,78:1 en oscuro---: lo unico que sube es el area, de 5,00 a 21,84 px (x4,4); · el NUMERO encima cumple de sobra: 11,45:1 en claro y 8,83:1 en oscuro. **Y NO SE TOCA LA COLUMNA DE VARIACION**, que es la mitad que decide: alli los rellenos `--masf` y `--menosf` se eligieron para ser FORMAS ---cumplen el suelo de 3:1 contra el papel--- y poner la tinta encima deja el numero en **1,67:1 y 2,85:1 en claro**. Ilegible. La formula del propietario decide distinto en cada columna porque las dos mitades son distintas en cada columna. SIN `z-index`: nuestro marcado emite la barra ANTES del numero y los dos estan posicionados, asi que el numero pinta encima por orden del DOM. Copiar el `z-index: -1` de la maqueta sin su `isolation` borraria la barra entera bajo `tr:hover td` ---medido---. `right: var(--celda-x)` Y NO `right: 0`: anclado al borde, 321 de 530 celdas tenian el tinte ENTERO fuera de los digitos; anclado donde empiezan las cifras, 28. */ /* ── EL RELLENO SE MIDE CONTRA LA PISTA QUE TIENE, NO CONTRA LA CELDA ─────────────────────── `width` en PORCENTAJE sobre un absoluto se resuelve contra la caja de RELLENO del contenedor, o sea la celda ENTERA con sus 24 px de relleno, mientras el bloque esta metido por la derecha. Al 100 % mide la celda entera y arranca 12 px ANTES de su borde izquierdo: **se dibuja encima de la columna anterior**. Medido en el dominio el 2026-09-08, y solo pasa en la fila que tiene el MAXIMO de su columna ---dos filas de 268, `3,141` en el total de clase y `27` en socios---, que es justo por lo que no se veia mirando la tabla. La cura no es recortar sino medir contra lo correcto: el emisor manda `--llenado` de 0 a 1 y la hoja lo multiplica por la pista real. Asi el 100 % es, por construccion, el ancho que cabe; no hay nada que topar y no hay ningun caso especial que proteger. Y LA PISTA ES LA MISMA PARA LOS TRES RELLENOS ---la fina, el tinte y las dos mitades de la divergente---: la caja de CONTENIDO de la celda. La fina estaba metida 6 px y el tinte 12, dos pistas para la misma idea, y con dos la guarda tiene que saber cual es cual. Con una, la guarda es una frase sola: *nada pintado pasa de la caja de contenido de su celda.* */ td.barra .b { position: absolute; right: var(--celda-x); bottom: 2px; height: 5px; background: var(--barra); width: calc(var(--llenado, 0) * (100% - 2 * var(--celda-x))); } /* 4-6 px band: weight = contrast × area (ENCARGO_4 §1) */ /* ── EL TINTE, Y SOLO DONDE RESPALDA UNA CIFRA ─────────────────────────────────────────────────── La barra de totales pasa a ser un tinte DETRAS del numero. **Esto revoca la forma que el `ENCARGO_4` §1 eligio, y por eso se escribe entera.** Aquella era una banda fina porque lo que se rechazo era un bloque a 3,23:1 AL LADO del numero, compitiendo con el; esta va detras, con la cifra encima. El propietario eligio esta viendo las tres opciones. Medido: el contraste del relleno no cambia ---1,36:1--- y lo unico que sube es el area, de 5,00 a 21,8 px; el numero encima cumple 11,45:1 en claro y 8,83:1 en oscuro. **`:has(.v)` NO ES UN ADORNO: HAY DOS BARRAS DISTINTAS Y SOLO UNA RESPALDA ALGO.** En la tabla de clubes la celda lleva la barra Y el numero; en `/reloj` la barra va SOLA en su columna y la cifra en la de al lado ---ahi la barra ES el dato, no el fondo de nada, y un tinte de altura casi completa seria un bloque de color sin nada encima que lo justifique---. Lo dijo la guarda dibujada: al apuntar al centro del numero contestaba la barra, porque en esa tabla no hay numero en esa celda. Sin el `:has()` la regla se aplicaba a las dos. Donde el navegador no soporte `:has()` la regla entera se cae y queda la banda de arriba, que es el comportamiento anterior: se degrada a lo que habia, no a nada. **NO SE TOCA LA COLUMNA DE VARIACION**, que es la mitad que decide: alli `--masf` y `--menosf` se eligieron para ser FORMAS ---cumplen 3:1 contra el papel--- y poner la tinta encima deja el numero en 1,67:1 y 2,85:1. Ilegible. La misma formula da dos respuestas porque las dos mitades son distintas en cada columna. SIN `z-index`: nuestro marcado emite la barra ANTES del numero y los dos estan posicionados, asi que la cifra pinta encima por orden del DOM. Copiar el `z-index: -1` de la maqueta sin su `isolation` borraria la barra entera bajo `tr:hover td` ---medido---. `right: var(--celda-x)` y no `right: 0`: anclado al borde, 321 de 530 celdas tenian el tinte ENTERO fuera de los digitos; anclado donde empiezan las cifras, 28. */ td.barra:has(.v) .b { right: var(--celda-x); top: 22%; bottom: 22%; height: auto; background: var(--tinte); width: calc(var(--llenado, 0) * (100% - 2 * var(--celda-x))); } td.barra .v, td.div .v { position: relative; } td.div { min-width: 12ch; } /* ── EL EJE DEL CERO NO ES UN BORDE DE COLUMNA, Y SE DIBUJABA IGUAL QUE UNO ───────────────── Iba de arriba abajo de la fila con `border-left: 2px solid var(--regla)`: la MISMA tinta y el mismo grosor que `.ancha .ident`, que si separa columnas. Y el numero de la celda esta alineado a la derecha, asi que uno ancho ---`+1,893 +21`--- cruza el centro por fuerza. El propietario lo mando ampliado diciendo que los numeros «se salen de su columna»: no se salian, cruzaban una raya que anunciaba ser un limite y no lo era. Se queda donde tiene sentido: en la banda de la barra, que es de lo que es el cero. Sigue formando una vertical al recorrer la columna ---una marca por fila--- sin fingir un borde. */ td.div::before { content: ""; position: absolute; left: 50%; bottom: 0; height: 9px; border-left: 2px solid var(--regla); } /* Las dos mitades de la divergente, con la MISMA correccion: media pista es la mitad de la celda menos el relleno de ese lado. Aqui no llegaba a salirse ---el maximo es medio ancho y la mitad de la caja de relleno cae justo en el borde---, pero llegaba a TOCARLO, que es la misma cuenta mal hecha con un pixel menos de suerte. */ td.div .pos { position: absolute; left: 50%; bottom: 2px; height: 5px; background: var(--masf); width: calc(var(--llenado, 0) * (50% - var(--celda-x))); } td.div .neg { position: absolute; right: 50%; bottom: 2px; height: 5px; background: var(--menosf); width: calc(var(--llenado, 0) * (50% - var(--celda-x))); } td.div .v .mas, td.div .v .menos, td.div .v .cero { color: var(--tinta); } .mas { color: var(--mas); font-weight: 600; } .menos { color: var(--menos); font-weight: 600; } .cero { color: var(--gris); } .nota { color: var(--gris); font-size: 12px; } .aviso { background: var(--avisof); color: var(--aviso); border-left: 4px solid var(--aviso); padding: 4px 10px; margin: 6px 0; max-width: 34em; } .rojo { background: var(--rojof); color: var(--rojo); border-left: 4px solid var(--rojo); padding: 4px 10px; margin: 6px 0; max-width: 34em; } /* ── EL ESTADO PLEGADO ─────────────────────────────────────────────────────────────────────── La linea de resumen se ve SIEMPRE y dice cuantos avisos hay y si alguno es grave: plegar no puede llegar hasta hacerlo invisible, o el aviso deja de existir. Lo que se pliega es el detalle, que en la portada eran dos parrafos rojos comiendose el tercio superior. Sin JavaScript: `
`. El detalle NO hereda el rojo del resumen ---sus bloques traen el suyo--- y por eso se le quita. */ details.estado { margin: var(--e6) 0; border-top: 2px solid var(--linea); border-bottom: 1px solid var(--linea); } details.estado > summary { cursor: pointer; padding: var(--e3) 0; list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e4); } details.estado > summary::-webkit-details-marker { display: none; } details.estado .cuantos { font-family: var(--display); font-size: var(--display-cifra); line-height: .85; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } details.estado .que strong { display: block; font-weight: 700; } details.estado .que small { display: block; font-size: var(--texto-sm); color: var(--gris); } details.estado .abre { font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } details.estado[open] .abre { opacity: .55; } details.estado .detalle { background: none; color: inherit; border: 0; padding: 0; } /* SIN BLOQUE DE COLOR DETRAS, Y LA GRAVEDAD EN LA CIFRA. Heredaba de `.rojo` un fondo, un borde de 4 px y un ancho maximo de 34em: o sea una alarma permanente, encajonada, cuya intensidad no dependia de lo que hubiera pasado. La gravedad se dice ahora donde se mira ---el numero y el filete de arriba--- y por eso hay que anularle a `.rojo` las cuatro cosas que hereda; el `max-width` incluido, porque la tira va de lado a lado como la de cifras. */ details.estado.rojo, details.estado.aviso { padding: 0; background: none; border-left: 0; color: inherit; max-width: none; } details.estado.rojo { border-top-color: var(--rojo); } details.estado.aviso { border-top-color: var(--aviso); } details.estado.rojo .cuantos, details.estado.rojo .abre { color: var(--rojo); } details.estado.aviso .cuantos, details.estado.aviso .abre { color: var(--aviso); } footer.pie { border-top: 2px solid var(--regla); margin-top: 18px; padding-top: 4px; color: var(--gris); font-size: 12px; } .limites ol { padding-left: 20px; max-width: 34em; } .limites li { margin-bottom: 4px; } input.filtro { font: inherit; padding: 2px 6px; border: 1px solid var(--linea); width: 30ch; margin: 2px 0; } /* The series figures. No colour at all: the measured trace and the reconstructed bound are told apart by four simultaneous differences —pattern, weight, lightness and markers— none of them chromatic, so the figure survives a black-and-white print and colour-blindness alike. Ceiling on ink, declared and measured by prueba_figura: no computed fill other than none/--tinta/--fondo (so, never a wash under the curve) and no computed stroke-width above 2 px. Weight = contrast × area: contrast has a floor, area has a ceiling. */ svg.serie { display: block; width: 100%; max-width: 1040px; height: auto; margin: 6px 0; } svg.serie .eje, svg.serie .rejilla line { stroke: var(--linea); stroke-width: 1; fill: none; } svg.serie .medida { stroke: var(--tinta); stroke-width: 2; fill: none; stroke-linejoin: round; } svg.serie .cota { stroke: var(--gris); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; } svg.serie .hueco, svg.serie .corte { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 2 2; } svg.serie .deficit line { stroke: var(--gris); stroke-width: 1; } svg.serie .p { fill: var(--tinta); stroke: none; } svg.serie .p[data-origen="traida"] { fill: var(--fondo); stroke: var(--tinta); stroke-width: 1.5; } svg.serie text { fill: var(--gris); font-size: 11px; } figure.serie { margin: 0 0 4px; } figure.serie figcaption { color: var(--gris); font-size: 12px; margin-bottom: 2px; } ul.leyenda { list-style: none; padding: 0; margin: 2px 0 12px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--gris); } ul.leyenda li { display: flex; align-items: center; gap: 6px; } /* ── LA PREGUNTA, Y SU RESPUESTA ANTES DE LOS DATOS ───────────────────────────────────────── */ /* La portada usa el MISMO escalon que las demas; lo unico suyo es que no va en mayusculas, porque una pregunta larga en caja alta se lee peor que el titulo de una seccion. */ h1.pregunta { text-transform: none; letter-spacing: -.02em; } p.respuesta { font-size: 15px; line-height: 1.5; color: var(--tinta); max-width: 62ch; margin: 0 0 14px; } p.respuesta b { font-weight: 700; } /* LA FILA DE QUIEN ESTA CERCA DE UN RECORD. Sin esto, `class="cerca"` se escribia en el HTML y no se veia: una marca que el codigo pone y la hoja no define es peor que ninguna, porque quien la escribe cree que esta marcando. Va por TOKENS y no por un color literal, que es lo que hace que el tema oscuro salga solo ---hay cuatro bloques `:root` y un literal solo serviria en uno---. */ tr.cerca td { background: var(--avisof); } tr.cerca:hover td { background: var(--avisof); filter: brightness(0.97); } /* Y el borde de la izquierda es lo que se ve de un vistazo en una tabla de seis filas: el fondo solo distingue si las miras juntas. */ tr.cerca td:first-child { box-shadow: inset 3px 0 0 var(--aviso); } b.hito { color: var(--mas); letter-spacing: .04em; } /* La lista de empates: cada linea es un puntaje y la gente que lo alcanza por caminos distintos. Sin vinetas porque el numero de delante ya ordena, y con la cifra en tabular para que los repartos («123+28») se lean en columna aunque esten en prosa. */ ul.empates { list-style: none; padding: 0; margin: 0 0 14px; max-width: 96ch; } ul.empates li { padding: 3px 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; } ul.empates li:last-child { border-bottom: 0; } /* ══ LA COLUMNA DE AL LADO ═══════════════════════════════════════════════════════════════════ VA JUNTO A LA RESPUESTA Y NO JUNTO A LA TABLA, y esa es la decision de maquetacion que importa. El mockup la pone al lado de una tabla estrecha; la de esta portada tiene TRECE columnas y ya vive en su propio desplazador, asi que estrecharla a dos tercios habria empujado mas columnas fuera de la pantalla --- exactamente el defecto que el 2026-08-29 costo una tanda de arreglos. La banda ocupa la mitad de arriba y la tabla sigue entera debajo. Debajo de 1000 px la columna se pone DETRAS de la respuesta y no delante: quien entra viene a por los clubes, y en una pantalla estrecha lo primero tiene que seguir siendo eso. */ .banda { display: flex; flex-direction: column; margin: 0 0 var(--hueco); } /* **EL ORDEN DE LECTURA LO MANDA LA HOJA, NO EL HTML, Y ESO ES A PROPOSITO.** En el HTML la columna va primero porque un flotador solo envuelve lo que viene DESPUES de el. Sin flotar, eso la ponia delante de la respuesta ---o sea, lo primero que se lee dejaba de ser para que existe esta pagina--- asi que aqui se manda detras de la respuesta y delante de la tabla. Un lector de pantalla sigue el HTML, y ahi la columna es lo primero: es la unica pega de este arreglo, y a cambio evita que el flotador reordene la pagina entera. */ .banda > .lat { order: 2; } .banda > .bloque-tabla { order: 3; } /* **FLOTA, Y NO ES UNA REJILLA: ESA ES LA DECISION.** Con dos columnas de rejilla la fila mide lo que mide la mas alta, y la columna de al lado es MAS ALTA que la respuesta ---medido a 1500 px: 389 px contra 706--- asi que quedaban trescientos y pico pixeles muertos antes de la tabla. Flotando, la tabla se pone AL LADO cuando cabe y DEBAJO cuando no, ella sola y sin un punto de corte que mantener: su desplazador (`.ancha`) crea su propio contexto de formato, que es exactamente la regla que decide eso. Y la tabla NUNCA se estrecha por debajo de lo que necesita, que era la condicion: la queja que abrio todo esto era que la tabla no se lee. */ /* EL BLOQUE DE LA TABLA ES UNO SOLO: su titulo, sus mandos y la tabla. Separados, el titulo se quedaba flotando junto a la columna y la tabla bajaba sin el, con ciento treinta pixeles de nada entre los dos ---medido a 1300 px---. Un encabezado que no esta encima de lo que encabeza es peor que un hueco: dice que ahi hay algo y no lo hay. `flow-root` lo convierte en un bloque que no se solapa con el flotador, asi que los tres se mueven juntos. */ .bloque-tabla { display: flow-root; } /* ── LA COLUMNA YA NO FLOTA, Y LO QUE LO DECIDE ES SU PROPIA CONDICION (2026-09-08) ───────────── Aqui vivia una `@media (min-width: 1644px)` que ponia la columna de paneles a flotar a la derecha de la tabla, con un suelo para el bloque y un umbral, los dos MEDIDOS y reescritos por una herramienta. Estaba bien calculado y aun asi estaba mal, y lo que lo destapa es la frase con la que nacio: **«la columna no puede costarle columnas a la tabla»** ---la queja que abrio todo este trabajo era que la tabla no se lee---. MEDIDO EL 2026-09-08, con el propietario mirando su pantalla de 2.315 px: ancho tabla columna del club filas partidas en dos 1629 1374 558,1 0 1630 1045 418,6 5 <-- un pixel de ventana 2315 1255 507,7 1 Cruzar el umbral costaba **329 px de tabla de golpe**, y no se recuperaban nunca: con la columna al lado el techo de la tabla son 1.270 px ---lo imprime la propia herramienta: «la columna de contenido deja 1270 px para el suelo»--- mientras la maquetacion apilada le daba 1.389. **La flotada no puede alcanzar a la apilada a ningun ancho**, porque `--columna` esta topada en 1.600 y la columna lateral se lleva 316 mas su hueco. No era un umbral mal puesto: era un intercambio cuyo precio no se habia medido. Asi que la tabla se queda SIEMPRE a todo lo ancho y los tres paneles en fila encima de ella, que es exactamente lo que esta hoja ya hacia por debajo del umbral y esta probado en todos esos anchos. **Con el mecanismo se van sus dos cifras, su herramienta y las guardas que las vigilaban**: un suelo y un umbral que no gobiernan nada son dos numeros que alguien tendra que mantener sin saber por que. LO QUE SE QUEDA DE AQUELLO, porque sigue siendo cierto y costo medirlo: un bloque que se estira dentro de una caja mas estrecha se RECORTA EN SILENCIO ---entre 1.001 y 1.287 px el `overflow-x: hidden` de `main` se comia hasta 288 px sin barra y sin senal, y a 1.010 se perdian dos columnas sin forma de alcanzarlas---. La leccion no era del umbral sino del `min()`: **acotar a la caja que de verdad hay convierte esa clase de defecto en irrepresentable.** Por eso ningun ancho de esta hoja se declara sin acotarlo a `100%`. */ /* POR OMISION LOS TRES PANELES VAN EN FILA, no en columna. Flotar a la derecha solo sirve si la tabla cabe al lado; cuando no cabe, una columna estrecha y alta deja un pozo de doscientos y pico pixeles vacios a su izquierda ---medido a 1300 px--- porque la respuesta es mas corta que ella. En fila no hay pozo posible: ocupan el ancho y la tabla va debajo, entera. */ .lat { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 10px; min-width: 0; margin: 0 0 var(--hueco); } .lat .tarjeta { margin: 0; padding: 11px 13px; } .lat .tarjeta > h2 { margin: 0 0 7px; font-size: 11.5px; } /* El pie de cada panel lleva la SALVEDAD y el enlace a la pagina que la prueba. No es un adorno de navegacion: es donde vive lo que el panel pequeno no puede demostrar por si solo. */ .lat .pie { display: block; margin-top: 7px; font-size: 11px; line-height: 1.35; color: var(--gris); } .lat .pie a { white-space: nowrap; } /* La chispa: la serie medida, con el mismo trazo roto que la figura grande ---la comparte, no la copia--- y el ultimo punto marcado, que es el unico valor que alguien va a leer de aqui. */ .chispa { display: block; width: 100%; height: 54px; } .chispa .trazo { fill: none; stroke: var(--onda); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .chispa .fin { fill: var(--onda); } .chispa .base { stroke: var(--linea); stroke-width: 1; opacity: .5; } .lat .cifra { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .lat .cifra .u { font-size: 12px; font-weight: 400; color: var(--gris); margin-left: 3px; } /* El mapa de calor. UN SOLO TONO, de claro a oscuro: es una MAGNITUD, y un arcoiris obligaria a consultar una leyenda para saber si el verde es mas o menos que el naranja. Cada fila se normaliza contra SU PROPIO maximo, porque la pregunta es «?a que hora sube ESTE continente?» y no «?cual sube mas?» --- Europa tiene 568 eventos y Oceania 57: sin normalizar, Oceania seria una fila negra. */ table.calor { border-collapse: collapse; width: 100%; table-layout: fixed; } table.calor th.cont, table.calor th.cont.ident { width: 36px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--gris); padding: 0 5px 0 0; line-height: 1.15; } /* El recuento va DEBAJO del continente y no a su lado: es la cifra que dice si la fila se puede leer, y a su lado se confundiria con parte del nombre. */ table.calor th.cont .n { font-weight: 400; font-size: 9px; font-variant-numeric: tabular-nums; } table.calor td.c { height: 13px; padding: 0; border: 1px solid var(--panel); } table.calor td.c i { display: block; height: 100%; background: var(--onda); border-radius: 1px; } table.calor tr.horas td { font-size: 9px; color: var(--gris); text-align: left; padding-top: 2px; font-variant-numeric: tabular-nums; } /* Quien se movio: cinco filas, no una tabla. La variacion en verde porque aqui SOLO puede subir ---son los mayores incrementos--- y el club en gris porque identifica, no compite. */ ul.movidos { list-style: none; margin: 0; padding: 0; } ul.movidos li { display: flex; align-items: baseline; gap: 7px; padding: 2.5px 0; border-bottom: 1px solid var(--linea); } ul.movidos li:last-child { border-bottom: 0; } ul.movidos .ind { font-weight: 700; font-family: var(--mono); font-size: 12px; } ul.movidos .var { color: var(--mas); font-variant-numeric: tabular-nums; font-weight: 700; } ul.movidos .club { margin-left: auto; color: var(--gris); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; } /* Dos paneles al lado, uno debajo del otro en cuanto no caben. */ .dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 22px; } .dos section { min-width: 0; } /* EL MAPA. Sin `width` en pixeles: solo `viewBox`, asi que se estira con su contenedor y en un telefono se encoge en vez de salirse ---que es lo que este panel ya arreglo en las tablas---. */ /* ── LA REJILLA DE HORAS DE /fotos ─────────────────────────────────────────────────────────── Veinticuatro casillas por dia. **La hora que falta se dibuja igual que las demas, vacia y con su borde**: una casilla ausente y una casilla vacia se ven igual ---o sea, no se ven--- y esta rejilla existe justo para que un hueco se vea. */ td.rej { white-space: nowrap; line-height: 0; } td.rej .h { display: inline-block; width: 9px; height: 14px; margin-right: 1px; border-radius: 2px; background: var(--suave); border: 1px solid var(--linea); } td.rej .hc { background: var(--ondaf); border-color: var(--ondaf); } td.rej .hs { background: var(--suave); border-color: var(--linea); } td.rej .hi { background: var(--avisof); border-color: var(--aviso); } td.rej .hf { background: var(--rojof); border-color: var(--rojo); } /* La hora PERDIDA lleva borde rojo y fondo del papel: se distingue de una que no ha llegado todavia, que va lisa. */ td.rej .hp { background: transparent; border-color: var(--rojo); border-style: dashed; } svg.mapa { display: block; width: 100%; height: auto; max-width: 860px; margin: 0 0 6px; background: var(--suave); border: 1px solid var(--linea); border-radius: 3px; } /* LA TIERRA VA DEBAJO DE TODO y por eso es la mas apagada de las tres capas: si compitiera con los puntos, el mapa contaria la geografia en vez de los datos. Es referencia, no contenido. */ svg.mapa .tierra path { fill: var(--tierra); stroke: var(--tierrab); stroke-width: .5; stroke-linejoin: round; } svg.mapa .rejilla line { stroke: var(--linea); stroke-width: 1; } /* El ecuador y Greenwich mas marcados: son las dos referencias que convierten una cuadricula en un mapa cuando no hay costas. */ svg.mapa .ejes line { stroke: var(--regla); stroke-width: 1; } /* Relleno translucido para que dos entidades vecinas se sigan distinguiendo al solaparse, y borde opaco para que un punto pequeno encima de uno grande no se pierda. */ /* ══ EL TABLERO ═══════════════════════════════════════════════════════════════════════════════ CASI TODO VA BAJO `.tab` A PROPOSITO. Un tablero se ESCANEA y un documento se LEE: no tienen por que compartir densidad ni relieve. Cambiar la hoja entera para una pagina habria puesto en riesgo las diez que ya funcionan, y ninguna de ellas pidio esto. **LA TARJETA DE CIFRA SE SALIO DE AQUI, y esto cuenta por que.** Habia DOS: esta, con su pastilla de icono, y otra mas plana y sin `.ico` heredada de antes. Mientras la de fuera no la usaba nadie se podia vivir con las dos; en cuanto la portada quiso una tarjeta, cayo en la vieja y **el icono se comio la tarjeta entera**, porque aquella no dimensionaba el `svg`. Es la misma enfermedad que este archivo pago hoy en Python con `_cuartiles` contra `_mediana`: dos maneras de hacer lo mismo no discrepan hasta el dia que discrepan. Queda UNA, fuera de `.tab`, y `--hueco` sube a `:root` con ella. */ .tab-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 20px; margin: 0 0 var(--hueco); } .tab-cab h1 { margin: 0 0 4px; } .tab-cab .respuesta { margin: 0; } /* El sello de la foto va arriba a la derecha, como la hora en un instrumento: no compite con el titulo y esta donde se busca. El punto es un indicador de estado, no un adorno. */ .tab-sello { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; } .tab-sello .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--mas); flex: none; } /* ── LAS TARJETAS: el relieve es lo que separa un tablero de una hoja de papel ────────────────── */ .tarjeta { background: var(--panel); border: 1px solid var(--panelb); border-radius: 8px; padding: 13px 15px; margin: 0 0 var(--hueco); } .tarjeta > h2 { margin: 0 0 9px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); font-weight: 600; } .tarjeta > .nota:first-of-type { margin-top: -4px; } .tarjeta table { margin-bottom: 0; } /* ── LAS CIFRAS ──────────────────────────────────────────────────────────────────────────────── */ /* `auto-fit` con un minimo reparte las tarjetas solas ---seis en un monitor, dos en un telefono--- sin una sola media query: el numero de columnas lo decide el ancho y no una lista de puntos de corte que hay que mantener. */ /* ── LA TIRA DE CIFRAS: FILETES, NO CAJAS ──────────────────────────────────────────────────────── Eran cuatro tarjetas con borde, esquinas redondeadas y fondo propio. Cada caja pide ser leida como una unidad aparte, asi que cuatro cifras que se leen juntas salian como cuatro objetos sueltos ---y con el borde, la esquina y el relleno gastando el sitio que deberia ocupar la cifra---. En una tira, lo que separa es un filete de un pixel: basta para que se vean como cuatro y no estorba para que se lean como una. El sitio que se ahorra se lo queda el numero, que es lo unico que alguien viene a mirar. `auto-fit` mantiene el reparto en cualquier ancho, y en angosto el filete pasa a horizontal, que es la unica forma de que una tira sobreviva a una pantalla estrecha. */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); margin: 0 0 var(--e6); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .kpi { display: flex; gap: 11px; align-items: flex-start; padding: var(--e4) var(--e5); border-left: 1px solid var(--linea); } .kpi:first-child { border-left: 0; padding-left: 0; } /* El icono va en una pastilla tenida del acento: identifica la tarjeta de un vistazo sin gritar. Son iconos de LINEA monocromos, nunca emojis a color --- esto es un instrumento, no un juguete. */ .kpi .ico { flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--suave); border: 1px solid var(--panelb); display: flex; align-items: center; justify-content: center; } .kpi .ico svg { width: 17px; height: 17px; stroke: var(--acento); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .kpi .cuerpo { min-width: 0; } .kpi .rot { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .kpi b { display: block; font-family: var(--display); font-size: var(--display-cifra); line-height: .85; margin-top: 1px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* El pie lleva la SALVEDAD de la cifra de arriba ---«no son entidades distintas»--- asi que no se recorta ni se atenua hasta desaparecer: una cifra sin su salvedad es la mentira barata de un tablero. */ .kpi .pie { display: block; font-size: 11px; line-height: 1.35; color: var(--gris); margin-top: 4px; } .tab .dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--hueco); } .tab .dos section { min-width: 0; } /* ── LA TABLA ────────────────────────────────────────────────────────────────────────────────── */ .tab table td { padding: 6px 9px; } .tab table th { padding: 7px 9px; background: var(--suave); color: var(--gris); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; border-bottom: 1px solid var(--panelb); } .tab table tr:hover td { background: var(--suave); } /* El indicativo es la identidad de la fila: monoespaciado para que se compare en columna, y en el acento para que el ojo lo encuentre sin leer. */ .tab .ind { font-family: var(--mono); color: var(--acento); font-weight: 600; } /* El continente, en pastilla: es una etiqueta de dos letras y sin caja se lee como una errata. */ .tab .cont { display: inline-block; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--panelb); background: var(--suave); font-size: 10.5px; letter-spacing: .05em; color: var(--gris); } .tab .puesto { font-variant-numeric: tabular-nums; font-weight: 700; } /* LAS TRES PRIMERAS PLAZAS SE MARCAN CON COLOR, NO CON UN SIMBOLO: un icono de medalla junto a un puesto que puede estar EMPATADO prometeria una exclusividad que el dato no tiene. */ .tab tr.p1 .puesto { color: var(--oro); } .tab tr.p2 .puesto { color: var(--plata); } .tab tr.p3 .puesto { color: var(--bronce); } .tab tr.p1 td:first-child { box-shadow: inset 3px 0 0 var(--oro); } .tab tr.p2 td:first-child { box-shadow: inset 3px 0 0 var(--plata); } .tab tr.p3 td:first-child { box-shadow: inset 3px 0 0 var(--bronce); } /* La caja pequena de una SALVEDAD pegada a un dato: el empate junto al puesto, «es la misma persona» junto a un indicativo. **VA SIN ACOTAR A `.tab` A PROPOSITO**: nacio dentro del tablero y a las horas se necesito en `/records`, donde `.tab .emp` no aplica ---la clase existia, la guarda callaba porque solo comprueba que este DEFINIDA, y el rotulo salia sin caja---. Una guarda que mira la existencia no ve el alcance. */ .emp { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--suave); border: 1px solid var(--panelb); font-size: 10px; color: var(--gris); font-weight: 400; letter-spacing: 0; } .tab .gano { color: var(--mas); font-weight: 700; font-variant-numeric: tabular-nums; } .tab svg.mapa { max-width: none; margin: 0; border: 0; background: transparent; } svg.mapa .puntos circle { fill: var(--onda); fill-opacity: .55; stroke: var(--ondaf); stroke-width: 1; } /* ── EL PODIO: tres tarjetas, y la primera lleva la marca del color de carta ──────────────── */ .podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 16px; } .podio article { border: 1px solid var(--linea); border-top: 3px solid var(--tinta); padding: 10px 12px 12px; } .podio article:first-child { border-top-color: var(--cartaf); } .podio .rk { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gris2); } .podio h3 { font-size: 15px; font-weight: 600; margin: 3px 0 6px; line-height: 1.2; } .podio .pts { font-size: 30px; font-weight: 700; line-height: .86; font-variant-numeric: tabular-nums; } .podio .pie { display: flex; gap: 12px; font-size: 12px; color: var(--gris); margin-top: 6px; font-variant-numeric: tabular-nums; } .podio .pie b { color: var(--tinta); } /* ── EL REPARTO: es el grafico Y el filtro, y por eso son botones y no un dibujo ──────────── */ .reparto { margin: 0 0 16px; } .reparto .rot { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris2); margin-bottom: 5px; } .barras { display: flex; height: 32px; border: 1px solid var(--linea); overflow: hidden; } .barras button { border: 0; padding: 0 4px; cursor: pointer; font: inherit; color: var(--cabtexto); display: flex; align-items: center; justify-content: center; gap: 5px; border-right: 2px solid var(--fondo); overflow: hidden; white-space: nowrap; } .barras button:last-child { border-right: 0; } .barras button[aria-pressed="true"] { outline: 2px solid var(--tinta); outline-offset: -2px; } .barras b { font-weight: 700; } .barras span { font-size: 11px; opacity: .92; } .reparto .ayuda { font-size: 12px; color: var(--gris); margin-top: 5px; } /* ── LA BARRA PERMANENTE: buscador y la linea de no oficialidad ───────────────────────────── */ header.barra .buscar input { font: 12px inherit; padding: 3px 7px; width: 190px; border: 1px solid var(--barra); background: transparent; color: var(--cabtexto); } header.barra .buscar input::placeholder { color: var(--cabnota); } header.barra .noficial { display: block; width: 100%; font-size: 11px; color: var(--avisof); font-weight: 600; } /* ── EL MISMO INSTRUMENTO CON LA LUZ APAGADA ───────────────────────────────────────────────── No es una inversion: los grises se recalculan para que el suelo de contraste se cumpla contra el fondo oscuro, y los dos acentos suben de luminosidad porque sobre negro pierden peso. Cada bloque `:root` lo verifica `prueba_contraste`, que los recorre todos. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --tinta: #f2efe7; --gris: #b5b7ac; --gris2: #b5b7ac; --linea: #73776c; --regla: #73776c; --fondo: #151712; --suave: #2b2f27; --cab: #242720; --cabtexto: #f2efe7; --cabnota: #b5b7ac; --barra: #653424; --tinte: #4a2619; --mas: #89c7a7; --menos: #ff7043; --masf: #acd3e7; --menosf: #ff7043; --aviso: #f0c65a; --avisof: #43271d; --rojo: #ff7043; --rojof: #43271d; --panel: #242720; --panelb: #454940; --acento: #ff7043; --oro: #f0c65a; --plata: #b5b7ac; --bronce: #ff7043; --onda: #acd3e7; --ondaf: #acd3e7; --carta: #ff7043; --cartaf: #ff7043; --tierra: #252820; --tierrab: #454940; } } :root[data-theme="dark"] { color-scheme: dark; --tinta: #f2efe7; --gris: #b5b7ac; --gris2: #b5b7ac; --linea: #73776c; --regla: #73776c; --fondo: #151712; --suave: #2b2f27; --cab: #242720; --cabtexto: #f2efe7; --cabnota: #b5b7ac; --barra: #653424; --tinte: #4a2619; --mas: #89c7a7; --menos: #ff7043; --masf: #acd3e7; --menosf: #ff7043; --aviso: #f0c65a; --avisof: #43271d; --rojo: #ff7043; --rojof: #43271d; --panel: #242720; --panelb: #454940; --acento: #ff7043; --oro: #f0c65a; --plata: #b5b7ac; --bronce: #ff7043; --onda: #acd3e7; --ondaf: #acd3e7; --carta: #ff7043; --cartaf: #ff7043; --tierra: #252820; --tierrab: #454940; } /* ── LA BARRA, EN DOS FILAS DECLARADAS ───────────────────────────────────────────────────────── */ /* LA BARRA VA A SANGRE Y SU CONTENIDO SE ALINEA CON EL DE LA PAGINA. Tiene fondo propio y un filete debajo, asi que centrarla como caja la dejaria flotando en mitad del papel; lo que se centra es lo de dentro, con la MISMA medida que `main` ---por eso las dos leen el mismo token y ninguna sabe nada de la otra---. Sin esto el rotulo de la barra se quedaria pegado al borde mientras el titular empieza 254 px mas alla: dos alineaciones distintas se leen como un error de maquetacion, que es peor que no centrar nada. */ header.barra { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 16px; align-items: center; padding: 8px var(--margen-columna) 7px; } header.barra .marca { font-size: 15px; font-weight: 700; } header.barra nav { display: flex; flex-wrap: wrap; gap: 2px 3px; } header.barra nav a { margin: 0; padding: 3px 8px; border-radius: 2px; font-size: 12.5px; color: var(--cabnota); text-decoration: none; white-space: nowrap; } header.barra nav a:hover { color: var(--cabtexto); background: rgba(127,127,127,.22); } header.barra nav a[aria-current] { color: var(--cabtexto); background: rgba(127,127,127,.3); font-weight: 700; border-bottom: 0; } header.barra .buscar { justify-self: end; } header.barra .idioma { white-space: nowrap; } header.barra .foto { grid-column: 2 / -1; margin: 0; font-size: 11.5px; } header.barra .noficial { grid-column: 1; grid-row: 2; width: auto; white-space: nowrap; } @media (max-width: 1000px) { header.barra { grid-template-columns: 1fr auto; } header.barra nav { grid-column: 1 / -1; order: 3; } header.barra .foto, header.barra .noficial { grid-column: 1 / -1; grid-row: auto; white-space: normal; } } /* ── LAS CAPAS DE LA TABLA: seis columnas de trece, y el resto a un clic ─────────────────────── EL SCROLL LATERAL ERA EL DEFECTO. Trece columnas no caben en ninguna pantalla, y meterlas en un desplazador horizontal convierte cada consulta en un arrastre: se pierde de vista de quien es la fila justo cuando se esta mirando el numero. La identidad congelada lo hacia soportable, y soportable no es bueno. Las siete que se pliegan SE SIGUEN EMITIENDO ---el CSV las lleva, la impresion las despliega y la tabla sigue contando como ancha--- porque esconder no es lo mismo que no tener. */ table.capas:not(.todo) .cap2 { display: none; } table.capas .solo-todo { display: none; } table.capas.todo .solo-todo { display: table-row; } table.capas.todo .solo-poco { display: none; } .mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 4px; } .mandos .capas-boton { font: inherit; font-size: 12px; cursor: pointer; padding: 3px 9px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); } .mandos .capas-boton:hover { background: var(--suave); } .mandos .cuantas { font-size: 12px; color: var(--gris); } @media print { table.capas .cap2, table.capas .solo-todo { display: revert !important; } table.capas .solo-poco { display: none !important; } header.barra nav, header.barra .idioma, input.filtro, .noimprimir { display: none; } body { font-size: 10.5px; } main { padding: 0; max-width: none; } /* EL ARMAZON NO SE IMPRIME. Hasta hoy el rail de 208 px con sus quince enlaces y la caja de busqueda salian en el papel: `header.barra nav` no casaba con nada ---selector fosil de una barra anterior--- y `aside.lado` no se nombraba. Y un `
` cerrado se imprime cerrado, asi que en papel se abren todos: no hay donde pulsar. */ aside.lado, header.barra, .buscar, .idioma, .noimprimir, input.filtro { display: none; } .app { display: block; } details.grupo > *, details.estado > * { display: revert; } /* EN PAPEL NO HAY DONDE DESPLAZARSE: el marco acotado de las tablas largas se suelta, o la hoja saldria con 630 px de tabla y el resto cortado. */ .ancha.larga { max-height: none; overflow: visible; } /* On paper the header is not a slab of ink (toner, dirty grey): a light background and a thick rule keep the hierarchy. */ th { position: static; background: #fff; color: var(--tinta); border-bottom: 2px solid var(--tinta); } th .nota, thead tr.grupos th { color: var(--gris); } tr:hover td { background: none; } td.barra .b, td.div .pos, td.div .neg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* EN PAPEL EL TINTE VUELVE A SER UNA BANDA, y el motivo es una medida: el `inset` es porcentual y la fila mas alta del sistema es la impresa ---65 px---, asi que el tinte que en pantalla mide 21,8 px alli mide 35,6: x7,1 el area en vez de x4,4. `ENCARGO_6` pide «admitir impresion: sin fondos que se coman la tinta», y una hoja de papel no tiene retroiluminacion que rescate un numero sobre un bloque de color. */ td.barra:has(.v) .b { top: auto; bottom: 2px; height: 5px; } h2 { page-break-after: avoid; } table { page-break-inside: auto; } tr { page-break-inside: avoid; } /* An SVG stroke is not a background, so it survives the print without print-color-adjust; what it does need is not to be cut in half across two sheets. */ svg.serie, figure.serie { page-break-inside: avoid; } a { color: inherit; } }