/* Solo telefonos iOS, tambien en horizontal. No se limita el zoom manual.
   El helper mide el control antes de enfocarlo: la escala conserva su fuente y
   su caja originales, incluso con estilos propios, Select2 o contenido AJAX. */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-device-width: 767px) and (hover: none) and (pointer: coarse) {
        /* Flatpickr selecciona la hora programaticamente al abrir. Los 16px
           deben estar aplicados antes de select(), sin escalar sus inputs
           internos dentro del panel de 40px (overflow:hidden). */
        .flatpickr-calendar .flatpickr-time input.numInput {
            font-size: 16px;
        }

        /* OneUI usa appearance:listbox. El tema nativo de iOS puede imponer
           medidas intrinsecas a fecha/hora, aun con width:100% y padding.
           Se conserva el picker nativo y el ancho particular de cada control. */
        input.form-control[type="date"],
        input.form-control[type="time"],
        input.form-control[type="datetime-local"] {
            -webkit-appearance: none;
            appearance: none;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* El componente compartido puede estar dentro de modales con varios
           niveles de padding. Flex decide el salto segun el espacio real. */
        #diagnostico-nuevo .diagnostico-fecha-hora {
            flex: 1 1 12rem;
            max-width: 100%;
            min-width: 0;
        }

        .ios-campo-sin-zoom {
            font-size: 16px !important;
            line-height: var(--ios-line-height) !important;
            width: var(--ios-width) !important;
            height: var(--ios-height) !important;
            min-width: 0 !important;
            max-width: none !important;
            min-height: 0 !important;
            max-height: none !important;
            flex: none !important;
            transform: var(--ios-transform) scale(var(--ios-scale)) !important;
            transform-origin: top left !important;
            padding: var(--ios-padding) !important;
            border-width: var(--ios-border-width) !important;
            border-radius: var(--ios-border-radius) !important;
            margin-right: var(--ios-margin-right) !important;
            margin-bottom: var(--ios-margin-bottom) !important;
            letter-spacing: var(--ios-letter-spacing) !important;
            vertical-align: var(--ios-vertical-align) !important;
        }

        /* El limite tambien debe compensarse al escalar: 100% recortaria el
           ancho visual del input enfocado al 75% en formularios de 12px. */
        input.form-control[type="date"].ios-campo-sin-zoom,
        input.form-control[type="time"].ios-campo-sin-zoom,
        input.form-control[type="datetime-local"].ios-campo-sin-zoom {
            max-width: calc(100% / var(--ios-scale)) !important;
        }
    }
}