diff --git a/src/js/controllerDatosHojaRuta.js b/src/js/controllerDatosHojaRuta.js
new file mode 100644
index 0000000..d39e370
--- /dev/null
+++ b/src/js/controllerDatosHojaRuta.js
@@ -0,0 +1,32 @@
+angular.module('focaCrearHojaRuta')
+    .controller('focaModalDatosHojaRutaCtrl', 
+        [
+            '$filter',
+            '$scope',
+            '$uibModalInstance',
+            'focaModalService',
+            'parametrosDatos',
+            function($filter, $scope, $uibModalInstance, focaModalService, parametrosDatos) {
+                $scope.datosHojaRuta = parametrosDatos.datosHojaRuta;
+                $scope.focused = 0;
+
+                $scope.aceptar = function(key) {
+                    if(key === 13) {
+                        if(!$scope.formDatosHojaRuta.$valid) {
+                            focaModalService.alert('Formulario inválido');
+                            return;
+                        }
+                        $uibModalInstance.close($scope.datosHojaRuta);
+                    }
+                };
+
+                $scope.next = function(key) {
+                    if(key === 13) $scope.focused++;
+                };
+
+                $scope.cancel = function() {
+                    $uibModalInstance.dismiss('cancel');
+                };
+            }
+        ]
+    );
diff --git a/src/views/foca-modal-datos-hoja-ruta.html b/src/views/foca-modal-datos-hoja-ruta.html
new file mode 100644
index 0000000..56b8aaf
--- /dev/null
+++ b/src/views/foca-modal-datos-hoja-ruta.html
@@ -0,0 +1,123 @@
+<div class="modal-header">
+    <h3 class="modal-title">Datos de la hoja de ruta</h3>
+</div>
+<div class="modal-body" id="modal-body">
+    <form name="formDatosHojaRuta">
+        <div class="row">
+            <div class="col-4">
+                <label class="form-control-sm">Kilómetros iniciales del vehículo:</label>
+            </div>
+            <div class="col-2 px-0">
+                <input
+                    foca-tipo-input
+                    foca-focus="focused === 0"
+                    ng-focus="focused = 0"
+                    teclado-virtual
+                    class="form-control form-control-sm"
+                    placeholder="Kilómetros iniciales"
+                    ng-model="datosHojaRuta.kmInicialVehiculo"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"
+                    />
+            </div>
+            <div class="col-4">
+                <label class="form-control-sm">Aforador inicial del vehículo:</label>
+            </div>
+            <div class="col-2 pl-0">
+                <input
+                    foca-tipo-input
+                    teclado-virtual
+                    foca-focus="focused === 1"
+                    ng-focus="focused = 1"
+                    class="form-control form-control-sm"
+                    placeholder="Aforador inicial"
+                    ng-model="datosHojaRuta.aforadorInicialVehiculo"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"/>
+            </div>
+            <div class="col-4 pr-0">
+                <label class="form-control-sm">Cantidad de descarga por gravedad:</label>
+            </div>
+            <div class="col-2 px-0">
+                <input
+                    foca-tipo-input
+                    teclado-virtual
+                    foca-focus="focused === 2"
+                    ng-focus="focused = 2"
+                    class="form-control form-control-sm"
+                    placeholder="Cantidad de descarga por gravedad"
+                    ng-model="datosHojaRuta.cantidadDescargaPorGravedad"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"/>
+            </div>
+            <div class="col-4">
+                <label class="form-control-sm">Litros cargados para movilidad:</label>
+            </div>
+            <div class="col-2 pl-0">
+                <input
+                    foca-tipo-input
+                    teclado-virtual
+                    foca-focus="focused === 3"
+                    ng-focus="focused = 3"
+                    class="form-control form-control-sm"
+                    placeholder="Litros de combustible carga el camión para su movilidad"
+                    ng-model="datosHojaRuta.litrosDescargadosPorGravedad"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"/>
+            </div>
+            <div class="col-2">
+                <label class="form-control-sm">Precinto uno:</label>
+            </div>
+            <div class="col-2 px-0">
+                <input
+                    type="text"
+                    teclado-virtual
+                    foca-focus="focused === 4"
+                    ng-focus="focused = 4"
+                    class="form-control form-control-sm"
+                    placeholder="Precinto boca uno"
+                    ng-model="datosHojaRuta.precintoBocaUno"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"/>
+            </div>
+            <div class="col-2">
+                <label class="form-control-sm">Precinto dos:</label>
+            </div>
+            <div class="col-2 px-0">
+                <input
+                    type="text"
+                    teclado-virtual
+                    foca-focus="focused === 5"
+                    ng-focus="focused = 5"
+                    class="form-control form-control-sm"
+                    placeholder="Precinto boca dos"
+                    ng-model="datosHojaRuta.precintoBocaDos"
+                    ng-required="true"
+                    ng-keypress="next($event.keyCode)"/>
+            </div>
+            <div class="col-2">
+                <label class="form-control-sm">Precinto tres:</label>
+            </div>
+            <div class="col-2 pl-0">
+                <input
+                    type="text"
+                    teclado-virtual
+                    foca-focus="focused === 6"
+                    ng-focus="focused = 6"
+                    class="form-control form-control-sm"
+                    placeholder="Precinto boca tres"
+                    ng-model="datosHojaRuta.precintoBocaTres"
+                    ng-required="true"
+                    ng-keypress="aceptar($event.keyCode)"/>
+            </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button
+        class="btn btn-primary"
+        type="button"
+        ng-click="aceptar(13)"
+        ng-disabled="!formDatosHojaRuta.$valid"
+    >Aceptar</button>
+    <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
+</div>