:root {
    --color-utilidades-fg:#666;
    --color-utilidades-fg2:#666;    
    --color-utilidades-bg:#FFFFFF;
    --color-utilidades-bg2:#EAEAEA;    
    --color-utilidades-bg3:#F0F0F0;
}

#contenedor_utilidades_usuario {
    margin: 0 0 2em 0;
    position: relative;
    top: -30px;    
}

#menu_utilidades_usuario {
    margin: 0;
    width: 100% ;
    margin-left: auto;
    border: 1px solid var(--color-utilidades-fg);
    border-top: none;            
}

#datos_usuario {
    padding: 0 0.5rem;
    background-color: var(--color-utilidades-bg2);    
    color: var(--color-utilidades-fg2);
    display: flex;
    align-items: center;
}
#datos_usuario #datos_personales {
    font-weight: 600;
    text-align: left;
    max-width: 31em;
    cursor: help;
}

#icono_admin {
    position: absolute; 
    right: 1em; 
    color: blue; 
    font-size: 0.8em; 
    cursor: pointer
}

#utilidades_usuario {
    margin: 0;
    padding: 0.25em 0;
}


#utilidades_usuario .util {
    color: var(--color-utilidades-fg);
    padding: 0 1.5em;    
    text-align: center;
}   

#utilidades_usuario .util:not(:last-child) {
    border-right: 1px solid var(--color-utilidades-fg);
}

/* Ajuste para que las listas dentro de las cards se vean bien 
   y no salga el texto justificado */
.card li {
    text-align: left;
}

@media (max-width: 576px) { 
    #contenedor_utilidades_usuario {
        margin-left: -15px;
        margin-right: -15px;
    }
    #menu_utilidades_usuario {
        border-left: none;
        border-right: none;
    }
    #datos_usuario {
        justify-content: center;
        background-color: var(--color-utilidades-bg3);
    }    
    #datos_usuario #datos_personales {
        max-width: 22em;
    }    
    #utilidades_usuario .util {
        padding: 0.2em 0;
        font-size: 1.1em;
    }    
}

@media (max-width: 992px) { 
    #menu_utilidades_usuario {
        width: 100%;
        margin: 0;
    }
    #datos_usuario #datos_personales {
        max-width: 56em;
    }
}

@media (max-width: 768px) {
    #contenedor_utilidades_usuario {
        margin-bottom: 1em;
    }

    #utilidades_usuario .util {
        font-size: 1.3em;
        padding: 0.2em 0;
    }      
    #datos_usuario {
        border-bottom: 1px solid var(--color-utilidades-fg);
    }
    #datos_usuario #datos_personales {
        max-width: 34em;
    }
}