[class^="icono-"], [class*=" icono-"] {
    /*speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
    background: no-repeat;
}
.icono-etiqueta-precio{
    background-image: url("fuentes/etiqueta-precio.svg");
    background-size: contain;  
}
.icono-cajero-hombre{
    background-image: url("fuentes/cashier-man.svg");
    background-size: contain;  
}
.icono-cajero-mujer{
    background-image: url("fuentes/cashier-woman.svg");
    background-size: contain;  
}
.icono-pagando-efectivo{
    background-image: url("fuentes/pagando-efectivo.svg");
    background-size: contain;   
}
.icono-sin-imagen{
    background-image: url("fuentes/sin-imagen.svg");
    background-size: contain;
}
.icono-reloj-pendiente{
    background-image: url("fuentes/reloj-pendiente.png");
    background-size: contain;
}
.icono-proveedor{
    background-image: url("fuentes/proveedor.svg");
    background-size: contain;
}
.icono-moneda{
    background-image: url("fuentes/moneda.svg");
    background-size: contain;
}
.icono-efectivo{
    background-image: url("fuentes/dinero.svg");
    background-size: contain;
}
.icono-hand-and-pen{
    background-image: url("fuentes/hand-and-pen.svg");
    background-size: contain;
}
.icono-hand-and-pen-white{
    background-image: url("fuentes/hand-and-pen-white.svg");
    background-size: contain;
}
.icono-hand-stop{
    background-image: url("fuentes/hand-stop-octagon.svg");
    background-size: contain;
}
.icono-tarjeta-regalo{
    background-image: url("fuentes/tarjeta-regalo.svg");
    background-size: contain;
}
.icono-mixto{
    background-image: url("fuentes/mixto.svg");
    background-size: contain;
}
.icono-usuario-credito{
    background-image: url("fuentes/usuario-credito.svg");
    background-size: contain;
}
.icono-tarjeta-credito{
    background-image: url("fuentes/tarjeta-credito.svg");
    background-size: contain;
}
.icono-cancelado{
    background-image: url("fuentes/venta-cancelado.svg");
    background-size: contain;
    background-position: center;
}
.icono-usuario-hombre{
    background-image: url("fuentes/user-icon.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-usuario-mujer{
    background-image: url("fuentes/user-icon-woman.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-usuario-empresa{
    background-image: url("fuentes/empresa.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-usuario-neutral{
    background-image: url("fuentes/neutral-icon.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-sucursal{
    background-image: url("fuentes/icono-sucursal.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-tienda-online{
    background-image: url("fuentes/tienda-online.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-cajon-dinero{
    background-image: url("fuentes/cajon-dinero.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-cajon-advertencia{
    background-image: url("fuentes/cajon-advertencia.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-traspasos{
    background-image: url("fuentes/traspasos.svg");
    background-size: contain;
    background-position-x: center;
}

.icono-asistente {
    background-image: url("fuentes/asistente.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-busqueda-personalizada{
    background-image: url("fuentes/busqueda-personalizada.svg");
    background-size: contain;
    background-position-x: center;
}
.icono-exportar{
    background-image: url("fuentes/exportar.svg");
    background-size: contain;
    background-position-x: center;
}
/* 1. Estilos generales para todos los iconos de marcas */
.fa-brands {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Ancho fijo para que todos se vean alineados */
    font-size: 1.5rem;
    transition: all 0.3s ease; /* Para que el cambio de color o tamaño sea suave */
    cursor: pointer;
}

/* 2. Colores específicos por cada clase */

.fa-brands.fa-whatsapp {
    color: #25D366;
}

.fa-brands.fa-facebook {
    color: #1877F2;
}

.fa-brands.fa-instagram {
    color: #E4405F;
}

.fa-brands.fa-x-twitter {
    color: #000000;
}

.fa-brands.fa-tiktok {
    color: #000000;
}

.fa-brands.fa-youtube {
    color: #FF0000;
}

.fa-brands.fa-linkedin {
    color: #0A66C2;
}

/* 3. Efecto Hover: los iconos se ven un 15% más grandes al pasar el mouse */
.fa-brands:hover {
    transform: scale(1.15);
    filter: brightness(1.1); /* Les da un ligero brillo */
}