@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

.contenedorLista{
  display: flex;
  gap: 5px;
  background-color: rgba(95, 180, 250, 0.8);
  backdrop-filter: blur(10px);
  font-weight: bold;
  color:rgba(39, 40, 41, 0.7) ;
}
  .contenedorLista:hover {
    background-color: rgba(148, 211, 248, 0.8);
    backdrop-filter: blur(10px);
  }
  
  .contenedorListaCarrito{
    gap: 5px;
    background-color: rgba(95, 180, 250, 0.8);
    backdrop-filter: blur(10px);
    font-weight: bold;
    color:rgba(39, 40, 41, 0.7) ;
  }
    .contenedorListaCarrito:hover {
      background-color: rgba(148, 211, 248, 0.8);
      backdrop-filter: blur(10px);
    }


    .lineaLista{
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        row-gap: 1px;
    }
    .lineaLista:nth-child(even){ 
      background-color: rgba(26, 128, 223, 0.8); }
      .elementoLista50{
        width: 50px;
        height: 0.7rem;
        overflow: hidden;
        padding: 0.5rem;
      }
      .elementoLista{
        width: 150px;
        height: 0.7rem;
        overflow: hidden;
        padding: 0.5rem;
      }
      .elementoListaCompleto{
        width: 150px;
        height: 0.7rem;
        overflow: hidden;
        padding: 0.5rem;
      }
      

.contenedorResultados{
  display: flex;
  gap: 5px;
  background-color: rgb(235, 253, 244);
  backdrop-filter: blur(10px);
  font-weight: bold;
  color:rgba(39, 40, 41, 0.7) ;
}
    .contenedorResultados:nth-child(even){ 
      background-color: rgba(237, 247, 241, 0.5); }
  .bloqueLista10Titulo{
        float: left;
        width: 10%;
        height: 0.7rem;
        overflow: hidden;
        padding: 0.5rem;
      }
  .bloqueLista10{
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 10%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista10Rojo{
    background-color: rgba(209, 23, 23, 0.8);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 10%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista10Verde{
    background-color: rgba(42, 230, 25, 0.8);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 10%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista10Amarillo{
    background-color: rgba(202, 236, 6, 0.8);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 10%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista12{
    background-color: rgba(209, 23, 23, 0.8);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 12%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista12Morado{
    background-color: rgba(195, 155, 211, 0.8);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 12%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista12Verde{
    background-color: rgb(134, 188, 74, 0.5);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 12%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista12Azul{
    background-color: rgb(78, 136, 243, 0.5);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 12%;
    overflow: hidden;
    padding: 0.5rem;
  }
    .bloqueLista10:nth-child(even){ 
      background-color: rgba(112, 114, 116, 0.3);
      font-weight:bold; color:rgb(31, 30, 30); }
  .bloqueLista5{
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 5%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista5Rojo{
    background-color: rgb(180, 21, 21);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 5%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista5Naranja{
    background-color: rgb(219, 129, 11);
    border-right: 1px solid rgba(88, 88, 88, 0.8);
    float: left;
    width: 5%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista2{
    float: left;
    width: 2%;
    overflow: hidden;
    padding: 0.5rem;
  }
   .bloqueLista16{
    float: left;
    width: 16%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista20{
    float: left;
    width: 20%;
    overflow: hidden;
    padding: 0.5rem;
  }
 
  .bloqueLista30{
    float: left;
    width: 30%;
    overflow: hidden;
    padding: 0.5rem;
  }
  .bloqueLista40{
    float: left;
    width: 40%;
    overflow: hidden;
    padding: 0.5rem;
  }
.contenedorResultados:hover {
  background-color: rgba(41, 87, 114, 0.3);
  backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
  .elementoListaCompleto {
    Display: none;
  }
  .bloqueLista2 {
    width: 45%;
  }
  .bloqueLista5 {
    width: 45%;
  }
  .bloqueLista10 {
    width: 45%;
  }
  .bloqueLista20 {
    width: 45%;
  }
  .bloqueLista30 {
    width: 45%;
  }
}