/* Human Interface Guidelines de Apple para las páginas internas. * * Que quede dicho lo que NO es: no existe una «regulación» de Apple que obligue * a un sitio web — la revisión de la App Store no aplica a una página. Lo que * aplica son las HIG y el comportamiento real de Safari en iOS, y las dos cosas * se miden. Esto es lo medido el 2026-09-23 a 393x852 en un navegador táctil: * * admin 9/9 controles por debajo de 44x44 · desbordaba 134px * analytics 12/12 · desbordaba 414px · 3 campos a 12px * leads 8/8 crm 5/5 stats 5/5 status 4/4 * * index.html y landing.html llevan sus propias reglas en línea porque tienen * maquetas propias; estas seis comparten la misma —cabecera negra en flex, * botones de 11px, tablas densas— así que comparten la hoja. Una página nueva * que la enlace queda cubierta sin copiar nada. * * `pointer: coarse` y no un umbral de ancho: lo que decide es que el puntero * sea un dedo, no el tamaño de la pantalla. Cubre el iPad en horizontal, donde * un umbral de ancho no habría entrado, y deja el ratón intacto. */ /* iOS agranda el texto por su cuenta en bloques que considera largos y descuadra una interfaz densa. 100% respeta la hoja sin impedir el zoom manual del usuario. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* La muesca y el indicador de inicio. Necesita `viewport-fit=cover` en el meta, que estas seis ya llevan. */ body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } @media (pointer: coarse) { /* La cabecera es `display:flex` sin envolver: en un teléfono no cabe y se recorta, que es exactamente el fallo que index.html tenía. Aquí no hace falta desplazar — hay sitio de sobra en vertical— así que envuelve. */ header { flex-wrap: wrap; row-gap: 8px; } /* 44x44 pt. A diferencia de index.html, donde la fila de lentes obligaba a agrandar sólo el ÁREA con un ::before, aquí los controles están sueltos y pueden crecer de verdad sin romper la maqueta. */ button, select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="date"], header a, [role="button"] { min-height: 44px; } /* Un control que sólo lleva un icono no hereda ancho de su texto. */ button { min-width: 44px; } /* Los enlaces de navegación de la cabecera son palabras cortas —«Mapa», «CRM», «Admin»— y medían de 25 a 43px de ancho. El alto ya lo daba la regla de arriba; el ANCHO no, porque un en línea mide lo que mide su texto. 44x44 son las dos dimensiones, no una. */ header a { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Los dos enlaces de la tarjeta de acceso —«Escríbenos a…» y «Volver al inicio»— medían 14px de alto. access-gate.js la monta en `#agate`, fuera de la cabecera, así que la regla de arriba no los alcanzaba. Y es la primera pantalla de quien no ha entrado: si algo tiene que ser tocable en esta página, es eso. `inline-flex` para que el alto le haga caso a un dentro de un párrafo. */ #agate a { min-height: 44px; display: inline-flex; align-items: center; } /* Safari hace zoom al enfocar un campo con fuente < 16px y NO vuelve a alejarse: el visitante se queda con la vista recortada y sin saber por qué. 16px es el umbral exacto, no una recomendación. `!important` porque una hoja que CORRIGE tiene que ganar: analytics declara `.bar input { font: inherit }` con especificidad (0,1,1) y heredaba 12px, así que un selector genérico (0,0,1) perdía pasara donde pasara en el orden. Éste es el caso para el que !important existe — no un atajo. */ input, select, textarea { font-size: 16px !important; } button, select, input, header a, [role="button"] { min-height: 44px !important; } /* Una tabla ancha no debe ensanchar la PÁGINA. analytics tiene 18 columnas con `white-space:nowrap` colgando directamente de , sin contenedor que las contenga: el teléfono acababa con un viewport de 807px en vez de 393 —Chrome encoge para que quepa— y todo el texto al 48% de tamaño. Con su propio desplazamiento, la página vuelve a medir lo que mide la pantalla y la tabla se explora de lado, que es lo que se hace con una tabla. */ table { display: block; max-width: 100%; overflow-x: auto; } } /* HIG de accesibilidad: respetar «reducir movimiento». */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }