/* 4.17.380 VER1 · Menús horizontales con la jerarquía de Base industrial.
   Sin seleccionar: fondo blanco · Seleccionado: fondo suave del color del botón + trazo inferior intenso del mismo color.
   (selectores más fuertes que los antiguos de styles.08 / styles.11) */
html body[data-route] #material-sector-context #material-sector-menu.material-sector-menu,
html body[data-route] #product-sector-context #product-sector-menu.material-sector-menu{max-width:1080px!important}
html body[data-route] #material-sector-context #material-sector-menu .material-sector-btn.material-sector-btn,
html body[data-route] #product-sector-context #product-sector-menu .material-sector-btn.material-sector-btn,
html body[data-route] #material-sector-menu .material-sector-btn.material-sector-btn,
html body[data-route] .machine-sector-btn.machine-sector-btn{
  flex:1 0 142px!important; min-width:142px!important; padding:6px 14px 7px!important;
  transition:background .16s ease, box-shadow .16s ease!important;
}
html body[data-route] #material-sector-menu .material-sector-btn.material-sector-btn span,
html body[data-route] #product-sector-menu .material-sector-btn.material-sector-btn span,
html body[data-route] .machine-sector-btn.machine-sector-btn span{
  white-space:nowrap!important; text-decoration:none!important; font-size:12px!important; letter-spacing:0!important;
  color:#173d6b!important; font-weight:700!important; width:auto!important;
}

/* hover */
html body[data-route] #material-sector-context #material-sector-menu .material-sector-btn.material-sector-btn:hover,
html body[data-route] #material-sector-menu .material-sector-btn.material-sector-btn:hover,
html body[data-route] #product-sector-menu .material-sector-btn.material-sector-btn:hover,
html body[data-route] .machine-sector-btn.machine-sector-btn:hover{
  background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 7%, white)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 18%, transparent)!important;
}
/* seleccionado (también mientras el ratón está sobre otro botón) */
html body[data-route] #material-sector-context #material-sector-menu .material-sector-btn.material-sector-btn.active,
html body[data-route] #material-sector-menu .material-sector-btn.material-sector-btn.active,
html body[data-route] #material-sector-menu:hover .material-sector-btn.material-sector-btn.active:not(:hover),
html body[data-route] #product-sector-context #product-sector-menu .material-sector-btn.material-sector-btn.active,
html body[data-route] #product-sector-menu .material-sector-btn.material-sector-btn.active,
html body[data-route] #product-sector-menu:hover .material-sector-btn.material-sector-btn.active:not(:hover),
html body[data-route] .machine-sector-btn.machine-sector-btn.active{
  background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 12%, white)!important;
  box-shadow:inset 0 -4px 0 var(--nav-pic,var(--client-nav-accent,#1477f2))!important;
}
html body[data-route] #material-sector-menu .material-sector-btn.material-sector-btn.active span,
html body[data-route] #product-sector-menu .material-sector-btn.material-sector-btn.active span,
html body[data-route] .machine-sector-btn.machine-sector-btn.active span{
  color:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 70%, #0b2240)!important; font-weight:800!important;
}
/* botones de Materiales (VACIAR / UNIFICAR / CAMBIAR PROVEEDOR) solo en Materiales */
body:not([data-route="materiales"]) #wf-extra-acts{display:none!important}

/* 4.17.381 · Barra de Clientes, Proveedores, Presupuestos, Albaranes, Facturas y Cobros con la misma jerarquía */
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav{
  flex:0 0 auto!important; max-width:none!important; width:auto!important; overflow:hidden!important;
}
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button{
  flex:1 0 132px!important; min-width:132px!important; padding:6px 14px 6px!important; background:#fff!important; box-shadow:none!important;
}
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button small{
  white-space:nowrap!important; text-decoration:none!important; font-size:12px!important; color:#173d6b!important; font-weight:700!important;
}
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button:hover{
  background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 7%, white)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 18%, transparent)!important;
}
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button.active,
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav:hover button.active:not(:hover){
  background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 12%, white)!important;
  box-shadow:inset 0 -4px 0 var(--nav-pic,var(--client-nav-accent,#1477f2))!important;
}
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button.active small,
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav:hover button.active:not(:hover) small{
  color:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 70%, #0b2240)!important; font-weight:800!important;
}

/* 4.17.382 · iconos apagados; en color al pasar el ratón y en el seleccionado (todos los menús) */
html body[data-route] #material-sector-context #material-sector-menu .material-sector-btn.material-sector-btn :is(img.nav,b),
html body[data-route] #product-sector-context #product-sector-menu .material-sector-btn.material-sector-btn :is(img.nav,b),
html body[data-route] .machine-sector-btn.machine-sector-btn :is(img.nav,b),
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button :is(img.nav,.client-nav-icon){
  opacity:.55!important; filter:saturate(.35)!important; transition:opacity .15s, filter .15s!important;
}
html body[data-route] #material-sector-context #material-sector-menu .material-sector-btn.material-sector-btn:is(:hover,.active) :is(img.nav,b),
html body[data-route] #product-sector-context #product-sector-menu .material-sector-btn.material-sector-btn:is(:hover,.active) :is(img.nav,b),
html body[data-route] .machine-sector-btn.machine-sector-btn:is(:hover,.active) :is(img.nav,b),
html body[data-route] #client-selected-bar#client-selected-bar .client-industrial-nav.client-industrial-nav button:is(:hover,.active) :is(img.nav,.client-nav-icon){
  opacity:1!important; filter:none!important;
}

/* 4.17.386 · pictograma del título de sector (junto a GRAN FORMATO, TEXTIL…) del mismo tamaño que los de los KPI */
html body[data-route] .material-sector-context .material-sector-context-icon.material-sector-context-icon{
  width:56px!important; height:56px!important; min-width:56px!important; flex:0 0 56px!important;
}
html body[data-route] .material-sector-context .material-sector-context-icon.material-sector-context-icon :is(img,svg,.wf-svg-icon){
  width:48px!important; height:48px!important; max-width:none!important; max-height:none!important;
}
/* 4.17.387 · pictograma del título centrado en altura y más cerca del título */
html body[data-route] .material-sector-context.material-sector-context{align-items:center!important;column-gap:10px!important;gap:10px!important}
html body[data-route] .material-sector-context .material-sector-context-icon.material-sector-context-icon{
  align-self:center!important; margin:0 2px 0 0!important; transform:translateY(-5px)!important; display:grid!important; place-items:center!important; line-height:0!important;
}
/* 4.17.414 · Maquinaria: mismos colores que Materiales (color del pictograma) */
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn.active{
  background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 12%, white)!important;
  box-shadow:inset 0 -4px 0 var(--nav-pic,var(--client-nav-accent,#1477f2))!important;
}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn.active span{
  color:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 70%, #0b2240)!important;
}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn:hover:not(.active){
  box-shadow:inset 0 -3px 0 var(--nav-pic,var(--client-nav-accent,#1477f2))!important;
}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn{background:#fff!important;box-shadow:none!important;flex:1 0 142px!important;min-width:142px!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn:hover:not(.active){background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 7%, white)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 18%, transparent)!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn span{color:#173d6b!important;font-weight:700!important;font-size:12px!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn :is(img.nav,b){opacity:.55!important;filter:saturate(.35)!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn:is(:hover,.active) :is(img.nav,b){opacity:1!important;filter:none!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn.active{background:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 12%, white)!important;box-shadow:inset 0 -4px 0 var(--nav-pic,var(--client-nav-accent,#1477f2))!important}
html body[data-route] #machine-sector-context #machine-sector-menu .machine-sector-btn.material-sector-btn.active span{color:color-mix(in srgb, var(--nav-pic,var(--client-nav-accent,#1477f2)) 70%, #0b2240)!important;font-weight:800!important}