.menuIcon2
{
    margin-top: 4px;
    margin-left: 2px;
    margin-right: 2px;
    width: 30px;
    height: 30px;
    background: url('ico/upper_icons.png') no-repeat;
    float:left;
}

.menuIcon2.masterchannel {
    background-position: -4px -2596px;
}
.menuIcon2.masterchannel-on {
    background-position: -4px -2630px;
}
.menu-option:hover .menuIcon2.masterchannel {
    background-position: -4px -2630px;
}

/* Iconos para el header (uppperIcon) */
.uppperIcon {
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
}

/* Estados OFF por defecto */
.uppperIcon.invoice {
    background-image: url('/ui/global/menu/invoice_off.svg');
}

.uppperIcon.payment {
    background-image: url('/ui/global/menu/payment_off.svg');
}

.uppperIcon.permiso {
    background-image: url('/ui/global/menu/permiso_off.svg');
}

.uppperIcon.pie {
    background-image: url('/ui/global/menu/pie_off.svg');
}

.uppperIcon.profit {
    background-image: url('/ui/global/menu/profit_off.svg');
}

.uppperIcon.user {
    background-image: url('/ui/global/menu/user_off.svg');
}

.uppperIcon.user-plus {
    background-image: url('/ui/global/menu/user-plus_off.svg');
}

/* Estados hover/active (ON) */
.uppperIcon.invoice:hover,
.uppperIcon.invoice.active {
    background-image: url('/ui/global/menu/invoice_on.svg');
    transform: scale(1.05);
}

.uppperIcon.payment:hover,
.uppperIcon.payment.active {
    background-image: url('/ui/global/menu/payment_on.svg');
    transform: scale(1.05);
}

.uppperIcon.permiso:hover,
.uppperIcon.permiso.active {
    background-image: url('/ui/global/menu/permiso_on.svg');
    transform: scale(1.05);
}

.uppperIcon.pie:hover,
.uppperIcon.pie.active {
    background-image: url('/ui/global/menu/pie_on.svg');
    transform: scale(1.05);
}

.uppperIcon.profit:hover,
.uppperIcon.profit.active {
    background-image: url('/ui/global/menu/profit_on.svg');
    transform: scale(1.05);
}

.uppperIcon.user:hover,
.uppperIcon.user.active {
    background-image: url('/ui/global/menu/user_on.svg');
    transform: scale(1.05);
}

.uppperIcon.user-plus:hover,
.uppperIcon.user-plus.active {
    background-image: url('/ui/global/menu/user-plus_on.svg');
    transform: scale(1.05);
}

/* Tamaños personalizados específicos */
.uppperIcon.revision-puntos {
    width: 50px;
    height: 50px;
    background-image: url('/ui/global/menu/invoice_off.svg'); /* Ejemplo */
}

.uppperIcon.revision-puntos:hover,
.uppperIcon.revision-puntos.active {
    background-image: url('/ui/global/menu/invoice_on.svg'); /* Ejemplo */
    transform: scale(1.05);
}
/* Añade esto a tu CSS de uppperIcon */
.uppperIcon.membership {
    background-image: url('/ui/global/menu/membership_off.svg');
}

.uppperIcon.membership:hover,
.uppperIcon.membership.active {
    background-image: url('/ui/global/menu/membership_on.svg');
    transform: scale(1.05);
}

/* Versión más pequeña para algunos casos */
.uppperIcon.small {
    width: 30px;
    height: 30px;
}

/* Versión más grande */
.uppperIcon.large {
    width: 60px;
    height: 60px;
}

/* Para cuando necesites un icono específico con otro SVG */
.uppperIcon.custom-icon {
    /* Sobrescribe con tu propia imagen si es necesario */
    /* background-image: url('ruta/a/otro/icono.svg'); */
}