diff --git a/index.html b/index.html
index 5dcc311..247dbb6 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,9 @@
         <script src="./node_modules/angular-route/angular-route.min.js"></script>
         <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
         <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
-        
+        <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="./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>
@@ -33,7 +35,8 @@
         <script src="./node_modules/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>
+
         <!-- BUILD -->
         <script src="./src/js/app.js"></script>
         <script src="./src/etc/develop.js"></script>
@@ -45,5 +48,13 @@
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
+        <div 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}">
+                    <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>
+        </div>
     </body>
 </html>
diff --git a/package.json b/package.json
index 6df0b97..b19c52d 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,9 @@
     "dependencies": {
         "angular": "^1.7.5",
         "angular-cookies": "^1.7.5",
+        "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
         "angular-route": "^1.7.5",
+        "angular-sanitize": "^1.7.5",
         "bootstrap": "^4.1.3",
         "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
         "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
@@ -39,6 +41,7 @@
         "foca-modal-petroleras": "git+https://debo.suite.repo/modulos-npm/foca-modal-petroleras.git",
         "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git",
         "foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git",
+        "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git",
         "foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git",
         "font-awesome": "^4.7.0",
         "gulp-angular-templatecache": "^2.2.1",
diff --git a/src/js/app.js b/src/js/app.js
index 8be50fb..383a32b 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -16,5 +16,8 @@ angular.module('appWrapperDemo', [
     'focaModalMoneda',
     'focaModalPrecioCondicion',
     'focaModalVendedores',
-    'focaTurnoApertura'
+    'focaTeclado',
+    'focaTurnoApertura',
+    'ngSanitize',
+    'onScreenKeyboard'
 ]);
diff --git a/src/sass/_contenedor.scss b/src/sass/_contenedor.scss
index 56c7846..9fb37d1 100644
--- a/src/sass/_contenedor.scss
+++ b/src/sass/_contenedor.scss
@@ -8,6 +8,11 @@ body {
     min-width: 800px;
 }
 
+.contenedor-teclado {
+    background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
+    height: 300px;
+}
+
 .grilla-articulos {
     background-color: rgba(0, 0, 0, 0.8);
     height: 430px;
diff --git a/src/sass/general.scss b/src/sass/general.scss
index a65f30a..a210d24 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -7,3 +7,4 @@
 @import 'login';
 @import 'panel-informativo';
 @import 'tabla';
+@import 'teclado';