/* Mágico Hogar · íconos de marca (máscara: toman el color del texto). Generado desde public/iconos/svg. */
/* El ícono se dibuja en el ::before (máscara); el propio <i> conserva el fondo, borde y tamaño que le dé el tema
   (por ejemplo las casillas de color de los títulos), así que los íconos de cajas y botones no se rompen. */
.mh-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.17em;line-height:1;font-style:normal;flex-shrink:0}
.mh-ico::before{content:""!important;display:block;flex-shrink:0;width:1.1em;height:1.1em;background-color:currentColor;-webkit-mask:var(--mh) center/contain no-repeat;mask:var(--mh) center/contain no-repeat;font-family:inherit}
.mh-ico::after{content:none!important}
.mh-ico[data-i="envios"]{--mh:url("../public/iconos/svg/envios.svg")}
.mh-ico[data-i="pedido-entregado"]{--mh:url("../public/iconos/svg/pedido-entregado.svg")}
.mh-ico[data-i="seguimiento"]{--mh:url("../public/iconos/svg/seguimiento.svg")}
.mh-ico[data-i="pago-seguro"]{--mh:url("../public/iconos/svg/pago-seguro.svg")}
.mh-ico[data-i="candado"]{--mh:url("../public/iconos/svg/candado.svg")}
.mh-ico[data-i="tarjeta"]{--mh:url("../public/iconos/svg/tarjeta.svg")}
.mh-ico[data-i="efectivo"]{--mh:url("../public/iconos/svg/efectivo.svg")}
.mh-ico[data-i="contraentrega"]{--mh:url("../public/iconos/svg/contraentrega.svg")}
.mh-ico[data-i="transferencia"]{--mh:url("../public/iconos/svg/transferencia.svg")}
.mh-ico[data-i="asesoria-whatsapp"]{--mh:url("../public/iconos/svg/asesoria-whatsapp.svg")}
.mh-ico[data-i="atencion"]{--mh:url("../public/iconos/svg/atencion.svg")}
.mh-ico[data-i="garantia"]{--mh:url("../public/iconos/svg/garantia.svg")}
.mh-ico[data-i="devoluciones"]{--mh:url("../public/iconos/svg/devoluciones.svg")}
.mh-ico[data-i="calidad"]{--mh:url("../public/iconos/svg/calidad.svg")}
.mh-ico[data-i="nuevo"]{--mh:url("../public/iconos/svg/nuevo.svg")}
.mh-ico[data-i="ofertas"]{--mh:url("../public/iconos/svg/ofertas.svg")}
.mh-ico[data-i="etiqueta-precio"]{--mh:url("../public/iconos/svg/etiqueta-precio.svg")}
.mh-ico[data-i="regalo"]{--mh:url("../public/iconos/svg/regalo.svg")}
.mh-ico[data-i="paquete"]{--mh:url("../public/iconos/svg/paquete.svg")}
.mh-ico[data-i="ubicacion"]{--mh:url("../public/iconos/svg/ubicacion.svg")}
.mh-ico[data-i="horario"]{--mh:url("../public/iconos/svg/horario.svg")}
.mh-ico[data-i="telefono"]{--mh:url("../public/iconos/svg/telefono.svg")}
.mh-ico[data-i="correo"]{--mh:url("../public/iconos/svg/correo.svg")}
.mh-ico[data-i="resenas"]{--mh:url("../public/iconos/svg/resenas.svg")}
.mh-ico[data-i="favoritos"]{--mh:url("../public/iconos/svg/favoritos.svg")}
.mh-ico[data-i="carrito"]{--mh:url("../public/iconos/svg/carrito.svg")}
.mh-ico[data-i="bolsa"]{--mh:url("../public/iconos/svg/bolsa.svg")}
.mh-ico[data-i="cuenta"]{--mh:url("../public/iconos/svg/cuenta.svg")}
.mh-ico[data-i="buscar"]{--mh:url("../public/iconos/svg/buscar.svg")}
.mh-ico[data-i="menu"]{--mh:url("../public/iconos/svg/menu.svg")}
.mh-ico[data-i="filtros"]{--mh:url("../public/iconos/svg/filtros.svg")}
.mh-ico[data-i="catalogo"]{--mh:url("../public/iconos/svg/catalogo.svg")}
.mh-ico[data-i="compartir"]{--mh:url("../public/iconos/svg/compartir.svg")}
.mh-ico[data-i="tienda"]{--mh:url("../public/iconos/svg/tienda.svg")}
.mh-ico[data-i="ollas-de-acero"]{--mh:url("../public/iconos/svg/ollas-de-acero.svg")}
.mh-ico[data-i="antiadherentes"]{--mh:url("../public/iconos/svg/antiadherentes.svg")}
.mh-ico[data-i="utensilios"]{--mh:url("../public/iconos/svg/utensilios.svg")}
.mh-ico[data-i="electrodomesticos"]{--mh:url("../public/iconos/svg/electrodomesticos.svg")}
.mh-ico[data-i="licuadoras"]{--mh:url("../public/iconos/svg/licuadoras.svg")}
.mh-ico[data-i="cafe"]{--mh:url("../public/iconos/svg/cafe.svg")}
.mh-ico[data-i="auxiliares-de-cocina"]{--mh:url("../public/iconos/svg/auxiliares-de-cocina.svg")}
.mh-ico[data-i="recetas"]{--mh:url("../public/iconos/svg/recetas.svg")}
.mh-ico[data-i="refrigeracion"]{--mh:url("../public/iconos/svg/refrigeracion.svg")}
.mh-ico[data-i="bebidas"]{--mh:url("../public/iconos/svg/bebidas.svg")}
.mh-ico[data-i="panel"]{--mh:url("../public/iconos/svg/panel.svg")}
.mh-ico[data-i="ventas"]{--mh:url("../public/iconos/svg/ventas.svg")}
.mh-ico[data-i="caja"]{--mh:url("../public/iconos/svg/caja.svg")}
.mh-ico[data-i="separados"]{--mh:url("../public/iconos/svg/separados.svg")}
.mh-ico[data-i="cartera"]{--mh:url("../public/iconos/svg/cartera.svg")}
.mh-ico[data-i="promociones"]{--mh:url("../public/iconos/svg/promociones.svg")}
.mh-ico[data-i="pedidos-web"]{--mh:url("../public/iconos/svg/pedidos-web.svg")}
.mh-ico[data-i="mensajes"]{--mh:url("../public/iconos/svg/mensajes.svg")}
.mh-ico[data-i="resenas-tienda"]{--mh:url("../public/iconos/svg/resenas-tienda.svg")}
.mh-ico[data-i="inventario"]{--mh:url("../public/iconos/svg/inventario.svg")}
.mh-ico[data-i="productos"]{--mh:url("../public/iconos/svg/productos.svg")}
.mh-ico[data-i="compras"]{--mh:url("../public/iconos/svg/compras.svg")}
.mh-ico[data-i="proveedores"]{--mh:url("../public/iconos/svg/proveedores.svg")}
.mh-ico[data-i="bodega"]{--mh:url("../public/iconos/svg/bodega.svg")}
.mh-ico[data-i="traslados"]{--mh:url("../public/iconos/svg/traslados.svg")}
.mh-ico[data-i="reportes"]{--mh:url("../public/iconos/svg/reportes.svg")}
.mh-ico[data-i="rentabilidad"]{--mh:url("../public/iconos/svg/rentabilidad.svg")}
.mh-ico[data-i="clientes"]{--mh:url("../public/iconos/svg/clientes.svg")}
.mh-ico[data-i="usuarios"]{--mh:url("../public/iconos/svg/usuarios.svg")}
.mh-ico[data-i="permisos"]{--mh:url("../public/iconos/svg/permisos.svg")}
.mh-ico[data-i="roles"]{--mh:url("../public/iconos/svg/roles.svg")}
.mh-ico[data-i="empresa"]{--mh:url("../public/iconos/svg/empresa.svg")}
.mh-ico[data-i="configuracion"]{--mh:url("../public/iconos/svg/configuracion.svg")}
.mh-ico[data-i="tienda-en-linea"]{--mh:url("../public/iconos/svg/tienda-en-linea.svg")}
.mh-ico[data-i="sedes"]{--mh:url("../public/iconos/svg/sedes.svg")}
.mh-ico[data-i="codigo-de-barras"]{--mh:url("../public/iconos/svg/codigo-de-barras.svg")}
.mh-ico[data-i="impresora"]{--mh:url("../public/iconos/svg/impresora.svg")}
.mh-ico[data-i="factura"]{--mh:url("../public/iconos/svg/factura.svg")}
.mh-ico[data-i="cotizacion"]{--mh:url("../public/iconos/svg/cotizacion.svg")}
.mh-ico[data-i="descuento"]{--mh:url("../public/iconos/svg/descuento.svg")}
.mh-ico[data-i="devolucion"]{--mh:url("../public/iconos/svg/devolucion.svg")}
.mh-ico[data-i="calculadora"]{--mh:url("../public/iconos/svg/calculadora.svg")}
.mh-ico[data-i="calendario"]{--mh:url("../public/iconos/svg/calendario.svg")}
.mh-ico[data-i="notificaciones"]{--mh:url("../public/iconos/svg/notificaciones.svg")}
.mh-ico[data-i="marketplace"]{--mh:url("../public/iconos/svg/marketplace.svg")}
.mh-ico[data-i="sincronizar"]{--mh:url("../public/iconos/svg/sincronizar.svg")}
.mh-ico[data-i="exportar"]{--mh:url("../public/iconos/svg/exportar.svg")}
.mh-ico[data-i="importar"]{--mh:url("../public/iconos/svg/importar.svg")}
.mh-ico[data-i="agregar"]{--mh:url("../public/iconos/svg/agregar.svg")}
.mh-ico[data-i="editar"]{--mh:url("../public/iconos/svg/editar.svg")}
.mh-ico[data-i="eliminar"]{--mh:url("../public/iconos/svg/eliminar.svg")}
.mh-ico[data-i="ver"]{--mh:url("../public/iconos/svg/ver.svg")}
.mh-ico[data-i="cerrar-sesion"]{--mh:url("../public/iconos/svg/cerrar-sesion.svg")}
/* Color distinto al pasar el mouse (configurado por lugar en Configuración → Íconos) */
a:hover .mh-hv,button:hover .mh-hv,label:hover .mh-hv,[role=button]:hover .mh-hv,.mh-hv:hover{color:var(--ico-h)!important}
/* Imagen propia: una para normal y otra para hover */
.mh-img{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.25em;flex-shrink:0}
.mh-img img{width:100%;height:100%;object-fit:contain;display:block}
.mh-img .h{display:none}
a:hover .mh-img.con-h .n,button:hover .mh-img.con-h .n,label:hover .mh-img.con-h .n,.mh-img.con-h:hover .n{display:none}
a:hover .mh-img.con-h .h,button:hover .mh-img.con-h .h,label:hover .mh-img.con-h .h,.mh-img.con-h:hover .h{display:block}
/* Menú lateral: el ícono activo siempre blanco; tamaño parejo con los de Font Awesome */
.sidebar-link.is-active:not(.sidebar-accordion-toggle)>.mh-ico,.sidebar-link.is-active:not(.sidebar-accordion-toggle)>.mh-hv{color:#fff!important}
.sidebar-accordion>.sidebar-accordion-toggle.is-active>.mh-ico{color:var(--color-primary)}
.sidebar-link>.mh-ico:first-child{width:20px}
.sidebar-link>.mh-ico:first-child::before{width:17px;height:17px}
/* Imagen propia (una para normal y otra para hover), dibujada en un <i> para heredar tamaño y posición del tema */
.mh-imgi{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.2em;line-height:1;font-style:normal;flex-shrink:0}
.mh-imgi::before{content:""!important;display:block;flex-shrink:0;width:1.15em;height:1.15em;background:var(--n) center/contain no-repeat}
.mh-imgi::after{content:none!important}
a:hover .mh-imgi.con-h::before,button:hover .mh-imgi.con-h::before,label:hover .mh-imgi.con-h::before,.mh-imgi.con-h:hover::before{background-image:var(--h)}
/* En el ítem activo del menú (fondo azul) una imagen oscura se perdería: se muestra en blanco */
.sidebar-link.is-active:not(.sidebar-accordion-toggle)>.mh-imgi:not(.con-h){filter:brightness(0) invert(1)}