@charset "UTF-8";
/* *****************************************************************************************************************
** VARIABLES CSS QUE CONTROLAN DISTINTOS ESTILOS
***************************************************************************************************************** */
/*............................................................................................................... 
    COLORES CORPORATIVOS GENÉRICOS PARA MAIN V3
        Estas son las variables con los colores corporativos que configurar para el cliente en el cssoverride            
................................................................................................................. */
:root {
  --Corporativo_ColorPrimarioFondo: #008fe2;
  --Corporativo_ColorPrimarioTexto: #ffffff;
  --Corporativo_ColorPrimarioAlternativoFondo: #008fe2;
  --Corporativo_ColorPrimarioAlternativoTexto: #ffffff;
  --Corporativo_ColorSecundarioFondo: #c0c0c0;
  --Corporativo_ColorSecundarioTexto: #817f7f;
  --Corporativo_ColorTercerOrdenFondo: #706f6f;
  --Corporativo_ColorTercerOrdenTexto: #e6e6e6;
  --Corporativo_ColorCuartoOrdenFondo: #575757;
  --Corporativo_ColorCuartoOrdenTexto: #ffffff; }

/*............................................................................................................... 
    COLORES GENERICOS (NO CORPORATIVOS)
        Estas son las variables con los colores genéricos no relacionados con la imagen de marca, como el color
        usado para diferenciar albaranes de facturas, etc.
................................................................................................................. */
:root {
  --estadosCero_Color: #ff0000;
  --estadosUno_Color: #0000ff;
  --estadosDos_Color: #b4dc0f;
  --semaforoFactura_Color: #ec9330;
  --semaforoAbono_Color: #00ff00;
  --semaforoTodos_Color: #ff0000;
  --gridContentFactura_Color: #ec9330;
  --gridContentAbono_Color: #0cc285;
  --gridContentCategoriaUno_Color: #ec9330;
  --gridContentCategoriaDos_Color: #0cc285;
  --gridContentBotonPeligro_Color: #870202;
  --gridContentResaltesImportes_Color: #177a00; }

/*............................................................................................................... 
    VARIABLES SEMÁNTICAS: ASIGNACIÓN DE COLORES CORPORATIVOS A VARIABLES SEMÁNTICAS
        Este área define variables con nombres con significado de maquetación, a las que se le asignan las variables
        con los colores corporativos.

        Estas variables son las que se utilizan luego en los ajustes CSS que hay más abajo, que redefinen los 
        estilos para los diferentes elementos (Grids, cabecera, Botones, ...)
................................................................................................................. */
:root {
  /* Reajuste de colores primarios básicos en la aplicación */
  --colorWeb1: var(--Corporativo_ColorPrimarioFondo);
  --colorWeb2: var(--Corporativo_ColorSecundarioFondo);
  --mdAccent: var(--Corporativo_ColorPrimarioFondo);
  --menuLateralBg: var(--Corporativo_ColorPrimarioFondo);
  --menuLaterialFont: var(--Corporativo_ColorPrimarioTexto);
  /* BARRA DE MENÚ */
  --topNavBar: var(--Corporativo_ColorPrimarioFondo);
  --fuenteTopNavBar: var(--Corporativo_ColorPrimarioTexto);
  /* COLOR PRIMARIO: BOTONES, ...*/
  --mdPrimary: var(--Corporativo_ColorPrimarioFondo);
  /* LAYOUT */
  --paginaLayoutPie_BackgroundColor: var(--Corporativo_ColorCuartoOrdenFondo);
  --paginaLayoutPie_Color: var(--Corporativo_ColorCuartoOrdenTexto);
  /* PRINCIPALES */
  --paginaTitulos_Color: var(--Corporativo_ColorPrimarioFondo);
  --paginaEnlaces_Color: var(--Corporativo_ColorPrimarioFondo);
  --paginaResalteIconosEnGrid_Color: var(--Corporativo_ColorPrimarioFondo);
  /* GRIDS */
  --gridCabecera_BackgroundColor: var(--Corporativo_ColorPrimarioFondo);
  --gridCabecera_ForeColor: var(--Corporativo_ColorPrimarioTexto);
  --gridBotones_BackgroundColor: var(--Corporativo_ColorCuartoOrdenFondo);
  --gridBotones_BackgroundColor_Hover: var(--Corporativo_ColorSecundarioFondo);
  --gridBotones_ForeColor: var(--Corporativo_ColorCuartoOrdenTexto);
  --gridPie_BackgroundColor: var(--Corporativo_ColorSecundarioFondo);
  --gridPie_BorderColor: var(--Corporativo_ColorSecundarioTexto);
  --gridPieTexto_Color: var(--Corporativo_ColorSecundarioTexto) !important;
  --gridPieBotonPagina_Color: var(--gridBotones_BackgroundColor) !important;
  --gridPieBotonPagina_BackgroundColor: var(--gridPie_BackgroundColor) !important;
  --gridPieBotonPagina_BorderColor: var(--gridPie_BorderColor) !important;
  --gridPieBotonPaginador_Color: var(--gridBotones_ForeColor) !important;
  --gridPieBotonPaginador_BackgroundColor: var(--gridBotones_BackgroundColor) !important;
  --gridPieBotonPaginador_BorderColor: var(--gridBotones_BackgroundColor) !important;
  --gridPieBotonPaginadorHover_Color: var(--gridBotones_ForeColor) !important;
  --gridPieBotonPaginadorHover_BackgroundColor: var(--gridBotones_BackgroundColor_Hover) !important;
  --gridPieBotonRefresh_BackgroundColor: transparent !important;
  --gridPieBotonRefresh_Color: var(--mdPrimary) !important;
  --gridPieComboPaginador_BackgroundColor: var(--gridBotones_BackgroundColor) !important;
  --gridPieComboPaginador_Color: var(--gridBotones_ForeColor) !important;
  /* BOTONERA LATERAL */
  --botoneraLateralBase_BackgroundColor: var(--Corporativo_ColorSecundarioFondo);
  --botoneraLateralBase_Color: var(--Corporativo_ColorSecundarioTexto);
  --botoneraLateralBaseIcono_Color: var(--Corporativo_ColorSecundarioTexto);
  --botoneraLateralBaseHover_Color: var(--Corporativo_ColorSecundarioTexto);
  --botoneraLateralBaseActivo_BackgroundColor: var(--Corporativo_ColorPrimarioFondo);
  --botoneraLateralBaseActivo_Color: var(--Corporativo_ColorTercerOrdenTexto);
  --botoneraLateralBaseActivoIcono_Color: var(--Corporativo_ColorTercerOrdenTexto);
  /* LATERAL DATOS CLIENTE */
  --lateralDatosCliente_BackgroundColor: var(--Corporativo_ColorSecundarioFondo);
  --lateralDatosCliente_Color: var(--Corporativo_ColorSecundarioTexto);
  --lateralDatosClienteTitulo_BackgroundColor: var(--Corporativo_ColorCuartoOrdenFondo);
  --lateralDatosClienteTitulo_Color: var(--Corporativo_ColorCuartoOrdenTexto);
  /* COLORES BOTONES CALL TO ACTION (CTA): En nuestro caso los botones por defecto de los formularios */
  --botones_Cta_BackgroundColor: var(--Corporativo_ColorPrimarioAlternativoFondo);
  --botones_Cta_Color: var(--Corporativo_ColorPrimarioAlternativoTexto);
  --botones_Cta_Hover_BackgroundColor: var(--Corporativo_ColorPrimarioFondo);
  --botones_Cta_Hover_Color: var(--Corporativo_ColorPrimarioTexto); }

/*............................................................................................................... 
    REDEFINICIÓN DE ESTILOS CON VARIABLES
        Este área redefine los estilos de las distintas partes del portal que son configurables a través de las 
        variables que hay en el área superior.
................................................................................................................. */
/* *****************************************
** FUENTE DE LETRA PRINCIPAL
***************************************** */
/*@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');
body {font-family: 'Ubuntu', sans-serif !important; font-weight: 300 !important;}*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300 !important; }

/* **************************************************************************************************************************************
** Estilos GRID 
**
** Algunos de estos estilos están afectando no sólo a los grids sino también a botoneras de otros controles kendo, como combos, etc.
** En principio no quedan mal, pero si queremos que afecten sólo a los grids habría que añadir .k-grid delante de todos estos estilos
************************************************************************************************************************************** */
/* Cabecera grid*/
.k-grid .k-grid-header th.k-header {
  color: var(--gridCabecera_ForeColor);
  background-color: var(--gridCabecera_BackgroundColor) !important; }

.gridSimple th .k-link:link,
.gridSimple th .k-link:visited,
.gridSimple th .k-nav-current.k-state-hover .k-link {
  color: var(--gridCabecera_ForeColor) !important; }

/* Bordes inferiores del grid redondeados y pie espaciado */
.k-grid {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px; }

.k-pager-wrap {
  padding-left: 15px;
  padding-right: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-sizing: border-box; }

/* Texto en el paginador al pie y color de fondo*/
.k-pager-wrap {
  font-weight: bold;
  color: var(--gridPieTexto_Color);
  background-color: var(--gridPie_BackgroundColor); }

/* Boton número de página */
.k-draghandle.k-state-selected:hover,
.k-ghost-splitbar-horizontal,
.k-ghost-splitbar-vertical,
.k-list > .k-state-highlight,
.k-list > .k-state-selected,
.k-marquee-color,
.k-panel > .k-state-selected,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-state-selected,
.k-state-selected:link, .k-state-selected:visited {
  color: var(--gridPieBotonPagina_Color);
  background-color: var(--gridPieBotonPagina_BackgroundColor);
  border-color: var(--gridPieBotonPagina_BorderColor); }

/* Botones paginación Atras/Alante/... */
.k-pager-wrap .k-link {
  background: var(--gridPieBotonPaginador_BackgroundColor);
  border-color: var(--gridPieBotonPaginador_BorderColor);
  color: var(--gridPieBotonPaginador_Color) !important;
  opacity: 1; }

.k-pager-wrap .k-link.k-state-disabled:hover {
  background-color: var(--gridPieBotonPaginadorHover_BackgroundColor);
  color: var(--gridPieBotonPaginadorHover_Color); }

.k-grid-pager .k-pager-numbers .k-link,
.k-grid-pager .k-pager-numbers .k-state-selected {
  border: 1px solid transparent;
  box-shadow: none; }

/* Botón de recargar */
.k-pager-wrap .k-pager-refresh.k-link {
  background-color: var(--gridPieBotonRefresh_BackgroundColor); }

.k-pager-wrap .k-pager-refresh.k-link > .k-icon {
  color: var(--gridPieBotonRefresh_Color); }

/* Combo paginación: Parte con el número */
/*.k-pager-sizes span.k-dropdown-wrap.k-state-default {background-color: red; border-color: blue;}*/
.k-pager-sizes .k-dropdown-wrap .k-input {
  background-color: var(--gridPieComboPaginador_BackgroundColor);
  color: var(--gridPieComboPaginador_Color); }

/* Idem para la parte responsive */
.k-webkit .k-pager-numbers .k-current-page .k-link,
.k-webkit .k-pager-numbers .k-current-page .k-link:hover {
  border: 1px solid transparent;
  box-shadow: none;
  background-color: transparent;
  color: var(--gridPieTexto_Color) !important;
  margin-left: 12px !important; }

/* Combo paginación: Parte con el desplegable */
.k-state-default > .k-select {
  background-color: var(--gridPieComboPaginador_BackgroundColor);
  color: var(--gridPieComboPaginador_Color);
  margin-left: 12px;
  text-align: center; }

/* **************************************************************************************************************************************
** OTROS CONTROLES
************************************************************************************************************************************** */
.k-list > .k-state-focused.k-state-selected,
.k-listview > .k-state-focused.k-state-selected,
.k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected {
  color: var(--Corporativo_ColorPrimarioTexto); }

/* **************************************************************************************************************************************
** BOTONERA LATERAL
************************************************************************************************************************************** */
ficha-card input#CheckOcultarLateral + label {
  background-color: var(--botoneraLateralBaseActivo_BackgroundColor); }

ul.SubmenuCarritoB2B > li > a,
clientes-menu-ficha > a,
crm-comercial-contactos-menu-ficha > a,
sat-menu-clientes > a {
  background-color: var(--botoneraLateralBase_BackgroundColor);
  color: var(--botoneraLateralBase_Color); }

ul.SubmenuCarritoB2B > li > a:before,
clientes-menu-ficha > a:before,
crm-comercial-contactos-menu-ficha > a:before,
sat-menu-clientes > a:before {
  color: var(--botoneraLateralBaseIcono_Color); }

ul.SubmenuCarritoB2B > li > a:hover,
clientes-menu-ficha > a:hover,
crm-comercial-contactos-menu-ficha > a:hover,
sat-menu-clientes > a:hover {
  color: var(--botoneraLateralBaseHover_Color); }

ul.SubmenuCarritoB2B > li > a.active,
ul.SubmenuCarritoB2B > li.active > a,
clientes-menu-ficha > a.active,
crm-comercial-contactos-menu-ficha > a.active,
sat-menu-clientes > a.active {
  background-color: var(--botoneraLateralBaseActivo_BackgroundColor) !important;
  color: var(--botoneraLateralBaseActivo_Color); }

ul.SubmenuCarritoB2B > li.active > a > label {
  color: var(--botoneraLateralBaseActivoIcono_Color); }

ul.SubmenuCarritoB2B > li > a.active:before,
clientes-menu-ficha > a.active:before,
crm-comercial-contactos-menu-ficha > a.active:before,
sat-menu-clientes > a.active:before {
  color: var(--botoneraLateralBaseActivoIcono_Color); }

ul.SubmenuCarritoB2B > li > a > label {
  color: var(--botoneraLateralBase_Color); }

ul.SubmenuCarritoB2B > li > a:before > label {
  color: var(--botoneraLateralBaseIcono_Color); }

ul.SubmenuCarritoB2B > li > a:hover > label {
  color: var(--botoneraLateralBaseHover_Color); }

ul.SubmenuCarritoB2B > li > a.active > label {
  color: var(--botoneraLateralBaseActivo_Color); }

/* **************************************************************************************************************************************
** LATERAL DATOS CLIENTE
************************************************************************************************************************************** */
.fichaCabecera,
.clienteByComercial .fichaCabecera {
  background-color: var(--lateralDatosCliente_BackgroundColor);
  color: var(--lateralDatosCliente_Color); }

.fichaCabecera .titulo h2,
.clienteByComercial .fichaCabecera .titulo h2 {
  background-color: var(--lateralDatosClienteTitulo_BackgroundColor);
  color: var(--lateralDatosClienteTitulo_Color) !important; }

/* **************************************************************************************************************************************
** OTROS ESTILOS
************************************************************************************************************************************** */
/* TÍTULOS */
#page-title h1,
.clienteByComercial h1,
h1 {
  color: var(--paginaTitulos_Color) !important; }

h2 {
  color: var(--paginaTitulos_Color) !important; }

/* BARRA DE PIE*/
.PieContenedor {
  color: var(--paginaLayoutPie_Color);
  background: var(--paginaLayoutPie_BackgroundColor); }

/* ENLACES: En grids de facturas, grids icono de ordenación, ... */
.tabs-nav li a:hover,
.tabs-nav li.active a,
.features-tour-box h3,
.font-primary,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
.content-box-header.bg-default > .ui-tabs-nav li > a:hover,
.content-box-header.bg-gray > .ui-tabs-nav li > a:hover,
.content-box-header.bg-white > .ui-tabs-nav li > a:hover,
.btn-link:hover,
#page-sidebar ul li.sfHover > a.sf-with-ul,
a:hover {
  color: var(--paginaEnlaces_Color); }

/* Enlace cabecera grids "ver todos" en pedidos pendientes y facturas (originalmente azul claro) */
.IndexGridEnlace {
  color: var(--paginaEnlaces_Color); }

/* RESALTES CON COLORES FIJOS*/
.font-blue-alt {
  color: var(--paginaResalteIconosEnGrid_Color) !important; }

/* Categorias y grupos en los rows del grid de gestión de productos del admin */
.badge-azure,
.label-azure,
.btn-azure,
.hover-azure:hover,
.bg-azure {
  color: #fff;
  background: var(--gridContentCategoriaUno_Color);
  border-color: var(--gridContentCategoriaUno_Color); }

/* Idem */
.progress-bar-warning,
.bootstrap-switch-warning,
.checkbox-warning div[id^='uniform-'] span.checked,
.radio-warning div[id^='uniform-'] span.checked,
.badge-warning,
.label-warning,
.btn-warning,
.bg-warning,
.hover-btnCustom:hover,
.hover-warning:hover,
.bg-btnCustom {
  color: #fff;
  border-color: var(--gridContentCategoriaDos_Color);
  background: var(--gridContentCategoriaDos_Color); }

/* Boton en grid de peligro (borrar) de color rojo */
.progress-bar-danger,
.bootstrap-switch-danger,
.checkbox-danger div[id^='uniform-'] span.checked,
.radio-danger div[id^='uniform-'] span.checked,
.badge-danger,
.label-danger,
.btn-danger,
.bg-danger,
.hover-red:hover,
.hover-danger:hover,
.bg-red {
  color: #fff;
  border-color: var(--gridContentBotonPeligro_Color);
  background: var(--gridContentBotonPeligro_Color); }

/* Resalte en grid de color rojo (importes facturas, ...) */
.has-error .help-block,
.text-danger,
.font-red,
.parsley-required {
  color: var(--gridContentResaltesImportes_Color) !important; }

/* ESTADOS: Facaturas, pedidos (resalte de puntos de distintos colores) */
.estado-0 {
  color: var(--estadosCero_Color); }

.estado-1 {
  color: var(--estadosUno_Color); }

.estado-2 {
  color: var(--estadosDos_Color); }

.semaforoFacturas.factura {
  background-color: var(--semaforoFactura_Color); }

.semaforoFacturas.abono {
  background-color: var(--semaforoAbono_Color); }

.semaforoFacturas.todas {
  background-color: var(--semaforoTodos_Color); }

.gridFactura {
  color: var(--gridContentFactura_Color); }

.gridAbono {
  color: var(--gridContentAbono_Color); }

.md-button.md-raised.md-primary:not([disabled]) {
  background-color: var(--botones_Cta_BackgroundColor);
  color: var(--botones_Cta_Color);
  transition: 0.5s; }

.md-button.md-default-theme.md-primary.md-fab:not([disabled]).md-focused,
.md-button.md-primary.md-fab:not([disabled]).md-focused,
.md-button.md-default-theme.md-primary.md-fab:not([disabled]):hover,
.md-button.md-primary.md-fab:not([disabled]):hover,
.md-button.md-default-theme.md-primary.md-raised:not([disabled]).md-focused,
.md-button.md-primary.md-raised:not([disabled]).md-focused,
.md-button.md-default-theme.md-primary.md-raised:not([disabled]):hover,
.md-button.md-primary.md-raised:not([disabled]):hover {
  background-color: var(--botones_Cta_Hover_BackgroundColor) !important;
  color: var(--botones_Cta_Hover_Color); }

.md-button.md-primary.md-raised.md-stroked {
  color: var(--mdPrimary); }

.font-color-2 {
  color: var(--color-profesional-complementario-2) !important; }

.font-color-3 {
  color: var(--Corporativo_ColorPrimarioFondo) !important; }

@media (max-width: 768px) {
  list-view-carrito-lineas .referencia-descripcion-precio {
    align-items: flex-start !important;
    width: 100%; }
  list-view-carrito-lineas .cantidad-unidad-medida {
    justify-content: flex-start; }
    list-view-carrito-lineas .cantidad-unidad-medida input {
      max-width: 53px !important; }
  list-view-carrito-lineas .precio-total {
    max-width: 100% !important; } }

list-view-carrito-lineas .botones {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }

ficha-producto .Descripcion {
  text-align: justify !important; }

ficha-producto .Cabecera h2 {
  white-space: normal !important;
  line-height: 1 !important; }

ficha-producto .ContenidoPrincipal {
  top: 200px !important; }

grid-productos table td .mdi-circle {
  display: block;
  text-align: center; }