/**
 * Iconos del menú de navegación para POS Tienda (body.pos-tienda).
 *
 * El RENDER lo maneja la directiva <menu-icon> (businessTypeService.js):
 *   - svg="x"  -> <img class="menu-svg-icon" src="assets/images/icons/svg/x.svg">
 *   - pos="x"  -> <i class="pos-icon-x"> (fontello)
 *   - (Restobar) -> <i class="md md-x"> (Material)
 * Aquí SOLO se ajustan alineación, tamaño y color para que los tres tipos de icono
 * (Material, fontello y SVG) queden ALINEADOS entre sí (mismo ancho, misma línea base)
 * tanto en la barra superior como en los submenús. Ya NO se hace swap de font-family.
 */

/* Alineación uniforme: ancho fijo, centrado, misma línea base y separación del texto.
   Así el texto de cada pestaña/opción arranca en la misma posición y no se ve corrido. */
body.pos-tienda #topnav .navigation-menu i.md,
body.pos-tienda #topnav .navigation-menu i[class^="pos-icon-"],
body.pos-tienda #topnav .navigation-menu i[class*=" pos-icon-"],
body.pos-tienda #topnav .navigation-menu .menu-svg-icon {
  display: inline-block;
  width: 20px;
  min-width: 20px;
  text-align: center;
  margin-right: 8px;
  margin-left: 0;
  vertical-align: middle;
  line-height: 1;
}

/* Tamaño consistente del glyph (Material y fontello) y de la imagen SVG. */
body.pos-tienda #topnav .navigation-menu i.md,
body.pos-tienda #topnav .navigation-menu i[class^="pos-icon-"],
body.pos-tienda #topnav .navigation-menu i[class*=" pos-icon-"] {
  font-size: 18px;
}
body.pos-tienda #topnav .navigation-menu .menu-svg-icon {
  height: 16px;
  width: 16px;
  min-width: 16px;
  margin-right: 10px;   /* la imagen es más angosta; compensa para alinear con los glyphs */
}

/* Color por defecto de los iconos del menú en POS Tienda: gris frío. */
body.pos-tienda #topnav .navigation-menu i[class^="pos-icon-"],
body.pos-tienda #topnav .navigation-menu i[class*=" pos-icon-"],
body.pos-tienda #topnav .navigation-menu > li > a i {
  color: #98a6ad;
}

/* Hover / activo: azul --main. */
body.pos-tienda #topnav .navigation-menu > li:hover > a i,
body.pos-tienda #topnav .navigation-menu > li > a:hover i,
body.pos-tienda #topnav .navigation-menu > li > a:focus i,
body.pos-tienda #topnav .navigation-menu > li > a:active i,
body.pos-tienda #topnav .navigation-menu > li .submenu li > a:hover i,
body.pos-tienda #topnav .has-submenu.active > a i,
body.pos-tienda #topnav .navigation-menu li.active > a i {
  color: #064F8F;
}