diff --git a/index.html b/index.html
index cacc83f..42a40f1 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
         <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
 
-        <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
+        <script src="../foca-directivas/tmp/foca-directivas.js"></script>
         <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
         <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
@@ -32,7 +32,7 @@
         <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
         <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
         <script src="./node_modules/foca-modal-petroleras/dist/foca-modal-petroleras.min.js"></script>
-        <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
+        <script src="../foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
@@ -40,6 +40,7 @@
 
         <!-- BUILD -->
         <script src="./src/js/app.js"></script>
+        <script src="./src/js/controller.js"></script>
         <script src="./src/etc/develop.js"></script>
         <!-- /BUILD -->
 
@@ -49,13 +50,13 @@
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
-        <div class="container contenedor-teclado">
+        <div ng-controller="appWrapperDemoController" class="container contenedor-teclado">
             <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
-                <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
+                <label class="btn btn-secondary active boton-activar-teclado" ng-class="{'teclado-activar': mostrarTeclado}">
                     <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
                 </label>
             </div>
-            <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado>
+            <foca-teclado ng-show="mostrarTeclado && hasFocus" alfanumeric="true" numeric="true"></foca-teclado>
         </div>
     </body>
 </html>
diff --git a/src/js/controller.js b/src/js/controller.js
new file mode 100644
index 0000000..6fca9cd
--- /dev/null
+++ b/src/js/controller.js
@@ -0,0 +1,22 @@
+angular.module('appWrapperDemo')
+    .controller('appWrapperDemoController', [
+        '$scope',
+        '$rootScope',
+        '$timeout',
+        function($scope, $rootScope, $timeout) {
+            $scope.hasFocus = false;
+            var estado;
+            $rootScope.$on('focus', function(event, data) {
+                estado = data;
+                if(!data) {
+                    $timeout(function() {
+                        if(!estado) {
+                            $scope.hasFocus = data;
+                        }
+                    },200)     
+                } else {
+                    $scope.hasFocus = data;
+                }
+            });
+        }
+    ]);
\ No newline at end of file
diff --git a/src/sass/_contenedor.scss b/src/sass/_contenedor.scss
index 9fb37d1..d84d495 100644
--- a/src/sass/_contenedor.scss
+++ b/src/sass/_contenedor.scss
@@ -9,8 +9,8 @@ body {
 }
 
 .contenedor-teclado {
-    background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
-    height: 300px;
+    /* background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); */
+    /* height: 300px; */
 }
 
 .grilla-articulos {
diff --git a/src/sass/_teclado.scss b/src/sass/_teclado.scss
index 8334e9c..c67acd4 100644
--- a/src/sass/_teclado.scss
+++ b/src/sass/_teclado.scss
@@ -6,10 +6,11 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    width: 70%;
+    width: 62%;
     height: 60%;
-    margin: auto;
-    margin-top: -6%;
+    margin-left: 13%;
+    margin-top: -19%;
+    position: absolute;    
     table {
         border-spacing: 10px;
         border-collapse: separate;
@@ -66,3 +67,8 @@
 .teclado-activar {
     background-color: #17d236;
 }
+.boton-activar-teclado {
+    margin-top: -10%;
+    position: absolute;
+    z-index: 100000;
+}