/* ============================================================================ ios_no_zoom.css — Evita el auto-zoom de iOS Safari al enfocar un campo. PROBLEMA iOS Safari hace zoom sobre cualquier campo editable cuyo font-size computado sea < 16px, y NO vuelve al zoom original al desenfocar. Entrar y salir de varios campos deja la página escalada y corrida. POR QUÉ ASÍ - `@supports (-webkit-touch-callout: none)` es verdadero SOLO en Safari iOS. Así el diseño compacto se mantiene intacto en desktop y en Android, donde el problema no existe. - `!important` es necesario: casi todos los inputs de la app se estilan por clase (`.co-input`, `.map-textarea`, `.ep-select`), y un selector de elemento pelado (especificidad 0,0,1) pierde contra una clase (0,1,0). - Se excluyen los `type` que no son editables por teclado: no disparan el zoom y forzarles 16px sí les cambiaría el aspecto. - NO se usa `maximum-scale=1` / `user-scalable=no` en el viewport: Safari los ignora desde iOS 10 y además impiden el zoom manual (accesibilidad). Este archivo se incluye desde todos los templates con propio. ========================================================================== */ @supports (-webkit-touch-callout: none) { /* OJO: el selector va todo en una línea a propósito. Un salto de línea entre `)` y `:not(` sería un combinador descendiente y cambiaría por completo lo que matchea. */ input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="hidden"]), textarea, select { font-size: 16px !important; } /* ---- Compensaciones de ancho ------------------------------------------ Sólo los campos de ancho FIJO en los que 16px no entra. Los de ancho fluido (width:100%, flex:1) se acomodan solos. Miden en border-box, así que el ancho incluye padding + borde. */ /* Gramos libres del catálogo: hasta 4 dígitos (max="9999") + placeholder "grs". Venía de 10.4px en 48px de ancho. */ .unidad-grs-input { width: 3.6rem !important; } /* Mismo campo en el wizard del onboarding: 46px de ancho, con 8px de padding y 3px de borde quedaban 35px útiles para 4 dígitos. */ .unidad-gramos-input { width: 62px !important; } /* de los horarios de atención: iOS dibuja su propio control y a 16px no entra en 96px. */ .horario-time-input { width: 112px !important; } }