diff --git a/src/js/controllerDetalleVehiculo.js b/src/js/controllerDetalleVehiculo.js
index 846c481..5b32ddf 100644
--- a/src/js/controllerDetalleVehiculo.js
+++ b/src/js/controllerDetalleVehiculo.js
@@ -1,9 +1,41 @@
 angular.module('focaLogisticaPedidoRuta')
-    .controller('focaDetalleVehiculo', ['$scope', '$uibModalInstance', 'vehiculo', 'marcador',
+    .controller('focaDetalleVehiculo',
+        ['$scope',
+        '$uibModalInstance',
+        'vehiculo',
+        'marcador',
         function($scope, $uibModalInstance, vehiculo, marcador) {
             $scope.articulos = marcador.notaPedido.articulosNotaPedido;
+            $scope.articuloSeleccionado = {};
             $scope.vehiculo = vehiculo;
             $scope.aceptar = function() {
                 $uibModalInstance.close();
             };
+
+            $scope.cargarACisterna = function(cisterna) {
+                if(!$scope.articuloSeleccionado.id) {
+                    //TODO: usar modal de foca
+                    alert('Debe seleccionar un articulo');
+                    return;
+                }
+                if(cisterna.cisternaCarga.cantidad) {
+                    cisterna.cisternaCarga.cantidad += parseFloat(cisterna.aCargar);
+                }else {
+                    cisterna.cisternaCarga.cantidad = parseFloat(cisterna.aCargar);
+                    cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.id;
+                }
+                cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
+                cisterna.aCargar = '';
+            };
+            $scope.calcularPorcentaje = function(cisterna) {
+                if(!cisterna.cisternaCarga.cantidad) {
+                    cisterna.cisternaCarga.cantidad = 0;
+                }
+                var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
+                    cisterna.capacidad) + '%';
+                document.getElementById(cisterna.id).style.width = porcentaje;
+            };
+            $scope.cambioArticulo = function(articulo) {
+                $scope.articuloSeleccionado = articulo;
+            };
     }]);
diff --git a/src/js/osm-directive.js b/src/js/osm-directive.js
index 3e330ab..e189c93 100644
--- a/src/js/osm-directive.js
+++ b/src/js/osm-directive.js
@@ -7,7 +7,7 @@ angular.module('focaLogisticaPedidoRuta').directive('foca', function() {
             scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
         },
-        controller: ['$scope', function($scope) {
+        controller: ['$scope', '$filter', function($scope, $filter) {
             $scope.markers = [];
             $scope.$watch('marcadores', function() {
                 for(var i in $scope.markers) {
@@ -15,8 +15,41 @@ angular.module('focaLogisticaPedidoRuta').directive('foca', function() {
                 }
                 $scope.markers = [];
 
-                angular.forEach($scope.marcadores, function(marcador) {                    
-                    var observacion = '<i class="fa fa-map-marker fa-5x" aria-hidden="true"'+
+                angular.forEach($scope.marcadores, function(marcador) {
+                    var observacion =
+                        'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
+                        (
+                            marcador.notaPedido.vendedor ? 
+                            marcador.notaPedido.vendedor.NomVen : 
+                            ''
+                        ) + '<br/>';
+                    observacion += 'Fecha: ' +
+                        $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
+                        marcador.fecha.slice(11,19) + '<br/>';
+                    observacion += 'Nº: ' + $filter('comprobante')([
+                        marcador.notaPedido.sucursal, 
+                        marcador.notaPedido.numeroNotaPedido
+                    ]) + '<br/>';
+                    observacion += 'Cliente: ' + 
+                        marcador.notaPedido.cliente.NOM + '<br/>';
+                    
+                    if ($scope.parametros.individual) {
+                        observacion += 
+                            'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');
+                        observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
+
+                        if (marcador.distancia) {
+                            observacion += '<br/>Distancia a casa central: ' +
+                                marcador.distancia + 'km';
+                        }
+                    } else {
+                        observacion += 'Cantidad de nota de pedido: ' +
+                            marcador.cantidad + '<br/>';
+                        observacion += 'Total Vendido: ' +
+                            $filter('currency')(marcador.total, '$');
+                    }
+                    observacion += '<br/>';
+                    observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
                         'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
                         JSON.stringify(marcador)+')\' draggable="true"></i>';
                     $scope.markers.push(
diff --git a/src/views/foca-detalle-vehiculo.html b/src/views/foca-detalle-vehiculo.html
index d3776a3..9bc872b 100644
--- a/src/views/foca-detalle-vehiculo.html
+++ b/src/views/foca-detalle-vehiculo.html
@@ -1,29 +1,58 @@
 <div class="modal-header">
     <h4>Detalle de carga</h4>
+    <h3>-EN DESARROLLO</h3>
 </div>
 <div class="modal-body">
-    <div class="row">
+    <div>
         <div class="col-12" ng-repeat="articulo in articulos">
             <input
-                type="checkbox"
-                ng-model="articulo.chequed"
+                type="radio"
+                name="articuloRadio"
+                id="{{articulo.id}}"
+                ng-click="cambioArticulo(articulo)"
             >
             <span>Articulo: {{articulo.descripcion}},</span>
-            <span>Cantidad: {{articulo.cantidad}}</span>
+            <span>Cantidad Cargada: {{articulo.cantidad}}</span>
+            <span>Cantidad a Cargar: </span>
         </div>
         <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
         <strong class="col-12">Cisternas:</strong>
-        <!-- <div class="text-center">
-            <div class="progress" ng-repeat="cisterna in vehiculo.cisternas">
-                <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
-                    <span class="sr-only">30% Complete</span>
+        <div class="form-group row input-group" ng-repeat="cisterna in vehiculo.cisternas">
+            <div class="col-1 mt-2">
+                <strong>{{cisterna.codigo}}</strong>
+            </div>
+            <input
+                class="form-control col-2"
+                foca-tipo-input
+                foca-teclado
+                placeholder="A cargar..."
+                ng-model="cisterna.aCargar"
+                ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible"
+            >
+            <div class="input-group-append">
+                <button
+                    class="form-control btn btn-outline-secondary"
+                    ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible">
+                    <i
+                        class="fa fa-save"
+                        ng-click="cargarACisterna(cisterna)"
+                        aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="progress foca-alto col-8 pl-0 pr-0 mt-1">
+                <strong class="col-12 mt-1 text-center position-absolute"
+                >{{cisterna.cisternaCarga.cantidad || 0}} / {{cisterna.capacidad}}</strong>
+                <div
+                    id="{{cisterna.id}}"
+                    class="progress-bar"
+                    role="progressbar"
+                    aria-valuemin="0"
+                    aria-valuemax="{{cisterna.capacidad}}"
+                    ng-style="{'width':'{{calcularPorcentaje(cisterna)}}'}">
                 </div>
             </div>
-        </div> -->
-        <div class="progress col-12" ng-repeat="cisterna in vehiculo.cisternas">
-            <div class="progress-bar" role="progressbar" aria-valuenow="70"
-            aria-valuemin="0" aria-valuemax="100" style="width:70%">
-                <span class="sr-only">70% Complete</span>
+            <div class="col-1 mt-1">
+                <i class="fa fa-info" data-toggle="tooltip" title="asd"></i>
             </div>
         </div>
     </div>
@@ -48,4 +77,7 @@
   -o-transition: height 0.6s ease;
   transition: height 0.6s ease;
 }
+.foca-alto{
+    height: 2rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/foca-logistica-pedido-ruta.html b/src/views/foca-logistica-pedido-ruta.html
index 7e2eddf..1b70349 100644
--- a/src/views/foca-logistica-pedido-ruta.html
+++ b/src/views/foca-logistica-pedido-ruta.html
@@ -26,6 +26,7 @@
     }
 </script>
 <div class="foca-logistica-pedido-ruta" id="test">
+    <h3>-EN DESARROLLO</h3>
     <div class="row">
         <div class="offset-1 col-9">
             <foca
@@ -245,8 +246,8 @@
         transform: rotate(0deg);
     }
     100%{
-        -webkit-transform: rotate(144deg);
-        transform: rotate(144deg);
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
     }
 }
 @keyframes loading-3{