:root {
    --kendo-font-family: "Acciona", Calibri "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --color-white: #ffffff;
    --color-acciona: var(--kendo-primary-100);
    --color-acciona-grey: #60696d;
    --color-acciona-grey-light: #818d93;
    --left-menu-icon-size: 24px;
    /*--kendo-drawer-mini-initial-width: 24px;*/ /* Este valor es por si queremos poner el ancho del menú izquierdo con un tamaño fijo*/
    --kendo-drawer-item-ripple-border-width: 0.2rem;
    --kendo-card-border-radius: 0.25rem;
    --kendo-font-weight-bold: 500; /*Esto es para forzar este valor en el bold, pero no es el correcto 
    /*--kendo-grid-header-font-weight: 500;*/
}

/* Expandimos el drawer para que ocupe todo el ancho de la pantalla */
.k-drawer-container {
    position: relative;
    width: 100%;
}

/* Ponemos el fondo gris a todo el contenido del drawer */
.k-drawer-content {
    background-color: var(--kendo-body-bg, initial);
    padding: 1rem;
}

/* Calcular el ancho de la parte izquierda del drawer en función del tamaño del icono */
.k-drawer-mini .k-drawer-wrapper {
    width: var(--kendo-drawer-mini-initial-width, calc(2rem + var(--left-menu-icon-size, 1rem)));
}

/* Aumentamos la altura para poder poner elementos de menú en la parte inferior */
.k-drawer-wrapper {
    height: 100%;
}

/* Sobreescribimos este color, porque por defecto es más oscuro*/
.k-text-primary {
    color: var(--kendo-text-primary, var(--color-acciona, inherit));
}

/* Fondo transparente para el contenido de los tabs*/
.k-tabstrip-content,
.k-tabstrip > .k-content {
    background-color: transparent;
}

/* Inputs de formulario deshabilitado en color negro*/
.k-disabled, .k-widget[disabled], .k-disabled {
    color: var(--kendo-tabstrip-content-text, var(--kendo-component-text, inherit));
}

/* Aumentamos el font size de las notificaciones */
.k-notification {
    font-size: var(--kendo-notification-font-size, var(--kendo-font-size-md, inherit));
}
/* Aumentamos el font size de las cards */
.k-card-body {
    font-size: var(--kendo-card-font-size, var(--kendo-font-size, inherit));
}

/* Clase personalizada para ocultar la cabecera de los grids */
.no-headers-grid .k-grid-header {
    display: none;
}

/* Clases adicionales para poner la cabecera de los grid de color gris */
.k-table-thead,
.k-table-header {
    border-color: var(--color-acciona-grey-light, inherit);
    color: var(--color-white, inherit);
    background-color: var(--color-acciona-grey, inherit);
}

.k-grid-header {
    border-color: var(--color-acciona-grey, inherit);
    color: var(--color-white, inherit);
    background-color: var(--color-acciona-grey, inherit);
}

.k-table-thead .k-grid-header-menu {
    color: var(--color-white, inherit);
}

.k-grid-header .k-sort-icon {
    color: var(--color-white, inherit);
}

.k-grid-header .k-sort-order {
    color: var(--color-white, inherit);
}

.k-grid-header .k-grid-filter:hover,
.k-grid-header .k-header-column-menu:hover,
.k-grid-header .k-grid-header-menu:hover,
.k-grid-header .k-hierarchy-cell .k-icon:hover {
    color: var(--color-white, inherit);
    background-color: var(--color-acciona-grey-light, inherit);
}

.k-grid-header .k-grid-filter.k-active,
.k-grid-header .k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-active {
    color: var(--color-white, inherit);
    background-color: var(--color-acciona-grey-light, inherit);
}

.k-grid-header .k-table-th.k-grid-header-sticky,
.k-grid-header td.k-grid-header-sticky,
.k-grid-header .k-table-td.k-grid-header-sticky,
.k-grid-header .k-grid-header-sticky.k-sorted {
    color: var(--color-white, inherit);
    background-color: var(--color-acciona-grey, inherit);
    border-inline-color: var(--color-acciona-grey-light, inherit);
}

.k-grid-header .k-table-th.k-sorted {
    background-color: var(--color-acciona-grey-light, inherit);
}

.k-grid-header .k-grid-header-wrap {
    border-color: var(--color-acciona-grey, inherit);
}

td.k-selected,
.k-table-row.k-selected > td,
.k-table-td.k-selected,
.k-table-row.k-selected > .k-table-td {
    background-color: var(--tb-kendo-neutral-30, inherit);
}

.k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-selected,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > td,
.k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td.k-selected,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > .k-table-td,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-selected,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > td,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td.k-selected,
.k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > .k-table-td {
    background-color: var(--tb-kendo-neutral-20, inherit);
}

/* Modificamos estas clases para que el filtro de los grid salga a la izquierda del título */
.k-cell-inner {
    display: flex !important;
    flex-direction: row-reverse !important;
}

.k-cell-inner .k-grid-header-menu {
    display: flex;
}

.k-filterable > .k-cell-inner .k-link {
    padding-inline-start: 0;
    padding-inline-end: var(--INTERNAL--kendo-grid-header-padding-x, 0);
}

/* Estilo para los TelerikWindow con la cabecera en gris */
.grey-header-window.k-window {
    border-color: var(--color-acciona-grey, inherit);
    border-width: 0;
/*    border-top-left-radius: 0.50rem;
    border-top-right-radius: 0.50rem;*/
}

.grey-header-window.k-window .k-window-titlebar {
    background-color: var(--color-acciona-grey, inherit);
    color: #fff;
}

.grey-header-window.k-window .k-window-title {
    color: #fff;
}


/* Estilo para los Cards con la cabecera en gris */
.k-card-header {
    color: #fff;
    background-color: var(--color-acciona-grey, inherit);
    font-size: var(--kendo-card-font-size, var(--kendo-font-size, inherit));
    font-weight: var(--kendo-font-weight-bold, inherit));
}