diff --git a/package-lock.json b/package-lock.json
index 4996c4b..609daf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "autoservicio-axion",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/app/shared/sinonimo/sinonimo.component.html b/src/app/shared/sinonimo/sinonimo.component.html
index d32fe6b..4a72003 100644
--- a/src/app/shared/sinonimo/sinonimo.component.html
+++ b/src/app/shared/sinonimo/sinonimo.component.html
@@ -8,60 +8,57 @@
       class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
       src="assets/img/icono-cancelar-blanco.svg">
     <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
-    <!-- <div class="col-5 pt-4 pr-0 text-right">
-      <p *ngFor="let s of sinonimos; let i = index">
-        <span
-          class="btn-effect"
-          (click)="scrollTo(i)">
-          Ir a opción {{i+1}}
-          <i class="far fa-hand-point-left"></i>
-        </span>
-      </p>
-    </div> -->
   </div>
 
-  <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
-    <div class="row mx-0 mb-2"  *ngFor="let articulo of sinonimos[currentIndex].productos">
-      <div class="col-7 p-0 my-auto h6 text-right">
-        <p class="m-0 font-weight-normal">
-          {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
-        </p>
-      </div>
-      <div class="col-5 pr-0">
-        <div class="row mx-0 justify-content-between border border-white badge-pill">
-          <!-- BOTON MENOS -->
-          <div class="col-auto px-0 my-auto">
-            <img
-              draggable="false"
-              ondragstart="return false;"
-              (contextmenu)="false"
-              class="d-block ml-auto py-2 icon-15 btn-effect"
-              src="assets/img/menos-blanco.svg"
-              (click)="restarCantidadSinonimo(articulo, currentIndex)">
-          </div>
-          <!-- CANTIDAD -->
-          <div class="col px-0 my-auto text-white text-center">
-            <p><small>{{articulo.cantidad}}</small></p>
-          </div>
-          <!-- BOTON MAS -->
-          <div class="col-auto px-0 my-auto">
-            <img
-              draggable="false"
-              ondragstart="return false;"
-              (contextmenu)="false"
-              class="d-block ml-auto py-2 icon-15 btn-effect"
-              src="assets/img/mas-blanco.svg"
-              (click)="sumarCantidadSinonimo(articulo, currentIndex)">
+  <div class="modal-body my-2">
+    <p class="mb-2 h4">Opcion {{currentIndex+1}}</p>
+    <p class="mb-2 h5">Cantidad restante {{sinonimos[currentIndex].cantidadRestante}}</p>
+    <div class="lista-sinonimos scroll-y-visible">
+      <div
+        class="row mx-0 mb-2 fade-in-left"
+        *ngFor="let articulo of sinonimos[currentIndex].productos">
+        <div class="col-8 p-0 my-auto h6 text-right">
+          <p class="m-0 font-weight-normal">
+            {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
+          </p>
+        </div>
+        <div class="col-4">
+          <div class="row mx-0 justify-content-between border border-white badge-pill">
+            <!-- BOTON MENOS -->
+            <div class="col-auto px-0 my-auto">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="d-block ml-auto py-2 icon-30 btn-effect"
+                src="assets/img/menos-blanco.svg"
+                (click)="restarCantidadSinonimo(articulo, currentIndex)">
+            </div>
+            <!-- CANTIDAD -->
+            <div class="col px-0 my-auto text-white text-center">
+              <p>{{articulo.cantidad}}</p>
+            </div>
+            <!-- BOTON MAS -->
+            <div class="col-auto px-0 my-auto">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="d-block ml-auto py-2 icon-30 btn-effect"
+                src="assets/img/mas-blanco.svg"
+                (click)="sumarCantidadSinonimo(articulo, currentIndex)">
+            </div>
           </div>
         </div>
       </div>
     </div>
+
   </div>
 
   <div class="modal-footer">
     <div
       *ngIf="currentIndex != 0 && sinonimos.length > 1"
-      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto fade-in-right"
       (click)="currentIndex = currentIndex-1">
       <img
         draggable="false"
@@ -72,8 +69,8 @@
       VOLVER
     </div>
     <div
-      *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
-      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
+      *ngIf="currentIndex != sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto fade-in-left"
       (click)="currentIndex = currentIndex+1">
       SIGUIENTE
       <img
@@ -86,7 +83,7 @@
     <div
       [ngClass]="validate()"
       *ngIf="currentIndex == sinonimos.length-1"
-      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
+      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
       (click)="continue()">
       CONTINUAR
       <img
diff --git a/src/app/shared/sinonimo/sinonimo.component.ts b/src/app/shared/sinonimo/sinonimo.component.ts
index 8bb49c6..672202c 100644
--- a/src/app/shared/sinonimo/sinonimo.component.ts
+++ b/src/app/shared/sinonimo/sinonimo.component.ts
@@ -15,7 +15,6 @@ export class SinonimoComponent implements OnInit {
   sinonimos: ISinonimo[] = [];
   isValid: boolean;
   onClose: Subject<any>;
-  articulosSelected: IArticulo[] = [];
   articulo: IArticulo;
   isSinonimoSelected = false;
   currentIndex = 0;
@@ -25,7 +24,6 @@ export class SinonimoComponent implements OnInit {
     private articuloService: ArticuloService,
   ) {
     this.onClose = new Subject();
-    this.articulosSelected.length = this.sinonimos.length;
   }
 
   ngOnInit() {
@@ -36,22 +34,13 @@ export class SinonimoComponent implements OnInit {
     }
   }
 
-  selectSinonimo(index: number, articulo: IArticulo) {
-    for (const a of this.sinonimos[index].productos) {
-      a.seleccionado = false;
-    }
-    articulo.seleccionado = true;
-    this.articulosSelected[index] = articulo;
-  }
-
   validate() {
     this.isValid = true;
     for (const s of this.sinonimos) {
-      for (const a of s.productos) {
-        this.isValid = (!a.seleccionado) ? false : true;
-        if (this.isValid) break;
+      if (s.cantidadRestante > 0) {
+        this.isValid = false;
+        break;
       }
-      if (!this.isValid) break;
     }
     return !this.isValid ? 'disabled' : 'btn-effect';
   }
@@ -63,10 +52,10 @@ export class SinonimoComponent implements OnInit {
     const ID_SINS = [];
     const observables = [];
 
-    for (const articulo of this.articulosSelected) {
-      ID_SINS.push(articulo.ID_SIN);
-      observables.push(this.articuloService.getById(articulo.id));
-    }
+    // for (const articulo of this.articulosSelected) {
+    //   ID_SINS.push(articulo.ID_SIN);
+    //   observables.push(this.articuloService.getById(articulo.id));
+    // }
 
     forkJoin(observables)
       .subscribe((res: IArticulo[]) => {
diff --git a/src/scss/animations.scss b/src/scss/animations.scss
index 91027c2..b4d2d2d 100644
--- a/src/scss/animations.scss
+++ b/src/scss/animations.scss
@@ -124,6 +124,39 @@
 }
 
 /*
+ * animation fade-in-right
+ */
+.fade-in-right {
+  -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+@-webkit-keyframes fade-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/*
  * animation swing-in-top-fwd
  */
 .swing-in-top-fwd {
diff --git a/src/styles.scss b/src/styles.scss
index 6bbe9e0..79bee28 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -87,7 +87,7 @@ p {
 }
 
 .disabled {
-  opacity: 0.5;
+  background-color: hsla(0, 0%, 100%, 0.4) !important;
 }
 
 .modal-content.media-pantalla {