Funciona el resaltado al pasar el ratón

src/app/app.component.css

@@ -18,8 +18,8 @@
   }
 
 .container {
-    gap: 10rem;
-    padding: 7rem;
+    gap: 5rem;
+    padding: 5rem;
     display: flex;
     flex-wrap: nowrap;
   }

src/app/mapa/mapa.component.css

@@ -16,4 +16,26 @@
     width: 100%;
     height: 100%;
     object-fit: cover; /* Esto hará que la imagen se ajuste a su contenedor manteniendo su aspecto */
+  }
+  .map-block {
+    width: 100px; /* Ajusta este valor según tus necesidades */
+    height: 100px; /* Ajusta este valor según tus necesidades */
+    margin: 3px;
+    position: relative; /* para que el pseudo-elemento se posicione correctamente */
+    cursor: pointer; /* Cambia el cursor para indicar que el bloque es clickeable */
+    border: 3px solid transparent; /* Añade un borde transparente para mantener el tamaño constante */
+
+  }
+  
+  .map-block:hover {
+    border-color: grey; /* Borde gris al pasar el ratón */
+  }
+  
+  /* Estilos para cuando un bloque está seleccionado como punto de recogida o entrega */
+  .selected-pickup {
+    border: 4px solid red; /* Borde rojo para punto de recogida */
+  }
+  
+  .selected-delivery {
+    border: 4px solid orange; /* Borde naranja para punto de entrega */
   }
\ No newline at end of file

src/app/mapa/mapa.component.html

 <div class="map-container">
-    <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
-      <div *ngFor="let blockId of row; let colIndex = index" class="map-block" (click)="onBlockClick(blockId)">
-        <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">
-      </div>
+  <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
+    <div *ngFor="let blockId of row; let colIndex = index" class="map-block"
+         (click)="onBlockClick(blockId)"
+         (mouseover)="onBlockMouseOver(blockId)"
+         (mouseleave)="onBlockMouseLeave(blockId)"
+         [class.selected-pickup]="selectedPickupId === blockId"
+         [class.selected-delivery]="selectedDeliveryId === blockId">
+      <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">
     </div>
   </div>
-  
\ No newline at end of file
+</div>

src/app/mapa/mapa.component.ts

@@ -16,9 +16,7 @@ export class MapaComponent implements OnInit {
   cols: number = 5;
 
   constructor(private MapaService: MapaService) {}
-  onBlockClick(blockId: string): void {
-    this.blockSelected.emit(blockId); // Emite el ID del bloque cuando se hace clic
-  }
+
   ngOnInit(): void {
     this.mapMatrix = this.MapaService.createMapMatrix(this.mapStr, this.rows, this.cols);
   }
@@ -29,10 +27,6 @@ export class MapaComponent implements OnInit {
     
   @Output() blockHovered = new EventEmitter<string>();
   @Output() blockUnhovered = new EventEmitter<string>();
-
-  onBlockMouseOver(blockId: string): void {
-    this.blockHovered.emit(blockId);
-  }
   // Añade nuevas propiedades para manejar los bordes
   selectedPickupId: string | null = null;
   selectedDeliveryId: string | null = null;
@@ -47,7 +41,25 @@ export class MapaComponent implements OnInit {
     this.selectedDeliveryId = blockId;
     this.blockSelected.emit(blockId);
   }
+  onBlockMouseOver(blockId: string): void {
+    // Esta función será llamada cuando el mouse pase por encima de un bloque
+    this.blockHovered.emit(blockId);
+  }
+
   onBlockMouseLeave(blockId: string): void {
+    // Esta función será llamada cuando el mouse deje de pasar por encima de un bloque
     this.blockUnhovered.emit(blockId);
   }
+
+  onBlockClick(blockId: string): void {
+    // Esta función será llamada cuando se haga clic en un bloque
+    if (!this.selectedPickupId) {
+      this.selectedPickupId = blockId;
+      this.selectedDeliveryId = null; // Resetea la selección de entrega si es que se hace clic en otro bloque para recogida
+    } else if (!this.selectedDeliveryId && this.selectedPickupId !== blockId) {
+      this.selectedDeliveryId = blockId;
+    }
+    this.blockSelected.emit(blockId);
+  }
 }
+