/* CORRECCIONES CRÍTICAS PARA MÓVILES */
        
        /* 1. Asegurar que todos los inputs tengan al menos 16px de font-size */
        input[type="text"], 
        input[type="number"], 
        input[type="email"], 
        input[type="tel"], 
        input[type="password"],
        select, 
        textarea {
            font-size: 16px !important;
            min-height: 44px !important; /* Tamaño mínimo recomendado para touch */
            padding: 12px !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
        }

        /* 2. Evitar zoom automático en iOS */
        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        select:focus,
        textarea:focus {
            font-size: 16px !important;
            outline: 2px solid #007bff !important;
            outline-offset: 2px !important;
        }

        /* 3. Mejorar área táctil de los selectores */
        select {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 12px center !important;
            background-size: 12px !important;
            padding-right: 40px !important;
        }

        /* 4. Responsive design para formularios */
        @media screen and (max-width: 768px) {
            .form-container, 
            .nuevo-producto,
            .captura-form {
                padding: 15px !important;
                margin: 10px !important;
            }

            .form-group,
            .input-group {
                margin-bottom: 20px !important;
            }

            label {
                font-size: 14px !important;
                font-weight: 600 !important;
                margin-bottom: 8px !important;
                display: block !important;
            }

            /* Botones más grandes para móviles */
            button, 
            .btn,
            input[type="submit"] {
                min-height: 48px !important;
                font-size: 16px !important;
                padding: 12px 20px !important;
                margin: 10px 0 !important;
                width: 100% !important;
                border: none !important;
                border-radius: 6px !important;
                cursor: pointer !important;
            }

            .btn-primary {
                background-color: #007bff !important;
                color: white !important;
            }

            .btn-primary:hover {
                background-color: #0056b3 !important;
            }
        }

        /* 5. Prevenir problemas de overflow */
        * {
            -webkit-box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
        }

        /* 6. Mejorar scrolling en móviles */
        body {
            -webkit-overflow-scrolling: touch !important;
            overflow-x: hidden !important;
        }

        /* 7. Corrección específica para campos de precio */
        input[type="number"] {
            -moz-appearance: textfield !important;
        }

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
        }

        /* 8. Asegurar que los modales funcionen en móviles */
        .modal,
        .popup {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 9999 !important;
        }

        /* 9. Mejoras para la tabla responsive */
        @media screen and (max-width: 768px) {
            table {
                font-size: 14px !important;
            }
            
            .table-responsive {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
        }