@import 'variables.css';

.dxbl-menu-bar {
    background-color: var(--mi-color-fondo-menu); /* Cambia este valor al color de fondo deseado */
    color: var(--mi-color-texto-menu); /* Cambia este valor al color de letra deseado */
    font-size: 12px;
    font-family: 'TradeGothicLTPro', sans-serif; /* Aplicar la fuente al menú */
}

.dxbl-menu-item-list {
    background-color: var(--mi-color-fondo-menu); /* Cambia este valor al color de fondo deseado */
    color: var(--mi-color-texto-menu); /* Cambia este valor al color de letra deseado */
}

.dx-menu-item-text {
    color: var(--mi-color-texto-menu); /* Asegúrate de que el texto del menú tenga el color deseado */
}

.dx-menu-item.dx-state-disabled {
    color: var(--mi-color-texto-menu-deshabilitado); /* Cambia este color según tu preferencia */
    opacity: 0.6; /* Ajusta la opacidad si lo deseas */
    cursor: not-allowed;
}
.dx-menu .dx-menu-item.dx-state-disabled {
    color: red !important; /* Cambia 'red' por el color deseado */
    opacity: 1 !important; /* Asegura que el texto no se vea demasiado transparente */
}

.dxbl-menu .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover:not(.dxbl-selected):not(.dxbl-active) {
    background-color: var(--mi-color-fondo-menu-hover);
}

.dxbl-menu .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > .dxbl-btn:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover {
    background-color: var(--mi-color-fondo-menu-hover);
}
.dxbl-menu-dropdown.dxbl-dropdown-dialog > .dxbl-dropdown-body .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover:not(.dxbl-selected):not(.dxbl-active) {
    background-color: var(--mi-color-fondo-menu-hover);
}

.menu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    opacity: 0.7;
}

.user-profile {
    width: 300px; /* Ajusta según sea necesario */
    padding: 20px; /* Espaciado interno adicional */
}

.user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}

.menu-icon-user-profile {
    opacity: 0.75;
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.menu-icon-large {
    width: 5rem;
    height: 5rem;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}
.menu-icon-user-profile.menu-icon-large {
    font-size: 3rem; /* Ajusta el tamaño del ícono */
    width: 3rem; /* Ajusta el ancho */
    height: 3rem; /* Ajusta la altura */
}




/* Contenedor del botón estilo Ribbon */
.ribbon-button {
    width: 75px; /* Ancho fijo */
    height: 75px; /* Alto fijo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}

/* Botón con fondo igual al del contenedor */
.ribbon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent; /* Mismo color que el fondo */
    color: #333; /* Texto oscuro */
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    /* Efecto hover con color #FBCC40 */
    .ribbon-container:hover {
        background: #FBCC40; /* Amarillo dorado */
        color: black;
        transform: scale(1.05);
    }

/* Íconos con color principal */
.ribbon-icon {
    font-size: 32px;
    margin-bottom: 2px;
    color: #0078D4; /* Azul Office */
}

/* Texto con color principal */
.ribbon-text {
    font-size: 11px;
    font-weight: bold;
    color: #333; /* Texto oscuro */
}