/* EL TELÉFONO — lo que cambia cuando quien juega usa el dedo y no el ratón. * * POR QUÉ EXISTE, con el número que lo mandó. `bin/pulgar.mjs`, corrido el * 15-sep-2026 sobre las 32 pantallas de una partida de verdad a 390 px (el * iPhone de base), encontró: **526 cosas para apretar más chicas que el piso de * 24 px**, 3.948 más que no llegan a la meta de 44, y **4.305 bloques de letra * por debajo de 12 px**, el más chico de 10.5. Las casillas de decidir medían * 13×13 y los campos donde se escribe el plan, 18 px de alto. El juego se veía * bien en la foto y en la mano no se podía jugar. * * LAS VARAS SON AJENAS, NINGUNA ES MÍA: * · 24×24 px — WCAG 2.2, criterio 2.5.8 «Target Size (Minimum)», nivel AA. * Es el piso duro: abajo de eso está mal, sin matices. * · 44×44 px — WCAG 2.1 criterio 2.5.5 nivel AAA, y la guía de interfaz de * Apple, que pide 44×44 pt desde el primer iPhone. Es la meta, * y es la que se persigue acá: si se va a tocar, que se toque * bien. * · 8 px de separación — Material Design, la guía de Google. * · 12 px de letra — el piso de las revisiones de accesibilidad móvil. * * 🔴 **TODO CUELGA DE `@media (pointer: coarse)`, y esa decisión es la que hace * que esto sea seguro.** `pointer: coarse` pregunta por el HECHO —con qué se * está señalando, un dedo o un puntero fino— y no por el ancho de la ventana. * Es la diferencia que importa: una tableta de 1024 px es táctil y hay que * agrandarle los blancos; una ventana angosta en la computadora NO lo es y * agrandárselos sería romperla sin motivo. Y sobre todo: en la computadora este * archivo no aplica ni una regla, así que las medidas que ya estaban verdes * —0 cortes a 1280 px, lectura ≤ 2 en las 29 pantallas— no se pueden mover. * El riesgo de regresión no es «bajo»: es cero por construcción. * * SE CARGA ÚLTIMO, después de `temas.css`, porque redefine algunos de sus * tamaños de letra y en CSS con igual especificidad gana el último. Quitar la * línea que lo carga devuelve la pantalla exacta de antes, sin tocar nada más. * * ⚠️ SOBRE LOS `!important`. Están contados y son pocos, y hay un motivo que no * es pereza: varios controles del juego llevan su tamaño en un atributo `style` * escrito dentro del HTML (`escala_sel`, por ejemplo, trae * `padding:1px 4px;font-size:var(--t1)`). Un estilo puesto ahí le gana a * cualquier regla de hoja, por específica que sea. Las dos salidas eran tocar * las 87 llamadas que escriben esos atributos —y arriesgar el escritorio, que * está verde— o marcar estas pocas reglas. Se eligió la que no puede romper lo * que ya funciona. * * Se vuelve a medir con: node bin/pulgar.mjs */ /* ═══ EL CARTEL DE LA PISTA ═══ ver `public/pista.js` para el porqué. Vive fuera del bloque táctil a propósito: el cartel sólo lo crea `pista.js`, que ya se apaga solo en la computadora. Tenerlo acá afuera deja que se pueda probar a mano sin emular un teléfono. */ .pista_cartel{position:fixed;z-index:9999;max-width:min(88vw,340px); background:var(--tarjeta,#fff);color:var(--texto,#1b2733); border:1px solid var(--borde,#d8e0e7);border-radius:var(--radio,10px); box-shadow:0 8px 28px rgba(16,24,40,.18);padding:12px 14px 10px; font-size:14px;line-height:1.45;opacity:0;transition:opacity .12s} .pista_cartel.listo{opacity:1} .pista_tx{margin:0 0 8px} .pista_x{display:block;margin-left:auto;min-height:36px;padding:0 14px; border:1px solid var(--acento-borde,#c7d2fe);border-radius:99px; background:var(--acento-suave,#eef2ff);color:var(--acento,#4f46e5); font:inherit;font-size:13px;font-weight:600;cursor:pointer} @media (prefers-reduced-motion:reduce){ .pista_cartel{transition:none} } @media (pointer: coarse) { /* ── 1 · LA LETRA, PISO DE 12 px ───────────────────────────────────────── Los dos peldaños de abajo de la escala del juego —`--t0` en 11.5 y `--tg` en 10— son los que caen bajo el piso. Se suben SÓLO acá; la escala de la computadora, medida y documentada en `bin/escala-tipografica.mjs`, no se toca. Los otros cinco peldaños ya estaban arriba de 12 y se quedan como están: subir todo de golpe desarmaría las proporciones que sí funcionan. */ :root{ --t0:12px; --tg:12px; } /* Y los tamaños escritos a mano en `temas.css`, que no pasan por la escala. */ .dk-rot, .gr-fval em, .gr-dcen span, .gr-tab th, .gr-mes>u{ font-size:12px } .compacto header .paso b{ font-size:12px; width:22px; height:22px } /* Los rótulos de los ejes de las gráficas son un caso aparte y se dice por qué: no son prosa, son marcas de una escala, y a 12 px en una pantalla de 390 se pisan entre ellas y la gráfica deja de leerse. Suben a 11.5 —el mismo peldaño `--t0` que tenía el resto del juego en la computadora— que es legible y no amontona. */ .gr-eje{ font-size:11.5px } #tab .caja12 text{ font-size:11.5px } /* ── 2 · LAS CASILLAS Y LOS BOTONES REDONDOS ──────────────────────────── Medían 13×13, el tamaño que trae el navegador de fábrica. Las que viven dentro de su rótulo ya se podían apretar en el rótulo; las sueltas —las de cerrar una línea, que van dentro de una celda de tabla— no tenían más blanco que el cuadrito. Se agrandan todas: la que ya estaba bien tampoco pierde nada por ser más fácil de ver. */ input[type=checkbox], input[type=radio]{ width:24px; height:24px; margin:2px 4px 2px 0; vertical-align:-5px } /* ── 3 · DONDE SE ESCRIBE EL PLAN ─────────────────────────────────────── Los campos de decidir medían 18 px de alto. Es LA cosa que se toca en el juego —el precio, la promoción, cuánto producir— y era la más chica de todas. Van a la meta de 44. El `font-size:16px` no es estética: abajo de 16, iOS hace zoom solo al entrar al campo, la pantalla se descoloca y hay que volver a acomodarla a mano en cada número que se escribe. */ input[type=text], input[type=number], input[type=search], input[type=email], input[type=password], select, textarea{ min-height:44px !important; font-size:16px !important; padding:6px 10px !important; box-sizing:border-box } input[type=range]{ min-height:44px } input[type=checkbox], input[type=radio]{ min-height:0 !important; font-size:inherit !important; padding:0 !important } /* ── 4 · LOS BOTONES Y LOS ENLACES DE LA BARRA ────────────────────────── «← salas» medía 46×20 y está en las 25 pantallas: es el botón de salir. Las píldoras de la barra (`.ch`) son enlaces de verdad —bajar el expediente, imprimir— y medían lo mismo. */ header .fila a, header .fila .ch, header .fila button, a.m.p13, .dk-paleta, .dk-paleta-caja button{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding-left:10px; padding-right:10px } /* El resumen plegable —«ver por qué», «VER MÁS SOBRE ESTA GRÁFICA»— medía 15 px de alto y es la puerta a la explicación de cada gráfica. */ summary{ min-height:44px; display:flex; align-items:center } /* Los botones del juego que no son de la barra: los pasos, las secciones, los temas del índice, los siete módulos del tablero. */ button, .paso, .sc, .ie, .mod, [role=button], [role=tab]{ min-height:44px } /* ── 5 · LO QUE VA ADENTRO DE UNA FRASE ───────────────────────────────── La píldora «paso 3 · fabricar →» y las marcas de ayuda viven dentro de un renglón de texto. WCAG 2.5.8 las exceptúa por escrito —agrandarlas rompería el renglón— así que NO se llevan a 44: se las lleva al piso de 24, que es lo máximo que se puede sin desarmar el párrafo. Queda dicho que se pensó, no que se olvidó. */ .donde, .czref, .czm, .nmar, .ncnt{ min-height:24px; padding-top:2px; padding-bottom:2px } button.donde{ min-height:24px } /* La ⓘ ya tenía su blanco de 24 px escondido en un `::after` transparente —eso estaba bien hecho y el medidor lo confirmó—. Acá pasa a 44, que es la meta, porque en el teléfono es lo que abre la explicación y errarle significa quedarse sin ella. */ .ii::after, .inf_cif .ii::after{ width:44px; height:44px } .ii, .inf_cif .ii{ width:18px; height:18px; font-size:12px } /* ── 6 · SEPARACIÓN ───────────────────────────────────────────────────── Material pide 8 px entre dos cosas apretables. Los sitios donde el juego pone controles hombro con hombro son las filas de píldoras. */ header .fila{ gap:8px; flex-wrap:wrap } .indice{ gap:8px } #mods{ gap:8px } /* ── 7 · NADA SE CORRE DE LADO ────────────────────────────────────────── Con los blancos más grandes, una tabla que antes entraba puede dejar de entrar. La barra horizontal propia del cajón es la salida correcta —el dato no se pierde, se alcanza deslizando— y `overscroll-behavior-x: contain` evita que ese deslizamiento se lo lleve el navegador como «volver atrás». */ .t, table{ max-width:100% } .tabla-corre, .t-corre{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch } } /* ── 8 · LOS TRES QUE QUEDABAN CHICOS — 17-sep-2026, orden suya O-0006 ────── Medido con `bin/foto.mjs '' 360x780`, que desde hoy sí declara pantalla táctil y por lo tanto sí aplica esta hoja. Quedaban 3 de 21 controles por debajo de la meta de 44×44 (Apple HIG) : el botón de cambiar la paleta (24 de ancho), un campo sin `type` escrito —que por eso no entraba en la regla del bloque 3, que enumera los tipos— y el triángulo de abrir un pliegue (``, 30 de alto), que es como se entra a media pantalla del juego. */ @media (pointer: coarse) { button.dk-paleta{ min-width:44px } input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){ min-height:44px !important; box-sizing:border-box } summary{ min-height:44px; display:flex; align-items:center } } /* Y los tres rótulos que seguían bajo el piso de 12 px en el teléfono: los de la barra que no se mueve (`.barra .dato span`), los del informe (`.inf_cif span`) —los dos a 10.5 px y en mayúsculas, que es el caso peor para leer— y el pie del tema (`.dk-pie`, 11.5). Es el mismo piso del bloque 1, aplicado a los tamaños escritos a mano que no pasan por la escala. */ @media (pointer: coarse) { .barra .dato span, .inf_cif span{ font-size:12px; letter-spacing:.04em } .dk-pie, .dk-pie span{ font-size:12px } } /* ── 9 · PRIMOR — LA PASADA VISUAL, 4-oct-2026 (orden O-0021) ──────────────── Lo que quedaba ENTRE el piso de 24 y la meta de 44, medido con `bin/pulgar.mjs` a 320 px. Todas cuelgan de `@media (pointer: coarse)`, así que el escritorio —que ya está medido en verde— no cambia ninguna medida. El patrón es siempre el mismo: el selector base de cada control pesa más que la regla general del bloque 4 (`button{min-height:44px}` no le gana a `.fprod{min-height:24px}`). Acá se repite el selector tal como está en la pantalla —con la misma especificidad— y gana esta hoja porque se carga última. Los dos `!important` que hay no son contra un estilo escrito a mano sino contra la especificidad, y se dice en cada uno. */ @media (pointer: coarse) { /* Pestañas del índice, filtros del mapa y del tipo de gráfica, y la píldora del mapa de secciones: sus bases fijan 26, 24 y 24 px de alto. */ .indice .ie, .fichbar .ie, .fseg, .fprod, .secciones .sc_mapa{ min-height:44px; padding-top:9px; padding-bottom:9px } /* Los pliegues —«por qué», «ver los números», «cómo lo contrata»—: su base `details.pq>summary` fija `min-height:24px` y le gana a `summary{}` del bloque 4. Son nueve variantes de pliegue; `!important` contra la especificidad, no contra un atributo `style`. */ summary{ min-height:44px !important; display:flex; align-items:center } /* La casilla con su rótulo: 24 de alto más 10 de relleno = 34. */ label.blanco{ min-height:44px; display:flex; align-items:center; padding-top:9px; padding-bottom:9px } /* La casilla de radio o tilde marcada con `.dec` —elegir proveedor, dueño— mide 24 y su rótulo la envuelve: se agranda el rótulo, que es lo que el dedo toca. */ label:has(> input.dec){ min-height:44px; display:flex; align-items:center } /* Separación de píldoras: 5 y 4 px donde Material pide 8. Los dos `_bar` traen el `gap` escrito en un atributo `style` dentro del HTML, de ahí el `!important`. */ .secciones, .pasos, .indice{ gap:8px } .fseg_bar, .fprod_bar{ gap:8px !important } /* El rótulo de la cinta —«ahora» / «lo que sigue»— seguía en 10.5 px. */ .cinta .cr{ font-size:12px } /* La ⓘ de ayuda: el círculo mide 14 y el blanco de clic escondido en `::after` medía 24. En el teléfono va a la meta. */ #tab .ayuda::after{ width:44px; height:44px } /* El conmutador de tipo de gráfica —«líneas / barras / tabla»— ponía los botones a 5 px, y los de filtrar segmento traen el `gap` en un `style`. */ .gr-tipos{ gap:8px } }