:root {
    --primary-color: #FF5046; /* Color principal (rojo) */
    --secondary-color: #E0E0C2; /* Color secundario (GRIS) */
    --third-color: #F3C5B6; /* Color secundario (GRIS) */
    --background-color: #E6C8AE; /* Color de fondo (melon) */
    --button-text-color: white; /* Color de texto de los botones */
    --button-text-color-alt: black; /* Color de texto de los botones */
    --grid-background: white;
    --grid-header-bg: #DFDFDF; /* #F3C5B6;  Color de fondo para encabezado de DataGrid */
    --grid-header-text-color: #515050;
    --grid-row-bg: #dfdfdf; /* Color de fondo para las filas del DataGrid */
    --grid-selection-bg: #E6C8AE; /* Color de fondo de la fila seleccionada */
    --textbox-bg: #f5f5f5; /* Color de fondo del TextBox */

    --treeview-bg: #6F6F6F;
    --treeview-item-bg: #DFDFDF; /* Fondo claro para los elementos del TreeView */
    --treeview-item-hover-bg: #525050; /*#e0e0e0;  Fondo al pasar el mouse por encima */
    --treeview-item-hover-text: white; /*#e0e0e0;  Fondo al pasar el mouse por encima */
    --treeview-item-selected-bg: #FFEB3B; /* Fondo para el item seleccionado */
    --treeview-text-color: black;
    --treeview-text-color-at: white ;
}
/* Estilo base para los botones genericos */
.dx-button {
    background-color: var(--secondary-color);
    color: var(--button-text-color-alt);
}

/* Estilo base para los botones .dx-button-success */
    .dx-button.dx-button-success {
        background-color: var(--primary-color);
        color: var(--button-text-color);
    }
    .dx-button.dx-button-success .dx-icon {
        color: var(--button-text-color);
    }

/* Estilo cuando el botón está enfocado (click) */
        .dx-button.dx-button-success.dx-state-focused, .dx-button.dx-button-success.dx-state-active {
            background-color: var(--primary-color);
            color: var(--button-text-color);
            border-color: var(--primary-color);
        }

/*cambiar el fondo del botón en hover o active a un color más claro */
.dx-button.dx-button-success.dx-state-hover, .dx-button.dx-button-success.dx-state-focused {
    background-color: #e14a47;
    color: var(--button-text-color);
}

/* Estilo de texto cuando el botón está deshabilitado*/
        .dx-button.dx-button-success.dx-state-disabled {
            background-color: #e29c9b;
            color: #8a8a8a;
        }


.dx-datagrid {
    background-color: var(--grid-background);
}
    .dx-datagrid .dx-header-row {
        background-color: var(--grid-header-bg);
        color: var(--grid-header-text-color);
    }

    .dx-datagrid .dx-data-row {
        background-color: var(--grid-row-bg); /* Fondo claro para las filas */
    }

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
    background-color: var(--primary-color);
    color: #fff;
}
.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection {
    background-color: var(--primary-color);
}
.dx-pager .dx-pages .dx-info {
    opacity: .9;
}
.dx-textbox {
    background-color: var(--textbox-bg); /* Fondo gris claro */
    color: #000333; /* Color de texto */
}

/********************************************************* INICIO - COLORES DEL MENU LATERAL **************************************************/
.dx-treeview { 
    background-color: var(--treeview-bg); 
}

.dx-treeview-item {
    background-color: var(--treeview-item-bg);
    color: var(--treeview-text-color); 
}
    .dx-treeview-item .dx-icon {
        color: var(--treeview-text-color);
    }
.dx-swatch-additional .dx-treeview-toggle-item-visibility{
    color: var(--primary-color);
}

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item { /*Elemento seleccionado*/
    background-color: var(--primary-color);
}
.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * { /*texto del elemento seleccionado*/
    color: var(--treeview-text-color-at);
}

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover { /*elemento al pasar el cursor*/
    background-color: var(--treeview-item-hover-bg);
    color: var(--treeview-item-hover-text);
}

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover .dx-icon { /*icono del elemento al pasar el cursor*/
    color: var(--treeview-item-hover-text);
}

/*********************************************************  FIN - COLORES DEL MENU LATERAL  **************************************************/