/*estilos de las sugerencias*/
.contentSugerencias {
    /*contyenedor*/
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    padding-left: 8px;
    transition-duration: 0.2s;
    color: var(--colorText);
}
.contentSugerencias:hover {
    /*cuando el mouse pase sobre alguna sugerencia*/
    background-color: var(--colorMain);
    color: #fff;
    transition-duration: 0.2s;
}

.contentSugerencias__img {
    /*imagen de cada sugerencia*/
    width: 25px;
    height: 25px;
}
.contentSugerencias__text {
    /*texto de cada sugerencia*/
    font-size: 1em;
}
/*fin de los estilos de las sugerencias*/

/*mostrar y ocultar sugerencias*/
.showSugerencias {
    /*mostrar contenedor*/
    opacity: 1;
    visibility: visible;
    transition-duration: 0.2s;
}
.hideSugerencia {
    /*ocultar sugeremcias*/
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.2s;
}

/*mostrar mensaje de que no se encontraron sugerencias*/
.sinSgrContent {
    /*contenedor*/
    display: flex;
    gap: 15px;
    padding: 15px;
    align-items: center;
}
.sinSgrContent__img {
    /*imagen de advertencia*/
    width: 25px;
    height: 25px;
}
.sinSgrContent__p {
    /*texto indicativo*/
    color: #f00;
    font-size: 1.2em;
    line-height: 1;
}
/*fin de mostrar mensaje de queno se encontraron sugerencias*/

/*ocultar boton del campo de busqueda*/
.hideBtnDelInput {
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
}
.inputSinRight {
    padding-right: 8px;
}
/*fin de ocultar boton del campo de busqueda*/