/* Estilo para el contenedor de tarjetas */
.tarjetas-container {
    max-height: 500px; /* Establece el tamaño máximo del contenedor (ajusta según tus necesidades) */
    overflow-y: auto; /* Habilita el desplazamiento vertical cuando el contenido supera la altura máxima */
    display: flex; /* Utiliza un flexbox para alinear las tarjetas en línea */
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan si no caben en la altura del contenedor */
    justify-content: flex-start; /* Alinea los elementos desde la izquierda */
}
/* Estilo personalizado para la barra de desplazamiento */
.tarjeta::-webkit-scrollbar {
    width: 2px; /* Ancho de la barra de desplazamiento */
  }
  
  .tarjeta::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del fondo del control de desplazamiento */
    border-radius: 4px; /* Radio de los bordes del control de desplazamiento */
  }
  
  .tarjeta::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color del fondo del control de desplazamiento al pasar el mouse */
  }
  
  /* Establece el tamaño máximo del contenedor */
  .tarjeta {
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid #ddd;
    width: 15rem;
    margin: 2rem;
    background-color: aliceblue;
  }
  
.destacado {
    font-weight: 900 ; /* Hace que el texto dentro del span esté en negrita */
    font-size: 1.1em; /* Aumenta ligeramente el tamaño de la letra */
}
.input-pequeño{
    width: 4rem;
    margin: 0.4rem;
}
.input-mediado{
    width: 14rem;
    margin: 0.4rem;
}



#sugerenciaClienteLP {
    list-style: none; 
    padding: 0; 
    border: 1px solid #ccc; 
    max-height: 200px; 
    overflow-y: auto; 
    background-color: #fff; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}
#sugerenciaClienteLP li {
    padding: 8px 10px; 
    cursor: pointer; 
    transition: background-color 0.3s; 
}

#sugerenciaClienteLP li:hover {
    background-color: #f0f0f0;
}