diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9024416..2670aee 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { SplashScreenComponent } from './modules/splash-screen/splash-screen.com
 import { AdminComponent } from './modules/admin/admin.component';
 import { FooterComponent } from './shared/footer/footer.component';
 import { SharedModule } from './modules/shared/shared.module';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { SharedModule } from './modules/shared/shared.module';
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
+    ModalModule.forRoot(),
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     SharedModule.forRoot(),
diff --git a/src/app/modules/admin/admin.component.ts b/src/app/modules/admin/admin.component.ts
index 5867f6b..545021f 100644
--- a/src/app/modules/admin/admin.component.ts
+++ b/src/app/modules/admin/admin.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, HostListener } from '@angular/core';
 import { Router } from '@angular/router';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'app-admin',
@@ -12,19 +13,20 @@ export class AdminComponent implements OnInit {
 
   constructor(
     private router: Router,
+    // private modalRef: BsModalRef
     ) { }
     
-    ngOnInit() {
-      this.startTimeOutInactividad();
-    }
+  ngOnInit() {
+    // this.startTimeOutInactividad();
+  }
 
-    @HostListener('document:click', ['$event'])
+  @HostListener('document:click', ['$event'])
 
-  documentClick(event: MouseEvent) {
-    if (event) {
-      this.restartTimer();
-    }
-  }
+  // documentClick(event: MouseEvent) {
+  //   if (event) {
+  //     this.restartTimer();
+  //   }
+  // }
 
   restartTimer() {
     clearTimeout(this.timerReposo);
@@ -33,6 +35,7 @@ export class AdminComponent implements OnInit {
 
   startTimeOutInactividad() {
     this.timerReposo = setTimeout(() => {
+      // this.modalRef.hide();
       this.router.navigate(['cancelar-compra']);
     }, 90000);
   }
diff --git a/src/app/modules/cancelar-compra/cancelar-compra.component.ts b/src/app/modules/cancelar-compra/cancelar-compra.component.ts
index 434f245..1738682 100644
--- a/src/app/modules/cancelar-compra/cancelar-compra.component.ts
+++ b/src/app/modules/cancelar-compra/cancelar-compra.component.ts
@@ -27,7 +27,7 @@ export class CancelarCompraComponent implements OnInit {
   }
 
   limpiarCarritoYvolver() {
-    this.articuloService.carrito = undefined;
+    this.articuloService.carrito = [];
     this.router.navigate(['/']);
   }
 }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 6df664d..8e201dd 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -81,6 +81,9 @@
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
+                  <div *ngIf="articulo.PRO">
+                    <i class="fas fa-piggy-bank"></i>
+                  </div>
                   <img
                     draggable="false"
                     ondragstart="return false;"
@@ -97,7 +100,7 @@
                       <div
                         [ngClass]="{'bg-secondary': articulo.promo}"
                         class="row mx-0 justify-content-between bg-primary badge-pill"
-                        (click)="elegirArticulo(articulo)">
+                        (click)="!articulo.FPP ? elegirArticulo(articulo) : openModalPromos(articulo, templatePromos)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
@@ -221,3 +224,57 @@
   </div>
 
 </div>
+
+<ng-template #templatePromos>
+  <div class="modal-header bg-primary">
+    <div class="col-12">
+      <div class="row justify-content-between" *ngIf="articuloPromo.length">
+        <div>
+          <h3 class="ml-2 text-white mt-2">{{articuloPromo[0].DetArt}}</h3>
+        </div>
+        <div class="row"(click)="elegirArticulo(articuloPromo[0]); modalRef.hide()">
+          <div
+            class="row mr-3 justify-content-between bg-white badge-pill">
+            <div class="col px-0 align-self-center text-primary">
+              <p class="font-weight-bold">{{articuloPromo[0].PreVen | currency}}</p> 
+            </div>
+            <div class="col-3 px-0">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
+                src="assets/img/ir-color.svg">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 border-bottom mt-3 mx-n3"></div>
+    </div>
+  </div>
+  <div class="modal-body bg-primary" *ngIf="articuloPromo.length">
+    <div class="row">
+      <div class="col-9">
+        <p class="text-white"><small>¿TE GUSTARIA LLEVAR ESTE ARTÍCULO</small></p>
+        <h1 class="text-white mb-4">en un combo?</h1>
+        <div *ngFor="let promo of promociones">
+          <div class="mx-0 bg-white badge-pill text-primary" (click)="elegirArticulo(promo); modalRef.hide()">
+            <div class="row justify-content-between">
+              <p class="ml-4 text-truncate">{{promo.DetArt}}</p>
+              <p class="mr-4 font-weight-bold">{{promo.PreVen | currency}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-3 rounded-circle">
+        <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        src="{{urlImagenes}}{{articuloPromo[0].imagenes[0].imagen}}"
+        onerror="this.src='assets/img/image-not-found.jpg'"
+        class="card-img-top h-90 w-90 rounded-circle">
+      </div>
+    </div>
+  </div>
+  </ng-template> 
\ No newline at end of file
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index 5b271b0..c3adef4 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
+import { PromocionService } from 'src/app/services/promocion/promocion.service';
 
 @Component({
   selector: 'app-seleccion-articulos',
@@ -26,10 +27,14 @@ export class SeleccionArticulosComponent implements OnInit {
   allActive = true;
   modalRef: BsModalRef;
   total: number = 0;
+  articuloPromo: IArticulo[] = [];
+  promociones: IArticulo[] = [];
 
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
+    private modalService: BsModalService,
+    private promocionService: PromocionService
   ) { }
 
   ngOnInit() {
@@ -120,6 +125,7 @@ export class SeleccionArticulosComponent implements OnInit {
   }
 
   elegirArticulo(articulo: IArticulo) {
+    console.log(this.articuloService.carrito)
     this.articuloService.getById(articulo.id)
       .subscribe((res: IArticulo) => {
         res.cantidad = 1;
@@ -127,6 +133,24 @@ export class SeleccionArticulosComponent implements OnInit {
       }, err => console.error(err));
   }
 
+  openModalPromos(articulo: IArticulo, templatePromos: TemplateRef<any>) {
+    this.articuloService.getById(articulo.id)
+    .subscribe((res: IArticulo) => {
+      this.articuloPromo[0] = res;
+      this.getPromociones();
+      }, err => console.error(err));
+    this.modalRef = this.modalService.show(templatePromos, { class: 'custom-modal modal-dialog-centered', backdrop: 'static' });
+  }
+
+  getPromociones() {
+    var sector = this.articuloPromo[0].CodSec;
+    var codigo = this.articuloPromo[0].CodArt;
+    this.promocionService.getPromociones(sector, codigo)
+      .subscribe((res: IArticulo[]) => {
+        this.promociones = res;
+      }, error => { console.error(error); })
+  }
+
   increaseShow() {
     this.showQuantity += 100;
   }
@@ -149,4 +173,4 @@ export class SeleccionArticulosComponent implements OnInit {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
-}
+}
\ No newline at end of file
diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss
index 91cc18b..88b173a 100644
--- a/src/scss/styles-bootstrap.scss
+++ b/src/scss/styles-bootstrap.scss
@@ -49,3 +49,10 @@ $border-radius-sm: 0.5rem;
 .min-h-60 {
   min-height: 60px;
 }
+
+.custom-modal > div > div {
+  background-color: $primary !important;
+  border: none !important;
+  border-radius: 10rem;
+  margin-left: 10px !important;
+}