diff --git a/src/app/acciones/acciones.component.html b/src/app/acciones/acciones.component.html
new file mode 100644
index 0000000..cdf10a7
--- /dev/null
+++ b/src/app/acciones/acciones.component.html
@@ -0,0 +1,39 @@
+<!-- DESKTOP -->
+<div class="container botonera-lateral">
+  <div class="row">
+    <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
+      <div class="px-2 mt-auto">
+        <div class="container">
+          <div class="row">
+            <button
+              (click)="callSave()"
+              [ladda]="saveLoading"
+              type="button"
+              title="Guardar"
+              class="btn btn-block border border-dark"
+              data-spinner-color="#000000"
+              data-size="s">
+              <strong>GUARDAR</strong>
+            </button>
+            <button routerLink="/home" type="button" title="Salir" class="btn btn-block border border-dark">
+              <strong>SALIR</strong>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- MOBILE -->
+<div class="row d-md-none fixed-bottom">
+  <div class="w-100 bg-dark d-flex px-3 acciones-mobile">
+    <span class="ml-3 text-muted mt-3" routerLink="/home">Salir</span>
+    <span
+      class="mr-3 ml-auto"
+      [ngClass]="saveLoading ? 'text-muted' : ''"
+      (click)="callSave()"
+      [ladda]="saveLoading"
+      data-style="expand-left"
+    >Guardar</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/acciones/acciones.component.scss b/src/app/acciones/acciones.component.scss
new file mode 100644
index 0000000..2ef6346
--- /dev/null
+++ b/src/app/acciones/acciones.component.scss
@@ -0,0 +1,96 @@
+.acciones-mobile {
+  line-height: 0.5em;
+  color: orange;
+  font-size: 1.25em
+}
+
+.botonera-lateral {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 402px;
+  &.teclado{
+      top: 449px;
+      z-index: 100000;
+  }
+  .row{
+      margin: 0 !important;
+      pointer-events: none;
+  }
+
+  .container{
+      @media (min-width: 768px){
+          display: grid !important;
+      }
+  }
+
+  button{
+      pointer-events: all;
+      background-color: #DDD;
+  }
+
+  .teclado-activar {
+      background-color: #17d236 !important;
+      color: #FFF !important;
+  }
+  div[ladda]{
+      background-color: #DDD;
+  }
+
+  button, .btn-group-toggle{
+      background-color: #DDD;
+      color: #000;
+      text-transform: uppercase;
+      min-width: 109px;
+      &:hover{
+          color: #FFF;
+          .boton-activar-teclado{
+              color: #FFF;
+          }
+          background-color: #000;
+      }
+  }
+  
+  
+  .btn-group-toggle{
+      pointer-events: all;
+      &.active{
+          background-color: transparent;
+          .boton-activar-teclado{
+              color: #FFF;
+          }
+      }
+      
+      .boton-activar-teclado{
+          cursor: pointer;
+          color: #000;
+          background-color: transparent;
+      }
+
+      input{
+          display: none;
+      }
+  }
+
+  .guardado{
+      animation:guardado 4s 1;
+      -webkit-animation:guardado 4s 1; /* Safari and Chrome */
+  }
+
+  @keyframes guardado
+  {
+      0%      {background:#DDD; color: #000;}
+      25%     {background:#28a745; color: #FFF;}
+      75%     {background:#28a745; color: #FFF;}
+      100%    {background:#DDD; color: #000;}
+  }
+
+  @-webkit-keyframes guardado /* Safari and Chrome */
+  {
+      0%      {background:#DDD; color: #000;}
+      25%     {background:#28a745; color: #FFF;}
+      75%     {background:#28a745; color: #FFF;}
+      100%    {background:#DDD; color: #000;}
+  }
+}
diff --git a/src/app/acciones/acciones.component.ts b/src/app/acciones/acciones.component.ts
new file mode 100644
index 0000000..b113605
--- /dev/null
+++ b/src/app/acciones/acciones.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+@Component({
+  selector: 'app-acciones',
+  templateUrl: './acciones.component.html',
+  styleUrls: ['./acciones.component.scss']
+})
+export class AccionesComponent implements OnInit {
+
+  @Output() guardar = new EventEmitter<any>();
+  saveLoading = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  callSave() {
+    //llamo función guardar pasada en el componente
+    this.saveLoading = true;
+
+    setTimeout(() => {
+      this.saveLoading = false;
+    }, 10000);
+  }
+}